@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(./ibm-plex-sans-latin-400-normal-CDDApCn2.woff2)format("woff2"),url(./ibm-plex-sans-latin-400-normal-CYLoc0-x.woff)format("woff")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(./ibm-plex-sans-latin-500-normal-6ng42L7E.woff2)format("woff2"),url(./ibm-plex-sans-latin-500-normal-BgVn5rGT.woff)format("woff")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(./ibm-plex-sans-latin-600-normal-CuJfVYMP.woff2)format("woff2"),url(./ibm-plex-sans-latin-600-normal-Cu4Hd6ag.woff)format("woff")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:700;src:url(./ibm-plex-sans-latin-700-normal-Bxkt5Cjx.woff2)format("woff2"),url(./ibm-plex-sans-latin-700-normal-Bth3BMcD.woff)format("woff")}@font-face{font-family:Tomorrow;font-style:normal;font-display:swap;font-weight:700;src:url(./tomorrow-latin-700-normal-B6jNr9aw.woff2)format("woff2"),url(./tomorrow-latin-700-normal-DnjximXS.woff)format("woff")}:root{color:#edf2f4;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#080b0f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0;overflow:hidden}button{font:inherit}#app{min-height:100svh}.game-shell{background-color:#080b0f;background-image:linear-gradient(90deg,#ffffff09 1px,#0000 1px),linear-gradient(#ffffff07 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:64px 64px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;grid-template-columns:minmax(0,1fr) 330px;min-height:100svh;display:grid}.stage{min-width:0;min-height:100svh;position:relative;overflow:hidden}.stage:after{content:"";pointer-events:none;background:linear-gradient(90deg,#080b0f5c,#0000 22% 78%,#080b0f57),linear-gradient(#ffffff0a,#0000 18%,#0000003d);position:absolute;inset:0}#game,#game canvas{width:100%;height:100%;min-height:100svh;display:block}#game canvas{outline:none}.topbar{z-index:1;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:18px;display:flex;position:absolute;inset:22px 24px auto}.brand{align-items:center;gap:13px;min-width:0;display:flex}.brand-mark{border:2px solid #f2c14e;width:34px;height:34px;position:relative;transform:rotate(45deg);box-shadow:0 0 0 5px #f2c14e1f,0 0 22px #f2c14e61}.brand-mark:after{content:"";border:2px solid #4fb3ff;position:absolute;inset:8px}h1{color:#f9fbff;letter-spacing:0;margin:0;font-size:30px;font-weight:900;line-height:1}.subtitle{color:#edf2f49e;text-transform:uppercase;margin-top:7px;font-size:12px;font-weight:700;display:block}.stats{grid-template-columns:repeat(3,minmax(86px,auto));gap:8px;display:grid}.stats span,.best-panel,.target-panel,.progression-panel,.meter-grid,.panel-header,.chord-pad,.calibration-pad,.segmented-control,.chord-chart,.primary-action,.secondary-action{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#070a0ead;border:1px solid #ffffff24}.stats span{border-radius:7px;gap:4px;min-height:50px;padding:9px 11px;display:grid;box-shadow:inset 0 1px #ffffff14}.stats small{color:#edf2f494;text-transform:uppercase;font-size:11px;line-height:1}.stats strong{color:#fff;font-size:18px;line-height:1}.best-panel{z-index:1;border-color:#4fb3ff47;border-radius:8px;gap:5px;min-width:150px;padding:12px 14px;display:grid;position:absolute;bottom:84px;right:24px;box-shadow:inset 0 1px #ffffff1a}.best-panel span,.best-panel small{color:#edf2f49e;text-transform:uppercase;font-size:11px;font-weight:900}.best-panel strong{color:#4fb3ff;font-size:28px;line-height:1}.best-panel b{color:#edf2f4}.target-panel{z-index:1;border-color:#f2c14e5c;border-radius:8px;grid-template-columns:auto auto auto;align-items:center;gap:6px 14px;min-width:276px;padding:14px 16px;display:grid;position:absolute;bottom:84px;left:24px;box-shadow:inset 0 1px #ffffff1a,0 16px 40px #00000047}.progression-panel{z-index:1;border-radius:8px;width:min(360px,40vw);padding:12px;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}.pause-overlay{z-index:2;color:#edf2f4eb;text-transform:uppercase;pointer-events:none;background:#04070a6b;place-items:center;font-size:42px;font-weight:950;display:none;position:absolute;inset:0}.game-shell[data-paused=true] .pause-overlay{display:grid}.progression-panel>span{color:#edf2f4a8;text-align:center;text-transform:uppercase;margin-bottom:8px;font-size:11px;font-weight:900;display:block}.progression-steps{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.progression-steps span{color:#edf2f4b8;text-align:center;background:#ffffff0f;border-radius:5px;min-width:42px;padding:6px 8px;font-size:13px;font-weight:900}.rhythm-meter{background:#ffffff14;border-radius:999px;height:5px;margin-top:10px;position:relative;overflow:hidden}.rhythm-meter span{pointer-events:none;position:absolute;top:0;bottom:0}.rhythm-meter .good-zone{background:#4fb3ff42;width:26%;right:0}.rhythm-meter .perfect-zone{background:#f2c14e61;width:11%;right:0}.rhythm-meter i{z-index:1;border-radius:inherit;background:linear-gradient(90deg,#4fb3ff,#f2c14e);width:100%;height:100%;transition:width .12s linear;display:block;position:relative}.rhythm-meter[data-rating=good] i{background:#4fb3ff}.rhythm-meter[data-rating=miss] i{background:#ef5d60}.rhythm-rating{color:#edf2f4ad;text-align:center;text-transform:uppercase;margin-top:8px;font-size:11px;display:block}.target-panel span,.target-panel em{color:#edf2f4a8;text-transform:uppercase;font-size:12px;font-style:normal;font-weight:800}.target-panel strong{color:#f2c14e;text-shadow:0 0 20px #f2c14e6b;font-size:36px;line-height:.92}.control-panel{background:linear-gradient(#4fb3ff21,#0000 30%),linear-gradient(#0000 58%,#f2c14e14),#10151c;border-left:1px solid #ffffff1a;flex-direction:column;justify-content:center;gap:12px;padding:18px;display:flex;overflow-y:auto}.mode-panel{gap:8px;display:grid}.segmented-control{border-radius:8px;grid-template-columns:1fr 1fr;gap:6px;padding:6px;display:grid}.segmented-control button,#difficultySelect{color:#edf2f4;cursor:pointer;background:#ffffff0f;border:0;border-radius:6px;min-height:38px;font-weight:900}.segmented-control button.is-selected{color:#11151b;background:#f2c14e}.run-controls{grid-template-columns:1fr 1fr auto;align-items:center;gap:8px;display:grid}.run-controls button{color:#edf2f4;cursor:pointer;background:#fff1;border:1px solid #ffffff24;border-radius:6px;min-height:38px;font-weight:900}.run-controls button:hover{background:#4fb3ff1f;border-color:#4fb3ff61}.run-controls button.is-paused{color:#11151b;background:#f2c14e}.run-controls strong{color:#58d68d;text-align:right;text-transform:uppercase;min-width:58px;font-size:12px;font-weight:900}#difficultySelect{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#070a0ead;border:1px solid #ffffff24;width:100%;padding:0 10px}.panel-header{border-radius:8px;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:10px 12px;display:flex}.panel-header span,.panel-header strong{text-transform:uppercase;font-size:12px;font-weight:900;line-height:1}.panel-header span{color:#edf2f4a8}.panel-header strong{color:#edf2f4}.panel-header.compact{margin-bottom:8px}#micState[data-state=ready]{color:#58d68d}#micState[data-state=asking]{color:#f2c14e}#micState[data-state=denied]{color:#ef5d60}#midiState[data-state=ready]{color:#58d68d}#midiState[data-state=asking]{color:#f2c14e}#midiState[data-state=unsupported],#midiState[data-state=denied]{color:#ef5d60}.primary-action,.secondary-action{color:#11151b;cursor:pointer;background:linear-gradient(#ffd76a,#f2c14e);border-color:#0000;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:54px;font-weight:900;display:inline-flex;box-shadow:inset 0 1px #ffffff6b,0 14px 28px #f2c14e2e}.secondary-action{color:#edf2f4;min-height:46px;box-shadow:none;background:linear-gradient(#4fb3ff3d,#4fb3ff14),#ffffff0a;border-color:#4fb3ff47}.secondary-action .button-icon{background:#4fb3ff;box-shadow:0 0 0 5px #4fb3ff1f}.button-icon{background:#11151b;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 5px #11151b29}.primary-action:hover{filter:brightness(1.06)}.secondary-action:hover{filter:brightness(1.08);border-color:#4fb3ff7a}.primary-action:focus-visible,.secondary-action:focus-visible,.chord-pad button:focus-visible{outline-offset:3px;outline:2px solid #4fb3ff}.meter-grid{border-radius:8px;grid-template-columns:1fr auto;gap:14px 12px;padding:15px;display:grid}.meter-grid span{color:#edf2f494;text-transform:uppercase;font-size:12px;font-weight:800}.meter-grid strong{color:#fff;text-align:right;min-width:0;font-size:15px}#battleStatus{overflow-wrap:anywhere;max-width:148px}.blade-panel,.calibration-panel{padding-top:2px}.chord-pad,.calibration-pad{border-radius:8px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px;display:grid}.chord-pad button{color:#edf2f4;cursor:pointer;background:linear-gradient(#ffffff1a,#ffffff09),#ffffff0a;border:1px solid #ffffff1f;border-radius:6px;place-items:center;gap:5px;min-width:0;min-height:58px;transition:background .14s,border-color .14s,color .14s,transform .14s,box-shadow .14s;display:grid}.calibration-pad button{color:#edf2f4;cursor:pointer;background:#ffffff0e;border:1px solid #ffffff1f;border-radius:6px;min-width:0;min-height:42px;font-size:12px;font-weight:900}.calibration-pad button:hover{background:#f2c14e1f;border-color:#f2c14e6b}.chord-pad button span{font-size:21px;font-weight:950;line-height:1}.chord-pad button small{color:#edf2f48c;text-transform:uppercase;font-size:10px;font-weight:800}.chord-chart{border-radius:8px;place-items:center;min-height:174px;padding:8px;display:grid}.chord-chart svg{width:100%;max-width:220px}.chord-chart .string,.chord-chart .fret{stroke:#edf2f470;stroke-width:1.4px}.chord-chart .nut{stroke:#edf2f4;stroke-width:4px}.chord-chart .finger-text{fill:#11151b;font-size:11px;font-weight:900}.chord-chart .open,.chord-chart .muted{fill:#edf2f4b8;font-size:13px;font-weight:900}.chord-chart .chart-title{fill:#4fb3ff;font-size:22px;font-weight:900}.chord-pad button:hover{background:linear-gradient(#ffffff29,#ffffff0f),#ffffff0f;transform:translateY(-1px)}.chord-pad button.is-target small{color:#11151bb8}.chord-pad button.is-defense small{color:#071019b8}.chord-pad button.is-detected{border-color:#4fb3ff;box-shadow:0 0 0 3px #4fb3ff29,0 0 24px #4fb3ff2e}.onboarding{z-index:5;background:radial-gradient(circle at 50% 30%,#4fb3ff2e,#0000 34%),#05080cb8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.onboarding.is-hidden{display:none}.onboarding-panel{background:#0d1219f0;border:1px solid #ffffff29;border-radius:8px;width:min(480px,100%);padding:24px;box-shadow:0 24px 80px #0000006b}.eyebrow{color:#4fb3ff;text-transform:uppercase;font-size:12px;font-weight:900}.onboarding h2{color:#fff;margin:10px 0 18px;font-size:34px;line-height:1}.guide-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.guide-grid div{background:#ffffff0f;border:1px solid #ffffff1f;border-radius:6px;place-items:center;gap:8px;min-height:82px;display:grid}.guide-grid strong{color:#f2c14e;font-size:26px;line-height:1}.guide-grid span,.onboarding p{color:#edf2f4ad}.guide-grid span{text-transform:uppercase;font-size:11px;font-weight:900}.onboarding p{margin:18px 0;line-height:1.55}#startGameButton{color:#11151b;cursor:pointer;background:linear-gradient(#ffd76a,#f2c14e);border:0;border-radius:8px;width:100%;min-height:50px;font-weight:900}@media (width<=900px){body{overflow:auto}.game-shell{grid-template-rows:minmax(500px,68svh) auto;grid-template-columns:1fr}.stage,#game,#game canvas{min-height:500px}.control-panel{border-top:1px solid #ffffff1a;border-left:0;justify-content:flex-start}.topbar{inset:16px 16px auto}h1{font-size:24px}.subtitle{display:none}.brand-mark{width:26px;height:26px}.stats{grid-template-columns:repeat(3,minmax(0,1fr));min-width:286px}.target-panel{min-width:252px;bottom:82px;left:16px}.best-panel{min-width:128px;bottom:82px;right:16px}.progression-panel{width:calc(100% - 32px);bottom:16px}}@media (width<=560px){.topbar{flex-direction:column}.stats{width:100%;min-width:0}.stats span{min-height:44px;padding:8px}.stats strong{font-size:16px}.target-panel{min-width:214px;padding:12px;bottom:76px}.target-panel strong{font-size:30px}.best-panel{display:none}.control-panel{gap:10px;padding:14px}.primary-action,.secondary-action{min-height:48px}.meter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.meter-grid span{display:none}.meter-grid strong{text-align:center;background:#ffffff0e;border-radius:6px;min-height:34px;padding:9px}.chord-pad button{min-height:68px}.chord-pad button span{font-size:24px}.calibration-panel{order:4}.onboarding-panel{padding:18px}.onboarding h2{font-size:28px}.guide-grid{grid-template-columns:1fr}.guide-grid div{grid-template-columns:64px 1fr;place-items:center start;min-height:62px;padding:0 14px}.chord-chart-panel{display:none}}:root{--color-canvas:oklch(13% .014 250);--color-canvas-raised:oklch(17% .016 250);--color-panel:oklch(20% .017 250);--color-panel-strong:oklch(24% .018 250);--color-rule:oklch(34% .016 250);--color-rule-soft:oklch(28% .014 250);--color-ink:oklch(94% .008 250);--color-ink-strong:oklch(97% .008 85);--color-muted:oklch(72% .012 250);--color-muted-strong:oklch(82% .012 250);--color-accent:oklch(82% .16 85);--color-accent-hover:oklch(87% .15 85);--color-accent-ink:oklch(19% .02 75);--color-defense:oklch(76% .14 240);--color-defense-ink:oklch(17% .025 245);--color-success:oklch(76% .14 150);--color-danger:oklch(68% .18 25);--color-danger-ink:oklch(18% .024 25);--color-focus:oklch(96% .025 240);--color-overlay:oklch(7% .012 250/.78);--font-display:"Tomorrow", "Bahnschrift", "Arial Narrow", sans-serif;--font-body:"IBM Plex Sans", "Aptos", "Segoe UI", sans-serif;--space-3xs:.125rem;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-md:1.25rem;--text-lg:1.5625rem;--text-xl:1.953rem;--text-2xl:2.441rem;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-micro:.1s;--dur-short:.18s;--dur-long:.32s;--rule-thin:1px;--radius-control:.5rem;--radius-panel:.75rem;--radius-dialog:1rem;--z-base:1;--z-raised:10;--z-sticky:200;--z-modal:400}html,body{overflow-x:clip}body{min-width:20rem;color:var(--color-ink);background:var(--color-canvas);font-family:var(--font-body);overflow-y:auto}button,select,summary{font-family:var(--font-body)}button,summary,.segmented-control button,#difficultySelect{white-space:nowrap}button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;box-shadow:0 0 0 5px var(--color-canvas)}button:disabled,button[aria-disabled=true],select:disabled{cursor:not-allowed;opacity:.5}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:fixed;overflow:hidden}.game-shell{min-height:100svh;color:var(--color-ink);background:var(--color-canvas);grid-template-rows:minmax(32rem,68svh) auto;grid-template-columns:minmax(0,1fr)}.stage{background:var(--color-canvas);min-height:32rem}.stage:after{background:linear-gradient(180deg, color-mix(in oklch, var(--color-canvas) 18%, transparent), transparent 26%, color-mix(in oklch, var(--color-canvas) 48%, transparent))}#game,#game canvas{min-height:32rem}.topbar{inset:var(--space-md) var(--space-md) auto;z-index:var(--z-raised);gap:var(--space-sm);flex-direction:column}.brand{gap:var(--space-sm)}.brand-mark{border-color:var(--color-accent);width:2rem;height:2rem;box-shadow:0 0 0 4px color-mix(in oklch, var(--color-accent) 12%, transparent)}.brand-mark:after{border-color:var(--color-defense)}h1,.target-panel strong,.stats strong,.best-panel strong,.chord-pad button span,.onboarding h2{font-family:var(--font-display);font-style:normal}h1{color:var(--color-ink-strong);letter-spacing:-.025em;overflow-wrap:anywhere;font-size:clamp(1.45rem,3vw,1.9rem);font-weight:700}.subtitle{color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.08em;margin-block-start:var(--space-xs)}.stats{gap:var(--space-xs);font-variant-numeric:tabular-nums;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;min-width:0}.stats span,.best-panel,.target-panel,.progression-panel,.meter-grid,.panel-header,.chord-pad,.calibration-pad,.segmented-control,.chord-chart,.primary-action,.secondary-action{background:var(--color-panel);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-color:#0000}.stats span{min-height:2.75rem;padding:var(--space-xs);border-radius:var(--radius-control)}.stats small,.best-panel span,.best-panel small,.target-panel span,.target-panel em,.progression-panel>span,.meter-grid span,.panel-header span{color:var(--color-muted)}.stats strong,.meter-grid strong{color:var(--color-ink-strong);font-variant-numeric:tabular-nums}.best-panel,.target-panel,.progression-panel{z-index:var(--z-raised);border-radius:var(--radius-panel)}.best-panel{color:var(--color-ink);display:none}.best-panel strong,.chord-chart .chart-title{color:var(--color-defense)}.target-panel{inset:auto auto var(--space-md) var(--space-md);gap:var(--space-xs) var(--space-sm);width:min(16rem,100% - 2rem);min-width:0;padding:var(--space-sm) var(--space-md);grid-template-columns:minmax(0,auto) auto minmax(0,1fr)}.target-panel strong{color:var(--color-accent);font-size:var(--text-2xl);text-shadow:none}#defense{color:var(--color-defense);text-shadow:none}.progression-panel{inset:auto var(--space-md) calc(var(--space-2xl) + var(--space-lg)) var(--space-md);width:auto;padding:var(--space-sm);transform:none}.game-shell[data-mode=duel] .progression-panel,.game-shell[data-mode=progression] .best-panel{display:none}.progression-steps span{color:var(--color-muted-strong);background:var(--color-panel-strong)}.progression-steps span.is-current{color:var(--color-accent-ink);background:var(--color-accent)}.rhythm-meter{background:var(--color-rule-soft)}.rhythm-meter .good-zone{background:color-mix(in oklch, var(--color-defense) 28%, transparent)}.rhythm-meter .perfect-zone{background:color-mix(in oklch, var(--color-accent) 38%, transparent)}.rhythm-meter i{background:var(--color-defense)}.rhythm-meter[data-rating=perfect] i{background:var(--color-accent);box-shadow:none}.rhythm-meter[data-rating=good] i{background-color:var(--color-defense)}.rhythm-meter[data-rating=good]+.rhythm-rating{color:var(--color-defense)}.rhythm-meter[data-rating=miss] i{background-color:var(--color-danger)}.rhythm-meter[data-rating=miss]+.rhythm-rating{color:var(--color-danger)}.rhythm-meter[data-rating=perfect]+.rhythm-rating{color:var(--color-accent)}.pause-overlay{z-index:var(--z-sticky);color:var(--color-ink-strong);background:color-mix(in oklch, var(--color-canvas) 72%, transparent);font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:.05em}.control-panel{justify-content:flex-start;gap:var(--space-sm);padding:var(--space-md);border:0;border-block-start:var(--rule-thin) solid var(--color-rule-soft);background:var(--color-canvas-raised)}.mode-panel,.blade-panel,.calibration-panel,.chord-chart-panel{gap:var(--space-xs);padding:0;display:grid}.panel-header{min-height:2.75rem;padding:var(--space-sm);border-radius:var(--radius-control)}.panel-header.compact{margin:0}.segmented-control{gap:var(--space-xs);min-width:0;padding:var(--space-xs);border-radius:var(--radius-panel)}.segmented-control button,#difficultySelect,.run-controls button,.calibration-pad button{border:var(--rule-thin) solid transparent;border-radius:var(--radius-control);min-height:2.75rem;color:var(--color-ink);background:var(--color-panel-strong);transition:background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);font-weight:600}.segmented-control button.is-selected,.segmented-control button[aria-pressed=true]{color:var(--color-accent-ink);background:var(--color-accent)}#difficultySelect{width:100%;padding-inline:var(--space-sm);border-color:var(--color-rule);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.run-controls{gap:var(--space-xs);grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.run-controls strong{color:var(--color-success);font-variant-numeric:tabular-nums}.run-controls strong[data-state=paused]{color:var(--color-accent)}.input-actions{gap:var(--space-xs);grid-template-columns:minmax(0,1fr);display:grid}.primary-action,.secondary-action{border-radius:var(--radius-control);min-height:3rem;transition:background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);font-weight:700}.primary-action{color:var(--color-accent-ink);background:var(--color-accent)}.secondary-action{color:var(--color-ink);background:color-mix(in oklch, var(--color-defense) 22%, var(--color-panel))}.button-icon{box-shadow:none;background:currentColor}.primary-action[data-state=loading] .button-icon,.secondary-action[data-state=loading] .button-icon{border:2px solid;background:0 0;border-inline-end-color:#0000;animation:.7s linear infinite input-spin}.primary-action[data-state=success],.secondary-action[data-state=success]{color:var(--color-canvas);background:var(--color-success)}.primary-action[data-state=error],.secondary-action[data-state=error]{color:var(--color-danger-ink);background:var(--color-danger)}@keyframes input-spin{to{transform:rotate(1turn)}}.meter-grid{gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-panel);grid-template-columns:minmax(5rem,auto) minmax(0,1fr)}.meter-grid strong{overflow-wrap:anywhere}.chord-pad,.calibration-pad{gap:var(--space-xs);padding:var(--space-xs);border-radius:var(--radius-panel)}.chord-pad button,.calibration-pad button{color:var(--color-ink);background:var(--color-panel-strong);box-shadow:none;border-color:#0000}.chord-pad button{min-height:3.75rem;transition:background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out)}.chord-pad button small{color:var(--color-muted)}.chord-pad button.is-target{color:var(--color-accent-ink);background:var(--color-accent);box-shadow:none}.chord-pad button.is-target small,.chord-pad button.is-defense small{color:currentColor;opacity:.72}.chord-pad button.is-defense{color:var(--color-defense-ink);background:var(--color-defense);box-shadow:none}.chord-pad button.is-detected{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:none}.advanced-tools{border-radius:var(--radius-panel);background:var(--color-panel)}.advanced-tools summary{align-items:center;gap:var(--space-sm);min-height:3rem;padding:var(--space-sm) var(--space-md);color:var(--color-ink);cursor:pointer;grid-template-columns:minmax(0,1fr) auto;list-style:none;display:grid}.advanced-tools summary::-webkit-details-marker{display:none}.advanced-tools summary:after{content:"+";color:var(--color-defense);font-family:var(--font-display);font-size:var(--text-md)}.advanced-tools[open] summary:after{content:"−"}.advanced-tools summary small{color:var(--color-muted);font-size:var(--text-xs);white-space:normal;font-weight:400;display:block}.advanced-tools-content{gap:var(--space-md);padding:0 var(--space-md) var(--space-md);display:grid}.chord-chart{border-radius:var(--radius-panel);min-height:10rem}.chord-chart .string,.chord-chart .fret{stroke:var(--color-muted)}.chord-chart .nut,.chord-chart .open,.chord-chart .muted{stroke:var(--color-ink);fill:var(--color-ink)}.chord-chart .finger{fill:var(--color-accent)}.chord-chart .finger-text{fill:var(--color-accent-ink)}.onboarding{border-radius:var(--radius-dialog);width:min(38rem,100% - 2rem);height:fit-content;max-height:min(88svh,48rem);color:var(--color-ink);box-shadow:none;background:0 0;border:0;margin:auto;padding:0;position:fixed;inset:0;overflow:auto}.onboarding:not([open]){display:none}.onboarding[open]{display:block}.onboarding::backdrop{background:var(--color-overlay)}.onboarding-panel{gap:var(--space-lg);width:100%;padding:var(--space-lg);border-radius:var(--radius-dialog);background:var(--color-canvas-raised);box-shadow:none;border:0;display:grid}.onboarding-heading{gap:var(--space-xs);display:grid}.onboarding-heading span{color:var(--color-defense);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:700}.onboarding h2{color:var(--color-ink-strong);letter-spacing:-.03em;overflow-wrap:anywhere;margin:0;font-size:clamp(1.9rem,7vw,2.75rem);line-height:1.04}.onboarding p{max-width:54ch;color:var(--color-muted-strong);font-size:var(--text-base);margin:0;line-height:1.55}.input-choice-list{gap:var(--space-xs);display:grid}.input-choice{align-items:center;gap:var(--space-sm);min-height:4.25rem;padding:var(--space-sm);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-control);color:var(--color-ink);background:var(--color-panel);text-align:start;transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.input-choice[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-panel-strong)}.choice-mark{width:2rem;height:2rem;color:var(--color-muted);background:var(--color-canvas);font-family:var(--font-display);font-size:var(--text-xs);border-radius:50%;place-items:center;display:grid}.input-choice[aria-pressed=true] .choice-mark{color:var(--color-accent-ink);background:var(--color-accent)}.input-choice strong,.input-choice small{display:block}.input-choice strong{font-size:var(--text-base)}.input-choice small{color:var(--color-muted);font-size:var(--text-xs);white-space:normal;margin-block-start:var(--space-2xs);line-height:1.35}.choice-state{color:var(--color-muted);font-size:var(--text-xs);font-weight:600}.input-choice[aria-pressed=true] .choice-state{color:var(--color-accent)}#startGameButton{border-radius:var(--radius-control);min-height:3.25rem;color:var(--color-accent-ink);background:var(--color-accent);transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);border:0;font-weight:700}@media (hover:hover) and (pointer:fine){.segmented-control button:hover,.run-controls button:hover,.calibration-pad button:hover,.chord-pad button:hover,.input-choice:hover{color:var(--color-ink-strong);background:color-mix(in oklch, var(--color-panel-strong) 82%, var(--color-defense));transform:translateY(-1px)}.primary-action:hover,#startGameButton:hover{background:var(--color-accent-hover);filter:none;transform:translateY(-1px)}.secondary-action:hover{background:color-mix(in oklch, var(--color-defense) 30%, var(--color-panel));filter:none;transform:translateY(-1px)}#difficultySelect:hover{border-color:var(--color-muted);background:var(--color-panel)}}button:active,.input-choice:active,summary:active{transform:translateY(1px)}#difficultySelect:active{border-color:var(--color-defense);background:var(--color-panel)}@media (pointer:coarse){button,select,summary{min-height:2.75rem}}@media (width<=32rem){.onboarding{width:calc(100% - var(--space-md));max-height:calc(100svh - var(--space-md))}.onboarding-panel,.input-choice-list,.input-choice,.input-choice>span{min-width:0}.onboarding-panel{gap:var(--space-md);padding:var(--space-md)}.onboarding h2{font-size:clamp(1.65rem,9vw,2.1rem)}.onboarding p{font-size:var(--text-sm)}.input-choice{grid-template-columns:auto minmax(0,1fr);max-width:100%}.choice-state{display:none}}@media (width>=40rem){.topbar{flex-direction:row}.stats{width:auto;min-width:18rem}.best-panel{inset:auto var(--space-md) var(--space-md) auto;display:grid}.progression-panel{inset:auto 50% var(--space-md) auto;width:min(22rem,42vw);transform:translate(50%)}.game-shell[data-mode=progression] .target-panel{bottom:calc(var(--space-2xl) + var(--space-lg))}.input-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.advanced-tools-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.onboarding-panel{padding:var(--space-xl)}}@media (width>=60rem){.game-shell{grid-template-rows:minmax(100svh,auto);grid-template-columns:minmax(0,1fr) clamp(19rem,23vw,22rem)}.stage,#game,#game canvas{min-height:100svh}.control-panel{border-block-start:0;border-inline-start:var(--rule-thin) solid var(--color-rule-soft);max-height:100svh;overflow-y:auto}.advanced-tools-content{grid-template-columns:minmax(0,1fr)}}@media (width>=90rem){.control-panel{padding:var(--space-lg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.15s!important;animation-duration:.15s!important;animation-iteration-count:1!important}button,.input-choice,summary{transform:none!important}}