.test-main{padding-top:35px}.test-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.test-heading h1{font-size:36px;letter-spacing:-1px}.test-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:22px 0}.test-toolbar label{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}select{max-width:560px;padding:10px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:5px}input[type=range]{accent-color:var(--accent);width:130px}.mode-cards{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:12px;margin-bottom:25px}.mode-cards>div{background:var(--panel);border:1px solid var(--line);padding:20px;border-radius:8px}.mode-cards span,.mode-cards small{display:block;font-size:11px;color:var(--muted);line-height:1.7}.mode-cards strong{display:block;font-size:25px;color:var(--accent);margin:9px 0}.test-console{border:1px solid var(--line);background:#151b22;border-radius:12px;padding:24px}.deck{position:relative;width:100%;aspect-ratio:1.85;background:linear-gradient(145deg,#34383c,#20252b 60%,#303438);border:6px solid #41464a;border-bottom-width:17px;border-radius:32px 32px 15px 15px;box-shadow:inset 0 0 0 4px #171b20,0 12px 24px #0004;overflow:hidden}.deck:before{content:"";position:absolute;inset:19% 3% 7%;border:2px solid #68717b;border-radius:18px;pointer-events:none}.deck-logo{position:absolute;top:6%;left:6%;color:#76d7ec;font-size:clamp(13px,2vw,24px);font-weight:900;letter-spacing:2px}.deck-logo small{display:block;font-size:8px;letter-spacing:3px;color:#adb7bf;margin-top:6px}.utility{position:absolute;left:46%;right:5%;top:3%;display:flex;justify-content:space-between;gap:6px}.test-key{position:absolute;width:8.2%;aspect-ratio:1;border-radius:50%;border:3px solid #11161a;background:radial-gradient(circle at 40% 30%,#474e56,#262d35);box-shadow:0 0 0 2px #6d757c,0 4px 0 2px #14191e;color:#f1f3f6;font-size:clamp(9px,1.2vw,15px);padding:0;transition:background .06s,box-shadow .06s}.test-key small{display:block;font-size:clamp(7px,.8vw,10px);color:#b5c1cd;margin-top:3px}.test-key.seen{box-shadow:0 0 0 2px #79caa6,0 4px 0 2px #14191e}.test-key.live{background:radial-gradient(circle at 40% 30%,#ffe197,#edac2b);color:#111820;box-shadow:0 0 0 3px #ffd675,0 0 25px #f5b73866}.test-key.live small{color:#3f331c}.test-key.calibrating{outline:3px dashed #80d4ec;outline-offset:5px}.utility .test-key{position:relative;width:11%;border-width:2px;font-size:clamp(6px,.9vw,11px)}.utility .test-key small{font-size:7px}.mini-screen{position:absolute;top:24%;left:7%;width:15%;padding:12px;background:#10171e;border:3px solid #434c56;text-align:center}.mini-screen span{font-size:clamp(6px,.9vw,10px);color:#80d4ec;display:block;letter-spacing:1px}.mini-screen strong{font-size:clamp(9px,1.5vw,18px);display:block;margin-top:8px}.joystick{position:absolute;left:18%;top:42%;width:18%;aspect-ratio:1;border-radius:50%;border:4px solid #5f7b87;background:radial-gradient(circle,#111a23 0 58%,#71cee3 60%,#ad83c0 64%,#151b22 70%);box-shadow:0 0 15px #76b6d344}.stick-cross{position:absolute;inset:15%;border-radius:50%;background:linear-gradient(90deg,transparent 49.5%,#61717e 50%,transparent 50.5%),linear-gradient(transparent 49.5%,#61717e 50%,transparent 50.5%)}.stick-ball{position:absolute;left:26%;top:26%;width:48%;height:48%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#677580,#151d24 70%);border:2px solid #45515a;box-shadow:0 7px 10px #0008}.joystick>span{position:absolute;left:-20%;width:140%;top:115%;font:clamp(7px,.9vw,12px) Consolas,monospace;text-align:center;color:#b7c4d0}.deck-caption{position:absolute;bottom:8%;left:7%;font-style:italic;font-size:clamp(11px,1.5vw,18px);color:#b4bcc4;font-weight:bold}.deck-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:24px}.deck-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.legend-live{background:var(--accent)}.legend-seen{background:#79caa6}.readouts{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}.readouts>div{padding:18px 24px;background:var(--panel);border:1px solid var(--line);border-radius:8px}.raw-buttons{display:flex;gap:7px;flex-wrap:wrap}.raw-button{font:11px Consolas,monospace;min-width:52px;padding:9px 5px;border:1px solid #45515e;border-radius:4px;text-align:center;color:var(--muted)}.raw-button.live{color:#151a20;background:var(--accent)}.axis-row{display:flex;gap:12px;align-items:center;font:12px Consolas,monospace;margin:12px 0}.axis-row meter{width:100%;height:12px}.test-help{margin:25px 0;color:var(--muted);font-size:12px;line-height:1.9}.test-help summary{cursor:pointer;color:var(--text)}.test-help a{color:var(--accent)}.test-main>.logs{margin-bottom:32px}
@media(max-width:680px){.test-heading{display:block}.test-heading h1{font-size:28px}.mode-cards{grid-template-columns:1fr 1fr}.mode-cards>div:last-child{grid-column:1/-1}.mode-cards>div{padding:12px}.mode-cards strong{font-size:20px}.test-console{padding:10px}.deck{border-width:3px;border-bottom-width:8px;border-radius:16px}.test-key{border-width:1px}.mini-screen{padding:5px}.joystick{border-width:2px}.readouts{grid-template-columns:1fr}select{max-width:70vw}.test-toolbar{gap:10px}.utility .test-key small{display:none}.deck-legend{gap:10px}}

/* M1 / START: 24 mm versus the 30 mm main buttons. */
.test-key.test-key-small{width:6.56%}
.utility{left:42%;right:33%;gap:4px}
.utility .test-key{width:13%;font-size:clamp(5px,.65vw,9px)}
.utility .test-key small{font-size:clamp(4px,.5vw,7px)}
.deck-switches{position:absolute;left:69%;right:4%;top:3%;height:14%;display:grid;grid-template-columns:repeat(4,1fr);gap:5%;color:#adb7bf}
.deck-switch{min-width:0;text-align:center;font-size:clamp(5px,.7vw,10px)}
.switch-title{display:block;font-size:clamp(5px,.65vw,9px);white-space:nowrap;margin-bottom:5%}
.switch-body{height:58%;display:flex;align-items:stretch;justify-content:center;gap:12%}
.switch-labels{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;line-height:1}
.switch-labels .active{color:#f5b738;font-weight:700}
.switch-track{position:relative;width:25%;margin:5% 0;background:repeating-linear-gradient(#15191e 0 3px,#30373d 3px 5px);border:1px solid #080b0e;box-shadow:inset 0 0 3px #000;border-radius:2px}
.switch-track i{position:absolute;left:8%;right:8%;height:25%;transform:translateY(-50%);background:linear-gradient(#adb5bb,#636d75);border:1px solid #242a30;box-shadow:0 2px 3px #000;transition:top .15s}
.switch-status{display:block;font-size:clamp(4px,.55vw,8px);white-space:nowrap;margin-top:7%;color:#8bbba4}
.deck-switch.unknown .switch-track i{opacity:.25;background:#65707b}
.deck-switch.unknown .switch-status{color:#a9b2bd;white-space:normal;line-height:1.2}
.deck-switch.manual .switch-status{color:#f5b738}
.deck-switch .switch-identify{width:100%;padding:2px 0;min-width:0;border:0;border-radius:2px;background:transparent;color:#80d4ec;line-height:1.4;letter-spacing:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.deck-switch .switch-identify:hover{background:#80d4ec18;color:#b9eeff}
.deck-switch .switch-identify:disabled{cursor:default;opacity:.5}
.mini-screen .screen-buttons{font-size:clamp(7px,1vw,12px);font-weight:700;line-height:1.35;color:#f5b738;letter-spacing:0;overflow-wrap:anywhere;margin-top:4px;max-height:4.1em;overflow:auto}
.mini-screen .screen-buttons:empty{display:none}
.mini-screen strong:empty{display:none}