*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0;padding:0}:root{--bg:#100e0a;--panel:#1b1610;--gold:#e8b84a;--gold-bright:#ffe9b0;--saffron:#cf8a44;--sung:#b89a5e;--todo:#6e6650;--todo-cur:#a89a76;--label:#b3a37c;--hair:#e8b84a24;--good:#6fe0a0;--good-dim:#2f7d55;--miss:#c76a5a;--listen:#e8b84a;--repeat:#e0806a;--score:#6fe0a0;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}html,body{overscroll-behavior:none;-webkit-overflow-scrolling:touch}body{background:radial-gradient(120% 75% at 50% 6%,#1d170d 0%,var(--bg) 52%,#0b0906 100%);color:var(--gold-bright);font-family:var(--sans);height:100dvh;overflow:hidden}.loading{height:100dvh;color:var(--label);place-items:center;display:grid}.rotate-hint{display:none}@media (orientation:landscape) and (height<=600px){.rotate-hint{z-index:200;background:radial-gradient(120% 90% at 50% 30%,#1d170d,#0b0906);place-items:center;display:grid;position:fixed;inset:0}.rh-card{text-align:center;color:var(--gold-bright);flex-direction:column;align-items:center;gap:6px;display:flex}.rh-ic{font-size:44px;animation:2s ease-in-out infinite rhSpin}.rh-card b{color:var(--gold)}.rh-sub{color:var(--label);margin-top:2px;font-size:12px}@keyframes rhSpin{0%,60%{transform:rotate(0)}80%{transform:rotate(-90deg)}to{transform:rotate(-90deg)}}.wrap>:not(.rotate-hint){visibility:hidden}}.splash{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2px;height:100dvh;display:flex}.splash .s-mark{filter:drop-shadow(0 0 16px #e8b84a66);width:88px;height:88px;animation:3.2s ease-in-out infinite sp-breathe}@keyframes sp-breathe{0%,to{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.splash .s-name{letter-spacing:1px;color:var(--gold);margin-top:14px;font-size:30px;font-weight:800}.splash .s-motto{font-family:var(--serif);color:var(--gold-bright);letter-spacing:.3px;margin-top:8px;font-size:17px;font-style:italic}.splash .s-gloss{letter-spacing:2px;text-transform:uppercase;color:var(--label);margin-top:3px;font-size:11px}@media (prefers-reduced-motion:reduce){.splash .s-mark{animation:none}}.wrap{flex-direction:column;max-width:1040px;height:100dvh;margin:0 auto;display:flex}.topbar{z-index:40;align-items:center;gap:14px;padding:16px 26px 4px;display:flex;position:relative}.brand{align-items:center;gap:9px;display:flex}.brand .mark{filter:drop-shadow(0 0 7px #e8b84a66);flex:none;width:30px;height:30px}.brand-t{flex-direction:column;line-height:1.05;display:flex}.brand-t b{letter-spacing:.4px;color:var(--gold);font-size:16px;font-style:normal;font-weight:800}.brand-t i{letter-spacing:1.6px;text-transform:uppercase;color:var(--saffron);margin-top:3px;font-size:10.5px;font-style:normal;font-weight:600}.tools{align-items:center;gap:8px;margin-left:auto;display:flex}.tsize{border:1px solid var(--hair);border-radius:100px;display:flex;overflow:hidden}.tsize button{color:#c7b78c;cursor:pointer;font-size:12px;font-weight:700;font-family:var(--sans);background:0 0;border:0;padding:5px 10px}.tsize button:hover{color:var(--gold-bright);background:#e8b84a1f}.tsize button:first-child{border-right:1px solid var(--hair)}.help{border:1px solid var(--hair);color:#c7b78c;cursor:pointer;background:0 0;border-radius:50%;width:30px;height:30px;font-size:14px;font-weight:800}.help:hover{color:var(--gold-bright);border-color:#e8b84a80}.sutta{color:#cdbb8e;font-family:var(--serif);text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-style:italic;overflow:hidden}.brand{flex:none}.picker{z-index:15;width:max-content;max-width:min(88vw,340px);margin:9px auto 0;position:relative}.pick{cursor:pointer;color:#e7d3a3;max-width:100%;font-family:var(--serif);background:linear-gradient(#241c10,#191309);border:1px solid #e8b84a52;border-radius:100px;align-items:center;gap:10px;padding:7px 14px 7px 18px;font-size:14px;font-style:italic;transition:border-color .18s,color .18s,background .18s;display:flex;box-shadow:inset 0 1px #ffe9b012,0 4px 14px #00000059}.pick:hover{color:var(--gold-bright);border-color:#e8b84a99}.pick:focus-visible{border-color:var(--gold);outline:none;box-shadow:0 0 0 2px #e8b84a40}.pick-t{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.pick-ar{color:var(--saffron);flex:none;font-size:10px;font-style:normal;transition:transform .22s}.picker.open .pick{border-color:var(--gold);color:var(--gold-bright);background:linear-gradient(#2c2113,#1d160b)}.picker.open .pick-ar{transform:rotate(180deg)}.pick-veil{z-index:14;position:fixed;inset:0}.pick-menu{z-index:16;background:linear-gradient(#221a10,#150f08);border:1px solid #e8b84a57;border-radius:15px;width:max-content;min-width:100%;max-width:min(90vw,360px);max-height:min(52vh,360px);padding:7px;list-style:none;animation:.16s pickIn;position:absolute;top:calc(100% + 8px);left:50%;overflow-y:auto;transform:translate(-50%);box-shadow:0 18px 46px #0009,0 0 0 1px #00000059}@keyframes pickIn{0%{opacity:0;transform:translate(-50%)translateY(-7px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.pick-menu::-webkit-scrollbar{width:9px}.pick-menu::-webkit-scrollbar-thumb{background:#e8b84a38 padding-box padding-box;border:2px solid #0000;border-radius:6px}.pick-menu li{cursor:pointer;font-family:var(--serif);color:#cdba8a;white-space:nowrap;border-radius:10px;align-items:center;gap:10px;padding:9px 13px;font-size:14px;font-style:italic;line-height:1.25;transition:background .12s,color .12s;display:flex}.pick-menu li:hover{color:var(--gold-bright);background:#e8b84a1c}.pick-menu .pick-mk{color:#5c5136;flex:none;font-size:12px;font-style:normal;transition:color .12s}.pick-menu li:hover .pick-mk{color:var(--saffron)}.pick-menu li.on{color:var(--gold-bright);background:linear-gradient(90deg,#e8b84a2e,#0000)}.pick-menu li.on .pick-mk{color:var(--gold);filter:drop-shadow(0 0 5px #e8b84a99)}.status{white-space:nowrap;letter-spacing:.4px;flex:none;align-items:center;gap:8px;margin-left:auto;font-size:12.5px;font-weight:700;display:flex}.status .dot{border-radius:50%;width:9px;height:9px}.status.listen{color:var(--listen)}.status.listen .dot{background:var(--listen);box-shadow:0 0 10px var(--listen)}.status.repeat{color:var(--repeat)}.status.repeat .dot{background:var(--repeat);box-shadow:0 0 10px var(--repeat);animation:1s infinite pulse}.status.score{color:var(--score)}.status.score .dot{background:var(--score);box-shadow:0 0 10px var(--score)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.steps{justify-content:center;gap:8px;padding:6px 0 2px;display:flex}.step{letter-spacing:.5px;color:var(--label);border:1px solid var(--hair);border-radius:100px;align-items:center;gap:6px;padding:5px 13px;font-size:11px;display:flex}.step b{opacity:.6;font-size:10px}.step.on{color:#241802;border-color:#0000;font-weight:700}.step.on.l{background:var(--listen)}.step.on.r{background:var(--repeat)}.step.on.s{background:var(--score)}.progress{align-items:center;gap:11px;max-width:560px;margin:4px auto 0;padding:0 26px;display:flex}.ptrack{background:#e8b84a21;border-radius:3px;flex:1;height:4px;overflow:hidden}.pfill{background:linear-gradient(90deg,var(--saffron),var(--gold));border-radius:3px;height:100%;transition:width .18s linear;box-shadow:0 0 8px #e8b84a66}.pcount{letter-spacing:.5px;color:#c7b78c;font-variant-numeric:tabular-nums;flex:none;font-size:10.5px}.pcount i{opacity:.85;font-style:normal}.lyrics{text-align:center;padding:4px 26px;position:relative}.lyric{font-family:var(--serif);text-wrap:balance;line-height:1.35}.prev{font-size:calc(16px * var(--pscale,1));color:#d8c79a;opacity:.78;font-style:italic}.current{font-size:calc(clamp(24px,4vw,42px) * var(--pscale,1));margin:6px 0;font-weight:600}.next{font-size:calc(17px * var(--pscale,1));color:#d0bd90;opacity:.85;margin-top:6px;font-style:italic}.current .w{color:var(--todo-cur);cursor:pointer;margin:0 .16em;transition:color .16s,text-shadow .22s,transform .22s;display:inline-block}.current .w.sung{color:var(--sung)}.current .w.active{color:var(--gold-bright);text-shadow:0 0 20px #ffdc8cd9;transform:scale(1.03)}.trans{font-family:var(--sans);color:#b7a988;opacity:.82;min-height:19px;margin-top:6px;font-size:14.5px}.pron{letter-spacing:1px;height:18px;color:var(--saffron);opacity:.85;margin-top:6px;font-size:13px}.pron .lbl{color:var(--label);text-transform:uppercase;letter-spacing:2px;margin-right:7px;font-size:9px}.countdown{place-items:center;min-height:19px;margin-top:6px;display:grid}.cd-card{color:var(--gold-bright);background:linear-gradient(#e0483a,#c62f22);border:1px solid #ff7a6a;border-radius:100px;align-items:center;gap:11px;padding:8px 22px;font-size:15px;font-weight:800;animation:1s ease-in-out infinite cdPulse;display:flex;box-shadow:0 5px 20px #c62f2280}@keyframes cdPulse{0%,to{box-shadow:0 5px 20px #c62f2280}50%{box-shadow:0 5px 28px #ff5a46d9}}.cd-card .dots{gap:7px;display:flex}.cd-card .dots span{color:#ffe9b066;font-size:14px;transition:color .2s,text-shadow .2s}.cd-card .dots span.on{color:var(--gold-bright);text-shadow:0 0 10px #ffe9b0e6}.prompt{pointer-events:none;z-index:12;place-items:end center;display:grid;position:absolute;bottom:58px;left:0;right:0}.prompt .card{color:#f0b7a8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#e0806a1f;border:1px solid #e0806a66;border-radius:100px;align-items:center;gap:7px;padding:6px 15px;font-size:11.5px;font-weight:700;display:flex}.prompt .mic{font-size:13px;animation:1s infinite pulse}.reveal{pointer-events:none;z-index:12;place-items:end center;display:grid;position:absolute;bottom:58px;left:0;right:0}.reveal .badge{--bc:111,224,160;background:linear-gradient(180deg,#1b1610f7,#120f0afa), radial-gradient(circle at 40% 35%,rgba(var(--bc),.28),rgba(var(--bc),.1));border:1px solid rgba(var(--bc),.6);text-align:center;box-shadow:0 8px 26px #00000080, 0 0 22px rgba(var(--bc),.22);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;border-radius:18px;padding:14px 26px;transition:transform .35s,opacity .35s;transform:scale(.9)}.reveal .badge.good{--bc:111,224,160}.reveal .badge.mid{--bc:232,184,74}.reveal .badge.low{--bc:199,106,90}.reveal .badge.na{--bc:138,124,95}.reveal.show .badge{opacity:1;transform:scale(1)}.reveal .n{color:rgb(var(--bc));text-shadow:0 0 16px rgba(var(--bc),.4);font-size:40px;font-weight:800;line-height:1}.reveal .lab{color:rgb(var(--bc));letter-spacing:.5px;margin-top:4px;font-size:13px}.stagebox{flex-direction:column;flex:1;gap:8px;min-height:0;padding:6px 26px 0;display:flex;position:relative}.lane{border:1px solid var(--hair);background:linear-gradient(#181309,#120f0a);border-radius:14px;flex:1;min-height:110px;position:relative;overflow:hidden}.lane canvas{width:100%;height:100%;display:block}.lane .cap{letter-spacing:1.5px;text-transform:uppercase;color:var(--label);font-size:10px;position:absolute;top:9px;left:14px}.wave{border:1px solid var(--hair);background:#140f09;border-radius:12px;height:50px;overflow:hidden}.wave canvas{width:100%;height:100%;display:block}.bottom{padding:12px 20px 18px;padding-bottom:max(18px, calc(env(safe-area-inset-bottom) + 10px));flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px;display:flex}.score{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.gauge{width:70px;height:70px;position:relative}.gauge svg{transform:rotate(-90deg)}.gauge .num{color:var(--gold-bright);font-variant-numeric:tabular-nums;place-items:center;font-size:24px;font-weight:800;display:grid;position:absolute;inset:0}.subs{flex-direction:column;gap:6px;min-width:150px;display:flex}.sub{color:var(--label);grid-template-columns:56px 1fr 34px;align-items:center;gap:8px;font-size:11px;display:grid}.sub .track{background:#2a2214;border-radius:4px;height:6px;overflow:hidden}.sub .fill{border-radius:4px;height:100%;transition:width .2s}.sub .v{color:#d8c79a;text-align:right;font-variant-numeric:tabular-nums}.sub.na{opacity:.45}.avg{border-left:1px solid var(--hair);flex-direction:column;justify-content:center;align-items:center;gap:1px;min-width:62px;padding-left:12px;display:flex}.avg-lab{letter-spacing:1px;text-transform:uppercase;color:var(--label);white-space:nowrap;font-size:8.5px}.avg-n{color:var(--gold-bright);font-variant-numeric:tabular-nums;text-shadow:0 0 14px #e8b84a59;font-size:23px;font-weight:800;line-height:1.05}.avg-c{color:var(--label);font-size:10px}.avg-rec{color:var(--saffron);white-space:nowrap;letter-spacing:.3px;margin-top:3px;font-size:10px;font-weight:700}.avg-rec.new{color:var(--gold-bright);animation:.5s recPop}@keyframes recPop{0%{transform:scale(1)}40%{transform:scale(1.22)}to{transform:scale(1)}}.reveal.show .badge.good{animation:1.4s ease-in-out infinite badgeGlow}@keyframes badgeGlow{0%,to{box-shadow:0 8px 26px #00000080,0 0 22px #6fe0a038}50%{box-shadow:0 8px 26px #00000080,0 0 40px #6fe0a08c}}.fill.mel{background:linear-gradient(90deg,var(--good-dim),var(--good))}.fill.tim{background:linear-gradient(90deg,#7a5a2a,var(--gold))}.fill.tmp{background:linear-gradient(90deg,#8a6a34,var(--saffron))}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.mode{border:1px solid var(--hair);border-radius:100px;display:flex;overflow:hidden}.mode button{color:#b7a988;cursor:pointer;font-size:12px;font-family:var(--sans);background:0 0;border:0;padding:8px 14px}.mode button.on{background:var(--gold);color:#241802;font-weight:700}.nav{align-items:center;gap:4px;display:flex}.nb{color:#b7a988;border:1px solid var(--hair);cursor:pointer;width:34px;height:34px;font-size:16px;font-family:var(--sans);background:0 0;border-radius:100px;flex:none;place-items:center;transition:border-color .15s,color .15s,background .15s;display:grid}.nb:hover{color:var(--gold-bright);border-color:#e8b84a80}.nb.loop{color:#c7b78c;gap:6px;width:auto;padding:0 13px;font-size:13px}.nb.loop .lp-i{font-size:13px}.nb.loop .lp-t{font-size:12px;font-family:var(--sans)}.nb.loop.on{background:var(--gold);color:#241802;border-color:#0000;box-shadow:0 0 12px #e8b84a73}.play{cursor:pointer;background:radial-gradient(circle at 38% 34%,var(--gold-bright),var(--gold) 60%,var(--saffron));color:#2a1c05;border:0;border-radius:50%;flex:none;width:52px;height:52px;font-size:21px;box-shadow:0 6px 20px #e8b84a59}.pron-modal{z-index:20;background:#0000008c;place-items:center;display:grid;position:fixed;inset:0}.pron-card{background:var(--panel);border:1px solid var(--hair);text-align:center;border-radius:16px;min-width:220px;padding:22px 28px}.pron-card .pw{color:var(--gold-bright);font-size:24px;font-weight:700}.pron-card .pi{color:var(--saffron);margin:8px 0 16px;font-family:ui-monospace,Menlo,monospace;font-size:20px}.pron-card button{background:var(--gold);color:#241802;cursor:pointer;border:0;border-radius:10px;padding:8px 18px;font-weight:700}.tip-modal{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:30;background:#0009;place-items:center;padding:20px;animation:.2s tipFade;display:grid;position:fixed;inset:0}@keyframes tipFade{0%{opacity:0}to{opacity:1}}.tip-card{text-align:center;background:linear-gradient(#221a11,#161009);border:1px solid #e8b84a4d;border-radius:20px;width:100%;max-width:400px;padding:26px 28px 24px;box-shadow:0 24px 60px #0009}.tip-mark{filter:drop-shadow(0 0 12px #e8b84a80);font-size:40px;line-height:1}.tip-card h2{font-family:var(--serif);color:var(--gold);margin-top:12px;font-size:23px;font-weight:700}.tip-sub{color:#c7b78c;margin-top:5px;font-size:13.5px}.tip-list{text-align:left;flex-direction:column;gap:11px;margin:18px 0 20px;list-style:none;display:flex}.tip-list li{color:#d8c79a;padding-left:4px;font-size:13.5px;line-height:1.5}.tip-list b{color:var(--gold-bright);font-weight:700}.tip-list i{color:var(--saffron);font-style:italic}.tip-go{background:radial-gradient(circle at 40% 35%,var(--gold-bright),var(--gold) 65%,var(--saffron));color:#2a1c05;cursor:pointer;border:0;border-radius:100px;padding:11px 30px;font-size:15px;font-weight:800;box-shadow:0 6px 20px #e8b84a59}.tip-go:hover{filter:brightness(1.05)}@media (prefers-reduced-motion:reduce){.status.repeat .dot,.prompt .mic,.splash .s-mark,.reveal.show .badge.good{animation:none}}@media (width<=720px){.topbar{gap:8px;padding:12px 16px 2px}.brand-t b{font-size:14px}.brand-t i{letter-spacing:1px;font-size:9px}.brand .mark{width:26px;height:26px}.lane{min-height:84px}.stagebox{padding:6px 14px 0}.progress{margin-top:2px;padding:0 14px}.lyrics{padding:2px 14px 0}.current{margin:2px 0}.trans{min-height:16px;margin-top:3px}.pron{height:14px;margin-top:2px}.next{margin-top:3px}.steps{padding:3px 0 0}.bottom{flex-wrap:wrap;gap:12px;padding:10px 14px 16px}.score{order:2;justify-content:center;width:100%}.controls{order:1;justify-content:space-between;gap:8px;width:100%;margin-left:0}.mode button{padding:8px 10px;font-size:11px}.nb.loop .lp-t{display:none}.nb.loop{width:34px;padding:0}.pick-menu{max-width:92vw}}@media (width<=400px){.mode button{padding:7px 8px;font-size:10px}.subs{min-width:140px}}