@font-face{font-family:LittlePlay;src:url('/assets/playful-title.woff2')} :root{--ink:#39412f;--dark:#f0f1e5;--paper:#faf8f1;--paper2:#eeecdf;--line:#dbdfcf;--muted:#87907b;--lime:#647653;--mint:#c2d0ac;--orange:#cf9d74}
body{background:var(--paper);color:var(--ink)}a{color:inherit}.app-shell{max-width:1600px}.topbar{height:90px;border-color:#e7e5da}.studio-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:34px LittlePlay,'Microsoft YaHei',sans-serif;color:#60724e}.studio-brand>span{font-size:23px;color:var(--ink)}.studio-brand small{display:block;font:9px Georgia,serif;letter-spacing:.23em;margin-top:5px}.topbar nav{display:flex;gap:25px;font-size:12px;color:#79846c}.topbar nav a{text-decoration:none}.topbar nav a:hover{text-decoration:underline}.intro{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:42px;padding-bottom:24px}.intro:after{display:none}.intro h1{font:42px/1.3 LittlePlay,'Microsoft YaHei',sans-serif;letter-spacing:0;margin:15px 0}.intro h1 em{color:#809465}.intro p{font-size:13px;color:#8a917f}.eyebrow{font-size:9px;letter-spacing:.22em;font-weight:500;color:#9a9e87}.studio-session{display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-size:11px;color:#899178}.studio-session a{border:1px solid var(--line);padding:10px 16px;border-radius:30px;text-decoration:none;color:#66794f;background:#f0f3e7}.workspace-notice{margin:0 clamp(24px,4vw,68px) 25px;padding:12px 17px;border-radius:10px;background:#eeefdf;color:#899174;font-size:11px;line-height:1.8}.workspace{grid-template-columns:minmax(350px,460px) minmax(0,1fr);gap:26px}.panel{border-radius:20px;overflow:hidden;background:#fffef8;box-shadow:none}.panel-head{height:56px;background:transparent;border-bottom:1px solid #e5e7da;color:#626f52;font-size:12px;font-weight:500}.panel-index{font-size:8px;color:#a8ad97}.control-section{padding:23px 24px 14px;border-color:#e9eadf}.section-title h2{font-weight:500;font-size:14px}.step{border-radius:50%;width:25px;height:25px;background:#eff2e4;border:0;color:#82936d;font:10px Georgia,serif}.input-grid label{font-size:11px;font-weight:400;color:#7b856e}.input-grid input,.input-grid select{border-radius:8px;border:1px solid #dfe3d4;background:#fafbf5;font:14px 'Microsoft YaHei',sans-serif;font-weight:400;height:39px;color:#58644a}.input-grid input:focus,.input-grid select:focus{outline:2px solid #a9bb8c;outline-offset:2px;box-shadow:none}.input-grid input[readonly]{color:#9ba58b;background:#f0f2e7}.toggle-row label,.check{font-size:11px;color:#7c876f}input[type=checkbox]{accent-color:#74875d}.section-hint{color:#959b87;font-size:10px;line-height:1.9}.dropzone{border-radius:12px;background:#f3f5e9;border-color:#c3cfae;min-height:130px}.dropzone strong{font-weight:500;color:#71865a}.drop-icon{color:#83966d}.dropzone:hover{background:#edf2df;border-color:#9bad82}.text-button{font-size:10px;color:#899b72;margin-right:13px;text-underline-offset:4px}.derived{border:0;border-radius:10px;background:#f0f3e6;padding:14px 12px}.derived div{flex-wrap:wrap;gap:6px}.derived small{color:#949e83;font-size:9px}.derived strong{font-size:18px;font-weight:400;color:#7f9069}.generate-button{background:#65794f;color:#fffdf5;border-radius:12px;height:54px;font-size:13px;font-weight:400}.generate-button:hover{background:#52683d;transform:none}.form-note{font-size:10px}.preview-column{gap:24px;position:sticky;top:22px}.canvas-wrap{background-color:#eeeede;background-image:radial-gradient(#bdc5a9 1px,transparent 1px);background-size:22px 22px;aspect-ratio:1.45}.canvas-wrap:after{display:none}.axis{color:#a4ae91}.view-tabs,.model-tabs{border-color:#e6e8db;height:51px;padding:0 20px;gap:8px;background:#fffef8}.view-tabs button,.model-tabs button{color:#a1aa90;border:0;border-radius:25px;font-size:10px;font-weight:400}.view-tabs button.active,.model-tabs button.active{background:#e9efdb;color:#71835a;border:0}.view-tabs span,.model-tabs span{font-size:9px;color:#a4ad96}.preview-foot{font-size:9px;color:#98a28a;background:#f7f8ef;border:0}.model-stage{height:340px;background:#eeeede}#model-placeholder{color:#9da68f;font-size:12px}.output-panel .empty-state{padding:28px;color:#929c82}.empty-state strong{font-size:13px;font-weight:400}.empty-state p{font-size:11px}.empty-icon{color:#b4bfa1}.result-badge{background:#eef3e2;color:#75895e;font-weight:400}.download-list a{background:#f4f6ec;border-color:#e2e6d5;color:#667b50;border-radius:9px;font-size:12px}.download-list a span{color:#9ba88a}.bundle-button{background:#697d55;color:white;border-radius:10px}.region-tools button,.region-zoom-tools button,.lineart-preview-toolbar button{border-radius:7px;background:#f0f4e7;border-color:#cfd9c0;color:#7e9166;font-weight:400}.region-tools{font-size:10px}.region-canvas-wrap,.lineart-preview-frame{border-radius:10px}.model-progress{background:#eeefdfed}.model-progress-card{color:#6f7c5e}.model-progress-card strong{font-size:16px;font-weight:400}.model-progress-detail,.model-progress-meta{color:#8a9679;font-size:11px}.model-progress-card p{color:#9da88e;font-size:10px}.model-progress-steps[hidden]{display:none}.error-state{border-radius:10px;color:#aa7560;background:#faeee5;border-color:#e9d7c8}.form-note{color:#a2aa94}footer{border-color:#e4e6d8;color:#a1a98f;font-size:10px;gap:20px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #869e67;outline-offset:3px}button{touch-action:manipulation}
@media(min-width:1100px){.controls{max-height:calc(100vh - 55px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d6dfc6 transparent}.controls>.panel-head{position:sticky;top:0;background:#fffef8;z-index:4}.workspace{align-items:start}}
@media(max-width:1000px){.workspace{grid-template-columns:1fr 1fr;gap:16px}.preview-column{position:static}.studio-session{max-width:230px}.intro h1{font-size:35px}.model-stage{height:300px}.view-tabs span,.model-tabs span{display:none}}
@media(max-width:760px){.topbar{height:72px;padding:0 20px}.topbar nav{gap:13px;font-size:10px}.studio-brand{font-size:28px}.studio-brand>span{font-size:18px}.studio-brand small{font-size:7px}.intro{padding:30px 22px 20px;display:block}.intro h1{font-size:34px}.studio-session{margin-top:22px;align-items:flex-start;max-width:none;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}.studio-session span{max-width:45%;overflow-wrap:anywhere;font-size:10px}.studio-session a{font-size:9px;padding:8px 11px}.workspace-notice{margin:0 20px 22px;font-size:10px}.workspace{display:flex;flex-direction:column;padding:0 20px 35px}.controls,.preview-column{width:100%}.control-section{padding:20px}.panel{border-radius:16px}.preview-column{order:-1}.model-stage{height:280px}.canvas-wrap{aspect-ratio:1.25}.output-panel{margin-bottom:8px}.intro p{font-size:12px}footer{padding:22px;display:flex;flex-direction:column;align-items:flex-start;font-size:9px}.input-grid{column-gap:12px}.view-tabs,.model-tabs{height:46px}.form-note{line-height:1.8}}

.workspace-jumps{display:none}#generator-form,#box-preview-column,#output-panel{scroll-margin-top:20px}@media(max-width:760px){.workspace-jumps{display:flex;justify-content:space-between;gap:12px;padding:0 23px 20px}.workspace-jumps a{color:#899a71;font-size:10px;text-underline-offset:5px}}

/* Follow is opt-in through the visible switch; keep the site's light theme. */
.preview-column:not(.follow-scroll){position:static}.preview-column.follow-scroll{top:12px}.preview-follow-bar,.preview-tools{background:#f1f4e7;border-color:#dce3cd;border-radius:10px;color:#6c8055}.preview-tools button,.font-tools button,#lid-stand-controls button{background:#f0f4e7;border-color:#cfd9c0;color:#71865b;border-radius:7px;font-weight:400}.preview-follow-bar span,.preview-tools>span,.font-tools span{color:#8b987c}#font-preview{border-radius:9px}.preview-column.follow-scroll{scrollbar-color:#b5c3a0 #f2f5e8}@media(max-width:980px){.preview-column{grid-template-columns:1fr}.preview-follow-bar{grid-column:1}.workspace{grid-template-columns:1fr 1fr}.output-panel{grid-column:auto}}@media(max-width:760px){.workspace{display:flex}}

/* Match the intrinsic 720 x 620 drawing coordinates at every breakpoint. */
.canvas-wrap{aspect-ratio:720 / 620}.canvas-wrap #preview{display:block;width:100%;height:auto;aspect-ratio:720 / 620}