:root{--bg: #f7f5ff;--fg: #221c3a;--muted: #6f6a85;--accent: #5b45c9;--accent-fg: #ffffff;--card: #ffffff;--error: #b3261e;--mark: #c4304a;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #16112b;--fg: #eae6ff;--muted: #9d97b8;--accent: #8f7bf0;--accent-fg: #16112b;--card: #221c3a;--error: #ffb4ab;--mark: #ff8fa3}}*{box-sizing:border-box}input,select,textarea{font-size:1rem}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--fg)}#root{max-width:640px;margin:0 auto;padding:1rem;padding-bottom:env(safe-area-inset-bottom,1rem)}.app-header{align-items:flex-start;display:flex;justify-content:space-between}.app-header h1{margin:0;font-size:1.5rem}.account-menu{align-items:flex-end;display:flex;flex-direction:column;font-size:.8rem;gap:.2rem}.account-links{display:flex;gap:.75rem;align-items:center}.button-link{background:none;border:0;color:inherit;cursor:pointer;padding:0;text-decoration:underline}.auth-screen{align-items:center;display:flex;flex-direction:column;gap:1rem;justify-content:center;min-height:calc(100dvh - 2rem);text-align:center}.auth-screen h1,.auth-screen p{margin:0}.auth-note{color:var(--muted);font-size:.85rem}.primary-button{background:var(--accent);border-radius:.5rem;color:var(--accent-fg);padding:.7rem 1rem;text-decoration:none}.tagline{margin:0 0 1.25rem;color:var(--muted);font-size:.9rem}.muted{color:var(--muted)}.error{color:var(--error)}button{font:inherit;border:1px solid var(--accent);background:var(--card);color:var(--fg);border-radius:.5rem;padding:.6rem 1rem;cursor:pointer}button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}.back{border:none;background:none;color:var(--accent);padding:.25rem 0;text-decoration:none}.page-toolbar{display:flex;justify-content:space-between;align-items:center}.danger-link{border:none;background:none;color:var(--error);padding:.25rem 0;font-size:.85rem}.new-song{margin-bottom:1rem;padding:1rem;border-radius:.75rem;background:var(--card)}.new-song h2{margin:0 0 .25rem}.new-song-details{display:grid;grid-template-columns:minmax(90px,140px) 1fr;gap:1rem;align-items:start;margin-top:1rem}.new-song-details img{width:100%;max-height:180px;object-fit:contain;border-radius:.5rem;background:var(--bg)}.new-song-details label{display:block;margin-bottom:.35rem;font-weight:600}.new-song-details input{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:.6rem .75rem;border:1px solid var(--muted);border-radius:.5rem;background:var(--card);color:var(--fg)}@media(max-width:520px){.new-song-details{grid-template-columns:90px 1fr}}.song-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.song-row{width:100%;display:flex;align-items:center;gap:.75rem;text-align:left;border:none;background:var(--card);padding:.6rem 1rem .6rem .6rem;border-radius:.75rem;color:inherit;text-decoration:none}.song-card{position:relative}.song-card .song-row{padding-right:3.4rem}.song-menu-wrap{position:absolute;top:.25rem;right:.25rem}.song-menu-button{width:2.75rem;height:2.75rem;padding:0;border:none;border-radius:.5rem;background:transparent;color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer}.song-menu-button:hover,.song-menu-button[aria-expanded=true]{background:var(--bg);color:var(--fg)}.song-menu{position:absolute;top:2.9rem;right:0;z-index:20;min-width:13rem;display:flex;flex-direction:column;padding:.25rem;border-radius:.6rem;background:var(--card);box-shadow:0 6px 24px #00000040}.song-menu button{border:none;background:none;color:inherit;text-align:left;padding:.6rem .75rem;border-radius:.4rem;font:inherit;cursor:pointer}.song-menu button:hover:not(:disabled){background:var(--bg)}.song-menu button:disabled{color:var(--muted);cursor:not-allowed}.song-menu .danger-item{color:var(--error);margin-top:.25rem;border-top:1px solid var(--bg);border-radius:0 0 .4rem .4rem}.song-rename{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;min-width:0}.song-rename input{flex:1 1 10rem;min-width:0}.song-rename-actions{display:flex;gap:.4rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.save-confirm,.undo-toast{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.75rem;padding:.6rem .75rem;border-radius:.6rem;background:var(--card);color:var(--muted)}.undo-toast .button-link{color:var(--accent);font-weight:600}.song-cover{width:3rem;height:3rem;flex:none;border-radius:.5rem;object-fit:cover;background:var(--bg)}.song-cover.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1.4rem}.song-heading{flex:1;min-width:0;display:flex;align-items:center}.song-title{font-weight:600;min-width:0}.song-heading .status-pill{flex:none}.capture-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0 1rem}.scan-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}.scan-grid a{display:flex;flex-direction:column;gap:.25rem;color:inherit;text-decoration:none}.scan-grid img{width:100%;aspect-ratio:3 / 4;object-fit:cover;border-radius:.5rem;background:var(--card)}.scan-caption{display:flex;align-items:center;flex-wrap:wrap;row-gap:.25rem}.viewer{--v-bg: #000;--v-fg: #eee;--v-ink: #eae6ff;--v-dim: #bdb8d8;--v-faint: #9d97b8;--v-line: rgba(255, 255, 255, .12);--v-edge: rgba(255, 255, 255, .25);--v-surface: rgba(255, 255, 255, .12);--v-on-bg: rgba(255, 255, 255, .9);--v-on-fg: #111;--v-mark: #ff8fa3;--v-error: #ffb4ab;position:fixed;top:0;right:0;bottom:0;left:0;background:var(--v-bg);color:var(--v-fg);display:flex;flex-direction:column}.viewer.theme-day{--v-bg: #fbfaf7;--v-fg: #241f38;--v-ink: #16122a;--v-dim: #57506f;--v-faint: #6d6683;--v-line: rgba(0, 0, 0, .12);--v-edge: rgba(0, 0, 0, .28);--v-surface: rgba(0, 0, 0, .07);--v-on-bg: #241f38;--v-on-fg: #fbfaf7;--v-mark: #c4304a;--v-error: #b3261e}.viewer .muted{color:var(--v-faint)}.viewer .error{color:var(--v-error)}.viewer-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;padding-top:calc(.5rem + env(safe-area-inset-top,0px))}.viewer-title{flex:1;text-align:center;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewer-btn{border:none;background:var(--v-surface);color:var(--v-fg);border-radius:.5rem;min-width:2.5rem;min-height:2.5rem;padding:.25rem .5rem}.viewer-msg{text-align:center;margin-top:2rem}.viewer-stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center}.viewer-stage:not(.digital){background:#000}.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain}.viewer-btn.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:1.6rem;line-height:1;background:#000000a6;color:#fff}.viewer-nav.prev{left:.5rem}.viewer-nav.next{right:.5rem}.view-toggle{display:inline-flex;border:1px solid var(--v-edge);border-radius:.5rem;overflow:hidden}.view-toggle button{border:none;background:transparent;color:var(--v-fg);min-height:2.5rem;padding:.25rem .75rem;font-size:.85rem}.view-toggle button.on{background:var(--v-on-bg);color:var(--v-on-fg)}.digital-controls{display:flex;align-items:center;gap:.75rem;padding:.4rem .75rem;color:var(--v-fg);border-bottom:1px solid var(--v-line);flex-wrap:wrap}.digital-controls label{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem}.digital-controls select{background:var(--v-surface);color:var(--v-fg);border:1px solid var(--v-edge);border-radius:.4rem;padding:.3rem .5rem;font-size:1rem;font-family:ui-monospace,Cascadia Code,Consolas,monospace}.digital-controls select option,.digital-controls select optgroup{color:#111}.digital-controls .instrument-select{font-family:inherit}.viewer-btn.reset-key{min-height:2rem;min-width:auto;font-size:.8rem}.octave-nudge{display:inline-flex;gap:.25rem}.viewer-btn.oct-btn{min-height:2rem;min-width:auto;font-size:.8rem;padding:.25rem .5rem}.viewer-btn.oct-btn:disabled{opacity:.4}.key-hint{color:var(--v-faint);font-size:.72rem}.text-size{display:inline-flex;align-items:center;gap:.25rem;margin-left:auto}.viewer-btn.theme-btn.on{background:var(--v-on-bg);color:var(--v-on-fg)}.viewer-btn.size-btn{min-height:2rem;min-width:auto;font-size:.95rem;padding:.25rem .55rem}.viewer-btn.size-btn:disabled{opacity:.4}.size-value{min-width:3ch;text-align:center;font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--v-fg)}.viewer-stage.digital{align-items:flex-start;justify-content:center;padding:1rem}.viewer-digital{--fg: var(--v-ink);--mark: var(--v-mark);--digital-scale: 1;color:var(--v-ink);width:100%;max-width:900px}.viewer-digital .stf-line-render{font-size:calc(1.4rem * var(--digital-scale))}.viewer-digital .digital-text{font-size:calc(1rem * var(--digital-scale))}.digital-header{display:flex;flex-wrap:wrap;gap:1rem;font-size:calc(.9rem * var(--digital-scale));color:var(--v-dim);padding-bottom:.75rem;margin-bottom:.75rem;border-bottom:1px solid var(--v-line)}.transposed-tag{color:var(--v-mark)}.digital-lines{list-style:none;margin:0;padding:0}.digital-line{margin:.15rem 0}.digital-line.kind-section .digital-text{font-weight:600;font-size:calc(1.05rem * var(--digital-scale));color:var(--v-ink);display:inline-block;margin-top:.6rem}.digital-line.kind-lyric .digital-text{color:var(--v-dim);font-style:italic}.digital-line.kind-roadmap .digital-text,.digital-line.kind-annotation .digital-text{color:var(--v-faint);font-size:calc(.9rem * var(--digital-scale))}.editor{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:var(--bg);color:var(--fg)}.editor-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;padding-top:calc(.5rem + env(safe-area-inset-top,0px));border-bottom:1px solid var(--muted)}.editor-bar .viewer-btn{background:var(--card);border:1px solid var(--muted);color:var(--fg)}.viewer-btn.photo-btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}.status-pill{margin-left:.5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;padding:.1rem .45rem;border-radius:1rem;background:var(--bg);border:1px solid var(--muted);color:var(--muted)}.status-pill.reviewed{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.status-pill.new{background:var(--mark);color:var(--accent-fg);border-color:var(--mark)}.editor-msg{padding:0 .75rem}.editor-split{flex:1;display:flex;min-height:0}.editor-photo{flex:1;position:relative;overflow:hidden;min-height:0;background:#000;touch-action:none}.editor-photo.pannable{cursor:grab}.editor-photo.pannable:active{cursor:grabbing}.editor-photo img{position:absolute;top:0;left:0;max-width:100%;transform-origin:0 0;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.photo-tools{position:absolute;top:.4rem;right:.4rem;display:flex;align-items:center;gap:.15rem;padding:.15rem;border-radius:.5rem;background:#000000a6}.photo-tools button{width:2rem;height:2rem;padding:0;border:0;border-radius:.35rem;background:transparent;color:#fff;font-size:1rem;line-height:1;cursor:pointer}.photo-tools button:disabled{opacity:.4;cursor:default}.photo-zoom-value{min-width:2.6rem;text-align:center;color:#fff;font-size:.75rem;font-variant-numeric:tabular-nums}.editor-form{flex:1;overflow:auto;padding:1rem}@media(max-width:720px){.editor-split{flex-direction:column}.editor-photo{flex:none;height:38vh}}.editor-title-field{display:flex;flex-direction:column;gap:.2rem;font-size:.75rem;color:var(--muted);margin:0 0 1rem}.editor-title-field input{font:inherit;font-size:1rem;padding:.5rem .6rem;border:1px solid var(--muted);border-radius:.4rem;background:var(--card);color:var(--fg)}.stf-header{display:flex;flex-wrap:wrap;gap:.75rem;border:1px solid var(--muted);border-radius:.5rem;margin:0 0 1rem}.stf-header label{display:flex;flex-direction:column;font-size:.75rem;color:var(--muted);gap:.2rem}.stf-header input{width:6rem;font:inherit;font-size:1rem;padding:.4rem .5rem;border:1px solid var(--muted);border-radius:.4rem;background:var(--card);color:var(--fg)}.stf-warnings{border:1px solid var(--error);border-radius:.5rem;padding:.5rem .75rem;margin-bottom:1rem;color:var(--error);font-size:.85rem}.stf-warnings ul{margin:.3rem 0 0;padding-left:1.1rem}.stf-legend{margin:0 0 1rem;font-size:.75rem;line-height:1.5;color:var(--muted)}.stf-legend code{font-family:ui-monospace,Cascadia Code,Consolas,monospace;color:var(--fg);background:var(--card);border:1px solid var(--muted);border-radius:.25rem;padding:0 .25rem}.stf-mark-bar{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;padding:.35rem .5rem 0}.stf-mark-bar button{min-width:2.1rem;min-height:2.1rem;font-size:1rem;padding:.2rem .4rem;border:1px solid var(--muted);border-radius:.4rem;background:var(--card);color:var(--fg)}.stf-mark-sep{width:1px;align-self:stretch;margin:.15rem .25rem;background:var(--muted)}.stf-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}.stf-line-controls{display:flex;gap:.4rem;align-items:center}.stf-line-controls select{font:inherit;font-size:1rem;padding:.35rem .3rem;border:1px solid var(--muted);border-radius:.4rem;background:var(--card);color:var(--fg)}.stf-line-input{flex:1;min-width:0;font-family:ui-monospace,Cascadia Code,Consolas,monospace;padding:.45rem .55rem;border:1px solid var(--muted);border-radius:.4rem;background:var(--card);color:var(--fg)}.stf-line-controls .danger-link{min-width:1.75rem}.stf-line-controls .line-add{min-width:1.75rem;border:none;background:none;color:var(--accent);padding:.25rem 0;font-size:1.2rem;line-height:1;cursor:pointer}.stf-line-preview{padding:.15rem .5rem .35rem}.add-line{margin:.75rem 0;border-style:dashed}.editor-actions{display:flex;gap:.5rem;margin-top:.5rem}.metrics{font-size:.75rem;margin-top:.75rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0000008c}.modal-card{width:100%;max-width:24rem;padding:1.25rem;border-radius:.75rem;background:var(--card);color:var(--fg);box-shadow:0 12px 40px #00000059}.modal-card:focus{outline:none}.modal-card h2{margin:0 0 .5rem;font-size:1.15rem}.modal-card p{margin:0 0 1rem}.modal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.modal-actions .danger-link{margin-left:auto}.modal-card .modal-note{color:var(--muted)}.instrument-ask{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;font-size:.85rem}.instrument-ask select{width:100%;padding:.5rem;border:1px solid var(--muted);border-radius:.4rem;background:var(--bg);color:var(--fg);font-family:inherit;font-size:1rem}.stf-line-render{font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:1.4rem;line-height:2.2;white-space:pre-wrap;word-break:break-word}.stf-note{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle}.stf-letter{line-height:1}.stf-note.flat .stf-letter{border-bottom:2px solid var(--mark)}.stf-note.sharp .stf-letter{border-top:2px solid var(--mark)}.stf-dots{font-size:.5em;line-height:.6;height:.6em;color:var(--mark)}.stf-curve{position:relative;display:inline-flex;align-items:center;vertical-align:middle}.stf-curve:after{content:"";position:absolute;left:0;right:0;bottom:-.05em;height:.4em;border:2px solid var(--fg);border-top:none;border-radius:0 0 60% 60%/0 0 100% 100%;opacity:.5}.offline-banner{position:fixed;top:0;left:50%;transform:translate(-50%);z-index:100;max-width:92vw;margin-top:max(.5rem,env(safe-area-inset-top,.5rem));padding:.4rem .9rem;border-radius:999px;background:#f5b942;color:#1a1200;font-size:.85rem;font-weight:600;white-space:nowrap;box-shadow:0 2px 8px #00000059;pointer-events:none}