:root{--bg:#0b0d11;--panel:#141820;--panel-2:#1a1f28;--border:#252b35;--text:#e8ebf0;--muted:#9aa4b2;--faint:#6b7584;--paper:#fbfaf7;--radius:12px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg)}button{font:inherit;color:inherit}.loading{height:100%;color:var(--muted);place-items:center;display:grid}.app{grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;height:100vh;padding:10px 14px 14px;display:grid}.topbar{grid-row:1;align-items:center;gap:8px;min-width:0;display:flex}.brand{flex:0 4 auto;align-items:center;gap:10px;min-width:30px;margin-right:8px;display:flex}.brand h1{letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:16px;font-weight:650;overflow:hidden}.brand>svg{flex:none}.topbar-end{flex:none;align-items:center;gap:8px;margin-left:auto;display:flex}.pill{border:1px solid var(--border);background:var(--panel-2);height:32px;color:var(--text);white-space:nowrap;cursor:pointer;border-radius:8px;align-items:center;gap:7px;padding:0 12px;font-size:13px;display:inline-flex}.pill:hover{border-color:#3a4250}.pill:focus-visible{outline-offset:1px;outline:2px solid #c9d1dc}.pill-label{color:var(--muted)}.pill-value{font-weight:600}.picker{flex:none;min-width:0;position:relative}.picker-button.open{background:#202632;border-color:#3a4250}.picker-caret{color:var(--muted);flex:none}.picker-menu{z-index:30;background:var(--panel);border:1px solid var(--border);border-radius:10px;width:max-content;min-width:max(100%,200px);max-width:min(480px,100vw - 32px);max-height:60vh;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 4px);left:0;overflow:auto;box-shadow:0 10px 30px #00000080}.picker-menu.right{left:auto;right:0}.picker-option{cursor:pointer;border-radius:7px;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:6px 10px 6px 26px;display:flex;position:relative}.picker-option.active{background:var(--panel-2)}.picker-option.on:before{content:"✓";color:var(--text);font-size:12px;position:absolute;top:6px;left:9px}.option-name{font-size:13px;font-weight:650}.option-sub{max-width:100%;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.song-picker{flex:0 auto}.song-picker .picker-button{max-width:100%}.song-picker .song-title{flex:none;font-size:14px;font-weight:650}.song-picker .song-en{text-overflow:ellipsis;min-width:0;color:var(--muted);font-size:12px;overflow:hidden}.picker-option .song-title{font-size:14px;font-weight:600}.swatches{flex:none;gap:3px;display:inline-flex}.swatches i{border-radius:50%;width:7px;height:7px}.picker-option .swatches{gap:4px;margin-top:4px}.picker-option .swatches i{width:10px;height:10px}.level-fixed{cursor:default;flex:none}.level-fixed:hover{border-color:var(--border)}.listen{flex:none}.listen.on{color:#0b0d10;background:#e8ebf0;border-color:#e8ebf0;font-weight:600}.listen:disabled{opacity:.4;cursor:default}.upload.disabled{color:var(--faint);cursor:not-allowed;background:0 0;border-style:dashed}.upload.disabled:hover{border-color:var(--border)}.version-toggle{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;flex:none;gap:2px;height:32px;padding:2px;font-size:13px;display:flex}.version-toggle a,.version-toggle span{color:var(--muted);border-radius:6px;align-items:center;padding:0 12px;text-decoration:none;display:flex}.version-toggle a:hover{color:var(--text)}.version-toggle .on{color:#0b0d10;background:#e8ebf0;font-weight:600}.banner{grid-row:2}.main{grid-row:3;grid-template-columns:280px minmax(0,1fr) 270px;gap:10px;min-height:0;display:grid}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);min-height:0;padding:12px 14px;overflow:auto}.panel h2{color:var(--text);margin:0;font-size:14px;font-weight:650}.panel-sub{color:var(--faint);margin:2px 0 8px;font-size:12px}.hint{color:var(--faint);margin:10px 0 0;font-size:12px;line-height:1.45}.ghost-btn{background:var(--panel-2);border:1px solid var(--border);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:6px 10px;font-size:13px;display:inline-flex}.ghost-btn:hover{border-color:#3a4250}.banner{border:1px solid var(--border);background:var(--panel-2);border-radius:10px;align-items:center;gap:12px;padding:8px 12px;font-size:13px;display:flex}.banner.ok{background:#13261b;border-color:#2c6b45}.banner.info{background:#142033;border-color:#3b5478}.banner.error{background:#2a1515;border-color:#7a3434}.banner-close{cursor:pointer;color:var(--muted);background:0 0;border:0;margin-left:auto;font-size:18px;line-height:1}.stage{border:1px solid var(--border);border-radius:var(--radius);background:#0e1116;grid-template-rows:minmax(0,1fr) auto;min-height:0;display:grid;position:relative;overflow:hidden}.kit{-webkit-user-select:none;user-select:none;width:100%;height:100%;min-height:0;display:block}.piece{cursor:pointer}.piece .flash,.piece .bloom{fill:var(--c);pointer-events:none}.piece .ring-in{fill:none;stroke:var(--c);stroke-width:8px;transform-box:fill-box;transform-origin:50%;pointer-events:none}.piece-cymbal .ring-in{stroke-width:6px}.piece-kick .flash{fill-opacity:.75}.piece-cymbal .flash.ring{fill-opacity:.22;stroke:var(--c);stroke-width:14px}.piece .rim{fill:none;stroke:#9aa3ad;stroke-width:5px}.piece .outline{fill:none;stroke:var(--c);stroke-width:4px;stroke-dasharray:12 9;opacity:0;pointer-events:none;transition:opacity .15s}.piece.hover .outline{opacity:.95}.kit-label{fill:#c5ccd6;opacity:.85;paint-order:stroke;stroke:#0e1116;stroke-width:7px;font-size:30px;font-weight:600}.chip-bg{fill:var(--c);stroke:#0e1116;stroke-width:5px}.chip-text{fill:#0b0d10;font-size:38px;font-weight:800}.countin{color:#e8ebf0e6;text-shadow:0 4px 30px #000000b3;pointer-events:none;place-items:center;font-size:min(22vh,180px);font-weight:800;display:grid;position:absolute;inset:0}.newin,.nudge{border-radius:10px;align-items:center;gap:10px;font-size:13px;display:flex;position:absolute;top:10px;box-shadow:0 6px 24px #00000073}.newin{background:#142033;border:1px solid #3b5478;max-width:min(560px,100% - 20px);padding:8px 10px 8px 14px;line-height:1.4;left:50%;transform:translate(-50%)}.nudge{background:var(--panel-2);border:1px solid var(--border);padding:3px 8px 3px 3px;right:10px}.nudge-go{color:#0b0d10;cursor:pointer;background:#e8ebf0;border:0;border-radius:7px;padding:5px 10px;font-size:13px;font-weight:600}.nudge-go:hover{background:#fff}.stage-caption{color:var(--faint);text-align:center;margin:0;padding:2px 12px 8px;font-size:12px}.stage-caption b{color:var(--text)}.stage-caption span{color:var(--muted)}.karaoke{text-align:center;gap:1px;padding:4px 14px 9px;line-height:1.35;display:grid}.karaoke p{white-space:nowrap;min-height:1.35em;margin:0;overflow:hidden}.karaoke-now{color:#7d8796;font-size:19px;font-weight:600}.karaoke-now.upcoming{color:#5a6372}.karaoke-now span{border-radius:5px;padding:0 .06em}.karaoke-now .sung{color:var(--text)}.karaoke-now .cur{color:#fff;background:#4078ff73}.karaoke-now .karaoke-rest{color:#4b5566}.karaoke-next{color:#5a6372;font-size:13px}.now{border-top:1px solid var(--border);grid-template-columns:auto 1fr;align-items:center;gap:8px 10px;margin-top:auto;padding-top:12px;display:grid}.now-pills{align-items:center;min-height:24px}.now-label{color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.now-pills{flex-wrap:wrap;gap:4px;display:flex}.now-pill{color:#0b0d10;background:var(--c);border-radius:999px;padding:3px 8px;font-size:12.5px;font-weight:600}.now-pill.next{color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c);background:0 0}.now-empty{color:var(--faint)}.hh-note{background:var(--panel-2);color:var(--muted);border-radius:8px;margin:6px 0 0;padding:6px 9px;font-size:11.5px;line-height:1.5}.hh-note b{color:var(--text);font-weight:600}.hat-glyph{vertical-align:-3px;color:var(--text)}.legend-staff{width:100%;margin-bottom:6px;display:block}.legend-note{cursor:pointer}.legend-short{fill:#444;font-size:10px;font-weight:700}.legend-note.hover .legend-short{fill:#000}.legend-rows{gap:2px;margin:0;padding:0;list-style:none;display:grid}.legend-row{--hit:0;cursor:pointer;background:color-mix(in srgb, var(--c) calc(var(--hit) * 22%), transparent);border-radius:8px;grid-template-columns:16px auto 1fr;align-items:center;column-gap:8px;padding:3px 6px;display:grid}.legend-row.hover{background:#222833}.legend.compact .legend-rows{gap:0}.legend.compact .legend-row{padding:0 6px}.legend.compact .legend-name{font-size:12.5px}.legend.compact .legend-staff{margin:6px 0 4px}.legend.compact .panel-sub{display:none}.legend.compact .hh-note{line-height:1.4}.swatch{background:var(--c);border-radius:50%;width:16px;height:16px}.swatch.ring{background:color-mix(in srgb, var(--c) 22%, transparent);border:3.5px solid var(--c)}.legend-name{font-size:13px;font-weight:600}.legend-hand{color:var(--muted);font-size:11.5px;font-weight:400}.legend-pos{color:var(--muted);text-align:right;white-space:nowrap;font-size:11.5px}.legend-shape{text-align:center;width:12px;color:var(--text);display:inline-block}.transport{flex-direction:column;gap:11px;display:flex}.transport-row{gap:8px;display:flex}.transport-row.rewind{margin-top:-6px}.transport-row.rewind .ghost-btn{flex:1;justify-content:center}.play{color:#0b0d10;cursor:pointer;background:#e8ebf0;border:0;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:8px;padding:10px 14px;font-size:15px;font-weight:700;display:inline-flex}.play:hover{background:#fff}.tempo{gap:6px;display:grid}.tempo-head{color:var(--muted);justify-content:space-between;font-size:13px;display:flex}.tempo-value{color:var(--text);font-variant-numeric:tabular-nums}.tempo input[type=range]{accent-color:#e8ebf0;width:100%}.sound-group{gap:7px;display:grid}.sound-row{grid-template-columns:auto minmax(60px,1fr);align-items:center;gap:10px;display:grid}.sound-row input[type=range],.sync input[type=range]{accent-color:#e8ebf0;width:100%}.sound-row.off input[type=range]{opacity:.45}.sound-more{color:var(--faint);align-self:center;font-size:12px}.sound-more[open]{grid-column:1/-1}.sound-more summary{cursor:pointer;width:max-content}.sound-more summary:hover{color:var(--muted)}.sync{grid-template-columns:1fr auto;align-items:center;gap:8px;margin-top:6px;display:grid}.sync-value{text-align:right;min-width:52px;color:var(--text);font-variant-numeric:tabular-nums}.sync-help{margin-top:2px;line-height:1.4;display:block}.toggles{grid-template-columns:1fr 1fr;gap:8px 6px;display:grid}.toggle{cursor:pointer;align-items:center;gap:10px;font-size:13px;display:flex}.toggle input{opacity:0;width:1px;height:1px;position:absolute}.toggle-track{background:#2a313c;border-radius:999px;flex:none;width:32px;height:18px;transition:background .15s;position:relative}.toggle-track:after{content:"";background:#9aa4b2;border-radius:50%;width:14px;height:14px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.toggle input:checked+.toggle-track{background:#4b5566}.toggle input:checked+.toggle-track:after{background:#e8ebf0;transform:translate(14px)}.toggle input:focus-visible+.toggle-track{outline-offset:2px;outline:2px solid #c9d1dc}.score-area{grid-row:4;gap:6px;display:grid}.score-head{align-items:center;gap:14px;min-width:0;display:flex}.position{white-space:nowrap;font-variant-numeric:tabular-nums;align-items:baseline;gap:4px;font-size:14px;display:flex}.position .of{color:var(--faint)}.section-name{background:var(--panel-2);border:1px solid var(--border);color:var(--muted);border-radius:6px;margin-left:8px;padding:2px 8px;font-size:12px}.beats{align-self:center;gap:5px;margin-left:10px;display:inline-flex}.beats i{background:#2a313c;border-radius:50%;width:8px;height:8px}.beats i.on{background:#e8ebf0}.view-switch{background:var(--panel);border:1px solid var(--border);border-radius:9px;gap:2px;margin-left:6px;padding:3px;display:flex}.seg{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:3px 10px;font-size:12px}.seg.active{color:#0b0d10;background:#e8ebf0}.seg.disabled{color:var(--faint);cursor:not-allowed}.sections{scrollbar-width:none;gap:4px;margin-left:auto;display:flex;overflow-x:auto}.chip{border:1px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;border-radius:999px;flex:none;padding:3px 10px;font-size:12px}.chip:hover{color:var(--text)}.chip.active{color:#0b0d10;background:#e8ebf0;border-color:#e8ebf0}.score-strip{border-radius:var(--radius);background:#fff;grid-template-rows:1fr 1fr;height:clamp(200px,31vh,340px);padding:4px 10px;display:grid;overflow:hidden}.band{width:100%;height:100%;min-height:0;display:block}.loop-fill{fill:#4078ff14}.loop-edge{stroke:#4078ffb3}.loop-box{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;gap:7px;padding:8px 10px;display:grid}.loop-head{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:flex}.loop-head .loop-modes{flex:1}.loop-info{color:#a9c1ff;font-variant-numeric:tabular-nums;font-size:12.5px}.loop-modes{background:var(--panel);border-radius:8px;grid-template-columns:repeat(4,1fr);gap:2px;padding:3px;display:grid}.loop-modes .seg{padding:4px 0}.loop-custom{color:var(--faint);font-size:11.5px}.transport .hint{margin:0}@media (height<=940px){.transport .hint{display:none}}.next-veil{fill:#fff;opacity:.35;pointer-events:none}.halo{mix-blend-mode:multiply;stroke-width:0;pointer-events:none}.halo[data-lit]{stroke-width:1.2px}.halo.dim{fill-opacity:.2;stroke-opacity:.2}.measure-box{fill:#19284612;stroke:#19284647;stroke-width:.6px;pointer-events:none}.playhead{stroke:#1b2330;stroke-width:1.2px;opacity:.8;pointer-events:none}.seek{fill:#0000;cursor:pointer}.cs-staff{stroke:#111317;stroke-width:1px;vector-effect:non-scaling-stroke}.cs-ledger,.cs-bar{stroke:#111317;stroke-width:1.6px}.cs-stem{stroke:#111317;stroke-width:1.3px}.cs-timesig text{font-variant-numeric:lining-nums;fill:#111317;font:900 29px Times New Roman,Times,serif}.cs-mnum{fill:#111317;font:16px Times New Roman,Times,serif}.cs-tempo text{fill:#111317;font:700 24px Times New Roman,Times,serif}.cs-section rect{fill:#eef1f5;stroke:#c3cad4;stroke-width:.8px}.cs-section text{fill:#2b3038;font-size:10.5px;font-weight:650}.cs-sticking{fill:#111317;font:22px Times New Roman,Times,serif}.cs-halo{mix-blend-mode:multiply;pointer-events:none}.cs-halo.dim{fill-opacity:.22}.cs-tuplet{fill:#111317;font-family:Times New Roman,Times,serif;font-style:italic}.cs-text{fill:#111317;font-family:Times New Roman,Times,serif}.cs-chord.dim{opacity:.22}.cs-lyric text{fill:#4f5560}.cs-lyric .lyric-pill{fill:#4078ff33;opacity:0}.cs-lyric[data-sung=sung] text{fill:#5578c8}.cs-lyric[data-sung=cur] text{fill:#1f4fcf;font-weight:700}.cs-lyric[data-sung=cur] .lyric-pill{opacity:1}.page-lyric{fill:#4078ff4d;mix-blend-mode:multiply;opacity:0;pointer-events:none}.page-lyric[data-sung=sung]{opacity:.35}.page-lyric[data-sung=cur]{opacity:1}.cs-playhead{stroke-width:1.4px}.seek:hover{fill:#1e3c780f}@media (width>=1101px) and (width<=1270px){.brand h1{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.brand{margin-right:4px}}@media (width<=1100px){.app{height:auto;min-height:100vh}.topbar{flex-wrap:wrap}.main{grid-template-columns:1fr 1fr}.stage{aspect-ratio:16/10;order:-1;grid-column:1/-1}}@media (width<=700px){.main{grid-template-columns:1fr}.topbar-end{display:contents}.stage-caption{display:none}.score-head{flex-wrap:wrap}.sections{width:100%;margin-left:0}}