:root{--bg:#05060c;--screen:#0c0f18;--screen-2:#131826;--accent:#5e90ff;--accent-2:#7c5cff;--green:#3ddc84;--red:#ff5d6c;--amber:#fc5;--text:#eef1f8;--muted:#8b93a7;--muted-dim:#5b6275;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{min-height:100%;margin:0;padding:0}body{background:radial-gradient(900px 600px at 18% -8%, #7c5cff38, transparent 60%), radial-gradient(900px 700px at 92% 8%, #5e90ff2e, transparent 55%), radial-gradient(1200px 900px at 50% 120%, #16203a 0%, var(--bg) 60%);color:var(--text);justify-content:center;align-items:center;min-height:100dvh;padding:24px 12px;display:flex}#app{justify-content:center;width:100%;display:flex}.phone{background:linear-gradient(165deg,#262c42,#080b14);border-radius:46px;width:392px;max-width:100%;padding:13px;position:relative;box-shadow:0 40px 90px #0009,inset 0 2px #ffffff0d,0 0 0 1px #ffffff0a}.notch{z-index:5;background:#05060c;border-radius:0 0 16px 16px;width:120px;height:26px;position:absolute;top:20px;left:50%;transform:translate(-50%)}.screen{background:var(--screen);border-radius:34px;flex-direction:column;min-height:760px;padding:22px 18px 14px;display:flex;position:relative;overflow:hidden}.intro{z-index:20;text-align:center;background:linear-gradient(170deg,#10162a 0%,#0a0d16 70%);border-radius:34px;flex-direction:column;justify-content:center;align-items:center;padding:36px 28px;transition:opacity .42s,transform .42s;display:flex;position:absolute;inset:0;overflow:hidden}.intro.leaving{opacity:0;pointer-events:none;transform:scale(1.04)}.intro-glow{filter:blur(10px);pointer-events:none;background:radial-gradient(circle,#7c5cff66,#0000 65%);width:320px;height:320px;animation:5s ease-in-out infinite floaty;position:absolute;top:-20%;left:50%;transform:translate(-50%)}@keyframes floaty{50%{transform:translate(-50%)translateY(16px)scale(1.06)}}.intro-mark{filter:drop-shadow(0 8px 22px #7c5cff80);margin-bottom:14px;font-size:56px;animation:.6s both introItem}.intro-title{letter-spacing:-.02em;background:linear-gradient(120deg,#fff,#c7d2ff 60%,#b79bff);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:27px;font-weight:900;animation:.6s 60ms both introItem}.intro-sub{color:var(--muted);margin:12px 0 0;font-size:14px;line-height:1.6;animation:.6s .12s both introItem}.intro-points{flex-direction:column;gap:10px;margin:26px 0 0;padding:0;list-style:none;animation:.6s .18s both introItem;display:flex}.intro-points li{color:#d4dbec;background:#ffffff0a;border:1px solid #ffffff12;border-radius:12px;align-items:center;gap:10px;padding:9px 16px;font-size:13.5px;font-weight:600;display:flex}.intro-points li span{font-size:16px}.intro-start{width:100%;max-width:240px;margin-top:30px;animation:.6s cubic-bezier(.2,.9,.3,1.4) .28s both introPop}.intro-demo{letter-spacing:.04em;color:var(--muted-dim);margin-top:16px;font-size:10.5px;animation:.6s .36s both introItem}@keyframes introItem{0%{opacity:0;transform:translateY(12px)}}@keyframes introPop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.appwrap{flex-direction:column;flex:1;gap:13px;min-height:0;display:flex}.topbar{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.course-badge{letter-spacing:.02em;color:#c7d2ff;background:linear-gradient(135deg,#7c5cff33,#5e90ff24);border:1px solid #7c5cff4d;border-radius:999px;margin-bottom:10px;padding:5px 11px;font-size:11px;font-weight:700;display:inline-block}.topbar h1{letter-spacing:-.02em;margin:0;font-size:25px;font-weight:800}.subtitle{color:var(--muted);margin:4px 0 0;font-size:12.5px}.topbar-right{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:8px;display:flex}.day-pill{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));border-radius:14px;padding:8px 12px;font-size:12px;font-weight:800;box-shadow:0 8px 20px #7c5cff66}.tick-toggle{color:var(--muted);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;transition:all .18s}.tick-toggle.on{color:#fff;background:#7c5cff47;border-color:#7c5cff80}.progress-row{align-items:center;gap:10px;display:flex}.progress-track{background:#ffffff12;border-radius:999px;flex:1;height:7px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:999px;width:0;height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px #7c5cff99}.progress-label{color:var(--muted);white-space:nowrap;font-size:11px;font-weight:700}.lesson-tabs{gap:8px;display:flex}.tab{color:var(--muted);cursor:pointer;background:#ffffff09;border:1px solid #ffffff14;border-radius:13px;flex:1;justify-content:center;align-items:center;padding:9px 6px;transition:all .18s;display:flex;position:relative}.tab:hover{background:#ffffff0f}.tab .tab-day{letter-spacing:.02em;font-size:12px;font-weight:800}.tab.cur{color:#fff;background:linear-gradient(135deg,#7c5cff47,#5e90ff29);border-color:#7c5cff8c;box-shadow:0 6px 16px #7c5cff40}.tab.done .tab-check{background:var(--green);color:#06281a;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:900;display:flex;position:absolute;top:-6px;right:-6px;box-shadow:0 2px 8px #3ddc8480}.tab .tab-check:empty{display:none}.stage-card{background:linear-gradient(180deg, var(--screen-2), #0e1320);border:1px solid #ffffff0f;border-radius:24px;flex-direction:column;flex:1;gap:13px;min-height:0;padding:16px;display:flex;box-shadow:inset 0 8px 30px #00000040}.lyric-viewer{flex-wrap:wrap;justify-content:center;gap:6px;transition:opacity .25s;display:flex}.lyric-viewer.dimmed{opacity:0;pointer-events:none}.lyric{background:#ffffff09;border:1px solid #ffffff0f;border-radius:12px;flex-direction:column;align-items:center;min-width:38px;padding:7px 9px;transition:all .2s;display:flex}.lyric b{color:var(--text);font-size:16px;font-weight:800}.lyric i{color:var(--muted-dim);margin-top:1px;font-size:10px;font-style:normal}.lyric.active{background:linear-gradient(135deg,#7c5cff59,#5e90ff38);border-color:#a08cffb3;transform:translateY(-3px)scale(1.06);box-shadow:0 8px 18px #7c5cff66}.lyric.active b{color:#fff}.lyric.active i{color:#c7d2ff}.lyric.hit{border-color:#3ddc8499}.lyric.hit i{color:var(--green)}.canvas-wrap{background:linear-gradient(#0a1120,#080d16);border:1px solid #ffffff0f;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000004d}#viz{width:100%;display:block}#fx{z-index:6;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.combo{pointer-events:none;text-shadow:0 2px 10px #00000080;flex-direction:column;align-items:flex-start;line-height:1;display:none;position:absolute;top:10px;left:12px}.combo.show{display:flex}.combo b{color:#fff;letter-spacing:-.02em;font-size:30px;font-weight:900}.combo span{letter-spacing:.14em;color:var(--accent);font-size:10px;font-weight:800}.combo.hot b{color:#ffd56b}.combo.hot span{color:var(--amber)}.combo.bump{animation:.18s comboBump}@keyframes comboBump{0%{transform:scale(1.25)}to{transform:scale(1)}}.rec-dot{letter-spacing:.06em;color:#ffd0d6;pointer-events:none;background:#ff3b6b2e;border:1px solid #ff5d6c73;border-radius:999px;align-items:center;gap:6px;padding:4px 9px;font-size:11px;font-weight:800;display:none;position:absolute;top:10px;right:12px}.rec-dot.show{display:flex}.rec-dot span{background:var(--red);width:8px;height:8px;box-shadow:0 0 8px var(--red);border-radius:50%;animation:1s steps(2,start) infinite blink}@keyframes blink{50%{opacity:.25}}.countdown{color:#fff;text-shadow:0 0 40px #7c5cffcc;pointer-events:none;justify-content:center;align-items:center;font-size:84px;font-weight:900;display:none;position:absolute;inset:0}.countdown.show{display:flex}.countdown.tick{animation:.65s ease-out cd}@keyframes cd{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.15)}to{opacity:.85;transform:scale(1)}}.canvas-overlay{z-index:4;opacity:0;background:linear-gradient(#121829 0%,#0c111d 100%);justify-content:center;align-items:flex-start;transition:opacity .3s;display:none;position:absolute;inset:0}.canvas-overlay.show{opacity:1;display:flex}.scoring{color:var(--muted);flex-direction:column;align-items:center;gap:14px;margin:auto;font-size:13px;font-weight:600;display:flex}.spinner{border:3px solid #ffffff1f;border-top-color:var(--accent-2);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.result-panel{text-align:center;-webkit-overflow-scrolling:touch;flex-direction:column;align-items:center;width:100%;height:100%;padding:26px 14px 16px;animation:.4s both panelIn;display:flex;overflow-y:auto}@keyframes panelIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.grade{letter-spacing:-.04em;transform-origin:top;font-size:70px;font-weight:900;line-height:1.05;animation:.6s cubic-bezier(.2,.9,.3,1.4) 50ms both gradePop}@keyframes gradePop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.12)}to{transform:scale(1)}}.grade-A{color:var(--green);text-shadow:0 0 36px #3ddc8499}.grade-B{color:var(--accent);text-shadow:0 0 36px #5e90ff99}.grade-C{color:var(--amber);text-shadow:0 0 36px #ffcc5580}.grade-D{color:var(--red);text-shadow:0 0 36px #ff5d6c80}.score{letter-spacing:-.02em;margin-top:2px;font-size:32px;font-weight:800}.score .unit{color:var(--muted);margin-left:2px;font-size:15px;font-weight:700}.best-combo{color:var(--amber);background:#ffcc551f;border:1px solid #ffcc554d;border-radius:999px;margin-top:8px;padding:4px 12px;font-size:12px;font-weight:800}.gauges{flex-direction:column;gap:10px;width:100%;max-width:260px;margin-top:16px;display:flex}.gauge-head{justify-content:space-between;margin-bottom:5px;font-size:12px;display:flex}.gauge-head span{color:var(--muted);font-weight:600}.gauge-head b{color:var(--text);font-weight:800}.gauge-track{background:#ffffff12;border-radius:999px;height:9px;overflow:hidden}.gauge-fill{border-radius:999px;width:0;height:100%}.gauge-fill.pitch{background:linear-gradient(90deg, var(--accent), #66e0ff);box-shadow:0 0 10px #5e90ff8c}.gauge-fill.tempo{background:linear-gradient(90deg, var(--accent-2), #c08bff);box-shadow:0 0 10px #7c5cff8c}.timeline{flex-wrap:wrap;justify-content:center;gap:5px;margin-top:16px;display:flex}.tl{border-radius:10px;flex-direction:column;align-items:center;gap:2px;padding:5px 8px;font-size:13px;font-weight:800;animation:.4s both tlIn;display:flex}.tl i{font-size:10px;font-style:normal;font-weight:700}.tl.ok{color:var(--green);background:#3ddc841f;border:1px solid #3ddc844d}.tl.no{color:var(--red);background:#ff5d6c1a;border:1px solid #ff5d6c47}@keyframes tlIn{0%{opacity:0;transform:translateY(6px)}}.result-panel.celebrate-a:before,.result-panel.celebrate-b:before{content:"";pointer-events:none;z-index:-1;border-radius:50%;width:170px;height:170px;animation:2s ease-in-out infinite haloPulse;position:absolute;top:14px;left:50%;transform:translate(-50%)}.result-panel.celebrate-a:before{background:radial-gradient(circle,#3ddc8447,#0000 65%)}.result-panel.celebrate-b:before{background:radial-gradient(circle,#5e90ff42,#0000 65%)}@keyframes haloPulse{50%{opacity:.7;transform:translate(-50%)scale(1.15)}}.hint{text-align:center;color:var(--muted);min-height:20px;padding:0 4px;font-size:13.5px;line-height:1.5}.controls{gap:10px;margin-top:auto;display:flex}.btn{color:#fff;cursor:pointer;border:none;border-radius:16px;flex:1;padding:15px 14px;font-size:15px;font-weight:800;transition:transform .1s,box-shadow .2s,filter .2s,opacity .2s}.btn:active{transform:translateY(2px)scale(.985)}.btn:disabled{opacity:.55;cursor:default}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));box-shadow:0 12px 26px #7c5cff66}.btn-secondary{background:#ffffff12;border:1px solid #ffffff1f}.btn-danger{background:linear-gradient(135deg,#ff5d6c,#ff3b6b);box-shadow:0 12px 26px #ff3b6b66}.btn:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 14px 30px #7c5cff80}.btn-secondary:hover:not(:disabled){box-shadow:0 8px 20px #0000004d}.footnote{text-align:center;justify-content:center;margin-top:10px;display:flex}.hp-badge{color:#bcd0ff;background:#5e90ff1a;border:1px solid #5e90ff38;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:700}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (width<=430px){body{padding:0}.phone{border-radius:0;width:100%;min-height:100dvh;padding:0}.notch{display:none}.screen{border-radius:0;min-height:100dvh;padding:20px 15px 12px}.intro,.canvas-overlay{border-radius:0}.topbar h1{font-size:22px}.grade{font-size:62px}}@media (width<=380px){.screen{padding:16px 12px 10px}.appwrap{gap:11px}.lyric{min-width:30px;padding:6px}.lyric b{font-size:14px}.stage-card{padding:13px}.btn{padding:13px 8px;font-size:14px}.grade{font-size:56px}.score{font-size:28px}.intro-title{font-size:24px}.intro-points li{padding:8px 12px;font-size:12.5px}}@media (height<=740px){.screen{min-height:auto}}