:root{--canvas: #f5f4ed;--paper: #faf9f5;--paper-soft: #f0eee5;--sand: #e8e6dc;--ink: #141413;--ink-warm: #3d3d3a;--olive: #504e49;--stone: #6b6a64;--brand: #1b365d;--brand-light: #2d5a8a;--brand-tint: #e4ecf5;--brand-tint-soft: #eef2f7;--error: #b53333;--error-tint: #f2e2df;--rule: #d7d4c8;--rule-strong: #bcb8aa;--beat-seconds: .714s;--font-serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-ui: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;--radius-tight: 4px;--radius-control: 8px;--radius-card: 16px;--radius-sheet: 24px;--ring: 0 0 0 1px rgba(20, 20, 19, .08);--ring-hover: 0 0 0 1px rgba(27, 54, 93, .22);--whisper: 0 18px 50px rgba(20, 20, 19, .07), 0 3px 10px rgba(20, 20, 19, .04);color:var(--ink);background:var(--canvas);font-family:var(--font-serif);font-synthesis:none;text-rendering:optimizeLegibility}html{min-width:320px;min-height:100%;background:var(--canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background-color:var(--canvas);background-image:radial-gradient(circle at 12% 6%,rgba(255,255,255,.72),transparent 28rem),radial-gradient(circle at 88% 96%,rgba(80,78,73,.05),transparent 34rem),repeating-linear-gradient(0deg,rgba(20,20,19,.012) 0 1px,transparent 1px 5px)}body.nav-open{overflow:hidden}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--brand-light);outline-offset:3px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-.025em;text-wrap:balance}p,li,small{text-wrap:pretty}kbd{display:inline-block;padding:2px 7px;color:var(--ink-warm);background:var(--paper);border-radius:4px;box-shadow:0 0 0 1px var(--rule-strong),0 2px 0 var(--rule-strong);font-family:var(--font-mono);font-size:.72rem}.app-shell{position:relative;display:flex;flex-direction:column;width:min(1180px,calc(100% - 40px));height:100dvh;margin:0 auto;padding:14px 0 16px}.topline{position:relative;z-index:10;display:grid;grid-template-columns:1fr auto;align-items:center;flex:none;min-height:54px;margin-bottom:14px;padding:2px 4px 10px;border-bottom:1px solid var(--rule)}#app[data-view=intro] .topline{display:none}.title-block{display:grid;grid-template-columns:auto auto;align-items:baseline;justify-content:start;gap:2px 12px}.eyebrow,.metric-label{color:var(--brand);font-family:var(--font-ui);font-size:.68rem;font-weight:700;letter-spacing:.13em;line-height:1.35;text-transform:uppercase}.title-block .eyebrow{grid-column:1 / -1;margin:0}.title-block h1{margin:0;font-size:clamp(1.3rem,2.4vw,1.6rem);line-height:1.1}.round-meta{margin:0;color:var(--stone);font-family:var(--font-ui);font-size:.8rem;line-height:1.4}.level-button,.header-button,.nav-close,.utility-close,.mini-button,.mode-button,.primary-button,.secondary-button,.leaderboard-entry-button,.intro-primary,.intro-secondary,.intro-tertiary,.level-cell{min-height:40px;cursor:pointer;transition-property:color,background-color,box-shadow,scale,transform;transition-duration:.16s;transition-timing-function:cubic-bezier(.2,0,0,1)}.level-button:active:not(:disabled),.header-button:active:not(:disabled),.nav-close:active,.utility-close:active,.mini-button:active:not(:disabled),.mode-button:active:not(:disabled),.primary-button:active:not(:disabled),.secondary-button:active:not(:disabled),.leaderboard-entry-button:active:not(:disabled),.intro-primary:active,.intro-secondary:active,.intro-tertiary:active,.level-cell:active:not(:disabled){scale:.96}.level-button{display:inline-flex;align-items:center;gap:6px;min-height:auto;padding:0;color:var(--brand);background:transparent;border:0;font-family:var(--font-ui);font-size:.75rem;font-weight:700}.level-button:hover:not(:disabled){color:var(--brand-light)}.level-button:disabled{cursor:default;opacity:.45}.level-button-chevron{font-size:.62rem}.header-actions{display:flex;justify-content:flex-end;gap:8px}.header-button,.nav-close,.utility-close{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;color:var(--ink-warm);background:var(--paper);border:0;border-radius:var(--radius-control);box-shadow:var(--ring);font-family:var(--font-ui);font-size:.76rem;font-weight:650}.header-button:hover:not(:disabled),.nav-close:hover,.utility-close:hover{color:var(--brand);box-shadow:var(--ring-hover)}.header-button>span:first-child{display:grid;place-items:center;width:22px;height:22px;color:var(--paper);background:var(--brand);border-radius:50%;font-family:var(--font-serif);font-size:.9rem}.header-button:disabled{cursor:default;opacity:.42}.new-run-button{color:var(--paper);background:var(--brand);box-shadow:0 0 0 1px var(--brand),0 5px 14px #1b365d24;font-weight:750;white-space:nowrap}.new-run-button b{font-weight:inherit}.new-run-label-mobile{display:none}.header-button.new-run-button:hover:not(:disabled){color:var(--paper);background:var(--brand-light);box-shadow:0 0 0 1px var(--brand-light),0 7px 18px #1b365d2e}.menu-toggle{width:42px;padding:8px}.menu-toggle>span:first-child{background:transparent;border-radius:0}.menu-icon{display:grid!important;align-content:center;gap:4px}.menu-icon i{display:block;width:19px;height:1px;background:var(--ink)}.intro-screen{position:relative;display:grid;flex:1;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "actions";align-content:center;min-height:0;overflow:auto;background:var(--paper);border-radius:var(--radius-sheet);box-shadow:var(--ring),var(--whisper)}.intro-screen:before{content:"";position:absolute;top:0;right:0;width:88px;height:88px;background:linear-gradient(225deg,var(--canvas) 0 49%,var(--rule) 49.5% 50.5%,var(--sand) 51% 100%);box-shadow:-6px 7px 16px #1414130d}.intro-copy{grid-area:copy;align-self:auto;width:100%;max-width:760px;margin-inline:auto;padding:clamp(36px,5vw,64px) clamp(34px,7vw,92px) 20px;text-align:center}.intro-copy .eyebrow{margin-bottom:18px}.intro-copy h1{margin-bottom:20px;color:var(--ink);font-size:clamp(3.2rem,7vw,6.2rem);font-weight:500;letter-spacing:-.065em;line-height:.84}.intro-copy h1 em{position:relative;color:var(--brand);font-style:italic;font-weight:400}.intro-copy h1 em:after{content:"";position:absolute;left:.02em;right:-.08em;bottom:-.05em;height:.055em;background:var(--brand);transform:rotate(-1deg);transform-origin:left}.intro-summary{max-width:600px;margin:0 auto;color:var(--olive);font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.5}.intro-actions{grid-area:actions;display:flex;align-self:auto;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:18px clamp(34px,7vw,92px) clamp(28px,5vh,48px)}.intro-primary,.intro-secondary{display:grid;align-content:center;min-width:176px;min-height:76px;padding:14px 18px;border:0;border-radius:var(--radius-control);text-align:center}.intro-primary{color:var(--paper);background:var(--brand);box-shadow:0 0 0 1px var(--brand),0 4px 18px #1b365d21}.intro-secondary{color:var(--ink);background:var(--sand);box-shadow:var(--ring)}.intro-primary:hover,.intro-secondary:hover,.intro-tertiary:hover{transform:translateY(-2px)}.intro-primary span,.intro-secondary span{font-family:var(--font-ui);font-size:.82rem;font-weight:700}.intro-primary small,.intro-secondary small{margin-top:2px;opacity:.7;font-family:var(--font-ui);font-size:.65rem}.intro-tertiary{padding:8px 12px;color:var(--brand);background:transparent;border:0;font-family:var(--font-ui);font-size:.76rem;font-weight:700}.nav-overlay{position:fixed;z-index:50;inset:0}.nav-scrim{position:absolute;inset:0;width:100%;border:0;background:#14141375;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.game-navigation{position:absolute;top:18px;right:18px;bottom:18px;width:min(380px,calc(100% - 36px));padding:30px;background:var(--paper);border-radius:var(--radius-card);box-shadow:0 24px 70px #14141338;animation:drawer-in .22s cubic-bezier(.2,0,0,1) both}.nav-heading,.utility-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.nav-heading{padding-bottom:22px;border-bottom:1px solid var(--rule)}.nav-heading strong{display:block;margin-top:6px;font-size:1.65rem;font-weight:500}.nav-close{width:42px;padding:0;font-family:var(--font-serif);font-size:1.45rem}.nav-links{display:grid;gap:8px;margin-top:24px}.nav-links a{display:grid;grid-template-columns:40px 1fr;gap:0 12px;min-height:68px;padding:12px;color:var(--ink);border-radius:var(--radius-control);text-decoration:none;box-shadow:var(--ring);transition-property:color,background-color,box-shadow,transform;transition-duration:.16s}.nav-links a:hover{color:var(--brand);background:var(--brand-tint-soft);box-shadow:var(--ring-hover);transform:translate(-3px)}.nav-links a>span{grid-row:1 / 3;display:grid;place-items:center;color:var(--brand);font-size:1.2rem}.nav-links a strong,.nav-links a small{font-family:var(--font-ui)}.nav-links a strong{align-self:end;font-size:.82rem}.nav-links a small{color:var(--stone);font-size:.68rem}.keyboard-note{position:absolute;right:30px;bottom:24px;left:30px;margin:0;color:var(--stone);font-family:var(--font-ui);font-size:.7rem}.tutor-drawer{position:absolute;z-index:30;top:78px;right:0;display:grid;gap:12px;width:min(760px,100%);max-height:min(74vh,640px);overflow:auto;padding:12px;background:var(--canvas);border-radius:var(--radius-card);box-shadow:var(--ring),0 24px 70px #1414132e;animation:drawer-in .22s cubic-bezier(.2,0,0,1) both}.lesson-panel{display:grid;grid-template-columns:1.25fr 1fr 1fr;overflow:hidden;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--ring),0 8px 24px #1414130a}.lesson-copy,.lesson-tips,.journey-panel{padding:24px}.lesson-tips,.journey-panel{border-left:1px solid var(--rule)}.lesson-copy h2{margin:8px 0 10px;font-size:1.35rem}.lesson-copy p,.lesson-tips p{margin:0;color:var(--stone);font-size:.9rem;line-height:1.5}.journey-meter{height:4px;overflow:hidden;background:var(--sand);border-radius:2px}.journey-fill{display:block;width:0;height:100%;background:var(--brand);transition-property:width;transition-duration:.26s}.journey-meta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-family:var(--font-ui);font-size:.68rem}.journey-meta span{color:var(--stone);text-align:right}.chapter-rail{display:flex;gap:4px;margin:16px 0 0;padding:0;list-style:none}.chapter-step{flex:1;height:6px;overflow:hidden;color:transparent;background:var(--sand);border-radius:3px}.chapter-step.is-unlocked{background:#d8dce0}.chapter-step.is-complete{background:var(--brand-tint)}.chapter-step.is-active{background:var(--brand)}.timing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--ring)}.grid-bar{display:flex;min-width:0;overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px var(--rule)}.grid-cell{position:relative;display:grid;place-items:center;min-width:13px;min-height:34px;color:var(--stone);background:var(--paper-soft);border-right:1px solid var(--rule);font-family:var(--font-mono);font-size:.53rem;text-transform:uppercase}.grid-cell:last-child{border-right:0}.grid-cell.beat-start:not(:first-child){border-left:2px solid var(--rule-strong)}.grid-cell.dense-cell{font-size:.72rem;line-height:1}.tuplet-cell{border-bottom:3px solid color-mix(in srgb,var(--brand) 55%,transparent)}.tuplet-start{border-bottom-left-radius:4px}.tuplet-end{border-bottom-right-radius:4px}.tuplet-start:after{position:absolute;bottom:1px;left:3px;color:currentColor;content:attr(data-tuplet-label);font-size:.43rem;line-height:1}.tap-cell{color:var(--brand);background:var(--brand-tint-soft)}.rest-cell{color:var(--rule-strong)}.judgment-perfect{color:var(--paper);background:var(--brand)}.judgment-early,.judgment-late{color:var(--brand);background:var(--brand-tint)}.judgment-miss,.judgment-stray{color:var(--error);background:var(--error-tint)}.play-stage{position:relative;display:grid;flex:1;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"notation" "game" "bar";gap:12px;min-height:0;overflow:visible}.notation-panel,.game-shell{position:relative;min-width:0;background:var(--paper);box-shadow:var(--ring),var(--whisper)}.notation-panel{grid-area:notation;overflow:hidden;border-radius:var(--radius-sheet)}#notation{padding:16px 20px 18px}.notation-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px;align-items:center}.notation-bar{position:relative;min-width:0;overflow:hidden}.notation-bar svg{display:block;max-width:100%;height:auto;overflow:visible;outline:none}.bar-label{position:absolute;top:3px;left:10px;color:var(--stone);font-family:var(--font-mono);font-size:.55rem}.notation-fallback{display:grid;place-content:center;color:var(--stone);text-align:center}.game-shell{grid-area:game;display:flex;flex-direction:column;min-height:150px;overflow:hidden;border-radius:var(--radius-sheet)}#game-canvas{flex:1;min-height:0;background:var(--paper-soft)}#game-canvas canvas{display:block;width:100%!important;height:100%!important}.action-bar{grid-area:bar;display:grid;grid-template-columns:minmax(0,1fr) clamp(184px,18vw,220px) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:center;min-height:220px;padding:4px 0 10px}.live-metrics{display:grid;grid-column:3;grid-template-columns:1fr 1fr;align-self:center;min-width:0;min-height:132px;margin:0;overflow:hidden;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--ring),var(--whisper)}.live-stat,.groove-stat{display:grid;align-content:center;min-width:0;padding:16px 20px}.live-stat+.live-stat{border-left:1px solid var(--rule)}.live-stat,.groove-stat{font-family:var(--font-ui)}.live-stat span,.groove-stat>span{display:block;margin-bottom:5px;color:var(--stone);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.live-stat strong,.groove-stat strong{color:var(--brand);font-family:var(--font-serif);font-size:clamp(1.4rem,2vw,1.8rem);font-weight:500;font-variant-numeric:tabular-nums}.groove-stat{display:grid;grid-column:1 / -1;grid-template-columns:1fr auto;align-content:center;gap:4px 12px;border-top:1px solid var(--rule)}.groove-stat>span{grid-column:1 / -1}.groove-track{align-self:center;height:4px;overflow:hidden;background:var(--sand);border-radius:2px}.groove-fill{width:0;height:100%;background:var(--brand);transition-property:width;transition-duration:.18s}.play-controls{position:relative;grid-column:2;display:grid;place-items:center;min-height:220px;padding-bottom:42px}.play-controls .tap-button{position:relative;display:grid;place-content:center;width:164px;height:164px;padding:8px 12px;color:var(--paper);background:var(--brand);border:0;border-radius:50%;box-shadow:0 0 0 1px var(--brand),0 12px 32px #1b365d33;cursor:pointer;transition-property:scale,box-shadow,background-color;transition-duration:.15s}.play-controls .tap-button:before,.play-controls .tap-button:after{content:"";position:absolute;inset:-6px;border:1px solid rgba(27,54,93,.3);border-radius:50%;pointer-events:none}.play-controls .tap-button:after{inset:-12px;border-style:dashed;opacity:.45}#app[data-phase=playing] .tap-button:before{animation:score-ring var(--beat-seconds) ease-out infinite}.play-controls .tap-button-copy{font-family:var(--font-serif);font-size:1.2rem;font-style:italic;font-weight:500;line-height:1.15;text-align:center;text-wrap:balance}.play-controls .tap-button small{margin-top:4px;color:#faf9f5b8;font-family:var(--font-ui);font-size:.58rem;text-align:center}.play-controls .tap-button:hover:not(:disabled){box-shadow:0 0 0 1px var(--brand),0 10px 28px #1b365d38}.play-controls .tap-button:active:not(:disabled),.play-controls .tap-button.tap-feedback:active{scale:.96}.play-controls .tap-button.tap-feedback{background:var(--brand-light);animation:tap-impact .15s cubic-bezier(.2,.8,.2,1)}.play-controls .tap-button.tap-feedback:after{border-color:#1b365da3;border-style:solid;animation:tap-ripple .15s ease-out}.play-controls .tap-button.tap-feedback[data-tap-feedback=stray]{background:var(--error)}.play-controls .tap-button.tap-feedback[data-tap-feedback=stray]:after{border-color:#b53333b3}.play-controls .tap-button:disabled,.play-controls .replay-button:disabled{cursor:default;opacity:.42}.play-controls .replay-button{position:absolute;bottom:-8px;left:50%;min-width:90px;transform:translate(-50%)}.utility-page{flex:1;min-height:0;overflow:auto;padding:clamp(24px,4vw,44px);background:var(--paper);border-radius:var(--radius-sheet);box-shadow:var(--ring),var(--whisper)}.utility-heading{margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--rule)}.utility-heading h2{margin:6px 0 0;font-size:clamp(1.7rem,4vw,2.4rem)}.utility-close{min-width:116px}.practice-toolbar{display:grid;grid-template-columns:1.2fr .7fr 2fr auto;align-items:end;gap:14px;margin-bottom:26px;padding:18px;background:var(--canvas);border-radius:var(--radius-card);box-shadow:var(--ring)}.practice-field{display:grid;gap:8px}.mode-toggle{display:grid;grid-template-columns:1fr 1fr;padding:3px;background:var(--sand);border-radius:11px}.mode-button{padding:8px 12px;color:var(--stone);background:transparent;border:0;border-radius:var(--radius-control);font-family:var(--font-ui);font-size:.72rem;font-weight:700}.mode-button[aria-pressed=true]{color:var(--brand);background:var(--paper);box-shadow:var(--ring)}.mode-button:disabled,.mini-button:disabled,.practice-field select:disabled,.practice-field input:disabled{cursor:default;opacity:.45}.practice-field select,.practice-field input[type=number]{min-height:46px;color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--radius-control);font-family:var(--font-ui);font-size:.78rem}.practice-field select{padding:0 34px 0 12px}.tempo-control{display:grid;grid-template-columns:1fr 66px auto;align-items:center;gap:10px}.practice-field input[type=range]{width:100%;accent-color:var(--brand)}.practice-field input[type=number]{width:66px;padding:0 8px;text-align:center;font-variant-numeric:tabular-nums}.tempo-unit{color:var(--stone);font-family:var(--font-ui);font-size:.65rem}.practice-status{grid-column:1 / -1;color:var(--stone);font-family:var(--font-ui);font-size:.68rem;font-weight:500}.mini-button{padding:8px 12px;color:var(--brand);background:var(--brand-tint-soft);border:0;border-radius:var(--radius-control);box-shadow:var(--ring);font-family:var(--font-ui);font-size:.7rem;font-weight:700}.mini-button:hover:not(:disabled){box-shadow:var(--ring-hover)}.level-grid-block>.metric-label{display:block;margin-bottom:12px}.level-grid{display:grid;grid-template-columns:repeat(10,minmax(44px,1fr));gap:7px;margin:0;padding:0;list-style:none}.level-cell{width:100%;min-height:44px;color:var(--stone);background:var(--canvas);border:0;border-radius:var(--radius-control);box-shadow:var(--ring);font-family:var(--font-mono);font-size:.68rem}.level-cell:hover:not(:disabled){color:var(--brand);box-shadow:var(--ring-hover)}.level-cell.is-cleared{color:var(--brand);background:var(--brand-tint-soft)}.level-cell.is-frontier{box-shadow:0 0 0 1px var(--brand)}.level-cell.is-selected{color:var(--paper);background:var(--brand);box-shadow:0 0 0 1px var(--brand)}.level-cell:disabled{cursor:default;opacity:.42}.leaderboard-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px;padding:20px 24px;color:var(--paper);background:var(--brand);border-radius:var(--radius-card);box-shadow:0 12px 30px #1b365d29}.leaderboard-intro .metric-label{color:#cddced}.leaderboard-intro p{max-width:650px;margin:6px 0 0;font-size:clamp(.9rem,2vw,1.08rem);line-height:1.45}.leaderboard-stamp{display:grid;place-items:center;flex:none;width:72px;height:72px;color:var(--brand);background:var(--paper);border-radius:50%;font-family:var(--font-mono);font-size:.66rem;font-weight:800;letter-spacing:.11em;line-height:1.2;text-align:center;transform:rotate(7deg)}.ranking-reveal{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;margin-bottom:16px;padding:18px 22px;overflow:hidden;color:#70490d;background:linear-gradient(120deg,#fff4cc,#f6df98);border-radius:var(--radius-card);box-shadow:0 0 0 1px #9a691b33,0 12px 30px #9a691b1a;animation:ranking-pop .42s cubic-bezier(.16,1,.3,1) both}.ranking-reveal .metric-label{color:#70490d}.ranking-reveal h3{margin:4px 0 2px;font-size:clamp(1.25rem,3vw,1.7rem)}.ranking-reveal p{margin:0;font-family:var(--font-ui);font-size:.76rem}.ranking-burst{display:grid;place-items:center;width:68px;height:68px;color:#fff9e8;background:#9a691b;clip-path:polygon(50% 0%,61% 20%,82% 9%,85% 34%,100% 50%,82% 66%,82% 91%,60% 80%,50% 100%,39% 80%,17% 91%,18% 66%,0% 50%,16% 34%,18% 9%,39% 20%);font-family:var(--font-mono);font-size:1rem;font-weight:800}.scoreboard-grid{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(360px,1.18fr);gap:16px}.scoreboard-section{overflow:hidden;background:var(--canvas);border-radius:var(--radius-card);box-shadow:var(--ring)}.global-scoreboard{background:var(--brand-tint-soft)}.scoreboard-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--rule)}.scoreboard-header h2{margin:0;font-size:1.2rem}.scoreboard-header .metric-label{display:block;margin-bottom:4px;font-size:.56rem}.scoreboard-header span{color:var(--stone);font-family:var(--font-ui);font-size:.62rem}.scoreboard-list{margin:0;padding:0;list-style:none}.scoreboard-list li{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:14px 20px;border-bottom:1px dashed var(--rule)}.scoreboard-list li:last-child{border-bottom:0}.scoreboard-list span,.scoreboard-list small{font-family:var(--font-ui)}.podium-list li{grid-template-columns:38px 1fr auto;align-items:center;gap:2px 10px}.podium-list .place-medal{grid-row:1 / 3;display:grid;place-items:center;width:32px;height:32px;color:#fff9e8;background:#9a691b;border-radius:50%;font-family:var(--font-mono);font-size:.68rem;font-weight:800}.podium-list .podium-2 .place-medal{color:#4f5358;background:#d7dadd}.podium-list .podium-3 .place-medal{background:#a85f35}.podium-list .run-name{grid-column:2}.podium-list strong{grid-column:3}.podium-list small{grid-column:2 / 4}.global-column-labels{display:grid;grid-template-columns:34px minmax(100px,1fr) 72px 90px;gap:10px;padding:10px 20px 8px;color:var(--stone);font-family:var(--font-ui);font-size:.54rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.global-column-labels span:first-child{grid-column:2}.global-list li{grid-template-columns:34px minmax(100px,1fr) 72px 90px;align-items:center;gap:10px}.global-list .global-rank{color:var(--stone);font-family:var(--font-mono);font-size:.65rem;text-align:center}.global-list .run-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.global-list strong{text-align:right}.global-list small{grid-column:auto;color:var(--ink-warm);font-variant-numeric:tabular-nums;text-align:right}.global-list li.is-player{background:#fff4cc;box-shadow:inset 3px 0 #9a691b}.global-list em{display:inline-block;margin-left:5px;padding:2px 5px;color:#fff9e8;background:#9a691b;border-radius:999px;font-size:.48rem;font-style:normal;letter-spacing:.06em;text-transform:uppercase}.scoreboard-list span{font-size:.75rem;font-weight:650}.scoreboard-list strong{color:var(--brand);font-size:1.1rem;font-weight:500;font-variant-numeric:tabular-nums}.scoreboard-list small{grid-column:1 / -1;color:var(--stone);font-size:.62rem}.empty-copy{margin:0;padding:28px 20px;color:var(--stone);font-style:italic;line-height:1.5}.skill-check-overlay{position:fixed;z-index:70;inset:0;display:grid;place-items:center;overflow:hidden;padding:24px;color:#fff8f3;background:radial-gradient(circle at 50% 44%,rgba(181,51,51,.42),transparent 34rem),linear-gradient(145deg,#16070a,#380b11 56%,#16070a);isolation:isolate}.skill-check-overlay:before,.skill-check-overlay:after{position:absolute;z-index:-1;inset:0;content:"";pointer-events:none}.skill-check-overlay:before{background:#b53333;mix-blend-mode:screen;animation:skill-check-flash 2.5s ease-out both}.skill-check-overlay:after{opacity:.24;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 7px)}.skill-check-bar-field{position:absolute;inset:0;display:flex;justify-content:space-around;pointer-events:none}.skill-check-bar-field i{width:clamp(2px,.35vw,6px);height:100%;background:linear-gradient(180deg,transparent,rgba(255,211,202,.82) 24%,#b53333 50%,rgba(255,211,202,.82) 76%,transparent);box-shadow:0 0 30px #b53333b8;transform:scaleY(0);animation:skill-check-bar 2.5s cubic-bezier(.16,1,.3,1) both}.skill-check-bar-field i:nth-child(2){animation-delay:70ms}.skill-check-bar-field i:nth-child(3){animation-delay:.14s}.skill-check-bar-field i:nth-child(4){animation-delay:.21s}.skill-check-bar-field i:nth-child(5){animation-delay:.28s}.skill-check-dialog{width:min(820px,100%);padding:clamp(34px,7vw,78px) clamp(22px,6vw,64px);text-align:center;border-block:1px solid rgba(255,232,224,.48);background:linear-gradient(90deg,transparent,rgba(14,3,5,.76) 16% 84%,transparent);text-shadow:0 4px 24px rgba(0,0,0,.7);animation:skill-check-dialog 2.5s cubic-bezier(.16,1,.3,1) both}.skill-check-kicker{display:block;color:#ffc8bc;font-family:var(--font-mono);font-size:clamp(.66rem,1.5vw,.82rem);font-weight:700;letter-spacing:.2em;text-transform:uppercase}.skill-check-kicker b{color:#fff8f3;font-weight:inherit}.skill-check-dialog h2{margin:14px 0 12px;color:#fff8f3;font-size:clamp(3.6rem,12vw,8.8rem);font-style:italic;font-weight:600;letter-spacing:-.065em;line-height:.86}.skill-check-dialog p{margin:0;color:#ffc8bc;font-family:var(--font-ui);font-size:clamp(.95rem,2.5vw,1.34rem);font-weight:600;letter-spacing:.035em}.results-overlay{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:24px;background:#14141380;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.results-dialog{width:min(780px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:clamp(24px,5vw,48px);background:var(--paper);border-radius:var(--radius-sheet);box-shadow:0 28px 90px #1414133d;animation:result-in .3s cubic-bezier(.2,0,0,1) both}.results-header{padding-bottom:24px;border-bottom:1px solid var(--rule)}.results-header h2{margin:8px 0 10px;font-size:clamp(2.2rem,6vw,4rem);line-height:1}.results-header p{margin:0;color:var(--stone);line-height:1.5}.survival-failure-strip{display:grid;grid-template-columns:56px 1fr;gap:18px;margin-top:18px;padding:18px;color:var(--error);background:var(--error-tint);border-radius:var(--radius-card)}.failure-mark{display:grid;place-items:center;width:48px;height:48px;border:1px solid currentColor;border-radius:50%;font-size:1.6rem}.failure-copy strong{display:block;margin:4px 0;font-size:1.6rem;font-weight:500;font-variant-numeric:tabular-nums}.failure-copy p{margin:0;font-size:.82rem;line-height:1.45}.failure-meter{grid-column:1 / -1;position:relative;height:4px;background:#b5333329}.failure-meter span{display:block;width:0;height:100%;background:var(--error)}.results-dialog .review-panel{padding:24px 0 0}.leaderboard-entry-panel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;margin-top:22px;padding:18px 20px;color:var(--brand);background:radial-gradient(circle at 92% 12%,rgba(255,255,255,.85),transparent 8rem),var(--brand-tint);border:1px dashed rgba(27,54,93,.32);border-radius:var(--radius-card)}.leaderboard-entry-pitch strong{display:block;margin-top:4px;font-size:1.35rem;font-weight:500}.leaderboard-entry-pitch p{margin:3px 0 0;color:var(--stone);font-family:var(--font-ui);font-size:.7rem}.leaderboard-entry-button{min-height:48px;padding:11px 18px;color:var(--paper);background:var(--brand);border:0;border-radius:var(--radius-control);box-shadow:0 0 0 1px var(--brand),0 8px 18px #1b365d29;font-family:var(--font-ui);font-size:.78rem;font-weight:800}.leaderboard-entry-button:hover:not(:disabled){background:var(--brand-light)}.leaderboard-name-form{grid-column:1 / -1;padding-top:14px;border-top:1px solid rgba(27,54,93,.16)}.leaderboard-name-form>label{display:block;margin-bottom:7px;font-family:var(--font-ui);font-size:.7rem;font-weight:750}.leaderboard-name-row{display:grid;grid-template-columns:minmax(160px,1fr) auto auto;gap:8px}.leaderboard-name-row input{min-height:44px;padding:8px 12px;color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--radius-control);font-family:var(--font-ui);font-size:.82rem}.leaderboard-name-form[data-state=error] input{border-color:var(--error);box-shadow:0 0 0 2px #b533331a}.leaderboard-name-row button:disabled{cursor:wait;opacity:.58}.leaderboard-form-note{margin:7px 0 0;color:var(--stone);font-family:var(--font-ui);font-size:.62rem}.leaderboard-name-form[data-state=error] .leaderboard-form-note{color:var(--error)}.review-summary{display:grid;grid-template-columns:repeat(4,1fr);margin-top:0;overflow:hidden;border-radius:var(--radius-card);box-shadow:var(--ring)}.review-summary>div{min-width:0;padding:18px;background:var(--canvas);border-right:1px solid var(--rule)}.review-summary>div:last-child{border-right:0}.review-summary strong{display:block;margin-top:6px;color:var(--brand);font-size:1.35rem;font-weight:500;font-variant-numeric:tabular-nums}.review-list{display:flex;flex-wrap:wrap;gap:5px;margin:18px 0 0;padding:0;list-style:none}.review-hit{display:grid;min-width:58px;padding:7px 9px;color:var(--brand);background:var(--brand-tint-soft);border-radius:4px;font-family:var(--font-ui);font-size:.55rem}.review-hit strong{font-size:.62rem;font-variant-numeric:tabular-nums}.review-hit.judgment-miss,.review-hit.judgment-stray{color:var(--error);background:var(--error-tint)}.results-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:22px;border-top:1px solid var(--rule)}.primary-button,.secondary-button{min-width:112px;padding:10px 16px;border:0;border-radius:var(--radius-control);font-family:var(--font-ui);font-size:.75rem;font-weight:700}.primary-button{color:var(--paper);background:var(--brand);box-shadow:0 0 0 1px var(--brand)}.secondary-button{color:var(--ink-warm);background:var(--sand);box-shadow:var(--ring)}.primary-button:hover:not(:disabled){background:var(--brand-light)}.secondary-button:hover:not(:disabled){color:var(--brand);box-shadow:var(--ring-hover)}@keyframes ink-pulse{0%{box-shadow:0 0 #1b365d47}to{box-shadow:0 0 0 8px #1b365d00}}@keyframes score-ring{0%{opacity:.55;transform:scale(.94)}to{opacity:0;transform:scale(1.2)}}@keyframes tap-impact{0%{scale:1}45%{scale:.93}to{scale:1}}@keyframes tap-ripple{0%{opacity:.8;transform:scale(.88)}to{opacity:0;transform:scale(1.22)}}@keyframes drawer-in{0%{opacity:0;transform:translate(18px);filter:blur(4px)}to{opacity:1;transform:translate(0);filter:blur(0)}}@keyframes result-in{0%{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes ranking-pop{0%{opacity:0;transform:scale(.96) rotate(-.5deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes skill-check-flash{0%{opacity:.95}12%{opacity:.08}72%{opacity:0}to{opacity:.2}}@keyframes skill-check-bar{0%{opacity:0;transform:scaleY(0)}12%{opacity:1;transform:scaleY(1)}74%{opacity:.78;transform:scaleY(1)}to{opacity:0;transform:scaleY(.82)}}@keyframes skill-check-dialog{0%{opacity:0;transform:scale(1.36);filter:blur(12px)}14%{opacity:1;transform:scale(.98);filter:blur(0)}22%{transform:scale(1)}76%{opacity:1;transform:scale(1);filter:blur(0)}to{opacity:0;transform:scale(1.04);filter:blur(3px)}}@media(max-width:980px){.app-shell{width:min(100% - 28px,900px)}.intro-copy,.intro-actions{padding-right:44px;padding-left:44px}.intro-copy h1{font-size:clamp(3rem,7.4vw,5.2rem)}.notation-bars{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-panel{grid-template-columns:1fr 1fr}.journey-panel{grid-column:1 / -1;border-top:1px solid var(--rule);border-left:0}.action-bar{grid-template-columns:minmax(0,1fr) 184px minmax(0,1fr);gap:16px}.live-stat,.groove-stat{padding-right:16px;padding-left:16px}.practice-toolbar{grid-template-columns:1fr .65fr}.tempo-field{grid-column:1 / -1}.mini-button{justify-self:start}.level-grid{grid-template-columns:repeat(8,minmax(44px,1fr))}}@media(max-width:720px){.app-shell{width:min(100% - 20px,620px);height:auto;min-height:100dvh;padding-top:10px;padding-bottom:24px}#app[data-view=intro] .app-shell{padding-top:12px;padding-bottom:12px}.topline{grid-template-columns:1fr auto;gap:8px;min-height:50px;margin-bottom:8px;padding:0 2px 7px}.title-block{gap:1px 8px}.title-block .eyebrow{font-size:.57rem}.title-block h1{font-size:1.08rem;line-height:1;white-space:nowrap}.level-button{font-size:.66rem}.header-actions{gap:6px}.header-button{min-height:36px;padding:7px 9px}.header-button-label{display:none}.tutor-toggle,.menu-toggle{width:36px;padding:7px}.header-button>span:first-child{width:20px;height:20px}.new-run-button{padding-inline:9px;font-size:.65rem}.new-run-label-full{display:none}.new-run-label-mobile{display:inline}.intro-screen{display:block;flex:none;min-height:0;margin-top:auto;margin-bottom:auto;overflow:hidden;padding-top:1px;border-radius:18px}.intro-screen:before{width:64px;height:64px}.intro-copy{padding:48px 24px 24px}.intro-copy .eyebrow{max-width:230px;margin-right:auto;margin-left:auto;line-height:1.55}.intro-copy h1{font-size:clamp(3.1rem,14vw,4.6rem);line-height:.88}.intro-actions{display:grid;grid-template-columns:1fr 1fr;padding:20px 24px 24px}.intro-primary,.intro-secondary{min-width:0}.intro-tertiary{grid-column:1 / -1;justify-self:center}.tutor-drawer{position:fixed;z-index:40;top:max(66px,calc(env(safe-area-inset-top) + 58px));right:10px;left:10px;width:auto;max-height:calc(100dvh - 78px - env(safe-area-inset-bottom))}.lesson-panel{display:block}.lesson-tips,.journey-panel{border-top:1px solid var(--rule);border-left:0}.timing-grid{grid-template-columns:repeat(2,1fr)}.play-stage{display:grid;flex:1;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(112px,1fr);grid-template-areas:"notation" "game";gap:8px;min-height:0;overflow:hidden;padding-bottom:calc(196px + env(safe-area-inset-bottom))}#app[data-view=play] .app-shell{width:100%;height:100dvh;min-height:0;overflow:hidden;padding:max(6px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom))}.notation-panel,.game-shell{min-height:0;border-radius:14px}#notation{padding:7px 10px 9px}#game-canvas{min-height:0}.notation-bars{gap:0 8px}.bar-label{top:2px;left:6px;font-size:.48rem}.notation-bars.bars-8 .notation-bar:nth-child(n+5){display:none}#notation[data-mobile-page="1"] .notation-bars.bars-8 .notation-bar:nth-child(-n+4){display:none}#notation[data-mobile-page="1"] .notation-bars.bars-8 .notation-bar:nth-child(n+5){display:block}.action-bar{position:fixed;z-index:20;right:10px;bottom:max(8px,env(safe-area-inset-bottom));left:10px;display:grid;grid-template-columns:1fr;grid-template-rows:46px 128px;gap:0;min-height:0;margin:0;padding:6px 10px 8px;background:#faf9f5f5;border-radius:18px;box-shadow:var(--ring),0 14px 38px #14141329;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.live-metrics{grid-row:1;grid-column:1;grid-template-columns:.75fr .9fr 1.55fr;align-self:stretch;min-height:0;background:transparent;border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none}.live-stat,.groove-stat{padding:5px 10px}.live-stat span,.groove-stat>span{margin-bottom:1px;font-size:.5rem}.live-stat strong,.groove-stat strong{font-size:1.08rem}.groove-stat{grid-column:3;grid-template-columns:1fr auto;gap:2px 8px;border-top:0;border-left:1px solid var(--rule)}.groove-track{height:3px}.play-controls{grid-row:2;grid-column:1;position:relative;min-height:128px;padding:0}.play-controls .tap-button{min-width:0;width:128px;height:128px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.play-controls .replay-button{bottom:36px;left:4px;width:68px;min-width:68px;padding-inline:6px;transform:none;white-space:normal;font-size:.61rem;line-height:1.15}.play-controls .tap-button-copy{font-size:1.04rem}.play-controls .tap-button small{font-size:.52rem}.utility-page{padding:24px 18px;border-radius:18px}.utility-heading{align-items:flex-start}.utility-heading h2{font-size:1.9rem}.utility-close{min-width:auto}.practice-toolbar{grid-template-columns:1fr}.tempo-field{grid-column:auto}.level-grid{grid-template-columns:repeat(5,minmax(44px,1fr))}.scoreboard-grid,.leaderboard-entry-panel{grid-template-columns:1fr}.leaderboard-entry-button{width:100%}.leaderboard-name-row{grid-template-columns:1fr 1fr}.leaderboard-name-row input{grid-column:1 / -1}.review-summary{grid-template-columns:repeat(2,1fr)}.review-summary>div:nth-child(2){border-right:0}.review-summary>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}@media(max-width:420px){.title-block{gap:2px 7px}.round-meta{display:none}.intro-actions{grid-template-columns:1fr}.intro-tertiary{grid-column:auto}.play-controls .replay-button{width:62px;min-width:62px;padding-inline:4px}.level-grid{grid-template-columns:repeat(4,minmax(44px,1fr))}.results-overlay{padding:10px}.results-dialog{padding:22px 18px;border-radius:18px}.results-actions{display:grid;grid-template-columns:1fr 1fr}.leaderboard-intro{padding:18px}.leaderboard-stamp{width:58px;height:58px}.ranking-reveal{grid-template-columns:1fr}.ranking-burst{width:58px;height:58px}.global-column-labels{grid-template-columns:28px minmax(88px,1fr) 54px 72px;padding-inline:12px}.global-list li{grid-template-columns:28px minmax(88px,1fr) 54px 72px;gap:7px;padding-inline:12px}.global-list strong{font-size:.92rem}.leaderboard-name-row{grid-template-columns:1fr}.leaderboard-name-row input{grid-column:auto}}@media(max-width:720px)and (max-height:700px)and (orientation:portrait){#app[data-view=play] .topline{min-height:42px;margin-bottom:6px;padding-bottom:5px}#app:is([data-phase=count-in],[data-phase=playing]) .topline .eyebrow,#app:is([data-phase=count-in],[data-phase=playing]) .level-button,#app:is([data-phase=count-in],[data-phase=playing]) .tutor-toggle,#app:is([data-phase=count-in],[data-phase=playing]) .menu-toggle{display:none}.play-stage{grid-template-rows:auto clamp(112px,22dvh,140px);align-content:start;padding-bottom:calc(170px + env(safe-area-inset-bottom))}.action-bar{grid-template-rows:38px 112px;padding:5px 8px 7px}.live-stat,.groove-stat{padding-block:3px}.live-stat span,.groove-stat>span{font-size:.46rem}.live-stat strong,.groove-stat strong{font-size:.96rem}.play-controls{min-height:112px;padding-bottom:8px}.play-controls .tap-button{width:104px;height:104px}.play-controls .tap-button:before{inset:-4px}.play-controls .tap-button:after{inset:-7px}.play-controls .replay-button{bottom:30px}}@media(max-width:360px){.topline{grid-template-columns:1fr}.header-actions{justify-content:space-between}.tutor-drawer{top:max(94px,calc(env(safe-area-inset-top) + 88px))}.play-stage{grid-template-rows:auto minmax(96px,1fr);padding-bottom:calc(174px + env(safe-area-inset-bottom))}.action-bar{grid-template-rows:42px 112px;padding-top:5px;padding-bottom:7px}.play-controls{min-height:112px}.play-controls .tap-button{width:112px;height:112px}.play-controls .replay-button{bottom:28px}}@media(max-width:720px)and (orientation:landscape){#app[data-view=play] .topline{min-height:42px;margin-bottom:6px;padding-bottom:5px}#app[data-view=play] .title-block .eyebrow{display:none}.play-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"notation game";padding-bottom:calc(136px + env(safe-area-inset-bottom))}#notation{padding:2px 5px}.notation-bars{gap:0 4px}.action-bar{grid-template-rows:34px 88px;padding:4px 8px 6px}.live-stat,.groove-stat{padding-block:2px}.live-stat span,.groove-stat>span{font-size:.46rem}.live-stat strong,.groove-stat strong{font-size:.9rem}.play-controls{min-height:88px}.play-controls .tap-button{width:84px;height:84px}.play-controls .replay-button{bottom:20px}}@media(hover:none){.desktop-hint,.keyboard-note{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.skill-check-overlay:before,.skill-check-bar-field i,.skill-check-dialog{animation:none!important}.skill-check-bar-field i{opacity:.48;transform:scaleY(1)}}