:root{font-family:Arial,Helvetica,sans-serif;color:#282c2b;background:#f2f0eb;font-synthesis:none;color-scheme:light;--accent:#e2774e;--ink:#282c2b;--muted:#727773}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.room{max-width:1080px;margin:auto;padding:60px 44px 34px}.eyebrow{font-size:11px;letter-spacing:.17em;font-weight:700;display:flex;align-items:center;gap:9px;margin:0 0 27px}.tiny-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,5.5vw,58px);font-weight:400;letter-spacing:-.045em;line-height:1.08;margin:0 0 16px}.subtitle{font-size:15px;color:#656b66;line-height:1.6;max-width:560px;margin:0}.colours{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:36px 0 22px;padding:0;border:0}.colours legend{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}.colour-card{position:relative;display:block;border:1px solid #d7dad2;border-radius:13px;background:#f7f6f2;padding:20px;cursor:pointer;min-height:144px;transition:border-color .15s,background .15s,box-shadow .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){outline:3px solid #d66d43;outline-offset:4px}.colour-card input{position:absolute;opacity:0;width:1px;height:1px}.card-top{display:flex;align-items:center;gap:11px}.colour-name{font-size:19px;letter-spacing:-.03em}.swatch{width:28px;height:28px;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:21px;opacity:0;transform:rotate(45deg)}.colour-card:has(input:checked) .check{opacity:1}.cue{display:block;line-height:1.45;font-size:12px;color:#666f68;max-width:230px;margin-top:16px}.instrument{border:1px solid #d6dad3;border-radius:18px;background:#fafbf7;padding:26px 28px 21px}.controls{display:flex;align-items:center;gap:64px;padding-bottom:27px;border-bottom:1px solid #e0e4db}.power{background:#2e3c33;color:#fffdf8;border:none;border-radius:8px;padding:17px 21px;min-width:197px;display:flex;justify-content:center;align-items:center;gap:11px;cursor:pointer;font-size:14px;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:12px;line-height:1;width:12px}.power:focus-visible,input:focus-visible{outline:3px solid #d66d43;outline-offset:4px}.level-control{flex:1;max-width:410px}.level-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:10px}output{font-variant-numeric:tabular-nums;color:#687267}input[type=range]{display:block;width:100%;height:18px;margin:0;accent-color:#3d5041;cursor:pointer}.level-caption{display:flex;justify-content:space-between;font-size:10px;color:#8a9287;margin-top:5px}.spectrum-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0 12px}h2{font-size:12px;font-weight:400;margin:0}.live-state{font-size:10px;display:flex;align-items:center;gap:6px;color:#7f887b}.state-dot{display:inline-block;width:5px;height:5px;background:#a3aaa0;border-radius:50%}body[data-playing=true] .state-dot{background:#6b8c63;box-shadow:0 0 0 3px #6b8c631a}.scope{position:relative;height:236px}canvas{display:block;width:100%;height:100%}.scope-message{position:absolute;left:0;right:0;top:39%;text-align:center;font-size:12px;color:#9ba196;pointer-events:none;margin:0}.scope-message[hidden]{display:none}.spectrum-footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;color:#87907f;margin:2px 0 0 41px}.notes{display:flex;justify-content:space-between;gap:30px;color:#7a8177;font-size:10px;line-height:1.6;margin-top:20px}.notes p{margin:0;max-width:480px}.local-note{text-align:right;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:680px){.room{padding:34px 22px 26px}.eyebrow{margin-bottom:22px}.colours{gap:9px;margin-top:27px}.colour-card{padding:14px 12px;min-height:156px;border-radius:10px}.card-top{gap:7px}.colour-name{font-size:17px}.swatch{width:18px;height:18px}.check{font-size:16px}.cue{font-size:11px;margin-top:13px}.instrument{padding:21px 17px 19px}.controls{gap:25px;align-items:center}.power{min-width:151px;padding:16px 12px;font-size:12px}.level-control{min-width:0}.scope{height:210px}.notes{display:block;font-size:10px}.notes .local-note{text-align:left;white-space:normal;margin-top:9px}}@media(max-width:400px){.room{padding:28px 16px}.colours{grid-template-columns:1fr}.colour-card{min-height:0;padding:14px}.card-top{gap:10px}.cue{margin-top:6px;padding-left:28px;max-width:none}.controls{gap:19px}.power{min-width:142px}.spectrum-footer{font-size:8px;letter-spacing:.06em}.live-state{font-size:9px}.scope{height:190px}}