:root{color:#eef2f7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--bg:#0c0f14;--panel:#171b23;--surface:#222832;--surface-raised:#272e39;--surface-hover:#303946;--border:#333b47;--border-strong:#4a5666;--border-bright:#758398;--text:#eef2f7;--muted:#a4adba;--muted-dim:#778292;--primary:#c5f16a;--primary-bright:#d0fa7b;--primary-soft:#bee486;--primary-ink:#17200c;--space-4:16px;--radius-lg:14px;--radius-xl:20px;--shadow-panel:0 24px 72px #0005;background:#0c0f14;font-family:Inter,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html{background:var(--bg);min-width:320px;min-height:100%}body{background:radial-gradient(circle at 50% -20%, #1b2430 0, transparent 42%), linear-gradient(180deg, #0f1218 0%, var(--bg) 68%);min-width:320px;min-height:100vh;color:var(--text);margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--primary-bright);outline-offset:3px}button:disabled{cursor:not-allowed}::selection{background:color-mix(in srgb, var(--primary) 34%, transparent);color:var(--text)}main{width:min(100%,1240px);min-height:100vh;margin:0 auto;padding:clamp(24px,3vw,42px) clamp(18px,4vw,48px)}.page-header,.game-heading,.controls,.next-actions{justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.brand{width:200px;height:46px;display:block;overflow:hidden}.brand-logo{object-fit:cover;object-position:center 46%;width:100%;height:100%;display:block}.badge,.difficulty-chip{border:1px solid var(--border);color:var(--muted);letter-spacing:1.4px;text-transform:uppercase;border-radius:999px;padding:8px 12px;font-size:10px;font-weight:720}.intro{margin:clamp(48px,7vh,72px) 0 32px}.eyebrow{color:var(--primary-soft);letter-spacing:2px;margin:0 0 11px;font-size:10px;font-weight:760}h1{letter-spacing:-2.2px;margin:0;font-size:clamp(36px,4.2vw,54px);font-weight:700;line-height:1.04}h2{letter-spacing:-.35px;margin:0;font-size:19px;font-weight:640}.intro h1:focus{outline:none}.difficulty-picker,.game{border:1px solid var(--border);background:linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, white 4%), var(--panel));box-shadow:var(--shadow-panel)}.difficulty-picker{border-radius:var(--radius-xl);padding:clamp(20px,3vw,30px);animation:.26s ease-out both panel-in}.difficulty-options{gap:var(--space-4);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.difficulty-card{--mode-color:var(--primary);border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(155deg, var(--surface-raised), var(--surface));min-height:126px;color:var(--text);cursor:pointer;isolation:isolate;place-items:center;padding:24px 16px;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;display:grid;position:relative;overflow:hidden}.difficulty-card:before{z-index:-1;background:var(--mode-color);content:"";filter:blur(32px);opacity:.13;border-radius:50%;height:50px;transition:opacity .15s,transform .15s;position:absolute;inset:auto 16% -28px}.difficulty-card:hover{border-color:color-mix(in srgb, var(--mode-color) 62%, var(--border));background:linear-gradient(155deg, var(--surface-hover), var(--surface-raised));transform:translateY(-3px);box-shadow:0 14px 30px #0004}.difficulty-card:hover:before{opacity:.28;transform:scale(1.15)}.difficulty-card:active{transform:translateY(0)scale(.985)}.difficulty-card:focus-visible{outline-color:var(--mode-color)}.difficulty-easy{--mode-color:var(--primary)}.difficulty-normal{--mode-color:#88c7ff}.difficulty-hard{--mode-color:#ff9caf}.difficulty-insane{--mode-color:#e69cff}.difficulty-name{color:var(--mode-color);letter-spacing:2.1px;text-transform:uppercase;font-size:15px;font-weight:780}.game{isolation:isolate;border-radius:var(--radius-xl);padding:clamp(22px,3vw,32px);animation:.22s ease-out both panel-in;position:relative}.game:after{z-index:3;border-radius:inherit;content:"";opacity:0;pointer-events:none;border:1px solid #0000;position:absolute;inset:-1px}.game.panel-beat-1:after,.game.panel-beat-half:after{animation:.28s ease-out both panel-beat-one}.game.panel-beat-2:after{animation:.22s ease-out both panel-beat-two}.game.panel-beat-3:after{animation:.22s ease-out both panel-beat-three}.game.panel-beat-4:after{animation:.22s ease-out both panel-beat-four}.game-heading{margin-bottom:22px}.game-heading .eyebrow{color:var(--muted)}.tempo{color:var(--muted);white-space:nowrap;letter-spacing:1.1px;font-size:10px;font-weight:650}.tempo strong{color:var(--text);font-variant-numeric:tabular-nums;font-size:19px}.tempo span{color:var(--border-strong);margin:0 9px}.round-meta{align-items:center;gap:10px;display:flex;position:relative}.difficulty-chip.easy{color:var(--primary);border-color:#638c59}.difficulty-chip.normal{color:#88c7ff;border-color:#53799c}.difficulty-chip.hard{color:#ff9caf;border-color:#925c69}.difficulty-chip.insane{color:#e69cff;border-color:#8e5ca0}.difficulty-trigger{background:color-mix(in srgb, var(--surface-raised) 72%, transparent);cursor:pointer;align-items:center;gap:6px;transition:border-color .14s,background .14s,box-shadow .14s;display:inline-flex}.difficulty-trigger:hover,.difficulty-trigger[aria-expanded=true]{background:var(--surface-raised);box-shadow:0 7px 22px #0005}.difficulty-trigger[aria-expanded=true] .chip-icon{transform:rotate(180deg)}.chip-icon{width:13px;height:13px;transition:transform .14s}.difficulty-menu{z-index:20;border:1px solid var(--border-strong);background:color-mix(in srgb, var(--panel) 96%, black 4%);border-radius:12px;gap:3px;width:164px;padding:6px;animation:.13s ease-out both menu-in;display:grid;position:absolute;top:calc(100% + 9px);right:0;box-shadow:0 18px 42px #0009}.difficulty-menu button{min-height:36px;color:var(--muted);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 10px;font-size:12px;font-weight:670;display:flex}.difficulty-menu button:hover,.difficulty-menu button:focus-visible{background:var(--surface-raised);color:var(--text)}.difficulty-menu button.selected{color:var(--text);background:color-mix(in srgb, var(--primary) 8%, transparent)}.difficulty-dot{background:var(--primary);border-radius:50%;width:7px;height:7px;box-shadow:0 0 9px}.difficulty-dot.normal{background:#88c7ff}.difficulty-dot.hard{background:#ff9caf}.difficulty-dot.insane{background:#e69cff}.listen-count{color:var(--muted);font-variant-numeric:tabular-nums;margin:0 0 22px;font-size:12px}.listen-count strong{color:var(--text);font-weight:720}.listen-count>span{color:var(--border-strong);margin:0 8px}.grid-scroll{scrollbar-color:var(--border-strong) transparent;scrollbar-width:thin;margin:-6px -4px -10px;padding:6px 4px 10px;overflow-x:auto}.sequencer{min-width:720px}.grid-line{grid-template-columns:104px repeat(16,minmax(0,1fr));align-items:center;gap:clamp(5px,.7vw,8px);display:grid}.step-labels{color:var(--muted-dim);font-variant-numeric:tabular-nums;text-align:center;margin:12px 0 9px;font-size:9px}.beat-start{color:var(--text);font-weight:760}.downbeat-label{color:var(--primary);text-shadow:0 0 12px color-mix(in srgb, var(--primary) 65%, transparent);font-weight:800}.instrument-row{--accent:var(--primary);margin-bottom:10px}.instrument-row.snare{--accent:#b8a1ff}.instrument-row.hat{--accent:#74d3df}.row-label{min-width:0;color:var(--text);align-items:center;gap:9px;padding:8px 0;font-size:12px;font-weight:670;display:flex}.audition{border:1px solid var(--border-strong);background:var(--surface-raised);height:32px;color:var(--accent);cursor:pointer;border-radius:9px;flex:0 0 32px;place-items:center;padding:0;transition:transform .11s,border-color .14s,background .14s,box-shadow .14s;display:inline-grid}.audition:hover{border-color:var(--accent);background:var(--surface-hover);box-shadow:0 0 16px color-mix(in srgb, var(--accent) 16%, transparent)}.audition:active{transform:scale(.92)}.cell{border:1px solid var(--border);background:var(--surface);width:100%;min-width:0;height:50px;color:var(--primary-ink);border-radius:8px;padding:0;transition:transform 90ms,background .12s,border-color .12s,box-shadow .12s,opacity .12s;position:relative}.cell:enabled:hover{border-color:var(--border-bright);background:var(--surface-hover);transform:translateY(-1px)}.cell:enabled:active{transform:translateY(0)scale(.94)}.cell.active{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 5px 16px color-mix(in srgb, var(--accent) 15%, transparent)}.cell.active:hover{background:color-mix(in srgb, var(--accent) 88%, white)}.cell span{font-size:12px}.cell:disabled{cursor:default;opacity:.48}.revealed .cell:disabled{opacity:1}.beat-divider:before{background:var(--border-bright);content:"";opacity:.8;pointer-events:none;width:1px;position:absolute;top:5px;bottom:5px;left:calc(clamp(5px,.7vw,8px)/-1.72414)}.rows-2 .sequencer{padding-block:5px}.rows-2 .instrument-row{margin-bottom:14px}.rows-2 .cell{height:58px}.controls{border-top:1px solid var(--border);margin-top:26px;padding-top:22px}.audio-controls,.action-controls{gap:10px;display:flex}.controls button,.next-actions button{border:1px solid var(--border-strong);background:var(--surface-raised);min-height:44px;color:var(--text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:9px;padding:11px 17px;font-size:13px;font-weight:680;transition:transform .11s,filter .14s,border-color .14s,background .14s,box-shadow .14s,color .14s;display:inline-flex}.controls button:hover,.next-actions button:hover{border-color:var(--border-bright);background:var(--surface-hover)}.controls button:active,.next-actions button:active{transform:scale(.97)}.controls button:disabled{border-color:var(--border);background:color-mix(in srgb, var(--surface) 80%, transparent);color:var(--muted-dim);cursor:not-allowed;opacity:.66;transform:none}.control-icon{flex:0 0 17px;width:17px;height:17px}.controls .primary-listen,.controls .check,.next-actions .check{border-color:var(--primary);background:var(--primary);color:var(--primary-ink);box-shadow:0 8px 22px color-mix(in srgb, var(--primary) 15%, transparent)}.controls .primary-listen{min-width:126px;font-size:14px}.controls .primary-listen:hover,.controls .check:hover,.next-actions .check:hover{border-color:var(--primary-bright);background:var(--primary-bright);box-shadow:0 10px 28px color-mix(in srgb, var(--primary) 23%, transparent)}.primary-listen[data-playing=true]{animation:1.25s ease-in-out infinite playing-pulse}.loop-toggle strong{min-width:28px;color:var(--muted-dim);letter-spacing:.8px;font-size:10px}.loop-toggle[aria-pressed=true]{border-color:var(--primary);background:color-mix(in srgb, var(--primary) 10%, var(--surface-raised));color:var(--primary)}.loop-toggle[aria-pressed=true] strong{color:var(--primary)}.ready-action{min-width:164px}.ready-action:enabled{background:#2b323e;border-color:#697486}.ready-action:enabled:hover{border-color:var(--primary);color:var(--primary)}.reset{background:0 0!important}.playback-button[aria-pressed=true]{background:color-mix(in srgb, #ff806b 12%, var(--surface-raised));color:#ffb3a6;border-color:#ff9f8e}.audio-error{color:#ffc2b7;background:#352422;border:1px solid #87564f;border-radius:10px;margin:16px 0 0;padding:12px 14px;font-size:13px}.round-results{border-radius:var(--radius-lg);background:#334032;border:1px solid #3d493c;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(120px,1fr));gap:1px;margin:0 0 24px;animation:.28s ease-out both reveal-in;display:grid;overflow:hidden}.round-results>div{background:#151b17;flex-direction:column;justify-content:center;gap:7px;min-height:112px;padding:19px;display:flex}.round-results span,.round-results small{color:#aeb9af;font-size:11px}.round-results strong{color:var(--text);font-size:clamp(23px,2.2vw,30px);line-height:1}.round-results .accuracy strong{color:var(--primary);letter-spacing:-1.8px;font-size:clamp(38px,4vw,48px)}.round-results .accuracy small{font-variant-numeric:tabular-nums}.result-difficulty{font-size:22px!important}.personal-best.new-record{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 38%, transparent);background:linear-gradient(145deg,#1d2819,#151b17);position:relative}.personal-best.new-record strong{color:var(--primary)}.personal-best.new-record small{color:var(--primary-soft);letter-spacing:.5px;text-transform:uppercase;font-weight:760}.cell.outcome-correct{border-color:var(--accent);background:var(--accent);color:#132018}.cell.outcome-missed{color:#f5d68d;background:#393124;border:2px dashed #d5ad5e}.cell.outcome-extra{color:#ffc4ba;background:#472a2a;border-color:#db8272}.cell.outcome-missed span,.cell.outcome-extra span{font-size:21px}.grid-legend{color:var(--muted);flex-wrap:wrap;gap:10px 18px;margin:20px 0 0;font-size:11px;display:flex}.legend-correct{color:var(--primary-soft)}.legend-missed{color:#e3c77f}.legend-extra{color:#f1a598}.next-actions{border-top:1px solid var(--border);justify-content:flex-end;margin-top:24px;padding-top:22px}.next-actions button{min-width:152px}.next-actions .check{min-width:210px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.dev-tools{flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%;margin:18px auto 0;display:flex}.dev-kit{width:fit-content;max-width:100%;color:var(--muted-dim);background:#11151bd9;border:1px dashed #596270;border-radius:9px;align-items:center;gap:10px;margin:0;padding:7px 9px;display:flex}.dev-kit-label{color:#e4bd72;letter-spacing:1.5px;white-space:nowrap;padding-inline:4px;font-size:9px;font-weight:800}.dev-kit-options{flex-wrap:wrap;gap:4px;display:flex}.dev-kit button{min-height:29px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:5px 9px;font-size:10px;font-weight:660}.dev-kit button:hover{background:var(--surface);color:var(--text)}.dev-kit button[aria-pressed=true]{color:#f0ca7e;background:#2a251b;border-color:#8c744c}footer{color:var(--muted-dim);letter-spacing:2.4px;text-align:center;margin:32px 0 12px;font-size:9px}@keyframes panel-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes reveal-in{0%{opacity:0;transform:translateY(5px)scale(.995)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes playing-pulse{0%,to{box-shadow:0 8px 22px color-mix(in srgb, var(--primary) 15%, transparent)}50%{box-shadow:0 8px 30px color-mix(in srgb, var(--primary) 35%, transparent)}}@keyframes menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes panel-beat-one{0%{opacity:.92;border-color:var(--primary);box-shadow:0 0 24px color-mix(in srgb, var(--primary) 24%, transparent), inset 0 0 10px color-mix(in srgb, var(--primary) 8%, transparent)}to{opacity:0;box-shadow:none;border-color:#0000}}@keyframes panel-beat-two{0%{opacity:.45;border-color:#dce5ef;box-shadow:0 0 14px #dce5ef12}to{opacity:0;box-shadow:none;border-color:#0000}}@keyframes panel-beat-three{0%{opacity:.45;border-color:#dce5ef;box-shadow:0 0 14px #dce5ef12}to{opacity:0;box-shadow:none;border-color:#0000}}@keyframes panel-beat-four{0%{opacity:.45;border-color:#dce5ef;box-shadow:0 0 14px #dce5ef12}to{opacity:0;box-shadow:none;border-color:#0000}}@media (width<=900px){.difficulty-options{grid-template-columns:repeat(2,minmax(0,1fr))}.difficulty-card{min-height:108px}.round-results{grid-template-columns:repeat(3,1fr)}.round-results .accuracy{grid-column:1/-1;min-height:126px}}@media (width<=700px){main{padding-inline:16px}.intro{margin-top:42px}.game{padding:20px 15px}.game-heading{align-items:flex-start}.round-meta .badge{display:none}.controls{flex-direction:column;align-items:stretch;gap:12px}.audio-controls,.action-controls{width:100%}.controls button{flex:1}.next-actions{flex-direction:column-reverse;align-items:stretch}.next-actions button{width:100%}.dev-tools{flex-direction:column;align-items:stretch}.dev-kit{flex-direction:column;align-items:flex-start;width:100%}}@media (width<=480px){.page-header{align-items:flex-start}.badge{display:none}.difficulty-options{gap:10px}.difficulty-card{min-height:94px;padding:18px 10px}.difficulty-name{letter-spacing:1.5px;font-size:12px}.audio-controls,.action-controls{flex-direction:column}.round-results{grid-template-columns:1fr}.round-results .accuracy{grid-column:auto}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}