:root{--accent:#3480f6;--accent-dark:#1764d7;--text:#15243a;--muted:#74849b;--border:#e2eaf4;--surface:#fff;--bg:#f5f8fc;--shadow:0 12px 38px rgba(28,60,116,.055);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:var(--text);font-synthesis:none}*{box-sizing:border-box}body,html{margin:0;min-height:100%;background:var(--bg)}body{min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}#stage:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #76aeff;outline-offset:2px}button,input,select{min-width:0}.skip{position:absolute;top:-80px;left:20px;background:#fff;padding:12px;z-index:30}.skip:focus{top:10px}h1,h2,h3,p{margin:0}h1{font-size:21px;letter-spacing:-.04em}h2{font-size:20px;letter-spacing:-.035em}h3{font-size:14px}p{line-height:1.55}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:14px}.brand,.brandbar,.dialog-actions,.dialog-top,.group-title,.head-actions,.inline-name,.layer-actions,.mobile-panels,.statusbar,.toolbar,.toolbar-block,.topbar-right{display:flex;align-items:center;gap:10px}.brand{text-decoration:none;font-size:19px;font-weight:760;color:#1b3d67;letter-spacing:-.055em}.brandmark{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:linear-gradient(150deg,#67c1ff,#2974ee);color:#fff;font-size:20px}.slash{color:#afbed0;font-size:23px;margin:0 4px}.brandbar>strong{font-size:13px;font-weight:650}.studio-badge{font-size:9px;font-weight:800;letter-spacing:.14em;background:#edf4ff;color:#347ae8;border:1px solid #dbeaff;padding:5px 8px;border-radius:7px}.local{font-size:12px;color:var(--muted);white-space:nowrap}.green-dot{display:inline-block;width:7px;height:7px;border-radius:100%;background:#39b98b;margin-right:5px}.shell{display:grid;grid-template-columns:265px minmax(420px,1fr) 285px;gap:14px;padding:16px;min-height:calc(100vh - 72px);max-width:1920px;margin:auto}.panel{background:var(--surface);border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow)}.left,.right{padding:20px;min-height:720px}.section-header{margin-bottom:20px}.eyebrow{display:block;color:#4e8de3;font-size:10px;letter-spacing:.14em;font-weight:800;margin-bottom:7px}.section-header p{font-size:12px;color:var(--muted);margin-top:7px}.btn{border:1px solid transparent;background:#f0f5fc;color:#325476;padding:10px 13px;border-radius:10px;font-size:12px;font-weight:720;transition:background .15s,transform .15s;white-space:nowrap}.brush:active,.btn:not(:disabled):active{transform:scale(.985)}.btn.primary{background:linear-gradient(130deg,#428cfc,#2670e9);color:#fff;box-shadow:0 5px 12px rgba(49,125,239,.18)}.btn.primary:hover{background:#1d65d7}.btn.outline{background:#fff;border-color:#d9e5f2}.btn.ghost{background:0 0}.btn.ghost:hover,.btn.outline:hover{background:#f1f6ff}.btn.small{padding:7px 10px;font-size:11px}.btn.full{width:100%}.brush-list{display:flex;flex-direction:column;gap:5px}.brush{width:100%;border:1px solid transparent;background:0 0;border-radius:12px;display:flex;gap:10px;align-items:center;text-align:left;padding:8px 10px;color:var(--text)}.brush.active,.brush:hover{background:#f0f6ff}.brush.active{border-color:#c8dfff}.brush-glyph{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#f4f7fc;color:#3174d6;font-size:21px;flex:none}.brush.active .brush-glyph{background:#dceaff}.brush small,.brush strong{display:block}.brush strong{font-size:12px}.brush small{color:var(--muted);font-size:10px;margin-top:4px}.section-divider{height:1px;background:var(--border);margin:18px 0}.group-title{justify-content:space-between;margin-bottom:13px}.group-title h2{font-size:14px}.color-picker{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:650}.color-picker input{width:29px;height:29px;border:0;background:0 0;padding:0;cursor:pointer}.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}.swatch{border:2px solid #fff;border-radius:9px;aspect-ratio:1/1;min-width:0;box-shadow:0 0 0 1px #d7e3f2}.swatch.active{box-shadow:0 0 0 2px #4584f1}.color-readout{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-top:13px}.linkbtn{border:0;background:0 0;font-size:11px;color:#3379df}.control{margin:15px 0}.control>label{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:650;margin-bottom:9px}.control output{color:#4286e3;font-variant-numeric:tabular-nums}.control input[type=range]{display:block;width:100%;accent-color:#3482f5}.control select{width:100%;background:#f7f9fd;padding:10px;border:1px solid #e0e9f4;border-radius:9px;font-size:12px;color:#334963}.check-row{display:flex;align-items:center;gap:9px;color:#51647e;font-size:11px;margin-top:12px;line-height:1.45}.check-row input{accent-color:#347df1;width:15px;height:15px}.panel-end{display:grid;gap:7px;margin-top:22px}.center{display:flex;flex-direction:column;gap:12px;min-width:0}.editor-head{min-height:85px;padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.project-title{min-width:210px}.inline-name{gap:10px}.inline-name input{max-width:240px;width:100%;border:0;background:0 0;color:var(--text);font-size:20px;font-weight:750;letter-spacing:-.045em;outline:0;padding:3px 0}.save-status{padding:5px 8px;background:#f0f7ff;border-radius:8px;font-size:10px;color:#4883be;white-space:nowrap}.head-actions{flex-wrap:wrap;gap:6px}.iconbtn{width:34px;height:34px;display:grid;place-items:center;background:#f6f9fe;border:1px solid #e1eaf4;border-radius:9px;color:#3c638e;font-size:19px}.iconbtn:hover:not(:disabled){background:#eaf3ff}.iconbtn.danger{color:#de6475}.toolbar{padding:9px 13px;justify-content:space-between;flex-wrap:wrap;gap:9px}.toolbar-block{gap:5px}.separator{height:25px;width:1px;background:#e4ecf6}.tool{background:#fff;border:1px solid transparent;border-radius:8px;color:#456581;padding:8px 10px;font-size:12px;font-weight:650;white-space:nowrap}.tool.active{background:#e9f3ff;border-color:#c8def8;color:#3176d9}.tool.smaller{font-size:11px}.level{min-width:45px;text-align:center;font-size:11px;color:#4a627e;font-weight:750;font-variant-numeric:tabular-nums}.stage{flex:1;min-height:480px;background:#e7eef7;overflow:hidden;border:1px solid #d9e3ef;border-radius:17px;position:relative;touch-action:none;cursor:crosshair;background-image:radial-gradient(#d2ddea 1px,transparent 1px);background-size:19px 19px}.stage.hand{cursor:grab}.stage.dragging{cursor:grabbing}.canvas-surface{position:absolute;left:50%;top:50%;width:1200px;height:800px;transform-origin:center;box-shadow:0 17px 45px rgba(27,50,75,.2);background:repeating-conic-gradient(#fafbfd 0 25%,#ebeff5 0 50%) 50%/20px 20px;will-change:transform}.canvas-surface canvas{display:block;position:absolute;inset:0;width:100%;height:100%}#guideCanvas{pointer-events:none}.stage-hint{position:absolute;left:14px;bottom:13px;color:#657b94;font-size:11px;padding:8px 10px;border:1px solid #d7e4f1;border-radius:8px;background:#ffffffd9;pointer-events:none}.statusbar{border-radius:12px;min-height:36px;padding:8px 14px;gap:18px;flex-wrap:wrap;color:#7389a4;font-size:10px;font-variant-numeric:tabular-nums}.right .compact{margin-bottom:18px}.right .compact h2{font-size:20px}.count{font-size:10px;background:#eaf1fa;color:#4e7db9;padding:3px 7px;border-radius:12px}.layers{display:flex;flex-direction:column;gap:7px;max-height:270px;overflow:auto}.layer{width:100%;display:flex;align-items:center;gap:7px;padding:7px;border-radius:10px;background:#f8fafe;border:1px solid #e5ecf5;text-align:left}.layer.selected{border-color:#81b6f9;background:#eaf3ff}.layer-preview{width:42px;height:35px;border-radius:6px;border:1px solid #dae3ed;object-fit:contain;background:repeating-conic-gradient(#fff 0 25%,#e9eefa 0 50%) 50%/12px 12px}.layer-name{min-width:0;flex:1;font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-controls{display:flex;gap:2px}.tiny-btn{border:0;background:0 0;border-radius:6px;padding:5px;color:#667d9e;font-size:13px}.tiny-btn:hover{background:#dceafe}.layer-actions{gap:7px;margin:11px 0 19px}.layer-actions .iconbtn{flex:1;width:auto}.fineprint{font-size:11px;color:#8897aa;line-height:1.6;margin-top:13px}.workspace-actions{display:grid;gap:8px}.banner{background:#fff1ef;border:1px solid #f1c1b9;border-radius:11px;padding:10px 13px;color:#ac4a41;font-size:12px}.mobile-panels{display:none}.seo{margin:12px auto 40px;padding:22px 25px;max-width:1200px;color:#64748b}.seo h2{font-size:17px;color:#294362;margin-bottom:7px}.seo p{font-size:12px;margin-top:9px}dialog{border:1px solid #dce7f4;border-radius:19px;padding:26px;width:min(470px,calc(100vw - 30px));box-shadow:0 22px 85px #0d346738;color:var(--text)}dialog::backdrop{background:rgba(17,39,72,.37)}dialog h2{margin-bottom:9px}dialog p{font-size:13px;color:#6e819b;margin-bottom:16px}.dialog-top{justify-content:space-between;align-items:flex-start}.export-options{display:grid;gap:10px}.export-option{background:#f6f9fd;border:1px solid #dce6f3;border-radius:12px;text-align:left;padding:14px;display:grid;gap:5px;color:#243d5b}.export-option:hover{background:#edf4ff;border-color:#9abff7}.export-option strong{font-size:13px}.export-option span{font-size:11px;color:#7287a0}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.two-cols label{font-size:12px;color:#506685;display:grid;gap:8px}.two-cols input{width:100%;border:1px solid #dce4ee;border-radius:9px;padding:10px}.dialog-actions{justify-content:flex-end;margin-top:20px}.toast{position:fixed;right:24px;bottom:20px;z-index:100;background:#203b5c;color:#fff;padding:13px 17px;border-radius:11px;font-size:12px;box-shadow:0 10px 35px #0b2a4740;max-width:340px}[hidden]{display:none!important}@media(max-width:1200px){.shell{grid-template-columns:224px minmax(310px,1fr) 245px;gap:9px;padding:9px}.left,.right{padding:14px}.topbar{padding:0 16px}.head-actions .btn{padding:9px}.toolbar .separator{display:none}.brandbar>strong{font-size:12px}}@media(max-width:980px){.shell{grid-template-columns:230px minmax(300px,1fr)}.right{display:none;position:fixed;right:0;top:72px;bottom:65px;width:min(350px,95vw);overflow:auto;z-index:21;box-shadow:-10px 0 35px #17344d32;border-radius:14px 0 0 14px}.right.show{display:block}.stage{min-height:520px}.mobile-panels{display:flex;position:sticky;bottom:0;z-index:24;background:#fff;border-top:1px solid var(--border);padding:10px;justify-content:center;gap:8px}}@media(max-width:690px){.topbar{height:58px}.brandbar{gap:6px}.brandbar>strong{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand{font-size:16px}.local,.slash,.studio-badge{display:none}.shell{grid-template-columns:minmax(0,1fr);padding:8px}.left{display:none;position:fixed;left:0;top:58px;bottom:65px;width:min(320px,92vw);overflow:auto;z-index:21;box-shadow:10px 0 35px #17344d32;border-radius:0 14px 14px 0}.left.show{display:block}.right{top:58px}.editor-head{padding:12px;gap:8px}.project-title{min-width:130px}.inline-name input{max-width:175px;font-size:17px}.head-actions{gap:4px}.head-actions .btn{font-size:11px;padding:8px}.toolbar{justify-content:center}.toolbar-block{gap:3px}.tool{padding:7px}.tool span{display:none}.stage{min-height:calc(100dvh - 325px);height:480px;flex:none}.statusbar{gap:10px}.mobile-panels .btn{flex:1}.seo{padding:17px}.topbar-right .btn{padding:7px 10px}}@media(prefers-reduced-motion:reduce){*,::after,::before{transition:none!important;animation:none!important}}