:root{color-scheme:dark;--bg: #0f110e;--panel: #161a14;--panel-2: #1c2119;--line: #262c22;--fg: #eef2e8;--muted: #9aa392;--accent: #c6f36d;--accent-ink: #12160c;--warn: #f0b860;--danger: #f07a6a;--font: "Instrument Sans", "Segoe UI", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 var(--font)}button{font:inherit;color:inherit}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.dim{color:var(--muted)}.small{font-size:11px}.warn{color:var(--warn)}.app{padding:12px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));display:grid;gap:12px}.bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}.brand{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.logo{font-weight:700;letter-spacing:-.01em}.controls{display:flex;flex-wrap:wrap;gap:8px}.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:2px}.seg button{border:0;background:transparent;padding:5px 10px;border-radius:6px;cursor:pointer;color:var(--muted);white-space:nowrap}.seg button:hover:not(:disabled){color:var(--fg)}.seg button.on,.seg button.on:hover:not(:disabled){background:var(--accent);color:var(--accent-ink);font-weight:600}.seg button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.chip{background:#0b0d0a;border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:12px;white-space:nowrap}.notice{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;color:var(--warn)}.notice.error{color:var(--danger)}.notice button{background:none;border:0;cursor:pointer;font-size:16px}.grid{display:grid;grid-template-columns:200px minmax(0,1fr) 320px;gap:12px;align-items:start}.sessions{display:grid;gap:8px}.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:4px 0}.sessions ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.sessions a{display:grid;gap:4px;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--fg);text-decoration:none}.sessions a.on{border-color:var(--accent)}.sessions img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;border-radius:6px;display:block}.s-title{font-weight:600}.s-meta{font-size:11px;color:var(--muted)}.dots{display:flex;gap:4px}.dot{width:7px;height:7px;border-radius:50%;background:var(--line);display:inline-block}.dot.on{background:var(--accent)}.stage{display:grid;gap:8px;min-width:0}.atlas{position:relative;overflow:hidden;width:100%;background:#000;border-radius:10px;border:1px solid var(--line);cursor:crosshair;touch-action:pan-y}.atlas video{display:block;height:auto}.atlas video.pixelated{image-rendering:pixelated}.readout{position:absolute;transform:translate(12px,-28px);pointer-events:none;background:#0b0d0ae0;border:1px solid var(--line);border-radius:6px;padding:2px 8px;font:12px var(--mono);white-space:nowrap}.frame-flag{position:absolute;right:8px;top:8px;font:11px var(--mono);background:#0b0d0acc;border-radius:4px;padding:2px 6px;color:var(--warn)}.frame-flag.debug{top:auto;bottom:8px;color:var(--accent)}.loading{padding:80px 0;text-align:center;color:var(--muted)}.legend{display:grid;gap:4px;font-size:12px}.legend-label{color:var(--muted)}.legend-bar{height:10px;border-radius:3px;border:1px solid var(--line)}.legend-ticks{position:relative;height:14px;font:11px var(--mono);color:var(--muted)}.legend-ticks span{position:absolute;transform:translate(-50%)}.legend-note{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--muted)}.swatch{width:10px;height:10px;border-radius:2px;display:inline-block;margin-left:6px}.transport{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.transport .play{width:36px;height:32px;border-radius:8px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;font-weight:700}.transport .step{height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-family:var(--mono)}.clock-text{font:13px var(--mono)}.scrubber{flex:1 1 160px;accent-color:var(--accent);min-width:120px}.timeline{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px}.lane-labels{display:grid;grid-auto-rows:14px;font:10px/14px var(--mono);color:var(--muted)}.lane-labels em{font-style:normal;opacity:.7}.lane-labels span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lanes{width:100%;cursor:pointer;display:block}.lane-bg{fill:var(--panel)}.span{fill:var(--accent);opacity:.85}.density{fill:#8fb4ff;opacity:.7}.gap{fill:var(--danger);opacity:.8}.playhead{fill:#fff}.inspector{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:10px;min-width:0}.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}.tabs button{border:0;background:none;padding:6px 10px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}.tabs button.on{color:var(--fg);border-bottom-color:var(--accent)}.tab-body{display:grid;gap:10px;font-size:13px}.tab-body h4{margin:4px 0 0;font-size:12px;color:var(--muted);font-weight:500}.note{color:var(--muted);font-size:12px;margin:0}.keygrid{display:grid;gap:4px}.keyrow{display:flex;gap:4px;align-items:center}.key{min-width:34px;text-align:center;padding:3px 6px;border-radius:5px;border:1px solid var(--line);background:#0b0d0a;font:11px var(--mono);color:var(--muted)}.key.wide{min-width:90px}.key.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.meter{display:grid;grid-template-columns:24px minmax(0,1fr) 44px;gap:8px;align-items:center;font-size:12px}.meter-track{position:relative;height:8px;background:#0b0d0a;border-radius:4px;border:1px solid var(--line)}.meter-fill{position:absolute;top:0;bottom:0;background:var(--accent);border-radius:3px}.events-mini{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:12px}.events-mini .now{color:var(--accent)}.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 10px;margin:0;font-size:12px}.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}.matrix{border-collapse:collapse}.matrix td{padding:0 8px 0 0;text-align:right}.event-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:360px;overflow:auto}.event-list button{width:100%;display:grid;grid-template-columns:70px auto 1fr;gap:8px;align-items:center;text-align:left;background:none;border:1px solid transparent;border-radius:6px;padding:4px 6px;cursor:pointer;font-size:12px}.event-list button.now{border-color:var(--accent)}.event-list button>:last-child{justify-self:end}.tag{font:500 10px var(--mono);padding:1px 6px;border-radius:4px;background:#2a3324;color:var(--accent);text-transform:uppercase}.tag-jump{background:#3a2a44;color:#e3a6ff}.tag-interact{background:#44361f;color:#ffcf75}.tag-grab{background:#1f3644;color:#8fd4ff}.tag-crouch{background:#3b2525;color:#ff9d8f}.spec-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.spec-list li{display:flex;justify-content:space-between;gap:10px;align-items:start}.spec-list li div{display:grid;gap:2px;font-size:12px}.badge{font:500 10px var(--mono);padding:2px 6px;border-radius:4px;white-space:nowrap}.badge-available{background:var(--accent);color:var(--accent-ink)}.badge-derived{background:#2c3a52;color:#b9d0ff}.badge-pilot{background:#3a3220;color:var(--warn)}.cta{display:block;text-align:center;padding:10px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none}.debug{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;background:#0b0d0a;border:1px dashed var(--accent);border-radius:8px;padding:8px}@media (max-width: 1100px){.grid{grid-template-columns:minmax(0,1fr) 300px}.sessions{grid-column:1 / -1}.sessions ul{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}@media (max-width: 820px){.grid{grid-template-columns:minmax(0,1fr)}.seg button{padding:5px 8px}.kv{grid-template-columns:96px minmax(0,1fr)}.stage{order:1}.inspector{order:2}.sessions{order:3}.timeline{grid-template-columns:80px minmax(0,1fr)}}@media (prefers-reduced-motion: reduce){*{transition:none!important}}