:root{--bg: #16181c;--panel: #21242a;--panel-2: #1a1d22;--border: #33373f;--text: #e6e8ea;--text-dim: #9aa0a6;--accent: #4da3ff;--danger: #ff6b6b;--ok: #5fd28a;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:var(--bg);color:var(--text);font:13px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}.app{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;height:100%}.toolbar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap}.toolbar .title{font-weight:600;letter-spacing:.2px;margin-right:8px;white-space:nowrap}.toolbar .spacer{flex:1}.sep{width:1px;height:22px;background:var(--border);margin:0 4px}button,.filebtn{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:5px 10px;font:inherit;cursor:pointer;white-space:nowrap}button:hover:not(:disabled),.filebtn:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}button.active{background:var(--accent);border-color:var(--accent);color:#08121d;font-weight:600}.main{display:grid;grid-template-columns:1fr 240px;min-height:0}.canvas-wrap{position:relative;min-width:0;min-height:0;overflow:hidden}.canvas-wrap canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.canvas-wrap canvas.overlay{z-index:2;cursor:crosshair;touch-action:none}.side{background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;min-height:0}.side section{border-bottom:1px solid var(--border);padding:8px 10px}.side h2{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text-dim);margin:0 0 6px;font-weight:600}.layer-row{display:flex;align-items:center;gap:6px;padding:2px 0}.layer-row .swatch{width:11px;height:11px;border-radius:2px;border:1px solid rgba(255,255,255,.25);flex:none}.layer-row .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row .toggle{background:none;border:none;padding:1px 3px;color:var(--text-dim);cursor:pointer;font-size:12px;line-height:1}.layer-row .toggle.on{color:var(--accent)}.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-variant-numeric:tabular-nums}.kv dt{color:var(--text-dim)}.kv dd{margin:0;text-align:right}.status{display:flex;align-items:center;gap:14px;padding:4px 10px;background:var(--panel);border-top:1px solid var(--border);font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:12px;white-space:nowrap;overflow-x:auto}.status .coord{color:var(--text);min-width:190px}.banner{padding:6px 10px;font-size:12px;border-bottom:1px solid var(--border)}.banner.error{background:#ff6b6b1f;color:#ffb4b4}.banner.info{background:#4da3ff1a;color:#b8d8ff}.empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;color:var(--text-dim);pointer-events:none;z-index:1;padding:20px}.empty h3{margin:0 0 6px;color:var(--text);font-size:15px}.empty p{margin:2px 0;font-size:12px}.warnlist{margin:4px 0 0;padding-left:16px;max-height:90px;overflow-y:auto;font-size:11px;color:var(--text-dim)}.cmdline{display:flex;align-items:center;gap:10px;padding:5px 10px;background:var(--panel-2);border-top:1px solid var(--border)}.cmdline-prompt{color:var(--text-dim);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:240px;overflow:hidden;text-overflow:ellipsis}.cmdline-input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font:inherit;padding:4px 8px;font-family:ui-monospace,SF Mono,Menlo,monospace}.cmdline-input:focus{outline:none;border-color:var(--accent)}.cmdline-input.has-error{border-color:var(--danger)}.cmdline-prompt:has(+.has-error),.cmdline-input.has-error+.cmdline-prompt{color:var(--danger)}.snap-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}.snap-item{display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer;text-transform:capitalize;color:var(--text-dim)}.snap-item input{accent-color:var(--accent);margin:0}.layer-row .name{flex:1;background:none;border:none;padding:1px 2px;color:var(--text);text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit}.layer-row.current .name{color:var(--accent);font-weight:600}.layer-row .name:hover{text-decoration:underline}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:grid;place-items:center;z-index:100}.modal{background:var(--panel);border:1px solid var(--border);border-radius:8px;width:min(560px,92vw);max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 40px #00000080}.modal header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border)}.modal header h2{margin:0;font-size:14px;font-weight:600;color:var(--text);text-transform:none;letter-spacing:0}.modal-body{padding:8px 14px 14px;overflow-y:auto}.dim{color:var(--text-dim)}.drawing-row{display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)}.drawing-open{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;background:none;border:none;color:var(--text);text-align:left;padding:6px 4px;cursor:pointer;font:inherit;min-width:0}.drawing-open:hover{background:#ffffff0d;border-radius:4px}.drawing-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.danger{border-color:var(--danger);color:var(--danger)}.name-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font:inherit;font-weight:600;padding:4px 7px;margin-bottom:7px}.name-input:focus{outline:none;border-color:var(--accent)}.save-state.dirty{color:#ffd166}.save-state.saving{color:var(--accent)}.save-state.error{color:var(--danger)}.save-state.saved,.save-state.clean{color:var(--ok)}.help-modal{width:min(860px,94vw)}.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:4px 22px}.help-grid section{border:none;padding:6px 0}.help-grid h3{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--accent);margin:0 0 5px;font-weight:600}.help-grid dl{margin:0}.help-row{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:10px;align-items:baseline;padding:1px 0}.help-row dt{margin:0}.help-row dd{margin:0;color:var(--text-dim);font-size:12px}kbd{display:inline-block;background:var(--bg);border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:1px 5px;font:11px/1.5 ui-monospace,Menlo,monospace;color:var(--text);white-space:nowrap}