:root{--paper: #e4e7ea;--panel: #f4f5f7;--popover: #ffffff;--ink: #20242b;--on-ink: #ffffff;--ink-soft: rgba(32, 36, 43, .08);--ink-hover: #343a45;--muted: #7a8290;--line: #d3d7dd;--shadow: rgba(32, 36, 43, .14);--front: #e8620c;--front-soft: rgba(232, 98, 12, .13);--back: #2f6bea;--back-soft: rgba(47, 107, 234, .13);--danger: #c92a2a;--viewport: #e0e3e7;--radius: 8px;--mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace}body[data-theme=dark]{--paper: #17191d;--panel: #1f2226;--popover: #262a2f;--ink: #e7e9ec;--on-ink: #16181b;--ink-soft: rgba(231, 233, 236, .09);--ink-hover: #d0d4da;--muted: #8b93a0;--line: #32363c;--shadow: rgba(0, 0, 0, .5);--front: #ff7a2e;--front-soft: rgba(255, 122, 46, .16);--back: #5b8cff;--back-soft: rgba(91, 140, 255, .16);--danger: #ff6b6b;--viewport: #1b1d21}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{background:var(--paper);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:13px;overflow:hidden;-webkit-user-select:none;user-select:none}#app{display:flex;flex-direction:column}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}#topbar{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);height:48px;padding:0 clamp(8px,1.4vw,18px);background:var(--panel);border-bottom:1px solid var(--line)}.wordmark{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:-.02em}.wm-front{color:var(--front)}.wm-back{color:var(--back)}.project-block{display:flex;align-items:center;gap:4px;min-width:0}#project-name{background:transparent;border:1px solid transparent;border-radius:6px;color:var(--muted);font:inherit;padding:4px 8px;width:clamp(90px,14vw,170px);min-width:0}#project-name:hover,#project-name:focus{border-color:var(--line);background:var(--popover);color:var(--ink);outline:none}#dirty-flag{color:var(--muted);font-size:10px}.topbar-spacer{flex:1}.ghost-btn{display:inline-flex;align-items:center;justify-content:center;height:32px;width:34px;background:transparent;border:none;border-radius:6px;cursor:pointer;color:var(--ink)}.ghost-btn:hover{background:var(--ink-soft)}.ghost-btn:disabled{opacity:.3;cursor:default}.ghost-btn svg{display:block}.history-block{display:flex;gap:2px}#side-controls{display:flex;align-items:center;gap:2px;padding:3px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}.side-btn{height:26px;padding:0 12px;background:transparent;border:none;border-radius:6px;cursor:pointer;font-weight:600;color:var(--muted)}#side-controls .ghost-btn{height:26px;width:28px}#side-controls.locked .side-btn{opacity:.45;pointer-events:none}.side-btn.side-front.active{background:var(--front-soft);color:var(--front)}.side-btn.side-back.active{background:var(--back-soft);color:var(--back)}.export-wrap{position:relative}#btn-export{height:32px;padding:0 18px;background:var(--ink);border:none;border-radius:var(--radius);color:var(--on-ink);cursor:pointer;font-weight:600}#btn-export:hover{background:var(--ink-hover)}.menu-wrap{position:relative}#menu-dropdown{position:absolute;top:40px;left:0;min-width:190px;background:var(--popover);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 28px var(--shadow);padding:6px;z-index:20}.menu-item{display:block;width:100%;background:transparent;border:none;border-radius:6px;cursor:pointer;padding:8px 10px;text-align:left}.menu-item:hover{background:var(--ink-soft)}.menu-divider{border-top:1px solid var(--line);margin:6px 2px}.menu-section{padding:4px 10px 8px}.menu-label{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.menu-size-row{display:flex;align-items:center;gap:6px;color:var(--muted)}.menu-size-row input{width:52px;background:var(--paper);border:1px solid var(--line);border-radius:6px;color:var(--ink);font-family:var(--mono);padding:5px 6px;text-align:right}.menu-size-row button{margin-left:auto;background:var(--ink);border:none;border-radius:6px;color:var(--on-ink);cursor:pointer;font-weight:600;padding:6px 12px}#workspace{display:flex;flex:1;min-height:0}#tool-rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-right:1px solid var(--line);background:var(--panel)}.rail-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;width:38px;background:transparent;border:none;border-radius:var(--radius);cursor:pointer;color:var(--ink)}.rail-btn:hover{background:var(--ink-soft)}.rail-btn.active{background:var(--ink);color:var(--on-ink)}.rail-btn svg{display:block}.rail-divider{width:22px;border-top:1px solid var(--line);margin:6px 0}#editor-panel{flex:1.4;position:relative;min-width:0;overflow:hidden}#editor-canvas{position:absolute;top:0;right:0;bottom:0;left:0;image-rendering:pixelated;cursor:crosshair}#preview-panel{flex:1;min-width:clamp(200px,26vw,460px);display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--viewport, #e0e3e7)}#preview-container{flex:1;min-height:0}#preview-container canvas{display:block}#preview-stats{display:flex;gap:14px;padding:7px 12px;border-top:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:11px}#shelf{display:flex;align-items:flex-start;gap:clamp(12px,2vw,28px);padding:10px clamp(10px,1.6vw,20px) 12px;background:var(--panel);border-top:1px solid var(--line);flex-wrap:wrap}.shelf-group{display:flex;align-items:flex-start;gap:10px;min-width:0}.shelf-label{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding-top:8px;width:38px;flex-shrink:0;text-align:right}.shelf-items{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.shape-swatch{height:28px;width:28px;padding:0;background:transparent;border:2px solid transparent;border-radius:6px;cursor:pointer;line-height:0}.shape-swatch:hover{background:var(--ink-soft)}.shape-swatch.active{border-color:var(--ink);background:var(--popover)}.shape-swatch canvas{width:100%;height:100%}.swatch{height:22px;width:22px;border:2px solid rgba(32,36,43,.12);border-radius:6px;cursor:pointer;padding:0}.swatch:hover{border-color:#20242b73}.swatch.active{border-color:var(--ink);outline:2px solid var(--popover);outline-offset:-4px}.picker-chip{position:relative;height:22px;width:22px;overflow:hidden;border-radius:6px;border:2px dashed rgba(32,36,43,.35);cursor:pointer}.picker-chip input[type=color]{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;width:40px;height:40px;border:none;padding:0;cursor:pointer}.shelf-items.removing .swatch{border-style:dashed;border-color:var(--danger)}.shelf-extra{position:relative;display:flex;align-items:center;padding-top:1px}.shelf-extra .ghost-btn{height:28px;width:30px;color:var(--muted)}.shelf-extra .ghost-btn:hover{color:var(--ink)}.shelf-popover{position:absolute;bottom:calc(100% + 10px);right:0;min-width:210px;background:var(--popover);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 28px var(--shadow);padding:6px;z-index:20}.shelf-popover .export-row{grid-template-columns:52px 1fr}.shelf-popover{padding:12px;min-width:300px}.ad-invert{display:flex;align-items:center;gap:7px;color:var(--ink);cursor:pointer}.export-scale span{color:var(--muted)}.depth-max{display:inline-flex;align-items:center;gap:5px;margin-left:6px;color:var(--muted);font-size:11px}.depth-max input{width:44px;background:var(--paper);border:1px solid var(--line);border-radius:6px;color:var(--ink);font-family:var(--mono);font-size:12px;padding:4px 5px;text-align:right}.depth-btn{height:26px;width:26px;background:transparent;border:2px solid transparent;border-radius:6px;color:var(--muted);cursor:pointer;font-family:var(--mono);font-size:13px;font-weight:600}.depth-btn:hover{background:var(--ink-soft);color:var(--ink)}.depth-btn.active{border-color:var(--ink);background:var(--popover);color:var(--ink)}#export-popover{position:absolute;top:40px;right:0;width:300px;background:var(--popover);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 28px var(--shadow);padding:14px;z-index:20}.export-row{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:10px;margin-bottom:10px}.export-row>label{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:right}.seg{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:2px;gap:2px}.seg button{flex:1;background:transparent;border:none;border-radius:6px;color:var(--muted);cursor:pointer;font-weight:600;padding:6px 0}.seg button:hover{color:var(--ink)}.seg button.active{background:var(--ink);color:var(--on-ink)}.export-scale{display:flex;align-items:center;gap:8px}.export-scale input{width:76px;background:var(--popover);border:1px solid var(--line);border-radius:6px;color:var(--ink);font-family:var(--mono);padding:6px 8px;text-align:right}.export-hint{grid-column:2;color:var(--muted);font-size:11px;line-height:1.5}.export-go{grid-column:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);border:none;border-radius:var(--radius);color:var(--on-ink);cursor:pointer;font-weight:600;padding:9px 0;width:100%}.export-go:hover{background:var(--ink-hover)}#toast{position:fixed;bottom:76px;left:50%;transform:translate(-50%,8px);background:var(--ink);border-radius:var(--radius);color:var(--on-ink);padding:9px 16px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:30}#toast.visible{opacity:1;transform:translate(-50%)}#toast.error{background:var(--danger)}@media(prefers-reduced-motion:reduce){#toast{transition:none}}