:root{--paper:#eeeade;--sheet:#f8f6ef;--ink:#29362d;--muted:#67705f;--line:#d4d6c8;--moss:#526c45;--deep:#354d30;--sage:#dce3d3;--orange:#ad6d42;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--serif:Georgia,"Times New Roman",serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #8b9d72;outline-offset:4px}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h2{font-size:30px;line-height:1.25}p{color:var(--muted)}.page-shell{max-width:1160px;margin:auto;padding:0 36px}.masthead{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:13px;font-size:11px;letter-spacing:2px;font-weight:650}.mark{font:italic 43px/1 var(--serif);letter-spacing:-5px;margin-right:7px}.mark span{color:var(--orange)}nav{display:flex;gap:25px;font-size:12px;color:var(--moss)}nav a{min-height:44px;display:flex;align-items:center}.eyebrow{font-size:10px;letter-spacing:1.6px;line-height:1.5;color:var(--moss);font-weight:600}.introduction{display:grid;grid-template-columns:1fr 300px;align-items:center;gap:50px;padding:43px 0 35px}h1{font-size:64px;line-height:1.05;letter-spacing:-2px;margin:13px 0 18px}h1 em{color:var(--moss);font-weight:400}.introduction>div>p{font-size:14px}.start-card{border-left:1px solid #bbc6ae;padding:12px 0 10px 27px}.start-card>p{margin:14px 0}.start-card .small{margin:9px 0 0;font-size:12px}.button{display:inline-flex;justify-content:center;align-items:center;min-height:46px;border:1px solid var(--moss);border-radius:5px;padding:10px 17px;background:none;font-size:14px;line-height:1.3;transition:background .15s}.button.primary{background:var(--moss);color:var(--sheet)}.button.primary:hover{background:var(--deep)}.button.secondary{background:var(--sheet);border-color:#bfcab3}.button.secondary:hover{background:#edf0e4}.button[aria-pressed=true]{background:var(--moss);color:var(--sheet);border-color:var(--moss)}.text-button{padding:7px 0;min-height:44px;background:none;border:0;color:var(--moss);font-size:13px;line-height:1.4;text-align:left}.text-button:hover{text-decoration:underline;text-underline-offset:4px}.small{font-size:12px;line-height:1.7}.instrument{border:1px solid #c6cebb;border-radius:8px;background:var(--sheet);overflow:hidden;box-shadow:0 6px 24px #26322505}.instrument-heading{padding:23px 27px 16px;display:flex;justify-content:space-between;align-items:center;gap:20px}.instrument-heading h2{font-size:27px}.voice-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 27px}.voice-choice{border:1px solid var(--line);background:transparent;border-radius:5px;padding:15px 17px;min-height:92px;text-align:left;display:flex;flex-direction:column;gap:6px}.voice-choice strong{font:26px/1.2 var(--serif);font-weight:400}.voice-choice span{font-size:12px;color:var(--muted)}.voice-choice[aria-pressed=true]{background:#e6ebdc;border-color:#839776}.voice-choice[aria-pressed=true] strong{color:var(--deep)}.voice-choice:hover{background:#eef0e6}.voice-detail{font-size:12px;min-height:55px;padding:13px 28px 16px}.playing-area{padding:24px 27px 22px;border-top:1px solid var(--line)}.playing-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px}.playing-heading h2{font-size:28px;margin-top:5px}.note-readout{display:flex;align-items:center;gap:15px}.current-note{font:43px/1 var(--serif);min-width:65px}.note-readout>div{min-width:175px;display:flex;flex-direction:column;gap:3px}.phase{font-size:12px;color:var(--moss)}.pitch-reading{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.scope-window{height:61px;position:relative;background:#e7ebdf;overflow:hidden;border-radius:4px;margin-bottom:17px}.scope-window canvas{display:block;width:100%;height:100%}.scope-window>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:1px;color:#74846a;pointer-events:none}.scope-window.is-sounding>span{opacity:0}.keyboard-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:5px}.keyboard{position:relative;display:flex;min-width:600px;height:150px;touch-action:pan-x;user-select:none;-webkit-user-select:none}.note-key{display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:5px;border-radius:0 0 5px 5px;touch-action:none;padding:0 0 13px;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .08s;border:1px solid #abb4a0}.note-key.white{width:12.5%;height:146px;background:linear-gradient(90deg,#fbfaf5,#f1f0e8);border-right:0;z-index:1;box-shadow:0 3px 0 #c7cdbd}.note-key.white:last-child{border-right:1px solid #abb4a0}.note-key.black{position:absolute;top:0;width:7.4%;height:94px;background:linear-gradient(90deg,#344131,#46543e);z-index:2;color:#e8eddf;transform:translateX(-50%);box-shadow:0 3px 0 #283325;border-color:#2b3827;min-width:44px}.note-key.white[aria-pressed=true]{background:#bdcca9;box-shadow:0 1px 0 #9bad89;transform:translateY(2px);height:144px}.note-key.black[aria-pressed=true]{background:#728b5e;box-shadow:0 1px 0 #4b623b;height:96px}.note-name{font-size:12px;line-height:1}.key-shortcut{font-size:10px;opacity:.5;line-height:1}.keyboard-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:8px}.keyboard-footer>p{font-size:12px;line-height:1.8}.keyboard-footer .button{white-space:nowrap}.desktop-hint{display:block}kbd{font:10px var(--sans);display:inline-block;min-width:14px;text-align:center;padding:1px;border:1px solid var(--line);border-radius:3px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin-top:24px}.control-label{display:flex;justify-content:space-between;align-items:baseline;gap:20px;font-size:14px}.control-label output{font-size:13px;font-variant-numeric:tabular-nums;color:var(--moss)}input[type=range]{display:block;width:100%;height:44px;margin:2px 0 0;accent-color:var(--moss);cursor:pointer}.control-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);gap:12px;margin-top:-6px}.control-foot .text-button{min-height:36px;font-size:12px}.tuning-status{font-size:11px;padding:8px 0 18px;min-height:48px}.tuning-status.shifted{color:#906039}.articulation-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;border-top:1px solid var(--line);padding-top:19px}.articulation-controls fieldset{border:0;margin:0;padding:0;min-width:0}.articulation-controls legend{font-size:13px;margin-bottom:9px}.articulation-controls p{font-size:11px;margin-top:8px;line-height:1.7}.segmented{display:flex;border:1px solid #bbc5b0;border-radius:4px;overflow:hidden}.segmented label{flex:1;cursor:pointer;position:relative}.segmented input{position:absolute;opacity:0;width:1px;height:1px}.segmented span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:5px 9px;font-size:12px}.segmented input:checked+span{background:var(--moss);color:var(--sheet)}.segmented input:focus-visible+span{outline:3px solid #90a778;outline-offset:-4px}.connection-control{padding-top:23px}.check{display:flex;align-items:center;gap:9px;min-height:44px;font-size:13px}.check input{accent-color:var(--moss);width:17px;height:17px}.transport{display:flex;align-items:center;gap:17px;padding:17px 27px;border-top:1px solid var(--line);background:#ecefe2}.transport>p{font-size:12px;flex:1}.transport>.button{font-size:13px;white-space:nowrap}.volume-control{display:grid;grid-template-columns:auto 100px 30px;align-items:center;gap:9px;font-size:12px}.volume-control input{margin:0}.volume-control output{font-size:11px}.notice{background:#f1e4d1;color:#825f36;border:1px solid #d6be99;padding:14px 18px;font-size:13px;margin-top:15px;border-radius:4px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:21px}.section-heading h2{margin-top:9px}.section-heading>p{font-size:12px}.phrases{padding:35px 0 27px;border-bottom:1px solid var(--line)}.phrase-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.phrase-choice{display:flex;flex-direction:column;gap:7px;min-height:110px;text-align:left;border:1px solid #c4ccb9;border-radius:5px;padding:15px 13px;background:transparent}.phrase-choice .phrase-index{font-size:9px;letter-spacing:1px;color:var(--moss)}.phrase-choice strong{font-size:13px;font-weight:500}.phrase-choice .phrase-description{font-size:11px;line-height:1.6;color:var(--muted)}.phrase-choice:hover{background:#f7f6ee}.phrase-choice[aria-pressed=true]{background:#e0e7d5;border-color:#8a9b78}.phrase-progress{padding-top:17px}progress{width:100%;height:4px;display:block;appearance:none;border:0;background:#d6ddcc;border-radius:5px;overflow:hidden;accent-color:var(--moss)}progress::-webkit-progress-bar{background:#d6ddcc}progress::-webkit-progress-value{background:var(--moss)}progress::-moz-progress-bar{background:var(--moss)}.phrase-progress p{font-size:12px;margin-top:9px;min-height:20px}.gesture-section,.feedback-section{display:grid;grid-template-columns:1fr 1.12fr;gap:55px;padding:31px 0;border-bottom:1px solid var(--line)}.gesture-section h2,.feedback-section h2{margin:9px 0 14px;font-size:29px}.gesture-section>div>p,.feedback-section>div>p{font-size:13px;line-height:1.8}.gesture-section>div>.small{font-size:11px;margin-top:10px}.gesture-panel{padding:20px;border:1px solid var(--line);border-radius:5px;background:#f4f3ea}.gesture-actions{display:flex;gap:10px;flex-wrap:wrap}.gesture-actions .button{font-size:13px}.gesture-panel>p{font-size:12px;margin-top:12px}.save-actions{display:flex;gap:22px;flex-wrap:wrap;margin-top:7px}.gesture-panel>#renderStatus{font-size:11px;margin-top:3px}.feedback-section textarea{width:100%;background:var(--sheet);border:1px solid #c2cbb6;border-radius:5px;resize:vertical;min-height:100px;padding:13px;font-size:16px;line-height:1.6}.feedback-section>div>.small{font-size:11px}.technical-details{padding-bottom:19px}.technical-details summary{display:flex;justify-content:space-between;align-items:center;list-style:none;min-height:70px;cursor:pointer;font-size:13px;color:var(--moss)}.technical-details summary::-webkit-details-marker{display:none}.technical-details summary span{font-size:24px}.technical-details[open] summary span{transform:rotate(45deg)}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px}.details-grid h3{font-size:23px;margin-bottom:12px}.details-grid p{font-size:12px;line-height:1.8;margin:12px 0}.details-grid label{display:block;font-size:13px;margin-bottom:7px}.details-grid select{min-height:44px;font-size:16px;padding:7px 10px;border:1px solid #c2cbb6;border-radius:4px;background:var(--sheet);max-width:100%}.details-grid .diagnostics{font-family:monospace;font-size:11px}footer{border-top:1px solid var(--line);padding:21px 0 28px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}footer a{color:var(--moss);min-height:44px}footer span{padding-top:10px}.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(max-width:850px){.page-shell{padding:0 24px}.introduction{grid-template-columns:1fr 270px;gap:26px}h1{font-size:55px}.start-card{padding-left:20px}.introduction>div>p{font-size:13px}.desktop-break{display:none}nav{gap:16px;font-size:11px}.instrument-heading,.playing-area{padding-left:22px;padding-right:22px}.voice-choices{padding-left:22px;padding-right:22px}.voice-detail{padding-left:23px;padding-right:23px}.voice-choice{padding:13px}.voice-choice span{font-size:11px}.articulation-controls{gap:18px}.transport{flex-wrap:wrap;padding:15px 22px;gap:12px}.transport>p{flex-basis:55%}.volume-control{margin-left:auto}.phrase-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.phrase-choice{min-height:99px}.gesture-section,.feedback-section{gap:30px}.gesture-actions .button{flex:1;white-space:nowrap}.save-actions{gap:5px 18px}.section-heading>p br{display:none}}
@media(max-width:600px){body{font-size:14px}.page-shell{padding:0 17px}.masthead{min-height:78px;gap:14px;align-items:flex-start;padding:18px 0 12px}.wordmark{font-size:9px;letter-spacing:1.5px}.mark{font-size:38px}nav{display:grid;grid-template-columns:auto auto;gap:0 12px;text-align:right;font-size:11px}nav a{min-height:44px;justify-content:flex-end}nav a:first-child{grid-column:1/-1;min-height:44px}nav a:not(:first-child){display:flex}.introduction{grid-template-columns:1fr;gap:23px;padding:29px 0 25px}h1{font-size:52px;margin:11px 0 15px}.introduction>div>p{font-size:13px;max-width:350px}.start-card{border-left:0;border-top:1px solid var(--line);padding:17px 0 0;display:grid;grid-template-columns:1fr auto;gap:8px 15px;align-items:center}.start-card>.eyebrow{grid-column:1/-1;font-size:9px}.start-card>p{margin:0;font-size:12px!important}.start-card>.button{grid-row:2;grid-column:2;min-width:120px}.start-card>#audioStatus{grid-column:1/-1;font-size:11px!important;margin:0}.instrument-heading{padding:19px 16px 15px;gap:12px}.instrument-heading h2{font-size:23px}.instrument-heading>.eyebrow{font-size:8px;letter-spacing:.8px;text-align:right;max-width:110px}.voice-choices{padding:0 16px;gap:7px}.voice-choice{padding:11px 9px;min-height:90px}.voice-choice strong{font-size:21px}.voice-choice span{font-size:10px;line-height:1.5}.voice-detail{font-size:11px;line-height:1.7;padding:11px 17px 15px;min-height:65px}.playing-area{padding:19px 16px}.playing-heading{gap:10px;margin-bottom:15px}.playing-heading h2{font-size:24px}.playing-heading .eyebrow{font-size:8px}.note-readout{gap:9px}.current-note{font-size:34px;min-width:49px}.note-readout>div{min-width:0;width:125px;gap:4px}.phase{font-size:11px}.pitch-reading{font-size:10px;line-height:1.5}.scope-window{height:47px;margin-bottom:14px}.scope-window>span{font-size:8px}.keyboard-scroll{margin-right:-16px;padding-right:16px}.keyboard{min-width:592px;height:132px}.note-key.white{height:128px}.note-key.white[aria-pressed=true]{height:126px}.note-key.black{height:85px}.note-key.black[aria-pressed=true]{height:87px}.key-shortcut{display:none}.keyboard-footer{gap:13px;margin-top:10px}.keyboard-footer>p{font-size:11px;line-height:1.7}.keyboard-footer .button{padding:10px 13px;font-size:12px}.desktop-hint{display:none}.control-grid{gap:23px;margin-top:20px}.control-label{font-size:13px;gap:10px}.control-label output{font-size:12px}.control-foot{font-size:10px;flex-wrap:wrap;gap:0}.control-foot .text-button{font-size:11px;min-height:44px}.control-foot>span{width:100%}.tuning-status{font-size:10px;line-height:1.7;padding:0 0 17px;min-height:49px}.articulation-controls{grid-template-columns:1fr 1fr;gap:17px 19px;padding-top:17px}.articulation-controls legend{font-size:12px}.segmented span{font-size:11px;padding:5px 6px}.articulation-controls p{font-size:10px;margin-top:8px}.connection-control{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:18px;padding:0;border-top:1px solid var(--line)}.connection-control p{margin-top:12px}.check{font-size:12px;white-space:nowrap}.transport{padding:14px 16px;gap:10px}.transport>.button{font-size:12px;padding:10px 13px}.transport>p{font-size:10px;flex-basis:40%;line-height:1.6}.volume-control{font-size:11px;grid-template-columns:auto 120px 30px}.phrases{padding:28px 0 23px}.section-heading{display:block;margin-bottom:17px}.section-heading h2{font-size:27px;margin-top:7px}.section-heading>p{font-size:12px;margin-top:12px}.section-heading>p br{display:none}.phrase-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.phrase-choice{padding:12px;min-height:101px}.phrase-choice:last-child{grid-column:1/-1;min-height:81px}.phrase-choice strong{font-size:12px}.phrase-choice .phrase-description{font-size:11px}.phrase-progress p{font-size:11px}.gesture-section,.feedback-section{grid-template-columns:1fr;gap:18px;padding:27px 0}.gesture-section h2,.feedback-section h2{font-size:27px;margin-top:7px;margin-bottom:11px}.gesture-section>div>p,.feedback-section>div>p{font-size:12px}.gesture-panel{padding:16px}.gesture-actions{gap:8px}.gesture-actions .button{font-size:12px;padding:10px}.save-actions{gap:5px 20px}.save-actions .text-button{font-size:12px}.details-grid{grid-template-columns:1fr;gap:17px}.technical-details summary{font-size:12px}.details-grid h3{font-size:22px}.details-grid p{font-size:11px}footer{flex-wrap:wrap;gap:0 15px;padding-top:15px;font-size:9px}footer a{flex-basis:70%;line-height:1.7;padding-top:8px}footer span:last-child{padding-top:0}.notice{font-size:12px}input,select,textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.keyboard-shift{display:none}
@media(max-width:760px){.keyboard-shift{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:3px}.keyboard-shift .text-button{font-size:11px;min-height:44px;white-space:nowrap}.keyboard-shift>span{font-size:9px;text-align:center;color:var(--muted);line-height:1.5}}

/* Contour puts continuous reed shaping beside the breath. */
.instrument>.voice-detail{min-height:0;padding-top:0;padding-bottom:20px}.control-help{font-size:11px;line-height:1.7;margin-top:3px}.control-help a{color:var(--moss);text-decoration:underline;text-underline-offset:3px}.control-grid{padding-bottom:20px}.secondary-controls{display:grid;grid-template-columns:1fr 1fr;gap:45px;border-top:1px solid var(--line);padding-top:18px}.weight-control{border:0;padding:0;margin:0;min-width:0}.weight-control legend{font-size:13px;margin-bottom:8px}.weight-control .segmented{max-width:290px}.control-label output{min-width:65px;text-align:right}.raw-controls{border-top:1px solid var(--line);padding-top:5px;margin-top:18px}.raw-controls .check{display:flex}.raw-controls .control-label>label{margin-bottom:0}.raw-controls input[type=checkbox]{flex:none}.raw-controls .control-label{margin-top:14px}input[type=range]:disabled{opacity:.4;cursor:default}.tuning-status{padding-top:13px}
@media(max-width:600px){.control-grid{gap:22px;padding-bottom:17px}.secondary-controls{gap:22px;padding-top:15px}.control-help{font-size:10px;line-height:1.7}.articulation-controls{grid-template-columns:1fr}.articulation-controls fieldset{display:grid;grid-template-columns:1fr}.articulation-controls legend{margin-bottom:8px}.articulation-controls .segmented span{font-size:12px}.connection-control{grid-column:auto;gap:17px}.weight-control legend{font-size:12px}.weight-control .segmented span{font-size:11px;padding:5px}.raw-controls p{font-size:11px}.control-label output{min-width:55px}.instrument>.voice-detail{padding-bottom:17px}.secondary-controls .control-label{font-size:12px}}

.live-gesture{font-size:11px;padding:10px 12px;background:#e7ebdf;border-radius:4px;margin-top:15px;color:var(--moss);line-height:1.65}

.reed-bench{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line,#ccc)}.reed-bench label,.save-reed label{display:block;margin:8px 0}.reed-bench select,.save-reed select,.save-reed input[type=text]{width:100%;padding:10px;border:1px solid #b7b9ac;background:#f8f6ed;border-radius:6px;font:inherit}.reed-bench input[type=number]{width:110px;padding:8px;font:inherit}.reed-bench .check{display:flex;gap:9px;align-items:center}.save-reed{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 0;border-top:1px solid #ccc}.save-reed h2{font-size:2rem}.save-reed button,.save-reed select{margin-top:12px}.import-label{font-size:.85rem}.import-label input{display:block;max-width:100%;margin-top:8px}#opening{opacity:.55}#referenceOpening{display:none}[hidden]{display:none!important}@media(max-width:700px){.reed-bench,.save-reed{grid-template-columns:1fr;gap:16px}.reed-bench{padding:16px 0}}

/* ---- Ligule pass 1: keyboard and Breath first, Bench drawer, one-octave fit on phones ---- */
.introduction{grid-template-columns:1fr auto;gap:30px;padding:22px 0 18px}
.introduction h1{font-size:40px;letter-spacing:-1px;margin:6px 0 6px}
.introduction h1 em{white-space:nowrap}
.start-card{border-left:1px solid #bbc6ae;padding:4px 0 4px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.start-card .small{margin:0}
.playing-area{border-top:0}
.playing-heading{margin-bottom:12px}
.keyboard{height:160px}
.note-key.white{height:156px}
.note-key.white[aria-pressed=true]{height:154px}
.note-key.black{height:100px}
.note-key.black[aria-pressed=true]{height:102px}
/* Live breath: the held key fills from the bottom as you lean in. */
.note-key.white[aria-pressed=true]{background:linear-gradient(to top,#a3b98d calc(var(--air,.5)*100%),#c9d6b8 0)}
.note-key.black[aria-pressed=true]{background:linear-gradient(to top,#5f7a4c calc(var(--air,.5)*100%),#7d9668 0)}
.keyboard-footer strong{font-weight:600;color:var(--ink)}
.control-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);margin-top:18px}
.breath-meter{height:4px;margin:-4px 0 8px;background:#e1e6d8;border-radius:3px;overflow:hidden;opacity:0;transition:opacity .2s}
.breath-control.is-live .breath-meter{opacity:1}
.breath-meter span{display:block;height:100%;width:0;background:var(--orange);transition:width .05s linear}
.breath-control.is-live output{color:var(--orange)}
/* Ligule pass 2: below the slider, the meter shows how far into the held hush range. */
.breath-control.is-below .breath-meter span{background:repeating-linear-gradient(90deg,#9aac8b 0 3px,transparent 3px 8px)}
.breath-control.is-below output{color:var(--moss)}
.scope-window{margin:4px 0 0;height:48px}
.live-gesture{margin-top:12px}
.bench-drawer{border-top:1px solid var(--line)}
.bench-drawer>summary{display:flex;align-items:center;gap:16px;min-height:56px;padding:0 27px;cursor:pointer;list-style:none}
.bench-drawer>summary::-webkit-details-marker{display:none}
.bench-title{font:22px/1.2 var(--serif);color:var(--ink)}
.bench-summary{flex:1;font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bench-plus{font-size:24px;color:var(--moss);transition:transform .15s}
.bench-drawer[open] .bench-plus{transform:rotate(45deg)}
.bench-body{padding:0 27px 22px}
.bench-body>.voice-detail{padding:0 0 4px;min-height:0}
.reed-bench{padding:14px 0 20px}
.bench-body .articulation-controls{padding-top:18px}
.bench-body .secondary-controls{margin-top:20px;align-items:start}
.bench-body .tuning-status{padding:0;min-height:0}
@media(max-width:850px){.bench-drawer>summary,.bench-body{padding-left:22px;padding-right:22px}}
@media(max-width:600px){
  .page-shell{padding:0 14px}
  .introduction{grid-template-columns:1fr auto;gap:12px;padding:14px 0 12px;align-items:end}
  .introduction h1{font-size:30px;margin:4px 0}
  .introduction>div>p{font-size:12px}
  .start-card{border:0;padding:0;display:flex;align-items:flex-end;grid-template-columns:none}
  .start-card>.button{min-width:0;padding:10px 14px}
  .start-card>#audioStatus{font-size:10px!important;text-align:right;align-self:stretch}
  .playing-area{padding:14px 10px 16px}
  .playing-heading{padding:0 4px}
  .keyboard-scroll{margin-right:0;padding-right:0;overflow-x:visible}
  .keyboard{min-width:0;height:168px}
  .note-key.white{height:164px}
  .note-key.white[aria-pressed=true]{height:162px}
  .note-key.black{width:9%;min-width:0;height:104px}
  .note-key.black[aria-pressed=true]{height:106px}
  .note-name{font-size:11px}
  .keyboard-footer{padding:0 4px}
  .control-grid{grid-template-columns:1fr;padding:0 4px 12px}
  .scope-window{margin:0 4px}
  .bench-drawer>summary{padding:0 14px;gap:10px}
  .bench-title{font-size:20px}
  .bench-summary{font-size:11px}
  .bench-body{padding:0 14px 18px}
}
/* The full octave fits from 320 px, so the scroll helpers are only for very narrow screens. */
@media(max-width:760px){.keyboard-shift{display:none}}
@media(max-width:319px){.keyboard-scroll{overflow-x:auto}.keyboard{min-width:300px}.keyboard-shift{display:flex}}

/* Ligule pass 3/4: carve your own reed (its own section below the instrument). */
.carve-link{display:inline-block;white-space:nowrap;margin-top:4px;font-size:12px;color:var(--orange);text-decoration:underline;text-underline-offset:3px;min-height:24px}
.carve-section{margin-top:22px;border:1px solid #d6c3a0;border-radius:8px;background:#faf5ea}
.carve-drawer>summary{display:flex;align-items:center;gap:16px;padding:18px 24px;cursor:pointer;list-style:none}
.carve-drawer>summary::-webkit-details-marker{display:none}
.carve-summary{display:flex;flex-direction:column;gap:4px}
.carve-title{font:26px/1.2 var(--serif)}
.carve-sub{font-size:12px;color:var(--muted)}
.carve-drawer .bench-plus{margin-left:auto;font-size:24px;color:var(--moss)}
.carve-drawer[open] .bench-plus{transform:rotate(45deg)}
.carve-body{padding:0 24px 22px}
.carve-grid{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start}
.reed-drawing svg{display:block;width:100%;height:auto}
.cane-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.cane-label{font:20px/1.2 var(--serif)}
.carve-sliders{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px}
.carve-slider input[type=range]{height:36px}
.slider-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:-6px}
.carve-facts{margin-top:10px}
.test-row{display:flex;gap:10px;align-items:stretch;margin:12px 0 4px}.test-row .test-blow{flex:1;margin:0}.hear-button{white-space:nowrap;font-size:13px}
.test-blow{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6;margin:12px 0 4px;padding:10px 12px;border-radius:5px;background:#f0ebdc;color:var(--ink)}
.test-blow-mark{font-weight:700;min-width:14px}
.test-blow.ok{background:#e3ebd8}.test-blow.ok .test-blow-mark{color:var(--moss)}
.test-blow.fail{background:#f4e2d2}.test-blow.fail .test-blow-mark{color:#9a5a2c}
.carve-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px}
#breakInProgress{margin-top:12px}
#carveStatus{margin-top:10px;min-height:22px}
#carveStatus.failed{color:#9a5a2c}
@media(max-width:600px){.test-row{flex-direction:column}.hear-button{align-self:flex-start}.carve-slider{margin-bottom:6px}.carve-drawer>summary{padding:16px}.carve-title{font-size:23px}.carve-body{padding:0 16px 18px}.carve-grid{grid-template-columns:76px 1fr;gap:14px}.carve-sliders{grid-template-columns:1fr;gap:0}}

/* Ligule pass 5: octave control above the keyboard. */
.octave-row{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13px;flex-wrap:wrap}
.octave-label{color:var(--muted);font-size:12px}
.octave-button{min-width:44px;min-height:40px;border:1px solid #bfcab3;border-radius:5px;background:var(--sheet);font-size:18px;line-height:1}
.octave-button:disabled{opacity:.35}
#octaveValue{min-width:64px;text-align:center;font:17px/1 var(--serif);color:var(--deep)}
.octave-keys{font-size:11px;color:var(--muted)}
.octave-note{flex-basis:100%;font-size:11px;color:#906039}
.octave-note:empty{display:none}

/* Pass 7: Wet (Space, Chorus, Tremolo) */
.wet-drawer{border:1px solid var(--line);border-radius:5px;margin:0 0 17px;background:#f4f3ea}
.wet-drawer>summary{display:flex;align-items:center;gap:14px;min-height:50px;padding:0 16px;cursor:pointer;list-style:none}
.wet-drawer>summary::-webkit-details-marker{display:none}
.wet-drawer[open] .bench-plus{transform:rotate(45deg)}
.wet-title{font-size:14px}
.wet-summary{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:0}
.wet-drawer.is-wet .wet-summary{color:var(--moss)}
.wet-body{padding:0 16px 12px;border-top:1px solid var(--line)}
.wet-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding-top:10px}
.wet-control{min-width:0}
.wet-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);margin-top:6px;padding-top:4px}
.wet-foot .text-button{white-space:nowrap}
@media(max-width:900px){.wet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wet-grid{grid-template-columns:1fr;gap:6px}.wet-drawer>summary{padding:0 12px}.wet-body{padding:0 12px 10px}.wet-foot{flex-direction:column;align-items:flex-start;gap:0}}

/* Pass 8: Layers */
.layers-section{padding:35px 0 30px;border-bottom:1px solid var(--line)}
.layers-panel{border:1px solid #c6cebb;border-radius:8px;background:var(--sheet);padding:20px 22px;display:grid;gap:16px}
.tempo-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;font-size:13px}
.tempo-row label{display:flex;align-items:center;gap:8px}
.tempo-row input[type=number]{width:72px;min-height:40px;padding:6px 8px;border:1px solid #c2cbb6;border-radius:4px;background:#fff;font-size:15px}
.tempo-row select{min-height:40px;padding:6px 8px;border:1px solid #c2cbb6;border-radius:4px;background:#fff}
.layers-transport{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.layers-transport .small{flex:1 1 260px;margin:0}
.layers-transport .button[aria-pressed=true]{background:#8f3b2a;border-color:#8f3b2a;color:#fff}
.layers-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.layers-empty{font-size:12px;color:var(--muted);padding:14px;border:1px dashed #c6cebb;border-radius:6px}
.layer{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:#f4f3ea;display:grid;gap:8px}
.layer.is-muted{opacity:.55}
.layer.is-solo{border-color:var(--moss)}
.layer-head{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.layer-index{font:12px/1 var(--sans);color:var(--moss);min-width:16px}
.layer-name{flex:0 1 180px;min-width:0;border:1px solid transparent;border-radius:4px;background:transparent;padding:5px 6px;font-size:14px}
.layer-name:hover,.layer-name:focus{border-color:#c2cbb6;background:#fff}
.layer-reed{font-size:11px;color:var(--muted);flex:1 1 160px;min-width:0}
.layer-toggles{display:flex;gap:6px;margin-left:auto}
.toggle{min-width:38px;min-height:36px;border:1px solid #bfcab3;border-radius:4px;background:var(--sheet);font-size:12px}
.toggle[aria-pressed=true]{background:var(--moss);border-color:var(--moss);color:var(--sheet)}
.toggle.delete{color:#8f3b2a}
.layer-roll{width:100%;height:40px;display:block;background:#e7ebdf;border-radius:3px}
.roll-bar{stroke:#c9d1bf;stroke-width:1;vector-effect:non-scaling-stroke}
.roll-note{fill:var(--moss)}
.layer-controls{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;align-items:center}
.layer-controls label{display:flex;align-items:center;gap:7px}
.layer-controls select,.layer-controls input[type=number]{min-height:36px;padding:4px 6px;border:1px solid #c2cbb6;border-radius:4px;background:#fff;font-size:13px}
.layer-controls input[type=number]{width:70px}
.layer-range input{width:110px;height:36px;margin:0}
.layer-range output{min-width:52px;font-variant-numeric:tabular-nums;color:var(--moss)}
.layers-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
.layers-open{font-size:13px;color:var(--moss);cursor:pointer}
.layers-note{margin:0;color:var(--muted)}
@media(max-width:600px){.layers-panel{padding:15px 13px}.layer-name{flex-basis:130px}.layer-range input{width:90px}.tempo-row{gap:8px 14px}}
.layers-open{position:relative}.layers-open input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.layers-section .section-heading>div{flex:0 0 auto;min-width:300px}@media(max-width:600px){.layers-section .section-heading>div{min-width:0}}

/* Pass 9: Write a layer */
.phrase-drawer{border:1px solid var(--line);border-radius:6px;background:#f4f3ea}
.phrase-drawer>summary{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px;cursor:pointer;list-style:none;flex-wrap:wrap}
.phrase-drawer>summary::-webkit-details-marker{display:none}
.phrase-drawer[open] .bench-plus{transform:rotate(45deg)}
.phrase-title{font-size:14px}.phrase-sub{font-size:12px;color:var(--muted);flex:1 1 200px;min-width:0}
.phrase-body{border-top:1px solid var(--line);padding:12px 14px 14px;display:grid;gap:10px}
.phrase-lengths,.phrase-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.phrase-lengths .segmented{flex:0 1 auto}.phrase-lengths .segmented span{min-width:46px}
.phrase-label{font-size:13px}
.phrase-actions label:not(.check){display:flex;align-items:center;gap:8px;font-size:13px}
.phrase-actions select{min-height:40px;padding:6px 8px;border:1px solid #c2cbb6;border-radius:4px;background:#fff}
.phrase-text-label{font-size:13px;display:grid;gap:2px}.phrase-text-label .small{color:var(--muted)}
#phraseText{width:100%;min-height:96px;resize:vertical;padding:10px 12px;border:1px solid #c2cbb6;border-radius:5px;background:#fff;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.phrase-info,.phrase-last{margin:0;color:var(--muted)}.phrase-info.has-problem{color:#906039}
.written-tag{font-size:12px;color:var(--deep)}
@media(max-width:600px){.phrase-lengths .segmented span{min-width:0;padding:5px 6px}.phrase-body{padding:10px}}