:root{--bg:#000;--surface:#111;--surface-2:#1c1c1c;--border:#3a3a3a;--text:#fff;--muted:#b3b3b3;--chord:#ffd60a;--accent:#22d3ee;--play:#22c55e;--danger:#ff5a5f;--section:#c4b5fd;--touch:52px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0}body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}h1,h2{margin:0}h2{font-size:1.15rem}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.muted{color:var(--muted)}.small{font-size:.85rem}.accent{color:var(--chord)}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn{min-height:var(--touch);min-width:var(--touch);border:2px solid var(--border);background:var(--surface-2);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:0 18px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.active{border-color:var(--accent);color:var(--accent)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#000}.btn-danger{border-color:var(--danger);color:var(--danger);background:0 0}.btn-xl{min-height:68px;padding:0 24px;font-size:1.25rem}.btn-play{background:var(--play);border-color:var(--play);color:#000;flex:1;font-size:1.5rem}.btn-play.is-playing{background:var(--chord);border-color:var(--chord)}.file-btn{width:fit-content}.file-btn.disabled{opacity:.6;pointer-events:none}.pdf-import-row{flex-wrap:wrap;align-items:center;gap:12px}.import-notes{border:1px solid var(--accent);border-radius:12px;align-items:flex-start;gap:12px;padding:12px 16px;display:flex}.import-notes ul{flex:1;margin:0;padding-left:18px}.input{min-height:var(--touch);border:2px solid var(--border);background:var(--surface);border-radius:10px;width:100%;padding:8px 12px}.input.invalid{border-color:var(--danger)}.mono{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}select.input{width:auto;max-width:100%}.check{min-height:var(--touch);align-items:center;gap:10px;display:flex}.check input{width:24px;height:24px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:12px;padding:16px;display:flex}.error{color:var(--danger);margin:8px 16px;font-weight:600}.notice{color:var(--accent);margin:0}.empty-state{text-align:center;padding:48px 16px;font-size:1.1rem}.landing{max-width:520px;padding:32px 16px calc(32px + env(safe-area-inset-bottom));flex-direction:column;gap:20px;margin:0 auto;display:flex}.landing-hero h1{letter-spacing:-1px;font-size:3rem}.join-form{gap:10px;display:flex}.code-input{text-align:center;letter-spacing:.4em;border:2px solid var(--border);background:#000;border-radius:12px;flex:1;min-width:0;min-height:68px;font-size:2.2rem;font-weight:800}.page{max-width:960px;padding:12px 12px calc(32px + env(safe-area-inset-bottom));flex-direction:column;gap:14px;margin:0 auto;display:flex}.topbar{background:var(--bg);z-index:5;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;display:flex;position:sticky;top:0}.topbar h1{font-size:1.3rem}.song-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.song-row{align-items:stretch;gap:8px;display:flex}.song-main{text-align:left;border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:12px;flex-direction:column;flex:1;gap:4px;min-height:64px;padding:12px 14px;display:flex}.song-main strong{font-size:1.1rem}.live-banner{width:100%;min-height:var(--touch);color:var(--play);border:0;border-bottom:2px solid var(--play);cursor:pointer;background:#052e16;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;display:flex}.grid-fields{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;display:grid}.grid-fields label{flex-direction:column;gap:6px;font-weight:600;display:flex}.grid-fields .row .input{flex:1;width:auto;min-width:80px}.audio-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.audio-row audio{max-width:100%}.tabs{gap:6px;display:flex}.tab{border:2px solid var(--border);cursor:pointer;background:0 0;border-radius:10px;flex:1;min-height:44px;font-weight:700}.tab.active{border-color:var(--accent);color:var(--accent)}.editor-split{gap:14px;display:grid}.editor-split.show-edit .preview-pane,.editor-split.show-preview .editor-pane{display:none}@media (width>=900px){.tabs{display:none}.editor-split{grid-template-columns:1fr 1fr}.editor-split.show-edit .preview-pane,.editor-split.show-preview .editor-pane{display:block}}.editor-pane{flex-direction:column;gap:10px;display:flex}.toolbar{flex-direction:column;gap:8px;display:flex}.chord-input{width:120px}.chip-row{gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.chip{border:2px solid var(--chord);min-width:52px;min-height:44px;color:var(--chord);cursor:pointer;background:0 0;border-radius:22px;flex:none;font-weight:700}.sheet-editor{resize:vertical;min-height:50vh;font-size:16px;line-height:1.5}.paste-box{border:1px dashed var(--accent);border-radius:12px;flex-direction:column;gap:8px;padding:10px;display:flex}.preview-pane{border:1px solid var(--border);background:#000;border-radius:12px;max-height:70vh;padding:12px;overflow:auto}.shape-grid{flex-wrap:wrap;gap:12px;display:flex}.shape-card{flex-direction:column;align-items:center;gap:6px;width:112px;display:flex}.voicing-nav{flex-wrap:nowrap;align-items:center;gap:4px}.btn.btn-sm{min-width:36px;min-height:36px;padding:0 8px}.chord-strip .chord-cycle{color:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:0}.chord-strip .chord-cycle:focus-visible{outline:2px solid var(--accent,#22d3ee)}.voicing-count{text-align:center;font-size:11px;display:block}.small-input{text-align:center;min-height:44px}.sheet{line-height:1.25}.sheet-line{flex-wrap:wrap;align-items:flex-end;min-height:1.3em;margin-bottom:.35em;display:flex}.sheet-line.empty{min-height:.8em}.sheet-line.section{color:var(--section);text-transform:uppercase;letter-spacing:.05em;margin-top:.6em;font-size:.8em;font-weight:800}.unit{flex-direction:column;display:inline-flex}.chord{color:var(--chord);white-space:pre;padding-right:.45em;font-weight:800}.lyric{white-space:pre}.chords-only{gap:.6em}.chord-diagram{color:var(--text);flex-direction:column;align-items:center;margin:0;display:flex}.chord-diagram figcaption{color:var(--chord);font-weight:800}.chord-dot{fill:var(--chord)}.chord-unknown{width:64px;height:84px;color:var(--muted);place-items:center;font-size:2rem;display:grid}.chord-strip{border-bottom:1px solid var(--border);flex:none;gap:12px;padding:8px 12px;display:flex;overflow-x:auto}.strip-item{border:2px solid #0000;border-radius:8px;transition:border-color .15s,background-color .15s}.strip-item.active{border-color:var(--chord);background:#facc151f}.chord.active{background:var(--chord);color:#000;box-shadow:0 0 0 2px var(--chord), 0 0 14px var(--chord);border-radius:6px;margin-left:-.15em;padding-left:.15em}.sheet-line.current{box-shadow:inset 4px 0 0 var(--chord);background:#ffffff0a;border-radius:4px}.stage{height:100dvh;padding-top:env(safe-area-inset-top);flex-direction:column;display:flex}.stage-header{border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;display:flex}.room-code{flex-direction:column;line-height:1;display:flex}.room-code strong{letter-spacing:.15em;color:var(--accent);font-variant-numeric:tabular-nums;font-size:2rem}.badge{border:2px solid var(--play);color:var(--play);border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:1.1rem;font-weight:800;display:inline-flex}@media (width<=480px){.badge-label{display:none}}.conn{font-weight:700}.conn.connected{color:var(--play)}.conn.leader-lost{color:var(--danger)}.song-picker{flex-wrap:nowrap;flex:none;padding:8px 12px}.song-picker select{flex:1;min-width:0;font-size:1.05rem;font-weight:700}.sheet-scroll{-webkit-overflow-scrolling:touch;outline:none;flex:1;padding:12px 16px;overflow-y:auto}.sheet-title{margin-bottom:12px;font-size:1.4rem}.sheet-tail{height:50vh}.countdown{background:var(--chord);color:#000;pointer-events:none;border-radius:16px;padding:16px 32px;font-size:2rem;font-weight:900;position:fixed;top:40%;left:50%;transform:translate(-50%,-50%)}.resume-follow{z-index:10;min-height:60px;position:fixed;bottom:190px;right:16px;box-shadow:0 4px 20px #000c}.overlay{z-index:20;background:#000000d9;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.controls{border-top:1px solid var(--border);background:var(--surface);padding:10px 12px calc(10px + env(safe-area-inset-bottom));flex-direction:column;flex:none;gap:10px;display:flex}.controls-main{gap:10px;display:flex}.speed{flex-direction:column;gap:4px;display:flex}.speed input[type=range]{width:100%;height:40px;accent-color:var(--accent)}.controls-extra select{flex:1}.status-line{margin:0}.play-state{font-size:1.2rem;font-weight:800}.play-state.is-playing{color:var(--play)}@media (width>=900px){.controls{flex-flow:wrap;align-items:center}.controls-main{min-width:320px}.speed{flex:1;min-width:240px}}.studio{z-index:50;background:var(--bg);height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);flex-direction:column;display:flex;position:fixed;inset:0}.studio-head{border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;align-items:center;gap:8px;padding:8px 12px;display:flex}.studio-title{flex-direction:column;flex:1;min-width:0;display:flex}.studio-title strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mode-tabs{gap:0}.mode-tabs .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.mode-tabs .btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.studio-menu-wrap{position:relative}.studio-menu{z-index:2;background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:6px;min-width:240px;padding:8px;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 10px 30px #0009}.studio-menu .btn{text-align:left;justify-content:flex-start}.studio-help,.studio-stale{border-bottom:1px solid var(--border);background:var(--surface);flex:none;padding:10px 14px}.studio-help p{margin:0 0 8px}.studio-stale,.studio-notice{color:var(--chord);align-items:center;gap:12px;display:flex}.studio-sheet{flex:1;padding:24px 16px 40vh;overflow-y:auto}.studio .sheet-line.mark-target,.studio .chord.mark-target{cursor:pointer}.studio .chord.mark-target{outline-offset:1px;border-radius:6px;outline:2px dashed #ffd60a59;position:relative}.studio .sheet-line.mark-target{border-left:3px dashed #ffffff40;padding-left:6px;position:relative}.studio .chord.marked{outline:2px solid var(--play)}.studio .sheet-line.marked{border-left:3px solid var(--play)}.studio .marked:after{content:attr(data-mark-time);background:var(--play);color:#000;pointer-events:none;white-space:nowrap;border-radius:4px;padding:1px 3px;font-size:.45em;font-weight:700;line-height:1;position:absolute}.studio .chord.marked:after{bottom:100%;left:0}.studio .sheet-line.marked:after{top:0;right:0}.studio .selected{box-shadow:0 0 0 3px var(--accent)}.studio .chord.mark-next{background:var(--chord);color:#000;outline:2px solid var(--chord);animation:1s ease-in-out infinite mark-pulse}.studio .sheet-line.mark-next{border-left:6px solid var(--chord);background:#ffd60a1f;animation:1s ease-in-out infinite mark-pulse}@keyframes mark-pulse{50%{box-shadow:0 0 16px var(--chord)}}@media (prefers-reduced-motion:reduce){.studio .mark-next{animation:none}}.studio-foot{border-top:1px solid var(--border);background:var(--surface);flex-direction:column;flex:none;gap:8px;padding:10px 12px 12px;display:flex}.studio-scrub{align-items:center;gap:10px;display:flex}.studio-time{font-variant-numeric:tabular-nums;min-width:4.5em;font-weight:700}.studio-track{flex:1;position:relative}.studio-track input{width:100%}.studio-ticks{pointer-events:none;height:6px;position:absolute;top:-6px;left:0;right:0}.studio-ticks span{background:var(--play);width:2px;height:6px;position:absolute}.studio-ticks span.sel{background:var(--accent);width:3px}.studio-transport,.studio-nudge,.studio-tap-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.studio-play{min-width:72px;font-size:1.4rem}.studio-nudge strong{font-variant-numeric:tabular-nums;text-align:center;min-width:4em}.studio-tap-row .studio-tap{touch-action:manipulation;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;min-height:84px;display:flex}.tap-label{letter-spacing:.08em;font-size:1.6rem;font-weight:900}.tap-next{white-space:nowrap;text-overflow:ellipsis;max-width:60vw;font-size:1rem;overflow:hidden}.timing-summary{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;padding-top:12px;display:flex}.timing-summary>div{flex:1;min-width:200px}.mode-tabs .btn:not(:first-child):not(:last-child){border-radius:0}.studio.edit .sheet-line{cursor:text;border-radius:6px}.studio.edit .sheet-line:hover{background:#ffffff0d}.studio.edit .sheet-line.empty{min-height:1.2em}.studio .sheet-line.in-section{border-left:4px solid var(--accent);border-radius:0;padding-left:6px}.studio .sheet-line.editing{outline:2px solid var(--accent);background:#0a84ff1f}.studio-edit{flex-direction:column;gap:8px;display:flex}.studio-edit .row{flex-wrap:wrap;align-items:center;gap:8px}.studio-edit-line{flex-wrap:nowrap!important}.studio-edit-line .input{flex:1;min-width:0;font-size:18px}.studio-chips{align-items:center;gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.studio-chips form{flex:none;gap:6px;flex-wrap:nowrap!important}.chip-input{width:90px}.studio-fulltext{z-index:3;padding:12px;padding-top:calc(12px + env(safe-area-inset-top));background:var(--bg);flex-direction:column;gap:8px;display:flex;position:absolute;inset:0}.studio-fulltext textarea{resize:none;flex:1;font-size:16px;line-height:1.5}.studio-fulltext .row{justify-content:flex-end;gap:8px}