:root{--bg: #0f1115;--panel: #161a21;--line: #262c36;--text: #e6e9ef;--muted: #8b93a1;--accent: #4c8ef7;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.5 Segoe UI,system-ui,sans-serif}.app{display:grid;grid-template-columns:330px 1fr 250px;height:100%}@media(max-width:1200px){.app{grid-template-columns:300px 1fr}.panel.steps{display:none}}.panel{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:18px 16px 32px}.panel.steps{border-right:none;border-left:1px solid var(--line);display:flex;flex-direction:column;padding-bottom:12px;overflow:hidden}.panel.steps h3{margin-top:0}.panel h1{font-size:17px;margin:0 0 6px}.panel h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}.panel h4{font-size:12px;margin:0 0 6px;color:var(--muted)}.sub{color:var(--muted);font-size:12.5px;margin:0}button{background:#222834;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:8px 12px;cursor:pointer;font:inherit}button:hover{border-color:#3c4658}.task{display:flex;justify-content:space-between;align-items:baseline;width:100%;margin-bottom:6px;text-align:left}.task span{color:var(--muted);font-size:11.5px}.task.active{border-color:var(--accent);background:#1b2740}.blurb{color:var(--muted);font-size:12.5px;margin:10px 0 0}.panel section.special{border-left:2px solid var(--accent);padding-left:12px;margin-left:-2px}.panel section.special h3{color:var(--accent)}.panel section.paired{border-left:2px solid #4cd6a0;padding-left:12px;margin-left:-2px}.panel section.paired h3{color:#4cd6a0}.rationale{margin:10px 0 0;font-size:12px}.rationale dt{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;margin-top:8px}.rationale dd{margin:3px 0 0;color:#c8cede}.speed{margin-top:12px;border-top:1px solid #262c38;padding-top:10px}.speed-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}.speed-row span{color:var(--muted)}.speed.over .speed-row b{color:#f7776c}.speed button{width:100%;margin-top:6px}.controls{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.controls button{flex:1;min-width:88px}.controls button.on{border-color:var(--accent);background:#1b2740}.step-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-right:4px}.step-row{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:baseline;background:transparent;border:1px solid transparent;border-radius:5px;padding:5px 7px;text-align:left;font-size:12px;color:var(--muted)}.step-row:hover{background:#1d222b;border-color:var(--line);color:var(--text)}.step-row.active{background:#1b2740;border-color:var(--accent);color:var(--text)}.step-no{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;opacity:.65}.step-name{line-height:1.35}.step-time{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;opacity:.6}.view-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}.view{padding:7px 8px;font-size:12px}.view.active{border-color:var(--accent);background:#1b2740}.muted{color:var(--muted)}.small{font-size:11.5px;margin:0 0 12px}.slider input:disabled{opacity:.35}.slider{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}.slider input{width:100%;margin-top:4px;accent-color:var(--accent)}.progress{height:4px;background:#222834;border-radius:2px;overflow:hidden}.progress div{height:100%;background:var(--accent)}.joint-grid{display:grid;gap:14px}.joint-row{display:grid;grid-template-columns:62px 58px 1fr;align-items:center;gap:6px;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;margin-bottom:3px}.joint-row b{text-align:right}.joint-row .joint-name{overflow:hidden;text-overflow:ellipsis}.joint-row .joint-rate{color:var(--muted);font-size:10.5px;text-align:right}.joint-bar{grid-column:1 / -1;position:relative;height:4px;border-radius:2px;background:#222834;margin:1px 0 3px}.joint-bar i{position:absolute;top:-2px;width:2px;height:8px;border-radius:1px;transform:translate(-1px)}.joint-bar i.zero{background:#59627a}.joint-bar i.knob{width:4px;height:10px;top:-3px;border-radius:2px}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:8px 0 2px}.check{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);cursor:pointer}.check input{accent-color:var(--accent);margin:0}.dbg-wrap{pointer-events:none}.dbg-tag{display:grid;gap:2px;min-width:86px;padding:3px 6px;border:1px solid var(--line);border-left-width:3px;border-radius:5px;background:#0f1115d1;font-family:ui-monospace,Consolas,monospace;font-size:10.5px;line-height:1.25;color:var(--text);white-space:nowrap;user-select:none}.dbg-tag b{font-size:12px}.dbg-line{display:flex;align-items:baseline;gap:6px;justify-content:space-between}.dbg-head,.dbg-span{color:var(--muted);font-size:9.5px}.dbg-bar{position:relative;display:block;height:3px;border-radius:2px;background:#2b3242}.dbg-bar i{position:absolute;top:-2px;width:3px;height:7px;border-radius:2px;transform:translate(-1.5px)}.error{color:#ff8080;font-size:12.5px;margin-top:16px}.viewport{position:relative}.viewport canvas{display:block}