:root{--bg: #f2f4f9;--card-bg: #ffffff;--ink: #171a2b;--ink-dim: #7a8099;--accent-blue: #3b6fef;--accent-purple: #8e4fd6;--accent-green: #2fae6b;--accent-red: #e5484d;--shadow: 0 10px 24px -12px rgba(23, 26, 43, .18), 0 2px 6px rgba(23, 26, 43, .06);--shadow-sm: 0 4px 10px -4px rgba(23, 26, 43, .16)}*{box-sizing:border-box}html,body{height:100%;overscroll-behavior-y:none}body{margin:0;background:var(--bg);font-family:IBM Plex Sans,ui-sans-serif,system-ui,sans-serif}.page{height:100vh;height:100dvh;width:100%;background:var(--bg);color:var(--ink);padding-inline:16px;padding-block:20px 32px;display:flex;justify-content:center;overflow-y:auto;overscroll-behavior-y:contain}.app{width:100%;max-width:440px;display:flex;flex-direction:column;gap:18px}.brand-row{display:flex;align-items:center;justify-content:space-between}.logo{font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-weight:700;font-size:26px;margin:0;letter-spacing:-.01em}.logo .ink{color:var(--ink)}.logo .pop-blue{color:var(--accent-blue)}.logo .pop-red{color:#e5473c}.logo .pop-green{color:var(--accent-green)}.games-link-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;text-decoration:none;padding:9px 16px;border-radius:999px;background:var(--card-bg);box-shadow:var(--shadow-sm);color:var(--ink-dim);font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}.nav-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.back-link{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;background:none;padding:6px 2px;color:var(--ink-dim);font-family:IBM Plex Sans,sans-serif;font-weight:600;font-size:14px}.back-link-center{align-self:center;margin-top:-4px}.profile-switcher{position:relative;align-self:flex-start}.profile-pill{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;background:var(--card-bg);border-radius:999px;padding:6px 12px 6px 6px;box-shadow:var(--shadow-sm)}.profile-pill-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}.profile-pill-label{font-size:10px;color:var(--ink-dim)}.profile-pill-name{font-size:13px;font-weight:700;color:var(--ink)}.profile-pill-chevron{color:var(--ink-dim);font-size:11px}.profile-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:5;background:var(--card-bg);border-radius:16px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:160px}.profile-menu-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;background:none;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-family:IBM Plex Sans,sans-serif;font-weight:600;font-size:14px;color:var(--ink);text-align:left}.profile-menu-item-active{background:#3b6fef1a}.menu-list{display:flex;flex-direction:column;gap:14px;margin-top:4px}.menu-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;display:flex;align-items:center;gap:14px;text-align:left;border-radius:22px;padding:18px;box-shadow:var(--shadow);background:var(--card-bg)}.menu-card-blue{background:linear-gradient(135deg,#4a7cf5,#3660e0)}.menu-card-blue .menu-title,.menu-card-blue .menu-sub{color:#fff}.menu-card-blue .menu-sub{opacity:.85}.menu-card-purple{background:#f1e9fb}.menu-card-green{background:#e6f7ee}.icon-badge{flex:none;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center}.menu-text{display:flex;flex-direction:column;gap:2px}.menu-title{font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-weight:700;font-size:18px;color:var(--ink)}.menu-sub{font-size:13px;color:var(--ink-dim)}.screen-title{font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-weight:700;font-size:clamp(20px,6vw,24px);text-align:center;margin:0;text-wrap:balance}.screen-sub{font-size:14px;color:var(--ink-dim);text-align:center;margin:-8px 0 0}.progress-colors-label{margin-top:4px;text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.06em}.progress-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}.progress-dots{display:flex;align-items:center;width:100%;max-width:220px}.progress-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#d7dceb}.progress-dot-filled{background:var(--accent-blue)}.progress-line{flex:1;height:2px;background:#d7dceb}.progress-line-filled{background:var(--accent-blue)}.progress-count{font-size:12px;color:var(--ink-dim);font-variant-numeric:tabular-nums}.rainbow-play-wrap{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;background:none;padding:0;position:relative;display:flex;justify-content:center;-webkit-tap-highlight-color:transparent}.rainbow-play-wrap:active{transform:scale(.98)}.rainbow-play-wrap .rainbow{width:min(300px,78vw);opacity:1;transform:scale(1)}.rainbow-play-wrap-compact .rainbow{width:min(190px,52vw)}.rainbow-play-wrap-compact .rainbow-center-btn{width:46px;height:46px}.rainbow-pretty{filter:drop-shadow(0 12px 16px rgba(20,22,26,.14))}.rainbow-cloud circle{fill:#fff;opacity:.9}.rainbow-center-btn{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}.tap-pill{align-self:center;background:var(--card-bg);color:var(--ink-dim);font-weight:600;font-size:13px;padding:8px 16px;border-radius:999px;box-shadow:var(--shadow-sm)}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.option-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;min-height:96px;border-radius:20px;box-shadow:var(--shadow);font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-weight:700;font-size:20px;text-transform:capitalize;transition:transform .06s ease}.option-btn:active{transform:scale(.97)}.feedback-icon-wrap{position:relative;align-self:center;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center}.feedback-correct{background:var(--accent-green)}.feedback-incorrect{background:var(--accent-red)}.feedback-confetti{position:absolute;top:-50px;right:-50px;bottom:-50px;left:-50px;pointer-events:none}.feedback-confetti span{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:2px;opacity:0;animation:confetti-fall .9s ease-out forwards}.feedback-confetti span:nth-child(1){background:#e5473c;--tx: -60px;--ty: -50px;--rot: 40deg;animation-delay:0s}.feedback-confetti span:nth-child(2){background:#e4c13b;--tx: 55px;--ty: -60px;--rot: -30deg;animation-delay:.04s}.feedback-confetti span:nth-child(3){background:#3b6fb0;--tx: -80px;--ty: 10px;--rot: 80deg;animation-delay:.08s}.feedback-confetti span:nth-child(4){background:#4c8858;--tx: 80px;--ty: 0px;--rot: -60deg;animation-delay:.02s}.feedback-confetti span:nth-child(5){background:#7c4a9e;--tx: -40px;--ty: -80px;--rot: 20deg;animation-delay:.06s}.feedback-confetti span:nth-child(6){background:#d8688c;--tx: 40px;--ty: 70px;--rot: -20deg;animation-delay:.03s}.feedback-confetti span:nth-child(7){background:#e98a2e;--tx: -20px;--ty: 75px;--rot: 55deg;animation-delay:.07s}.feedback-confetti span:nth-child(8){background:#2fae6b;--tx: 15px;--ty: -85px;--rot: -45deg;animation-delay:.01s}@keyframes confetti-fall{0%{transform:translate(-50%,-50%) rotate(0) scale(.6);opacity:1}to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--rot)) scale(1);opacity:0}}.answer-card{border-radius:22px;padding:20px;text-align:center;box-shadow:var(--shadow)}.answer-name{font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-weight:700;font-size:28px;text-transform:capitalize}.answer-notes{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:14px;letter-spacing:.06em;opacity:.85;margin-top:2px}.feedback-actions{display:flex;gap:10px}.pill-btn-secondary,.pill-btn-primary{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;flex:1;padding:13px;border-radius:999px;font-family:IBM Plex Sans,sans-serif;font-weight:700;font-size:14px}.pill-btn-secondary{background:#e8ebf3;color:var(--ink)}.pill-btn-primary{background:var(--accent-blue);color:#fff}.complete-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding-block:20px}.complete-emoji{font-size:48px}.stat-tiles{display:flex;gap:12px}.stat-tile{flex:1;background:var(--card-bg);border-radius:20px;padding:18px;text-align:center;box-shadow:var(--shadow)}.stat-number{font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-weight:700;font-size:30px;font-variant-numeric:tabular-nums}.stat-label{font-size:12px;color:var(--ink-dim);margin-top:2px}.progress-colors{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.progress-chip{min-width:34px;height:34px;padding:0 8px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:IBM Plex Mono,ui-monospace,monospace;font-weight:700;font-size:13px;box-shadow:var(--shadow-sm)}.result-chip-list{display:flex;flex-direction:column;gap:8px}.result-chip{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow-sm);font-family:IBM Plex Sans,sans-serif}.result-chip-name{font-weight:700;font-size:14px;text-transform:capitalize}.result-chip-counts{font-family:IBM Plex Mono,ui-monospace,monospace;font-weight:600;font-size:13px;opacity:.9}.rainbow-slot{height:60px;display:flex;align-items:flex-end;justify-content:center;margin-top:-8px}.rainbow{width:min(260px,74vw);height:auto;opacity:0;transform:scale(.85);transition:opacity .3s ease,transform .3s ease}.rainbow-show{opacity:1;transform:scale(1)}.rainbow-band{opacity:.35;transition:opacity .2s ease,stroke-width .2s ease}.rainbow-band-active{opacity:1;stroke-width:13;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.pad{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:24px;min-height:100px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;box-shadow:var(--shadow);transition:transform .06s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}.pad:active{transform:translateY(2px) scale(.98)}.pad-played{box-shadow:var(--shadow),0 0 0 3px var(--bg),0 0 0 6px var(--accent-blue);animation:pop-bounce .38s ease}@keyframes pop-bounce{0%{transform:scale(1)}35%{transform:scale(1.08)}65%{transform:scale(.96)}to{transform:scale(1)}}.melody-counter{align-self:center;font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-weight:700;font-size:22px;color:var(--ink-dim);font-variant-numeric:tabular-nums}.melody-grid{display:flex;flex-direction:column;gap:20px;margin-top:8px}.melody-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;border-radius:32px;min-height:34vh;box-shadow:var(--shadow);transition:transform .08s ease;-webkit-tap-highlight-color:transparent}.melody-btn:active{transform:scale(.96)}.melody-btn-played{animation:pop-bounce .38s ease}.pad-name{font-family:IBM Plex Sans,sans-serif;font-weight:700;font-size:18px;text-transform:capitalize}.pad-notes{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:12px;letter-spacing:.06em;opacity:.82}.pad:focus-visible,.option-btn:focus-visible,.menu-card:focus-visible,.rainbow-play-wrap:focus-visible{outline:3px solid var(--accent-blue);outline-offset:2px}@media (prefers-reduced-motion: reduce){.pad,.option-btn,.rainbow-play-wrap{transition:none}.pad-played{animation:none}.feedback-confetti{display:none}}