@import "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";:root{--paper:#faf7f1;--paper-2:#f2ece0;--ink:#1b1a17;--ink-2:#4a463f;--ink-3:#8a857a;--line:#e3dbc9;--line-2:#d0c6ae;--bronze:#a67c34;--bronze-deep:#7c5a20;--bronze-soft:#e2cfa1;--bronze-tint:#f1e5c4;--danger:#a0431f;--font-display:"Instrument Serif", Georgia, serif;--font-sans:"Instrument Sans", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;--radius-sm:4px;--radius-md:8px}*{box-sizing:border-box}body{font-family:var(--font-sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;margin:0;font-size:14px}main{max-width:1240px;margin:0 auto;padding:20px 24px 48px}h1,h2,h3{margin:0;font-weight:400}h1{font-family:var(--font-display);letter-spacing:-.01em;color:var(--ink);font-size:30px;line-height:1}h1 em{color:var(--bronze);font-style:italic}h2{font-family:var(--font-display);color:var(--ink);font-size:20px}label{color:var(--ink-2)}button{font-family:var(--font-sans);color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius-sm);cursor:pointer;padding:6px 12px;font-size:13px;font-weight:500;transition:background .12s,border-color .12s}button:disabled{opacity:.35;cursor:not-allowed}button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}button.icon{color:var(--ink-3);background:0 0;border:none;padding:4px 6px}@media (hover:hover) and (pointer:fine){button:hover:not(:disabled){background:var(--paper-2);border-color:var(--ink-3)}button.primary:hover:not(:disabled){background:var(--bronze-deep);border-color:var(--bronze-deep)}button.icon:hover:not(:disabled){color:var(--danger);background:0 0}button.active:hover{background:var(--bronze-tint);border-color:var(--bronze)}}input[type=text],input:not([type]),input[type=number],select{font-family:var(--font-sans);color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:6px 10px;font-size:14px}input[type=number]{width:56px}input:focus,select:focus,button:focus-visible{outline:2px solid var(--bronze);outline-offset:1px}input[type=range]{accent-color:var(--bronze)}.meter-select{font-family:var(--font-mono);padding:5px 26px 5px 10px;font-size:13px}.app-header{align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.app-header .tagline{font-family:var(--font-display);color:var(--ink-3);font-size:14px;font-style:italic}.layout{grid-template-columns:1fr;gap:20px;display:grid}@media (width>=940px){.layout{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:32px}}.main-col>*+*{margin-top:14px}.side-col>*+*{margin-top:12px}.header-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.title-input{font-family:var(--font-display);background:0 0;border:none;border-bottom:1px solid #0000;flex:240px;min-width:200px;padding:2px 0;font-size:22px}.title-input:hover{border-bottom-color:var(--line-2)}.title-input:focus{border-bottom-color:var(--bronze);outline:none}.header-row .actions{flex-wrap:wrap;gap:6px;display:flex}.notation-card{border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:0 1px 0 var(--paper-2);background:#fff;padding:8px 16px 4px}.transport-row,.practice-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.tempo{font-family:var(--font-mono);color:var(--ink-2);min-width:72px;font-size:13px}.count-in-beat{font-family:var(--font-display);color:var(--bronze);text-align:center;width:30px;font-size:26px;line-height:1}.live-status{font-family:var(--font-mono);color:var(--bronze-deep);font-size:12px;font-weight:500}.check{cursor:pointer;color:var(--ink-2);align-items:center;gap:6px;font-size:13px;display:inline-flex}.trainer-params{color:var(--ink-2);flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;display:inline-flex}.bar-nav{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.bar-nav .bar-label{font-family:var(--font-mono);color:var(--ink-2);min-width:84px;font-size:12px}.bar-nav .hint{font-family:var(--font-sans);color:var(--ink-3);font-size:12px}.lane{flex-wrap:nowrap;align-items:center;gap:3px;margin-bottom:4px;display:flex;overflow-x:auto}.lane-label{width:96px;color:var(--ink-2);flex-shrink:0;font-size:13px}.pad{border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--paper-2);color:#fff;width:28px;height:28px;font-size:13px;font-weight:700;font-family:var(--font-sans);cursor:pointer;flex-shrink:0;padding:0;transition:background .1s,border-color .1s;box-shadow:inset 0 1px 2px #0000000a}@media (hover:hover) and (pointer:fine){.pad:hover:not(.on){background:var(--bronze-tint);border-color:var(--bronze-soft)}}.pad.on{background:var(--bronze);border-color:var(--bronze-deep);box-shadow:none}.pad.accent{background:var(--bronze-deep);border-color:var(--bronze-deep)}.pad.ghost{background:var(--bronze-soft);border-color:var(--bronze-soft);color:var(--bronze-deep)}.pad.playing{outline:2px solid var(--bronze);outline-offset:1px}.pad.beat-start{margin-left:8px}@media (pointer:coarse){.pad{width:34px;height:34px;font-size:14px}button{min-height:34px;padding:8px 14px}input[type=number]{min-height:34px}}.add-instrument{color:var(--ink-3);flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:13px;display:flex}.add-instrument>span:first-child{font-family:var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);min-width:62px;font-size:11px;font-weight:600}.section-divider{border-top:1px solid var(--line);padding-top:12px}.side-card{border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;padding:14px 16px}.side-card h3{font-family:var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;font-size:11px;font-weight:600}.side-card select{width:100%}.disclosure summary{cursor:pointer;color:var(--ink-3);font-family:var(--font-sans);letter-spacing:.14em;text-transform:uppercase;align-items:center;gap:6px;margin:0 0 4px;padding:0;font-size:11px;font-weight:600;list-style:none;display:flex}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:before{content:"▸";color:var(--ink-3);width:10px;font-size:11px;transition:transform .15s;display:inline-block}.disclosure[open] summary:before{transform:rotate(90deg)}.disclosure summary .count{color:var(--ink-3);font-family:var(--font-mono);letter-spacing:0;text-transform:none;font-weight:400}.groove-list{margin-top:8px}.groove-item{border-top:1px solid var(--line);grid-template-columns:1fr auto;gap:4px;padding:8px 0;font-size:13px;display:grid}.groove-item:first-child{border-top:none}.groove-item .row1{align-items:center;gap:6px;min-width:0;display:flex}.groove-item .row1 .name{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:500;overflow:hidden}.groove-item .meta{color:var(--ink-3);font-family:var(--font-mono);grid-column:1/-1;font-size:11px}.print-only{display:none}@media print{body{background:#fff}main{max-width:none;padding:0!important}.no-print{display:none!important}.print-only{display:block}.notation-card{box-shadow:none;border:none;padding:0}.layout{grid-template-columns:1fr!important}}button.active{background:var(--bronze-tint);border-color:var(--bronze);color:var(--bronze-deep)}button.active:hover{background:var(--bronze-tint);border-color:var(--bronze)}.counting-row{align-items:flex-end;margin-bottom:8px}.count-cell{width:28px;height:20px;font-family:var(--font-mono);color:var(--ink-3);flex-shrink:0;justify-content:center;align-items:flex-end;margin-right:3px;font-size:11px;display:inline-flex}.count-cell.beat-start{margin-left:8px}@media (pointer:coarse){.count-cell{width:34px;font-size:12px}}.abcjs-highlight{fill:#007aff!important;stroke:#007aff!important}.sheet-header{flex-direction:column;align-items:flex-start;gap:1px;padding:2px 0 10px;display:flex}.sheet-title-input,.sheet-author-input,.sheet-notes-input{box-shadow:none;transition:border-color .15s;background:0 0!important;border:none!important;border-bottom:1px solid #0000!important;border-radius:0!important;padding:2px 0!important}.sheet-title-input:hover,.sheet-author-input:hover,.sheet-notes-input:hover{border-bottom-color:var(--line-2)!important}.sheet-title-input:focus,.sheet-author-input:focus,.sheet-notes-input:focus{border-bottom-color:var(--bronze)!important;outline:none!important}.sheet-title-input{font-family:var(--font-display);color:var(--ink);width:auto;min-width:260px;max-width:100%;height:42px;font-size:30px;line-height:1.2}.sheet-author-input{font-family:var(--font-display);color:var(--ink-2);width:auto;min-width:200px;max-width:100%;height:24px;font-size:16px;font-style:italic}.sheet-meta-line{font-family:var(--font-mono);color:var(--ink-3);align-items:center;gap:8px;margin-top:6px;font-size:12px;display:flex}.sheet-notes-input{font-family:var(--font-sans);color:var(--ink-2);width:auto;min-width:320px;max-width:100%;height:26px;margin-top:6px;font-size:13px}.sheet-notes-input::placeholder{color:var(--ink-3);font-style:italic}.sheet-author-input::placeholder{color:var(--ink-3)}@media (width<=599px){.sheet-title-input{width:100%;min-width:0;height:34px;font-size:24px}.sheet-author-input{width:100%;min-width:0;font-size:15px}.sheet-notes-input{width:100%;min-width:0}}@media (width<=939px){main{padding-left:16px;padding-right:16px}.header-row{gap:8px}.header-row .actions button{padding:8px 12px}.transport-row{gap:10px 14px}.transport-row input[type=range]{flex:160px}.notation-card{padding:10px 12px 6px}}@media (width<=599px){main{padding:12px 10px 40px}.app-header h1{font-size:26px}.app-header .tagline{display:none}.header-row{flex-direction:column;align-items:stretch}.header-row .actions{flex-wrap:wrap;justify-content:flex-start}.header-row .actions button{flex:auto;min-width:72px;padding:10px;font-size:14px}.transport-row{gap:10px 12px}.transport-row>button.primary{min-width:96px;padding:12px 16px;font-size:16px}.transport-row input[type=range]{flex:100%;height:28px}.lane{-webkit-overflow-scrolling:touch}.lane-label{width:64px;font-size:12px}.pad{width:34px;height:34px}.side-col{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.side-card,.side-card select{box-sizing:border-box;width:100%}.meter-select{flex:auto}}@media (width<=379px){.lane-label{width:54px}.header-row .actions button{padding:9px 8px;font-size:13px}}.add-details-link{color:var(--ink-3);font-family:var(--font-sans);cursor:pointer;box-shadow:none;margin-top:2px;font-size:12px;background:0 0!important;border:none!important;padding:4px 0!important}.add-details-link:hover:not(:disabled){color:var(--bronze-deep);background:0 0!important;border:none!important}
