:root { color-scheme:light dark; --bg:light-dark(#f3f1ea,#191b17); --paper:light-dark(#faf8f2,#20231d); --ink:light-dark(#30352c,#e9ebdf); --muted:light-dark(#666c5f,#adb5a3); --line:light-dark(#d9ddce,#414a39); --soft:light-dark(#edf0e5,#2d3527); --green:light-dark(#425d34,#bdd6a5); --on-green:light-dark(#fff,#202b18); --note:light-dark(#e1ebd5,#3c4d30); --error:light-dark(#943b22,#ffb29a); font:15px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--ink); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
.view-switch { display:flex; gap:10px; }
.history-controls { display:flex; align-items:center; gap:4px; }
.history-controls button { border:1px solid var(--line); border-radius:4px; background:var(--paper); }
.history-controls button:disabled { opacity:0.35; }
.view-switch [aria-pressed="true"] { font-weight:650; text-decoration:underline; text-underline-offset:5px; }
.song-name { max-width:420px; margin-top:10px; }
.song-section { border:1px solid var(--line); margin:10px 0; padding:10px; border-radius:4px; }
.song-section.is-playing,.song-order-row.is-playing { border-color:var(--green); box-shadow:inset 3px 0 var(--green); }
.song-section-head,.song-order-row,.song-reuse { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.song-section-head { margin-bottom:8px; }
.song-section-head>.field,.song-order-row>.field,.song-reuse>.field { flex-direction:row; align-items:center; }
.song-section-head input[type="number"],.song-order-row input { width:58px; }
.song-section-head input:not([type="number"]) { width:min(260px,55vw); }
.song-subheading { font-size:14px; font-weight:550; margin:16px 0 8px; }
.song-order-row { border:1px solid var(--line); border-radius:4px; padding:6px 10px; margin:5px 0; }
.song-order-row { position:relative; }
.drag-handle { cursor:grab; touch-action:none; user-select:none; }
.drag-handle:active { cursor:grabbing; }
.drag-source { opacity:0.5; }
.drop-before::before,.drop-after::after { content:''; position:absolute; left:0; right:0; border-top:3px solid var(--green); pointer-events:none; }
.drop-before::before { top:-4px; }.drop-after::after { bottom:-4px; }
.song-order-row>select { width:min(240px,55vw); }
.song-reuse { margin-top:10px; }
.song-reuse select { width:min(220px,50vw); }
.song-tracks { display:flex; flex-direction:column; gap:6px; }
.song-track { padding:6px 8px; background:var(--soft); border-radius:4px; min-width:0; overflow:hidden; }
.song-track-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.track-sound-controls { display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; margin:0 0 8px; }
.track-sound-controls>.field { flex-direction:row; align-items:center; }
.track-sound-controls select { width:auto; }
.track-sound-controls input { width:64px; }
.phrase-chain { display:flex; align-items:stretch; flex-wrap:wrap; gap:8px 24px; padding-left:0; }
.chain-item { position:relative; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:4px; padding:4px 6px; background:var(--paper); min-width:0; }
.chain-item:not(:first-child)::before { content:''; position:absolute; left:-25px; top:19px; width:24px; border-top:2px solid var(--green); }
.chain-item select { width:min(190px,32vw); min-width:105px; font-size:12px; }
.chain-item .text-button { font-size:10px; padding:2px 0 0; }
.chain-item>.field { flex-direction:row; align-items:center; margin-top:4px; }
.chain-item .field input { width:52px; padding:2px 5px; }
.pulse { position:relative; }
.pulse-head { gap:3px; }
.pulse-head .icon-button { width:20px; height:22px; min-height:22px; padding:2px; }
.pulse-head .icon { width:14px; height:14px; }
.pulse-head>span { margin-right:auto; }
.pulse.drop-before::before,.pulse.drop-after::after { border-top:0; border-left:3px solid var(--green); top:0; bottom:0; width:0; right:auto; }
.pulse.drop-before::before { left:-3px; }.pulse.drop-after::after { left:auto; right:-3px; }
@media(pointer:coarse) { .pulse-head .icon-button { width:24px; height:44px; min-height:44px; } }
.chain-item.is-playing { border-color:var(--green); background:var(--note); }
.song-section select { max-width:100%; }
.song-section-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
body { margin:0; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:default; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.app-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--paper); }
.brand { color:inherit; text-decoration:none; font:500 22px/1.1 Georgia,serif; display:flex; align-items:center; gap:12px; }
.brand span { font:12px/1.4 system-ui,sans-serif; color:var(--muted); }
main { max-width:1440px; margin:auto; min-height:calc(100dvh - 46px); background:var(--paper); }
.library-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:10px 16px; border-bottom:1px solid var(--line); }
.library-bar>.field { flex:1 1 180px; max-width:340px; }
.library-bar .field { flex-direction:row; align-items:center; }
.library-bar select { flex:1; width:0; height:34px; }
.workspace { padding:12px 16px; min-width:0; }
.editor-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
h1 { font-size:18px; font-weight:500; margin:0; overflow-wrap:anywhere; }
#save-status { font-size:11px; color:var(--muted); text-align:right; }
.app-status { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 12px; font-size:11px; color:var(--muted); }
button[hidden] { display:none; }
.field { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
input:not([type="checkbox"]),select { width:100%; min-width:0; border:1px solid var(--line); border-radius:4px; padding:5px 8px; background:var(--paper); color:var(--ink); }
input[type="checkbox"] { accent-color:var(--green); }
.identity-fields { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.identity-fields .field { flex:1 1 150px; }
#names-editor { max-width:100%; }
#names-editor[open] { flex-basis:100%; }
summary { cursor:pointer; color:var(--muted); font-size:12px; }
.small-field { width:auto; }
.small-field input { width:62px; }
.edit-toggle { display:flex; gap:4px; align-items:center; min-height:32px; font-size:12px; }
.meter { color:var(--muted); font-size:12px; }
.secondary,.primary { border:1px solid var(--line); border-radius:4px; padding:5px 10px; background:var(--paper); color:var(--ink); min-height:32px; }
.primary { background:var(--green); color:var(--on-green); border-color:var(--green); }
.text-button { border:0; padding:4px 0; background:transparent; font-size:12px; color:var(--green); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:6px; flex-shrink:0; }
.icon { display:block; width:20px; height:20px; background:currentColor; mask-size:contain; mask-position:center; mask-repeat:no-repeat; }
.audio-note { font-size:11px; color:var(--muted); margin:12px 0 0; }
.audio-note a { color:inherit; text-underline-offset:2px; }
.backup-menu { margin-left:auto; }
.backup-menu[open] { flex-basis:100%; margin-left:0; }
.backup-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding-top:8px; font-size:11px; color:var(--muted); }
.import-label { font-size:12px; color:var(--green); cursor:pointer; }
.import-label input { display:block; width:160px; font-size:11px; margin-top:4px; }
.transport { --control-height:34px; display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; padding:10px 0; margin-top:8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.transport>.field { flex-direction:row; align-items:center; }
.transport :is(button,select,input:not([type="checkbox"])) { height:var(--control-height); min-height:var(--control-height); padding-block:0; }
.transport>.field,.transport>.tempo-label,.transport>.edit-toggle,.transport>.meter { min-height:var(--control-height); }
.transport>.meter { display:inline-flex; align-items:center; }
.transport>.meter:empty { display:none; }
.transport>.icon-button { width:var(--control-height); }
.tempo-label { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.tempo-label input { width:66px; text-align:right; }
.grid-legend { display:flex; flex-wrap:wrap; gap:12px; margin:10px 0; font-size:11px; color:var(--muted); }
.grid-legend b { font-weight:500; color:var(--ink); }
.cycle { margin-left:auto; }
.bar { margin:10px 0 14px; }
.pickup-bar { border-left:2px solid var(--green); padding-left:8px; }
.bar-caption { font-size:11px; font-weight:400; color:var(--muted); margin:0 0 4px; }
.bar-head { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.bar-head .bar-caption { margin:0 auto 0 0; }
.bar-head .icon-button { width:28px; height:28px; padding:4px; }
.bar { position:relative; }
.beats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr)); gap:4px; }
.pulse { min-width:0; }
.pulse-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:3px; padding:2px 4px; border:1px solid var(--line); background:var(--soft); font-size:11px; min-height:26px; }
.pulse-head button:disabled { opacity:0.4; }
.mode { min-width:32px; height:22px; background:var(--paper); border:1px solid var(--line); border-radius:3px; font-size:12px; }
.cells { display:grid; grid-template-columns:repeat(var(--count),minmax(0,1fr)); border-left:1px solid var(--line); }
.cell { width:100%; height:34px; padding:0; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); font-weight:500; }
.cell { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:pan-y pinch-zoom; }
.cell.hold-ready { outline:2px solid var(--green); outline-offset:-2px; }
.step { min-width:0; }
.subdivision-row { display:flex; align-items:stretch; }
.subdivision-row .cells { flex:1; min-width:0; }
.row-count { width:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-left:1px solid var(--line); border-bottom:1px solid var(--line); font-size:12px; font-weight:600; color:var(--muted); background:var(--paper); }
.primary-row .row-count { background:var(--soft); color:var(--green); }
.shared-step .shared-slot { height:100%; min-height:34px; background:var(--soft); }
.cells:has(>.step:nth-child(6)) .cell { font-size:11px; }
.hands-editor { margin-top:8px; }
.hands-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:8px; font-size:11px; color:var(--muted); }
.hands-controls>.field { flex-direction:row; align-items:center; }
.hands-note { font-size:11px; color:var(--muted); margin:6px 0; }
.hand-cell { width:100%; height:24px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; background:var(--soft); color:var(--muted); font-size:11px; }
.hand-cell:disabled { opacity:0.55; }
.cell[data-filled="true"] { background:var(--note); }
.cell:disabled { color:var(--ink); opacity:1; }
.cell.is-playing { box-shadow:inset 0 -4px var(--green); }
.pulse.is-playing .pulse-head { color:var(--on-green); background:var(--green); }
.hint { font-size:12px; color:var(--muted); margin:8px 0; }
.hint:empty { display:none; }
.error-notice { position:fixed; z-index:10; bottom:16px; right:16px; display:flex; align-items:flex-start; gap:12px; max-width:min(440px,calc(100vw - 32px)); max-height:40vh; overflow:auto; padding:12px 16px; background:var(--paper); border:1px solid var(--error); border-radius:6px; box-shadow:0 4px 24px #0002; }
#message { color:var(--error); font-size:13px; }
#help-dialog { width:min(640px,calc(100vw - 24px)); max-height:85dvh; padding:0 22px 22px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
#help-dialog::backdrop { background:#0006; }
.help-heading { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--paper); padding:16px 0 10px; border-bottom:1px solid var(--line); }
#help-dialog h2 { font-size:15px; margin:20px 0 6px; }
#help-dialog p { font-size:13px; margin:8px 0; }
@media(max-width:560px) {
  .brand span { display:none; }.app-header { padding:8px 12px; }.library-bar { padding:8px 12px; gap:6px 12px; }
  .library-bar>.field { flex-basis:100%; max-width:none; }.library-bar>.field>select { width:100%; }
  .workspace { padding:10px 12px; }.cycle { margin-left:0; }
}
@media(pointer:coarse) { input:not([type="checkbox"]),select { font-size:16px; min-height:44px; }.mode { height:44px; min-width:44px; }button { min-height:44px; } }
@media(pointer:coarse) { .transport { --control-height:44px; } }
@media(pointer:coarse) { .history-controls .icon-button { width:44px; } }

#auth-dialog { width:min(380px,calc(100vw - 24px)); padding:20px 22px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
#auth-dialog::backdrop { background:#000a; }
#auth-dialog h1 { font-size:18px; margin:0 0 4px; }
#auth-form .field { display:block; margin:12px 0; }
#auth-form input { width:100%; box-sizing:border-box; }
.auth-error { color:#a40000; font-size:13px; margin:8px 0; }
#account-email { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mode-banner { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:6px 16px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); }
.mode-banner:has(#mode-text:empty) { display:none; }
body[data-mode="readonly"] .mode-banner, body[data-mode="offline"] .mode-banner { background:#fff4d6; color:#4a3a00; }
body[data-mode="readonly"] [inert], body[data-mode="offline"] [inert] { opacity:.6; }

#share-dialog { width:min(640px,calc(100vw - 24px)); max-height:85dvh; padding:0 22px 22px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
#share-dialog::backdrop { background:#0006; }
.share-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:12px 0; padding-top:8px; border-top:1px solid var(--line); }
.share-row .share-name { flex:1 1 100%; font-size:13px; }
.share-row input { flex:1 1 220px; min-width:0; font-size:12px; }

.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.syllable-cell { display:block; width:100%; box-sizing:border-box; min-width:0; margin-top:2px; font-size:10px; text-align:center; }
input.syllable-cell { padding:2px 1px; }
.syllable-text { min-height:14px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(pointer:coarse) { input.syllable-cell { font-size:16px; } }