.circle-board{display:block;width:min(92vw,92dvh,640px);height:auto;margin-inline:auto;touch-action:none;user-select:none;-webkit-user-select:none}.segment{cursor:pointer;outline:none;transform-box:view-box;transform-origin:500px 500px;transition:transform .12s ease-out,filter .12s ease-out}.segment[aria-disabled=true]{cursor:default}.segment-wedge{fill:oklch(.62 .12 calc(var(--seg-hue) * 1deg));stroke:#ffffff14;stroke-width:1}.segment-label{fill:var(--text);font-family:system-ui,sans-serif;font-size:44px;font-weight:600;opacity:.65;pointer-events:none;paint-order:stroke;stroke:#0000008c;stroke-width:6px;stroke-linejoin:round;transition:opacity .12s ease-out}.segment-minor-label{fill:var(--text-dim);font-family:system-ui,sans-serif;font-size:26px;font-weight:500;opacity:.6;pointer-events:none;paint-order:stroke;stroke:#0000008c;stroke-width:5px;stroke-linejoin:round}.segment:focus-visible .segment-wedge{stroke:var(--accent);stroke-width:3;filter:brightness(1.12)}.segment[data-state=active],.segment[data-state=expected]{transform:scale(1.06);filter:brightness(1.4)}.segment[data-state=active] .segment-wedge,.segment[data-state=expected] .segment-wedge{stroke:#ffffffe6;stroke-width:4}.segment[data-state=active] .segment-label,.segment[data-state=expected] .segment-label,.segment[data-state=pressed] .segment-label{opacity:1}.segment[data-state=pressed]{transform:scale(.97);filter:brightness(1.4)}.segment[data-state=pressed] .segment-wedge{stroke:#ffffffd9;stroke-width:3}.segment[data-state=error]{animation:segment-shake .25s ease-in-out}.segment[data-state=error] .segment-wedge{fill:color-mix(in oklch,oklch(.62 .12 calc(var(--seg-hue) * 1deg)),var(--error) 55%);stroke:var(--error);stroke-width:4}@keyframes segment-shake{0%,to{translate:0 0}25%{translate:4px 0}50%{translate:-4px 0}75%{translate:4px 0}}.center-disc{fill:var(--surface);pointer-events:none}.center-text{fill:var(--text);font-family:system-ui,sans-serif;font-size:120px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none}@media(prefers-reduced-motion:reduce){.segment,.reduced-motion .segment{transition:filter .1s ease-out}.segment[data-state=active],.segment[data-state=expected],.segment[data-state=pressed]{transform:none}.segment[data-state=error]{animation:none}}.reduced-motion .segment{transition:filter .1s ease-out}.reduced-motion .segment[data-state=active],.reduced-motion .segment[data-state=expected],.reduced-motion .segment[data-state=pressed]{transform:none}.reduced-motion .segment[data-state=error]{animation:none}[data-status=success] .segment-wedge{animation:wedge-shimmer .4s ease-out;animation-delay:calc(var(--seg-index) * 33ms)}@keyframes wedge-shimmer{50%{filter:brightness(1.5)}}[data-status=idle] .segment-wedge{animation:wedge-idle-glow 7.2s ease-in-out infinite;animation-delay:calc(var(--seg-index) * .6s)}@keyframes wedge-idle-glow{0%,16%,to{filter:brightness(1)}8%{filter:brightness(1.25)}}[data-status=gameOver] .circle-board{filter:saturate(.4)}@media(prefers-reduced-motion:reduce){[data-status=success] .segment-wedge,[data-status=idle] .segment-wedge{animation:none}[data-status=success] .segment-wedge{stroke:#fff9;stroke-width:3}}.reduced-motion[data-status=success] .segment-wedge,.reduced-motion[data-status=idle] .segment-wedge{animation:none}.reduced-motion[data-status=success] .segment-wedge{stroke:#fff9;stroke-width:3}@media(forced-colors:active){.segment-wedge{fill:Canvas;stroke:ButtonText;stroke-width:2}.segment[data-state=active] .segment-wedge,.segment[data-state=expected] .segment-wedge,.segment[data-state=pressed] .segment-wedge{stroke:Highlight;stroke-width:6}.segment[data-state=error] .segment-wedge{stroke:LinkText;stroke-width:6}.segment-label,.segment-minor-label,.center-text{fill:CanvasText;stroke:none}.center-disc{fill:Canvas;stroke:ButtonText;stroke-width:1}}.app{display:flex;flex-direction:column;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.app-title{font-size:1rem;font-weight:600;color:var(--text-dim)}.header-controls{display:flex;gap:.5rem}.icon-button{min-width:44px;min-height:44px;border:1px solid var(--surface);border-radius:8px;background:var(--surface);color:var(--text);font-size:1.1rem;cursor:pointer}.icon-button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:.5rem}.hud{display:flex;gap:1.5rem;font-size:1.05rem;color:var(--text-dim)}.hud-value{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;display:inline-block}.hud-pop{animation:hud-pop .24s ease-out}@keyframes hud-pop{40%{scale:1.25}}@media(prefers-reduced-motion:reduce){.hud-pop{animation:none}}.reduced-motion .hud-pop{animation:none}@media(orientation:landscape)and (max-height:520px){.app-header{padding:.25rem 1rem}.app-main{flex-direction:row;justify-content:center;gap:1.25rem;padding:.25rem}.circle-board{order:0;width:min(78dvh,60vw,640px)}.hud{order:1;flex-direction:column;gap:.4rem}.status-line{order:2;max-width:9rem;text-align:left}}.status-line{min-height:1.5em;margin:0;font-size:1rem;color:var(--text-dim);text-align:center}.audio-notice{margin:0;padding:.4rem .8rem;border-radius:8px;background:var(--surface);color:var(--text-dim);font-size:.9rem}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0e1116d1;z-index:10}.overlay-card{width:min(92vw,420px);padding:2rem 1.75rem;border-radius:16px;background:var(--surface);text-align:center;box-shadow:0 12px 40px #00000080}.overlay-card h1,.overlay-card h2{margin:0 0 .5rem;font-size:2rem}.tagline{margin:0 0 1rem;color:var(--text-dim)}.new-high-score{margin:0 0 .75rem;font-weight:700;color:var(--accent)}.score-summary{display:flex;justify-content:center;gap:1.5rem;margin:0 0 1.25rem}.score-summary div{display:flex;flex-direction:column}.score-summary dt{font-size:.8rem;color:var(--text-dim)}.score-summary dd{margin:0;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}.button-column{display:flex;flex-direction:column;gap:.6rem}.button-primary,.button-secondary{min-height:48px;border-radius:10px;font-size:1.05rem;font-weight:600;cursor:pointer;border:1px solid transparent}.button-primary{background:var(--accent);color:#08211a}.button-secondary{background:transparent;border-color:var(--text-dim);color:var(--text)}.button-primary:focus-visible,.button-secondary:focus-visible,.button-tertiary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.button-tertiary{min-height:44px;border:none;border-radius:10px;background:transparent;color:var(--text-dim);font-size:.95rem;cursor:pointer}.settings-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#0e111699;z-index:20}.settings-sheet{position:absolute;right:0;top:0;bottom:0;width:min(92vw,380px);padding:1rem 1.25rem 2rem;background:var(--surface);overflow-y:auto;box-shadow:-8px 0 32px #0006}@media(max-width:640px){.settings-sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-height:80dvh;border-radius:16px 16px 0 0;box-shadow:0 -8px 32px #0006;padding-bottom:calc(2rem + env(safe-area-inset-bottom))}}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.settings-header h2{margin:0;font-size:1.4rem}.settings-group{display:flex;flex-direction:column;gap:1.5rem}.settings-group+.settings-group{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgb(255 255 255 / .09)}.settings-group-title{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0;border:0;margin:0}.settings-field{display:block;padding:0;border:0;margin:0;min-width:0}.settings-row-text label,.settings-row-text legend{font-weight:600;padding:0}.settings-row-text p{margin:.15rem 0 0;font-size:.85rem;color:var(--text-dim)}.settings-field .settings-row-text{margin-bottom:.6rem}.chip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.chip-rows{display:flex;flex-direction:column;gap:.5rem}.chip{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:.4rem .5rem;border:1px solid var(--text-dim);border-radius:8px;color:var(--text-dim);cursor:pointer;text-align:center}.chip input[type=radio]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.chip-body{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:0}.chip-label{font-weight:600;white-space:nowrap}.chip:has(input:checked){border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-1px;background:var(--accent);color:#08211a}.chip:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}.chip-row{justify-content:flex-start;text-align:left;padding:.6rem .75rem}.chip-row .chip-body{align-items:flex-start}.chip-row small{color:var(--text-dim);font-size:.8rem;white-space:normal}.chip-row:has(input:checked) small{color:#08211a}.switch{position:relative;width:52px;height:30px;flex-shrink:0;border:1px solid var(--text-dim);border-radius:15px;background:var(--bg);cursor:pointer;transition:background .12s ease-out}.switch[aria-checked=true]{background:var(--accent);border-color:var(--accent)}.switch-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--text);transition:translate .12s ease-out}.switch[aria-checked=true] .switch-thumb{translate:22px 0;background:#08211a}.switch:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.reduced-motion .switch,.reduced-motion .switch-thumb{transition:none}.settings-sheet input[type=range]{width:140px;accent-color:var(--accent);min-height:44px}.settings-sheet select{min-height:44px;padding:0 .6rem;border-radius:8px;background:var(--bg);color:var(--text);border:1px solid var(--text-dim);font-size:1rem}.overlay-gameover,.overlay-highscores{max-width:26rem;width:100%}.leaderboard{width:100%;border-collapse:collapse;margin:.75rem 0 1rem;font-variant-numeric:tabular-nums}.leaderboard caption{text-align:left;padding-bottom:.4rem;color:var(--text-dim);font-size:.9rem}.leaderboard th,.leaderboard td{padding:.35rem .5rem;text-align:right;border-bottom:1px solid #2a313b}.leaderboard thead th{color:var(--text-dim);font-size:.8rem;font-weight:600}.leaderboard tbody th[scope=row],.leaderboard-initials{text-align:left}.leaderboard-initials{letter-spacing:.12em}.leaderboard-row.is-new th,.leaderboard-row.is-new td{outline:2px solid var(--accent);outline-offset:-2px;font-weight:700}.leaderboard-marker{display:inline-block;width:1em;color:var(--accent)}.leaderboard-flag{display:inline-block;margin-left:.3rem;padding:0 .3rem;border:1px solid var(--text-dim);border-radius:4px;font-size:.7rem;letter-spacing:normal;color:var(--text-dim)}.leaderboard-empty{margin:1rem 0;color:var(--text-dim)}.initials-form{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:.5rem 0 1rem}.initials-input{--cell-gap: .4em;width:10rem;max-width:100%;padding:.4rem .5rem;border:2px solid var(--text-dim);border-radius:8px;background:var(--bg);color:var(--accent);font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:clamp(2rem,9vw,2.5rem);font-weight:700;letter-spacing:var(--cell-gap);text-align:center;text-indent:calc(var(--cell-gap) / 2);text-transform:uppercase;min-height:44px}.initials-input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.initials-hint{margin:0;color:var(--text-dim);font-size:.85rem}.button-row{display:flex;gap:.75rem;justify-content:center}.start-card{display:flex;flex-direction:column;gap:1.25rem;width:min(100%,460px);padding:2rem}.start-card>*{margin:0}.start-heading{display:flex;flex-direction:column;gap:.5rem}.start-card h1,.start-card .tagline{margin:0}.start-actions{display:flex;flex-direction:column;gap:1.25rem}.start-quiet-row{display:flex;justify-content:center;gap:.5rem}.button-quiet{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:0 .5rem;border:none;border-radius:10px;background:transparent;color:var(--text-dim);font-size:1rem;white-space:nowrap;cursor:pointer}.button-quiet:hover{color:var(--text)}.button-quiet:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.quiet-icon{width:1rem;height:1rem;flex-shrink:0}.start-mini-scores{display:block;width:100%;padding:.25rem;border:none;border-radius:10px;background:transparent;color:var(--text-dim);font:inherit;text-align:left;cursor:pointer}.start-mini-scores:hover{color:var(--text)}.start-mini-scores:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.start-mini-list{display:flex;flex-direction:column;gap:.25rem}.start-mini-row{display:grid;grid-template-columns:1.25rem 1fr auto;gap:.5rem;align-items:baseline;font-size:.875rem;font-variant-numeric:tabular-nums;white-space:nowrap}.start-mini-initials{letter-spacing:.12em}.start-mini-score{text-align:right}.start-tempo{border:0;margin:0;padding:0}.start-tempo legend{color:var(--text-dim);font-size:.85rem;padding:0 0 .4rem}.tempo-segments{display:flex}.tempo-segment{position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:0 .15rem;border:1px solid var(--text-dim);color:var(--text-dim);cursor:pointer}.tempo-segment+.tempo-segment{margin-left:-1px}.tempo-segment:first-child{border-radius:8px 0 0 8px}.tempo-segment:last-child{border-radius:0 8px 8px 0}.tempo-segment input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.tempo-segment span{white-space:nowrap;font-size:clamp(.56rem,2.6vw,.8rem)}.tempo-segment:has(input:checked){z-index:1;border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-1px;background:var(--accent);color:#08211a;font-weight:700}.tempo-segment:has(input:focus-visible){z-index:2;outline:3px solid var(--accent);outline-offset:2px}.hud-row{display:flex;align-items:center;justify-content:center;gap:.5rem}.mode-chip{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .3rem;border:1px solid var(--accent);border-radius:4px;color:var(--accent);font-size:.75rem;font-weight:700}.countdown{width:min(100%,22rem);height:4px;margin:.4rem auto 0;background:#2a313b;border-radius:2px;overflow:hidden}.countdown-fill{height:100%;width:100%;transform-origin:left center;background:var(--accent);animation-name:countdown-shrink;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes countdown-shrink{0%{transform:scaleX(1);background:var(--accent)}70%{background:var(--accent)}to{transform:scaleX(0);background:var(--error)}}.reduced-motion .countdown-fill{animation-timing-function:steps(5,end)}.app[data-status=victory] .circle-board{animation:victory-shimmer .6s ease-in-out 2}@keyframes victory-shimmer{0%,to{filter:none}50%{filter:drop-shadow(0 0 14px #e8c46a)}}.reduced-motion .app[data-status=victory] .circle-board,.app.reduced-motion[data-status=victory] .circle-board{animation:none;filter:drop-shadow(0 0 10px #e8c46a)}.instrument-loading{display:inline-flex;align-items:center;gap:.35rem;color:var(--text-dim)}.spinner{width:.75em;height:.75em;border:2px solid var(--text-dim);border-top-color:transparent;border-radius:50%;animation:spinner-rotate .7s linear infinite}@keyframes spinner-rotate{to{rotate:360deg}}.reduced-motion .spinner{animation:none;border-top-color:var(--text-dim);opacity:.5}.settings-footer{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgb(255 255 255 / .09);display:flex;flex-direction:column;align-items:flex-start;gap:8px}.settings-footer .button-tertiary{padding:0;font-size:1rem;color:var(--text)}.settings-version{margin:0;color:var(--text-dim);font-size:.8rem;font-variant-numeric:tabular-nums}.flag-dialog{max-width:26rem;width:100%;text-align:left}.flag-kinds{border:none;margin:0;padding:0;min-width:0}.flag-kinds legend{padding:0;color:var(--text-dim);font-size:.9rem}.flag-kinds .chip-grid{margin-top:12px}.flag-note{margin-top:24px;display:flex;flex-direction:column;gap:8px}.flag-note label{color:var(--text-dim);font-size:.9rem}.flag-note textarea{width:100%;box-sizing:border-box;resize:vertical;padding:.6rem;border-radius:8px;background:var(--bg);color:var(--text);border:1px solid var(--text-dim);font:inherit;font-size:1rem}.flag-note textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.flag-error{margin:12px 0 0;color:var(--error);font-size:.9rem}.flag-thanks{margin:24px 0;font-size:1.1rem}.flag-thanks-animated{animation:flag-thanks-in .16s ease-out}@keyframes flag-thanks-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.flag-thanks-animated{animation:none}}.reduced-motion .flag-thanks-animated{animation:none}:root{--bg: #0e1116;--surface: #1a1f27;--text: #f2f5f8;--text-dim: #9aa4b0;--accent: #4fc3a1;--error: #e5484d}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;min-height:100dvh}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}