@import "tailwindcss"; *{box-sizing:border-box}body{margin:0;color:#242424;background:#faf9f7;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 #eee;background:white}aside a{display:block;margin-top:30px}.logo{color:#ff2442}section{padding:70px 6vw}h1{font-size:40px;letter-spacing:-1.5px}section>p,.hint{color:#888}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,340px));gap:24px;margin-top:45px}.card{background:white;padding:14px;border-radius:22px;border:1px solid #eee}.cover{background:#ffe5df;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:#888}.card span{color:#ff2442}.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 #eee}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:#28362f} .trial-nav{padding-bottom:24px;border-bottom:1px solid #dedfd8;font-size:13px;letter-spacing:.04em} .trial-nav span{color:#7c847d}.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:#758276}.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:#727b72} .trial-source{display:grid;gap:10px;font-size:12px;min-width:140px;color:#758276}.trial-source b{color:#28362f} .trial-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start} .trial-controls{padding:22px;border:1px solid #dedfd8;background:#fff;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:#4d594f}.trial-controls small{font-size:10px;color:#879087;margin-left:4px} .trial-controls input:not([type=checkbox]),.trial-controls select,.trial-controls textarea{display:block;width:100%;border:1px solid #d8dcd5;border-radius:4px;padding:9px;margin-top:7px;background:#fafbf8;color:#28362f;font:inherit;line-height:1.5} .trial-controls fieldset{border:0;border-top:1px solid #e5e8df;padding:12px 0 0;margin:20px 0}.trial-controls legend{font-size:11px;padding-right:8px;color:#879087}.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:#44614b} .trial-actions{display:grid;gap:8px}.trial-actions button{padding:11px 8px;border:1px solid #dce1d7;border-radius:4px;font-size:12px;background:#fff;color:#455443}.trial-actions .trial-primary{background:#344f3c;color:white;border-color:#344f3c}.trial-actions button:hover{filter:brightness(.94)} .trial-help{font-size:11px;line-height:1.7;color:#8a9288;margin-top:16px}.trial-notice{font-size:11px;color:#346844;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:#f4f2eb;box-shadow:0 3px 14px #28362f14;outline:1px solid #dddcd3;outline-offset:0;transition:outline-color .15s}.proof-active .proof-select{outline:2px solid #617d65;outline-offset:5px}.proof-select:focus-visible{outline:3px solid #346844;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:#92988e}.proof-card figcaption a{margin-left:auto;text-decoration:underline;text-underline-offset:3px;color:#61735e} .trial-reference{margin-top:36px;padding:20px 0;border-top:1px solid #dedfd8;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 #dedfd8;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 #28362f14}.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 #d8dcd5;background:#fff}.selection-thumbs button[aria-pressed=true]{outline:2px solid #617d65;outline-offset:4px}.selection-thumbs span{display:block;font-size:12px;padding:10px} .trial-controls details{border-top:1px solid #dedfd8;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:#687268}.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:#f5f5ef;padding-bottom:90px;color:#28312e} .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 #ff2442}.is-editing .native-element.is-selected{outline:2px solid #ff2442}.is-editing .native-copy[contenteditable=plaintext-only]{cursor:text}.native-element:focus-visible{outline:2px solid #ff2442} .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 #e1e3dc;background:#fffffff2;box-shadow:0 5px 30px #25312b14;border-radius:32px;backdrop-filter:blur(12px);font-size:13px;white-space:nowrap} .page-tools a{padding:10px}.page-tools button{background:transparent;color:#28312e;padding:10px 14px;font:inherit}.page-tools .page-save{background:#283e32;color:#fff}.page-tools button:disabled{opacity:.4;cursor:default}.page-layout-number{font-size:10px;letter-spacing:.08em;color:#7e8881;padding:0 5px}.page-dirty{color:#ff2442;padding-right:8px} .page-edit-info{position:relative;max-width:860px;margin:20px auto 0;padding:18px 20px;background:#fff;border-top:1px solid #e1e3dc;font-size:13px}.page-edit-info p{margin:0 0 16px;color:#657168}.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 #dbe0d8;border-radius:5px;background:#fff;color:#28312e;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:#f2f4ee;border-radius:5px;padding:9px 12px;color:#28312e} .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 #dbe0d8;border-radius:14px;padding:16px;background:#fffffff7;box-shadow:0 10px 40px #25312b24;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:#283e32;color:#fff;border-radius:8px;font-size:13px;box-shadow:0 4px 20px #0002} @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:#f1f2f4;color:#20232b;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:#fff;border-bottom:1px solid #e6e7eb;font-size:12px}.studio-mark{display:flex;align-items:center;gap:7px;font-weight:800;font-size:23px;color:#6857e8}.studio-mark span{font-size:10px;letter-spacing:.1em;color:#262831}.workbench-top input{border:0;background:transparent;font-size:13px;min-width:80px;width:240px;padding:8px}.save-indicator{margin-left:auto;color:#7a7f8b;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:#f0eefc}.workbench-top button.primary{background:#6857e8;color:#fff;padding:9px 16px}.is-editing button:disabled{opacity:.35;cursor:default}.workbench-layers,.workbench-properties{position:fixed;top:58px;bottom:0;background:#fff;z-index:45;font-size:12px;overflow:auto}.workbench-layers{left:0;width:232px;border-right:1px solid #e3e5e9;display:flex;flex-direction:column}.workbench-properties{right:0;width:272px;border-left:1px solid #e3e5e9}.panel-heading{height:53px;display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid #eeeff2;flex-shrink:0}.panel-heading span{margin-left:auto;font-size:10px;color:#8e929d;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:#f7f7f9;border:1px solid #ececf1;font-size:11px;padding:12px 5px}.insert-tools svg{width:16px;height:16px}.layers-caption{padding:12px 16px;color:#797e8c;font-size:10px;display:flex;justify-content:space-between}.layers-caption span{font-size:10px;color:#a0a4ae}.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:#eeeaff;color:#6752d9}.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:#9195a0;padding:16px;border-top:1px solid #eee;margin:20px 0 0}.workbench-viewport{height:100%;overflow:auto;padding:38px 48px 100px;background-image:radial-gradient(#cdd0d8 .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:#858b98;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:#8570ee}.is-editing .native-element.is-selected{outline:1.5px solid #7761e5;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:#fff;border:1.5px solid #7761e5;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 #7761e5;background:#fff;color:#7761e5;padding:0;border-radius:50%;cursor:grab;font-size:14px;z-index:10}.workbench-properties section{padding:18px 16px;border-bottom:1px solid #eeeff2}.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:#9b9eaa;font-weight:400}.workbench-properties label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0;color:#737885;font-size:11px}.workbench-properties input,.workbench-properties select,.workbench-properties textarea{min-width:0;border:1px solid transparent;border-radius:5px;background:#f5f5f8;color:#353947;padding:8px;font:inherit}.workbench-properties input:focus,.workbench-properties textarea:focus,.workbench-properties select:focus{outline:1px solid #8170de;background:#fff}.workbench-properties input[type=color]{width:45px;height:30px;padding:3px}.workbench-properties input[type=range]{width:125px;padding:0;accent-color:#7761e5}.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:#f5f5f8;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:#f6f5fa;border:1px solid #eeedf3}.property-hint{color:#969aa5;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 #e3e3eb;border-radius:12px;background:#fff;box-shadow:0 5px 20px #30364b14;font-size:11px}.workbench-bottom>span:not(.toolbar-divider){min-width:37px;text-align:center}.toolbar-divider{height:20px;width:1px;background:#e9e9ee;margin:0 4px}.workbench-bottom .active{color:#6857e8;background:#eeeaff}.decoration-solid{background:currentColor}.conflict-notice{position:fixed;z-index:80;left:50%;top:80px;transform:translateX(-50%);width:350px;max-width:90vw;background:#fff;padding:20px;border:1px solid #e4d6b3;border-radius:12px;box-shadow:0 8px 40px #0002;font-size:12px}.conflict-notice p{line-height:1.8;color:#737885}.is-editing .page-status{bottom:85px;background:#383545}.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 #0001}.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 #0001}.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}}