:root{--bg: #12151f;--panel: #171b27;--ed-bg: #141824;--ed-fg: #dfe3ee;--line: #262c3c;--muted: #8a92a8;--fg: #e6e9f2;--accent: #8fa6ff;--warm: #ff9e7a;--err: #ff6b6b;--warn: #f2c879;--ok: #7fd8a3;--f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;--f-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;--f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}button{font:inherit;color:var(--fg);background:#222839;border:1px solid #2f3648;border-radius:5px;padding:5px 10px;cursor:pointer}button:hover{background:#2a3146}button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button.small{padding:3px 8px;font-size:12px}button.icon{width:24px;height:24px;padding:0;font-size:16px;line-height:1}.top{display:flex;align-items:center;gap:16px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel)}.brand{font-family:var(--f-display);font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px;white-space:nowrap}.brand em{font-style:normal;color:var(--muted);font-weight:600}.mark{width:18px;height:18px;border-radius:50%;border:3px solid var(--accent);position:relative}.mark:after{content:"";position:absolute;inset:4px;border-top:2px solid var(--warm);transform:rotate(-20deg)}.target{font-family:var(--f-mono);font-size:12px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.target b{color:var(--fg);font-weight:600}.actions{display:flex;gap:8px;align-items:center}.menu{position:relative}.menu summary{white-space:nowrap;list-style:none;cursor:pointer;padding:5px 10px;border:1px solid #2f3648;border-radius:5px;background:#222839}.menu summary::-webkit-details-marker{display:none}.menu summary:after{content:" ▾";color:var(--muted)}.menu-list{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;min-width:220px;background:#1d2231;border:1px solid #343b50;border-radius:6px;padding:4px;gap:2px}.menu-list button{text-align:left;border:0;background:transparent}.menu-list button:hover{background:#2a3146}.menu-list button:disabled{color:#5c6378;cursor:default;background:transparent}.ide{display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);min-height:0}.pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);min-height:34px}.files{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.tree{overflow:auto;padding:6px 0 12px;font-size:13px}.tree .dir{padding:6px 10px 2px;color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;user-select:none}.tree .dir:before{content:"▾ "}.tree .dir.closed:before{content:"▸ "}.tree .file{display:flex;align-items:center;gap:4px;padding:3px 8px 3px 20px;cursor:pointer}.tree .file:hover{background:#ffffff08}.tree .file.active{background:#2a3352}.tree .file .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-mono);font-size:12.5px}.tree .file .lib{color:var(--muted);font-size:10px}.tree .file .ops{display:none;gap:2px}.tree .file:hover .ops{display:flex}.tree .file .ops button{padding:0 5px;font-size:11px;background:transparent;border:0;color:var(--muted)}.tree .file .ops button:hover{color:var(--fg)}.tree input{width:100%;font:12.5px var(--f-mono);background:#0f121b;color:var(--fg);border:1px solid var(--accent);border-radius:3px;padding:1px 4px}.new-form{padding:6px 10px}.new-form input{width:100%;font:12.5px var(--f-mono);background:#0f121b;color:var(--fg);border:1px solid var(--accent);border-radius:4px;padding:4px 6px}.editor{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--line);background:var(--ed-bg)}.tabs{display:flex;overflow-x:auto;background:var(--panel);border-bottom:1px solid var(--line);min-height:34px}.tab{display:flex;align-items:center;gap:6px;padding:6px 10px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;color:var(--muted);font:12.5px var(--f-mono);white-space:nowrap}.tab.active{background:var(--ed-bg);color:var(--fg);box-shadow:inset 0 2px 0 var(--accent)}.tab .x{color:var(--muted);padding:0 2px;border-radius:3px}.tab .x:hover{background:#ffffff14;color:var(--fg)}.tab .dot{width:7px;height:7px;border-radius:50%}.tab .dot.err{background:var(--err)}.tab .dot.warn{background:var(--warn)}.cm-host{flex:1;min-height:0;overflow:hidden}.cm-host .cm-editor{height:100%}.preview{display:flex;flex-direction:column;min-width:0;min-height:0}.toggles{display:flex;gap:10px;align-items:center;text-transform:none;letter-spacing:0;font-size:12px;flex-wrap:wrap;justify-content:flex-end}.toggles label{display:flex;gap:4px;align-items:center;cursor:pointer;color:var(--fg)}.stage{position:relative;flex:1;min-height:0}.stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}.stage canvas:active{cursor:grabbing}.stats{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}.stats span{font:600 11.5px var(--f-mono);background:#12151fd9;color:var(--fg);padding:3px 8px;border-radius:4px;font-variant-numeric:tabular-nums}.stats span i{font-style:normal;color:var(--muted);font-weight:400;margin-right:4px}.busy{position:absolute;right:10px;top:10px;font:12px var(--f-mono);background:#12151fd9;padding:3px 8px;border-radius:4px;color:var(--accent)}.bottom{border-top:1px solid var(--line);background:var(--panel)}.problems{max-height:132px;overflow:auto;font:12.5px var(--f-mono)}.problem{display:flex;gap:10px;padding:4px 14px;cursor:pointer;align-items:baseline}.problem:hover{background:#ffffff08}.problem .sev{font-weight:600;min-width:64px}.problem.Error .sev{color:var(--err)}.problem.Warning .sev{color:var(--warn)}.problem.Info .sev{color:var(--accent)}.problem .where{color:var(--muted);white-space:nowrap}.problem .msg{flex:1;min-width:0}.status{display:flex;justify-content:space-between;gap:12px;padding:4px 14px;font:11.5px var(--f-mono);color:var(--muted);border-top:1px solid var(--line)}.status .ok{color:var(--ok)}@media (max-width: 900px){body{overflow:auto;height:auto}.ide{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.files{max-height:180px;border-right:0;border-bottom:1px solid var(--line)}.editor{height:60vh;border-right:0}.preview{height:70vh;border-top:1px solid var(--line)}.target{display:none}.top{flex-wrap:wrap;gap:8px;padding:8px 12px}.brand em{display:none}.actions{flex-wrap:wrap}.menu summary{white-space:nowrap}.menu-list{right:auto;left:0}.toggles{gap:8px}}@media (prefers-reduced-motion: reduce){*{transition:none!important}}