:root{--text:#1f2544;--muted:#5e6483;--bg:#fffaf3;--card:#fff;--border:#ebe6f5;--primary:#7c5cff;--primary-dark:#5b3fe0;--primary-soft:#efeaff;--sky:#2fa8f0;--sky-dark:#1b7fc0;--sky-soft:#e2f3ff;--yellow-soft:#fff3c4;--mint-soft:#d8f6e9;--peach-soft:#ffe3d4;--lavender-soft:#ece6ff;--pink-soft:#ffe0ec;--gray-soft:#f1f0f5;--success:#22b573;--success-dark:#12804c;--success-soft:#defbea;--danger:#f05a5a;--danger-dark:#c23636;--danger-soft:#ffe8e8;--reward:#ffb020;--reward-dark:#b86e00;--t-SimplePresent:var(--sky-dark);--t-SimplePast:var(--primary);--t-PresentPerfect:#e0457b;--t-PresentContinuous:var(--success-dark);--t-PastContinuous:#e2621b;--t-SimpleFuture:var(--reward-dark);--radius:24px;--radius-sm:16px;--shadow-sm:0 2px 6px #1f25440f;--shadow:0 8px 24px #1f254414;--shadow-lg:0 16px 40px #1f25441f;--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--fast:.15s;--normal:.25s;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);font-family:Fredoka,ui-rounded,SF Pro Rounded,system-ui,sans-serif;line-height:1.5}:root[data-theme=dark]{--text:#f4f1ff;--muted:#bdb7de;--bg:#2b2748;--card:#37325a;--border:#4b4573;--primary:#8f73ff;--primary-dark:#c3b4ff;--primary-soft:#463d7c;--sky:#4cb8f5;--sky-dark:#8fd3ff;--sky-soft:#2e4a72;--yellow-soft:#5a4b34;--mint-soft:#2f5650;--peach-soft:#5e4140;--lavender-soft:#4a4180;--pink-soft:#5c3a63;--gray-soft:#433e66;--success-dark:#6fe0a8;--success-soft:#2f5447;--danger-dark:#ff9a9a;--danger-soft:#5e3a45;--reward-dark:#ffcb66;--t-SimplePresent:#1b7fc0;--t-PresentContinuous:#12804c;--t-SimpleFuture:#b86e00;--shadow-sm:0 2px 6px #0a061e4d;--shadow:0 8px 24px #0a061e59;--shadow-lg:0 16px 40px #0a061e73;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:radial-gradient(600px 400px at 0% 0%, var(--sky-soft), transparent 70%), radial-gradient(500px 400px at 100% 20%, var(--pink-soft), transparent 70%), radial-gradient(600px 500px at 50% 110%, var(--yellow-soft), transparent 70%), var(--bg);background-attachment:fixed;min-height:100vh;margin:0}h1{margin:.1em 0;font-size:2.1rem;font-weight:700;line-height:1.2}h2{margin:1.6em 0 .6em;font-size:1.35rem;font-weight:700}a{color:var(--primary-dark);font-weight:600}.muted{color:var(--muted)}.small{font-size:.92rem}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}kbd{border:1px solid var(--border);background:var(--card);border-bottom-width:3px;border-radius:8px;padding:0 6px;font-family:inherit}:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}main{z-index:1;max-width:1140px;margin:0 auto;padding:24px 16px 64px;position:relative}.app-shell{grid-template-columns:236px minmax(0,1fr);gap:24px;max-width:1480px;margin:0 auto;padding:0 16px;display:grid}.app-shell main{min-width:0;max-width:none;margin:0;padding:24px 0 64px}.loading{text-align:center;color:var(--muted);padding:48px 16px;font-size:1.2rem}.loading-icon{width:fit-content;color:var(--primary);margin:0 auto 8px;animation:1s ease-in-out infinite alternate bob;display:block}@keyframes bob{to{transform:translateY(-10px)rotate(8deg)}}.error{color:var(--danger-dark);background:var(--danger-soft);border-radius:var(--radius-sm);margin:0;padding:10px 14px;font-weight:600}.success{color:var(--success-dark);background:var(--success-soft);border-radius:var(--radius-sm);margin:0;padding:10px 14px;font-weight:600}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.empty{text-align:center;padding:28px}.empty-icon{width:48px;height:48px;color:var(--primary);margin:0 auto 8px;display:block}.lucide{vertical-align:-.15em;flex-shrink:0}.title-icon{width:1em;height:1em;color:var(--primary);vertical-align:-.12em}.title-icon.wave{color:var(--reward);transform-origin:70% 80%;animation:1.6s ease-in-out 2 wave}@keyframes wave{0%,60%,to{transform:rotate(0)}15%,45%{transform:rotate(16deg)}30%{transform:rotate(-8deg)}}.spin{animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.ok{color:var(--success)}.stat span,.done-badge,.streak,.score-pill,.hint,.question-title,.back,.teacher-link,.level-top .small,.avatar-chip{align-items:center;gap:6px;display:inline-flex}.song-score .small{align-items:center;gap:4px;display:inline-flex}.floating{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.floating span{opacity:.22;animation:linear infinite float-up;position:absolute;bottom:-60px}@keyframes float-up{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-55vh)translate(30px)rotate(20deg)}to{transform:translateY(-115vh)rotate(-10deg)}}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;position:relative}button,.btn{font:inherit;cursor:pointer}.btn{border:2px solid var(--border);background:var(--card);min-height:44px;color:var(--text);box-shadow:0 4px 0 var(--border);transition:transform var(--fast) ease, box-shadow var(--fast) ease, background var(--fast) ease, filter var(--fast) ease;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 22px;font-weight:700;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){box-shadow:0 6px 0 var(--border);transform:translateY(-2px)}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--border);transform:translateY(3px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 0 var(--primary-dark)}.btn.primary:hover:not(:disabled){box-shadow:0 6px 0 var(--primary-dark);filter:brightness(1.06)}.btn.primary:active:not(:disabled){box-shadow:0 1px 0 var(--primary-dark)}.btn.success{background:var(--success);border-color:var(--success);color:#fff;box-shadow:0 4px 0 var(--success-dark)}.btn.success:hover:not(:disabled){box-shadow:0 6px 0 var(--success-dark)}.btn.success:active:not(:disabled){box-shadow:0 1px 0 var(--success-dark)}.btn.big{min-height:56px;padding:14px 32px;font-size:1.2rem}.btn.tiny{min-height:36px;box-shadow:0 3px 0 var(--border);padding:4px 14px;font-size:.9rem}.btn.ghost{box-shadow:none;background:0 0}.btn.ghost:hover:not(:disabled){background:var(--primary-soft);box-shadow:none;transform:none}.topbar{z-index:10;background:color-mix(in srgb, var(--card) 85%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:16px;padding:10px 24px;display:flex;position:sticky;top:0}.logo{color:var(--primary);align-items:center;gap:6px;font-size:1.6rem;font-weight:700;text-decoration:none;display:flex}.logo-note{animation:2.4s ease-in-out infinite wiggle;display:inline-flex}@keyframes wiggle{0%,to{transform:rotate(-10deg)}50%{transform:rotate(12deg)scale(1.1)}}.topbar .user{align-items:center;gap:10px;margin-left:auto;display:flex}.theme-switch{border:2px solid var(--border);background:linear-gradient(90deg, var(--yellow-soft), var(--sky-soft));border-radius:999px;flex:none;justify-content:flex-start;align-items:center;width:64px;height:36px;padding:0;display:flex;position:relative;box-shadow:inset 0 2px 4px #00000014}.theme-switch.on{background:linear-gradient(90deg,#3b3470,#5b4bb0);justify-content:flex-end}.theme-track{color:var(--muted);justify-content:space-between;align-items:center;display:flex;position:absolute;inset:0 9px}.theme-knob{background:var(--reward);color:#fff;border-radius:50%;place-items:center;width:28px;height:28px;margin:0 2px;display:grid;position:relative;box-shadow:0 2px 6px #00000040}.theme-switch.on .theme-knob{color:#5b4bb0;background:#ffe9a8}.avatar-chip{color:inherit;border-radius:999px;align-items:center;gap:8px;padding:2px 10px 2px 2px;font-weight:600;text-decoration:none;display:flex}.avatar-chip:hover,.avatar-chip.active{background:var(--primary-soft)}.avatar{background:linear-gradient(135deg, var(--sky), var(--primary));color:#fff;border-radius:50%;place-items:center;width:36px;height:36px;font-weight:700;display:grid}.mascot{align-items:center;gap:12px;display:flex}.mascot-face{flex-shrink:0;place-items:center;width:72px;height:72px;display:grid}.mascot-art{object-fit:contain;-webkit-user-select:none;user-select:none;max-width:100%;max-height:100%;display:block}.bubble{background:var(--card);border:1px solid var(--border);max-width:320px;box-shadow:var(--shadow);border-radius:18px;padding:10px 16px;font-weight:600;position:relative}.bubble:before{content:"";background:var(--card);border-left:1px solid var(--border);border-bottom:1px solid var(--border);width:16px;height:16px;position:absolute;top:50%;left:-9px;transform:translateY(-50%)rotate(45deg)}.login-page{grid-template-columns:minmax(0,420px);place-content:center;justify-items:center;gap:16px;min-height:100vh;padding:16px;display:grid}.login-home{z-index:1;position:relative}.login-card{z-index:1;width:100%;max-width:420px;box-shadow:var(--shadow-lg);flex-direction:column;gap:16px;padding:28px;display:flex}.brand-title{text-align:center;color:var(--primary);margin:0;font-size:2.8rem}.brand-title span{color:var(--reward)}.login-card .mascot{justify-content:center}.login-card label{flex-direction:column;gap:6px;font-weight:600;display:flex}.login-card input{font:inherit;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--bg);min-height:52px;color:var(--text);transition:border-color var(--fast), box-shadow var(--fast), background var(--fast);padding:12px 16px;font-size:1.1rem}.login-card input:focus{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 4px var(--primary-soft);outline:none}.tabs{background:var(--primary-soft);border-radius:999px;padding:4px;display:flex}.tabs button{min-height:44px;color:var(--muted);transition:background var(--normal), color var(--normal);background:0 0;border:none;border-radius:999px;flex:1;padding:8px;font-weight:700}.tabs button[aria-selected=true]{background:var(--card);color:var(--primary-dark);box-shadow:var(--shadow-sm)}.tabs button svg{vertical-align:-3px}.ranking-tabs{max-width:360px;margin-bottom:16px}.ranking .class-name{font-weight:600;display:block}.login-card .small{text-align:center;margin:0}.hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:20px;margin-bottom:8px;display:grid}.hero-text{flex-direction:column;align-items:flex-start;gap:14px;display:flex}.hero-text p{color:var(--muted);margin:0;font-size:1.2rem}.highlight{color:var(--primary)}.next-up{background:linear-gradient(120deg, var(--primary), var(--sky));color:#fff;border-radius:var(--radius);width:100%;box-shadow:var(--shadow);transition:transform var(--normal) var(--ease-bounce), box-shadow var(--normal);align-items:center;gap:16px;padding:14px;text-decoration:none;display:flex}.next-up:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}.next-up img{aspect-ratio:16/9;object-fit:cover;border-radius:12px;flex-shrink:0;width:112px}.next-up .label{opacity:.9;font-size:.9rem}.next-up b{font-size:1.2rem;display:block}.next-up .go{background:var(--card);width:52px;height:52px;color:var(--primary);border-radius:50%;flex-shrink:0;place-items:center;margin-left:auto;font-size:1.3rem;display:grid}.level-card{flex-direction:column;gap:10px;display:flex}.level-top{align-items:center;gap:14px;display:flex}.level-badge{background:linear-gradient(135deg, #ffd25e, var(--reward));color:#fff;width:60px;height:60px;box-shadow:0 4px 0 var(--reward-dark);border-radius:20px;flex-shrink:0;place-items:center;font-size:1.6rem;font-weight:700;display:grid}.level-top b{font-size:1.2rem;display:block}.xp-bar{background:var(--yellow-soft);border-radius:999px;height:16px;overflow:hidden}.xp-bar>div{background:linear-gradient(90deg, #ffd25e, var(--reward));border-radius:999px;height:100%}.stat-tiles{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:16px;display:grid}.stat{border-radius:var(--radius);text-align:center;padding:16px}.stat b{font-size:2rem;line-height:1.1;display:block}.stat span{color:var(--muted);font-size:.95rem;font-weight:600}.stat.c-lavender{background:var(--lavender-soft)}.stat.c-mint{background:var(--mint-soft)}.stat.c-peach{background:var(--peach-soft)}.stat.c-pink{background:var(--pink-soft)}.achievements{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;display:grid}.achievement{text-align:center;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:transform var(--normal) var(--ease-bounce);flex-direction:column;align-items:center;gap:4px;padding:16px 12px;display:flex}.achievement:hover{transform:translateY(-4px)rotate(-1deg)}.achievements-scroll{scroll-snap-type:x proximity;grid-template-rows:repeat(2,auto);grid-template-columns:none;grid-auto-columns:150px;grid-auto-flow:column;padding:6px 4px 12px;overflow-x:auto}.achievements-scroll .achievement{scroll-snap-align:start}.achievement .icon{background:var(--yellow-soft);width:64px;height:64px;color:var(--reward-dark);border-radius:50%;place-items:center;display:grid}.achievement.locked .icon{background:var(--gray-soft);color:#a3a6b8}.achievement.locked b{color:var(--muted)}.achievement p{color:var(--muted);margin:0;font-size:.85rem}.achievement{--tier-soft:var(--mint-soft);--tier:var(--success-dark)}.achievement.tier-2{--tier-soft:var(--lavender-soft);--tier:var(--primary)}.achievement.tier-3{--tier-soft:var(--yellow-soft);--tier:var(--reward-dark)}.achievement.tier-4{--tier-soft:var(--pink-soft);--tier:#e0457b}.achievement .icon{background:var(--tier-soft);color:var(--tier)}.achievement.tier-4:not(.locked) .icon{background:linear-gradient(135deg, var(--pink-soft), var(--lavender-soft), var(--yellow-soft));box-shadow:0 0 0 3px var(--pink-soft)}.tier-chip{background:var(--tier-soft);color:var(--tier);border-radius:999px;margin-top:auto;padding:2px 10px;font-size:.75rem;font-weight:700}.achievement.locked .tier-chip{background:var(--gray-soft);color:#a3a6b8}.section-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.song-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;display:grid}.song-card{border-radius:var(--radius);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);transition:box-shadow var(--normal);flex-direction:column;gap:10px;padding:14px;display:flex}.song-card:hover{box-shadow:var(--shadow-lg)}.c-pink{--soft:var(--pink-soft);--accent:#e0457b}.c-blue{--soft:var(--sky-soft);--accent:var(--sky-dark)}.c-yellow{--soft:var(--yellow-soft);--accent:var(--reward-dark)}.c-green{--soft:var(--mint-soft);--accent:var(--success-dark)}.c-purple{--soft:var(--lavender-soft);--accent:var(--primary)}.c-orange{--soft:var(--peach-soft);--accent:#e2621b}.song-link{color:inherit;border-radius:var(--radius-sm);text-decoration:none}.thumb{background:var(--soft);border-radius:18px;padding:8px;position:relative}.thumb img{aspect-ratio:16/9;object-fit:cover;background:var(--card);border-radius:12px;width:100%;display:block}.play-badge{background:var(--accent);color:#fff;width:50px;height:50px;box-shadow:var(--shadow);border:3px solid var(--card);transition:transform var(--normal) var(--ease-bounce);border-radius:50%;place-items:center;font-size:1.2rem;display:grid;position:absolute;bottom:-16px;right:16px}.song-card:hover .play-badge{transform:scale(1.15)rotate(-8deg)}.done-badge{background:var(--reward);color:#fff;box-shadow:var(--shadow-sm);border-radius:999px;padding:2px 12px;font-size:.9rem;font-weight:700;position:absolute;top:14px;left:14px}.song-link h3{margin:14px 0 0;font-size:1.2rem}.song-score{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.mini-bar{background:var(--soft);border-radius:999px;height:10px;overflow:hidden}.mini-bar div{background:var(--accent);border-radius:999px;height:100%;transition:width .6s ease-out}.teacher-link{align-self:flex-start}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{color:#fff;background:var(--muted);border-radius:999px;padding:2px 12px;font-size:.85rem;font-weight:700;display:inline-block}.tense-SimplePresent{background:var(--t-SimplePresent)}.tense-SimplePast{background:var(--t-SimplePast)}.tense-PresentPerfect{background:var(--t-PresentPerfect)}.tense-PresentContinuous{background:var(--t-PresentContinuous)}.tense-PastContinuous{background:var(--t-PastContinuous)}.tense-SimpleFuture{background:var(--t-SimpleFuture)}.stars{gap:2px;font-size:1.5rem;display:inline-flex}.stars span{display:inline-flex}.stars svg{width:1em;height:1em}.stars.big{gap:6px;font-size:3.6rem}.stars .on{color:var(--reward);filter:drop-shadow(0 2px 0 var(--reward-dark))}.stars .off{color:var(--border)}.player-head{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.player-head h1{flex:1;font-size:1.8rem}.back{min-height:44px;color:var(--text);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:background var(--fast);border-radius:999px;align-items:center;padding:4px 16px;font-weight:700;text-decoration:none;display:inline-flex}.back:hover{background:var(--primary-soft)}.score-pill{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:999px;padding:6px 16px;font-size:1.1rem;font-weight:700;display:inline-block}.streak{background:linear-gradient(90deg, var(--reward), #ff7a45);color:#fff;box-shadow:var(--shadow-sm);border-radius:999px;padding:6px 16px;font-weight:700;display:inline-block}.song-progress{align-items:center;gap:12px;margin-top:14px;display:flex}.song-progress .xp-bar{background:var(--primary-soft);flex:1;height:14px}.song-progress .xp-bar>div{background:linear-gradient(90deg, var(--sky), var(--primary));transition:width .4s ease-out}.player-layout{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start;gap:22px;margin-top:16px;display:grid}.player-main{flex-direction:column;align-items:stretch;gap:16px;display:flex}.video-wrap{aspect-ratio:16/9;border-radius:var(--radius);width:100%;box-shadow:var(--shadow-lg);border:6px solid var(--card);background:#1f2544;position:relative;overflow:hidden}.video-wrap iframe{width:100%;height:100%;display:block}.video-shield{z-index:1;cursor:pointer;position:absolute;inset:0}.video-shield.covered{background:#1f2544 50%/cover no-repeat}.video-wrap.clean{--yt-crop:60px}.video-wrap.clean iframe{left:0;top:calc(-1 * var(--yt-crop));height:calc(100% + 2 * var(--yt-crop));position:absolute}.timeline{align-items:center;gap:12px;display:flex}.timeline input[type=range]{min-width:0;accent-color:var(--primary);flex:1;height:24px}.timeline .small{font-variant-numeric:tabular-nums;white-space:nowrap}.no-points{margin:8px 0 0}.points-pop{color:var(--reward);justify-content:center;align-items:center;gap:6px;margin:0;font-size:1.4rem;font-weight:800;display:flex}.start-btn{align-self:center}.lyrics{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);--lyrics-h:72vh;max-height:var(--lyrics-h);margin:0;padding:12px;list-style:none;position:relative;overflow-y:auto}.lyrics:before,.lyrics:after{content:"";height:calc(var(--lyrics-h) / 2 - 40px);display:block}.lyrics li{border-radius:var(--radius-sm);color:var(--muted);transition:background var(--normal), color var(--normal), transform var(--normal);padding:10px 14px;font-size:1.15rem}.lyrics li.past{color:var(--text);opacity:.55}.lyrics li.active{background:var(--yellow-soft);color:var(--text);font-size:1.3rem;font-weight:700;transform:scale(1.02)}.slot{border-bottom:3px dashed var(--primary);text-align:center;min-width:3.5em;padding:0 8px;font-weight:700;display:inline-block}.slot.asking{background:var(--primary-soft);border-radius:8px 8px 0 0;animation:.9s ease-in-out infinite alternate pulse}.slot.correct{color:var(--success-dark);border-bottom:3px solid var(--success);background:var(--success-soft);border-radius:8px 8px 0 0}.slot.wrong{color:var(--success-dark);border-bottom:3px solid var(--danger)}.slot.wrong s{color:var(--danger-dark);font-weight:600}@keyframes pulse{to{background:var(--lavender-soft);transform:scale(1.06)}}.panel{border-radius:var(--radius);background:var(--card);border:1px solid var(--border);width:100%;box-shadow:var(--shadow-lg);flex-direction:column;align-items:flex-start;gap:12px;padding:22px;display:flex}.panel.question{border-top:6px solid var(--primary)}.panel.good{background:var(--success-soft);border-color:var(--success-soft)}.panel.bad{background:var(--peach-soft);border-color:var(--peach-soft)}.panel.summary{text-align:center;background:linear-gradient(160deg, var(--card), var(--yellow-soft));align-items:center}.panel p{margin:0}.question-head{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.question-title{font-size:1.15rem;font-weight:700}.q-line{margin:0;font-size:1.5rem;font-weight:700}.hint{color:var(--muted);background:var(--sky-soft);border-radius:12px;margin:0;padding:6px 12px;font-weight:500}.answer-pop{color:var(--success-dark);font-size:1.3rem}.summary-title{margin:0;font-size:2.2rem;font-weight:700}.summary-score{margin:0;font-size:1.3rem}.options{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;display:grid}.option{color:#fff;min-height:72px;box-shadow:0 5px 0 var(--opt-dark);background:var(--opt);text-shadow:0 1px #00000026;border:none;border-radius:20px;justify-content:center;align-items:center;gap:10px;padding:12px;font-size:1.5rem;font-weight:700;display:flex}.option:disabled{opacity:.6;cursor:wait}.option .shape{opacity:.85}.opt-red{--opt:#f0627a;--opt-dark:#c63c55}.opt-blue{--opt:var(--sky);--opt-dark:var(--sky-dark)}.opt-yellow{--opt:#f5a524;--opt-dark:var(--reward-dark)}.opt-green{--opt:var(--success);--opt-dark:var(--success-dark)}.panel .mascot-face{width:60px;height:60px}.sync-list li{color:var(--text);flex-direction:column;gap:4px;font-size:1.05rem;display:flex}.sync-list li.active{font-size:1.1rem;transform:none}.sync-controls{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.sync-controls code{min-width:4.5em;font-weight:700}.player-page>.muted{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px}.tense-list{flex-direction:column;gap:18px;display:flex}.tense-row{grid-template-columns:auto minmax(0,1.4fr) minmax(0,2fr) auto;align-items:center;gap:14px;display:grid}.tense-badge{border-radius:50%;place-items:center;width:48px;height:48px;display:grid}:is(.tense-badge,.rank).gold{background:var(--yellow-soft);color:var(--reward-dark)}:is(.tense-badge,.rank).silver{background:var(--gray-soft);color:var(--muted)}:is(.tense-badge,.rank).bronze{background:var(--peach-soft);color:#b5592a}.bar{background:var(--primary-soft);border-radius:999px;height:18px;overflow:hidden}.bar-fill{border-radius:999px;height:100%}.song-table{border-collapse:collapse;width:100%}.song-table td{border-bottom:1px dashed var(--border);padding:10px 6px}.song-table tr:last-child td{border-bottom:none}@media (prefers-reduced-motion:reduce){.floating{display:none}.slot.asking,.logo-note,.loading-icon,.title-icon.wave{animation:none}*,:before,:after{transition-duration:1ms!important}}@media (width<=760px){h1{font-size:1.7rem}.hero,.player-layout{grid-template-columns:minmax(0,1fr)}.lyrics{--lyrics-h:50vh}.tense-row{grid-template-columns:auto minmax(0,1fr)}.tense-row .bar,.tense-row>.small{grid-column:1/-1}.player-head h1{flex-basis:100%;order:3;font-size:1.5rem}.q-line{font-size:1.25rem}.option{min-height:60px;font-size:1.25rem}.bubble{max-width:230px}.topbar{gap:8px;padding:8px 12px}.topbar .user{margin-left:auto}.top-search{flex-basis:100%;order:3;max-width:none}.avatar-chip>span{display:none}.stat-tiles{gap:8px}.stat b{font-size:1.5rem}.next-up img{width:80px}}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff;box-shadow:0 3px 0 var(--danger-dark)}.login-role{color:var(--primary-dark);background:var(--primary-soft);border-radius:999px;justify-content:center;align-items:center;gap:8px;margin:0;padding:8px;font-weight:700;display:flex}.login-card a{align-items:center;gap:4px;display:inline-flex}.page-head p{margin:4px 0 0}.add-student input,.add-student select,.add-song input,.student-edit input,.student-edit select,.new-class input,.class-actions input{font:inherit;color:var(--text);border:2px solid var(--border);background:var(--bg);min-height:44px;transition:border-color var(--fast), box-shadow var(--fast);border-radius:14px;padding:8px 14px}:is(.add-student,.add-song,.student-edit,.new-class,.class-actions) :is(input,select):focus{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 4px var(--primary-soft);outline:none}.class-bar{flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 12px;display:flex}.filter-chip{border:1px solid var(--border);background:var(--card);min-height:40px;color:var(--muted);transition:background var(--fast), color var(--fast);border-radius:999px;align-items:center;gap:6px;padding:6px 16px;font-weight:600;display:inline-flex}.filter-chip b{background:var(--primary-soft);color:var(--primary-dark);border-radius:999px;padding:0 8px;font-size:.85rem}.filter-chip:hover{background:var(--primary-soft);color:var(--text)}.filter-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}.filter-chip.active b{color:#fff;background:#ffffff40}.count-badge{color:#fff;background:#e0457b;border-radius:999px;place-items:center;min-width:22px;height:22px;margin-left:4px;padding:0 6px;font-size:.75rem;font-weight:800;display:inline-grid}.friend-actions{flex-wrap:wrap;align-items:center;gap:6px;display:inline-flex}.friend-actions .small{align-items:center;gap:4px;display:inline-flex}.friend-ok{color:var(--success-dark);font-weight:700}.friend-search{gap:10px;margin-top:16px;padding:12px;display:flex}.friend-search input{border:2px solid var(--border);min-width:0;min-height:44px;font:inherit;border-radius:999px;flex:1;padding:8px 14px}.friend-search input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft);outline:none}.friend-list li{flex-wrap:wrap}.ranking .streak-points{color:#e0457b}.profile-head .friend-actions{margin-top:8px}.tense-dot{width:12px;height:12px;box-shadow:0 0 0 2px var(--card);border-radius:50%;flex:none}.pagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:24px;display:flex}.pagination .filter-chip{justify-content:center;min-width:44px;min-height:44px}.pagination .filter-chip:disabled{opacity:.4;cursor:default}.pagination .small{text-align:center;flex-basis:100%}.new-class{flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto;display:inline-flex}.new-class input{width:180px;min-height:40px}.class-actions,.row-form{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.class-actions{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:12px;padding:10px 14px}.students-layout{grid-template-columns:minmax(260px,1fr) minmax(0,2.4fr);align-items:start;gap:20px;display:grid}.add-student{flex-direction:column;gap:12px;display:flex;position:sticky;top:84px}.add-student h2{margin:0}.add-song{margin-bottom:16px}.add-song summary{cursor:pointer;align-items:center;gap:8px;font-size:1.2rem;font-weight:700;display:flex}.add-song form{flex-direction:column;gap:12px;max-width:560px;margin-top:12px;display:flex}.add-student label,.add-song label,.student-edit label{flex-direction:column;gap:4px;font-weight:600;display:flex}.add-student code,.student-row code{background:var(--primary-soft);border-radius:6px;justify-self:start;padding:0 6px}.student-list{padding:8px}.student-row{border-radius:var(--radius-sm);grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1.2fr) 90px 190px;align-items:center;gap:12px;padding:10px 12px;display:grid}.student-row:not(.head):hover{background:var(--bg)}.student-row.head{color:var(--muted);font-size:.85rem;font-weight:700}.student-row.editing{background:var(--primary-soft)}.student-row .name{align-items:center;gap:10px;font-weight:600;display:flex}.small-avatar{flex-shrink:0;width:32px;height:32px;font-size:.9rem}.class-tag{background:var(--sky-soft);color:var(--sky-dark);border-radius:999px;padding:2px 10px;font-size:.9rem;font-weight:600}.row-actions{justify-content:flex-end;gap:6px;display:flex}.student-edit{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:10px;display:grid}.delete-warn,.student-row>.error{grid-column:1/-1;margin:0}.delete-warn{color:var(--danger-dark)}@media (width<=900px){.students-layout{grid-template-columns:minmax(0,1fr)}.add-student{position:static}.new-class{margin-left:0}.student-row.head{display:none}.student-row{border-bottom:1px dashed var(--border);border-radius:0;grid-template-columns:minmax(0,1fr) auto}.student-row .name{grid-column:1/-1}.student-edit{grid-template-columns:minmax(0,1fr)}}.profile-head{align-items:center;gap:18px;display:flex}.profile-back{font:inherit;cursor:pointer;margin-bottom:14px;font-weight:700}.profile-head h1{margin:0}.profile-head p{align-items:center;gap:6px;margin:4px 0 0;display:flex}.password-form{max-width:420px;margin:12px 0 4px;position:static}.password-toggle{margin-top:20px}.password-toggle .flip{transform:rotate(180deg)}.password-toggle svg:last-child{transition:transform var(--normal)}.ranking{flex-direction:column;gap:4px;margin:16px 0 0;padding:8px;list-style:none;display:flex}.ranking li{border-radius:var(--radius-sm);align-items:center;gap:12px;padding:10px 12px;display:flex}.ranking li.me{background:var(--primary-soft)}.ranking .rank{width:40px;height:40px;color:var(--muted);border-radius:50%;flex-shrink:0;place-items:center;font-weight:800;display:grid}.ranking .name{overflow-wrap:anywhere;flex:1;min-width:0}.ranking .points{color:var(--reward-dark);white-space:nowrap;align-items:center;gap:4px;font-weight:800;display:inline-flex}.shelf{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;display:grid}.shelf-card{border-radius:var(--radius);background:var(--soft);height:100%;color:var(--text);box-shadow:var(--shadow);transition:box-shadow var(--fast);flex-direction:column;gap:8px;padding:12px;text-decoration:none;display:flex}.shelf-card:hover{box-shadow:var(--shadow-lg)}.shelf-thumb{display:block;position:relative}.shelf-thumb img{aspect-ratio:16/9;object-fit:cover;border-radius:12px;width:100%;display:block}.stamp{background:var(--reward);color:#fff;box-shadow:var(--shadow-sm);border-radius:999px;align-items:center;gap:4px;padding:4px 10px;font-size:.85rem;font-weight:800;display:inline-flex;position:absolute;top:8px;right:8px}.spin-disc{background:var(--card);width:36px;height:36px;color:var(--primary);box-shadow:var(--shadow-sm);border-radius:50%;place-items:center;display:grid;position:absolute;bottom:8px;right:8px}.shelf-meta{justify-content:space-between;align-items:center;gap:8px;margin-top:auto;display:flex}.shelf-meta .points{color:var(--reward-dark);align-items:center;gap:4px;font-weight:800;display:inline-flex}.shelf-card .mini-bar{background:var(--card)}.shelf-card .mini-bar>span{background:var(--accent);border-radius:999px;height:100%;display:block}.card.empty .mascot{justify-content:center}.settings-link{background:var(--primary-soft);width:48px;height:48px;color:var(--primary-dark);box-shadow:var(--shadow-sm);transition:transform var(--normal) var(--ease-bounce), background var(--fast);border-radius:50%;align-self:flex-start;place-items:center;margin-left:auto;display:grid}.settings-link:hover{background:var(--lavender-soft);transform:rotate(60deg)scale(1.08)}img.avatar{object-fit:cover;background:var(--card);border:2px solid var(--card);box-shadow:var(--shadow-sm)}.avatar.big{flex-shrink:0;width:104px;height:104px;font-size:2.6rem}.ranking .avatar{width:48px;height:48px;font-size:1.2rem}.avatar.huge{border:6px solid var(--card);width:160px;height:160px;box-shadow:var(--shadow-lg);font-size:4rem}.avatar-zoom{cursor:zoom-in;transition:transform var(--normal) var(--ease-bounce);background:0 0;border:0;border-radius:50%;flex-shrink:0;padding:0}.avatar-zoom:hover{transform:scale(1.12)rotate(-4deg)}.avatar-zoom:focus-visible{outline:3px solid var(--primary);outline-offset:3px}.avatar-zoom .avatar{display:block}.photo-dialog{background:0 0;border:0;max-width:calc(100vw - 32px);padding:0;overflow:visible}.confirm-dialog{background:0 0;border:0;width:min(400px,100vw - 32px);padding:0;overflow:visible}.confirm-dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#1f25448c}.confirm-dialog .card{text-align:center;flex-direction:column;align-items:center;gap:8px;padding:24px;display:flex}.confirm-dialog h2{margin:4px 0 0}.confirm-dialog p{margin:0}.confirm-icon{background:var(--primary-soft);width:64px;height:64px;color:var(--primary);border-radius:50%;place-items:center;display:grid}.confirm-icon.danger{background:var(--pink-soft);color:var(--danger)}.confirm-actions{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin-top:12px;display:flex}.confirm-actions .btn{flex:1}.photo-dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#1f25448c}.photo-dialog figure{text-align:center;background:linear-gradient(160deg, var(--yellow-soft), var(--pink-soft) 50%, var(--lavender-soft));box-shadow:var(--shadow-lg);border-radius:32px;margin:0;padding:18px 18px 20px;position:relative}.photo-dialog img{aspect-ratio:1;object-fit:cover;border:6px solid var(--card);background:var(--card);border-radius:24px;width:min(420px,100vw - 68px);display:block}.photo-dialog figcaption{flex-direction:column;align-items:center;gap:2px;margin-top:12px;font-size:1.4rem;display:flex}.photo-close{border:3px solid var(--card);background:var(--danger);color:#fff;width:48px;height:48px;box-shadow:var(--shadow);transition:transform var(--normal) var(--ease-bounce);border-radius:50%;place-items:center;display:grid;position:absolute;top:-14px;right:-14px}.photo-close:hover{transform:rotate(90deg)scale(1.08)}.mood-happy{--mood:var(--reward-dark);--mood-soft:var(--yellow-soft)}.mood-sad{--mood:var(--sky-dark);--mood-soft:var(--sky-soft)}.mood-excited{--mood:#e2621b;--mood-soft:var(--peach-soft)}.mood-angry{--mood:var(--danger-dark);--mood-soft:var(--danger-soft)}.mood-bored{--mood:var(--muted);--mood-soft:var(--gray-soft)}.mood-love{--mood:#e0457b;--mood-soft:var(--pink-soft)}.mood-badge{background:var(--mood-soft,var(--primary-soft));color:var(--mood,var(--primary-dark));border-radius:999px;align-items:center;gap:6px;margin-top:6px;padding:4px 14px;font-size:.95rem;font-weight:700;display:inline-flex}.profile-editor{grid-template-columns:300px minmax(0,1fr);gap:28px;margin-top:8px;padding:24px;display:grid}.id-card{border-radius:var(--radius);background:linear-gradient(180deg, var(--lavender-soft), var(--pink-soft));text-align:center;flex-direction:column;align-self:start;align-items:center;gap:4px;padding:0 16px 24px;display:flex;position:sticky;top:84px;overflow:hidden}.id-banner{color:#fff;background:linear-gradient(120deg, var(--primary), #e0457b 60%, var(--reward));justify-content:space-around;align-self:stretch;align-items:center;height:110px;margin:0 -16px -80px;display:flex}.id-photo{border-radius:50%;display:block}.id-name{overflow-wrap:anywhere;margin-top:10px;font-size:1.5rem}.editor-fields{flex-direction:column;gap:22px;min-width:0;display:flex;container-type:inline-size}.editor-fields h2{margin:0}.name-field{flex-direction:column;gap:6px;font-weight:700;display:flex}.name-field input{font:inherit;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--bg);min-height:52px;padding:8px 18px;font-size:1.2rem}.name-field input:focus{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 4px var(--primary-soft);outline:none}.detail-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}@container (width<=520px){.detail-fields{grid-template-columns:minmax(0,1fr)}}.req{color:#e0457b;margin-left:2px}.detail-fields label{flex-direction:column;gap:6px;font-weight:700;display:flex}.detail-fields input,.detail-fields select{font:inherit;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--bg);min-height:48px;padding:8px 14px}.detail-fields :is(input,select):focus{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 4px var(--primary-soft);outline:none}.birth-picker{border:0;flex-direction:column;grid-column:1/-1;gap:10px;min-width:0;margin:0;padding:0;display:flex}.birth-picker legend{margin-bottom:6px;padding:0;font-weight:700}.birth-pills{grid-template-columns:1fr 1.5fr 1fr;gap:10px;display:grid;position:relative}.fun-select{--pill:var(--primary-soft);--pill-ink:var(--primary-dark);min-width:0}.fun-select.pill-year{--pill:var(--sky-soft);--pill-ink:var(--sky-dark)}.fun-select.pill-day{--pill:var(--pink-soft);--pill-ink:#c2185b}:root[data-theme=dark] .fun-select.pill-day{--pill-ink:#ff8fc0}.fun-trigger{text-align:left;width:100%;min-height:60px;font:inherit;cursor:pointer;border:2px solid var(--pill);background:var(--pill);color:var(--text);box-shadow:0 4px 0 color-mix(in srgb, var(--pill-ink) 30%, transparent);border-radius:999px;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px;padding:6px 12px 6px 16px;display:grid}.fun-trigger small{color:var(--pill-ink);grid-column:1;font-size:.75rem;font-weight:700}.fun-trigger b{white-space:nowrap;text-overflow:ellipsis;grid-column:1;font-size:1.05rem;overflow:hidden}.fun-trigger svg{color:var(--pill-ink);transition:transform var(--normal);grid-area:1/2/3}.fun-trigger[aria-expanded=true]{border-color:var(--pill-ink)}.fun-trigger[aria-expanded=true] svg{transform:rotate(180deg)}.fun-menu{z-index:20;border-radius:var(--radius);background:var(--card);border:3px solid var(--pill);max-height:260px;box-shadow:var(--shadow);transform-origin:top;gap:6px;padding:12px;display:grid;position:absolute;top:calc(100% + 10px);left:0;right:0;overflow-y:auto}.fun-menu [role=option]{font:inherit;cursor:pointer;border-radius:var(--radius-sm);background:var(--pill);min-height:44px;color:var(--text);border:2px solid #0000;padding:6px 4px;font-weight:700}.fun-menu [role=option][aria-selected=true]{background:var(--pill-ink);color:#fff}.fun-menu [role=option]:focus-visible{outline:3px solid var(--pill-ink);outline-offset:1px}.picker{border:0;gap:12px;margin:0;padding:0;display:grid}.picker:has(.avatar-option){grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.picker:has(.mood-option){grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.picker legend{margin-bottom:10px;padding:0;font-size:1.1rem;font-weight:700}.avatar-option,.mood-option{font:inherit;border-radius:var(--radius-sm);background:var(--bg);color:var(--text);text-transform:capitalize;box-shadow:var(--shadow-sm);border:3px solid #0000;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:12px 8px;font-weight:600;display:flex;position:relative}.avatar-option img,.avatar-none{object-fit:cover;background:var(--card);border-radius:50%;width:76px;height:76px}.avatar-none{color:var(--muted);border:2px dashed var(--border);place-items:center;display:grid}.avatar-option.active{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 4px var(--primary-soft)}.picked{background:var(--primary);color:#fff;width:26px;height:26px;box-shadow:var(--shadow-sm);border-radius:50%;place-items:center;display:grid;position:absolute;top:6px;right:6px}.mood-option{text-transform:none;background:var(--mood-soft,var(--bg));min-height:96px;color:var(--mood,var(--muted))}.mood-option.active{border-color:var(--mood,var(--primary));box-shadow:0 0 0 4px var(--mood-soft,var(--primary-soft));font-weight:800}.editor-actions{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.editor-actions p{margin:0}@media (width<=760px){.profile-editor{grid-template-columns:minmax(0,1fr);padding:16px}.id-card{position:relative;top:0}.avatar.huge{width:128px;height:128px}.picker:has(.avatar-option){grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}.avatar-option img,.avatar-none{width:60px;height:60px}}.announce-form{flex-direction:column;gap:14px;margin-top:16px;display:flex}.announce-form label{flex-direction:column;gap:6px;font-weight:700;display:flex}.announce-form :is(input,textarea){font:inherit;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--bg);color:var(--text);resize:vertical;padding:10px 14px}.announce-form :is(input,textarea):focus{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 4px var(--primary-soft);outline:none}.audience{border:0;flex-wrap:wrap;gap:8px;margin:0;padding:0;display:flex}.audience legend{margin-bottom:8px;padding:0;font-weight:700}.announce-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.announcements{flex-direction:column;gap:16px;margin-top:20px;display:flex}.announcement{border-left:6px solid var(--sky)}.announcement.new{border-left-color:var(--reward)}.announcement header{align-items:center;gap:12px;display:flex}.announcement h2{overflow-wrap:anywhere;margin:0;font-size:1.25rem}.announcement header p{margin:0}.announce-icon{background:var(--sky-soft);width:44px;height:44px;color:var(--sky-dark);border-radius:50%;flex:none;place-items:center;display:grid;transform:rotate(-12deg)}.announcement.new .announce-icon{background:var(--yellow-soft);color:var(--reward-dark);animation:2.4s ease-in-out infinite wiggle}.new-badge{vertical-align:middle;background:var(--reward);color:#fff;border-radius:999px;margin-left:6px;padding:0 10px;font-size:.8rem;display:inline-block}.announce-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0;font-size:1.05rem}.announce-meta{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.audience-tag{background:var(--primary-soft);color:var(--primary-dark);border-radius:999px;align-items:center;gap:4px;padding:2px 12px;font-size:.85rem;font-weight:700;display:inline-flex}.announce-tools{gap:6px;margin-left:auto;display:inline-flex}.viewer-list{margin:12px 0 0;padding:0;list-style:none}.viewer-list li{flex-wrap:wrap}.viewer-list .seen{color:var(--success-dark);align-items:center;gap:4px;font-size:.9rem;font-weight:700;display:inline-flex}.viewer-list .not-seen{align-items:center;gap:4px;display:inline-flex}.top-search{border:2px solid var(--border);background:var(--bg);max-width:460px;min-height:44px;color:var(--muted);transition:border-color var(--fast), box-shadow var(--fast);border-radius:999px;flex:1;align-items:center;gap:8px;padding:0 16px;display:flex}.top-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}.top-search input{min-width:0;font:inherit;color:var(--text);background:0 0;border:0;outline:none;flex:1}.bell{width:44px;height:44px;color:var(--text);border-radius:50%;flex:none;place-items:center;display:grid;position:relative}.bell:hover,.bell.active{background:var(--primary-soft)}.bell .count-badge{margin:0;position:absolute;top:-2px;right:-4px}.sidebar{z-index:1;flex-direction:column;align-self:start;gap:16px;height:calc(100vh - 66px);padding:24px 0 16px;display:flex;position:sticky;top:66px}.sidebar nav{flex-direction:column;gap:4px;display:flex}.sidebar nav a{min-height:48px;color:var(--text);transition:background var(--fast), color var(--fast);border-radius:18px;align-items:center;gap:12px;padding:8px 16px;font-weight:600;text-decoration:none;display:flex}.sidebar nav a svg{color:var(--primary)}.sidebar nav a:hover{background:var(--primary-soft)}.sidebar nav a.active{background:var(--lavender-soft);color:var(--primary-dark);font-weight:700}.sidebar nav .count-badge{margin-left:auto}.sidebar-mascot{border-radius:var(--radius);text-align:center;background:linear-gradient(180deg, transparent, var(--sky-soft) 40%, var(--lavender-soft));margin-top:auto;padding:16px 12px 0;overflow:hidden}.sidebar-mascot p{color:var(--primary-dark);margin:0 0 4px;font-weight:700;transform:rotate(-6deg)}.sidebar-mascot .mascot-art{width:150px;margin:0 auto;animation:2.4s ease-in-out infinite alternate bob}@media (width<=900px){.app-shell{grid-template-columns:minmax(0,1fr);gap:0}.sidebar{height:auto;padding:12px 0 0;position:static}.sidebar nav{scrollbar-width:none;flex-direction:row;overflow-x:auto}.sidebar nav a{border-radius:999px;flex:none;min-height:44px;padding:6px 14px}.sidebar nav .count-badge{margin-left:4px}.sidebar-mascot{display:none}}.dashboard{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:20px;display:grid}.dash-main,.dash-side{flex-direction:column;gap:20px;min-width:0;display:flex}.panel-card header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;display:flex}.panel-card h2{align-items:center;gap:8px;margin:0;font-size:1.2rem;display:flex}.panel-card .more{white-space:nowrap;align-items:center;text-decoration:none;display:inline-flex}.c-star{color:var(--reward)}.c-flame{color:#ff7a45}.dash-hero{background:linear-gradient(120deg, var(--sky-soft), var(--lavender-soft) 60%, var(--pink-soft));grid-template-columns:minmax(0,1fr) 130px minmax(190px,220px);align-items:center;gap:16px;display:grid;overflow:hidden}.dash-hero h1{overflow-wrap:anywhere;align-items:center;gap:10px;display:flex}.dash-hero .sun{color:var(--reward)}.dash-hero p{align-items:center;gap:6px;margin:4px 0 14px;font-size:1.1rem;display:flex}.dash-hero-art{width:130px;animation:2s ease-in-out infinite alternate bob}.dash-stats{flex-wrap:wrap;gap:10px;display:flex}.dash-stat,.me-stats>span{background:var(--card);box-shadow:var(--shadow-sm);border-radius:18px;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:8px;padding:10px 14px;display:grid}:is(.dash-stat,.me-stats>span) svg{grid-row:span 2}:is(.dash-stat,.me-stats>span) b{font-size:1.25rem;line-height:1.1}:is(.dash-stat,.me-stats>span) small{color:var(--muted);font-size:.8rem}.dash-stat.wide{flex:1;min-width:170px;display:block}.level-strip{flex-direction:column;gap:6px;display:flex}.level-strip>span{white-space:nowrap;justify-content:space-between;align-items:baseline;gap:8px;display:flex}.level-strip .xp-bar{height:12px}.dash-next{color:#fff;background:linear-gradient(140deg, var(--primary), #9b7bff);box-shadow:var(--shadow);transition:transform var(--normal) var(--ease-bounce);border-radius:20px;flex-direction:column;gap:8px;padding:14px;text-decoration:none;display:flex;position:relative}.dash-next:hover{transform:translateY(-3px)}.dash-next>span:not(.go){align-items:center;gap:10px;padding-right:30px;display:flex}.dash-next img{aspect-ratio:1;object-fit:cover;border-radius:10px;width:64px}.dash-next b{line-height:1.2;display:block}.dash-next small{opacity:.9}.dash-next .go{background:#ffffff40;border-radius:50%;place-items:center;width:30px;height:30px;display:grid;position:absolute;bottom:12px;right:12px}.dashboard .mini-bar{background:var(--gray-soft);height:8px;display:block}:where(.mini-bar)>span{background:var(--primary);border-radius:999px;height:100%;display:block}.latest-songs{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;display:grid}.latest-song{border:1px solid var(--border);color:var(--text);transition:transform var(--normal) var(--ease-bounce), box-shadow var(--normal);border-radius:20px;flex-direction:column;gap:4px;padding:10px;text-decoration:none;display:flex}.latest-song:hover{box-shadow:var(--shadow);transform:translateY(-4px)}.latest-song img{aspect-ratio:16/9;object-fit:cover;border-radius:14px;width:100%;margin-bottom:4px}.latest-song b{line-height:1.25}.song-status{color:var(--muted);justify-content:space-between;align-items:center;margin-top:auto;padding-top:6px;font-size:.82rem;font-weight:700;display:flex}.song-status small{font-weight:600}.song-status.done{color:var(--success-dark)}.song-status.playing{color:var(--primary-dark)}.song-status.done+.mini-bar>span{background:var(--success)}.dash-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.trivia{background:var(--lavender-soft);border-radius:18px;align-items:center;gap:12px;padding:16px;display:flex}.trivia p{flex:1;margin:0}.trivia p b{color:var(--primary-dark);font-size:1.1rem;display:block}.trivia .mascot-art{width:84px}.suggestion{border:1px solid var(--border);border-radius:18px;align-items:center;gap:14px;padding:12px;display:flex}.suggestion img{aspect-ratio:4/3;object-fit:cover;border-radius:14px;flex:none;width:130px}.suggestion>div{flex-direction:column;align-items:flex-start;gap:6px;min-width:0;display:flex}.suggestion .chips{align-self:stretch}.suggestion .chip{font-size:.75rem}.tense-tiles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;display:grid}.tense-tile{border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:6px;padding:12px;display:flex}.tense-tile small{font-weight:600}.tense-tile b{font-size:1.1rem}.tense-tile.cheer{background:var(--yellow-soft);color:var(--text);border-color:#0000;flex-direction:row;grid-column:span 2;align-items:center;text-decoration:none}.tense-tile.cheer .mascot-art{flex:none;width:56px}.me-card{flex-direction:column;gap:14px;display:flex}.me-top{align-items:center;gap:14px;display:flex}.me-top .avatar.big{width:88px;height:88px}.me-top>div{flex-direction:column;align-items:flex-start;min-width:0;display:flex}.me-name{overflow-wrap:anywhere;font-size:1.35rem;line-height:1.2}.me-top .mood-badge{margin:4px 0}.me-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.me-stats>span{box-shadow:none;border:1px solid var(--border)}.me-level{color:#fff;background:linear-gradient(120deg, var(--primary), #9b7bff);border-radius:18px;padding:12px 16px}.me-level .xp-bar{background:#ffffff4d}.me-level .xp-bar>div{background:#fff}.friend-faces{flex-wrap:wrap;gap:8px;display:flex}.friend-faces .avatar{width:46px;height:46px}.more-faces{background:var(--gray-soft);color:var(--muted);font-size:.9rem}.row-link{color:var(--text);justify-content:space-between;align-items:center;gap:8px;margin-top:12px;font-weight:500;text-decoration:none;display:flex}.news{border:1px solid var(--border);color:var(--text);border-radius:16px;align-items:center;gap:12px;padding:12px;text-decoration:none;display:flex}.news:hover{background:var(--bg)}.news>span{flex-direction:column;flex:1;min-width:0;display:flex}.news b{overflow-wrap:anywhere}.news-icon{color:var(--reward);transform:rotate(-12deg)}.quick{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.quick a{text-align:center;color:var(--text);flex-direction:column;align-items:center;gap:6px;font-size:.8rem;text-decoration:none;display:flex}.quick a svg{background:var(--soft);width:52px;height:52px;color:var(--accent);transition:transform var(--normal) var(--ease-bounce);border-radius:16px;padding:14px}.quick a:hover svg{transform:translateY(-3px)rotate(-6deg)}@media (width<=1200px){.dashboard{grid-template-columns:minmax(0,1fr)}.dash-side{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}}@media (width<=760px){.dash-hero{grid-template-columns:minmax(0,1fr) 96px}.dash-hero-art{grid-area:1/2;align-self:start;width:96px}.dash-hero-text{grid-area:1/1}.dash-next{grid-column:1/-1}.dash-pair{grid-template-columns:minmax(0,1fr)}.suggestion{flex-direction:column;align-items:stretch}.suggestion img{aspect-ratio:16/9;width:100%}}.landing main{max-width:1180px}.landing-nav{z-index:10;background:color-mix(in srgb, var(--card) 85%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:1180px;box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:16px;margin:12px auto 0;padding:8px 12px 8px 20px;display:flex;position:sticky;top:12px}.landing-nav nav{gap:4px;display:flex}.landing-nav nav a{color:var(--muted);border-radius:999px;padding:8px 14px;text-decoration:none}.landing-nav nav a:hover{background:var(--primary-soft);color:var(--text)}.landing-nav .user{align-items:center;gap:8px;margin-left:auto;display:flex}.landing section[id]{scroll-margin-top:90px}.center{text-align:center}.row.start{justify-content:flex-start}.sky{color:var(--sky)}.landing h3{margin:6px 0 4px;font-size:1.1rem}.landing p{margin:0}.landing-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:24px;padding:32px 0 16px;display:grid}.landing-hero-text{flex-direction:column;align-items:flex-start;gap:18px;display:flex}.landing-hero h1{color:var(--primary-dark);font-size:clamp(2.4rem,5.5vw,3.9rem);line-height:1.1}.landing-hero-text>p{color:var(--muted);max-width:34em;font-size:1.15rem}.pill{background:var(--primary-soft);color:var(--primary-dark);border-radius:999px;align-items:center;gap:6px;padding:4px 14px;font-size:.85rem;font-weight:700;display:inline-flex}.hero-perks{color:var(--muted);flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;font-size:.92rem;list-style:none;display:flex}.hero-perks li{align-items:center;gap:6px;display:inline-flex}.hero-perks svg{color:var(--primary)}.hero-art{height:440px;position:relative}.hero-art:before{content:"";background:radial-gradient(circle, var(--lavender-soft), transparent 70%);border-radius:50%;position:absolute;inset:10% 5% 0}.hero-art>span{display:block;position:absolute}.art-a{width:42%;top:0;left:28%}.art-b{width:36%;bottom:4%;left:0}.art-c{width:44%;bottom:8%;right:0}.landing-section{padding:40px 0}.landing-title{color:var(--primary-dark);margin:0 0 .3em;font-size:clamp(1.6rem,3.5vw,2.1rem)}.lead{font-size:1.15rem;font-weight:600;margin-bottom:8px!important}.landing-welcome{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:28px;padding:40px 0;display:grid}.pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.pillar{border-radius:var(--radius);background:var(--soft);padding:20px}.icon-bubble{background:var(--accent,var(--primary));color:#fff;border-radius:50%;place-items:center;width:52px;height:52px;display:grid}.pillar p{color:var(--muted);font-size:.92rem}.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:24px 0 0;padding:0;list-style:none;display:grid}.steps li{text-align:center;flex-direction:column;align-items:center;gap:6px;display:flex;position:relative}.steps .icon-bubble{background:var(--primary-soft);width:76px;height:76px;color:var(--primary)}.steps .icon-bubble svg{width:34px;height:34px}.step-no{background:var(--primary);color:#fff;border-radius:50%;place-items:center;width:36px;height:36px;font-size:.9rem;font-weight:700;display:grid;position:absolute;top:-6px;left:calc(50% - 64px)}.steps p{font-size:.92rem}.features{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:24px;display:grid}.feature{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:20px;padding:18px}.icon-dot{background:var(--accent);color:#fff;border-radius:50%;place-items:center;width:42px;height:42px;display:grid}.experience{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:28px;display:grid}.demo-player{border-top:6px solid var(--primary);flex-direction:column;gap:14px;display:flex}.demo-player small{letter-spacing:.05em;font-weight:700}.demo-options{flex-wrap:wrap;gap:8px;display:flex}.demo-options span{background:var(--primary-soft);color:var(--primary-dark);border-radius:999px;padding:8px 20px;font-weight:700}.mini-steps{flex-direction:column;gap:10px;margin:16px 0 0;padding-left:1.4em;display:flex}.mini-steps li::marker{color:var(--primary);font-weight:700}.mini-steps li{display:list-item}.mini-steps b,.mini-steps span{display:block}.audiences{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.audience-card{flex-direction:column;align-items:flex-start;gap:8px;display:flex;overflow:hidden}.audience-card.teacher{background:linear-gradient(160deg, var(--card), var(--sky-soft))}.audience-card>.mascot-art{width:110px;max-height:120px;position:absolute;top:16px;right:16px}.audience-card h3{max-width:calc(100% - 120px);margin:0;font-size:1.3rem}.audience-card ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;margin:4px 0 8px;padding:0;font-size:.92rem;list-style:none;display:grid}.audience-card li{align-items:center;gap:6px;display:flex}.audience-card li svg{color:var(--success)}.landing-cta{color:#fff;background:linear-gradient(120deg, var(--primary), #9b7bff 60%, var(--sky));box-shadow:var(--shadow-lg);border-radius:28px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;margin:40px 0 8px;padding:28px;display:grid}.landing-cta .mascot-art{width:110px}.landing-cta h2{margin:0 0 4px}.landing-cta p{opacity:.92}.btn.on-dark{color:#fff;border-color:#fff9}.btn.on-dark:hover:not(:disabled){background:#ffffff26}.landing-footer{z-index:1;flex-wrap:wrap;align-items:center;gap:8px 20px;max-width:1180px;margin:0 auto;padding:24px 16px 40px;display:flex;position:relative}.landing-footer nav{gap:16px;margin-left:auto;display:flex}@media (width<=900px){.landing-nav{border-radius:var(--radius);margin:12px 12px 0}.landing-nav nav{display:none}.landing-hero,.landing-welcome,.experience,.audiences,.landing-cta{grid-template-columns:minmax(0,1fr)}.hero-art{height:320px}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-cta{text-align:center;justify-items:center}}@media (width<=560px){.landing-nav{flex-wrap:wrap;justify-content:center;gap:8px;padding:8px 10px}.landing-nav .user{margin-left:0}.pillars,.audience-card ul{grid-template-columns:minmax(0,1fr)}.hero-art{height:260px}.audience-card>.mascot-art{width:80px}.audience-card h3{max-width:calc(100% - 90px)}}@media (prefers-reduced-motion:reduce){.sidebar-mascot .mascot-art,.dash-hero-art{animation:none}}