:root{--bg: #e8ecf0;--surface: #ffffff;--surface-2: #eef1f5;--ink: #121a23;--muted: #556270;--line: #d2d9e1;--staff: #3a4756;--accent: #121a23;--accent-ink: #ffffff;--hh: #1f7a5a;--oh: #b7791f;--sn: #c0304f;--kk: #1f4fa0;--ok: #1f7a5a;--danger: #b3261e;--warn-bg: #fff4d6;--warn-ink: #5c4300;--err-bg: #fde7e5;--err-ink: #7a1712;--f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;--f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #0e1319;--surface: #161d26;--surface-2: #1e2732;--ink: #e8eef4;--muted: #93a1b0;--line: #2a3542;--staff: #8a98a8;--accent: #e8eef4;--accent-ink: #0e1319;--hh: #46c79a;--oh: #e3a43a;--sn: #ee6a86;--kk: #6a9cf0;--ok: #46c79a;--danger: #f2827a;--warn-bg: #3a2f10;--warn-ink: #f2dca0;--err-bg: #3d1a18;--err-ink: #f6c2bd;color-scheme:dark}}:root[data-theme=dark]{--bg: #0e1319;--surface: #161d26;--surface-2: #1e2732;--ink: #e8eef4;--muted: #93a1b0;--line: #2a3542;--staff: #8a98a8;--accent: #e8eef4;--accent-ink: #0e1319;--hh: #46c79a;--oh: #e3a43a;--sn: #ee6a86;--kk: #6a9cf0;--ok: #46c79a;--danger: #f2827a;--warn-bg: #3a2f10;--warn-ink: #f2dca0;--err-bg: #3d1a18;--err-ink: #f6c2bd;color-scheme:dark}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45}button,select,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}a{color:inherit}h1,h2{font-family:var(--f-display);font-weight:700;line-height:1.05;margin:0;text-wrap:balance}h1{font-size:32px}h2{font-size:24px;margin-top:8px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.topbar{position:sticky;top:0;z-index:5;background:var(--accent);color:var(--accent-ink);padding-top:env(safe-area-inset-top,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.brand{display:block;max-width:760px;margin:0 auto;padding-block:12px;font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}.page{max-width:760px;margin:0 auto;padding-block:16px calc(40px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.stack{display:grid;gap:16px}.stack>*{min-width:0}.row{display:flex;gap:8px;align-items:center}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.muted{color:var(--muted);margin:0}.small{font-size:13px}.num{font-variant-numeric:tabular-nums}.label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}.back{text-decoration:none;color:var(--muted);min-height:40px;display:inline-flex;align-items:center}.page-head p,.song-head p{margin:4px 0 0}.song-head{display:grid;gap:8px}.btn{min-height:44px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:0 14px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}.btn:active:not(:disabled){background:var(--surface-2)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn.ghost{background:transparent;color:var(--muted)}.btn.danger{color:var(--danger)}.btn.small{min-height:36px;font-size:14px}.btn.icon{width:44px;padding:0;font-size:20px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{min-height:44px;padding:0 14px;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-weight:500;display:inline-flex;align-items:center;gap:8px}.chip[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.chip.add{border-style:dashed;color:var(--muted)}.chip.mute[aria-pressed=true]{background:var(--surface-2);color:var(--muted);border-color:var(--line);text-decoration:line-through}.sw{width:10px;height:10px;border-radius:50%;display:inline-block}.sw.hh{background:var(--hh)}.sw.oh{background:var(--oh)}.sw.sn{background:var(--sn)}.sw.kk{background:var(--kk)}.tag{font-size:12px;padding:3px 8px;border:1px solid var(--line);border-radius:4px;color:var(--muted);background:var(--surface);white-space:nowrap}.tag.ok{color:var(--ok);border-color:currentColor}.field{width:100%;min-width:0;min-height:44px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:8px 10px}textarea.field{resize:vertical}.fieldset{display:grid;gap:2px;min-width:0}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.span-all{grid-column:1/-1}.note{margin:0;border-radius:6px;padding:10px 12px;font-size:14px;background:var(--surface-2)}.note.warn{background:var(--warn-bg);color:var(--warn-ink)}.note.error{background:var(--err-bg);color:var(--err-ink)}.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px}.card.stack{gap:14px}.tip{margin:0;font-size:15px}details{font-size:14px;color:var(--muted)}details summary{min-height:32px;cursor:pointer}details p,details ul{margin:6px 0 0;line-height:1.7}details ul{padding-left:18px}.song-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.song-row{display:flex;gap:12px;align-items:center;justify-content:space-between;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px;min-height:60px}.song-row:active{background:var(--surface-2)}.song-main{display:grid;min-width:0}.song-title{font-weight:600;font-size:16px}.song-meta{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.empty{padding:12px 0}.sections{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}.sections li{display:grid;border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:var(--surface)}.sections li.now{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.sections li.now .muted{color:inherit}.section-editor{list-style:none;margin:0;padding:0;display:grid;gap:8px}.section-editor li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.4fr) auto auto;gap:8px;align-items:center}.section-editor .bars{display:flex;gap:6px;align-items:center}.section-editor .bars .field{width:64px}@media(max-width:620px){.section-editor li{grid-template-columns:1fr 1fr}}.staff{display:grid;gap:4px}.staff svg{display:block;width:100%;max-width:640px;height:auto;margin:0 auto}.stf{stroke:var(--staff)}.stem{stroke:var(--ink);stroke-linecap:butt}.ink{fill:var(--ink)}.flag{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}.rest{color:var(--ink);stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.rest .fill{fill:currentColor;stroke:none}.ts{text-anchor:middle;font-family:Georgia,Times New Roman,serif;font-weight:700;fill:var(--ink)}.head .cross{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round}.head .open{fill:none;stroke:currentColor;stroke-width:1.8}.head .fill{fill:currentColor}.i-hh{color:var(--hh)}.i-oh{color:var(--oh)}.i-sn{color:var(--sn)}.i-kk{color:var(--kk)}.m-hh .i-hh,.m-oh .i-oh,.m-sn .i-sn,.m-kk .i-kk{opacity:.18}.ph{fill:var(--ink);opacity:0}.ph.now{opacity:.12}.lab{fill:var(--muted);font-family:var(--f-body);font-size:12px;text-anchor:middle;font-variant-numeric:tabular-nums}.lab.b{fill:var(--ink);font-size:16px;font-weight:600}.lab.now{fill:var(--ink);font-weight:700}.key-name{fill:var(--ink);font-family:var(--f-body);font-size:14px;font-weight:600;text-anchor:middle}.key-sub{fill:var(--muted);font-family:var(--f-body);font-size:11.5px;text-anchor:middle}.mutes{margin-top:12px}.pgrid{display:grid;gap:6px}.pg-row{display:grid;grid-template-columns:46px repeat(4,minmax(0,1fr));gap:6px}.pg-beat{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px}.pg-lab{text-align:center;font-size:10px;line-height:16px;color:var(--muted);border-radius:3px;font-variant-numeric:tabular-nums}.pg-lab.b{font-weight:600;font-size:12px;color:var(--ink)}.pg-lab.now{background:var(--accent);color:var(--accent-ink)}.pg-name{display:grid;align-content:center;justify-items:center;border:1px solid var(--line);background:var(--surface-2);border-radius:4px;line-height:1.05}.pg-name b{font-family:var(--f-display);font-size:16px;letter-spacing:.04em}.pg-name i{font-style:normal;font-size:9px;color:var(--muted)}.pg-cell{min-height:40px;border:0;padding:0;border-radius:4px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}.pg-row[data-inst=hh] .pg-cell.on{background:var(--hh);box-shadow:none}.pg-row[data-inst=sn] .pg-cell.on{background:var(--sn);box-shadow:none}.pg-row[data-inst=kk] .pg-cell.on{background:var(--kk);box-shadow:none}.pg-row[data-inst=oh] .pg-cell.on{box-shadow:inset 0 0 0 4px var(--oh)}.pg-cell.now{outline:2px solid var(--ink);outline-offset:1px}@media(max-width:400px){.pg-row{grid-template-columns:40px repeat(4,minmax(0,1fr));gap:4px}.pg-beat{gap:2px}}.transport{display:grid;gap:14px}.play{min-height:60px;border:0;border-radius:6px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px}.play svg{width:20px;height:20px;fill:currentColor}.status{text-align:center;color:var(--muted);font-size:13px;min-height:18px;margin:-6px 0 0}.tempo{display:grid;grid-template-columns:52px 1fr 52px;gap:8px;align-items:center}.bpm{text-align:center;font-variant-numeric:tabular-nums;line-height:1}.bpm b{font-family:var(--f-display);font-size:52px;font-weight:700}.bpm span{display:block;font-size:12px;letter-spacing:.08em;color:var(--muted);margin-top:2px}input[type=range]{width:100%;min-height:32px;accent-color:var(--ink)}@media(prefers-reduced-motion:reduce){*{transition:none!important}}