:root{font-family:Arial,Helvetica,sans-serif;color:#282c2b;background:#f2f0eb;font-synthesis:none;color-scheme:light;--accent:#cf6d43;--ink:#282c2b;--muted:#687267}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.room{max-width:1080px;margin:auto;padding:46px 44px 30px}.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:700;display:flex;align-items:center;gap:9px;margin:0 0 22px}.tiny-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,5.5vw,58px);font-weight:400;letter-spacing:-.045em;line-height:1.08;margin:0 0 15px}.subtitle{font-size:14px;color:#626a63;line-height:1.6;max-width:580px;margin:0}fieldset{min-width:0}.colours{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:29px 0 20px;padding:0;border:0}.colours legend,.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.colour-card{position:relative;display:block;border:1px solid #d4d8cf;border-radius:12px;background:#f7f6f2;padding:17px 20px;cursor:pointer;transition:border-color .15s,background .15s}.colour-card:has(input:checked){background:#fffefa;border-color:#444f46;box-shadow:0 0 0 1px #444f46}.colour-card:hover{border-color:#8f978f}.colour-card:has(input:focus-visible),.filter-option:has(input:focus-visible),.compare label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:4px}.colour-card input,.filter-option input,.compare input{position:absolute;opacity:0;width:1px;height:1px}.card-top{display:flex;align-items:center;gap:10px}.colour-name{font-size:18px;letter-spacing:-.03em}.swatch{width:24px;height:24px;border-radius:50%;border:1px solid #c3c5be}.white-swatch{background:#fff}.pink-swatch{background:#ddb3b7;border-color:#d6a1a8}.brown-swatch{background:#917460;border-color:#8a6d59}.check{margin-left:auto;font-size:15px;opacity:0}.colour-card:has(input:checked) .check{opacity:1}.cue{display:block;line-height:1.45;font-size:11px;color:#626c64;margin-top:9px}.instrument{border:1px solid #d4d9cf;border-radius:18px;background:#fafbf7;padding:25px 28px 19px}.playback{display:flex;align-items:center;gap:35px;padding-bottom:25px;border-bottom:1px solid #dfe4d9}.power{background:#2e3c33;color:#fffdf8;border:none;border-radius:8px;padding:17px 18px;min-width:185px;display:flex;justify-content:center;align-items:center;gap:11px;cursor:pointer;font-size:13px;transition:background .15s}.power:hover{background:#415749}.power[aria-pressed=true]{background:#e9eee5;color:#2e3c33;box-shadow:inset 0 0 0 1px #bfcabd}.power-symbol{font-size:11px;line-height:1;width:12px}.power:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.level-control{flex:1;max-width:310px}.control-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;margin-bottom:9px}.control-heading label{line-height:1.4}output{font-variant-numeric:tabular-nums;color:#52634f;white-space:nowrap}input[type=range]{display:block;width:100%;height:20px;margin:0;accent-color:#3d5041;cursor:pointer}.range-caption{display:flex;justify-content:space-between;font-size:10px;color:#747d6c;margin-top:4px}.live-state{font-size:10px;display:flex;align-items:center;gap:7px;color:#626e60;margin-left:auto;white-space:nowrap}.state-dot{display:inline-block;width:6px;height:6px;background:#a3aaa0;border-radius:50%}body[data-playing=true] .state-dot{background:#6b8c63;box-shadow:0 0 0 3px #6b8c631a}.filter-types{border:0;padding:0;margin:21px 0 22px}.filter-types legend{font-size:11px;color:#677261;margin-bottom:12px}.filter-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.filter-option{position:relative;display:block;padding:13px 14px;cursor:pointer;border:1px solid #dce1d5;background:#f5f7f1;border-radius:8px}.filter-option>span{display:block;font-size:13px}.filter-option small{display:block;font-size:10px;color:#707b68;margin-top:6px}.filter-option:has(input:checked){background:#ede9e0;border-color:#ad8e72;box-shadow:inset 0 0 0 1px #ad8e72}.filter-option:hover{border-color:#8b9781}.filter-controls{display:grid;grid-template-columns:1.3fr 1fr;gap:42px}.filter-controls[data-disabled=true]{opacity:.55}.filter-controls input:disabled{cursor:not-allowed}.control-heading label span{color:#65735e;font-size:11px}.parameter-help{font-size:10px;color:#6c7863;line-height:1.5;margin:9px 0 0;min-height:30px}.compare-row{display:flex;gap:22px;align-items:center;border-top:1px solid #e0e5d9;border-bottom:1px solid #e0e5d9;padding:18px 0;margin-top:10px}.compare{display:flex;align-items:center;border:0;padding:0;margin:0;gap:14px;flex-shrink:0}.compare legend{float:left;font-size:11px;color:#61705a;padding:10px 14px 0 0}.compare-options{display:flex;background:#edf0e7;border-radius:7px;padding:3px;gap:3px}.compare label{position:relative;cursor:pointer}.compare label>span{display:block;font-size:11px;min-width:76px;text-align:center;padding:9px 11px;border-radius:5px;color:#637259}.compare label:has(input:checked)>span{background:#fffef9;color:#2f3c30;box-shadow:0 1px 3px #3341251a}.compare label:has(input:disabled){cursor:not-allowed}.compare label:has(input:disabled)>span{color:#99a18f}.compare-description{font-size:11px;color:#65735c;line-height:1.5;margin:0;max-width:340px}.response-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px}h2{font-size:12px;font-weight:400;margin:0}.legend{display:flex;gap:17px;font-size:10px;color:#68775e}.legend>span{display:flex;align-items:center;gap:6px}.legend i{display:inline-block;width:17px;height:0;border-top:2px solid #cf6d43}.legend .original-line{border-color:#8c9882;border-top-style:dashed}.scope{height:214px;position:relative}canvas{display:block;width:100%;height:100%}.response-footer{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#67775b;line-height:1.5;margin:6px 0 0 39px}.response-footer p{margin:0}.response-footer>span{white-space:nowrap;font-variant-numeric:tabular-nums}.notes{display:flex;justify-content:space-between;gap:30px;color:#717b68;font-size:10px;line-height:1.6;margin-top:18px}.notes p{margin:0;max-width:570px}.local-note{text-align:right;white-space:nowrap}.sr-only{margin:-1px}
@media(max-width:800px){.room{padding:36px 28px 26px}.playback{gap:24px;flex-wrap:wrap}.live-state{width:100%;margin:-9px 0 0}.level-control{max-width:none}.compare-row{gap:15px}.filter-controls{gap:28px}.instrument{padding:22px 22px 19px}.notes{display:block}.notes .local-note{text-align:left;white-space:normal;margin-top:8px}}
@media(max-width:540px){.room{padding:28px 17px 23px}.eyebrow{font-size:9px;margin-bottom:20px}.subtitle{font-size:13px}.colours{gap:8px;margin-top:24px}.colour-card{padding:13px 10px}.card-top{gap:6px}.colour-name{font-size:16px}.swatch{width:17px;height:17px}.cue{font-size:10px;line-height:1.5}.check{font-size:12px}.instrument{padding:20px 15px 17px;border-radius:13px}.playback{gap:20px}.power{min-width:153px;padding:15px 12px;font-size:12px}.level-control{min-width:90px}.filter-options{grid-template-columns:repeat(2,1fr);gap:8px}.filter-option{padding:12px}.filter-controls{grid-template-columns:1fr;gap:15px}.parameter-help{min-height:0;margin-top:7px}.filter-types{margin-bottom:20px}.compare-row{display:block;padding:16px 0}.compare-description{margin-top:12px;font-size:10px}.compare{gap:0}.compare label>span{min-width:84px}.scope{height:190px}.response-footer{display:block;margin-left:35px}.response-footer>span{display:block;margin-top:5px}.legend{gap:10px;font-size:9px}.response-header{margin-top:20px}.notes{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.transport{display:flex;gap:8px;flex-wrap:wrap;flex:1}.transport button{border-radius:7px;padding:14px 15px;min-width:0;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}.release-button{border:1px solid #a6b49f;background:#e8eee3;color:#314830}.stop-button{border:1px solid #c9cfc3;background:transparent;color:#5c6558}.transport button:disabled{opacity:.42;cursor:default}.transport button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.transport button:not(:disabled):hover{filter:brightness(.96)}.level-control{max-width:270px}.playback{gap:25px;align-items:flex-start}.playback .parameter-help{min-height:0;margin-bottom:0}.envelope-panel{padding:20px 0 21px;border-bottom:1px solid #dfe4d9}.envelope-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:21px}.envelope-heading h2{font-size:13px}.envelope-heading .live-state{width:auto;margin:0;white-space:normal}.envelope-controls{display:grid;grid-template-columns:1fr 1fr;gap:42px}.envelope-controls .parameter-help{min-height:0}.envelope-visual{margin-top:15px;border-radius:9px;background:#f0f3eb;padding:6px 9px 0}.envelope-visual svg{display:block;width:100%;height:177px;overflow:visible}.envelope-grid{stroke:#dce3d4;stroke-width:1}.envelope-line{stroke:#cf6d43;fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke}.envelope-fill{fill:#cf6d4312}.envelope-visual text{font:10px Arial;fill:#66765b}.envelope-visual #envelope-dot{fill:#2e4a34;stroke:#fafbf7;stroke-width:2;vector-effect:non-scaling-stroke}.envelope-footer{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:#52644b;line-height:1.5;margin-top:11px}.envelope-footer p{margin:0}.envelope-footer span{white-space:nowrap;font-variant-numeric:tabular-nums}.envelope-note{font-size:10px;color:#74806a;line-height:1.5;margin:8px 0 0}.filter-types{margin-top:21px}
@media(max-width:800px){.playback{display:block}.transport{margin-bottom:20px}.level-control{max-width:none}.envelope-controls{gap:28px}}
@media(max-width:540px){.transport{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.transport button{padding:14px 8px;font-size:11px;gap:5px}.envelope-heading{align-items:flex-start;gap:12px}.envelope-heading .live-state{font-size:10px;max-width:180px}.envelope-controls{grid-template-columns:1fr;gap:17px}.envelope-visual{padding-left:0;padding-right:0}.envelope-visual svg{height:150px}.envelope-visual text{font-size:24px}.envelope-visual #attack-caption,.envelope-visual #release-caption{font-size:24px}.envelope-footer{font-size:10px;display:block}.envelope-footer span{display:block;margin-top:6px}}