:root{--mg-bg: #090d1f;--mg-bg-soft: #111735;--mg-ink: #13172a;--mg-muted: #667085;--mg-white: #ffffff;--mg-line: rgba(255, 255, 255, .14);--mg-card-line: rgba(26, 32, 67, .1);--mg-shadow: 0 22px 55px rgba(5, 8, 25, .24);--mg-shadow-soft: 0 12px 30px rgba(5, 8, 25, .14);--page-a: #8b5cf6;--page-b: #ec4899;--page-c: #22d3ee;--page-glow-a: rgba(139, 92, 246, .32);--page-glow-b: rgba(236, 72, 153, .24);--button-a: #6341cf;--button-b: #a22580}body.page-rhythm{--button-a: #bd354e;--button-b: #a02570;--page-a: #ff7a45;--page-b: #fb3f8f;--page-c: #fbbf24;--page-glow-a: rgba(255, 122, 69, .34);--page-glow-b: rgba(251, 63, 143, .24)}body.page-notes{--button-a: #5943c5;--button-b: #255bb4;--page-a: #7667ff;--page-b: #20b8ef;--page-c: #2dd4bf;--page-glow-a: rgba(118, 103, 255, .34);--page-glow-b: rgba(32, 184, 239, .24)}body.page-chords{--button-a: #087663;--button-b: #394caf;--page-a: #0fbf9f;--page-b: #5b6cff;--page-c: #38bdf8;--page-glow-a: rgba(15, 191, 159, .32);--page-glow-b: rgba(91, 108, 255, .25)}body.page-home .card.rhythm{--page-a: #ff7a45;--page-b: #fb3f8f;--page-c: #fbbf24;--page-glow-a: rgba(255, 122, 69, .28)}body.page-home .card.notes{--page-a: #7667ff;--page-b: #20b8ef;--page-c: #2dd4bf;--page-glow-a: rgba(118, 103, 255, .28)}body.page-home .card.chords{--page-a: #0fbf9f;--page-b: #5b6cff;--page-c: #38bdf8;--page-glow-a: rgba(15, 191, 159, .26)}body.page-notes .bass-card{--page-a: #ec4899;--page-b: #8b5cf6;--page-c: #fb7185;--page-glow-a: rgba(236, 72, 153, .24)}body.page-notes .grand-card{--page-a: #10b981;--page-b: #0ea5e9;--page-c: #34d399;--page-glow-a: rgba(16, 185, 129, .23)}body.page-notes .sight-card{--page-a: #f59e0b;--page-b: #f97316;--page-c: #facc15;--page-glow-a: rgba(245, 158, 11, .22)}body.page-chords .card.minor{--page-a: #4f6cf7;--page-b: #8b5cf6;--page-c: #38bdf8;--page-glow-a: rgba(79, 108, 247, .24)}html{background:var(--mg-bg);scroll-behavior:smooth}body{margin:0!important;min-height:100vh!important;color:var(--mg-ink)!important;font-family:Plus Jakarta Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif!important;background:radial-gradient(circle at 12% -5%,var(--page-glow-a),transparent 32rem),radial-gradient(circle at 92% 12%,var(--page-glow-b),transparent 30rem),linear-gradient(155deg,var(--mg-bg) 0%,var(--mg-bg-soft) 52%,#17142e 100%)!important;background-attachment:fixed!important;overflow-x:hidden}body:before,body:after{content:""!important;position:fixed!important;z-index:0!important;pointer-events:none!important;border-radius:999px!important;filter:blur(1px)!important;opacity:1!important}body:before{width:25rem!important;height:25rem!important;top:12rem!important;right:-18rem!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 0 0 4rem #ffffff06,0 0 0 9rem #ffffff05!important;background:transparent!important}body:after{width:17rem!important;height:17rem!important;left:-12rem!important;bottom:8rem!important;background:linear-gradient(135deg,var(--page-glow-a),transparent 70%)!important;filter:blur(14px)!important}*{box-sizing:border-box}::selection{color:#fff;background:var(--page-a)}.app-nav{position:sticky;top:0;z-index:1000;width:100%;border-bottom:1px solid rgba(255,255,255,.1);background:#080c1ec7;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}.app-nav__inner{width:min(1180px,calc(100% - 32px));min-height:70px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.app-brand{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:1rem;font-weight:800;letter-spacing:-.02em;text-decoration:none}.app-brand__mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:13px;color:#fff;font-size:1.25rem;background:linear-gradient(135deg,var(--page-a),var(--page-b));box-shadow:0 9px 22px var(--page-glow-a)}.app-nav__links{min-width:0;display:flex;align-items:center;gap:6px}.app-nav__link{min-height:40px;padding:9px 15px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:12px;color:#ffffffad;font-size:.88rem;font-weight:700;text-decoration:none;transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease}.app-nav__link:hover{color:#fff;background:#ffffff14}.app-nav__link[aria-current=page]{color:#0e132c;border-color:#ffffff7a;background:#fff;box-shadow:0 8px 24px #03061438}.page{position:relative!important;z-index:1!important;min-height:calc(100vh - 70px)!important;padding:28px 16px 72px!important}.wrap,.home-wrap,.stage-shell{width:min(1180px,100%)!important;max-width:1180px!important;margin-inline:auto!important}.hero{min-height:180px!important;margin:0 0 28px!important;padding:30px 36px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-end!important;isolation:isolate;overflow:hidden!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:30px!important;text-align:left!important;background:radial-gradient(circle at 86% 24%,rgba(255,255,255,.2),transparent 19%),linear-gradient(125deg,var(--page-a) 0%,var(--page-b) 66%,var(--page-c) 128%)!important;box-shadow:var(--mg-shadow)!important}.hero:before{content:"";position:absolute;z-index:-1;width:21rem;height:21rem;top:-9rem;right:-3rem;border:2px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 3.25rem #ffffff0f,0 0 0 6.5rem #ffffff09}.hero:after{content:"";position:absolute;z-index:-1;inset:0;opacity:.28;background-image:radial-gradient(rgba(255,255,255,.75) 1.2px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 100%);mask-image:linear-gradient(90deg,transparent 38%,#000 100%)}.hero-kicker{margin-bottom:14px;padding:7px 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#ffffffe0;background:#0f122e2e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.hero h1{max-width:880px;margin:0 0 13px!important;color:#fff!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#fff!important;font-family:inherit!important;font-size:clamp(2rem,4vw,3.25rem)!important;font-weight:800!important;line-height:1.15!important;letter-spacing:-.055em!important;text-shadow:0 3px 20px rgba(16,12,49,.22)!important}.hero-note{display:inline-block;margin-right:.12em;font-size:.76em;filter:drop-shadow(0 8px 12px rgba(9,13,31,.22));transform:translateY(-.04em) rotate(-6deg)}.hero .bouncy{display:inline!important;animation:none!important}.hero p{max-width:700px!important;margin:0!important;padding:0!important;color:#ffffffd1!important;background:none!important;font-size:clamp(.98rem,2vw,1.1rem)!important;font-weight:600!important;line-height:1.6!important}.grid,.menu-grid,.stage-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;gap:20px!important;align-items:stretch!important}body.page-home .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.card,.stage-card{min-height:252px!important;padding:28px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;overflow:hidden!important;isolation:isolate;border:1px solid var(--mg-card-line)!important;border-radius:24px!important;background:linear-gradient(180deg,#fffffffc,#f8f9fff5)!important;box-shadow:var(--mg-shadow-soft)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}.card:before,.stage-card:before{content:""!important;position:absolute!important;z-index:-1!important;top:0!important;left:0!important;right:0!important;height:5px!important;background:linear-gradient(90deg,var(--page-a),var(--page-b),var(--page-c))!important}.card:after,.stage-card:after{content:"";position:absolute;z-index:-1;width:118px;height:118px;top:-72px;right:-62px;border-radius:50%;background:var(--page-glow-a);filter:blur(4px)}.card:hover,.stage-card:hover{transform:translateY(-6px)!important;border-color:color-mix(in srgb,var(--page-a) 34%,transparent)!important;box-shadow:0 24px 52px #04071840!important}.card h2,.card h3,.stage-card h3{margin:0!important;padding-right:44px;color:var(--mg-ink)!important;font-family:inherit!important;font-size:clamp(1.18rem,2vw,1.42rem)!important;font-weight:800!important;line-height:1.28!important;letter-spacing:-.025em!important}.card p,.stage-card p{margin:0!important;color:var(--mg-muted)!important;font-size:.94rem!important;font-weight:550!important;line-height:1.58!important}.card>.btn,.stage-card>.btn,.card>div:last-child,.stage-card>div:last-child,.card .game-btn-group{margin-top:auto!important}.card>div:last-child .menu-btn,.card>.btn,.stage-card>.btn{width:100%!important}.card-emoji{position:absolute!important;top:22px!important;right:22px!important;bottom:auto!important;width:44px!important;height:44px!important;display:grid!important;place-items:center!important;border:1px solid rgba(29,36,74,.08)!important;border-radius:14px!important;background:linear-gradient(145deg,#fff,#edf0ff)!important;box-shadow:0 8px 20px #171c3b1f!important;font-size:1.35rem!important;opacity:1!important;transform:none!important}body.page-rhythm .card-emoji,body.page-notes .card-emoji{display:none!important}body.page-rhythm .card h3,body.page-notes .card h3,body.page-chords .card h3{padding-right:0}.card-tag{width:fit-content!important;max-width:calc(100% - 56px);margin:0!important;padding:7px 11px!important;border:1px solid color-mix(in srgb,var(--page-a) 18%,transparent)!important;border-radius:999px!important;color:color-mix(in srgb,var(--page-a) 80%,#111827)!important;background:color-mix(in srgb,var(--page-a) 10%,#fff)!important;font-size:.69rem!important;font-weight:800!important;line-height:1!important;letter-spacing:.075em!important;text-transform:uppercase!important}.clef-section-title{grid-column:1 / -1!important;width:fit-content;margin:18px 0 2px!important;padding:9px 14px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:999px!important;color:#fff!important;background:#ffffff14!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.78rem!important;font-weight:800!important;letter-spacing:.04em!important}.clef-section-title[id]{scroll-margin-top:94px}.category-nav{position:sticky;top:82px;z-index:40;width:fit-content;max-width:100%;margin:0 auto 24px;padding:7px;display:flex;align-items:center;gap:5px;overflow-x:auto;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:#090d1fbd;box-shadow:0 14px 30px #0306142e;backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);scrollbar-width:none}.category-nav::-webkit-scrollbar{display:none}.category-nav a{flex:0 0 auto;min-height:38px;padding:9px 13px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;color:#ffffffc2;font-size:.78rem;font-weight:800;text-decoration:none;transition:color .15s ease,background .15s ease,transform .15s ease}.category-nav a:hover{color:#fff;background:#ffffff1c;transform:translateY(-1px)}.btn,.menu-btn,.back-link{min-height:48px!important;padding:12px 20px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px;border:1px solid transparent!important;border-radius:14px!important;font-family:inherit!important;font-size:.92rem!important;font-weight:800!important;line-height:1.2!important;text-decoration:none!important;cursor:pointer;transition:transform .15s ease,box-shadow .18s ease,filter .18s ease,background .18s ease!important;touch-action:manipulation}.btn-primary,.menu-btn,.game-btn{color:#fff!important;background:linear-gradient(120deg,var(--button-a),var(--button-b))!important;box-shadow:0 10px 22px var(--page-glow-a)!important}.btn-primary:hover,.menu-btn:hover,.game-btn:hover{transform:translateY(-2px)!important;filter:brightness(1.06) saturate(1.05)!important;box-shadow:0 15px 30px var(--page-glow-a)!important}.btn-primary:active,.menu-btn:active,.game-btn:active{transform:translateY(1px) scale(.99)!important}.btn-secondary,.back-link{color:#fff!important;border-color:#ffffff29!important;background:#ffffff17!important;box-shadow:none!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.btn-secondary:hover,.back-link:hover{color:#fff!important;background:#ffffff26!important;transform:translateY(-1px)!important}.btn:disabled,.btn[disabled],button:disabled{opacity:.48!important;cursor:not-allowed!important;filter:grayscale(.25)!important;transform:none!important;box-shadow:none!important}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important;box-shadow:0 0 0 6px var(--page-a)!important}#menuScreen .menu-topbar,body.page-chords #menuScreen>.topbar{display:none!important}.game-topbar,body.page-chords #gameScreen>.topbar{margin-bottom:18px!important}body.page-rhythm #gameScreen .game-topbar,body.page-rhythm #clapScreen .game-topbar,body.page-notes #gameScreen .game-topbar{padding:14px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:20px!important;background:#ffffff14!important;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}body.page-rhythm #gameScreen .game-title,body.page-rhythm #clapScreen .game-title,body.page-notes #gameScreen .game-title{color:#fff!important}body.page-rhythm #gameScreen .game-subtitle,body.page-rhythm #clapScreen .game-subtitle,body.page-notes #gameScreen .game-subtitle{color:#ffffffa6!important}.game-title{font-family:inherit!important;font-size:clamp(1.12rem,2vw,1.4rem)!important;font-weight:800!important;letter-spacing:-.025em!important}.game-subtitle{margin-top:3px;color:var(--mg-muted)!important;font-size:.82rem!important;font-weight:650!important}.game-shell{display:grid;gap:18px}.panel,.hud-panel,.question-card,.answer-area,.tile-bank-wrap,.tile-tray{padding:24px!important;border:1px solid var(--mg-card-line)!important;border-radius:22px!important;background:#fffffff7!important;box-shadow:var(--mg-shadow-soft)!important}.panel-title,.keyboard-title,.tray-title,.clap-row-label{color:var(--mg-muted)!important;font-family:inherit!important;font-size:.76rem!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase!important}.hud-grid{gap:10px!important}.hud-box{min-height:56px;padding:11px 14px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px;border:1px solid color-mix(in srgb,var(--page-a) 16%,transparent)!important;border-radius:14px!important;color:var(--mg-ink)!important;background:linear-gradient(145deg,color-mix(in srgb,var(--page-a) 8%,#fff),#fff)!important;font-family:inherit!important;font-size:.88rem!important;font-weight:750!important}.hud-box span{color:var(--page-a)!important;font-size:1.1rem;font-weight:900}.feedback{min-height:54px;padding:14px 16px!important;display:block;border-radius:15px!important;font-family:inherit!important;font-size:.92rem!important;font-weight:750!important;line-height:1.45!important}body .hidden,body [hidden]{display:none!important}.panel .btn-secondary,.hud-panel .btn-secondary{color:#354164!important;border-color:#cbd2e4!important;background:#edf0f8!important}.panel .btn-secondary:hover,.hud-panel .btn-secondary:hover{color:#202c4c!important;background:#e0e6f3!important}.white-key.show,.white-key.selected{color:#20264f!important;border-color:#6653d4!important;background:linear-gradient(180deg,#e6e0ff,#baaaff)!important;box-shadow:inset 0 0 0 2px #6653d4,0 5px #4c3b9e!important}.white-key.selected:after,.black-key.selected:after{content:"●";position:absolute;bottom:30px;left:0;right:0;text-align:center;color:#31266b}.white-key.correct-hit,.black-key.correct-hit{border-color:#087651!important;background:linear-gradient(180deg,#b7f5da,#51dba5)!important;box-shadow:inset 0 0 0 2px #087651,0 5px #075b40!important;filter:none!important}.white-key.wrong-hit,.black-key.wrong-hit{border-color:#bc234c!important;background:linear-gradient(180deg,#ffd1de,#fa94b2)!important;box-shadow:inset 0 0 0 2px #bc234c,0 5px #92223f!important;filter:none!important}.mcq-btn.correct:disabled{opacity:1!important;filter:none!important}.round-progress{display:block;appearance:none;width:100%;height:9px;margin:0 0 18px;overflow:hidden;border:0;border-radius:99px;background:#e6e9f2;accent-color:var(--button-a)}.round-progress::-webkit-progress-bar{background:#e6e9f2;border-radius:99px}.round-progress::-webkit-progress-value{background:linear-gradient(90deg,var(--button-a),var(--button-b));border-radius:99px;transition:width .18s ease}.round-progress::-moz-progress-bar{background:var(--button-a);border-radius:99px}body.page-rhythm .round-progress{accent-color:#168a45}body.page-rhythm .round-progress::-webkit-progress-value{background:linear-gradient(90deg,#22b85a,#168a45)}body.page-rhythm .round-progress::-moz-progress-bar{background:linear-gradient(90deg,#22b85a,#168a45)}.practice-note{margin:14px auto 0;max-width:44rem;color:#56617b;font-size:.875rem;line-height:1.6}.category-nav a,.clef-section-title,.panel-title,.keyboard-title,.tray-title,.clap-row-label,.game-subtitle{font-size:.875rem!important}.card-tag{font-size:.75rem!important;letter-spacing:.035em!important;line-height:1.3!important}.card p,.stage-card p{font-size:1rem!important}.game-btn-group{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important}.game-title:focus{outline:none}.panel .tile-tray{box-shadow:none!important;background:#f1f3fa!important}.feedback.correct,.feedback.wrong{animation:feedback-arrive .22s ease-out}@keyframes feedback-arrive{0%{transform:translateY(3px);opacity:.65}to{transform:translateY(0);opacity:1}}@media(max-width:600px){.hero{min-height:0!important;padding:24px!important}.app-nav__link{font-size:.875rem}.hud-box{font-size:.875rem!important}.controls{flex-direction:row!important;flex-wrap:wrap}.controls .btn{width:auto!important}.category-nav{max-width:100%}}.feedback.neutral{color:#4f46a5!important;border:1px solid #d8d7ff!important;background:#f1f0ff!important}.feedback.correct{color:#08775a!important;border:1px solid #a7ead7!important;background:#e9fbf5!important}.feedback.wrong{color:#b52b4c!important;border:1px solid #ffc2d0!important;background:#fff0f4!important}.controls{gap:10px!important;margin-top:14px!important}.tile-bank,.letter-grid,.clap-picker,.seg-control{gap:10px!important}.tile,.placed-token,.letter-btn,.pattern-chip,.seg-btn{min-width:50px!important;min-height:48px!important;border:1px solid color-mix(in srgb,var(--page-a) 25%,transparent)!important;border-radius:14px!important;color:var(--mg-ink)!important;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--page-a) 8%,#f8f9ff))!important;box-shadow:0 7px 16px #0e122f1a!important;font-family:inherit!important;font-weight:800!important;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease!important}.tile:hover,.letter-btn:hover,.pattern-chip:hover,.seg-btn:hover{transform:translateY(-2px)!important;border-color:var(--page-a)!important;box-shadow:0 11px 22px var(--page-glow-a)!important}.placed-token,.pattern-chip.active,.seg-btn.active{color:#fff!important;border-color:transparent!important;background:linear-gradient(120deg,var(--page-a),var(--page-b))!important}.answer-strip{min-height:92px!important;border:2px dashed color-mix(in srgb,var(--page-a) 38%,#d7dbea)!important;border-radius:18px!important;background:color-mix(in srgb,var(--page-a) 4%,#fff)!important}#clapPatternDisplay:is([data-bars="2"],[data-bars="4"]){max-width:760px;margin-inline:auto;row-gap:30px}#clapPatternDisplay:is([data-bars="2"],[data-bars="4"]) .note-card{min-height:0}body.page-rhythm #clapScreen .clap-pad.counting-in{font-size:2rem!important;line-height:1.2!important;font-variant-numeric:tabular-nums;opacity:1!important;cursor:default!important;transform:none!important}.note-card{transition:transform .17s ease,filter .17s ease!important}.note-card.playing{transform:translateY(-5px) scale(1.035)!important;filter:drop-shadow(0 10px 16px var(--page-glow-a))!important}.staff-wrap,.keyboard-wrap,.rhythm-wrap,.clap-pattern-wrap{border-radius:18px!important}body.page-notes .staff-wrap:has(.sight-passage-svg){justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain;padding:8px 4px 14px;scrollbar-color:color-mix(in srgb,var(--page-a) 55%,#cbd5e1) transparent}body.page-notes .sight-passage-svg{max-width:none;flex:0 0 auto}.white-key,.black-key,.clap-pad{touch-action:manipulation}.white-key,.black-key,.tile,.placed-token{appearance:none;-webkit-appearance:none;font-family:inherit}.white-key{border-color:#d9def1!important;background:linear-gradient(180deg,#fff,#f5f6fb)!important;box-shadow:0 6px #d2d7e9!important}.black-key{border-color:#15172b!important;background:linear-gradient(180deg,#32364f,#111426)!important;box-shadow:0 5px #050711!important}.white-key:hover,.black-key:hover{filter:brightness(1.06)}.prompt-big{color:var(--page-a)!important;background:none!important;-webkit-text-fill-color:var(--page-a)!important;font-family:inherit!important;font-weight:900!important}.mcq-btn{min-height:74px!important;border-radius:17px!important;font-size:1.18rem!important}.clap-pad{min-height:126px!important;border:2px solid color-mix(in srgb,var(--page-a) 32%,transparent)!important;border-radius:24px!important;color:#fff!important;background:linear-gradient(125deg,var(--page-a),var(--page-b))!important;box-shadow:0 18px 40px var(--page-glow-a)!important;font-family:inherit!important;font-size:clamp(1.2rem,4vw,2rem)!important;font-weight:900!important}.clap-summary-box{border:1px solid var(--mg-card-line)!important;border-radius:15px!important;background:#f7f8fc!important}@media(max-width:920px){body.page-home .grid{grid-template-columns:1fr!important}body.page-home .card{min-height:220px!important}.hero{min-height:235px!important}}@media(max-width:700px){.app-nav__inner{width:min(100% - 20px,1180px);min-height:62px;gap:10px}.app-brand>span:last-child{display:none}.app-brand__mark{width:36px;height:36px}.app-nav__links{flex:1;justify-content:flex-end;gap:2px}.app-nav__link{min-height:38px;padding:8px 10px;font-size:.76rem}.page{min-height:calc(100vh - 62px)!important;padding:18px 12px 52px!important}.category-nav{top:72px;width:100%;justify-content:flex-start;margin-bottom:18px}.hero{min-height:230px!important;padding:30px 24px!important;border-radius:24px!important}.hero h1{font-size:clamp(2.15rem,12vw,3.2rem)!important;line-height:1.02!important}.hero-kicker{font-size:.64rem}.grid,.menu-grid,.stage-grid{grid-template-columns:1fr!important;gap:14px!important}.card,.stage-card{min-height:0!important;padding:23px!important;border-radius:20px!important}.panel,.hud-panel,.question-card,.answer-area,.tile-bank-wrap,.tile-tray{padding:17px!important;border-radius:19px!important}body.page-rhythm #gameScreen .game-topbar,body.page-rhythm #clapScreen .game-topbar,body.page-notes #gameScreen .game-topbar{grid-template-columns:1fr!important;text-align:center!important}.hud-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.page-rhythm .hud-grid,body.page-notes .hud-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.hud-box{min-height:50px;padding:8px 5px!important;flex-direction:column;gap:1px;font-size:.875rem!important}.hud-box span{font-size:.95rem}.btn,.menu-btn,.back-link{min-height:50px!important}.controls .btn{flex:1 1 120px}.white-key{min-height:126px!important}.black-key,.black-keys{height:78px!important}}@media(max-width:390px){.app-nav__link{padding-inline:7px}.hero{padding-inline:20px!important}}@media(min-width:1000px){.page-notes #gameScreen .game-shell,.page-rhythm #gameScreen .game-shell{grid-template-columns:minmax(0,1fr) 280px;align-items:start}.page-notes #gameScreen .game-shell>:not(.hud-panel),.page-rhythm #gameScreen .game-shell>:not(.hud-panel){grid-column:1;min-width:0}.page-notes #gameScreen .hud-panel,.page-rhythm #gameScreen .hud-panel{grid-column:2;grid-row:1 / span 3;position:sticky;top:90px}.page-chords #gameScreen.active{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:18px}.page-chords #gameScreen>.topbar{grid-column:1 / -1;margin-bottom:0!important}.page-chords #gameScreen>.panel{grid-column:1;min-width:0;margin:0}.page-chords #gameScreen>.panel:last-child{grid-column:2;grid-row:2 / span 2;position:sticky;top:90px}#gameScreen .hud-grid{grid-template-columns:1fr!important}#gameScreen .controls .btn{flex:1 1 100%}}html{background:#f2f6ff}body{--mg-ink: #172744;--mg-muted: #52627c;--mg-card-line: #dce4f1;--mg-shadow-soft: 0 5px 0 #e0e7f2;--button-a: #243960;--button-b: #243960;background:#f2f6ff!important;background-attachment:scroll!important;font-family:Plus Jakarta Sans,Trebuchet MS,system-ui,sans-serif!important;font-size:16px}body:before,body:after{display:none!important}body.page-home{--page-a: #6a58d7;--page-b: #8070ee}body.page-rhythm{--page-a: #bc531c;--page-b: #c86227;--play-tint: #fff0ca}body.page-notes{--page-a: #6350c5;--page-b: #7162d4;--play-tint: #e9e7ff}body.page-chords{--page-a: #087968;--page-b: #088c77;--play-tint: #d8f7ec}.app-nav{background:#fffffff5;border-bottom:1px solid #dce4f1;box-shadow:none}.app-nav__inner{min-height:76px;gap:20px}.app-brand{color:#172744;font-size:1.05rem;letter-spacing:-.035em}.app-brand__mark{width:42px;height:42px;border-radius:14px;background:#243960;color:#c1f599;border:0;box-shadow:0 3px #d6deeb;transform:rotate(-5deg)}.app-nav__links{gap:6px}.app-nav__link{color:#4c5c77;font-size:.9375rem;font-weight:750;border-radius:12px;padding:11px 16px}.app-nav__link:hover{color:#172744;background:#eff3fc;border-color:transparent}.app-nav__link[aria-current=page]{color:#243960;background:#e7edff;border-color:#d7e0fa;box-shadow:none}.page{padding:36px 24px 64px!important}.wrap,.home-wrap,.stage-shell{max-width:1180px!important}.hero{min-height:0!important;margin:0 0 30px!important;padding:18px 0 24px!important;overflow:visible!important;border:0!important;border-bottom:1px solid #dce4f1!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;gap:0}.hero:before,.hero:after{display:none!important}.hero-kicker{padding:0;margin-bottom:12px;border:0;background:none;color:var(--page-a);font-size:.8125rem;line-height:1.5;letter-spacing:.09em;-webkit-backdrop-filter:none;backdrop-filter:none}.hero h1{color:#172744!important;-webkit-text-fill-color:#172744!important;font-size:clamp(2.2rem,4.8vw,3.6rem)!important;line-height:1.12!important;letter-spacing:-.05em!important;font-weight:850!important;text-shadow:none!important;margin-bottom:14px!important}.hero p{color:#52627c!important;max-width:650px!important;font-size:1.0625rem!important;font-weight:500!important;line-height:1.65!important}.grid,.menu-grid{gap:20px!important}.card,.stage-card{min-height:240px!important;padding:24px!important;gap:16px!important;border:1px solid #dce4f1!important;border-radius:22px!important;background:#fff!important;box-shadow:0 5px #e0e7f2!important;transition:transform .18s ease,box-shadow .18s ease!important}.card:before,.card:after,.stage-card:before,.stage-card:after{display:none!important}.card:hover,.stage-card:hover{transform:translateY(-4px)!important;border-color:#c2cfe4!important;box-shadow:0 9px #d9e2f1!important}.card h2,.card h3,.stage-card h3{color:#172744!important;padding-right:0;font-size:1.25rem!important;line-height:1.4!important;font-weight:800!important;letter-spacing:-.025em!important}.card p,.stage-card p{font-size:1rem!important;color:#52627c!important;line-height:1.6!important}.card-tag{max-width:100%;padding:7px 11px!important;border:0!important;border-radius:8px!important;color:var(--page-a)!important;background:var(--play-tint, #e9e7ff)!important;font-size:.8125rem!important;letter-spacing:0!important;line-height:1.4!important;text-transform:none!important}.clef-section-title{width:100%;border:0!important;border-bottom:1px solid #dce4f1!important;border-radius:0!important;background:transparent!important;color:#243960!important;padding:14px 0!important;margin-top:16px!important;font-size:1.125rem!important;letter-spacing:-.02em!important;text-transform:none!important}.category-nav{background:#fff;border:1px solid #dce4f1;box-shadow:0 3px #e0e7f2;border-radius:14px;padding:6px;-webkit-backdrop-filter:none;backdrop-filter:none}.category-nav a{color:#4c5c77;font-size:.875rem!important;padding:10px 15px}.category-nav a:hover{color:#172744;background:#e7edff;transform:none}body.page-home .card{min-height:345px!important;padding:28px!important;border:1px solid rgba(23,39,68,.12)!important}body.page-home .card.rhythm{background:#ffda87!important;--topic-depth: #e8be60}body.page-home .card.notes{background:#c3cbff!important;--topic-depth: #a4afe9}body.page-home .card.chords{background:#9de6d1!important;--topic-depth: #76c9b2}body.page-home .card{box-shadow:0 6px 0 var(--topic-depth)!important}body.page-home .card:hover{box-shadow:0 10px 0 var(--topic-depth)!important}.topic-number{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#394b6b;font-family:inherit;font-size:.875rem;font-weight:850}.topic-number>span:last-child{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(23,39,68,.18)}.topic-icon{display:block;font-size:2.8rem;line-height:1.3}.topic-label{color:#394b6b;font-size:.8125rem;font-weight:800;letter-spacing:.03em;margin-bottom:5px}body.page-home .card h2{font-size:2.2rem!important;letter-spacing:-.055em!important;margin-bottom:10px!important}body.page-home .card p{color:#334762!important}body.page-home .menu-btn{width:100%!important;justify-content:space-between!important}.btn,.menu-btn,.back-link{border-radius:13px!important;font-size:.9375rem!important;font-weight:800!important;min-height:50px!important}.btn-primary,.menu-btn,.game-btn{color:#fff!important;background:#243960!important;border:1px solid #243960!important;box-shadow:0 4px #12223e!important}.btn-primary:hover,.menu-btn:hover,.game-btn:hover{background:#304e7b!important;filter:none!important;box-shadow:0 5px #12223e!important;transform:translateY(-1px)!important}.btn-primary:active,.menu-btn:active,.game-btn:active{transform:translateY(3px)!important;box-shadow:0 1px #12223e!important}.btn-secondary,.back-link{color:#334762!important;background:#fff!important;border:1px solid #ccd7e8!important;box-shadow:0 3px #e0e7f2!important;-webkit-backdrop-filter:none;backdrop-filter:none}.btn-secondary:hover,.back-link:hover{color:#172744!important;background:#eaf0fc!important}.game-btn.game-btn-acc{background:#fff!important;color:#334762!important;border-color:#ccd7e8!important;box-shadow:0 4px #dbe3f0!important}.game-btn.game-btn-acc:hover{background:#edf1ff!important}.panel,.hud-panel,.question-card,.answer-area,.tile-bank-wrap,.tile-tray{border-color:#dce4f1!important;background:#fff!important;box-shadow:0 4px #e0e7f2!important;border-radius:20px!important}body.page-rhythm #gameScreen .game-topbar,body.page-rhythm #clapScreen .game-topbar,body.page-notes #gameScreen .game-topbar{padding:0 0 18px!important;border:0!important;border-bottom:1px solid #dce4f1!important;border-radius:0!important;background:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}body.page-rhythm #gameScreen .game-title,body.page-rhythm #clapScreen .game-title,body.page-notes #gameScreen .game-title{color:#172744!important}body.page-rhythm #gameScreen .game-subtitle,body.page-rhythm #clapScreen .game-subtitle,body.page-notes #gameScreen .game-subtitle{color:#52627c!important}.game-title{font-size:1.3rem!important;line-height:1.4}.hud-box{background:#f2f5fd!important;border:0!important;border-radius:12px!important;color:#394b6b!important}.hud-box span{color:#243960!important;font-variant-numeric:tabular-nums}.feedback{text-align:left;font-size:1rem!important;font-weight:650!important;border-radius:13px!important}.tile,.letter-btn,.pattern-chip,.seg-btn{background:#fff!important;border:1px solid #ccd7e8!important;box-shadow:0 4px #dbe3f0!important;border-radius:12px!important}.tile:hover,.letter-btn:hover,.pattern-chip:hover,.seg-btn:hover{background:#edf1ff!important;box-shadow:0 5px #c6d2e7!important}.placed-token,.pattern-chip.active,.seg-btn.active{background:#243960!important;color:#fff!important;border-color:#243960!important;box-shadow:0 4px #12223e!important}.answer-strip{background:#f7f9ff!important;border-color:#adbfdc!important}.clap-pad{background:#ffd76c!important;color:#243960!important;border:2px solid #ddba60!important;box-shadow:0 7px #d9b659!important}.clap-pad:active,.clap-pad.flash{transform:translateY(4px);box-shadow:0 3px #d9b659!important}@media(min-width:1000px){body.page-notes .menu-grid,body.page-chords .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.page-notes .card,body.page-chords .card{min-height:230px!important}}@media(max-width:920px)and (min-width:701px){body.page-home .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}body.page-home .card{padding:20px!important}}@media(max-width:700px){.app-nav__inner{min-height:66px}.app-nav__link{font-size:.875rem;padding:10px}.page{padding:24px 16px 48px!important}.hero{padding:8px 0 22px!important;margin-bottom:22px!important}.hero h1{font-size:clamp(2rem,8vw,2.7rem)!important}.hero p{font-size:1rem!important}.hero-kicker{font-size:.8125rem}.category-nav{top:76px}body.page-home .grid{gap:22px!important}body.page-home .card{min-height:0!important;padding:24px!important}.card,.stage-card{padding:22px!important}body.page-home .card h2{font-size:2rem!important}.topic-icon{font-size:2.4rem}}.page-rhythm :is(.tile,.placed-token)[data-token=n]{background:#ffad55!important;color:#512800!important;border-color:#d97c24!important;box-shadow:0 4px #d97c24!important}.page-rhythm :is(.tile,.placed-token):is([data-token=e],[data-token=a]){background:#ffe36d!important;color:#493900!important;border-color:#c4a331!important;box-shadow:0 4px #c4a331!important}@media(max-width:999px){:is(#gameScreen,#clapScreen).active{padding-bottom:calc(14rem + env(safe-area-inset-bottom,0px))}.screen.active .mobile-actions{position:fixed;z-index:80;inset-inline:12px;bottom:0;width:auto;max-width:660px;margin:0 auto!important;padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px))!important;border:1px solid #ccd7e8;border-bottom:0;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -5px 24px #1727441a}.mobile-actions .feedback{min-height:0;max-height:min(6rem,20dvh);overflow-y:auto;margin:0!important;padding:8px 10px!important;font-size:.9375rem!important;line-height:1.35}.screen.active .mobile-actions .controls{display:flex;flex-direction:row!important;flex-wrap:nowrap;gap:8px!important;margin-top:8px!important}.mobile-actions .controls:not(:has(.btn:not(.hidden):not([hidden]))){display:none!important}.screen.active .mobile-actions .btn{flex:1 1 0;min-width:0!important;min-height:48px!important;padding:10px 8px!important}.screen.active .mobile-actions #resetBtn{flex:.75 1 0}.screen.active .mobile-actions .clap-status{margin:0 0 8px;font-size:1rem;line-height:1.3}.screen.active .mobile-actions .clap-start-btn{width:100%;max-width:none}.screen.active .mobile-actions .clap-pad{width:100%;min-height:72px!important;margin:0;padding:14px 8px;font-size:1.125rem}.mobile-actions:has(#clapPad:not([hidden])) #clapStartBtn{display:none!important}#clapScreen:has(#clapResults:not([hidden])) .clap-action{display:none}.screen.active .clap-result-actions.mobile-actions{display:flex;gap:8px}}@media(max-width:700px){body:has(.screen.active:is(#gameScreen,#clapScreen)) .page{padding-top:12px!important}.screen.active .game-shell{gap:12px;padding:0}.screen.active :is(.panel,.hud-panel,.tile-tray){padding:12px!important}body.page-rhythm :is(#gameScreen,#clapScreen) .game-topbar,body.page-notes #gameScreen .game-topbar{display:grid;grid-template-columns:auto minmax(0,1fr)!important;gap:10px;align-items:center;text-align:left!important;padding-bottom:10px!important;margin-bottom:12px!important}.screen.active .game-topbar>div:last-child:empty{display:none}.screen.active .game-title{font-size:1.0625rem!important}.screen.active .game-topbar>button{width:auto!important;padding:8px 10px!important;min-height:44px!important}.page-rhythm #gameScreen .note-card{min-height:68px}.page-rhythm #gameScreen .hear-row{margin-bottom:6px}.page-rhythm #gameScreen .rhythm-wrap{gap:8px}.page-rhythm #gameScreen .tile-tray{margin-top:10px}.page-rhythm #gameScreen .tile-bank{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px!important}.page-rhythm #gameScreen .tile{min-width:0!important;width:100%}.screen.active .hud-box{min-height:36px;flex-direction:row;flex-wrap:wrap;padding:6px!important}}.rush-game .rush-area{border:1px solid #c9d6ee;background:repeating-linear-gradient(180deg,transparent 0 47px,#d9e5fb 47px 48px),#eff5ff}.rush-game .falling-note{width:min(250px,90%)}.rush-game .falling-bubble{width:100%;padding:6px;border:1px solid #becded;border-radius:18px;background:#fff;box-shadow:0 5px #d4dff3}.rush-game .falling-bubble svg{width:100%;height:auto}.rush-game .rush-sparkle{display:none}.rush-game .rush-target-line{bottom:16px;height:3px}.rush-game .rush-judge{bottom:24px}.rush-game .letter-btn.acc-sharp{background:#ede6ff!important;border-color:#c4afea!important}.rush-game .letter-btn.acc-flat{background:#dcf5f0!important;border-color:#9fdace!important}@media(max-width:999px){body.page-notes #gameScreen.rush-game.active{position:fixed;z-index:60;inset:66px 0 0;height:calc(100dvh - 66px);padding:8px 10px max(8px,env(safe-area-inset-bottom,0px))!important;background:#f2f6ff;overflow:auto;overscroll-behavior:contain}#gameScreen.rush-game>.wrap{width:100%;max-width:760px;height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}body.page-notes #gameScreen.rush-game .game-topbar{display:grid;grid-template-columns:auto minmax(0,1fr)!important;gap:8px;margin:0 0 6px!important;padding:0!important;border:0!important}#gameScreen.rush-game .game-topbar>div:last-child:empty{display:none}#gameScreen.rush-game .game-title{padding:0;font-size:1rem!important;line-height:1.2;background:none;box-shadow:none}#gameScreen.rush-game .game-subtitle{display:none}#gameScreen.rush-game .back-link{width:auto!important;min-height:40px!important;padding:8px!important}#gameScreen.rush-game .game-shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(140px,1fr) auto auto;gap:6px;min-height:0;padding:0}#gameScreen.rush-game .hud-panel{display:contents}#gameScreen.rush-game .round-progress{display:none}#gameScreen.rush-game .hud-grid{grid-column:1;grid-row:1;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:0}#gameScreen.rush-game .hud-box:nth-child(2){display:none!important}#gameScreen.rush-game .hud-box{min-height:28px;padding:4px 8px!important;flex-direction:row;font-size:.875rem!important}#gameScreen.rush-game #rushSection{grid-column:1;grid-row:2;min-height:0}#gameScreen.rush-game #rushSection>.panel{height:100%;margin:0;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}#gameScreen.rush-game .rush-area{height:100%;border-radius:18px}#gameScreen.rush-game .falling-note{width:min(230px,85%)}#gameScreen.rush-game #letterPanel{grid-column:1;grid-row:3;margin:0;padding:8px!important;border-radius:16px!important}#gameScreen.rush-game #letterPanel .panel-title{display:none}#gameScreen.rush-game .letter-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px!important}#gameScreen.rush-game .letter-row-label{display:none}#gameScreen.rush-game .letter-row-label+.letter-btn{grid-column:1}#gameScreen.rush-game .letter-btn{min-width:0!important;min-height:44px!important;padding:6px 0!important;border-radius:10px!important;font-size:1rem!important;letter-spacing:-.02em}#gameScreen.rush-game .mobile-actions{position:static;grid-column:1;grid-row:4;width:100%;max-width:none;padding:0!important;border:0;background:transparent;box-shadow:none}#gameScreen.rush-game .mobile-actions .feedback{max-height:3.5rem;padding:6px 8px!important;font-size:.875rem!important}}@media(max-width:999px)and (max-height:500px)and (orientation:landscape){#gameScreen.rush-game .game-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(140px,1fr) auto}#gameScreen.rush-game .hud-grid{grid-column:1 / -1}#gameScreen.rush-game #letterPanel{grid-column:2;grid-row:2;align-self:center}#gameScreen.rush-game .mobile-actions{grid-column:1 / -1;grid-row:3}}.page-home .card.ear{background:#f3e7ff!important;border-color:#d9bceb!important}@media(min-width:701px){body.page-home .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(min-width:1100px){body.page-home .grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}@media(max-width:700px){.app-nav__inner{width:calc(100% - 12px);gap:6px}.app-brand__mark{width:28px;height:32px}.app-nav__links{gap:0}.app-nav__link{padding:8px 5px;min-height:44px;font-size:.875rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(forced-colors:active){.hero h1{color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}.app-nav__link[aria-current=page]{border:2px solid Highlight!important}}