:root{--paper:#f3f0e6;--ink:#203f36;--muted:#708074;--line:#d5dacb;--green:#315d49;--dark:#193b34;--peach:#efba8e;--sage:#adceb5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px Arial,Helvetica,sans-serif}button,input,select{font:inherit}button,select,.import-button{cursor:pointer}button{border:1px solid #cbd4c5;background:transparent;color:inherit;border-radius:6px;padding:10px 13px;transition:background .15s}button:hover:not(:disabled),.import-button:hover{background:#e4e8dc}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #c38043;outline-offset:4px}button.primary{background:var(--green);border-color:var(--green);color:#fff}button.primary:hover:not(:disabled){background:#42735a}a{color:inherit;text-decoration:none}input[type=range]{width:100%;accent-color:var(--green);cursor:pointer;margin:12px 0 0;min-width:0}input[type=checkbox]{accent-color:var(--green)}input:disabled,select:disabled{cursor:default}fieldset{border:0;padding:0;margin:0;min-width:0}fieldset:disabled{opacity:.55}h1,h2,p{margin:0}h2{font:normal 27px Georgia,serif;letter-spacing:-.6px}output{float:right;color:var(--muted);font-size:11px}kbd{font:9px Arial,sans-serif;border:1px solid currentColor;opacity:.65;border-radius:3px;padding:1px 3px;margin-left:5px}.shell{max-width:1420px;padding:0 46px;margin:auto}header{min-height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px}.wordmark{font-size:14px;letter-spacing:2px;display:flex;align-items:center;gap:10px;font-weight:bold}.wordmark i{font:normal 20px Georgia,serif;letter-spacing:0}.mark{font:42px Georgia,serif;color:#44755a}.edition{margin-left:auto;font-size:9px;letter-spacing:2px;color:var(--muted)}.archive{font-size:11px;border-bottom:1px solid #bac8b7;padding-bottom:4px}.intro{display:flex;align-items:center;gap:40px;padding:33px 0 29px}.eyebrow{font-size:9px;font-weight:bold;letter-spacing:2px;color:#607e64;margin-bottom:12px}h1{font:normal clamp(38px,4.4vw,60px)/1.05 Georgia,serif;letter-spacing:-2px}h1 em{font-weight:normal;color:#557860}.intro-note{font:14px/1.8 Arial,sans-serif;color:#657567;margin-left:auto}.study-stamp{color:#70826c;border:1px solid #c6d1bf;border-radius:50%;width:104px;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:26px Georgia,serif;flex-shrink:0;transform:rotate(8deg)}.study-stamp small{text-align:center;font:8px/1.5 Arial,sans-serif;letter-spacing:1.3px;margin-top:7px}.transport{border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:15px 0}.transport button{font-size:12px}.sound-state{font-size:11px;color:var(--muted)}.output{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px}.output input{width:90px;margin:0}.stop{color:#8a5d46}.workspace{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:20px;align-items:stretch}.performance{background:var(--dark);border-radius:12px;color:#f3f1df;overflow:hidden;min-width:0}.panel-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:24px 25px 10px}.performance .eyebrow{color:#a1b99f}.badge{font-size:8px;letter-spacing:1.5px;border:1px solid #65806a;color:#bacbb3;padding:6px 8px;border-radius:20px;white-space:nowrap}.badge.active{border-color:#d4a272;color:#efc298}.pad{height:352px;position:relative;touch-action:none;user-select:none;cursor:crosshair;outline-offset:-4px!important;overflow:hidden}.pad canvas{width:100%;height:100%;display:block;position:absolute}.axis-y{position:absolute;left:20px;top:28px;bottom:55px;display:flex;flex-direction:column;justify-content:space-between;color:#9bb39c;font-size:8px;letter-spacing:2px;pointer-events:none}.pad-invitation{position:absolute;bottom:52px;left:65px;right:20px;display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none}.pad-invitation b{font:normal 23px Georgia,serif;color:#ecc9a5}.pad-invitation span{font-size:10px;color:#a8bda3;text-align:center;line-height:1.5}.pad.playing .pad-invitation{opacity:0}.pad-bottom{position:absolute;bottom:14px;left:24px;right:24px;display:flex;gap:12px;justify-content:space-between;color:#b4c9af;font-size:8px;letter-spacing:1.3px;pointer-events:none}.play-actions{padding:14px 20px;border-top:1px solid #3e5c4d;display:flex;align-items:center;gap:8px}.play-actions button{border-color:#69806a;color:#e6ead8;font-size:11px}.play-actions button:hover:not(:disabled){background:#335543}.play-actions>span{font-size:9px;color:#a6b99f;margin-left:auto;max-width:140px;line-height:1.6}.pulse-row{background:#214437;display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 22px;font-size:10px;color:#b4c6aa;min-height:74px}.pulse-row label{display:flex;gap:5px;align-items:center}.pulse-row input[type=number]{width:47px;border:1px solid #70816a;border-radius:4px;background:#1a352d;color:#f0ecd6;padding:5px}.pulse-note{font-size:9px;color:#a0b298}.beat-dot{width:7px;height:7px;border-radius:50%;background:#617a5a;transition:background .1s}.beat-dot.lit{background:#f3c797;box-shadow:0 0 12px #d1bd79}.workshop{border:1px solid #ccd6c5;border-radius:12px;background:#f9f7ee;overflow:hidden;min-width:0}.workshop .panel-top{padding:22px 23px 18px}.body-name{font:italic 13px Georgia,serif;color:#7b876f}.workshop fieldset{padding:0 23px 14px}.presets{display:flex;flex-wrap:wrap;gap:6px}.presets button{flex:1 1 28%;font-size:10px;padding:8px 3px;white-space:nowrap}.presets .selected{background:#e1e9d7;border-color:#9eb590}.workshop svg{width:100%;height:120px;display:block;margin-top:7px;touch-action:none;user-select:none}.workshop svg .handle{cursor:ns-resize}.editor-hint{font-size:9px;color:#7b8772;line-height:1.6;text-align:center;margin-top:-4px}.thickness-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:14px 0 18px}.thickness-controls label{text-align:center;font-size:8px;letter-spacing:.8px;color:#7b8a71}.thickness-controls input{margin:7px 0}.thickness-controls output{display:block;float:none;font-size:9px;letter-spacing:0}.control label,.two-controls label,.mallet-panel label,.phrase-options>label{display:block;font-size:11px}.control p{font-size:9px;color:#7a8872;margin-top:7px}.control{margin-top:5px}.two-controls{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;margin-top:18px}.two-controls select{display:block;width:100%;margin-top:8px;font-size:10px;padding:8px 5px;color:var(--ink);border:1px solid #d0d9c7;border-radius:4px;background:#f3f4e9}.mode-strip{border-top:1px solid var(--line);padding:11px 23px 0;display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#76856d}.mode-strip span:first-child{color:#426249;font-size:11px}.mode-buttons{padding:10px 23px;display:flex;gap:5px;flex-wrap:wrap}.mode-buttons button{font-size:9px;border:0;background:#e9eddf;padding:6px 7px;border-radius:4px}.mode-buttons button.selected{background:#3b654d;color:#fff}.mode-note{font-size:9px;color:#7a8871;line-height:1.5;padding:0 23px 15px}.below{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,2fr);gap:20px;margin-top:22px}.mallet-panel,.phrase-panel{border:1px solid #d0d8c7;border-radius:10px;padding:23px;background:#f9f7ee;min-width:0}.mallet-panel h2{font-size:25px;margin-bottom:22px}.mallet-panel label{margin-top:18px}.mallet-panel p:last-child{font-size:10px;line-height:1.7;color:var(--muted);margin-top:19px}.range-ends{display:flex;justify-content:space-between;font-size:9px;color:#7b8872;margin-top:5px}.phrase-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.phrase-heading h2{font-size:25px}.phrase-heading>span{font-size:10px;line-height:1.6;color:#77866e;text-align:right;max-width:220px}.phrase-heading .eyebrow{margin-bottom:8px}.phrase-panel canvas{height:68px;width:100%;display:block;margin:15px 0;background:#e8eedd;border-radius:4px}.phrase-actions,.phrase-footer{display:flex;gap:7px;flex-wrap:wrap}.phrase-actions button{font-size:11px;padding:9px 12px}.phrase-options{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px;margin:20px 0}.phrase-options .check{font-size:10px;display:flex;align-items:center;gap:5px}.phrase-footer{border-top:1px solid var(--line);padding-top:13px}.phrase-footer button{font-size:10px;padding:8px 10px}.fine{font-size:9px;line-height:1.6;color:#7b8872;margin-top:12px}.shelf{margin:30px 0}.shelf-heading{display:flex;align-items:center;gap:16px;margin-bottom:15px}.shelf-heading h2{font-size:24px}.shelf-heading>span{font-size:10px;color:var(--muted);margin-left:auto}.import-button{border:1px solid #ccd6c5;padding:8px 10px;font-size:10px;border-radius:5px;white-space:nowrap}.shelf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.empty{border:1px dashed #bfcdb4;border-radius:7px;grid-column:1/-1;text-align:center;padding:23px;color:#7c8b72;font-size:12px}.pair-card{border:1px solid #ccd7bf;background:#e9eddf;border-radius:7px;padding:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.pair-card strong{font:normal 20px Georgia,serif;display:block}.pair-card small{display:block;font-size:9px;color:#7b886f;margin-top:6px}.pair-card .pair-title{flex:1;min-width:0}.pair-card button{font-size:10px;padding:7px}.pair-card .remove{border:0;color:#8a725a;font-size:15px}.notes{border-top:1px solid var(--line);padding:17px 0}.notes summary{font-size:12px;cursor:pointer;color:#607b5f}.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 35px;margin-top:20px}.notes p{font-size:11px;line-height:1.8;color:#72816b}.notes b{color:#466547}footer{border-top:1px solid var(--line);display:flex;gap:20px;align-items:center;justify-content:space-between;padding:22px 0 30px;color:#7e8974;font-size:9px;letter-spacing:1px}footer span:nth-child(2){font:italic 14px Georgia,serif;letter-spacing:0}footer a{font-size:10px;letter-spacing:0}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(15px);background:#264937;color:#f3f0de;padding:13px 19px;border-radius:7px;max-width:calc(100vw - 30px);font-size:12px;line-height:1.5;opacity:0;pointer-events:none;z-index:10;transition:opacity .15s,transform .15s;box-shadow:0 5px 25px #15301b22}.toast.visible{opacity:1;transform:translateX(-50%)}.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}[hidden]{display:none!important}
@media(min-width:1280px){.pad{height:375px}}@media(max-width:1050px){.shell{padding:0 26px}.workspace{grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:14px}.edition{display:none}.archive{margin-left:auto}.panel-top{padding:20px 20px 10px}.panel-top h2{font-size:23px}.play-actions{flex-wrap:wrap}.play-actions>span{max-width:none;margin-left:0;width:100%}.below{grid-template-columns:250px minmax(0,1fr);gap:14px}.phrase-options{grid-template-columns:1fr 1fr}.phrase-options .check{grid-column:1/-1}.phrase-heading>span{max-width:140px}.study-stamp{width:88px;height:88px}.mode-strip{flex-wrap:wrap}}
@media(max-width:760px){.shell{padding:0 17px}header{min-height:65px;gap:10px}.wordmark{font-size:11px;letter-spacing:1px;gap:6px}.wordmark i{font-size:17px}.mark{font-size:33px}.archive{font-size:10px}.intro{padding:27px 0 25px;gap:20px}.intro-note{font-size:11px;line-height:1.8;max-width:130px}.study-stamp{display:none}h1{font-size:39px;letter-spacing:-1.5px}.eyebrow{font-size:8px}.transport{gap:9px;flex-wrap:wrap}.sound-state{font-size:10px}.output{margin-left:auto}.output input{width:60px}.workspace{grid-template-columns:1fr}.pad{height:325px}.panel-top h2{font-size:24px}.play-actions>span{margin-left:auto;width:auto;max-width:140px}.workshop .panel-top{padding-bottom:15px}.workshop svg{height:130px}.thickness-controls{margin-top:16px}.thickness-controls label{font-size:9px}.workshop fieldset{padding-bottom:20px}.mode-strip{flex-wrap:nowrap}.below{grid-template-columns:1fr;margin-top:15px}.mallet-panel{padding:21px}.mallet-panel h2{margin-bottom:15px}.mallet-panel fieldset{display:grid;grid-template-columns:1fr 1fr;gap:25px}.mallet-panel label{margin-top:5px}.mallet-panel p:last-child{margin-top:15px}.phrase-heading>span{max-width:180px}.phrase-panel{padding:21px}.phrase-options{grid-template-columns:1fr 1fr}.phrase-actions button{flex:1;font-size:10px;padding:10px 5px}.phrase-footer button{flex:1;white-space:nowrap;padding:9px 7px}.shelf-heading{flex-wrap:wrap;gap:10px}.shelf-heading h2{font-size:22px}.shelf-heading>span{order:3;width:100%;margin:0}.import-button{margin-left:auto}.shelf-grid{grid-template-columns:1fr 1fr}.notes-grid{grid-template-columns:1fr}footer{flex-wrap:wrap;gap:12px}footer span:nth-child(2){order:3;width:100%;font-size:13px}}
@media(max-width:390px){.intro-note{max-width:112px;font-size:10px}h1{font-size:36px}.output{order:3;margin:0;width:100%}.output input{flex:1}.stop{margin-left:auto}.pad-invitation{left:52px}.pad-invitation b{font-size:21px}.play-actions>span{font-size:8px;max-width:110px}.shelf-grid{grid-template-columns:1fr}.phrase-heading{align-items:flex-start}.phrase-heading>span{max-width:125px}.phrase-footer button{flex-basis:40%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* 04.2: voicing stays separate from carving, touch, and phrase timing. */
.pitch-control{grid-template-columns:1fr;margin-top:14px}.voicing-panel{margin-top:22px;border:1px solid #c8d3bd;border-radius:10px;padding:23px;background:#e9eedf}.voice-heading{display:flex;align-items:center;gap:16px;justify-content:space-between}.voice-heading h2{font-size:27px}.voice-heading .eyebrow{margin-bottom:8px}.voice-name{color:#416349;font:italic 16px Georgia,serif}.voice-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:19px 0 23px}.voice-presets button{font-size:11px;background:#f5f4e9}.voice-presets button.selected{background:#315d49;color:white;border-color:#315d49}.voice-presets>span{font-size:11px;color:#667a60;margin-left:10px}.voice-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}.voice-grid label,.voice-detail label{font-size:12px;display:block}.control-help{font-size:10px;line-height:1.6;color:#697b60;display:block;margin-top:8px}.voice-detail{margin-top:20px;border-top:1px solid #ccd7bf;padding-top:13px}.voice-detail summary{font-size:11px;color:#526e50;cursor:pointer}.voice-detail>div{display:grid;grid-template-columns:1fr 2fr;gap:28px;margin:18px 0 6px}.voice-detail p{font-size:11px;line-height:1.8;color:#62745c}.voice-note{font-size:10px;line-height:1.6;color:#65795d;margin-top:14px}.voicing-panel fieldset:disabled{opacity:.6}.voicing-panel input[type=range]{margin-top:15px}
@media(max-width:760px){.voicing-panel{padding:21px;margin-top:15px}.voice-heading{align-items:flex-start}.voice-heading h2{font-size:24px;max-width:250px}.voice-name{font-size:13px;white-space:nowrap}.voice-grid{grid-template-columns:1fr;gap:22px}.voice-presets{gap:6px;margin-bottom:23px}.voice-presets button{flex:1;padding:11px 7px;font-size:10px}.voice-presets>span{margin:4px 0 0;width:100%}.voice-detail>div{grid-template-columns:1fr;gap:18px}.voice-note{font-size:10px}.voice-heading .eyebrow{line-height:1.6;max-width:240px}}

/* 04.3: timing references stay on the playing surface. */
.timing-controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap;padding:12px 22px 6px}.timing-controls label{font-size:10px;color:#c6d7bd;display:flex;flex-direction:column;gap:6px}.timing-controls select,.timing-controls input[type=number]{background:#244b3f;border:1px solid #617d65;border-radius:5px;color:#f4efdc;padding:7px;font-size:11px;max-width:190px}.timing-controls input[type=number]{width:62px}.timing-controls .count-check{flex-direction:row;align-items:center;align-self:center;font-size:10px}.capture-hint{font-size:10px;color:#b1c7a9;line-height:1.6;padding:6px 22px 8px}.tempo-guides{position:absolute;inset:25px 0 55px;pointer-events:none}.tempo-guide{position:absolute;left:0;right:0;height:1px;border-top:1px dashed #819b7e45;pointer-events:none}.tempo-guide button{position:absolute;left:7px;top:-11px;font-size:9px;color:#c2d4b5;background:#1c4035;border:1px solid #67805e;padding:4px 5px;min-width:37px;pointer-events:auto;line-height:12px;white-space:nowrap}.tempo-guide.selected{border-color:#f3c89688}.tempo-guide.selected button{color:#ffdbb4;border-color:#e5b17d;background:#315346}.tempo-guide button:hover{background:#416247!important}.performance .axis-y{display:none}.pad-invitation{left:80px}.pad-invitation b{font-size:21px}.play-actions #rateLock[aria-pressed=true]{background:#e7bd91;color:#233e32;border-color:#e7bd91}.export-format{display:flex;align-items:center;gap:6px;font-size:10px}.export-format select{font-size:10px;color:#31563f;background:#f6f5e9;border:1px solid #bccbb3;border-radius:5px;padding:7px}.phrase-actions{row-gap:8px}.phrase-actions #previewLoop{border-color:#8ca17b}.phrase-actions #previewLoop:disabled{opacity:.4}.play-actions{flex-wrap:wrap}
@media(max-width:760px){.timing-controls{padding:10px 18px 6px;gap:10px}.timing-controls label:first-of-type{flex:1}.timing-controls select{max-width:100%}.timing-controls .count-check{width:100%;padding:3px 0}.play-actions>span{max-width:none;width:100%;margin-left:0}.play-actions button{flex:1;padding:10px 8px}.pad-invitation span{font-size:9px}.phrase-actions #previewLoop{flex-basis:100%}.export-format{flex-basis:100%}.export-format select{flex:1}.capture-hint{padding-left:18px;padding-right:18px}}
/* 04.4: triplets have their own edge in Mixed, so labels remain tappable. */
[hidden]{display:none!important}.tempo-guide.triplet{border-top-style:dotted;border-color:#b8a5c34a}.tempo-guide.triplet button{color:#e3cce9}.tempo-guide.triplet.mixed button{left:auto;right:7px}.timing-controls{row-gap:12px}.timing-controls label{flex:0 1 auto}.hat-workshop{background:#e8e9df}.hat-illustration{text-align:center;padding:24px 20px 15px;color:#806d53}.hat-illustration>span{display:block;font:120px Georgia,serif;line-height:1.15;color:#aa9470}.hat-illustration p{font-size:10px;letter-spacing:2px;margin-top:12px}.hat-description{font-size:12px;line-height:1.9;color:#576c58;padding:0 23px 20px}.hat-workshop fieldset .hat-description{padding:20px 0 0}.hat-workshop label{display:block;font-size:12px}.hat-workshop input{margin-top:20px}.hat-workshop fieldset:disabled{opacity:.6}.voice-presets button[data-voice=hat]{border-color:#9c8a69}.voice-presets button[data-voice=hat].selected{background:#6b5843;border-color:#6b5843}.timing-controls label select{min-height:32px}
@media(max-width:760px){.hat-illustration{padding-top:10px}.hat-illustration>span{font-size:82px}.voice-presets button{flex-basis:40%}.timing-controls label{flex:1 1 28%}.timing-controls label select{width:100%}.tempo-guide button{padding:5px 7px}.pad-invitation{left:65px;right:65px}.pad-invitation b{font-size:19px}}
.tempo-guide.triplet.selected{border-color:#f3c89688}.tempo-guide.triplet.selected button{color:#ffdbb4;border-color:#e5b17d;background:#315346}
/* 04.5: momentary performance articulation stays outside locked sound settings. */
.open-hat{touch-action:none;user-select:none;-webkit-user-select:none}.open-hat[aria-pressed=true]{background:#e6c391!important;color:#233e32!important;border-color:#efcc92!important}.hat-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.hat-presets button{font-size:11px;padding:9px 12px;background:#f7f4e8;border-color:#a99a79}.hat-mix{margin-top:25px}.hat-workshop .hat-choke{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.6;margin-top:24px}.hat-workshop .hat-choke input{margin:0;width:auto}.shaker-workshop{background:#eae6d7}.shaker-illustration{text-align:center;color:#957850;padding:35px 15px}.shaker-illustration>span{font-size:40px;letter-spacing:8px}.shaker-illustration p{font-size:10px;letter-spacing:1.5px;margin-top:22px}.shaker-workshop label{display:block;font-size:12px}.shaker-workshop input{margin-top:20px}.shaker-workshop fieldset .hat-description{padding:20px 0 0}.shaker-workshop fieldset:disabled{opacity:.6}.voice-presets button[data-voice=shaker]{border-color:#a98a54}.voice-presets button[data-voice=shaker].selected{background:#74613f;color:#fff;border-color:#74613f}
@media(max-width:760px){.open-hat{min-height:44px;flex-basis:46%!important}.hat-presets button{flex:1;min-height:44px}.hat-workshop .hat-choke{min-height:44px}.shaker-illustration{padding:20px 15px}.shaker-illustration>span{font-size:32px}.play-actions button{min-height:42px}}
/* Claude pass 1: on phones the tempo-guide labels sat over the bar's left end (x≈0)
   and swallowed the touch that should start a roll. Keep them inside the pad's 45 px
   margin, and give the Timing select the same share as its neighbours (it showed "F"). */
@media(max-width:760px){.tempo-guide button{left:2px;min-width:0;max-width:41px;padding:3px 3px;font-size:8px;line-height:9px;white-space:normal;text-align:center}.tempo-guide.triplet.mixed button{left:auto;right:2px}.timing-controls label:first-of-type{flex:1 1 28%;min-width:0}}
/* Claude pass 1: a fourth voice control (Partial balance) and its A/B preset. */
@media(min-width:761px){.voice-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.voice-presets button[data-voice=balanced]{border-color:#8fae86}
.lab-strip{border:1px solid #c9d5bf;background:#e9eddf;border-radius:10px;padding:14px 18px;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}.lab-head{flex:1 1 260px;min-width:0}.lab-head .eyebrow{margin-bottom:6px;color:#8a5d46}.lab-note{font-size:11px;line-height:1.5;color:#55695a}.lab-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:8px 22px;flex:1 1 100%}.lab-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.lab-row span{font:italic 13px Georgia,serif;color:#466547;min-width:150px}.lab-row button{font-size:10px;padding:7px 9px;background:#f9f7ee}.lab-row button.lab-on{background:var(--green);border-color:var(--green);color:#fff}.lab-status{flex-basis:100%;font-size:10px;color:var(--muted)}
.instrument-row button{font-size:12px;padding:11px 18px;min-width:96px}.instrument-row button[data-instrument=bar]{border-color:#8fae86}.knock-presets{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:-6px 0 22px;padding:10px 12px;border-radius:8px;background:#f2f3e8}.knock-presets .preset-label{font-size:9px;font-weight:bold;letter-spacing:1.6px;text-transform:uppercase;color:#607e64;margin-right:6px}.knock-presets button{font-size:11px;padding:7px 11px;background:#f9f8ef}.knock-presets button.selected{background:#315d49;color:#fff;border-color:#315d49}@media(max-width:760px){.instrument-row button{flex:1 1 28%;min-width:0;padding:11px 6px}.knock-presets .preset-label{width:100%;margin-bottom:2px}.knock-presets button{flex:1 1 40%}}
.lab-control{position:relative}#shakerControls .drum-base{margin:14px 0 10px}#shakerControls .lab-control{margin-top:14px}.lab-control::before{content:"LAB";position:absolute;left:-1px;top:-11px;font-size:7px;letter-spacing:1.4px;color:#a5734c;font-weight:bold}
.drum-workshop{background:#ece4d6}.drum-illustration{text-align:center;color:#8b6440;padding:26px 15px}.drum-illustration>span{font-size:64px;line-height:1}.drum-illustration p{font-size:10px;letter-spacing:1.5px;margin-top:14px}.drum-workshop label{display:block;font-size:12px;margin-top:14px}.drum-workshop input{margin-top:14px}.drum-workshop fieldset{padding:0 23px 14px}.drum-workshop fieldset .hat-description{padding:16px 0 0}.drum-workshop>.hat-description{padding:0 23px 20px}.drum-workshop fieldset:disabled{opacity:.6}.voice-presets button[data-voice=drum]{border-color:#a0784e}.voice-presets button[data-voice=drum].selected{background:#7a5434;color:#fff;border-color:#7a5434}
.drum-base{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:4px 0 6px}.drum-base span{font-size:9px;font-weight:bold;letter-spacing:1.6px;text-transform:uppercase;color:#7a5c3e;margin-right:6px}.drum-base button{font-size:11px;padding:8px 12px;background:#f6f1e6}.drum-base button.selected{background:#7a5434;color:#fff;border-color:#7a5434}
@media(max-width:760px){#performanceTitle{min-height:2.3em}}
.builder{margin-top:22px;border:1px solid #d0d8c7;border-radius:10px;padding:23px;background:#f9f7ee}.builder-heading{display:flex;gap:28px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}.builder-heading h2{font-size:25px}.builder-note{font-size:10px;line-height:1.7;color:var(--muted);max-width:520px}.builder-bar{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-end;margin:20px 0 14px}.builder-bar label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#55695a}.builder-bar label.check{flex-direction:row;align-items:center;gap:6px;padding-bottom:8px}.builder select,.builder input[type=number]{font-size:11px;padding:7px 6px;color:var(--ink);border:1px solid #d0d9c7;border-radius:4px;background:#f3f4e9}.builder-columns,.builder-row{display:grid;grid-template-columns:70px 120px minmax(90px,1fr) minmax(90px,1fr) 140px 50px 32px;gap:12px;align-items:center}.builder-columns{font-size:9px;font-weight:bold;letter-spacing:1.4px;text-transform:uppercase;color:#607e64;padding:0 0 6px 28px}.builder-rows{list-style:none;margin:0;padding:0;counter-reset:seg;display:grid;gap:8px}.builder-row{counter-increment:seg;position:relative;padding:8px 0 8px 28px;border-top:1px solid var(--line)}.builder-row::before{content:counter(seg);position:absolute;left:4px;top:50%;transform:translateY(-50%);font:italic 14px Georgia,serif;color:#7b886f}.builder-row label{display:flex;flex-direction:column;gap:2px;font-size:10px;color:#7b8772}.builder-row label .sr-only+input,.builder-row input[type=range]{margin:0}.builder-row output{float:none;font-size:10px}.builder-row .remove{border:0;color:#8a725a;font-size:16px;padding:4px}.builder-row .alt{flex-direction:row;align-items:center;gap:4px}.builder-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}.builder-summary{font-size:11px;color:#55695a;line-height:1.6;flex:1 1 240px}.builder-summary.warn{color:#8a5d46}[data-noalt] .builder-alt-head,[data-noalt] .builder-row .alt{visibility:hidden}
@media(max-width:760px){.builder{padding:19px}.builder-columns{display:none}.builder-row{grid-template-columns:1fr 1fr;padding-left:26px}.builder-row .wide{grid-column:span 2}.builder-row .remove{position:absolute;right:0;top:4px}.builder-row label .row-label{display:block}}
.builder-row .row-label{display:none;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#607e64}@media(max-width:760px){.builder-row .row-label{display:block}}
@media(max-width:760px){.play-actions{flex-wrap:wrap}.play-actions .open-hat{order:4;flex-basis:100%!important}.play-actions>span{order:5}}


.lab-group{grid-column:1/-1;width:100%;border-top:1px solid var(--line);padding:10px 0}.lab-group summary{cursor:pointer;font-size:12px;font-weight:600;padding:6px 0}.lab-group .lab-row{margin-top:10px}
.step-bar input[type=number]{width:74px;font-size:11px;padding:7px 6px;color:var(--ink);border:1px solid #d0d9c7;border-radius:4px;background:#f3f4e9}.step-paint{margin:4px 0 14px}.step-rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}.step-row{border-top:1px solid var(--line);padding-top:10px}.step-row-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-bottom:8px}.step-voice select{font-size:12px;padding:6px;border:1px solid #d0d9c7;border-radius:4px;background:#f3f4e9;color:var(--ink);max-width:230px}.step-mini{display:flex;align-items:center;gap:6px;font-size:9px;color:#607e64;text-transform:uppercase;letter-spacing:1px}.step-mini input{width:92px}.step-mute{font-size:11px;padding:6px 10px}.step-mute[aria-pressed=true]{background:#7a5434;color:#fff;border-color:#7a5434}
.step-cells{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}.step{height:38px;min-width:0;padding:0;border:1px solid #c9d1c0;border-radius:5px;background:#f6f4ea}.step:nth-child(4n+1){border-color:#93a68d}.step:nth-child(4n):not(:last-child){margin-right:5px}.step-cells .step[data-v="1"]{background:#4f7a5d;border-color:#4f7a5d}.step-cells .step[data-v="2"]{background:#1f3d2a;border-color:#1f3d2a;box-shadow:inset 0 0 0 2px #e8c27a}.step-cells .step[data-v="3"]{background:linear-gradient(#f6f4ea 55%,#8fae96 55%);border-color:#8fae96}.step-cells .step[data-v="4"]{background:#a5734c;border-color:#a5734c}.step.now{outline:2px solid #e2a14a;outline-offset:1px}.step-cells .step[data-v="0"]:hover:not(:disabled){background:#e9eee2}.step-cells .step:hover:not(:disabled){filter:brightness(1.08)}
@media(max-width:560px){.step-cells{grid-template-columns:repeat(8,minmax(0,1fr))}.step:nth-child(8n){margin-right:0}.step{height:36px}.step-mini input{width:78px}}