:root{--bg:#0b0d11;--surface:#12151c;--surface-2:#171b24;--surface-3:#1e2430;--hairline:#242b38;--hairline-soft:#1c222c;--text:#eaeef6;--text-2:#9aa3b5;--text-3:#656e80;--accent:#ffd479;--accent-deep:#f0b850;--accent-ink:#241b06;--accent-dim:#ffd47924;--danger:#ff7b7b;--ok:#6bd6a0;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--pad:16px;--ease:cubic-bezier(.22, .61, .36, 1);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-feature-settings:"tnum" 0;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,Malgun Gothic,system-ui,sans-serif}::selection{background:var(--accent-dim)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}button{font:inherit;color:var(--text);background:linear-gradient(var(--surface-3), var(--surface-2));border:1px solid var(--hairline);border-radius:var(--r-md);cursor:pointer;white-space:nowrap;transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease), transform 80ms var(--ease);padding:10px 14px;font-weight:500}button:hover:not(:disabled){background:linear-gradient(#232a37,#1b212b);border-color:#2f3949}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.35;cursor:default}button.primary{background:linear-gradient(var(--accent), var(--accent-deep));color:var(--accent-ink);border-color:#0000;font-weight:700}button.primary:hover:not(:disabled){background:linear-gradient(#ffe0a0,#f5c264);border-color:#0000}button.on{background:linear-gradient(var(--accent), var(--accent-deep));color:var(--accent-ink);border-color:#0000;font-weight:700}button.ghost{color:var(--text-2);background:0 0;border-color:#0000}button.ghost:hover:not(:disabled){background:var(--surface-2);border-color:var(--hairline);color:var(--text)}button.icon{padding:9px 12px;font-size:15px;line-height:1}button.danger{color:var(--danger)}kbd{background:var(--surface-3);border:1px solid var(--hairline);color:var(--text-2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;font-family:inherit;font-size:.85em}input,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);width:100%;transition:border-color .14s var(--ease);padding:11px 13px}input::placeholder,textarea::placeholder{color:var(--text-3)}input:focus,textarea:focus{border-color:var(--accent-deep);outline:none}textarea{resize:vertical;line-height:1.7}.app{height:100%;padding-left:var(--safe-l);padding-right:var(--safe-r);flex-direction:column;display:flex}.topbar{padding:11px 16px;padding-top:calc(11px + var(--safe-t));background:linear-gradient(var(--surface), #12151ceb);border-bottom:1px solid var(--hairline-soft);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex:none;align-items:center;gap:10px;display:flex}.topbar h1{letter-spacing:-.2px;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;font-size:15.5px;font-weight:600;overflow:hidden}.topbar .spacer{flex:1;min-width:8px}.wordmark{letter-spacing:3.5px;color:var(--text);margin:0;font-size:17px;font-weight:600}.segmented{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);flex:none;gap:2px;padding:3px;display:flex}.segmented button{color:var(--text-2);background:0 0;border:none;border-radius:9px;padding:6px 15px;font-size:13.5px}.segmented button:hover:not(.on){background:var(--surface-3);color:var(--text)}.badge{border:1px solid var(--hairline);color:var(--text-2);background:var(--surface);border-radius:999px;flex:none;padding:3px 8px;font-size:11px;font-weight:600}.badge.yt{color:#ffa3a3;background:#1d1417;border-color:#40282c}.badge.file{color:#97cdff;background:#121a23;border-color:#23364a}.library{padding:26px 22px calc(40px + var(--safe-b));flex:1;overflow-y:auto}.songs{grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px;max-width:1160px;margin:0 auto;display:grid}.song-card{background:linear-gradient(var(--surface-2), var(--surface));border:1px solid var(--hairline-soft);border-radius:var(--r-lg);cursor:pointer;transition:border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);flex-direction:column;gap:12px;padding:17px 17px 14px;display:flex;position:relative}.song-card:hover{border-color:#33405a;transform:translateY(-2px);box-shadow:0 12px 28px #00000061}.song-card .name{letter-spacing:-.2px;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15.5px;font-weight:650;line-height:1.4;display:-webkit-box;overflow:hidden}.song-card .meta{color:var(--text-3);align-items:center;gap:8px;font-size:12px;display:flex}.progress{background:var(--surface-3);border-radius:99px;height:3px;overflow:hidden}.progress i{background:linear-gradient(90deg, var(--accent-deep), var(--accent));border-radius:99px;height:100%;display:block}.empty{text-align:center;color:var(--text-2);max-width:470px;margin:0 auto;padding:72px 20px;font-size:14px;line-height:1.85}.empty .empty-title{color:var(--text);margin-bottom:10px;font-size:17px;font-weight:600}.add{padding:26px 22px calc(48px + var(--safe-b));flex:1;overflow-y:auto}.add-inner{flex-direction:column;gap:20px;max-width:620px;margin:0 auto;display:flex}.field{flex-direction:column;gap:8px;display:flex}.field label{color:var(--text-2);letter-spacing:.2px;font-size:12.5px;font-weight:600}.hint{color:var(--text-3);margin:0;font-size:12px;line-height:1.7}.drop{border:1.5px dashed var(--hairline);border-radius:var(--r-lg);text-align:center;color:var(--text-2);cursor:pointer;background:var(--surface);transition:border-color .16s var(--ease), background .16s var(--ease);padding:34px 20px}.drop:hover{border-color:#38445a}.drop.over{border-color:var(--accent);color:var(--accent);background:#1a1710}.error{color:var(--danger);margin:0;font-size:13px}.notice{color:#ffb9b9;border-radius:var(--r-md);background:#1d1417;border:1px solid #40282c;padding:13px 15px;font-size:13px;line-height:1.7}.stage{flex:1;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) 384px;min-height:0;display:grid}.lyrics-wrap{grid-area:1/1/span 2;min-width:0;display:flex;position:relative}.lyrics-pane{scroll-behavior:smooth;flex:1;min-width:0;padding:22vh 34px 42vh;overflow-y:auto}.lyrics-pane.sync-pane{padding:0 34px 44vh}.lyrics-pane.practice{-webkit-mask-image:linear-gradient(#0000 0,#000 12% 84%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 12% 84%,#0000 100%)}.lines{flex-direction:column;max-width:880px;margin:0 auto;display:flex}.lines.editor{gap:14px;padding-top:20px}.sync-head{z-index:4;background:linear-gradient(var(--bg) 72%, #0b0d1100);width:100%;max-width:880px;margin:0 auto;padding:16px 0 18px;position:sticky;top:0}.sync-head-row{color:var(--text-3);align-items:baseline;gap:12px;margin-bottom:9px;font-size:12.5px;display:flex}.sync-head-row b{color:var(--accent);font-size:14px;font-weight:700}.sync-head-tip{margin-left:auto}.meter{background:var(--surface-3);border-radius:99px;height:2px;overflow:hidden}.meter i{background:var(--accent);height:100%;transition:width .3s var(--ease);border-radius:99px;display:block}.line-slot{flex-direction:column;display:flex}.line{border-radius:var(--r-md);cursor:pointer;transition:background .16s var(--ease);align-items:baseline;gap:16px;padding:9px 14px;display:flex;position:relative}.line:before{content:"";background:var(--accent);opacity:0;width:2px;transition:opacity .18s var(--ease), transform .18s var(--ease);border-radius:2px;position:absolute;top:12%;bottom:12%;left:0;transform:scaleY(.4)}.line:hover{background:var(--surface)}.line.blank{cursor:default;min-height:14px;padding:0 14px}.line.blank:hover{background:0 0}.line .tc{text-align:right;font-variant-numeric:tabular-nums;width:66px;color:var(--text-3);opacity:.55;transition:opacity .16s var(--ease), color .16s var(--ease);flex:none;font-size:12px}.line.stamped .tc{opacity:1;color:#7d6a41}.line .tx{letter-spacing:-.3px;color:var(--text-2);transition:color .18s var(--ease), font-size .18s var(--ease);font-size:25px;line-height:1.5}.line.now .tx{color:var(--text)}.line.cursor{background:var(--surface-2)}.line.cursor:before{opacity:1;transform:scaleY(1)}.line.cursor .tc{color:var(--accent);opacity:1}.line.cursor .tx{color:var(--text)}.practice .line .tx{color:var(--text-3);font-size:27px}.practice .line.near .tx{color:var(--text-2)}.practice .line.active .tx{color:var(--accent);letter-spacing:-.9px;text-shadow:0 0 34px #ffd4792e;font-size:40px;font-weight:700}.practice .line.active:before{opacity:1;transform:scaleY(1)}.practice .line .tc{opacity:0}.practice .line:hover .tc{opacity:.6}.line-edit{color:var(--text-3);opacity:0;transition:opacity .16s var(--ease);background:0 0;border-color:#0000;margin-left:auto;padding:4px 9px;font-size:12px}.line:hover .line-edit,.line.active .line-edit{opacity:1}.line-edit:hover{color:var(--accent);border-color:var(--hairline);background:var(--surface-2)}.strip{background:linear-gradient(var(--surface-2), var(--surface));border:1px solid var(--hairline);border-radius:var(--r-md);animation:strip-in .18s var(--ease);flex-direction:column;gap:9px;margin:6px 0 14px 14px;padding:12px 14px;display:flex}@keyframes strip-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.strip-row{align-items:center;gap:7px;display:flex}.strip-row.wrap{flex-wrap:wrap}.strip-row button{padding:7px 12px;font-size:13px}.strip-time{font-variant-numeric:tabular-nums;color:var(--accent);text-align:center;letter-spacing:.3px;min-width:96px;font-size:17px;font-weight:700}.strip-label{color:var(--text-3);font-size:12px}.strip-sep{background:var(--hairline);width:1px;height:18px;margin:0 3px}.strip-empty{color:var(--text-3);font-size:13px;line-height:1.6}.strip-empty b{color:var(--accent);font-weight:600}.ad-veil{z-index:8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade-in .2s var(--ease);background:#0b0d11d1;place-items:center;padding:24px;display:grid;position:absolute;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.ad-card{text-align:center;background:linear-gradient(var(--surface-2), var(--surface));border:1px solid var(--hairline);border-radius:var(--r-xl);max-width:380px;padding:28px 26px 24px;box-shadow:0 24px 60px #00000080}.ad-card strong{margin-bottom:10px;font-size:16px;font-weight:650;display:block}.ad-card p{color:var(--text-2);margin:0 0 14px;font-size:13.5px;line-height:1.75}.ad-card p b{color:var(--text);font-weight:600}.ad-note{color:var(--text-3);border-top:1px solid var(--hairline-soft);padding-top:13px;font-size:11.5px;display:block}.ad-dots{justify-content:center;gap:6px;margin-bottom:16px;display:flex}.ad-dots i{background:var(--accent);width:7px;height:7px;animation:ad-pulse 1.1s var(--ease) infinite;border-radius:50%}.ad-dots i:nth-child(2){animation-delay:.16s}.ad-dots i:nth-child(3){animation-delay:.32s}@keyframes ad-pulse{0%,to{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.player-box{border-left:1px solid var(--hairline-soft);background:#000;grid-area:1/2;justify-content:center;align-items:flex-start;display:flex}.video-box{aspect-ratio:16/9;background:#000;width:100%}.video-box>iframe,.video-box:not(.file-box)>div{border:0;width:100%;height:100%}.file-box{background:radial-gradient(circle at 50% 42%,#1a2029,#0a0c10 72%);flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.file-mark{color:var(--accent);opacity:.75;font-size:30px}.file-name{color:var(--text-3);text-align:center;padding:0 20px;font-size:12.5px}.side{border-left:1px solid var(--hairline-soft);background:var(--surface);grid-area:2/2;min-height:0;overflow-y:auto}.sheet-grip,.sheet-scrim,.mobile-bar{display:none}.side-body{padding:18px 17px calc(24px + var(--safe-b));flex-direction:column;gap:22px;display:flex}.group{flex-direction:column;gap:9px;display:flex}.group h3{color:var(--text-3);letter-spacing:1.1px;text-transform:uppercase;margin:0 0 1px;font-size:11px;font-weight:700}.row{align-items:center;gap:8px;display:flex}.grow{flex:1}.stamp-btn{letter-spacing:-.2px;padding:17px 0;font-size:15.5px}.rates{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.rates button{padding:8px 0;font-size:12.5px}.ab{grid-template-columns:1fr 1fr;gap:6px;display:grid}.ab-info{color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:.2px;font-size:12px}.marks{flex-direction:column;gap:5px;display:flex}.mark{align-items:center;gap:6px;display:flex}.mark button.jump{text-align:left;flex:1;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;font-size:13px;display:flex}.mark button.jump em{font-variant-numeric:tabular-nums;color:var(--text-3);font-size:11.5px;font-style:normal}.mark .del{color:var(--text-3);padding:8px 10px;font-size:11px}.transport{padding:11px 18px calc(11px + var(--safe-b));background:linear-gradient(#12151ceb, var(--surface));border-top:1px solid var(--hairline-soft);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex:none;align-items:center;gap:14px;display:flex}.time{font-variant-numeric:tabular-nums;color:var(--text-2);letter-spacing:.3px;flex:none;font-size:12.5px}.time.dim{color:var(--text-3)}.play-btn{background:linear-gradient(var(--accent), var(--accent-deep));width:44px;height:44px;color:var(--accent-ink);border-color:#0000;border-radius:50%;flex:none;place-items:center;padding:0;font-size:13px;display:grid}.play-btn:hover:not(:disabled){background:linear-gradient(#ffe0a0,#f5c264)}.scrub{cursor:pointer;flex:1;align-items:center;height:30px;display:flex;position:relative}.scrub .track{background:var(--surface-3);border-radius:99px;width:100%;height:4px;position:relative}.scrub .fill{background:linear-gradient(90deg, var(--accent-deep), var(--accent));border-radius:99px;position:absolute;top:0;bottom:0;left:0}.scrub .ab-range{background:#6bd6a038;border-radius:3px;position:absolute;top:-2px;bottom:-2px}.scrub .ab-range.on{background:#6bd6a06b}.scrub .knob{background:var(--accent);opacity:0;width:11px;height:11px;transition:opacity .16s var(--ease);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #0b0d11e6}.scrub:hover .knob{opacity:1}@media (width<=900px){.stage{flex-direction:column;display:flex}.player-box{border-left:none;border-bottom:1px solid var(--hairline-soft);flex:none;order:0}.lyrics-wrap{flex:1;order:1;min-height:0}.lyrics-pane{padding:16px 14px 26px}.lyrics-pane.sync-pane{padding:0 14px 26px}.lyrics-pane.practice{-webkit-mask-image:linear-gradient(#0000 0,#000 9% 88%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 9% 88%,#0000 100%)}.side{z-index:30;border-left:none;border-top:1px solid var(--hairline);border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:80vh;transition:transform .26s var(--ease);padding-left:var(--safe-l);padding-right:var(--safe-r);position:fixed;bottom:0;left:0;right:0;transform:translateY(101%);box-shadow:0 -18px 50px #0000008c}.side.open{transform:none}.sheet-scrim{z-index:29;animation:fade-in .2s var(--ease);background:#0000008c;display:block;position:fixed;inset:0}.sheet-grip{text-align:center;cursor:pointer;padding:11px 0 3px;display:block}.sheet-grip span{background:var(--hairline);border-radius:99px;width:42px;height:4px;display:inline-block}.mobile-bar{background:var(--surface);border-top:1px solid var(--hairline-soft);flex:none;align-items:center;gap:7px;padding:9px 12px;display:flex}.mobile-bar button{padding:14px 13px;font-size:14.5px}.mobile-bar button.primary{font-size:15px}.side .stamp-group{display:none}.topbar{padding:9px 12px;padding-top:calc(9px + var(--safe-t));gap:8px}.topbar h1{font-size:14.5px}.segmented button{padding:7px 13px}.sync-head{padding:12px 0 14px}.sync-head-tip{display:none}.line{gap:11px;padding:10px}.line .tc{width:52px;font-size:11.5px}.line .tx{font-size:20px}.practice .line .tx{font-size:21px}.practice .line.active .tx{letter-spacing:-.5px;font-size:30px}.line-edit{opacity:1}.strip{margin:5px 0 12px 6px;padding:11px}.strip-row button{flex:1;padding:10px 6px;font-size:13px}.strip-time{min-width:82px;font-size:15px}.strip-row.wrap button{flex:none}.strip-sep{display:none}.transport{padding:9px 12px calc(9px + var(--safe-b));gap:11px}.play-btn{width:40px;height:40px}.scrub .knob{opacity:1}.library{padding:16px 14px calc(36px + var(--safe-b))}.songs{grid-template-columns:1fr}.add{padding:18px 14px calc(40px + var(--safe-b))}.empty{padding:46px 16px}}@media (width<=900px) and (orientation:landscape){.stage{flex-flow:wrap}.player-box{border-bottom:none;border-left:1px solid var(--hairline-soft);background:var(--surface);order:1;align-items:flex-start;padding:8px}.video-box{aspect-ratio:16/9;width:auto;height:min(46vh,210px)}.lyrics-wrap{flex:1;order:0}.practice .line.active .tx{font-size:25px}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}.lyrics-pane{scroll-behavior:auto}}