:root{color-scheme:light;--ink:#202220;--muted:#495143;--paper:#e3e5de;--panel:#d8dcd3;--line:#b9bdb3;--orange:#f24e1e;--mono:"IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}
body{margin:0;padding:32px 24px 48px;background:#c5c9c1;color:var(--ink);font:16px/1.5 Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button,select,input[type=number],textarea{border:1px solid #a5aba0;border-radius:3px}
button{min-height:44px;padding:10px 17px;background:#e9ebe5;box-shadow:0 2px 0 #a4aa9f,inset 0 1px 0 #ffffffad;font-size:15px;font-weight:600;cursor:pointer;transition:background .12s,transform .12s}
button:hover:enabled{background:#f6f7f2}
button:active:enabled{transform:translateY(1px);box-shadow:0 1px 0 #a4aa9f}
button:disabled{color:#505a48;background:#d8dcd3;border-color:#b8beb2;box-shadow:0 1px 0 #b8beb2;cursor:not-allowed}
button.primary{background:var(--orange);border-color:#d43d11;color:#281f17;box-shadow:0 2px 0 #b93310,inset 0 1px 0 #ff9f79}
button.primary:hover:enabled{background:#ff602b}
button.primary:disabled{color:#41392c;background:#c5b7a8;border-color:#a67d68;box-shadow:0 1px 0 #a67d68}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.unit{max-width:1320px;margin:auto;padding:36px 36px 20px;border:1px solid #92998b;border-radius:7px;background:var(--paper);box-shadow:0 3px 0 #969d8d,0 18px 42px #343d241a,inset 0 1px 0 #ffffffa6}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 29px;margin-bottom:0;border-bottom:2px solid var(--ink)}
.eyebrow{font:13px/1.4 var(--mono);letter-spacing:.16em;margin-bottom:4px}
h1{font-size:78px;font-weight:750;line-height:1;letter-spacing:-6px;margin:0 0 14px}
h1 b{color:var(--orange);font-weight:750}
.product-subtitle{margin:0!important;font-size:15px!important;color:var(--ink)!important}
.product-subtitle span{display:inline-block;margin-left:16px;color:var(--muted)}
.device-badge{display:flex;gap:20px;align-items:center;padding-top:8px}
.device-mark{height:66px;width:69px;display:flex;justify-content:space-between;align-items:stretch;padding:5px 7px;border:1px solid var(--ink);border-radius:3px;transform:rotate(-7deg)}
.device-mark span{position:relative;width:2px;background:var(--ink)}
.device-mark span:after{content:"";position:absolute;width:9px;height:12px;left:-3.5px;top:10%;background:var(--paper);border:2px solid var(--ink)}
.device-mark span:nth-child(2):after{top:57%}.device-mark span:nth-child(3):after{top:33%}.device-mark span:nth-child(4):after{top:72%;background:var(--orange)}
.device-meta>span{font:13px var(--mono);letter-spacing:.05em}
.connection{display:flex;align-items:center;gap:7px;max-width:230px;font-size:14px;margin-top:14px;overflow-wrap:anywhere}
.connection i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#8d9386;border:1px solid #757c6f}
.connection i.on{background:var(--orange);border-color:#d3441a;box-shadow:0 0 0 3px #f24e1e18}
.panel-label{display:flex;align-items:center;gap:10px;min-height:57px}
.section-index{font:14px var(--mono);display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--ink);border-radius:50%}
.panel-label h2{margin:0;font-size:16px;font-weight:600}
.panel-label h2 span{margin-left:8px;font:14px var(--mono);color:var(--muted)}
.panel-meta{margin-left:auto;font:13px var(--mono);letter-spacing:.05em;color:var(--muted)}
.connection-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;gap:12px;align-items:end;padding-bottom:20px}
label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:14px;font-weight:500;color:#30362d}
label small{float:right;font:13px var(--mono);color:var(--muted)}
select,input[type=number],textarea{background:#f0f1eb;width:100%;min-width:0;padding:9px 10px;min-height:40px;box-shadow:inset 0 1px 2px #27371b0a}
select{padding-right:22px}
select:disabled,input:disabled,textarea:disabled{color:#4f5947;background:#d9ddd3}
input[type=number]{font:16px/1.5 var(--mono);font-variant-numeric:tabular-nums}
input:invalid{border-color:var(--orange)}
.status-console{display:flex;gap:0;background:#cdd2c6;border:1px solid #aeb5a5;border-radius:4px;padding:6px;margin-bottom:14px}
.status-caption{padding:7px 17px 6px 7px;flex:0 0 97px;font:12px/1.5 var(--mono);color:#505746;letter-spacing:.12em}
.status-caption span{float:right;font-size:18px;line-height:1}
.oled{flex:1;min-width:0;padding:10px 14px;background:#242925;border:1px solid #121913;border-radius:2px;color:#e0e6cb;box-shadow:inset 0 2px 5px #0005;font:15px/1.55 var(--mono);overflow-wrap:anywhere}
#device-state{font-size:13px;color:#c5d3b9;margin-top:5px}
.notice{padding:13px;border:1px solid #d5916d;background:#f3ddca;font-size:15px;margin:15px 0}
.channel-heading{border-top:1px solid var(--ink);margin-top:23px;min-height:54px}
.mixer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #adb3a5;border-radius:4px;overflow:hidden;background:var(--panel)}
.strip{min-width:0;padding:19px 18px 17px;border-right:1px solid #adb3a5;background:linear-gradient(180deg,#e0e3db,var(--panel) 200px)}
.strip:last-child{border-right:0}
.strip-title{display:flex;justify-content:space-between;align-items:center}
.strip-title h2{margin:0;font-size:15px;font-weight:500;display:flex;gap:10px;align-items:center}
.channel{font:25px/1 var(--mono);font-weight:700;letter-spacing:-2px}
.gpio{font:12px var(--mono);color:var(--muted);letter-spacing:.06em}
.telemetry{padding:17px 0 15px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.monitor{display:flex;align-items:center;gap:13px;min-width:0}
.fader-visual{--level:0;position:relative;flex:0 0 65px;height:143px;user-select:none;pointer-events:none}
.fader-scale{position:absolute;left:0;top:9px;bottom:9px;width:23px;display:flex;flex-direction:column;justify-content:space-between;font:12px/1 var(--mono);color:#46513d;text-align:right}
.fader-track{position:absolute;top:3px;bottom:3px;left:47px;width:6px;background:#363d32;border:1px solid #1c2218;border-radius:3px;box-shadow:inset 2px 0 2px #0005}
.fader-track:before{content:"";position:absolute;top:10.5px;bottom:10.5px;left:-13px;width:7px;background:repeating-linear-gradient(to bottom,#707865 0,#707865 1px,transparent 1px,transparent calc((100% - 1px) / 10))}
.fader-thumb{position:absolute;left:50%;width:28px;height:22px;bottom:calc(var(--level) * (100% - 22px));transform:translateX(-50%);border:1px solid #3b4432;border-radius:2px;background:linear-gradient(#f8f9f3 0,#e0e5d6 46%,#c5cdbb 51%,#e9eee1 100%);box-shadow:0 2px 3px #161f135c,inset 0 1px 0 white;transition:bottom .12s linear}
.fader-thumb:after{content:"";position:absolute;left:3px;right:3px;top:9px;height:2px;background:var(--orange)}
.fader-value{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-top:8px}
.monitor-label{font:12px var(--mono);letter-spacing:.06em;color:#414b38}
.out{font:38px/1.35 var(--mono);font-weight:500;letter-spacing:-2.5px;font-variant-numeric:tabular-nums;color:#242b20}
.meter{height:4px;background:#bdc5b3;margin:5px 0 8px;overflow:hidden}
.meter div{height:100%;width:0;background:var(--orange);transition:width .12s linear}
.monitor-state{font-size:12px;color:#47523d;display:flex;align-items:center;gap:5px}
.monitor-state:before{content:"";width:4px;height:4px;border:1px solid currentColor;border-radius:50%}
.telemetry[data-state=live] .monitor-state{color:#354a2b}
.telemetry[data-state=live] .monitor-state:before{background:#486237}
.telemetry[data-state=offline] .out,.telemetry[data-state=stale] .out{color:#515b47}
.telemetry[data-state=offline] .fader-thumb,.telemetry[data-state=stale] .fader-thumb{opacity:.38;box-shadow:none;background:var(--paper)}
.telemetry[data-state=error] .monitor-state{color:#943017}
.adc-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:14px;font-size:13px;color:#44503b}
.adc-row span:last-child{flex-basis:100%}
.adc-row output{font:14px var(--mono);color:#424f35;margin-left:3px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 10px}
.fields .wide{grid-column:1/-1}
.monitor-note{font-size:14px;line-height:1.5;color:#43503a}
.fields>label{justify-content:flex-end}
.field-help{font-size:12px;line-height:1.65;color:#43503a;margin-top:-5px;min-height:48px}
.invert{flex-direction:row;align-items:center;gap:9px;margin:3px 0 0;min-height:32px}
.invert input{accent-color:var(--orange);width:15px;height:15px;margin:0}
.calibration{margin-top:15px;padding:0;border-top:1px solid var(--line);border-bottom:0}
.calibration>summary{list-style-position:inside;min-height:44px;padding:12px 0;font-size:16px;font-weight:600;letter-spacing:.02em;line-height:1.6}
.calibration[open]>.calibration-purpose{margin-top:8px}
.calibration-purpose{margin:0 0 12px;font-size:14px;line-height:1.75;color:#35422d}
.calibration-steps{display:grid;gap:12px}
.calibration-steps p{margin:0;font-size:14px;color:#35422d;line-height:1.6}
.calibration-steps b{font:13px var(--mono);margin-right:5px;color:#8c3c22}
.calibration-status{min-height:36px;font-size:14px;line-height:1.7;color:#485a3b;margin-top:12px}
.calibration-cancel{min-height:32px;padding:5px 9px;font-size:13px;margin-top:7px}
.calibration-details .fields{margin-top:10px}
.calibration-details summary{font-size:13px}
.calibration-details summary span{font-size:12px}
.calibration-intro{margin:0 0 12px;color:#35422d}
.calibration label{font-size:13px}
.capture{width:100%;min-height:38px;font-size:13px;padding:7px 3px;margin-top:5px}
.span-note{font-size:12px;color:#44503b;margin-top:10px}
.actions{padding:20px 0 23px}
.action-row{display:flex;gap:9px;flex-wrap:wrap}
.actions .action-row button{display:flex;align-items:center;gap:15px;min-width:143px}
.actions #defaults{margin-left:auto}
.key-code{font:15px var(--mono);font-weight:400}
.key-label{font-size:15px}
p{font-size:14px;color:var(--muted);margin:11px 0 0;line-height:1.7}
#validation,#warnings{font-size:15px;font-weight:500;color:#a33516}
#validation:not(:empty),#warnings:not(:empty){margin-top:12px;padding:9px 12px;border-left:2px solid var(--orange);background:#eacbb77d}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink);gap:34px}
.files,.calibration-note{min-width:0}
.footer-grid .panel-label{min-height:58px}
.files>.action-row{margin-top:17px}
.files>.action-row button{min-width:110px;font-size:14px}
.files button span{margin-left:14px}
.files>p:first-of-type{margin-top:0}
.calibration-note ol{padding-left:18px;margin:0;color:#35422d;font-size:14px;line-height:1.8}
.calibration-note li{padding-left:3px;margin:0 0 4px}
.note-small{font-size:13px;line-height:1.65;color:#44503b}
details{margin-top:17px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}
summary{font-size:14px;cursor:pointer;list-style:disclosure-closed;min-height:24px;padding-top:3px}
details[open]>summary{list-style:disclosure-open}
summary span{float:right;font:13px var(--mono);color:var(--muted)}
textarea{font:14px/1.6 var(--mono);min-height:180px;resize:vertical;margin:12px 0;background:#f0f2e9}
footer{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:30px;padding-top:17px;font-size:12px;color:#44503b}
.footer-brand{color:#343b2e;font-weight:600;letter-spacing:.01em}
.footer-brand span{color:var(--orange);margin:0 4px}
.footer-divider{margin:0 8px}.revision{font:12px var(--mono);letter-spacing:.08em}
@media(min-width:981px) and (max-width:1200px){body{padding:24px 16px}.unit{padding:28px 24px 18px}.strip{padding-left:13px;padding-right:13px}.out{font-size:31px}.monitor{gap:7px}.fader-visual{flex-basis:57px}.fields{gap:10px 7px}select,input[type=number]{padding-left:7px;font-size:15px}}
@media(max-width:980px){body{padding:22px 18px 34px}.unit{padding:27px 25px 19px}h1{font-size:66px;letter-spacing:-5px}.mixer{grid-template-columns:repeat(2,minmax(0,1fr))}.strip{padding:21px 23px}.strip:nth-child(2){border-right:0}.strip:nth-child(-n+2){border-bottom:1px solid #adb3a5}.monitor{gap:22px}.fader-value{max-width:200px}.actions .action-row button{min-width:0;flex:1;gap:8px}.actions #defaults{margin-left:0}.footer-grid{gap:26px}.files>.action-row button{min-width:0;flex:1;padding-left:9px;padding-right:9px}.device-mark{display:none}.device-meta>span{font-size:12px}.out{font-size:40px}}
@media(max-width:650px){body{padding:12px 10px 26px}.unit{padding:22px 18px 16px}.top{align-items:flex-start;padding-bottom:23px;gap:13px}.eyebrow{font-size:12px;letter-spacing:.05em}h1{font-size:56px;letter-spacing:-4px;margin-bottom:10px}.product-subtitle{font-size:13px!important}.product-subtitle span{display:block;margin:4px 0 0}.device-badge{padding-top:3px}.device-meta>span{font-size:12px;max-width:97px;display:block;line-height:1.6}.connection{font-size:12px;max-width:108px;gap:5px;margin-top:13px}.connection-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}.connection-panel label{grid-column:1/-1}.connection-panel button{width:100%}.panel-meta{font-size:12px}.status-caption{display:none}.oled{font-size:14px;padding:11px}.status-console{padding:4px}#device-state{font-size:12px}.footer-grid{grid-template-columns:1fr;gap:18px}.calibration-note{border-top:1px solid var(--line)}.actions .action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.actions .action-row button{justify-content:space-between;min-height:45px}select,input[type=number],textarea{font-size:16px;min-height:44px}.capture{min-height:44px}.panel-label h2{font-size:15px}.panel-label h2 span{font-size:13px}.actions>p{font-size:13px}footer{gap:10px;align-items:flex-start}.revision{margin-left:auto}}
@media(max-width:560px){.mixer{grid-template-columns:1fr}.strip{padding:20px 22px;border-right:0;border-bottom:1px solid #adb3a5}.strip:last-child{border-bottom:0}.monitor{gap:27px}.fader-visual{flex-basis:70px;height:153px}.fader-value{max-width:none}.out{font-size:46px}.fields{gap:13px 12px}.field-help{font-size:13px;min-height:16px}.gpio{font-size:13px}.adc-row{font-size:14px}.channel{font-size:29px}.strip-title h2{font-size:16px}.calibration{padding-top:15px}.calibration>summary{font-size:14px}.calibration label{font-size:14px}.span-note{font-size:13px}.files>.action-row button{font-size:13px}.files button span{margin-left:4px}}
@media(max-width:350px){body{padding:8px 6px 20px}.unit{padding:18px 13px 14px}h1{font-size:50px}.device-meta>span{font-size:12px}.device-badge{max-width:92px}.strip{padding:18px}.monitor{gap:18px}.out{font-size:40px}.panel-label{gap:7px}.panel-label h2 span{margin-left:5px}.panel-meta{letter-spacing:0}.files>.action-row{gap:6px}.files>.action-row button{padding:8px 5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}


/* Keep user-facing instructions readable across every layout breakpoint. */
.product-subtitle{font-size:15px!important}
label,.calibration label{font-size:14px;font-weight:500;color:#30362d}
.calibration-purpose,.calibration-steps p,.calibration-status,.calibration-intro,.calibration-note ol,.note-small,.actions>p{font-size:15px;line-height:1.75}
.field-help,.span-note{font-size:14px;line-height:1.65}
.calibration h3{font-size:16px}
.capture,.calibration-cancel,.key-label,.files>.action-row button{font-size:15px}
.capture{min-height:44px}
summary,.calibration-details summary{font-size:14px;line-height:1.6}
textarea{font-size:14px;line-height:1.7}
.calibration-status{min-height:53px}
@media(max-width:650px){label,.calibration label{font-size:16px}.panel-label{align-items:center}.panel-label h2{font-size:16px}.panel-label h2 span{font-size:12px}.files button span{margin-left:3px}.field-help{min-height:0}.oled{font-size:15px}#device-state{font-size:14px}.connection{font-size:13px;max-width:118px}.product-subtitle{font-size:14px!important}}