:root{--bg:#0b0d12;--bg-elevated:#141824;--border:#232a3a;--text:#e8ecf6;--text-dim:#8b93a7;--accent:#6c8cff;--accent-soft:#6c8cff29;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background-color:var(--bg);font-family:Pretendard,Segoe UI,system-ui,-apple-system,Malgun Gothic,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 600px at 15% -10%, #6c8cff2e, transparent 60%), radial-gradient(900px 500px at 110% 10%, #ff6cbe1f, transparent 55%), var(--bg)}button{font:inherit;color:inherit}.app{flex-direction:column;height:100%;min-height:100vh;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.brand{letter-spacing:.02em;align-items:center;gap:10px;font-weight:700;display:flex}.brand .dot{background:var(--accent);width:10px;height:10px;box-shadow:0 0 14px var(--accent);border-radius:50%}.ghost{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:999px;padding:8px 14px;transition:all .16s}.ghost:hover{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}.error{color:#ffb4b4;background:#ff52521f;border:1px solid #ff525266;border-radius:10px;margin:12px 24px 0;padding:10px 14px;font-size:14px}.stage{flex-direction:column;flex:1;gap:18px;min-height:0;padding:24px;display:flex}.dropzone{border:2px dashed var(--border);cursor:pointer;background:#ffffff04;border-radius:24px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;width:100%;transition:all .18s;display:flex}.dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}.dropzone-icon{color:var(--accent);font-size:56px;line-height:1}.dropzone h1{margin:0;font-size:clamp(20px,3vw,30px)}.dropzone p{color:var(--text-dim);margin:0}.pill{background:var(--accent-soft);color:var(--accent);border-radius:999px;margin-top:6px;padding:8px 16px;font-size:14px;font-weight:600}.now-playing{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.now-playing h1{margin:0;font-size:clamp(18px,2.4vw,26px)}.now-playing p{color:var(--text-dim);margin:4px 0 0;font-size:14px}.badge{border:1px solid var(--border);color:var(--text-dim);border-radius:999px;margin-left:auto;padding:5px 12px;font-size:12px}.lyrics{scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex:1;min-height:0;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000,#000 12% 88%,#0000);mask-image:linear-gradient(#0000,#000 12% 88%,#0000)}.lyrics::-webkit-scrollbar{width:8px}.lyrics::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}.lines{flex-direction:column;gap:4px;margin:0;padding:45vh 0;list-style:none;display:flex}.line{text-align:center;color:#e8ecf652;border-radius:12px;padding:10px 16px;font-size:clamp(20px,3.2vw,34px);font-weight:700;line-height:1.35;transition:color .25s,transform .25s,opacity .25s}.line.clickable{cursor:pointer}.line.clickable:hover{color:#e8ecf6a6}.line.active{color:var(--text);text-shadow:0 0 26px #6c8cff73;transform:scale(1.03)}.empty{height:100%;color:var(--text-dim);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex}.empty .small{opacity:.7;font-size:13px}.player{border-top:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0b0d12b3;align-items:center;gap:14px;padding:14px 24px 20px;display:flex}.play{background:var(--accent);color:#0b0d12;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;place-items:center;width:46px;height:46px;transition:transform .14s,box-shadow .14s;display:grid}.play:hover{transform:scale(1.06);box-shadow:0 0 22px #6c8cff80}.time{font-variant-numeric:tabular-nums;color:var(--text-dim);text-align:center;flex-shrink:0;min-width:42px;font-size:13px}.seek{flex:1;align-items:center;height:46px;display:flex;position:relative}.seek-track{background:var(--border);pointer-events:none;border-radius:999px;height:5px;position:absolute;left:0;right:0;overflow:hidden}.seek-fill{background:linear-gradient(90deg, var(--accent), #b18cff);border-radius:999px;height:100%}.seek input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;margin:0;position:relative}.seek input[type=range]::-webkit-slider-runnable-track{background:0 0;height:5px}.seek input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;border-radius:50%;width:15px;height:15px;margin-top:-5px;box-shadow:0 0 10px #6c8cffb3}.seek input[type=range]::-moz-range-track{background:0 0;height:5px}.seek input[type=range]::-moz-range-thumb{background:#fff;border:none;border-radius:50%;width:15px;height:15px}.overlay{z-index:50;color:var(--text);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:3px dashed var(--accent);pointer-events:none;background:#0b0d12d1;place-items:center;font-size:clamp(22px,4vw,40px);font-weight:800;display:grid;position:fixed;inset:0}@media (width<=560px){.stage,.topbar,.player{padding-left:14px;padding-right:14px}.now-playing .badge{margin-left:0}}