:root{color-scheme:dark;font:15px system-ui,sans-serif;background:#111619;color:#e7eeec}*{box-sizing:border-box}body{margin:0;padding:32px}main{max-width:1240px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:24px}h1{font-size:38px;letter-spacing:-1.4px;margin:0}h2{font-size:16px;margin:0 0 8px}p{color:#aabbb5;line-height:1.6;margin:8px 0}.eyebrow{font-size:10px;letter-spacing:2px;color:#8fc8b1}a{color:#a7dac4}button{font:inherit;cursor:pointer;border:1px solid #53615b;border-radius:7px;background:#26312c;color:#eaf3ee;padding:10px 14px}button:focus-visible,[role=slider]:focus-visible{outline:3px solid #c4e6d5;outline-offset:3px}button:disabled{cursor:default;opacity:.27}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:24px 0 22px}#power{background:#a6d7bd;color:#12231b;font-weight:700}#status{font-size:12px;color:#b4c6bd;margin-left:8px}.device-scroll{overflow-x:auto;padding:5px 4px 16px}.device{min-width:700px;padding:30px 30px 14px;border:1px solid #606963;border-radius:24px;background:linear-gradient(135deg,#414944,#303733 70%);box-shadow:0 16px 40px #0007,inset 0 2px 1px #8a969033}.device-top{display:grid;grid-template-columns:23% 25% 52%;align-items:start;padding-bottom:20px}.left-knobs{display:grid;grid-template-columns:1fr 1fr;gap:22px 10px;padding:10px 25px 0 0}.display{display:flex;align-items:center;flex-direction:column;gap:12px;padding-right:16px}canvas{width:100%;max-width:240px;aspect-ratio:1;image-rendering:pixelated;background:#070c09;border:8px solid #1a201c;box-shadow:inset 0 1px 8px #000;border-radius:8px}.display-label{font-size:9px;letter-spacing:1.7px;color:#a9b7ae}.right-panel{padding-left:12px}.performance-knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:10px}.knob-control{text-align:center;user-select:none}.knob-control label{display:block;font-size:9px;letter-spacing:1px;margin-top:9px;color:#f0f3f1;font-weight:650}.knob-control small{display:block;font-size:9px;color:#bac8be;margin-top:3px}.knob{position:relative;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#3d4841,#1b221d 70%);border:2px solid #18201a;box-shadow:0 3px 4px #0007,0 0 0 5px #556159;cursor:ns-resize;touch-action:none;margin:auto;--angle:0deg}.knob:after{content:'';position:absolute;inset:5px 20px 25px;background:#e8efea;border-radius:2px;transform-origin:50% 18px;transform:rotate(var(--angle))}.knob-control .nudge{display:flex;justify-content:center;gap:12px;margin-top:5px}.nudge button{padding:0 5px;background:none;border:0;font-size:13px;color:#b4c8ba;line-height:18px}.buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:13px 8px;margin-top:27px}.panel-button{font-size:10px;letter-spacing:.5px;padding:15px 0;background:#262e28;box-shadow:0 3px 0 #151c16;color:#d7e1da;border-color:#5b665e;touch-action:none}.panel-button.lit{background:#8e6a37;color:#fff4d6;box-shadow:0 0 12px #eeb66b44}.panel-button small{display:block;font-size:8px;opacity:.65;margin-top:4px}.octaves{grid-column:1/-1}.keybed{height:194px;position:relative;border-radius:15px;background:#202722;box-shadow:inset 0 3px 6px #0008;padding:10px 12px;touch-action:none;user-select:none}.white-keys{position:absolute;left:12px;right:12px;bottom:9px;display:grid;grid-template-columns:repeat(16,1fr);gap:9px;height:116px}.white-key{padding:18px 0 10px;border-radius:22px;background:#cad4cd;color:#24362c;border:1px solid #d8e4db;box-shadow:0 4px 1px #1118;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-size:13px;touch-action:none}.white-key.soft{background:#c0dace}.white-key.normal{background:#ded8ba}.white-key.accent{background:#dbbcaa}.white-key small{font-size:9px;opacity:.6}.black-key{position:absolute;top:10px;width:3.6%;height:52px;transform:translateX(-50%);background:#3e4842;border-radius:17px;border:1px solid #6e7c71;color:#c3d1c7;box-shadow:0 3px 1px #1118;font-size:11px;padding:0;touch-action:none}.white-key.lit,.black-key.lit{background:#eeb771!important;border-color:#ffe7c4;box-shadow:0 0 15px #d5a36866;transform:translateY(2px)}.black-key.lit{transform:translate(-50%,2px)}.white-key.muted{opacity:.32;background:#9da99f}.zone-strip{display:grid;grid-template-columns:6fr 6fr 4fr;text-align:center;letter-spacing:1px;font-size:9px;padding:14px 0;color:#b5c7b9}.device-foot{border-top:1px solid #5d675f;padding-top:12px;display:flex;align-items:center;gap:16px;font-size:9px;letter-spacing:2px;color:#a0afa4}.device-foot b{font-size:19px;color:#d5ded7}.device-foot i{width:6px;height:6px;background:#19221c;border-radius:50%;margin-left:auto}.device-foot i.on{background:#c7f3ad;box-shadow:0 0 8px #b1d6a5}.help{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:25px}.help p{font-size:13px}.help strong{color:#d6e7dd}details{border-top:1px solid #35463b;margin-top:28px;padding-top:18px}summary{cursor:pointer;color:#a8c9b7}pre{white-space:pre-wrap;font:12px/1.6 ui-monospace,monospace;color:#b7d6c4}footer{font-size:11px;color:#839b8c;line-height:1.7;padding:26px 0 10px}@media(max-width:760px){body{padding:16px}header{display:block}h1{font-size:30px}header>a{display:inline-block;margin-top:10px}.help{grid-template-columns:1fr;gap:14px}.toolbar button{font-size:12px;padding:9px}.device{padding:22px}.device-scroll{margin:0 -10px}}

.style-picker{display:flex;gap:26px;align-items:center;margin:0 4px 20px;padding:18px 20px;background:#19231d;border:1px solid #384b3e;border-radius:12px}.style-choice{min-width:310px}.style-choice label{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#b7d8c4;margin-bottom:9px}.style-select{display:flex;gap:6px}.style-select select{min-width:235px;max-width:340px;font:600 15px system-ui;padding:10px;background:#2b3c30;border:1px solid #597562;color:#e3f2e8;border-radius:6px}.style-select button{padding:9px 12px}.style-description>span{color:#c4e8d0;font-size:12px}.style-description p{font-size:13px;margin:5px 0}.style-description small{font-size:11px;color:#8cae97}.chord-guide{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;margin:0 0 12px}.chord-guide button{padding:7px 1px;font-size:12px;background:#25342a;border-color:#536958;white-space:nowrap}.chord-guide button small{display:block;font-size:8px;color:#94af9c;margin-bottom:3px}.chord-guide button.selected{background:#8e6a37;color:#fff0d4;border-color:#e9c394}.black-key{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:10px}.black-key small{font-size:8px;opacity:.65}.black-key span{pointer-events:none;max-width:100%;letter-spacing:-.4px}.black-key small{pointer-events:none}
@media(max-width:800px){.style-picker{display:block;padding:14px}.style-description{margin-top:12px}.style-choice{min-width:0}.style-select select{min-width:0;flex:1}.chord-guide button{font-size:10px}.black-key{font-size:8px}}

#instrument{min-height:42px;width:100%;padding:8px 12px;background:#26352a;color:#e2eddf;border:1px solid #526452;border-radius:6px;font:inherit;font-weight:650;}

/* Zone colours stay consistent for guitars and four-part instrument layouts. */
header nav{display:flex;gap:22px;font-size:13px}header nav a:first-child{padding:8px 14px;border:1px solid #52685c;border-radius:22px;text-decoration:none}
.device-status{font-size:10px;letter-spacing:1px;color:#b9d9c8;border-bottom:1px solid #59685e;padding:0 0 12px;margin-bottom:18px}.device-status.locked{color:#f4d791}
.white-key.soft{--zone:#8bd5ba;--zone-active:#83d4bb;--note:#214f42}.white-key.normal{--zone:#e6ca77;--zone-active:#ecd178;--note:#6a5419}.white-key.accent{--zone:#e7a38b;--zone-active:#f1ab91;--note:#773e2d}
.white-key{border-top:4px solid var(--zone);font-variant-numeric:tabular-nums}.white-key>span{color:var(--note);font-weight:750;font-size:14px}.white-key.lit{background:var(--zone-active)!important;border-color:var(--zone);box-shadow:0 0 16px color-mix(in srgb,var(--zone),transparent 55%)}.white-key.muted{opacity:.48}.white-key:focus-visible{outline:3px solid var(--zone);outline-offset:4px}
.zone-strip span{padding:7px 0;border-radius:5px}.zone-strip span:nth-child(1){color:#a4e1c8;background:#213d31}.zone-strip span:nth-child(2){color:#ecd48a;background:#443e27}.zone-strip span:nth-child(3){color:#f1b29b;background:#4b332c}.zone-strip{gap:8px;letter-spacing:.8px}
.chord-guide button{transition:background .12s,border-color .12s}.chord-guide button:hover{border-color:#b6d9c0}.black-key:hover{border-color:#d0d9cf}.style-picker{box-shadow:inset 0 1px 0 #b5e1c508}
@media(max-width:760px){header nav{margin-top:14px}.white-key>span{font-size:12px}}

.header-aside{width:340px;flex-shrink:0;display:grid;gap:12px}.header-aside nav{justify-content:flex-end;align-items:center}.instrument-visual{background:#13221c;border:1px solid #3e5749;border-radius:13px;overflow:hidden}.instrument-visual canvas{display:block;max-width:none;width:100%;height:138px;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;image-rendering:auto;pointer-events:none}.instrument-visual>div{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid #365141;font-size:11px;color:#acd2bd}.instrument-visual button{font-size:10px;padding:5px 9px;border-radius:20px}.visuals-off canvas{opacity:.35}.device-status{display:flex;align-items:center;gap:13px}#summary-voices{margin-left:auto;font-variant-numeric:tabular-nums}#chord-lock{display:inline-flex;color:#a5d6bd}#chord-lock.is-locked{color:#f0ce84}#chord-lock svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.device-status.locked #summary-instrument{color:#f0ce84}@media(max-width:760px){.header-aside{width:100%;margin-top:18px}.header-aside nav{justify-content:flex-start;margin-top:0}.instrument-visual{max-width:340px}.device-status{gap:8px}}

.control-guide{margin:0 0 24px}.main-control-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.main-control-guide>div,.knob-guide>div{background:#24332b;border:1px solid #596f60;border-radius:8px;padding:10px 12px}.main-control-guide span{font-size:11px;color:#b6d3bf}.main-control-guide strong{font-size:14px;color:#f0f4e7}.main-control-guide small{display:block;font-size:10px;color:#a1b6a7;margin-top:6px;line-height:1.5}.knob-guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}.knob-guide span{font-size:10px;color:#b6d3bf}.knob-guide strong{float:right;font-size:13px;font-variant-numeric:tabular-nums;color:#e6ede4}.control-guide [data-control].active{border-color:#eac884;background:#3b3c29;box-shadow:inset 0 0 0 1px #eac88422}#control-feedback{display:block;min-height:31px;margin-top:8px;padding:8px 12px;background:#202a24;border-radius:5px;font-size:11px;color:#a6bdac}#control-feedback.active{color:#ffe1a0;background:#3c3826}.knob-value{display:block;max-width:115px;min-height:24px;margin:7px auto 0;font-size:10px;font-weight:650;line-height:1.35;color:#e6d2a5;overflow-wrap:anywhere}.main-control-guide strong{overflow-wrap:anywhere}@media(max-width:760px){.main-control-guide small{font-size:9px}.main-control-guide strong{font-size:12px}.knob-guide span{display:block}.knob-guide strong{float:none;display:block;margin-top:5px}.main-control-guide>div,.knob-guide>div{padding:8px}}

.main-control-guide>div{text-align:center}.reset-menu{margin-top:10px;padding:14px;border:1px solid #eac884;border-radius:8px;background:#302f22;text-align:center}.reset-menu[hidden]{display:none}.reset-menu strong,.reset-menu span,.reset-menu small{display:block}.reset-menu span{margin:10px 0;color:#ffe1a0;font-weight:700}.reset-menu small{color:#c7cfb7}

#chord-lock{flex-direction:column;align-items:center;gap:3px}#chord-lock small{font-size:8px;letter-spacing:1px}

.performance-hint{margin:6px 0 0;font-size:11px;color:#b9d9c8;line-height:1.5}#chord-lock.is-locked{color:#f87858}

.chord-hint{font-size:11px;color:#b9cdbf;margin:7px 0 0}.chord-guide [data-suggestion="3"],.black-key[data-suggestion="3"]{--hint:#a3dfb2}.chord-guide [data-suggestion="2"],.black-key[data-suggestion="2"]{--hint:#e6b968}.chord-guide [data-suggestion="1"],.black-key[data-suggestion="1"]{--hint:#d88e86}.chord-guide button[data-suggestion]:not(.selected){color:var(--hint);border-bottom:3px solid var(--hint)}.black-key[data-suggestion]:not(.lit){color:var(--hint);border-color:color-mix(in srgb,var(--hint),#3e4842 40%);background:color-mix(in srgb,var(--hint) var(--hint-fill),#25312a);box-shadow:0 0 12px color-mix(in srgb,var(--hint) var(--hint-glow),transparent)}

/* A small illuminated cap marks the first contact of each playing lane. */
.white-key{position:relative}.white-key.lane-home:before{content:"";position:absolute;top:5px;left:28%;right:28%;height:4px;border-radius:4px;background:#f6ffef;box-shadow:0 0 7px 2px #f0ffcb99;pointer-events:none}

.white-key.lane-home.muted{opacity:1;background:#9da99f}.white-key.lane-home.muted>span,.white-key.lane-home.muted>small{opacity:.45}