@import "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@700&family=Inter: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:"Atkinson Hyperlegible", system-ui, sans-serif;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, 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;max-width:100vw;margin:0;font-size:14px}main{width:100%;max-width:1600px;margin:0 auto;padding:20px 24px 48px}h1,h2,h3{font-weight:400;font-family:var(--font-display);color:var(--ink);margin:0}h1{letter-spacing:-.01em;font-size:30px;line-height:1}h1 em{color:var(--bronze);font-style:normal;font-weight:400}h2{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);cursor:pointer;border-radius:6px;padding:8px 14px;font-size:14px;font-weight:500;transition:all .15s;box-shadow:0 1px 2px #00000005}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);box-shadow:none;background:0 0;border:none;padding:4px 6px}button.active{background:var(--bronze-tint);border-color:var(--bronze);color:var(--bronze-deep)}@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)}}.app-header-nav button{color:var(--ink-2);box-shadow:none;background:0 0;border:1px solid #0000;border-radius:9999px;padding:8px 16px}.app-header-nav button.active{background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink);font-weight:600;box-shadow:0 1px 3px #0000000a}.app-header-nav button:hover:not(.active){background:var(--paper-2);border-color:#0000}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-sans);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:1fr;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{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:0 1px 0 var(--line-2);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}.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}.lane{flex-wrap:nowrap;align-items:center;gap:3px;width:100%;margin-bottom:4px;display:flex;position:relative}.lane-label{letter-spacing:.1em;text-transform:uppercase;width:90px;color:var(--ink-2);z-index:10;background:var(--paper);flex-shrink:0;font-size:11px;font-weight:700;position:sticky;left:0}.pad{border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--paper-2);min-width:16px;height:40px;color:var(--ink);font-size:15px;font-weight:700;font-family:var(--font-sans);cursor:pointer;flex:1 1 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);color:#fff;box-shadow:none}.pad.accent{background:var(--bronze-deep);border-color:var(--bronze-deep);color:#fff}.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;z-index:5}.pad.beat-start{margin-left:6px}.pad.measure-start{margin-left:12px;position:relative}.pad.measure-start:before{content:"";background-color:var(--line-2);border-radius:2px;width:2px;height:80%;position:absolute;top:10%;left:-7px}@media (pointer:coarse){.pad{height:48px;font-size:16px}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}.side-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-md);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)}.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 .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}@media print{body{background:#fff}main{max-width:none;padding:0!important}.no-print{display:none!important}}.counting-row{align-items:flex-end;margin-bottom:8px;display:flex;position:relative}.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}.sheet-header{flex-direction:column;align-items:flex-start;gap:1px;padding:2px 0 10px;display:flex}.sheet-title-input{font-family:var(--font-display);color:var(--ink);background:0 0;border:none;width:100%;font-size:30px;line-height:1.2}.landscape-prompt{display:none}@media (width<=768px) and (orientation:portrait){.landscape-prompt{text-align:center;background:var(--paper);z-index:9999;flex-direction:column;justify-content:center;align-items:center;padding:32px;display:flex;position:fixed;inset:0}}.tutorial-spotlight{cursor:help;border:2px dashed var(--bronze-soft);border-radius:var(--radius-md);padding:12px;transition:background .2s,border-color .2s;display:inline-block;position:relative}.tutorial-spotlight:hover{background:var(--bronze-tint);border-color:var(--bronze)}.tutorial-tooltip{visibility:hidden;background-color:var(--ink);color:#fff;text-align:left;z-index:100;opacity:0;pointer-events:none;border-radius:8px;width:260px;padding:12px 14px;font-size:13px;line-height:1.5;transition:opacity .2s,transform .2s;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)translateY(10px);box-shadow:0 8px 24px #0003}.tutorial-spotlight:hover .tutorial-tooltip{visibility:visible;opacity:1;transform:translate(-50%)translateY(0)}.bar-actions-row{flex-wrap:wrap;align-items:center;gap:4px;margin-top:10px;display:flex}.bar-action-btn{border:1px solid var(--line-2,#e3dbc9);cursor:pointer;color:var(--ink-2,#4a463f);background:0 0;border-radius:8px;padding:6px 12px;font-size:13px}.bar-action-btn:hover:not(:disabled){border-color:var(--bronze,#9a7b4f)}.bar-action-btn:disabled{opacity:.4;cursor:default}.bar-actions-sep{color:var(--ink-3,#8a857a);margin:0 2px}body.theme-glacier{--paper:#f8fafc;--paper-2:#f1f5f9;--ink:#0f172a;--ink-2:#334155;--ink-3:#64748b;--line:#e2e8f0;--line-2:#cbd5e1;--bronze:#2563eb;--bronze-deep:#1d4ed8;--bronze-soft:#93c5fd;--bronze-tint:#dbeafe}body.theme-mint{--paper:#fff;--paper-2:#f3f4f6;--ink:#111827;--ink-2:#4b5563;--ink-3:#9ca3af;--line:#e5e7eb;--line-2:#d1d5db;--bronze:#0d9488;--bronze-deep:#0f766e;--bronze-soft:#99f6e4;--bronze-tint:#ccfbf1}body.theme-mono{--paper:#fff;--paper-2:#f4f4f5;--ink:#18181b;--ink-2:#52525b;--ink-3:#a1a1aa;--line:#e4e4e7;--line-2:#d4d4d8;--bronze:#27272a;--bronze-deep:#000;--bronze-soft:#a1a1aa;--bronze-tint:#e4e4e7}body.theme-ivory{--paper:#faf8f3;--paper-2:#f2eee5;--ink:#2a2622;--ink-2:#5a544c;--ink-3:#8a847b;--line:#e6e0d6;--line-2:#d5cec1;--bronze:#d97706;--bronze-deep:#b45309;--bronze-soft:#fcd34d;--bronze-tint:#fef3c7}body.theme-groove{--paper:#fcfbfe;--paper-2:#f4f2fa;--ink:#241f31;--ink-2:#5c5470;--ink-3:#948ca6;--line:#e8e4f2;--line-2:#d6cfe7;--bronze:#7c3aed;--bronze-deep:#6d28d9;--bronze-soft:#c4b5fd;--bronze-tint:#ede9fe}body.theme-sunset{--paper:#fffdfc;--paper-2:#faf4f1;--ink:#2d211c;--ink-2:#6b5245;--ink-3:#9e8477;--line:#f0ddd2;--line-2:#e4cabb;--bronze:#ea580c;--bronze-deep:#c2410c;--bronze-soft:#fdba74;--bronze-tint:#ffedd5}body.theme-forest{--paper:#fafcfb;--paper-2:#f1f5f2;--ink:#1f2933;--ink-2:#52606d;--ink-3:#829ab1;--line:#d9e2dc;--line-2:#bcccdc;--bronze:#2f855a;--bronze-deep:#276749;--bronze-soft:#9ae6b4;--bronze-tint:#f0fff4}body.theme-ocean{--paper:#fbfefe;--paper-2:#f0f9f9;--ink:#16323b;--ink-2:#4a6572;--ink-3:#7d97a5;--line:#d9ecee;--line-2:#bedbdd;--bronze:#0f766e;--bronze-deep:#115e59;--bronze-soft:#99f6e4;--bronze-tint:#ccfbf1}body.theme-sapphire{--paper:#fafbfe;--paper-2:#f1f5fc;--ink:#18243a;--ink-2:#475569;--ink-3:#94a3b8;--line:#dfe7f3;--line-2:#cbd5e1;--bronze:#2563eb;--bronze-deep:#1d4ed8;--bronze-soft:#93c5fd;--bronze-tint:#dbeafe}body.theme-coffee{--paper:#faf7f3;--paper-2:#f2ece5;--ink:#33261e;--ink-2:#6a5648;--ink-3:#9a8779;--line:#e6ddd4;--line-2:#d4c8bd;--bronze:#92400e;--bronze-deep:#78350f;--bronze-soft:#d6a77a;--bronze-tint:#f5e7da}body.theme-jazz{--paper:#fcfafb;--paper-2:#f6f1f3;--ink:#2a1f27;--ink-2:#624757;--ink-3:#977c8a;--line:#e8dde3;--line-2:#d8c7cf;--bronze:#9d174d;--bronze-deep:#831843;--bronze-soft:#f9a8d4;--bronze-tint:#fce7f3}body.theme-drumshell{--paper:#fbf8f5;--paper-2:#f3ede7;--ink:#32241d;--ink-2:#665248;--ink-3:#98847b;--line:#e6dcd3;--line-2:#d4c7bc;--bronze:#a16207;--bronze-deep:#854d0e;--bronze-soft:#facc15;--bronze-tint:#fef9c3}body.theme-stone{--paper:#fcfcfc;--paper-2:#f5f5f4;--ink:#292524;--ink-2:#57534e;--ink-3:#a8a29e;--line:#e7e5e4;--line-2:#d6d3d1;--bronze:#78716c;--bronze-deep:#57534e;--bronze-soft:#d6d3d1;--bronze-tint:#f5f5f4}body.theme-olive{--paper:#fbfcf8;--paper-2:#f2f5ea;--ink:#293025;--ink-2:#5d6655;--ink-3:#909a88;--line:#e1e7d6;--line-2:#cdd7c0;--bronze:#6b8e23;--bronze-deep:#4d6b1a;--bronze-soft:#cfe7a5;--bronze-tint:#eef8dd}body.theme-coral{--paper:#fffdfc;--paper-2:#fff5f3;--ink:#352727;--ink-2:#715252;--ink-3:#a88686;--line:#f3ddda;--line-2:#e7c8c4;--bronze:#f97316;--bronze-deep:#ea580c;--bronze-soft:#fdba74;--bronze-tint:#ffedd5}body.theme-emerald{--paper:#fafffc;--paper-2:#f0fdf4;--ink:#1f2d24;--ink-2:#4b6355;--ink-3:#86a08f;--line:#dcefe3;--line-2:#c5e4d0;--bronze:#16a34a;--bronze-deep:#15803d;--bronze-soft:#86efac;--bronze-tint:#dcfce7}.studio-footer-wrapper{z-index:999;background-color:var(--paper);border-top:1px solid var(--line);border-radius:0 0 var(--radius-md) var(--radius-md);flex-wrap:wrap;align-items:center;gap:16px;width:100%;padding:16px;display:flex;position:sticky;bottom:0;box-shadow:0 -8px 24px #0000000a}.floating-transport{z-index:1000;pointer-events:auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;align-items:center;gap:16px;width:calc(100% - 48px);max-width:1552px;padding:12px 16px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #0000001a}