:root{--sky-top: #3a2a66;--sky-bottom: #6b4fa8;--accent: #ffd54a;--accent-2: #8affc1;--ink: #ffffff;--tile: #7a5fc0;--tile-locked: #40356a;font-family:"Baloo 2",Comic Sans MS,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;min-height:100%}body{background:linear-gradient(160deg,var(--sky-top),var(--sky-bottom));color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}#app{display:flex;flex-direction:column}.songbook{flex:1;display:flex;flex-direction:column;padding:24px clamp(16px,4vw,48px) 32px}.book-header{text-align:center}.book-header h1{font-size:clamp(2rem,6vw,3.2rem);margin:8px 0 4px;text-shadow:0 3px 0 rgba(0,0,0,.15)}.subtitle{margin:0 0 20px;opacity:.85;font-size:1.1rem}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;max-width:1000px;width:100%;margin:0 auto}.song-tile{position:relative;border:none;border-radius:20px;padding:20px 16px 16px;min-height:120px;background:var(--tile);color:var(--ink);font-family:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 6px #0003,0 10px 20px #0003;transition:transform .08s ease,box-shadow .08s ease}.song-tile:hover:not(:disabled){transform:translateY(-3px)}.song-tile:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px #0003}.song-tile.locked{background:var(--tile-locked);color:#ffffff8c;cursor:not-allowed;box-shadow:none}.tile-num{position:absolute;top:10px;right:14px;font-size:.85rem;opacity:.6}.tile-title{font-size:1.15rem;font-weight:800;line-height:1.15}.tile-stars{color:var(--accent);font-size:1.3rem;letter-spacing:2px;margin-top:8px}.tile-soon{font-size:.8rem;opacity:.8;margin-top:8px;font-style:italic}.tile-tag{position:absolute;top:10px;left:14px;font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;background:#ffffff38;padding:2px 7px;border-radius:8px}.book-foot{text-align:center;margin-top:24px;opacity:.8;font-size:.95rem}.foot-note{font-size:.82rem;opacity:.75;margin-top:4px}.lesson{flex:1;display:flex;flex-direction:column;height:100%}.lesson-bar{display:flex;align-items:center;gap:12px;padding:12px clamp(12px,3vw,24px)}.lesson-title{margin:0;font-size:1.3rem}.spacer{flex:1}.stage{flex:1;min-height:0;padding:0 clamp(8px,2vw,20px)}.game-canvas{display:block;width:100%;height:100%;border-radius:20px;background:#2b1a4a;box-shadow:inset 0 0 40px #00000059}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px clamp(12px,3vw,24px) 24px}.hint{flex-basis:100%;margin:4px 0 0;opacity:.85}.btn{font-family:inherit;font-size:1.1rem;font-weight:800;border:none;border-radius:16px;padding:14px 22px;cursor:pointer;color:#3a2a66;background:#fff;box-shadow:0 4px #0003;transition:transform .08s ease}.btn:active{transform:translateY(3px);box-shadow:0 1px #0003}.btn-primary{background:var(--accent)}.btn-ghost{background:#ffffff26;color:var(--ink);box-shadow:none;padding:10px 16px;font-size:1rem}.selftest{margin:40px auto;max-width:480px;background:#0000004d;padding:20px;border-radius:12px;font-size:1rem}