: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}.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{width:min(100%,360px);height:auto;overflow:visible}.mini-staff line{stroke:currentColor;stroke-width:2px;stroke-linecap:round}.mini-staff .clef{fill:currentColor;font-size:48px}.mini-staff .accidental{fill:currentColor;font-size:23px}.mini-staff .stem{stroke-width:2.4px}.mini-staff ellipse{fill:currentColor}.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}.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}}@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)}}