96 lines
27 KiB
CSS
96 lines
27 KiB
CSS
@import "tailwindcss";
|
|
@import "@endoleap/brand/themes.css";
|
|
@import "@endoleap/brand/tailwind.css";
|
|
*{box-sizing:border-box}body{margin:0;color:var(--foreground-strong);background:var(--selection);font-family:Arial,"PingFang SC",sans-serif}a{color:inherit;text-decoration:none}button,a{cursor:pointer}button{border:0;padding:12px 22px;border-radius:24px}.workspace{display:grid;grid-template-columns:240px 1fr;min-height:100vh}aside{padding:38px 26px;border-right:1px solid var(--border);background:var(--surface)}aside a{display:block;margin-top:30px}.logo{color:var(--primary)}section{padding:70px 6vw}h1{font-size:40px;letter-spacing:-1.5px}section>p,.hint{color:var(--muted-foreground)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,340px));gap:24px;margin-top:45px}.card{background:var(--surface);padding:14px;border-radius:22px;border:1px solid var(--border)}.cover{background:var(--selection);aspect-ratio:4/5;border-radius:14px;padding:36px;display:flex;align-items:center;font-size:35px;font-weight:bold}.card h2{font-size:18px}.card p{line-height:1.8;color:var(--muted-foreground)}.card span{color:var(--primary)}.hint{margin-top:40px;font-size:13px}.editor{max-width:1200px;margin:auto;padding:30px}header{display:flex;align-items:center;gap:24px}header a:first-child{margin-right:auto}.slides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}.slide{aspect-ratio:3/4;padding:35px;border-radius:20px;display:flex;flex-direction:column}.slide h2{font-size:38px;margin-top:auto}.slide p{line-height:1.9}.slide footer{margin-top:auto;font-size:12px}@media(max-width:760px){.workspace{grid-template-columns:1fr}aside{border-bottom:1px solid var(--border)}aside a{display:inline-block;margin:20px 20px 0 0}section{padding:30px}.slides{grid-template-columns:1fr}header{flex-wrap:wrap}h1{font-size:30px}}@media print{header{display:none}.slides{display:block}.slide{width:180mm;height:240mm;break-after:page;print-color-adjust:exact;border-radius:0}.editor>h1,.editor>p{display:none}}
|
|
|
|
/* The reference art stays inside its native 113:174 canvas. */
|
|
.cover-template{padding:0;border-radius:0;display:block;aspect-ratio:113/174;background:#f4f2eb}
|
|
.template-trial{max-width:1480px;margin:auto;padding:28px 40px 70px;color:var(--foreground-strong)}
|
|
.trial-nav{padding-bottom:24px;border-bottom:1px solid var(--border);font-size:13px;letter-spacing:.04em}
|
|
.trial-nav span{color:var(--muted-foreground)}.trial-nav a:last-child{margin-left:auto}
|
|
.trial-intro{padding:48px 0 34px;display:flex;gap:32px;justify-content:space-between;align-items:end}
|
|
.trial-intro small{font-size:11px;letter-spacing:.12em;color:var(--muted-foreground)}.trial-intro h1{font-size:44px;margin:16px 0;letter-spacing:-2px;line-height:1.2}.trial-intro p{max-width:650px;line-height:1.8;font-size:14px;color:var(--muted-foreground)}
|
|
.trial-source{display:grid;gap:10px;font-size:12px;min-width:140px;color:var(--muted-foreground)}.trial-source b{color:var(--foreground-strong)}
|
|
.trial-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
|
|
.trial-controls{padding:22px;border:1px solid var(--border);background:var(--surface);border-radius:8px;position:sticky;top:20px}
|
|
.trial-controls h2{font-size:18px;margin:0 0 20px}.trial-controls label{display:block;font-size:12px;margin:14px 0;color:var(--foreground)}.trial-controls small{font-size:10px;color:var(--muted-foreground);margin-left:4px}
|
|
.trial-controls input:not([type=checkbox]),.trial-controls select,.trial-controls textarea{display:block;width:100%;border:1px solid var(--input);border-radius:4px;padding:9px;margin-top:7px;background:var(--selection);color:var(--foreground-strong);font:inherit;line-height:1.5}
|
|
.trial-controls fieldset{border:0;border-top:1px solid var(--border);padding:12px 0 0;margin:20px 0}.trial-controls legend{font-size:11px;padding-right:8px;color:var(--muted-foreground)}.trial-controls fieldset label{margin:8px 0}
|
|
.trial-colors{display:flex;gap:16px}.trial-colors label{flex:1}.trial-controls input[type=color]{height:36px;padding:4px}.trial-controls .trial-switch{display:flex;align-items:center;gap:8px;padding:12px 0}.trial-switch input{accent-color:var(--ring)}
|
|
.trial-actions{display:grid;gap:8px}.trial-actions button{padding:11px 8px;border:1px solid var(--border);border-radius:4px;font-size:12px;background:var(--surface);color:var(--foreground)}.trial-actions .trial-primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--selection-border)}.trial-actions button:hover{filter:brightness(.94)}
|
|
.trial-help{font-size:11px;line-height:1.7;color:var(--muted-foreground);margin-top:16px}.trial-notice{font-size:11px;color:var(--success);min-height:16px}
|
|
.trial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.proof-card{margin:0;min-width:0}.proof-select{display:block;width:100%;padding:0;border-radius:0;background:var(--selection);box-shadow:0 3px 14px var(--shadow);outline:1px solid var(--ring);outline-offset:0;transition:outline-color .15s}.proof-active .proof-select{outline:2px solid var(--ring);outline-offset:5px}.proof-select:focus-visible{outline:3px solid var(--ring);outline-offset:5px}.proof-card figcaption{display:flex;gap:10px;align-items:center;padding:16px 0 0;font-size:11px;flex-wrap:wrap}.proof-card figcaption b{font-weight:500}.proof-card figcaption span{color:var(--muted-foreground)}.proof-card figcaption a{margin-left:auto;text-decoration:underline;text-underline-offset:3px;color:var(--muted-foreground)}
|
|
.trial-reference{margin-top:36px;padding:20px 0;border-top:1px solid var(--border);font-size:12px}.trial-reference summary{cursor:pointer}.trial-reference-body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;margin-top:22px;line-height:1.8}.trial-reference img{width:150px;height:auto;align-self:start}.trial-reference table{width:100%;border-collapse:collapse;font-size:11px;margin:16px 0}.trial-reference th,.trial-reference td{text-align:left;border-bottom:1px solid var(--border);padding:6px}.trial-reference a{text-decoration:underline}
|
|
@media(min-width:1300px){.trial-grid{gap:40px}.trial-workspace{gap:48px}}
|
|
@media(max-width:900px){.template-trial{padding:22px}.trial-workspace{grid-template-columns:220px minmax(0,1fr);gap:24px}.trial-grid{gap:20px}.trial-controls{padding:16px}.trial-source{display:none}.trial-intro h1{font-size:36px}.trial-nav span{display:none}}
|
|
@media(max-width:650px){.trial-workspace{grid-template-columns:1fr}.trial-controls{position:static}.trial-controls fieldset{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trial-actions{grid-template-columns:1fr 1fr}.trial-reference-body{grid-template-columns:1fr}.trial-grid{gap:24px}.trial-intro{padding:32px 0}.trial-intro h1{font-size:30px}}
|
|
@media(max-width:440px){.trial-grid{grid-template-columns:1fr}.trial-nav{gap:10px}.template-trial{padding:18px}}
|
|
@page ref17Proof{size:113mm 174mm;margin:0}
|
|
@media print{.template-trial{padding:0;max-width:none}.trial-nav,.trial-intro,.trial-controls,.trial-reference,.proof-card figcaption{display:none}.trial-workspace,.trial-grid{display:block}.proof-card{page:ref17Proof;break-after:page;width:113mm;height:174mm}.proof-card:last-child{break-after:auto}.proof-select,.proof-active .proof-select{outline:none;box-shadow:none;width:113mm;height:174mm}.proof-select svg{width:113mm!important;height:174mm!important;print-color-adjust:exact}.proof-select svg g[aria-hidden=true]{display:none}}
|
|
.selection-preview{max-width:540px;margin:auto;box-shadow:0 3px 15px var(--shadow)}.selection-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}.selection-thumbs button{padding:0;border-radius:0;border:1px solid var(--input);background:var(--surface)}.selection-thumbs button[aria-pressed=true]{outline:2px solid var(--ring);outline-offset:4px}.selection-thumbs span{display:block;font-size:12px;padding:10px}
|
|
|
|
.trial-controls details{border-top:1px solid var(--border);padding:12px 0}.trial-controls summary{cursor:pointer;margin-bottom:12px}.trial-controls label small{display:block;font-weight:400;line-height:1.6;color:var(--muted-foreground)}.trial-controls textarea{width:100%;box-sizing:border-box}.trial-controls>label input:not([type=checkbox]):not([type=color]){width:100%;box-sizing:border-box}.trial-actions button:disabled{opacity:.5;cursor:wait}
|
|
|
|
/* These are the pages themselves: live type and CSS geometry, no reference raster. */
|
|
.native-layout-page{min-height:100vh;background:var(--selection);padding-bottom:90px;color:var(--foreground-strong)}
|
|
.native-layout{position:relative;isolation:isolate;container-type:inline-size;width:min(100%,860px);margin:0 auto;overflow:hidden;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
|
.native-element{position:absolute;outline-offset:3px;min-width:0;min-height:0}
|
|
.native-image{z-index:1}.native-decoration{z-index:2}.native-text{z-index:3}
|
|
.native-image-fill{width:100%;height:100%;overflow:hidden;display:grid;place-items:center}
|
|
.native-image-fill img{width:100%;height:100%;display:block;grid-area:1/1}
|
|
.native-image-label{font-size:12px;line-height:1.4;color:#fff;background:#26312e99;padding:5px 8px;max-width:95%;text-align:center}
|
|
.native-copy{width:100%;height:100%;line-height:1.15;font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden;outline:none;letter-spacing:-.035em}
|
|
.native-copy.direction-vertical{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:0}
|
|
.native-copy.direction-rotated{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-family:Georgia,serif}
|
|
.native-copy.direction-angled{transform:rotate(-15deg);transform-origin:center;overflow:visible;font-weight:700}
|
|
.native-copy.direction-curved{writing-mode:vertical-rl;transform:rotate(13deg);letter-spacing:.13em}
|
|
.native-text:first-of-type .native-copy{font-weight:700}
|
|
.ref-01 .native-text[data-element=T01] .native-copy,.ref-08 .native-text[data-element=T01] .native-copy,.ref-10 .native-text[data-element=T01] .native-copy,.ref-15 .native-text[data-element=T01] .native-copy,.ref-15 .native-text[data-element=T02] .native-copy,.ref-17 .native-text[data-element=T01] .native-copy,.ref-17 .native-text[data-element=T02] .native-copy,.ref-18 .native-text[data-element=T02] .native-copy,.ref-18 .native-text[data-element=T03] .native-copy{font-family:Georgia,"Times New Roman",serif;font-weight:700}
|
|
.ref-08 .native-copy{text-align:justify;letter-spacing:.07em}.ref-19 .native-text[data-element=T01],.ref-19 .native-text[data-element=T02],.ref-19 .native-text[data-element=T03],.ref-19 .native-text[data-element=T04]{font-weight:800}
|
|
.native-decoration{width:100%;height:100%}.decoration-lines{display:flex;flex-direction:column;justify-content:space-between;padding:2% 0}.decoration-lines i{display:block;border-top:max(1px,.18cqw) solid currentColor;width:100%}.decoration-lines i:nth-child(2){width:76%}.decoration-lines i:nth-child(3){width:88%}
|
|
.decoration-vertical-lines{display:flex;justify-content:space-between}.decoration-vertical-lines i{height:100%;border-left:max(1px,.15cqw) solid currentColor}
|
|
.decoration-node{border-radius:50%;background:currentColor}.decoration-oval{border:.25cqw solid currentColor;border-radius:50%}
|
|
.decoration-rings{border:.4cqw solid currentColor;border-radius:50%;box-shadow:0 0 0 1.5cqw #f5f5ef,0 0 0 1.8cqw currentColor,0 0 0 3.2cqw #f5f5ef,0 0 0 3.5cqw currentColor,0 0 0 5cqw #f5f5ef,0 0 0 5.3cqw currentColor;transform:scale(.92)}
|
|
.decoration-curve{border:.3cqw solid currentColor;border-left:0;border-radius:0 75% 50% 0;transform:rotate(15deg)}
|
|
.decoration-diagonal{border-left:.3cqw solid currentColor;transform:rotate(12deg)}.decoration-band{transform:rotate(-15deg)}
|
|
.is-editing .native-element{cursor:pointer}.is-editing .native-element:hover{outline:1px dashed var(--ring)}.is-editing .native-element.is-selected{outline:2px solid var(--ring)}.is-editing .native-copy[contenteditable=plaintext-only]{cursor:text}.native-element:focus-visible{outline:2px solid var(--ring)}
|
|
.page-tools{position:fixed;z-index:30;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:5px;align-items:center;width:max-content;max-width:calc(100% - 24px);padding:6px;border:1px solid var(--border);background:var(--background);box-shadow:0 5px 30px var(--shadow);border-radius:32px;backdrop-filter:blur(12px);font-size:13px;white-space:nowrap}
|
|
.page-tools a{padding:10px}.page-tools button{background:transparent;color:var(--foreground-strong);padding:10px 14px;font:inherit}.page-tools .page-save{background:var(--primary);color:var(--primary-foreground)}.page-tools button:disabled{opacity:.4;cursor:default}.page-layout-number{font-size:10px;letter-spacing:.08em;color:var(--muted-foreground);padding:0 5px}.page-dirty{color:var(--primary);padding-right:8px}
|
|
.page-edit-info{position:relative;max-width:860px;margin:20px auto 0;padding:18px 20px;background:var(--background);border-top:1px solid var(--border);font-size:13px}.page-edit-info p{margin:0 0 16px;color:var(--muted-foreground)}.page-edit-info label{display:flex;gap:10px;align-items:center}.page-edit-info input:not([type=color]){flex:1;min-width:0}.page-edit-options{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;align-items:center}
|
|
.page-edit-info input,.page-edit-info select,.element-popover input:not([type=checkbox]),.element-popover select,.element-popover textarea{border:1px solid var(--input);border-radius:5px;background:var(--surface);color:var(--foreground-strong);padding:7px;font:inherit;max-width:100%}.page-edit-info input[type=color],.element-popover input[type=color]{width:40px;height:32px;padding:2px}.page-edit-info button,.element-popover button{font:inherit;background:var(--selection);border-radius:5px;padding:9px 12px;color:var(--foreground-strong)}
|
|
.element-popover{position:fixed;right:18px;bottom:86px;z-index:40;width:290px;max-width:calc(100vw - 24px);max-height:60dvh;overflow:auto;border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface);box-shadow:0 10px 40px var(--shadow);font-size:13px;backdrop-filter:blur(14px)}
|
|
.element-popover-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.element-popover-heading button{padding:3px 8px;background:transparent;font-size:22px}.element-popover label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.element-popover input[type=range]{width:150px}.element-popover .element-text-edit{display:block}.element-text-edit textarea{display:block;width:100%;margin-top:8px;resize:vertical}.element-popover>button{margin:5px 8px 0 0}.page-status{position:fixed;z-index:45;bottom:80px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);margin:0;padding:10px 16px;background:var(--primary);color:var(--primary-foreground);border-radius:8px;font-size:13px;box-shadow:0 4px 20px var(--shadow)}
|
|
@media(max-width:600px){.page-layout-number{display:none}.page-tools{bottom:12px}.page-tools button{padding:10px}.element-popover{right:12px;bottom:76px;width:260px}.page-edit-info{margin-top:0}.page-edit-options{gap:10px}}
|
|
@media print{.native-layout-page{padding:0;background:none}.native-layout{width:100%;margin:0;print-color-adjust:exact}.page-tools,.page-edit-info,.element-popover,.page-status{display:none!important}.native-element{outline:none!important}}
|
|
|
|
.native-copy.native-arc{position:relative;overflow:visible;white-space:pre;writing-mode:horizontal-tb;letter-spacing:0}.native-arc span{position:absolute;display:block}
|
|
/* Native design workspace: chrome is mounted only while editing. */
|
|
.is-editing.native-layout-page{height:100dvh;min-height:0;padding:58px 272px 0 232px;overflow:hidden;background:var(--background);color:var(--foreground-strong);font-family:Arial,"PingFang SC",sans-serif}
|
|
.workbench-top{position:fixed;inset:0 0 auto;height:58px;z-index:60;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border);font-size:12px}.studio-mark{display:flex;align-items:center;gap:7px;font-weight:800;font-size:23px;color:var(--primary)}.studio-mark span{font-size:10px;letter-spacing:.1em;color:var(--foreground-strong)}.workbench-top input{border:0;background:transparent;font-size:13px;min-width:80px;width:240px;padding:8px}.save-indicator{margin-left:auto;color:var(--muted-foreground);font-size:11px;white-space:nowrap}.workbench-top button,.workbench-bottom button,.workbench-layers button,.workbench-properties button,.conflict-notice button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:6px;background:transparent;color:inherit;padding:8px;cursor:pointer;font:inherit}.workbench-top button:hover,.workbench-bottom button:hover,.workbench-layers button:hover,.workbench-properties button:hover{background:var(--selection)}.workbench-top button.primary{background:var(--primary);color:var(--primary-foreground);padding:9px 16px}.is-editing button:disabled{opacity:.35;cursor:default}.workbench-layers,.workbench-properties{position:fixed;top:58px;bottom:0;background:var(--surface);z-index:45;font-size:12px;overflow:auto}.workbench-layers{left:0;width:232px;border-right:1px solid var(--border);display:flex;flex-direction:column}.workbench-properties{right:0;width:272px;border-left:1px solid var(--border)}.panel-heading{height:53px;display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid var(--border);flex-shrink:0}.panel-heading span{margin-left:auto;font-size:10px;color:var(--muted-foreground);max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.insert-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:16px}.insert-tools button{background:var(--surface);border:1px solid var(--border);font-size:11px;padding:12px 5px}.insert-tools svg{width:16px;height:16px}.layers-caption{padding:12px 16px;color:var(--muted-foreground);font-size:10px;display:flex;justify-content:space-between}.layers-caption span{font-size:10px;color:var(--muted-foreground)}.layer-list{padding:0 8px;flex:1}.layer-row{display:flex;align-items:center;gap:0;border-radius:5px;margin:2px 0;min-height:37px}.layer-row.active{background:var(--selection);color:var(--primary)}.layer-row.muted{opacity:.5}.layer-row button{padding:6px 4px}.layer-row .layer-select{flex:1;justify-content:flex-start;gap:8px;min-width:0;padding:9px 7px}.layer-select span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.layer-select svg{flex-shrink:0}.workbench-tip{font-size:10px;line-height:1.9;color:var(--muted-foreground);padding:16px;border-top:1px solid var(--border);margin:20px 0 0}.workbench-viewport{height:100%;overflow:auto;padding:38px 48px 100px;background-image:radial-gradient(var(--grid) .7px,transparent .7px);background-size:14px 14px;display:flex;flex-direction:column;align-items:center}.canvas-caption{display:flex;justify-content:space-between;width:100%;font-size:10px;color:var(--muted-foreground);margin-bottom:12px;gap:24px;max-width:860px}.is-editing .native-layout{flex-shrink:0;box-shadow:0 10px 35px #20232b13;overflow:visible}.is-editing .native-element{touch-action:none}.is-editing .native-element:hover{outline-color:var(--ring)}.is-editing .native-element.is-selected{outline:1.5px solid var(--ring);outline-offset:0}.is-editing .native-element .native-copy{cursor:move}.is-editing .native-copy[contenteditable=plaintext-only]{cursor:text;user-select:text}.native-element .resize-handle{position:absolute;right:-5px;bottom:-5px;width:9px;height:9px;background:var(--surface);border:1.5px solid var(--selection-border);padding:0;border-radius:1px;cursor:nwse-resize;z-index:10}.native-element .rotate-handle{position:absolute;left:calc(50% - 10px);top:-29px;width:20px;height:20px;border:1px solid var(--selection-border);background:var(--surface);color:var(--primary);padding:0;border-radius:50%;cursor:grab;font-size:14px;z-index:10}.workbench-properties section{padding:18px 16px;border-bottom:1px solid var(--border)}.workbench-properties h3{margin:0 0 16px;font-size:12px;font-weight:600;display:flex;justify-content:space-between;gap:10px}.workbench-properties h3 span{font-size:9px;color:var(--muted-foreground);font-weight:400}.workbench-properties label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0;color:var(--muted-foreground);font-size:11px}.workbench-properties input,.workbench-properties select,.workbench-properties textarea{min-width:0;border:1px solid transparent;border-radius:5px;background:var(--surface);color:var(--foreground-strong);padding:8px;font:inherit}.workbench-properties input:focus,.workbench-properties textarea:focus,.workbench-properties select:focus{outline:1px solid var(--ring);background:var(--surface)}.workbench-properties input[type=color]{width:45px;height:30px;padding:3px}.workbench-properties input[type=range]{width:125px;padding:0;accent-color:var(--ring)}.workbench-properties textarea{width:100%;resize:vertical;line-height:1.5}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.property-grid label{margin:0;display:flex;background:var(--surface);border-radius:5px;padding-left:9px;white-space:nowrap;font-size:10px}.property-grid input{width:100%;padding:8px 4px}.property-actions{display:flex;gap:8px;margin-top:12px}.property-actions button{flex:1;background:var(--selection);border:1px solid var(--border)}.property-hint{color:var(--muted-foreground);font-size:11px;line-height:2;margin:0}.workbench-properties fieldset{border:0;margin:0;padding:0;min-width:0}.workbench-properties fieldset:disabled{opacity:.5}.workbench-bottom{position:fixed;z-index:55;bottom:22px;left:calc(50% - 20px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 5px 20px var(--shadow);font-size:11px}.workbench-bottom>span:not(.toolbar-divider){min-width:37px;text-align:center}.toolbar-divider{height:20px;width:1px;background:var(--surface-muted);margin:0 4px}.workbench-bottom .active{color:var(--primary);background:var(--selection)}.decoration-solid{background:currentColor}.conflict-notice{position:fixed;z-index:80;left:50%;top:80px;transform:translateX(-50%);width:350px;max-width:90vw;background:var(--surface);padding:20px;border:1px solid var(--success);border-radius:12px;box-shadow:0 8px 40px var(--shadow);font-size:12px}.conflict-notice p{line-height:1.8;color:var(--muted-foreground)}.is-editing .page-status{bottom:85px;background:var(--primary);color:var(--primary-foreground)}.is-editing .native-image-fill,.is-editing .native-decoration{pointer-events:none}
|
|
@media(max-width:1100px){.is-editing.native-layout-page{padding-left:0}.workbench-layers{display:none;box-shadow:8px 0 30px var(--shadow)}.workbench-layers.mobile-open{display:flex}.workbench-top .studio-mark span{display:none}.workbench-top input{width:160px}.save-indicator{font-size:10px}.workbench-bottom{left:calc((100% - 272px)/2)}}
|
|
@media(max-width:760px){.is-editing.native-layout-page{padding-right:0}.workbench-properties{display:none;bottom:82px;box-shadow:-8px 0 30px var(--shadow)}.workbench-properties.mobile-open{display:block}.workbench-layers{bottom:82px}.workbench-top{gap:3px;padding:0 8px}.workbench-top input{width:110px;flex:1}.save-indicator{display:none}.workbench-top button{padding:7px;font-size:11px}.workbench-top .studio-mark{font-size:20px}.workbench-viewport{padding:28px 24px 100px}.workbench-bottom{left:50%}.canvas-caption{font-size:9px}}
|
|
@media print{.workbench-top,.workbench-layers,.workbench-properties,.workbench-bottom,.canvas-caption,.conflict-notice{display:none!important}.is-editing.native-layout-page{height:auto;padding:0;overflow:visible}.workbench-viewport{display:block;padding:0;overflow:visible}.is-editing .native-layout{width:100%!important;min-width:0!important;box-shadow:none;overflow:hidden}.resize-handle,.rotate-handle{display:none}}
|
|
.workbench-layers,.workbench-properties{padding:0}.workbench-top{flex-wrap:nowrap}.workbench-top a:first-child{margin-right:0}
|
|
|
|
/* Composition-specific type: preserve all 27 source geometries. */
|
|
.native-layout{font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif}
|
|
.native-copy{font-weight:450;letter-spacing:-.025em;line-height:1.2}
|
|
.native-text[data-element=T01] .native-copy{font-weight:650;letter-spacing:-.055em}
|
|
.ref-02 .direction-vertical,.ref-05 .direction-vertical,.ref-06 .direction-vertical,.ref-09 .direction-vertical,.ref-12 .direction-vertical,.ref-19 .direction-vertical,.ref-22 .direction-vertical,.ref-25 .direction-vertical,.ref-27 .direction-vertical{font-family:"Songti SC","Noto Serif CJK SC",serif;letter-spacing:.06em;font-weight:500}
|
|
.ref-03 .native-copy,.ref-11 .native-copy,.ref-13 .native-copy,.ref-14 .native-copy{letter-spacing:.025em}
|
|
.ref-04 .native-copy,.ref-20 .native-copy{font-weight:350;letter-spacing:.08em}
|
|
.ref-16 .native-copy,.ref-23 .native-copy{font-weight:600;letter-spacing:.035em}
|
|
.ref-21 .direction-rotated,.ref-24 .direction-angled,.ref-26 .native-text[data-element=T01] .native-copy,.ref-26 .native-text[data-element=T02] .native-copy,.ref-26 .native-text[data-element=T03] .native-copy{font-family:Georgia,"Songti SC",serif;font-weight:400;letter-spacing:-.055em}
|
|
.studio-library{max-width:1440px;margin:auto;padding:48px 5vw 80px}.library-nav{display:flex;justify-content:space-between;font-size:13px}.studio-library h1{font-size:clamp(32px,5vw,64px);letter-spacing:-.05em;margin:64px 0 16px}.library-intro{max-width:640px;line-height:1.8;color:var(--muted-foreground)}.library-heading{margin:64px 0 24px;display:flex;align-items:baseline;gap:18px}.library-heading h2{margin:0;font-size:24px}.library-heading a{font-size:13px;text-decoration:underline}.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}.library-item{min-width:0}.library-item .native-layout{width:100%;pointer-events:none}.library-item h3{font-size:13px;font-weight:500;margin:14px 0 5px}.library-item p{font-size:11px;color:var(--muted-foreground);margin:0}.library-item>a:focus-visible{outline:2px solid var(--ring);outline-offset:5px}.library-standard{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:40px;align-items:center}.library-standard p{max-width:480px;line-height:1.9;color:var(--muted-foreground)}.library-standard code{font-size:13px}.library-standard a{text-decoration:underline}.library-item:hover .native-layout{filter:brightness(1.025)}
|
|
@media(max-width:950px){.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}.library-standard{grid-template-columns:1fr}.library-standard .native-layout{max-width:280px}.studio-library{padding:28px 20px 60px}.library-nav{gap:12px}}
|
|
|
|
/* Keep the cross-axis line box inside narrow vertical title slots. */
|
|
.native-copy.direction-vertical,.native-copy.direction-rotated{line-height:1}
|
|
|
|
.ref-19 .native-text:is([data-element=T01],[data-element=T02],[data-element=T03],[data-element=T04]) .native-copy{font-weight:700;letter-spacing:-.06em}
|
|
|
|
/* Saved series contain artwork and page order only. Export lays out at final pixels. */
|
|
.native-series{padding-top:24px}.series-page{margin:0 auto 32px}.series-page-number{text-align:center;font-size:12px;letter-spacing:.14em;color:var(--muted-foreground);margin:14px 0 0}
|
|
.native-export{padding:0;background:transparent;min-height:0}.native-export .series-page{margin:0}.native-export .native-layout{width:1080px;max-width:none;margin:0}
|
|
@media print{.native-series{padding:0}.series-page{margin:0;break-after:page}.series-page:last-child{break-after:auto}.series-page-number{display:none}}
|