.orbs{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.orb{filter:blur(44px);opacity:.2;border-radius:50%;animation:22s ease-in-out infinite paused float;position:absolute}.orb2{filter:blur(24px);opacity:.22;border-radius:50%;animation:22s ease-in-out infinite paused float;position:absolute}.orb-xl{filter:blur(120px);opacity:.16;border-radius:50%;animation:34s ease-in-out infinite paused float;position:absolute}.orb-md{filter:blur(30px);opacity:.36;border-radius:50%;animation:24s ease-in-out infinite paused float;position:absolute}.orb-sm2{filter:blur(16px);opacity:.46;border-radius:50%;animation:20s ease-in-out infinite paused float;position:absolute}.orbs .float{animation-play-state:running}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-22px)}}.motes{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.motes i{animation:var(--anim,mote-drift) var(--dur,7s) ease-in-out infinite;animation-delay:var(--delay,0s);height:calc(var(--s,3) * 1px);left:var(--x,50%);top:var(--y,40%);width:calc(var(--s,3) * 1px);background:#fff3bb;border-radius:50%;position:absolute;box-shadow:0 0 4px #ffdc77,0 0 15px #f6bd42d6}.motes i:nth-child(3n){background:#ffd98a;box-shadow:0 0 4px #ffd67699,0 0 10px #f6bd4273}.motes i:nth-child(5n){background:#fff9df;box-shadow:0 0 6px #ffeaa6,0 0 22px #facc58f2,0 0 40px #f6bd4266}@media (prefers-reduced-motion:reduce){.motes i{opacity:.5;animation:none}}@keyframes mote-drift{0%,to{opacity:.12;transform:translate3d(calc(var(--dx,-4) * -1px), calc(var(--amp,16) * .75px), 0) scale(.72)}44%{opacity:.86;transform:translate3d(calc(var(--dx,-4) * 1px), calc(var(--amp,16) * -1px), 0) scale(1.08)}72%{opacity:.35;transform:translate3d(calc(var(--dx,-4) * .4px), calc(var(--amp,16) * -1.8px), 0) scale(.88)}}@keyframes mote-drift-b{0%,to{opacity:.1;transform:translate3d(calc(var(--dx,-4) * .6px), calc(var(--amp,16) * -.9px), 0) scale(.8)}38%{opacity:.8;transform:translate3d(calc(var(--dx,-4) * -1px), calc(var(--amp,16) * .9px), 0) scale(1.05)}68%{opacity:.3;transform:translate3d(calc(var(--dx,-4) * -.3px), calc(var(--amp,16) * 1.6px), 0) scale(.9)}}@keyframes mote-drift-c{0%,to{opacity:.15;transform:translate3d(0, calc(var(--amp,16) * .5px), 0) scale(.75)}55%{opacity:.9;transform:translate3d(calc(var(--dx,-4) * 1.3px), calc(var(--amp,16) * -1.3px), 0) scale(1.1)}80%{opacity:.4;transform:translate3d(calc(var(--dx,-4) * .5px), calc(var(--amp,16) * -.6px), 0) scale(.85)}}#loader{z-index:60;background:linear-gradient(#0b0e1f80, #0b0e1f9e), var(--loader-bg) center/cover no-repeat, #0b0e1f;justify-content:center;align-items:center;gap:max(26px, calc(26 * var(--u)));flex-direction:column;transition:opacity .5s,visibility .5s;display:flex;position:fixed;inset:0}#loader.done{opacity:0;visibility:hidden}#loader .logo{font-size:clamp(40px, 7vw, max(78px, calc(78 * var(--t))));letter-spacing:.04em;color:#fff;text-shadow:0 0 20px #7b5cffcc,0 0 48px #35b8ff8c;font-weight:900;animation:1.6s ease-in-out infinite flicker}#loader .mark{width:clamp(112px, 18vw, max(192px, calc(192 * var(--u))));filter:drop-shadow(0 0 20px #7b5cffcc)drop-shadow(0 0 48px #35b8ff8c);height:auto;animation:1.6s ease-in-out infinite flicker}#loader .coin{font-size:max(16px, calc(16 * var(--t)));letter-spacing:.02em;color:var(--muted)}@keyframes flicker{0%,to{opacity:1}48%{opacity:1}50%{opacity:.72}52%{opacity:1}}.bar{width:min(max(340px, calc(340 * var(--u))), 70vw);height:max(16px, calc(16 * var(--u)));background:#ffffff1a;border:1px solid #fff3;border-radius:999px;overflow:hidden}.bar>i{background:linear-gradient(90deg, var(--neon-a), var(--neon-b));width:0;height:100%;animation:2.1s cubic-bezier(.5,.05,.2,1) forwards fill;display:block;box-shadow:0 0 14px #35b8ffb3}@keyframes fill{to{width:100%}}header{text-align:center;margin:auto 0 calc(40 * var(--u))}.brand-line{align-items:center;gap:calc(8 * var(--u));font-size:calc(14 * var(--t));letter-spacing:.12em;color:var(--muted);margin-bottom:calc(16 * var(--u));text-transform:none;font-weight:700;display:inline-flex}.brand-line:before,.brand-line:after{content:"";width:calc(26 * var(--u));background:#ffffff40;height:1px}h1{letter-spacing:-.005em;color:#fff;text-shadow:0 0 18px #7b5cffa6,0 0 42px #35b8ff73;margin:0;font-family:Pretendard,Pretendard Variable,sans-serif;font-size:clamp(40px,6.4vw,78px);font-weight:900}header p{margin:calc(14 * var(--u)) 0 0;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere;font-size:clamp(14px,1.6vw,18px)}@media (width>=1181px){h1{font-size:calc(78 * var(--t))}header p{font-size:calc(18 * var(--t))}}.edu-particle,.br-narrow{display:none}@media (width<=360px){.br-narrow{display:inline}}@media (width<=560px){.teacher-word{display:none}.edu-particle{display:inline}}.app{-webkit-backdrop-filter:blur(26px)saturate(1.5);backdrop-filter:blur(26px)saturate(1.5);border-radius:calc(22 * var(--u));color:inherit;background:#171a2e6b;flex-direction:column;text-decoration:none;transition:transform .18s,box-shadow .18s;display:flex;position:relative;overflow:hidden;box-shadow:0 14px 40px #00000073}.app:hover{transform:translateY(-6px);box-shadow:0 22px 54px #0000008c}.app:active{transform:translateY(-2px)}@media (width<=560px){.app{-webkit-backdrop-filter:blur(10px)saturate(1.3);backdrop-filter:blur(10px)saturate(1.3);background:#171a2e0a}}@media (hover:none){.app:active{transform:translateY(-6px);box-shadow:0 22px 54px #0000008c}.app:active .play{background:var(--neon-a);transform:scale(1.1)}}.thumb{aspect-ratio:16/9;background:#10132a 50%/cover no-repeat;width:100%;position:relative}.thumb img{object-fit:cover;width:100%;height:100%;display:block}.play{width:calc(60 * var(--u));height:calc(60 * var(--u));background:#0b0e1f94;border-radius:50%;justify-content:center;align-items:center;margin:auto;transition:transform .18s,background .18s;display:flex;position:absolute;inset:0}.play:after{content:"";width:0;height:0;margin-left:calc(5 * var(--u));border-left:calc(19 * var(--u)) solid #fff;border-top:calc(12 * var(--u)) solid transparent;border-bottom:calc(12 * var(--u)) solid transparent}.app:hover .play{background:var(--neon-a);transform:scale(1.1)}.body{padding:calc(16 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u));gap:calc(6 * var(--u));flex-direction:column;display:flex}.name{letter-spacing:-.01em;font-size:clamp(16px,1.5vw,19px);font-weight:800}.desc{color:var(--muted);word-break:keep-all;overflow-wrap:anywhere;font-size:clamp(12px,1.1vw,14px);line-height:1.55}@media (width>=1181px){.name{font-size:calc(19 * var(--t))}.desc{font-size:calc(14 * var(--t))}}.desc .short{display:none}@media (width<=560px){.desc .full{display:none}.desc .short{display:inline}}.player{width:min(calc(640 * var(--u)), 44vw);justify-self:end;align-items:stretch;gap:calc(34 * var(--u));border-radius:calc(28 * var(--u));padding:calc(36 * var(--u)) calc(34 * var(--u)) calc(36 * var(--u)) calc(22 * var(--u));height:calc(560 * var(--u));margin-right:1.25vw;transition:transform .18s,box-shadow .18s;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 54px #00000080}.player:hover{transform:translateY(-6px);box-shadow:0 28px 64px #0009}@media (width<=1180px){.player{display:none}}.player-left{width:47%;margin-left:calc(34 * var(--u));flex-direction:column;flex:none;display:flex}.cover{aspect-ratio:1;border-radius:calc(12 * var(--u));object-fit:cover;width:100%;box-shadow:0 14px 34px #0000008c}.track-row{justify-content:space-between;align-items:flex-start;gap:calc(10 * var(--u));margin-top:calc(18 * var(--u));display:flex}.track-title{font-size:calc(18 * var(--t));color:#fff;font-weight:800}.track-artist{margin-top:calc(4 * var(--u));font-size:calc(14 * var(--t));color:#ffffff9e}.track-actions{align-items:center;gap:calc(8 * var(--u));padding-top:calc(2 * var(--u));flex:none;display:flex}.transport{padding-top:calc(20 * var(--u));margin-top:auto}.seek{appearance:none;cursor:pointer;background:#ffffff47;border-radius:999px;width:100%;height:3px;margin:0}.seek:focus-visible,.volume input:focus-visible{outline-offset:4px;border-radius:999px;outline:2px solid #fff}.seek::-webkit-slider-thumb{-webkit-appearance:none;width:calc(11 * var(--u));height:calc(11 * var(--u));background:#fff;border-radius:50%;box-shadow:0 0 0 3px #ffffff26}.seek::-moz-range-thumb{width:calc(11 * var(--u));height:calc(11 * var(--u));background:#fff;border:none;border-radius:50%}.time-row{font-size:max(11px, calc(11 * var(--t)));color:#ffffff8c;margin-top:calc(7 * var(--u));justify-content:space-between;display:flex}.controls-row{justify-content:center;align-items:center;gap:calc(14 * var(--u));margin-top:calc(16 * var(--u));display:flex}.player .icon-btn svg{width:calc(16 * var(--u));height:calc(16 * var(--u))}.player .play-btn svg{width:calc(22 * var(--u));height:calc(22 * var(--u))}.player .skip-btn svg{width:calc(19 * var(--u));height:calc(19 * var(--u))}.player .toggle-btn svg{width:calc(17 * var(--u));height:calc(17 * var(--u))}.player .vol-icon-btn svg{width:calc(19 * var(--u));height:calc(19 * var(--u))}.volume{align-items:center;gap:calc(9 * var(--u));margin-top:calc(22 * var(--u));margin-left:calc(-28 * var(--u));width:calc(100% + 28 * var(--u));display:flex;position:relative}.volume input{appearance:none;cursor:pointer;background:#ffffff47;border-radius:999px;flex:1;height:3px;margin:0}.volume input::-webkit-slider-thumb{-webkit-appearance:none;width:calc(10 * var(--u));height:calc(10 * var(--u));background:#fff;border-radius:50%}.volume input::-moz-range-thumb{width:calc(10 * var(--u));height:calc(10 * var(--u));background:#fff;border:none;border-radius:50%}.lyrics{flex:1;min-width:0;height:100%;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 14% 86%,#0000);mask-image:linear-gradient(#0000,#000 14% 86%,#0000)}.lyrics-track{padding:calc(260 * var(--u)) 0;will-change:transform;flex-direction:column;display:flex}.lyrics-track p{padding:calc(14 * var(--u)) 0;font-size:calc(21 * var(--t));word-break:keep-all;overflow-wrap:anywhere;color:#ffffff42;margin:0;font-weight:700;line-height:1.4}.lyrics-track p.past{color:#ffffff85}.lyrics-track p.active{color:#fff}@supports ((-webkit-background-clip:text) or (background-clip:text)){.lyrics-track p.active{color:#0000;background-image:linear-gradient(90deg,#fff 50%,#ffffff4d 50%);background-position:100% 0;background-size:200% 100%;-webkit-background-clip:text;background-clip:text}}@media (pointer:coarse){.seek,.volume input{background:linear-gradient(#ffffff47,#ffffff47) 50%/100% 3px no-repeat;height:28px;margin:-12.5px 0}}.player-mobile{z-index:50;-webkit-backdrop-filter:blur(24px)saturate(1.3);backdrop-filter:blur(24px)saturate(1.3);width:100%;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));background:#0f1222e6;border-top:1px solid #ffffff24;border-radius:20px 20px 0 0;display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -10px 30px #00000073}@media (width<=1180px){.player-mobile{display:block}}@media (width<=560px){.player-mobile{-webkit-backdrop-filter:blur(18px)saturate(1.3);backdrop-filter:blur(18px)saturate(1.3);background:#0f1222d1}}.pm-top{align-items:flex-start;gap:10px;display:flex}.pm-cover{object-fit:cover;border-radius:10px;flex:none;width:56px;height:56px}.pm-meta{flex:1;align-self:flex-start;min-width:0}.pm-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:800;overflow:hidden}.pm-artist{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:12px;overflow:hidden}.pm-top .icon-btn{flex:none;padding-top:3px}.pm-seek{appearance:none;cursor:pointer;background:#ffffff47;border-radius:999px;width:100%;height:3px;margin-top:10px}.pm-seek:focus-visible,.pm-volume input:focus-visible{outline-offset:4px;border-radius:999px;outline:2px solid #fff}.pm-seek::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;width:11px;height:11px}.pm-seek::-moz-range-thumb{background:#fff;border:none;border-radius:50%;width:11px;height:11px}.pm-time-row{color:var(--muted);justify-content:space-between;margin-top:4px;font-size:10.5px;display:flex}.pm-lyrics-mask{height:18px;margin-top:3px;display:none;position:relative;overflow:hidden}.pm-lyrics-track{will-change:transform;flex-direction:column;align-items:flex-start;padding:160px 0;display:flex}.pm-lyrics-track p{color:#ffffff42;white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin:0;padding:2px 0;font-size:12px;font-weight:700;line-height:1.4;overflow:hidden}.pm-lyrics-track p.past{color:#ffffff85}.pm-lyrics-track p.active{color:#fff}@supports ((-webkit-background-clip:text) or (background-clip:text)){.pm-lyrics-track p.active{color:#0000;background-image:linear-gradient(90deg,#fff 50%,#ffffff4d 50%);background-position:100% 0;background-size:200% 100%;-webkit-background-clip:text;background-clip:text}}.pm-controls{align-items:center;gap:8px;margin-top:8px;display:flex}.pm-controls .play-btn{flex:none;padding:2px}.pm-controls .play-btn svg{width:24px;height:24px}.pm-controls .skip-btn svg{width:16px;height:16px}.pm-controls .toggle-btn svg{width:14px;height:14px}.pm-volume{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.pm-volume .vol-icon-btn{flex:none}.pm-volume .vol-icon-btn svg{width:15px;height:15px}.pm-volume input{appearance:none;cursor:pointer;background:#ffffff47;border-radius:999px;flex:1;min-width:0;height:3px}.pm-volume input::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;width:10px;height:10px}.pm-volume input::-moz-range-thumb{background:#fff;border:none;border-radius:50%;width:10px;height:10px}@media (width>=561px) and (width<=1180px){.player-mobile{padding:18px 28px calc(20px + env(safe-area-inset-bottom,0px))}.pm-cover{border-radius:12px;width:68px;height:68px}.pm-title{font-size:18px}.pm-artist{font-size:14px}.pm-time-row{font-size:12.5px}.pm-seek{margin-top:14px}.pm-top .icon-btn svg{width:20px;height:20px}.pm-controls{gap:14px;margin-top:12px}.pm-controls .play-btn svg{width:30px;height:30px}.pm-controls .skip-btn svg{width:20px;height:20px}.pm-controls .toggle-btn svg{width:18px;height:18px}.pm-volume .vol-icon-btn svg{width:19px;height:19px}}@media (pointer:coarse){.pm-seek,.pm-volume input{background:linear-gradient(#ffffff47,#ffffff47) 50%/100% 3px no-repeat;height:28px}.pm-seek{margin-top:-2.5px;margin-bottom:-12.5px}.pm-controls{gap:2px}}@media (pointer:coarse) and (width>=561px) and (width<=1180px){.pm-seek{margin-top:1.5px}.pm-controls{gap:8px}}@media (width<=1180px){footer{padding-bottom:calc(202px + env(safe-area-inset-bottom,0px))}}@media (width>=561px) and (width<=1180px){footer{padding-bottom:calc(232px + env(safe-area-inset-bottom,0px))}}footer{margin:calc(40 * var(--u)) 0 auto;color:var(--muted);font-size:calc(13.5 * var(--t));text-align:center}.toast{z-index:100;-webkit-backdrop-filter:blur(24px)saturate(1.4);backdrop-filter:blur(24px)saturate(1.4);border-radius:max(12px, calc(12 * var(--u)));padding:max(10px, calc(10 * var(--u))) max(20px, calc(20 * var(--u)));color:#fff;font-size:max(14px, calc(14 * var(--t)));letter-spacing:-.01em;white-space:nowrap;opacity:0;pointer-events:none;background:#171a2e8c;font-weight:600;transition:opacity .25s,transform .25s;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.96);box-shadow:0 16px 40px #00000080}.toast.open{opacity:1;transform:translate(-50%,-50%)scale(1)}@media (width<=480px){.toast{max-width:calc(100vw - 40px);padding:9px 14px;font-size:12px}}main{gap:calc(30 * var(--u));width:100%;display:grid}.stage{width:100%;max-width:calc(2000 * var(--u));grid-template-columns:1fr 1fr;align-items:stretch;display:grid}.stage main{width:auto;max-width:calc(900 * var(--u));grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);grid-auto-flow:column;justify-self:start;margin-left:1.25vw}@media (width<=1180px){.stage{display:block}.stage main{grid-template-rows:none;grid-template-columns:repeat(2,1fr);grid-auto-flow:row;justify-self:stretch;width:100%;max-width:820px;margin:0 auto}}@media (width<=560px){.stage main{grid-template-columns:1fr;max-width:420px}}.icon-btn{cursor:pointer;color:#ffffff80;background:0 0;border:none;justify-content:center;align-items:center;padding:2px;transition:color .15s;display:flex}.icon-btn svg{width:16px;height:16px}.icon-btn:focus-visible,.play-btn:focus-visible,.skip-btn:focus-visible,.vol-icon-btn:focus-visible{outline-offset:3px;border-radius:6px;outline:2px solid #fff}.icon-btn.active{color:#fff}.icon-btn.active svg{fill:currentColor}.icon-btn.more-btn:hover{color:#fff}.play-btn{cursor:pointer;color:#fff;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.play-btn svg{width:22px;height:22px}.skip-btn{cursor:pointer;color:#fff;opacity:.82;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.skip-btn:hover{opacity:1}.skip-btn svg{width:19px;height:19px}.toggle-btn svg{width:17px;height:17px}.toggle-btn.active{color:var(--neon-b);opacity:1}.vol-icon-btn{cursor:pointer;background:0 0;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:flex}.vol-icon-btn svg{width:19px;height:19px}.vol-icon-btn .spk-body{fill:#fff}.vol-icon-btn .wave1,.vol-icon-btn .wave2,.vol-icon-btn .wave3{stroke:#ffffff47}.vol-icon-btn.vol-lo .wave1,.vol-icon-btn.vol-mid .wave1,.vol-icon-btn.vol-mid .wave2,.vol-icon-btn.vol-hi .wave1,.vol-icon-btn.vol-hi .wave2,.vol-icon-btn.vol-hi .wave3{stroke:#fff}.vol-icon-btn .mute-x{display:none}.vol-icon-btn.muted .spk-body{fill:var(--muted)}.vol-icon-btn.muted .wave1,.vol-icon-btn.muted .wave2,.vol-icon-btn.muted .wave3{display:none}.vol-icon-btn.muted .mute-x{stroke:var(--muted);display:block}@media (pointer:coarse){.icon-btn,.play-btn,.skip-btn,.vol-icon-btn{min-width:36px;min-height:36px}}:root{--ink:#f3f5ff;--muted:#aeb6d8;--card:#171a2e;--card-line:#ffffff1a;--neon-a:#7b5cff;--neon-b:#35b8ff;--neon-c:#ff5ca8;--u:1px;--t:1px}@media (width>=1181px){:root{--u:clamp(.8px, calc(100vw / 1600), 1.6px);--t:clamp(.9px, calc(100vw / 1600), 1.6px)}}*{box-sizing:border-box}#root{display:contents}html,body{height:100%;margin:0}body{color:var(--ink);min-height:100dvh;padding:calc(40 * var(--u)) calc(32 * var(--u));background:#0b0e1f;flex-direction:column;justify-content:flex-start;align-items:center;font-family:Pretendard,Pretendard Variable,-apple-system,BlinkMacSystemFont,Segoe UI,Apple SD Gothic Neo,Malgun Gothic,sans-serif;display:flex;overflow-x:hidden}body:before{content:"";z-index:-2;background:radial-gradient(45% 45% at 18% 22%,#7b5cff4d,#0000 70%),radial-gradient(42% 42% at 82% 26%,#35b8ff3d,#0000 70%),radial-gradient(50% 50% at 50% 92%,#ff5ca833,#0000 72%),#0b0e1f;position:fixed;inset:0}
