:root{--bg:#101216;--bg-raised:#171a20;--bg-hover:#1e222b;--line:#262b35;--text:#e8eaf0;--text-dim:#8b93a3;--down:#f2a93b;--up:#3fd6c5;--accent:#f2a93b;--active:#fff;--danger:#e5484d}*{box-sizing:border-box}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid color-mix(in srgb, var(--up) 75%, white);outline-offset:3px}html,body{margin:0;padding:0}body{background:radial-gradient(1100px 500px at 75% -10%, color-mix(in srgb, var(--up) 5%, transparent), transparent 60%), radial-gradient(900px 420px at 10% 0%, color-mix(in srgb, var(--down) 5%, transparent), transparent 55%), var(--bg);color:var(--text);background-attachment:fixed;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.45}.app{flex-direction:column;min-height:100vh;display:flex}.skip-link{z-index:100;background:var(--up);color:#06231f;border-radius:8px;padding:8px 14px;font-weight:700;position:fixed;top:10px;left:10px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:14px 22px;display:flex}.logo{letter-spacing:.2px;font-size:17px;font-weight:700}.logo-mark{color:var(--down);margin-right:6px}.logo-tag{color:var(--text-dim);letter-spacing:.3px;margin-left:10px;font-size:12px;font-weight:500}@media (width<=560px){.logo-tag{display:none}}.phase-tag{color:var(--text-dim);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12.5px}.layout{flex:1;min-height:0;display:flex}.picker{border-right:1px solid var(--line);flex-shrink:0;width:250px;padding:16px 12px 24px;overflow-y:auto}.picker-title{text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);padding:0 8px 10px;font-size:12px}.picker-group{margin-bottom:14px}.picker-style{color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;padding:6px 8px 4px;font-size:11.5px}.pat{width:100%;color:var(--text);cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;font-size:13.5px;display:flex}.pat:hover{background:var(--bg-hover)}.pat[data-active]{background:var(--bg-raised);border-color:var(--line);box-shadow:inset 2px 0 0 var(--down)}.pat-name{flex:1}.pat-progress{color:var(--text-dim);font-variant-numeric:tabular-nums;margin-top:1px;font-size:11px;display:block}.pat-diff .dot{background:var(--line);border-radius:50%;width:5px;height:5px;margin-left:3px;display:inline-block}.pat-diff .dot.on{background:var(--text-dim)}.stage{flex:1;min-width:0;max-width:1020px;padding:26px 34px 40px}.pattern-head{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.pattern-head h1{margin:0;font-size:24px;font-weight:700}.chip{background:var(--bg-raised);border:1px solid var(--line);color:var(--text-dim);border-radius:999px;padding:3px 10px;font-size:12px}.chip.swing{color:var(--up);border-color:color-mix(in srgb, var(--up) 40%, transparent)}.pattern-desc{color:var(--text-dim);max-width:640px;margin:8px 0 22px}.grid-outer{margin-bottom:24px}.grid-wrap{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;padding:16px 14px 18px;position:relative;overflow-x:auto}.cells{display:flex;position:relative}.cell{border-left:1px solid #0000;border-radius:8px;flex-direction:column;flex:1 1 0;align-items:center;gap:2px;min-width:30px;padding:4px 0 6px;display:flex}.cell.on-beat{border-left:1px solid var(--line)}.cell:first-child.on-beat{border-left-color:#0000}.cell.bar-start{border-left:2px solid var(--text-dim)}.cell[data-active]{background:color-mix(in srgb, var(--active) 9%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--active) 25%, transparent)}.cell-label{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:13px}.cell.on-beat .cell-label{color:var(--text);font-weight:700}.cell-accent{height:14px;color:var(--accent);white-space:pre;font-size:13px;font-weight:800;line-height:14px}.cell-arrow{align-items:center;height:64px;display:flex}.arrow{width:30px;height:60px}.arrow line{stroke-width:3.4px;stroke-linecap:round}.arrow path{stroke:none}.arrow.down line{stroke:var(--down)}.arrow.down path{fill:var(--down)}.arrow.up line{stroke:var(--up)}.arrow.up path{fill:var(--up)}.arrow.ghost{opacity:.22}.arrow.ghost line{stroke-dasharray:4 4}.arrow.muted{opacity:.85}.arrow .mute-x line{stroke:var(--text);stroke-width:2.6px;opacity:.9}.arrow.mini{vertical-align:-7px;width:13px;height:26px}.playhead{background:var(--active);opacity:0;width:2px;box-shadow:0 0 10px color-mix(in srgb, var(--active) 60%, transparent);pointer-events:none;border-radius:2px;transition:opacity .15s;position:absolute;top:-6px;bottom:-6px;left:0;transform:translate(-1px)}.countin{color:var(--text);background:color-mix(in srgb, var(--bg) 55%, transparent);pointer-events:none;border-radius:14px;justify-content:center;align-items:center;font-size:64px;font-weight:800;animation:.5s ease-out pulse;display:flex;position:absolute;inset:0}@keyframes pulse{0%{opacity:.4;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}.legend{color:var(--text-dim);flex-wrap:wrap;gap:20px;padding:10px 6px 0;font-size:12.5px;display:flex}.legend span{align-items:center;gap:5px;display:inline-flex}.legend-x,.legend-acc{font-variant-numeric:tabular-nums}.controls{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;flex-wrap:wrap;align-items:center;gap:22px;padding:14px 18px;display:flex}.play-btn{cursor:pointer;background:linear-gradient(180deg, #ffc258, var(--down));color:#1a1205;min-width:118px;box-shadow:0 2px 10px color-mix(in srgb, var(--down) 30%, transparent);border:none;border-radius:10px;padding:10px 26px;font-size:16px;font-weight:700;transition:transform 80ms,box-shadow .12s}.play-btn:hover{box-shadow:0 4px 14px color-mix(in srgb, var(--down) 40%, transparent);transform:translateY(-1px)}.play-btn:active{transform:translateY(0)}.play-btn.playing{background:linear-gradient(180deg, #f06166, var(--danger));color:#fff;box-shadow:0 2px 10px color-mix(in srgb, var(--danger) 30%, transparent)}.bpm{flex:1;align-items:center;gap:12px;min-width:220px;display:flex}.bpm-value{font-variant-numeric:tabular-nums;min-width:86px;font-size:20px;font-weight:700}.bpm-value small{color:var(--text-dim);font-size:11px;font-weight:600}.bpm input[type=range]{accent-color:var(--down);flex:1}.toggles{flex-wrap:wrap;gap:8px;display:flex}.toggle{border:1px solid var(--line);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:7px;padding:7px 14px;font-size:13px;display:inline-flex}.toggle .toggle-dot{background:var(--line);border-radius:50%;width:8px;height:8px}.toggle.on{color:var(--text);border-color:color-mix(in srgb, var(--up) 45%, transparent)}.toggle.on .toggle-dot{background:var(--up)}.banner{border-radius:10px;margin-bottom:16px;padding:11px 15px;font-size:13.5px;line-height:1.5}.banner.error{background:color-mix(in srgb, var(--danger) 12%, transparent);border:1px solid color-mix(in srgb, var(--danger) 45%, transparent);color:#ffd6d8}.banner.info{background:color-mix(in srgb, var(--up) 9%, transparent);border:1px solid color-mix(in srgb, var(--up) 35%, transparent);color:#c9f5f0}.audio-state{float:right;color:var(--text-dim);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}.nudge{background:linear-gradient(100deg, color-mix(in srgb, var(--up) 14%, var(--bg-raised)), color-mix(in srgb, var(--down) 10%, var(--bg-raised)));border:1px solid color-mix(in srgb, var(--up) 35%, var(--line));border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;font-size:13.5px;display:flex}.nudge-icon{font-size:18px}.nudge-text{flex:1;min-width:240px}.nudge-cta{cursor:pointer;background:var(--up);color:#06231f;border:none;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700}.nudge-cta:disabled{cursor:wait;opacity:.7}.nudge-later{color:var(--text-dim);cursor:pointer;text-underline-offset:2px;background:0 0;border:none;font-size:12.5px;text-decoration:underline}.mode-badge{background:var(--down);vertical-align:2px;border-radius:50%;width:7px;height:7px;margin-left:6px;display:inline-block}.setup-step{border:1px solid var(--line);width:16px;height:16px;color:var(--text-dim);text-align:center;border-radius:50%;flex-shrink:0;font-size:10.5px;line-height:15px}.mode-switch{border:1px solid var(--line);border-radius:999px;display:inline-flex;overflow:hidden}.mode-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:8px 16px;font-size:13px;font-weight:600}.mode-btn.on{background:color-mix(in srgb, var(--up) 18%, transparent);color:var(--text)}.scored-setup{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;margin-top:14px;padding:12px 18px;font-size:13.5px}.scored-setup.ready{padding:9px 18px}.scored-setup.ready .setup-icon{color:#58d68d;margin-right:4px}.setup-title{margin-bottom:8px;font-weight:700}.setup-row{color:var(--text-dim);align-items:center;gap:9px;padding:4px 0;display:flex}.setup-row.ok{color:var(--text)}.setup-row .setup-icon{text-align:center;width:14px}.setup-text{flex:1}.setup-row.ok .setup-icon{color:#58d68d}.setup-row.warn .setup-icon{color:var(--down)}.setup-btn{margin-left:8px;padding:4px 12px}.setup-btn.primary{background:var(--up);color:#06231f;box-shadow:0 2px 10px color-mix(in srgb, var(--up) 30%, transparent);border-color:#0000;padding:6px 16px;font-weight:700;transition:transform 80ms,box-shadow .12s}.setup-btn.primary:hover:not(:disabled){box-shadow:0 4px 14px color-mix(in srgb, var(--up) 40%, transparent);transform:translateY(-1px)}.setup-btn.primary:disabled{opacity:.45;box-shadow:none}.scored-setup>summary{cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;gap:14px;list-style:none;display:flex}.scored-setup>summary::-webkit-details-marker{display:none}.scored-setup[open]>summary{margin-bottom:8px}.scored-setup>summary .ready-text{flex:1;min-width:220px;font-weight:700}.scored-setup.ready>summary .ready-text{color:var(--text-dim);font-weight:500}.setup-verdict{border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent);margin-top:10px;padding-top:10px;font-weight:600}.mix-ctl{align-items:center;gap:6px;display:inline-flex}.mix-slider{width:64px;accent-color:var(--up)}.sound-settings{border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);flex-basis:100%;padding-top:10px}.sound-settings>summary{cursor:pointer;width:fit-content;color:var(--text-dim);letter-spacing:.3px;-webkit-user-select:none;user-select:none;font-size:12.5px;font-weight:700}.sound-settings[open]>summary{margin-bottom:10px}.audio-device-panel{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;margin-top:14px;padding:12px 18px}.audio-device-panel>summary{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:20px;list-style:none;display:flex}.audio-device-panel>summary::-webkit-details-marker{display:none}.audio-device-panel>summary>span:first-child{align-items:baseline;gap:10px;display:flex}.audio-device-panel>summary b{font-size:13.5px}.audio-device-panel>summary small,.audio-device-summary{color:var(--text-dim);font-size:12px}.audio-device-summary{text-overflow:ellipsis;white-space:nowrap;max-width:50%;overflow:hidden}.audio-device-panel[open]>summary{border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);padding-bottom:12px}.audio-device-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:14px;display:grid}.audio-device-card{background:color-mix(in srgb, var(--bg) 70%, var(--bg-raised));border:1px solid color-mix(in srgb, var(--line) 80%, transparent);border-radius:11px;padding:14px}.audio-device-title{align-items:flex-start;gap:10px;margin-bottom:14px;display:flex}.audio-device-title h3{margin:0;font-size:14px}.audio-device-title p{color:var(--text-dim);margin:2px 0 0;font-size:12px}.io-badge{border:1px solid color-mix(in srgb, var(--up) 50%, var(--line));min-width:31px;color:var(--up);letter-spacing:.8px;text-align:center;border-radius:6px;padding:3px 5px;font-size:10px;font-weight:800}.io-badge.out{border-color:color-mix(in srgb, var(--down) 55%, var(--line));color:var(--down)}.device-field,.device-slider{color:var(--text-dim);gap:6px;margin-top:12px;font-size:12px;display:grid}.device-field select{background:var(--bg);border:1px solid var(--line);width:100%;min-width:0;color:var(--text);font:inherit;border-radius:8px;padding:8px 10px;font-size:13px}.device-field select:disabled,.device-slider input:disabled,.audio-device-action:disabled{cursor:not-allowed;opacity:.5}.device-level-row{color:var(--text-dim);align-items:center;gap:10px;margin-top:13px;font-size:12px;display:flex}.device-level-row .meter{max-width:none}.device-muted{color:var(--text-dim);font-style:italic}.device-slider>span{justify-content:space-between;gap:10px;display:flex}.device-slider b{color:var(--text);font-variant-numeric:tabular-nums}.device-slider input{width:100%;accent-color:var(--up)}.device-help,.device-privacy,.device-recalibrate{color:var(--text-dim);margin:7px 0 0;font-size:11.5px;line-height:1.45}.device-privacy{margin-left:8px;display:inline}.device-recalibrate{color:var(--down);font-weight:700}.audio-device-action{margin-top:12px}.audio-device-message{margin:12px 0 0}.score-panel{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-top:14px;padding:12px 18px;display:flex}.score-main{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.score-big{font-variant-numeric:tabular-nums;font-size:34px;font-weight:800;line-height:1}.score-big.great{color:#58d68d;text-shadow:0 0 18px #58d68d59}.score-big small{color:var(--text-dim);font-size:13px;font-weight:600}.score-line{font-size:13.5px}.score-line b{font-variant-numeric:tabular-nums}.score-line.dim{color:var(--text-dim);margin-top:3px;font-size:12.5px}.score-warn{color:var(--danger)}.score-line.ladder,.score-line.guided-take,.score-line.coaching{width:100%;color:var(--up);font-weight:700}.score-line.coaching{border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent);padding-top:10px}.cell-verdict{flex-direction:column;align-items:center;gap:3px;height:14px;display:flex}.vdot{border-radius:50%;width:8px;height:8px}.vdot.none{background:0 0}.vdot.perfect{background:#58d68d}.vdot.good{background:var(--down)}.vdot.off{background:#e08a3c}.vdot.off.early{transform:translate(-5px)}.vdot.off.late{transform:translate(5px)}.vdot.miss{border:1.6px solid var(--danger);background:0 0}.vdot.extra{background:var(--danger)}.heat-bar{opacity:.85;border-radius:2px;width:70%;height:3px}.take-history{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;margin-top:14px;padding:12px 18px}.history-head{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.history-title{text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);font-size:12px;font-weight:700}.history-best{color:var(--text-dim);font-size:13px}.history-best b{color:var(--text);font-variant-numeric:tabular-nums}.take-spark{width:220px;height:36px;margin-left:auto}.take-spark polyline{stroke:var(--up);stroke-width:1.6px;opacity:.8}.take-spark circle{fill:var(--up)}.take-spark circle.easy{fill:none;stroke:var(--up);stroke-width:1.2px}.history-rows{margin:10px 0 0;padding:0;list-style:none}.history-row{font-variant-numeric:tabular-nums;border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent);align-items:baseline;gap:12px;padding:3px 0;font-size:13px;display:flex}.history-row:first-child{border-top:none}.h-when{color:var(--text-dim);min-width:62px;font-size:12px}.h-score b{font-size:14px}.h-detail{color:var(--text-dim)}.h-easy{color:var(--down);border:1px solid color-mix(in srgb, var(--down) 45%, transparent);border-radius:999px;padding:0 8px;font-size:11px}.history-more{color:var(--text-dim);margin-top:6px;font-size:12px}.live-timing{background:linear-gradient(110deg, color-mix(in srgb, var(--up) 7%, var(--bg-raised)), var(--bg-raised) 58%);border:1px solid color-mix(in srgb, var(--up) 28%, var(--line));border-radius:14px;margin:-10px 0 14px;padding:13px 18px}.live-timing.active{border-color:color-mix(in srgb, var(--up) 48%, var(--line))}.live-timing-head,.live-timing-empty{justify-content:space-between;align-items:center;gap:18px;display:flex}.live-timing-head h2{margin:0;font-size:15px}.live-timing-head p{color:var(--text-dim);margin:2px 0 0;font-size:12.5px}.live-timing-empty{border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent);color:var(--text-dim);margin-top:10px;padding-top:10px;font-size:13px}.timing-note{color:var(--down);margin:10px 0;font-size:12.5px}.timing-body{align-items:stretch;gap:12px;margin-top:10px;display:flex}.timing-body .mic-canvas{flex:1;min-width:0;margin-top:0}.timing-result{border:1px solid var(--line);background:var(--bg);text-align:center;border-radius:10px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:205px;display:flex}.timing-result b{font-size:22px}.timing-result span{color:var(--text-dim);font-size:12px}.timing-result.perfect b{color:#58d68d}.timing-result.good b{color:var(--down)}.timing-result.off b{color:var(--danger)}.timing-result.waiting b{color:var(--text);font-size:16px}.live-timing .mic-legend{margin-top:7px}.mic-panel{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;margin-top:14px;padding:14px 18px}.diagnostics>summary{cursor:pointer;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);-webkit-user-select:none;user-select:none;font-size:12px;font-weight:700}.diagnostics>summary .diag-hint{text-transform:none;letter-spacing:.2px;font-weight:500}.diagnostics[open]>summary{margin-bottom:12px}.legend-verdicts{align-items:center;gap:4px;display:inline-flex}.legend-verdicts .vdot{margin-left:6px;display:inline-block}.mic-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.mic-stat{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.meter{background:var(--bg);border:1px solid var(--line);border-radius:999px;flex:1;min-width:140px;max-width:320px;height:10px;position:relative;overflow:hidden}.meter-fill{background:linear-gradient(90deg, var(--up), #a7e97c 75%, var(--down));border-radius:999px;height:100%;transition:width 70ms linear}.meter-fill.hot{background:var(--danger)}.meter-peak{background:var(--text);opacity:.8;width:2px;transition:left 70ms linear;position:absolute;top:0;bottom:0}.mic-panel .banner{margin:12px 0 0}.cal-status{font-weight:700}.mic-canvas{background:var(--bg);border:1px solid var(--line);border-radius:10px;width:100%;height:118px;margin-top:12px;display:block}.mic-legend{color:var(--text-dim);margin:8px 0 0;font-size:12.5px}.hint{color:var(--text-dim);margin-top:18px;font-size:13px}.hint b{color:var(--text)}@media (width<=760px){.layout{flex-direction:column}.picker{border-right:none;border-bottom:1px solid var(--line);gap:8px;width:100%;padding:10px;display:flex;overflow-x:auto}.picker-title{display:none}.picker-group{margin-bottom:0}.stage{padding:20px 14px 40px}}