:root{--bg: #0e1218;--panel: #151b24;--panel-2: #1b2330;--border: #283244;--text: #e3e8f0;--muted: #8794a8;--accent: #5aa9ff;--danger: #ff5c6c;--lyric-font: 500 15px/26px "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;--lyric-pad-y: 10px;--lyric-pad-x: 12px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:13px/1.4 Segoe UI,system-ui,-apple-system,Roboto,sans-serif;overflow:hidden}button,input,select{font:inherit;color:inherit}button{background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;touch-action:manipulation}@media(hover:hover){button:hover:not(:disabled){border-color:#3d4b63;background:#222c3c}}button:disabled{opacity:.4;cursor:default}button.on,button.toggle.on{background:#1d3a5f;border-color:var(--accent);color:#fff}input[type=number],input:not([type]),select{background:#0f141c;border:1px solid var(--border);border-radius:6px;padding:3px 6px}input[type=number]{width:64px}input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}label{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}label select,label input{color:var(--text)}kbd{display:inline-block;min-width:18px;padding:0 4px;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;background:var(--panel-2);font:11px/16px ui-monospace,Consolas,monospace;text-align:center;color:var(--text)}.muted{color:var(--muted)}.small{font-size:12px}.app{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}.topbar{background:var(--panel);border-bottom:1px solid var(--border);padding:6px 12px;display:flex;flex-direction:column;gap:6px}.bar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.brand{font-weight:700;letter-spacing:.02em;color:var(--accent)}.title-input{width:220px;font-weight:600}.spacer{flex:1}.divider{width:1px;height:22px;background:var(--border)}.play{min-width:84px;font-weight:600}.play.on{background:#3a1f24;border-color:var(--danger)}.rec.on{background:#5a1620;border-color:var(--danger);color:#fff;animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 3px #ff5c6c59}}.seg{display:inline-flex}.seg button{border-radius:0}.seg button:first-child{border-radius:6px 0 0 6px}.seg button:last-child{border-radius:0 6px 6px 0;margin-left:-1px}.tempo-tools{display:inline-flex;gap:2px;margin-left:-4px}.tempo-tools button{padding:4px 7px}.zoom{display:inline-flex;gap:2px}.zoom button{width:28px;padding:4px 0}.section-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap}.tabs{display:flex;gap:4px;flex-wrap:wrap}.tab{display:inline-flex;align-items:center;gap:8px}.tab.active{background:#24324a;border-color:var(--accent);color:#fff}.tab-bars{font-size:11px;color:var(--muted);background:#0f141c;border-radius:8px;padding:0 6px}.tab.add{width:30px;padding:4px 0}.tab-rename{width:140px}.section-tools{display:flex;align-items:center;gap:6px}.section-tools input{width:52px}.workspace{display:grid;grid-template-columns:minmax(280px,30%) minmax(0,1fr);min-height:0}.left{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--panel)}.lyric-editor{flex:1;min-height:0;display:flex}.lyric-gutter{width:52px;flex:none;overflow:hidden;padding-top:var(--lyric-pad-y);background:#121821;border-right:1px solid var(--border)}.gutter-line{height:26px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;border-left:3px solid var(--c);cursor:pointer;font-size:11px;color:var(--muted)}.gutter-line.focused{background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--text)}.gutter-line{gap:4px}.gutter-line.muted{border-left-style:dashed}.gutter-line.muted .count{text-decoration:line-through}.mute-btn{display:inline-grid;place-items:center;width:20px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;color:#5d6a7e}@media(hover:hover){.mute-btn:hover:not(:disabled){background:#22314a;color:var(--text)}}.mute-btn.on{color:var(--danger);background:#ff5c6c1f}.lane-label .mute-btn{margin-left:auto;margin-right:4px}.lane-label.muted{opacity:.6}.note.muted{opacity:.35;filter:grayscale(.8)}.lyric-stack{position:relative;flex:1;min-width:0;overflow:hidden}.lyric-text{font:var(--lyric-font);letter-spacing:0;-moz-tab-size:4;tab-size:4;white-space:pre;padding:var(--lyric-pad-y) var(--lyric-pad-x)}.lyric-backdrop{position:absolute;top:0;left:0;min-width:100%;color:transparent;pointer-events:none}.bd-line{height:26px;margin:0 calc(-1 * var(--lyric-pad-x));padding:0 var(--lyric-pad-x)}.bd-line.focused{background:color-mix(in srgb,var(--c) 10%,transparent)}.syl{border-radius:3px;box-shadow:inset 0 -2px 0 var(--c)}.syl.odd{box-shadow:inset 0 -2px color-mix(in srgb,var(--c) 40%,transparent)}.syl.accent{box-shadow:inset 0 -4px 0 var(--c)}.syl.playing{background:color-mix(in srgb,var(--c) 45%,transparent)}.lyric-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;border:0;resize:none;outline:none;background:transparent;color:var(--text);caret-color:#fff;overflow:auto}.lyric-input::placeholder{color:#5d6a7e}.inspector{border-top:1px solid var(--border);padding:10px 12px 12px;background:#121821;max-height:45%;overflow:auto}.inspector h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.inspector ul{margin:0;padding-left:16px;color:var(--muted);line-height:1.9}.inspector dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0}.inspector dt{color:var(--muted)}.inspector dd{margin:0}.inspector .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.check{color:var(--text)}.word-split{display:flex;align-items:stretch;font:600 22px/1.3 Segoe UI,system-ui,sans-serif}.letter{padding:0 1px;border-radius:3px}.letter.sel{background:#24324a;color:#fff}.gap{width:9px;padding:0;border:0;border-radius:2px;background:transparent;position:relative}.gap:after{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:1px;background:#3a465a}@media(hover:hover){.gap:hover{background:#22314a}}.gap.cut:after{width:3px;left:3px;background:var(--accent)}.roll{position:relative;overflow:auto;min-width:0;min-height:0;background:#0b0f15;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-x pan-y}.roll.empty{display:grid;place-items:center;color:var(--muted)}.roll-inner{display:grid;position:relative;width:max-content}.roll-corner{position:sticky;top:0;left:0;z-index:6;background:#10151d;border-right:1px solid var(--border);border-bottom:1px solid var(--border);font-size:10px;color:var(--muted);display:grid;place-items:center;text-transform:uppercase;letter-spacing:.06em}.roll-ruler{position:sticky;top:0;z-index:5;background:#10151d;border-bottom:1px solid var(--border);cursor:pointer}.ruler-bar,.ruler-beat{position:absolute;top:0;bottom:0;padding:3px 0 0 4px;border-left:1px solid #4a5568;font-size:11px;color:var(--text)}.ruler-beat{top:12px;padding-top:0;border-left-color:#2d3748;font-size:9px;color:var(--muted)}.ruler-cursor{position:absolute;bottom:0;width:0;height:0;margin-left:-6px;border:6px solid transparent;border-bottom:8px solid #ffd166}.roll-keys{position:sticky;left:0;z-index:4;background:#10151d;border-right:1px solid var(--border)}.key{position:absolute;left:0;right:0;font-size:9px;line-height:14px;padding-left:4px;background:#c9d1dc;color:#2b313b;border-bottom:1px solid #a3adbb;cursor:pointer}.key.black{background:#262c36;color:#9aa6b8;border-bottom-color:#1b2028;right:18px}.key.in-scale:after{content:"";position:absolute;right:0;top:2px;bottom:2px;width:4px;border-radius:2px;background:var(--accent);opacity:.6}.key.black.in-scale:after{right:-18px}.key.tonic{font-weight:700}.key.tonic:after{opacity:1;background:#ffd166}.lane-label{position:absolute;left:0;right:0;display:flex;align-items:center;gap:6px;padding-left:8px;border-bottom:1px solid #1b2230;color:var(--muted);cursor:pointer}.lane-label .dot{width:10px;height:10px;border-radius:50%;background:var(--c)}.lane-label.focused{color:var(--text);background:color-mix(in srgb,var(--c) 15%,transparent)}.roll-content{position:relative;cursor:crosshair}.grid-bg{display:block}.row-in{fill:#18202c}.row-out{fill:#121820}.row-tonic{fill:#20304a}.octave-line{stroke:#33415a}.bar-line{stroke:#56657d;stroke-width:1.5}.beat-line{stroke:#2e3a4d}.step-line{stroke:#1d2531}.strong-beat{fill:#ffffff06}.cursor-line{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(255,209,102,.5);pointer-events:none}.note{position:absolute;display:flex;align-items:center;gap:2px;padding:0 4px;overflow:hidden;border-radius:4px;background:color-mix(in srgb,var(--c) 80%,#0b0f15);border:1px solid var(--c);color:#0b0f15;font:600 11px/1 Segoe UI,system-ui,sans-serif;white-space:nowrap;cursor:grab;touch-action:pan-x pan-y}.note:active{cursor:grabbing}.note.focused{background:var(--c)}.note.selected{outline:2px solid #fff;outline-offset:2px;z-index:2;touch-action:none}.note.active{background:#fff;box-shadow:0 0 12px var(--c);z-index:3}.note.accent{font-weight:800;padding-left:7px;box-shadow:inset 4px 0 #0b0f15}.note.accent.active{box-shadow:inset 4px 0 #0b0f15,0 0 12px var(--c)}.note.off-scale{background-image:repeating-linear-gradient(135deg,transparent 0 4px,rgba(0,0,0,.28) 4px 6px)}.accent-mark{font-size:14px;line-height:1}.note-text{overflow:hidden;text-overflow:ellipsis;pointer-events:none}.note-edge{position:absolute;right:0;top:0;bottom:0;width:7px;cursor:ew-resize}@media(hover:hover){.note-edge:hover{background:#ffffff59}}.playhead{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#ff5c6c;box-shadow:0 0 6px #ff5c6cb3;pointer-events:none;z-index:4}.marquee{position:absolute;border:1px dashed #9cc9ff;background:#5aa9ff1f;pointer-events:none;z-index:5}.press-ring{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid #9cc9ff;border-radius:50%;pointer-events:none;z-index:5;animation:press-ring .2s ease-out}@keyframes press-ring{0%{transform:scale(.3);opacity:0}}.backing{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--panel);border-top:1px solid var(--border);flex-wrap:wrap}.backing-title{font-weight:600}.file-name{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status{color:var(--muted);font-size:12px}.status.missing,.status.error{color:var(--danger)}.nudges{display:inline-flex;gap:2px}.nudges button{padding:4px 7px}.backing input[type=number]{width:76px}.toast{position:fixed;left:50%;bottom:56px;transform:translate(-50%);background:#2a3346;border:1px solid var(--border);border-radius:8px;padding:8px 14px;max-width:min(720px,calc(100vw - 32px));box-shadow:0 8px 24px #0006;z-index:50}html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{overscroll-behavior:none}@media(pointer:coarse),(max-width:760px),(max-height:520px){:root{--lyric-font: 500 16px/26px "Segoe UI", system-ui, -apple-system, Roboto, sans-serif}}@media(pointer:coarse){button{min-height:44px;min-width:44px}.mute-btn,.gap{min-height:0;min-width:0}input,select,textarea{font-size:16px}input:not([type]),input[type=number],input[type=text],select{min-height:44px}.lyric-gutter{width:64px}.mute-btn{flex:none;width:26px;height:26px}.word-split{font-size:28px}.gap{width:20px}.gap:after{left:9px}.gap.cut:after{left:8px}.note.grip{overflow:visible}.note.grip .note-edge{right:calc(-1 * var(--grip-out, 32px));top:-6px;bottom:-6px;width:28px;display:grid;place-items:center;border-radius:14px;background:#fff;box-shadow:0 1px 6px #00000080}.note.grip .note-edge:after{content:"";width:4px;height:40%;min-height:8px;border-left:2px solid #0b0f15;border-right:2px solid #0b0f15}}.app.mobile{height:100%;height:var(--vvh, 100dvh);grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"top" "view" "strip" "pad" "bar";overflow:hidden}.app.mobile .m-top,.app.mobile .m-bar,.app.mobile .m-strip{user-select:none;-webkit-user-select:none}.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:10px}.m-top{grid-area:top;min-width:0;background:var(--panel);border-bottom:1px solid var(--border);padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}.m-appbar{display:flex;align-items:center;gap:2px;padding:4px 6px 2px}.m-appbar{position:relative;z-index:61}.m-appbar .icon-btn{background:transparent;border-color:transparent}.song-btn{display:inline-flex;align-items:center;gap:8px;min-width:0;height:44px;padding:0 10px;border-color:transparent;background:transparent;font-size:16px;font-weight:600}.song-btn svg{flex:none}.song-title{overflow:hidden;text-overflow:ellipsis}.m-sections{min-width:0;padding:0 8px 6px}.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.app.mobile .chip{flex:none;display:inline-flex;align-items:center;gap:4px;height:40px;min-height:40px;max-width:60vw;padding:0 14px;border-radius:20px}.chip-name{overflow:hidden;text-overflow:ellipsis}.chip.active{background:#24324a;border-color:var(--accent);color:#fff}.app.mobile .chip.add{width:40px;min-width:40px;padding:0;justify-content:center}.m-view{grid-area:view;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}.app.mobile.view-lyrics .m-view{background:var(--panel)}.m-view>.lyric-editor,.m-view>.roll{flex:1;min-height:0}.app.mobile .toast{position:absolute;bottom:12px;width:max-content;max-width:calc(100% - 24px)}.m-strip{grid-area:strip;display:flex;align-items:center;gap:4px;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));background:var(--panel-2);border-top:1px solid var(--border)}.m-strip .icon-btn{flex:none}.strip-label{flex:1 1 auto;min-width:0;height:44px;display:inline-flex;align-items:center;justify-content:space-between;gap:4px;padding:0 10px;font-weight:600}.strip-text{overflow:hidden;text-overflow:ellipsis}.tap-pad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px 16px;background:#1a2130;border-top:1px solid var(--border);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}.app.mobile .tap-pad{grid-area:pad;height:clamp(160px,34vh,300px)}.tap-pad.down{background:#3a1f2a}.tap-pad.floating{position:fixed;left:50%;bottom:72px;transform:translate(-50%);width:min(560px,calc(100vw - 32px));height:200px;border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 32px #00000080;z-index:40}.tap-line{max-width:100%;font-size:16px;color:var(--muted);text-align:center}.tap-word+.tap-word{margin-left:.35em}.tap-line .done{opacity:.4}.tap-line .next{color:#fff;font-weight:700;text-decoration:underline 2px var(--danger);text-underline-offset:4px}.tap-next{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 44px/1.1 Segoe UI,system-ui,-apple-system,Roboto,sans-serif;color:#fff}.tap-hint{font-size:13px;color:var(--muted)}.m-bar{grid-area:bar;display:flex;align-items:center;gap:8px;padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:var(--panel);border-top:1px solid var(--border)}.view-switch button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 14px}.m-bar .icon-btn{width:48px;height:48px;border-radius:24px}.m-bar .play-btn{background:var(--accent);border-color:var(--accent);color:#0b0f15}.m-bar .play-btn.on{background:#3a1f24;border-color:var(--danger);color:#fff}.rec-btn{color:var(--danger)}.m-bar .rec-btn.on{background:#5a1620;border-color:var(--danger);color:#fff;animation:pulse 1s infinite}.sheet-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60}.sheet-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;animation:sheet-fade .15s ease-out}.sheet{position:absolute;left:0;right:0;bottom:0;max-height:min(85%,calc(100% - 56px - env(safe-area-inset-top)));display:flex;flex-direction:column;background:var(--panel);border-top:1px solid var(--border);border-radius:16px 16px 0 0;box-shadow:0 -8px 32px #00000080;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);outline:none;animation:sheet-up .18s ease-out}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 4px 16px;border-bottom:1px solid var(--border)}.sheet-head h2{margin:0;font-size:16px}.sheet-head .icon-btn{background:transparent;border-color:transparent}.sheet-body{overflow:auto;overscroll-behavior:contain;padding:12px 16px 16px;display:flex;flex-direction:column;gap:12px}.sheet-body h3{margin:6px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.sheet-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.sheet-row label{flex-wrap:wrap}.field{display:flex;flex-direction:column;align-items:stretch;gap:4px}.field>input:not([type]),.field>.title-input{width:100%}.field-label{color:var(--muted)}.tips{margin:0;padding-left:18px;color:var(--muted);line-height:1.6}button.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}.number-field{display:inline-flex;align-items:center;gap:4px}.number-field .step{width:40px;padding:0;font-size:18px}.m-backing{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.m-backing .file-name{flex:1 1 100%;max-width:100%;font-weight:600}.m-backing .muted{flex:1 1 100%}.m-backing label{flex-wrap:wrap}.m-backing input[type=number]{width:90px}.m-backing input[type=range]{width:180px}.m-inspector .inspector{max-height:none;overflow:visible;padding:0;border-top:0;background:transparent}.m-inspector .inspector h3{display:none}.m-inspector .word-split{flex-wrap:wrap}@keyframes sheet-up{0%{transform:translateY(100%)}}@keyframes sheet-in{0%{transform:translate(-100%)}}@keyframes sheet-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){.sheet,.sheet-backdrop{animation:none}}@media(orientation:landscape){.app.mobile{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar top strip pad" "bar view strip pad";padding-right:env(safe-area-inset-right)}.m-top{display:flex;align-items:center;padding:0}.m-sections{order:0;flex:1;padding:2px 8px}.m-appbar{order:1;flex:none;padding:0 4px 0 0}.m-appbar .spacer,.song-title{display:none}.song-btn{padding:0 8px;gap:2px}.m-bar{flex-direction:column;gap:6px;padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));border-top:0;border-right:1px solid var(--border)}.view-switch{flex-direction:column}.view-switch .seg-label{display:none}.view-switch button{width:48px;padding:0}.view-switch.seg button:first-child{border-radius:10px 10px 0 0}.view-switch.seg button:last-child{border-radius:0 0 10px 10px;margin-left:0;margin-top:-1px}.m-strip{flex-direction:column;justify-content:center;gap:2px;padding:6px;overflow-y:auto;border-top:0;border-left:1px solid var(--border)}.app.mobile .m-strip .icon-btn{min-height:40px;height:40px}.strip-label{flex:none;width:52px;height:auto;min-height:44px;flex-direction:column;justify-content:center;padding:4px 2px;font-size:12px;white-space:normal;text-align:center}.strip-text{overflow-wrap:anywhere}.app.mobile .tap-pad{height:auto;width:min(42vw,360px);border-top:0;border-left:1px solid var(--border)}.sheet{top:0;right:auto;width:min(420px,calc(100vw - 230px));max-height:none;border-top:0;border-right:1px solid var(--border);border-radius:0 16px 16px 0;padding-top:env(safe-area-inset-top);animation-name:sheet-in}}