:root{--bg: oklch(.21 .005 260);--bg-2: oklch(.26 .006 260);--bg-3: oklch(.31 .007 260);--line: oklch(.36 .008 260);--fg: oklch(.93 .004 90);--fg-2: oklch(.72 .006 90);--fg-3: oklch(.56 .006 90);--accent: oklch(.72 .12 200);--accent-ink: oklch(.2 .03 200);--warn: oklch(.72 .16 55);--paper: #f4f1ea;--rail: 72px;--radius: 6px;--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--mono: ui-monospace, "SF Mono", Menlo, monospace;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{background:var(--bg);color:var(--fg);font:13px/1.4 var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);height:100%;width:100%}.app[data-hand=left]{grid-template-columns:minmax(0,1fr) var(--rail)}.app[data-hand=left] .rail{order:2;border-left:1px solid var(--line);border-right:0}.rail{display:flex;flex-direction:column;gap:10px;padding:10px 6px;background:var(--bg-2);border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}.rail-group{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line)}.rail-group:last-child{border-bottom:0}.tool{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:6px 2px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--fg-2)}.tool:hover{background:var(--bg-3);color:var(--fg)}.tool[aria-pressed=true]{background:var(--bg-3);color:var(--fg);border-color:var(--accent)}.tool:disabled{opacity:.35;cursor:default}.tool-label{font-size:10px;letter-spacing:.02em;color:var(--fg-3);white-space:nowrap}.tool[aria-pressed=true] .tool-label{color:var(--fg-2)}.glyph{display:block;font-size:18px;line-height:22px;height:22px}.size{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0}.size input[type=range]{width:56px;accent-color:var(--accent)}.toggle{display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--fg-3);padding:2px 0 4px}.toggle input{accent-color:var(--accent);margin:0}.swatches{display:grid;grid-template-columns:repeat(2,24px);justify-content:center;gap:6px}.swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--bg-2);padding:0;outline:1px solid var(--line)}.swatch[aria-pressed=true]{outline:2px solid var(--accent)}.layers{gap:4px}.layer-row{display:grid;grid-template-columns:1fr auto;gap:2px;align-items:stretch}.layer-pick,.layer-eye{padding:4px 3px;border:1px solid var(--line);border-radius:var(--radius);background:transparent;color:var(--fg-3);font-size:10px;white-space:nowrap}.layer-row[data-active=true] .layer-pick{border-color:var(--accent);color:var(--fg)}.layer-eye[aria-pressed=false]{text-decoration:line-through}.stage{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;background:var(--bg)}.frame{position:relative;box-shadow:0 1px #ffffff0f inset,0 12px 40px #00000073;touch-action:none}.layer{position:absolute;inset:0;pointer-events:none}.layer-live{pointer-events:auto;cursor:crosshair;touch-action:none}.notice{position:absolute;top:8px;left:8px;right:8px;z-index:5;margin:0;padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);color:var(--fg-2);font-size:12px}.panel{position:absolute;z-index:6;width:min(420px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;padding:0 14px 14px;background:#1e1f22f5;border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 48px #00000080;backdrop-filter:blur(8px)}.panel-head,.refpanel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;font-weight:600;color:var(--fg)}.diag{right:12px;bottom:12px}.app[data-hand=left] .diag{right:auto;left:12px}.drills{left:12px;top:12px}.app[data-hand=left] .drills{left:auto;right:12px}.calib{left:50%;top:12px;transform:translate(-50%)}.review{left:50%;bottom:12px;transform:translate(-50%);width:min(640px,calc(100% - 24px))}.panel p{margin:8px 0}.muted{color:var(--fg-3)}.small{font-size:11.5px}.ua{word-break:break-all;font-family:var(--mono);font-size:10px}.kv{display:grid;grid-template-columns:1fr;gap:2px 12px;margin:0}.kv>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px;padding:3px 0;border-bottom:1px solid oklch(1 0 0 / .06)}.kv dt{color:var(--fg-3)}.kv dd{margin:0;font-family:var(--mono);font-size:12px;color:var(--fg);overflow-wrap:anywhere}.diag-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0 4px}.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.seg button{padding:4px 8px;background:transparent;border:0;color:var(--fg-3);font-size:11px}.seg button+button{border-left:1px solid var(--line)}.seg button[aria-checked=true]{background:var(--bg-3);color:var(--fg)}.diag-actions{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}.mini{padding:5px 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-3);color:var(--fg);font-size:12px;line-height:1.2}.mini:hover{border-color:var(--fg-3)}.mini[aria-pressed=true]{border-color:var(--accent)}.mini.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.as-label{position:relative;display:inline-block;cursor:pointer}.as-label input{position:absolute;inset:0;opacity:0;cursor:pointer}.latency-strip{margin-top:10px;padding:18px 10px;font:700 28px/1 var(--mono);text-align:center;letter-spacing:.02em;border-radius:var(--radius)}.refpanel{position:absolute;z-index:7;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#1e1f22f5;border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 48px #00000080;overflow:hidden;touch-action:none}.refpanel-head{padding:6px 6px 6px 12px;cursor:grab;background:var(--bg-3);font-size:12px}.refpanel-body{display:flex;align-items:center;justify-content:center;min-height:0;background:#0c0d0f}.refpanel-body img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}.refpanel-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px;color:var(--fg-3);cursor:pointer}.refpanel-empty input{font-size:11px;max-width:100%}.refpanel-foot{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid var(--line)}.refpanel-foot label{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.refpanel-foot input[type=range]{flex:1;min-width:40px;accent-color:var(--accent)}.refpanel-size{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--fg-3) 50%,var(--fg-3) 60%,transparent 60%,transparent 75%,var(--fg-3) 75%,var(--fg-3) 85%,transparent 85%);opacity:.6}.drill-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.drill{display:grid;gap:2px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)}.drill:hover{border-color:var(--accent)}.drill-track{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}.drill-name{font-size:14px;font-weight:600}.drill-meta{color:var(--fg-3);font-size:11.5px}.sessionbar{position:absolute;top:0;left:0;right:0;z-index:5;background:#17181beb;border-bottom:1px solid var(--line)}.timeline{height:3px;background:var(--bg-3)}.timeline-fill{height:100%;background:var(--accent);transform-origin:left center;will-change:transform}.timeline-fill[data-warn=true]{background:var(--warn)}.sessionbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:6px 12px;font-size:12.5px}.session-name{font-weight:600}.session-clock{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right}.session-instruction{margin:0;padding:0 12px 8px;color:var(--fg-2);max-width:72ch;text-wrap:pretty}.metrics{width:100%;border-collapse:collapse;font-size:12.5px}.metrics th,.metrics td{padding:6px 8px 6px 0;text-align:left;vertical-align:top;border-bottom:1px solid oklch(1 0 0 / .06)}.metrics th[scope=row]{white-space:nowrap;color:var(--fg-2);font-weight:500}.metrics .num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}.metrics .unit{color:var(--fg-3);font-size:11px}.metrics .trend{color:var(--fg-3);min-width:5ch}.metrics .trend[data-better=true]{color:var(--accent)}.metrics .trend[data-better=false]{color:var(--warn)}.metrics .hint{color:var(--fg-3);font-size:11.5px;text-wrap:pretty}.metrics.summary thead th{color:var(--fg-3);font-weight:500;font-size:11.5px}@media(max-height:1059px){.rail{gap:6px}.rail-group{padding-bottom:6px}.tool{padding:3px 2px}.tool-label{display:none}.size .tool-label{display:block}}@media(max-height:759px){.rail{gap:4px;padding:6px}.rail-group{padding-bottom:4px}.swatches{grid-template-columns:repeat(3,18px);gap:3px}.swatch{width:18px;height:18px}}@media(max-width:760px){:root{--rail: 60px}.tool-label{display:none}.layer-pick{font-size:9px}.metrics .hint{display:none}}@media(prefers-reduced-motion:reduce){.timeline-fill{transition:none}.latency-strip{background:var(--bg-3)!important;color:var(--fg)!important}}