:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff8e6;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}#root{min-height:100vh}h1,h2,h3,p{margin-top:0}svg{flex:none}.app-shell{color:#172033;background:radial-gradient(circle at 0 0,#ffcc4d61,#0000 34rem),linear-gradient(145deg,#fff8e6 0%,#f1fbff 48%,#fff3f6 100%);min-height:100vh}.topbar{justify-content:space-between;align-items:center;gap:20px;padding:18px clamp(18px,4vw,48px);display:flex}.brand,.topbar nav,.hero-actions,.game-tabs,.stats-row,.add-student{align-items:center;gap:12px;display:flex}.brand{color:inherit;text-align:left;cursor:pointer;background:0 0;border:0}.brand-mark{color:#fff;background:#f24b65;border-radius:8px;place-items:center;width:54px;height:54px;display:grid;box-shadow:0 12px 24px #f24b6540}.brand strong,.brand small{display:block}.brand strong{font-size:1.2rem}.brand small,.eyebrow,.game-tile span,.metric span,.qr-card small,.status-line,.empty-state{color:#5b6477}button,input,select{font:inherit}button{cursor:pointer}.topbar nav button,.game-tabs button{color:#172033;background:#ffffffb3;border:1px solid #1720331f;border-radius:8px;padding:10px 14px}.topbar nav button.active,.game-tabs button.active{color:#fff;background:#172033}.hero-screen,.dashboard,.play-screen,.teacher-login,.play-gate{padding:clamp(20px,4vw,48px)}.hero-screen{grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);align-items:center;gap:clamp(24px,5vw,72px);min-height:calc(100vh - 96px);display:grid}.hero-copy h1,.dashboard h1,.play-screen h1,.teacher-login h1,.play-gate h1{letter-spacing:0;margin:0;line-height:1.02}.hero-copy h1{max-width:720px;font-size:clamp(3rem,8vw,6.5rem)}.hero-copy p:not(.eyebrow){max-width:620px;font-size:1.2rem;line-height:1.6}.eyebrow{letter-spacing:0;text-transform:uppercase;margin:0 0 10px;font-size:.78rem;font-weight:800}.primary-button,.secondary-button{border-radius:8px;justify-content:center;align-items:center;gap:10px;min-height:46px;padding:0 18px;font-weight:800;display:inline-flex}.primary-button{color:#fff;background:#176bff;border:0;box-shadow:0 12px 22px #176bff3d}.secondary-button{color:#172033;background:#fff;border:1px solid #17203326}.stage-panel,.panel,.login-panel,.game-panel{background:#ffffffd1;border:1px solid #1720331f;border-radius:8px;box-shadow:0 20px 60px #1720331f}.stage-panel{padding:clamp(18px,3vw,30px)}.staff-preview{color:#fff;background:#172033;border-radius:8px;grid-template-columns:220px 1fr;align-items:center;gap:18px;padding:16px;display:grid}.staff-preview span{color:#d5dce9;margin-top:4px;display:block}.staff-preview .mini-staff{width:230px;min-height:86px}.game-tiles{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;display:grid}.game-tile,.metric,.qr-card,.result-row{background:#fff;border:1px solid #1720331a;border-radius:8px}.game-tile{gap:8px;min-height:138px;padding:16px;display:grid}.game-tile svg{color:#f24b65}.teacher-login,.play-gate{place-items:center;min-height:calc(100vh - 96px);display:grid}.login-panel{width:min(440px,100%);padding:32px}.login-panel label,.login-panel input{gap:8px;width:100%;display:grid}.login-panel input,.add-student input,.player-strip select{background:#fff;border:1px solid #1720332e;border-radius:8px;padding:12px 14px}.dashboard-header,.player-strip,.game-panel-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.dashboard-header{margin-bottom:24px}.dashboard h1,.play-screen h1{font-size:clamp(2rem,5vw,3.6rem)}.stats-row{grid-template-columns:repeat(3,1fr);margin-bottom:20px;display:grid}.metric{grid-template-columns:auto 1fr;gap:2px 12px;padding:16px;display:grid}.metric strong{grid-column:2;font-size:1.6rem}.teacher-grid{grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:20px;display:grid}.panel,.game-panel{padding:22px}.add-student{align-items:stretch;margin-bottom:18px}.add-student input{flex:1}.qr-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;display:grid}.qr-card{text-align:center;overflow-wrap:anywhere;justify-items:center;gap:8px;padding:14px;display:grid}.qr-card img{width:132px;height:132px}.qr-card button{background:#eef4ff;border:0;border-radius:8px;place-items:center;width:34px;height:34px;display:grid}.results-list{gap:10px;display:grid}.result-row{grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:12px;display:grid}.play-screen{max-width:1120px;margin:0 auto}.game-tabs{grid-template-columns:repeat(3,1fr);margin:18px 0;display:grid}.game-tabs button{justify-content:center;align-items:center;gap:10px;min-height:52px;font-weight:800;display:inline-flex}.game-panel{min-height:520px}.mini-staff{color:#172033;width:min(100%,520px);min-height:170px}.mini-staff svg{width:100%;height:auto;display:block}.game-panel .mini-staff{color:#172033;margin:12px auto 22px;display:block}.answer-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.answer-grid button,.choice-stack button,.tap-pad{color:#172033;background:#ffd84d;border:0;border-radius:8px;font-weight:900;box-shadow:0 8px #d6a700}.answer-grid button{min-height:70px;font-size:1.8rem}.choice-stack{gap:12px;display:grid}.choice-stack button{min-height:62px;padding:12px;font-size:1.02rem}.choice-stack .fingering-choice{text-align:left;background:#fff;border:2px solid #d9e2ef;grid-template-columns:190px 1fr;align-items:center;gap:16px;min-height:116px;display:grid;box-shadow:0 8px #d9e2ef}.choice-stack .fingering-choice>span{font-weight:900}.fingering-diagram{color:#172033;background:#f6f9ff;border-radius:8px;width:180px;min-height:82px;position:relative}.valve-diagram{justify-content:center;align-items:center;gap:12px;display:flex}.valve-diagram span{background:#fff;border:3px solid #172033;border-radius:50%;place-items:center;width:42px;height:42px;font-weight:900;display:grid}.valve-diagram span.pressed{color:#fff;background:#176bff}.valve-diagram small,.woodwind-diagram small{color:#5b6477;font-size:.75rem;position:absolute;bottom:6px;right:8px}.trombone-diagram{align-content:center;gap:12px;padding:14px;display:grid}.slide-track{background:#172033;border-radius:999px;height:10px;position:relative}.slide-marker{background:#ffd84d;border:3px solid #172033;border-radius:50%;width:24px;height:24px;position:absolute;top:50%;transform:translate(-50%,-50%)}.slide-numbers{text-align:center;grid-template-columns:repeat(7,1fr);gap:2px;font-size:.74rem;display:grid}.slide-numbers .active{color:#176bff;font-weight:900}.woodwind-diagram{justify-content:center;align-items:center;gap:18px;display:flex}.thumb-row span,.hole-stack span{background:#fff;border:2px solid #172033;border-radius:50%;display:block}.thumb-row span{place-items:center;width:26px;height:26px;font-size:.78rem;font-weight:900;display:grid}.hole-stack{gap:5px;display:grid}.hole-stack span{width:18px;height:18px}.thumb-row .closed,.hole-stack .closed{background:#176bff}.hole-stack i{height:5px;display:block}.bass-diagram{gap:3px;padding:10px;display:grid}.bass-string{grid-template-columns:18px repeat(4,1fr);align-items:center;gap:4px;display:grid}.bass-string b{font-size:.72rem}.bass-string span{border-bottom:2px solid #172033;border-left:2px solid #8c95a8;place-items:center;height:15px;font-size:.58rem;display:grid}.bass-string .fretted{color:#fff;background:#176bff;border-radius:999px}.mallet-diagram{padding:12px}.white-keys{grid-template-columns:repeat(7,1fr);height:60px;display:grid}.white-keys span{background:#fff;border:1px solid #172033;justify-content:center;align-items:flex-end;font-size:.7rem;font-weight:900;display:flex}.white-keys .hit{background:#ffd84d}.black-keys{pointer-events:none;grid-template-columns:repeat(6,1fr);display:grid;position:absolute;top:12px;left:25px;right:25px}.black-keys span{background:#172033;justify-self:center;width:17px;height:34px}.rhythm-strip{grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0;display:grid}.rhythm-strip span{color:#176bff;background:#eef4ff;border-radius:8px;place-items:center;min-height:86px;font-size:1.5rem;font-weight:900;display:grid}.rhythm-strip .rest{color:#5b6477;background:#f1f2f5}.tap-pad{background:#2ee6a6;width:min(420px,100%);min-height:150px;margin:20px auto;font-size:2.4rem;display:block;box-shadow:0 10px #16a97d}@media (width<=860px){.topbar,.dashboard-header,.player-strip,.game-panel-header{flex-direction:column;align-items:stretch}.topbar nav,.hero-actions,.game-tabs,.stats-row,.teacher-grid,.hero-screen,.staff-preview,.game-tiles{grid-template-columns:1fr}.hero-actions,.topbar nav{width:100%}.hero-actions button,.topbar nav button{flex:1}.choice-stack .fingering-choice{text-align:center;grid-template-columns:1fr}.fingering-diagram{justify-self:center}}@media print{.topbar,.dashboard-header,.stats-row,.results-list,.add-student,.qr-card button{display:none}.app-shell,.dashboard,.panel,.qr-card{box-shadow:none;background:#fff}.teacher-grid{display:block}.qr-grid{grid-template-columns:repeat(3,1fr)}}