:root{--bg:#f7f3ee;--surface:#fff;--surface-2:#efe7dc;--text:#1f1a17;--muted:#6b6059;--accent:#a4510f;--accent-strong:#e8893a;--on-accent:#1f1a17;--border:#ddd2c4;--focus:#2a78d6;--danger:#b3261e;--danger-strong:#d93025;--rec:#e53935;--stage-bg:#000;--stage-text:#fff;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#15110f;--surface:#1f1a17;--surface-2:#2b241f;--text:#f4ede6;--muted:#a99c92;--accent:#f0a35e;--accent-strong:#e8893a;--on-accent:#1f1a17;--border:#3a312a;--focus:#8fd3f0;--danger:#ff8a80;--danger-strong:#d93025}}*{box-sizing:border-box}html,body{background:var(--bg);-webkit-tap-highlight-color:transparent;height:100%;margin:0;overflow:hidden}#root{height:100%}h1,h2,h3,p{margin:0}button,.button{border:1px solid var(--border);background:var(--surface);min-height:44px;color:var(--text);font:inherit;cursor:pointer;border-radius:12px;justify-content:center;align-items:center;padding:0 16px;font-weight:500;text-decoration:none;transition:background .1s,transform .1s;display:inline-flex}@media (hover:hover){button:hover:not(:disabled),.button:hover{background:var(--surface-2)}button.primary:hover:not(:disabled){filter:brightness(1.06);background:var(--accent-strong)}}button:active:not(:disabled),.button:active{transform:scale(.97)}button:focus-visible,.button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}button:disabled{opacity:.55;cursor:default}button.primary{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);font-weight:650}input{border:1px solid var(--border);background:var(--surface);width:100%;min-height:48px;color:var(--text);font:inherit;border-radius:12px;padding:0 12px;font-size:16px}label{gap:6px;font-weight:500;display:grid}.muted{color:var(--muted)}.small{font-size:.85rem}.error{color:var(--danger);font-weight:500}.auth{height:100%;padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);flex-direction:column;justify-content:center;align-items:center;gap:24px;display:flex;overflow-y:auto}.auth-logo{border-radius:22px}.auth-form{gap:16px;width:100%;max-width:360px;display:grid}.auth-form h1{text-align:center;font-size:1.75rem}.app{top:var(--app-top,0);height:var(--app-height,100%);flex-direction:column;display:flex;position:fixed;left:0;right:0}.top{padding:calc(env(safe-area-inset-top) + 16px) 16px 8px;flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.top h1{font-size:1.75rem}.icon-button{background:0 0;border-color:#0000;width:44px;padding:0;font-size:1.3rem}.content{overscroll-behavior-y:contain;flex:1;min-height:0;padding:8px 16px 16px;overflow-y:auto}.empty{text-align:center;max-width:420px;color:var(--muted);justify-items:center;gap:12px;margin:15vh auto 0;line-height:1.45;display:grid}.empty-icon{font-size:3rem}.tab-bar{background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);flex-shrink:0;display:flex}.tab{min-height:56px;color:var(--muted);font:inherit;background:0 0;border:none;border-radius:0;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 0;font-size:.8rem;line-height:18px;display:flex;position:relative}.tab[aria-current=page]{color:var(--accent);font-weight:600}.tab-icon{font-size:1.3rem;line-height:28px}.keyboard-open .tab-bar{display:none}.sheet-backdrop{z-index:10;background:#0006;justify-content:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--surface);width:min(360px,100%);height:100%;padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 16px);flex-direction:column;gap:16px;display:flex;overflow-y:auto}.sheet-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.diagnostics{border-top:1px solid var(--border);gap:12px;padding-top:16px;display:grid}.diagnostics h2{font-size:1.1rem}.release h3{font-size:1rem}.release small{color:var(--muted);font-weight:400}.release ul{margin:4px 0 0;padding-left:20px}.history summary{cursor:pointer;min-height:44px;color:var(--accent);align-items:center;font-weight:500;display:flex}.choices{border:none;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;display:grid}.choices legend{margin-bottom:8px;padding:0;font-weight:600}.choices button[aria-pressed=true],.toggle[aria-pressed=true]{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);font-weight:650}.form-buttons{flex-wrap:wrap;gap:8px;display:flex}.form-buttons .primary{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}button.danger{background:var(--danger-strong);border-color:var(--danger-strong);color:#fff;font-weight:650}select{border:1px solid var(--border);background:var(--surface);width:100%;min-height:48px;color:var(--text);font:inherit;border-radius:12px;padding:0 12px;font-size:16px}select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}kbd{font:inherit;opacity:.7;border:1px solid;border-radius:6px;margin-left:6px;padding:1px 6px;font-size:.75rem}@media (hover:none){kbd{display:none}}h2{font-size:1.25rem}h3{margin:0;font-size:1.05rem}.recorder{gap:12px;max-width:1100px;margin:0 auto;display:grid}.recorder-bar{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 16px;display:flex}.song-picker{flex:1;min-width:220px;max-width:420px}.song-new{flex:1;gap:8px;min-width:220px;max-width:420px;display:grid}.disk{margin-bottom:12px}.disk.low{color:var(--danger);font-weight:600}.stage{aspect-ratio:16/9;max-height:calc(var(--app-height,100vh) - 420px);background:var(--stage-bg);border-radius:16px;outline:4px solid #0000;width:100%;min-height:180px;margin:0 auto;transition:outline-color .2s;position:relative;overflow:hidden}.stage.live{outline-color:var(--rec)}.preview{object-fit:contain;width:100%;height:100%;transform:scaleX(-1)}.stage-message{text-align:center;place-content:center;justify-items:center;gap:12px;height:100%;padding:16px;display:grid}.stage-message .error{color:#ff8a80}.rec-badge{color:var(--stage-text);font-variant-numeric:tabular-nums;background:#000000a6;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:1.1rem;font-weight:700;display:flex;position:absolute;top:12px;left:12px}.rec-dot{background:var(--rec);border-radius:50%;flex-shrink:0;width:14px;height:14px}.rec-badge .rec-dot{animation:1s steps(2,start) infinite blink}@keyframes blink{to{visibility:hidden}}@media (prefers-reduced-motion:reduce){.rec-badge .rec-dot{animation:none}}.controls{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}button.record{border-radius:999px;gap:10px;min-width:240px;min-height:56px;font-size:1.1rem;font-weight:700}button.record.stop{background:var(--rec);border-color:var(--rec);color:#fff}button.mark{border-radius:999px;min-height:56px;font-size:1.05rem}.upload{text-align:center;justify-items:center;gap:8px;display:grid}.saved{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;font-weight:600;display:flex}.live-markers{color:var(--accent);font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.library,.song-page,.take-page{gap:16px;max-width:900px;margin:0 auto;display:grid}.library section{gap:12px;display:grid}.section-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.card-form{border:1px solid var(--border);background:var(--surface);border-radius:16px;gap:12px;padding:12px;display:grid}.song-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.song-row{text-align:left;justify-content:stretch;justify-items:start;gap:2px;width:100%;min-height:60px;padding:8px 16px;display:grid}.take-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;display:grid}.take-card{border:1px solid var(--border);background:var(--surface);border-radius:16px;align-content:start;gap:8px;padding:8px;display:grid}.take-card.junk{opacity:.6}.take-open{text-align:left;background:0 0;border:none;place-content:start stretch;justify-items:stretch;gap:8px;width:100%;height:auto;padding:0;display:grid}.take-text{gap:2px;padding:0 4px;display:grid}.thumb{aspect-ratio:16/9;background:var(--stage-bg);border-radius:10px;position:relative;overflow:hidden}.thumb img{object-fit:cover;width:100%;height:100%;display:block}.thumb-empty{place-content:center;font-size:2rem;display:grid}.scrub{background-repeat:no-repeat;background-size:1000% 100%;position:absolute;inset:0}.marker-chips{flex-wrap:wrap;gap:6px;display:flex}.chip{font-variant-numeric:tabular-nums;min-height:36px;color:var(--accent);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;max-width:100%;padding:0 12px;font-size:.9rem;line-height:34px;display:inline-block;overflow:hidden}.back{color:var(--accent);background:0 0;border-color:#0000;justify-self:start;padding:0 4px}.toggle{justify-self:start}.player{width:100%;max-height:calc(var(--app-height,100vh) - 380px);background:var(--stage-bg);border-radius:12px;min-height:180px}.timeline{background:var(--surface-2);border-radius:4px;height:20px;margin:-8px 8px 0;position:relative}.timeline-now{background:var(--muted);width:2px;position:absolute;top:0;bottom:0}.timeline-mark{background:var(--accent-strong);cursor:pointer;border-radius:2px;width:4px;height:16px;margin-left:-2px;position:absolute;top:2px}.timeline-mark.bar1{background:var(--text)}.sync-tools{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.take-actions{flex-wrap:wrap;gap:8px;display:flex}.take-page section{gap:8px;display:grid}.marker-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.marker-row{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;display:grid}.marker-row .chip{min-height:44px;line-height:42px}.marker-row [role=status],.marker-row [role=alert]{grid-column:2/-1}.take-song{gap:12px;max-width:420px;display:grid}.chord-sheet{gap:8px;display:grid}.sheet-tools{flex-wrap:wrap;align-items:center;gap:8px 16px;display:flex}.transpose{font-variant-numeric:tabular-nums;align-items:center;gap:4px;display:inline-flex}.transpose button{width:44px;padding:0;font-size:1.2rem}.transpose span{text-align:center;min-width:2.5em;font-weight:600}.sheet-lines{line-height:1.25}.sheet-line{flex-wrap:wrap;align-items:flex-end;margin:0 0 6px;display:flex}.seg{flex-direction:column;display:inline-flex}.seg-chord{min-height:1.2em;color:var(--accent);white-space:pre;padding-right:.5em;font-weight:700}.seg-text{white-space:pre}.seg.now .seg-chord{background:var(--accent-strong);color:#1f1a17;border-radius:6px;margin-right:.25em;padding:0 .3em}.seg.now .seg-text{-webkit-text-decoration:underline 3px var(--accent-strong);text-decoration:underline 3px var(--accent-strong);text-underline-offset:4px}.sheet-beat{z-index:1;background:var(--surface);color:var(--muted);font-variant-numeric:tabular-nums;margin:0;padding:4px 0;font-weight:600;position:sticky;top:0}.count-in{background:var(--accent-strong);color:#1f1a17;border-radius:50%;place-items:center;width:2.2em;height:2.2em;font-size:1.6rem;font-weight:800;display:inline-grid}.tempo-form{flex-wrap:wrap;align-items:end;gap:8px 12px;display:flex}.tempo-form input{width:6em}.sheet-section{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:10px 0 4px;font-size:.85rem;font-weight:650}.sheet-gap{height:10px}.chord-sheet.big .sheet-lines{font-size:1.15rem}.chord-editor textarea{border:1px solid var(--border);background:var(--surface);width:100%;min-height:300px;color:var(--text);resize:vertical;border-radius:12px;padding:12px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:15px;line-height:1.4}.chord-editor textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.chord-editor label{font-weight:500}.song-chords,.stage-row{gap:12px;display:grid}.live-chords{max-height:calc(var(--app-height,100vh) - 420px);border:1px solid var(--border);background:var(--surface);border-radius:16px;min-height:180px;padding:12px 16px;overflow-y:auto}@media (width>=900px){.recorder:has(.with-chords){max-width:1400px}.stage-row.with-chords{grid-template-columns:minmax(0,3fr) minmax(280px,2fr);align-items:start}.stage-row.with-chords .stage{max-height:none}.take-page.with-chords{grid-template-columns:minmax(0,3fr) minmax(280px,2fr);align-items:start;max-width:1400px}.take-page.with-chords .take-chords{max-height:calc(var(--app-height,100vh) - 180px);position:sticky;top:0;overflow-y:auto}}.take-main{gap:16px;min-width:0;display:grid}.take-chords{border:1px solid var(--border);background:var(--surface);border-radius:16px;align-content:start;gap:8px;padding:12px 16px;display:grid}
