:root{--ink:#202d32;--muted:#738087;--paper:#f5f7f8;--white:#fff;--line:#e5e9eb;--teal:#183f46;--teal-light:#eaf1f1;--mint:#d8e8cf;--error:#b34635;--font:"Aptos","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;--mono:"SFMono-Regular",Consolas,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:13px;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}button,a,label,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #80b0ae;outline-offset:3px}input:focus,textarea:focus,select:focus{outline:none;border-color:#759e9c;box-shadow:0 0 0 3px #183f4610}button{transition:background .16s,border-color .16s,box-shadow .16s}button:hover{filter:brightness(.97)}[hidden]{display:none!important}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.icon{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:var(--white);border-bottom:1px solid var(--line)}.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:12px;font-size:19px;font-weight:600;letter-spacing:.4px}.brand b{font-weight:450;letter-spacing:-.8px}.brand small{display:block;font-size:10px;letter-spacing:1.7px;font-weight:400;color:var(--muted);margin-top:3px}.brand-mark{display:flex;width:43px;height:34px;padding:7px 5px;gap:3px;background:var(--teal);border-radius:8px}.brand-mark i{background:#b3cfcc;width:5px;border-radius:1px}.brand-mark i:nth-child(2){background:white;width:17px}.header-center{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--teal);padding:10px 17px;background:#f2f6f6;border-radius:7px}.header-center span{font:10px var(--mono);color:#7d9294}.privacy{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--muted)}.privacy .icon{width:16px;height:16px;color:#5b7c77}
.workspace{display:grid;grid-template-columns:342px minmax(0,1fr);max-width:1720px;margin:0 auto;min-height:calc(100vh - 80px)}.settings{background:var(--white);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.settings-scroll{padding:8px 24px 0}.setting-section{padding:23px 0;border-bottom:1px solid var(--line)}.setting-section:last-child{border:0;padding-bottom:24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:17px}.section-heading h2{display:flex;gap:9px;align-items:center;font-size:14px;font-weight:600;margin:0;white-space:nowrap}.step{display:grid;place-items:center;font:11px var(--mono);width:21px;height:21px;border:1px solid #d8e2e2;border-radius:50%;color:#557174}.section-note{font-size:10px;color:#8b989d;letter-spacing:.2px}.file-drop{position:relative;display:flex;align-items:center;flex-direction:column;padding:21px 12px 19px;border:1px dashed #bdcecd;border-radius:9px;background:#f8fafa;cursor:pointer;transition:all .18s}.file-drop:hover,.file-drop.dragover,.image-drop.dragover{background:#eef5f3;border-color:#4d837e}.file-drop.has-file{border-style:solid;background:#f2f7f4}.upload-icon{display:grid;place-items:center;width:36px;height:36px;background:white;border:1px solid #e5ebeb;border-radius:8px;color:var(--teal);box-shadow:0 2px 3px #183f4605;margin-bottom:12px}.file-drop strong{font-size:12px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-drop>span:last-of-type{font-size:10px;color:var(--muted);margin-top:7px}.input-note{font-size:10px;line-height:1.65;color:#849196;margin:9px 0 0}.conversion-note{font-size:10px}.conversion-note.unavailable{color:#93806c}.ratio-presets{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:7px}.preset{padding:10px 2px;border:1px solid var(--line);border-radius:6px;background:white;font:11px var(--mono);color:#76828a}.preset.selected{color:var(--teal);background:var(--teal-light);border-color:#9ebbb9}.ratio-field{display:flex;gap:7px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:0 10px;margin-top:10px;height:38px}.ratio-field>span:first-child{color:#859097;font-size:11px;white-space:nowrap}.ratio-field input{width:100%;min-width:0;padding:6px 0;text-align:center;border:0;background:transparent;font:12px var(--mono)}.ratio-field:focus-within{border-color:#759e9c}.ratio-field input:focus{box-shadow:none}.ratio-unit{font-size:10px;color:#a1aaae;white-space:nowrap}.field-error{font-size:11px;line-height:1.5;color:var(--error);margin-bottom:0}.text-button{font-size:10px;color:#6e8586;border:0;padding:4px 0;background:none;white-space:nowrap}.text-button:hover{color:var(--teal)}
.banner-tabs{display:flex;padding:4px;background:#f2f5f5;border-radius:7px;gap:4px;margin-bottom:19px}.banner-tabs button{width:50%;border:0;background:none;border-radius:5px;padding:9px 4px;font-size:11px;color:#7c8c91}.banner-tabs button[aria-selected=true]{background:white;color:var(--teal);box-shadow:0 1px 5px #193c4512}.banner-tabs button span{font:10px var(--mono);margin-left:4px;color:#91a3a5}.field-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:11px}.field-label>span{font-size:10px;color:#95a0a5}.field-label output{font:10px var(--mono);color:#819095}.image-upload-row{display:flex;align-items:center;gap:7px}.image-drop{min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;background:white;border:1px solid var(--line);border-radius:6px;padding:10px;flex:1}.image-drop .icon{height:16px;width:16px;color:#778f90}.image-drop span{font-size:11px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-drop.has-file{border-color:#9ab7b1;color:var(--teal)}select{border:1px solid var(--line);padding:9px 7px;border-radius:6px;background:white;cursor:pointer;font-size:11px;max-width:100%}.remove-image{border:0;background:none;padding:5px 0;font-size:10px;color:var(--error)}.image-upload-row+.input-note{margin-bottom:17px}.color-controls{display:flex;align-items:center;gap:10px}.swatches{display:flex;align-items:center;gap:8px;flex:1}.swatch{width:25px;height:25px;border:1px solid #20383d1a;border-radius:50%;position:relative;padding:0;flex-shrink:0}.swatch[aria-pressed=true]:after{content:"";position:absolute;inset:-4px;border:1px solid #517774;border-radius:50%}.custom-color{display:flex;align-items:center;gap:5px;font-size:10px;color:#7f8b90;cursor:pointer}.custom-color input,input[type=color]{width:25px;height:25px;padding:2px;border:1px solid var(--line);border-radius:5px;background:white;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:1px}input[type=color]::-webkit-color-swatch{border:0;border-radius:2px}.text-field-label{margin-top:23px}textarea{resize:vertical;width:100%;border:1px solid var(--line);border-radius:7px;min-height:82px;max-height:220px;font-size:11px;line-height:1.7;padding:10px 11px;background:#fcfdfd}textarea::placeholder{color:#a0aaae}.text-options{display:flex;gap:8px;align-items:center;margin-top:8px}.text-color-label{display:flex;align-items:center;gap:5px;color:#829095;font-size:10px}.font-size-label{display:flex;align-items:center;height:32px;border:1px solid var(--line);border-radius:5px;padding:0 6px;color:#8a969b;font:10px var(--mono)}.font-size-label input{border:0;width:39px;padding:4px 0;background:transparent;font:11px var(--mono);color:var(--ink)}.text-options select{margin-left:auto;padding:7px;font-size:10px}.export-bar{padding:16px 24px 18px;border-top:1px solid var(--line);margin-top:auto;background:#fff}.export-button{background:var(--teal);color:#fff;border:0;border-radius:7px;display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 17px;font-weight:500;font-size:13px;box-shadow:0 3px 6px #183f460f}.export-button:hover{background:#24535a}.export-bar p{font-size:10px;text-align:center;margin:10px 0 0;color:#95a0a4}
.main-area{padding:42px 44px 20px;min-width:0}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:31px;gap:14px}.eyebrow{font-size:10px;color:#8b979c;letter-spacing:1.6px;margin-bottom:12px}.page-heading h1{font-size:29px;line-height:1.3;font-weight:550;letter-spacing:-1px;margin:0 0 10px;color:#263b40}.page-heading p{font-size:12px;color:#859096;margin:0;line-height:1.7}.layout-chip{display:flex;align-items:center;gap:6px;font-size:10px;white-space:nowrap;color:#6e8588;border:1px solid #dde5e6;border-radius:20px;padding:8px 12px}.layout-chip .icon{width:15px;height:15px}.preview-card{background:white;border:1px solid #e0e6e7;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px #193c4503}.preview-toolbar{height:59px;padding:0 23px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.preview-toolbar>div{display:flex;align-items:center;gap:8px}.live-dot{width:6px;height:6px;border-radius:50%;background:#77a091}.preview-toolbar h2{font-size:12px;margin:0;font-weight:500}.schematic-tag{font-size:10px;color:#a1aaae;margin-left:8px}.icon-button{display:grid;place-items:center;border:1px solid #e6ebec;background:white;width:29px;height:29px;border-radius:5px;color:#8b999d}.icon-button .icon{width:14px;height:14px}.preview-stage{padding:43px 34px 24px;background-color:#eef2f3;background-image:radial-gradient(#cad4d6 0.65px,transparent 0.65px);background-size:12px 12px}.canvas-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-size:10px;color:#8a999e}.canvas-topline strong{font:11px var(--mono);font-weight:400;color:#668083}.canvas{width:100%;aspect-ratio:928/254;display:grid;grid-template-columns:18% 64% 18%;box-shadow:0 10px 26px #23454b13;overflow:hidden;background:#e0e8e8}.banner-preview{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--teal);min-width:0;min-height:0}.banner-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.banner-placeholder{font-size:10px;color:#a5bcba;writing-mode:vertical-rl;letter-spacing:3px;user-select:none}.banner-text{position:absolute;inset:6%;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;overflow:hidden;overflow-wrap:anywhere;line-height:1.3;color:white}.center-preview{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;background:#dde6e5}.slide-frame{background:#fcfdfc;position:relative;container-type:inline-size;box-shadow:0 0 0 1px #183f4607;overflow:hidden;flex-shrink:0}.slide-corner{position:absolute;top:10%;left:7%;font-size:3cqw;color:#8a9a9b;letter-spacing:.08em}.slide-focus{position:absolute;inset:25% 7% 22%;display:flex;flex-direction:column;justify-content:center;align-items:center}.slide-ratio{font-size:20cqw;line-height:1.1;font-weight:300;letter-spacing:-.065em;color:#20474d;font-family:"Aptos Display","Helvetica Neue",sans-serif}.slide-ratio>span{color:#9cb7b2;font-weight:200;padding:0 .1em}.slide-description{color:#91a4a2;font-size:3cqw;letter-spacing:.09em;margin-top:6%}.slide-bottom{position:absolute;bottom:10%;left:7%;right:7%;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #e8edeb;padding-top:4%;font-size:2.4cqw;color:#a1adac}.slide-bottom>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slide-mini-mark{display:block;width:7%;height:2px;background:#b0c8c0;flex-shrink:0}.dimension-ruler{display:grid;grid-template-columns:18% 64% 18%;margin-top:23px;color:#8d9b9f;font-size:9px}.dimension-ruler>span{position:relative;text-align:center;display:flex;gap:7px;justify-content:center;padding-top:11px;border-top:1px solid #bacacc}.dimension-ruler>span:before,.dimension-ruler>span:last-child:after{content:"";position:absolute;top:-3px;left:0;height:5px;width:1px;background:#b6c6c8}.dimension-ruler>span:last-child:after{left:auto;right:0}.dimension-ruler b{font:10px var(--mono);font-weight:500;color:#4e7779}.preview-caption{display:flex;align-items:center;gap:5px;font-size:9px;color:#879a9c;margin-top:35px}.preview-caption .icon{width:13px;height:13px;color:#74968e}.preview-caption>span{margin-left:auto;color:#96a4a7}.preview-specs{display:grid;grid-template-columns:repeat(3,1fr);padding:23px 26px;gap:15px}.preview-specs>div{display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line);padding-left:13px}.preview-specs>div:first-child{padding-left:0}.preview-specs>div:last-child{border:0}.preview-specs span{font-size:10px;color:#8b999d}.preview-specs strong{font-size:13px;font-weight:500;color:#375259}.preview-specs small{font-size:10px;color:#9aa8aa;font-weight:400;margin-left:5px}.preview-card.expanded{position:fixed;inset:7vh 6vw;z-index:20;display:flex;flex-direction:column;box-shadow:0 0 0 100vmax #1b343b75}.preview-card.expanded .preview-stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding-left:5vw;padding-right:5vw}.preview-card.expanded .canvas{max-height:65vh}
.workspace-notes{display:flex;align-items:flex-start;gap:13px;margin:29px 3px 24px}.note-icon{background:#eaf0ed;border:1px solid #e2e9e5;border-radius:9px;padding:10px;color:#648577}.note-icon .icon{display:block;width:18px;height:18px}.workspace-notes h3{font-size:12px;font-weight:500;margin:2px 0 7px;color:#56716f}.workspace-notes p{font-size:11px;color:#8d9b9d;line-height:1.8;margin:0;max-width:610px}.help{border-top:1px solid #e0e7e7;border-bottom:1px solid #e0e7e7;padding:15px 3px;color:#819295;font-size:11px}.help summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}.help summary::-webkit-details-marker{display:none}.help summary span{font-size:16px;color:#a2afaf}.help[open] summary span{transform:rotate(45deg)}.help p{line-height:1.9;color:#8b989c;margin:14px 0 0;max-width:750px}.workspace-footer{display:flex;justify-content:space-between;color:#a2afb1;font-size:10px;margin-top:26px}.workspace-footer>span:last-child{display:flex;align-items:center;gap:7px}.workspace-footer i{width:5px;height:5px;border-radius:50%;background:#98b9a7}.result-panel{display:flex;align-items:center;gap:14px;padding:20px;margin-top:18px;border:1px solid #cddfd4;background:#f0f7f1;border-radius:10px}.result-icon{color:#568c6d;display:grid;place-items:center;width:32px;height:32px;border:1px solid #c5ddca;border-radius:50%;flex-shrink:0}.result-copy{min-width:0;flex:1}.result-copy h2{font-size:13px;font-weight:500;margin:0 0 6px;color:#406f56}.result-copy p{font-size:11px;margin:0;color:#7a9381;line-height:1.7;overflow-wrap:anywhere}.result-copy ul{padding-left:16px;margin:7px 0 0;line-height:1.7;font-size:11px;color:#8c794e}.download-button{display:flex;align-items:center;gap:6px;white-space:nowrap;padding:10px 14px;border-radius:6px;color:white;background:var(--teal);font-size:11px;text-decoration:none}.download-button .icon{width:15px;height:15px}.result-panel.error{background:#fdf3f0;border-color:#ebd4ce}.result-panel.error .result-copy h2,.result-panel.error .result-copy p,.result-panel.error .result-icon{color:#a96a59}.result-panel.error .result-icon{border-color:#ebc7bd}.result-panel.processing{background:#eef4f6;border-color:#d4e1e5}.result-panel.processing .result-copy h2,.result-panel.processing .result-copy p{color:#69858d}.processing .result-icon{border:2px solid #d6e3e6;border-top-color:#668d92;animation:spin 1s linear infinite}.processing .result-icon .icon{visibility:hidden}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#24474d;color:white;border-radius:8px;padding:12px 20px;box-shadow:0 5px 25px #193c4520;font-size:12px;z-index:30}
@media(min-width:1180px) and (min-height:860px){.settings{position:sticky;top:0;height:calc(100vh - 80px)}.settings-scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#dae3e3 transparent}.main-area{padding-top:45px}.preview-stage{padding-top:54px;padding-bottom:28px}}
@media(min-width:1500px){.workspace{grid-template-columns:365px minmax(0,1fr)}.main-area{padding:50px 65px 25px}.settings-scroll{padding-left:30px;padding-right:30px}.export-bar{padding-left:30px;padding-right:30px}.preview-stage{padding:57px 45px 30px}.page-heading h1{font-size:34px}}
@media(max-width:1180px){.main-area{padding:32px 25px 20px}.workspace{grid-template-columns:320px minmax(0,1fr)}.layout-chip{display:none}.preview-stage{padding:35px 22px 22px}.page-heading h1{font-size:25px}.schematic-tag{font-size:9px}.preview-specs{padding:20px}.settings-scroll{padding-left:20px;padding-right:20px}.swatches{gap:7px}.preview-caption>span{display:none}.dimension-ruler>span{gap:4px;font-size:8px}.banner-placeholder{font-size:8px}}
@media(max-width:860px){.app-header{padding:0 20px;height:70px}.header-center{display:none}.workspace{grid-template-columns:290px minmax(0,1fr)}.settings-scroll{padding-left:17px;padding-right:17px}.main-area{padding:27px 17px}.page-heading h1{font-size:22px}.page-heading p{font-size:11px}.schematic-tag{display:none}.preview-toolbar{padding:0 16px}.preview-specs{gap:8px;padding:17px 13px}.preview-specs strong{font-size:10px}.preview-specs small{display:none}.preview-specs>div{padding-left:3px}.dimension-ruler>span{font-size:0}.dimension-ruler b{font-size:9px}.workspace-notes{gap:8px}.workspace-notes p{font-size:10px}.privacy{font-size:10px}.section-heading h2{font-size:13px}.swatch{width:22px;height:22px}.color-controls{gap:7px}.custom-color{gap:3px}.swatches{gap:7px}.banner-tabs button{font-size:10px}.export-bar{padding:15px 17px}.text-options{gap:5px}.workspace-footer>span:first-child{display:none}.result-panel{flex-wrap:wrap}.download-button{margin-left:46px}}
@media(max-width:650px){.app-header{height:68px;padding:0 17px}.brand{font-size:17px}.brand small{font-size:9px}.privacy span{display:none}.workspace{display:flex;flex-direction:column}.settings{border-right:0;order:2}.main-area{padding:25px 17px 20px;order:1}.page-heading{margin-bottom:22px}.page-heading h1{font-size:26px}.page-heading p{font-size:11px}.preview-stage{padding:25px 18px 19px}.preview-toolbar{height:48px}.schematic-tag{display:inline;font-size:8px}.preview-caption{margin-top:23px;font-size:8px}.preview-specs strong{font-size:12px}.workspace-notes,.help,.workspace-footer{display:none}.settings-scroll{padding:0 22px}.setting-section{padding:23px 0}.section-heading h2{font-size:14px}.file-drop{padding:17px}.swatches{gap:12px;flex:0}.swatch{width:28px;height:28px}.color-controls{gap:18px}.custom-color{margin-left:auto}.banner-tabs button{font-size:12px}.text-button,.input-note{font-size:11px}.field-label{font-size:12px}textarea{font-size:12px;min-height:92px}.export-bar{padding:18px 22px 22px;position:sticky;bottom:0;z-index:5;box-shadow:0 -4px 20px #193c4506}.export-button{padding:17px;font-size:14px}.preview-card.expanded{inset:12vh 3vw;height:max-content}.preview-card.expanded .preview-stage{padding:30px 20px}.text-options select{font-size:11px}.result-panel{padding:16px}.preview-specs small{display:inline}.workspace{min-height:calc(100vh - 68px)}}
.slide-focus{inset:20% 7% 29%}.slide-description{margin-top:4%}
.canvas,.canvas-topline,.dimension-ruler{width:min(100%,calc(420px * var(--screen-ratio,3.653543)));margin-left:auto;margin-right:auto}.image-drop span{min-width:0}
.input-note{color:#687d80}.section-note,.field-label>span{color:#71838b}.field-label output,.custom-color{color:#627980}.preview-caption,.canvas-topline,.workspace-notes p,.help p{color:#667e83}.page-heading p{color:#718188}.workspace-footer{color:#74878c}
.range-field,.select-field{display:grid;grid-template-columns:72px minmax(0,1fr) 42px;align-items:center;gap:9px;margin-top:11px;font-size:11px;color:#71838b}.range-field output{font:10px var(--mono);text-align:right;color:#627980}.range-field input{width:100%;accent-color:var(--teal)}.select-field{grid-template-columns:72px minmax(0,1fr)}.select-field select{width:100%;padding:8px}.content-ratio-presets{grid-template-columns:repeat(4,1fr)}.preview-actions{display:flex;align-items:center;gap:12px}.slide-browser{display:flex;align-items:center;gap:6px;font:10px var(--mono);color:#668083}.page-button{border:1px solid #e1e8e8;background:#fff;color:#5f7e80;border-radius:5px;width:24px;height:24px;padding:0;font-size:18px;line-height:18px}.page-button:disabled{opacity:.35}.actual-slide{position:absolute;inset:0;overflow:hidden;background:#fff}.actual-slide .preview-shape{position:absolute;overflow:hidden}.actual-slide .preview-text{font-family:"Microsoft YaHei","PingFang SC",sans-serif;white-space:pre-wrap;overflow:hidden;line-height:1.25}.actual-slide .preview-image{width:100%;height:100%;object-fit:contain}.actual-slide .preview-label{position:absolute;inset:42% 8%;text-align:center;color:#7c8d90;font-size:10px}.slide-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7c9494;background:#fcfdfc}.slide-empty .slide-ratio{font-size:24cqw}.slide-empty .slide-description{font-size:3cqw;margin-top:3%}.slide-frame.has-slide{background:#fff}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}