:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#111315;color:#dadcd9;--led:#ff3b32;--led-dim:#5a2626;--brightness:.88}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 50% 36%,#32373a 0,#1b1f21 40%,#111315 75%)}button,a,select,input{touch-action:manipulation}button{cursor:pointer;font:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #f0b6a9;outline-offset:5px}header{max-width:1320px;margin:auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 32px;border-bottom:1px solid #ffffff12;font-size:12px}.back{color:#b1b6b6}.back:hover{color:#fff}.site-name{font-size:11px;letter-spacing:.14em}.site-name span{color:#788181;margin-left:10px}.monitor-toggle{background:#252b2d;color:#dce0db;border:1px solid #454e50;border-radius:4px;padding:10px 14px;font-size:11px}main{width:min(640px,100%);margin:35px auto 0;padding:0 22px 26px}.instrument-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}h1{font-size:16px;letter-spacing:.11em;font-weight:500;margin:0}h1 span{font-size:11px;letter-spacing:.02em;color:#939c9e;margin-left:10px}.connection{display:flex;align-items:center;gap:7px;font-size:10px;color:#9da5a5;white-space:nowrap}.connection i{width:6px;height:6px;border-radius:50%;background:#858c8c}.connection.live i{background:#9bca91;box-shadow:0 0 9px #9bca9133}.connection.live{color:#b5c9b0}.connection.error{color:#f0a197}.connection.error i{background:#ef7970}.meter-wrap{padding:8px;background:linear-gradient(145deg,#4d5050,#0a0c0d 44%,#444846);border-radius:3px;box-shadow:0 24px 50px #0009,0 2px 4px #000,0 0 0 1px #050606}.instrument{aspect-ratio:1;background:linear-gradient(150deg,#202627,#131a1b);padding:11px;box-shadow:inset 0 0 0 1px #929a9655,inset 0 0 0 3px #1a1f20;border:1px solid #0c0f10;position:relative}.glass{height:100%;position:relative;overflow:hidden;background:linear-gradient(112deg,#ffffff08,transparent 55%),linear-gradient(175deg,#323a3b,#252f30 60%,#303937);box-shadow:inset 0 0 0 1px #bbc4be22,inset 0 0 14px #0004}.glass:after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,#ffffff05,transparent 40%,#00000005);pointer-events:none}.face{display:block;width:100%;height:100%}.digit-bank,.unit-leds,.phase-leds,.mode-leds{opacity:var(--brightness)}.segment{fill:#c7302a;opacity:.045}.segment.on{fill:#ff483c;opacity:1;filter:drop-shadow(0 0 1.2px #ff302970)}.unit-leds text,.phase-leds text,.mode-leds text{fill:var(--led-dim);font-family:Arial,sans-serif;font-size:20px;font-weight:500}.unit-leds text.on,.phase-leds text.on,.mode-leds text.on{fill:#ff6556;filter:drop-shadow(0 0 .7px #ff302950)}.phase-leds text{font-size:20px}.mode-leds text{font-size:21px}.printed-line{stroke:#ced2c8;stroke-width:1.5;opacity:.8}.model-print{fill:#e4e9df;font-size:33px;font-family:Arial,sans-serif;font-weight:400}.maker-print text{fill:#dce2d6;font-size:10px;font-family:Arial,sans-serif;font-weight:700}.maker-print path{fill:#dce2d6}.hardware-key{position:absolute;width:8.1%;height:8.1%;border-radius:15%;border:2px solid #a6ada4;background:linear-gradient(140deg,#64716d,#3e4b49 66%);box-shadow:inset 1px 1px 1px #e4e8d550,inset -2px -2px 2px #111a1a80,0 1px 3px #0008;color:#e4ecdb;display:grid;place-items:center;padding:.4%;transition:filter .12s,transform .08s;z-index:1}.hardware-key:hover{filter:brightness(1.22)}.hardware-key:active{transform:translateY(2px);box-shadow:inset 2px 2px 3px #10181890}.hardware-key svg{height:100%;width:100%;overflow:visible}.hardware-key path{fill:none;stroke:#dde6d5;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.hardware-key path.solid{stroke:none;fill:#e3eadb}.phase-key{left:80.8%;top:12.9%}.quantity-key{left:80.8%;top:55.2%}.mode-key{left:80.8%;top:72.1%}.p-key{left:6.8%;top:86.6%;font-size:clamp(20px,3.6vw,34px);font-weight:400}.down-key{left:61.1%;top:86.6%}.up-key{left:77.5%;top:86.6%}.hardware-key:disabled{cursor:default;opacity:.4;filter:none}.readout-caption{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 3px}.readout-caption div{display:flex;flex-direction:column;gap:7px}.readout-caption div>span{color:#c1c9c6;font-size:10px;letter-spacing:.15em;text-transform:uppercase}.readout-caption strong{font-weight:400;font-size:13px;color:#e0e3dc}.readout-caption>span{color:#b4bdb6;font-size:10px;white-space:nowrap;border:1px solid #4c5652;border-radius:3px;padding:7px 9px}.readout-key{margin:20px 3px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 15px}.readout-key p{margin:0;font-size:11px;color:#a3adab;line-height:1.5}.readout-key p span{display:inline-block;min-width:28px;color:#e07b70}.readout-key p strong{font-weight:400;color:#dbe0d9}.display-notice{font-size:11px;line-height:1.6;color:#d9ae8c;margin:14px 3px;min-height:18px}.control-guide{display:flex;gap:15px;flex-wrap:wrap;font-size:10px;color:#8d9897;margin:21px 3px 0;padding-top:17px;border-top:1px solid #ffffff10}.control-guide span{display:flex;align-items:center;gap:5px}kbd{font-family:inherit;font-size:10px;background:#252d2f;border:1px solid #495451;border-radius:3px;min-width:20px;line-height:20px;text-align:center;color:#c0c9c2}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#6f7d7b;font-size:9px;margin:23px 3px 0;line-height:1.6}dialog{border:1px solid #56625d;background:#222a2a;color:#dde3dc;padding:26px;border-radius:8px;width:min(430px,calc(100vw - 32px));box-shadow:0 25px 100px #000b}dialog::backdrop{background:#080d10bb;backdrop-filter:blur(4px)}.dialog-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}h2{font-size:18px;font-weight:400;margin:0}dialog label{display:flex;flex-direction:column;gap:10px;font-size:12px;color:#bac5bc;margin:20px 0}dialog select{background:#151d1d;color:#e3e9df;padding:11px;border:1px solid #53615a;border-radius:3px;font:inherit}dialog input{accent-color:#e5a193}dialog p{font-size:12px;line-height:1.7;color:#a7b5af;margin:16px 0}dialog a{font-size:11px;color:#e5b2a4;display:block;margin:20px 0}.close{border:0;background:none;color:#bac5bc;font-size:26px}.done{display:block;width:100%;border:1px solid #6b7b70;background:#3c4c41;color:#e5ede0;padding:12px;border-radius:3px;margin-top:22px}svg [hidden]{display:none}@media(min-width:1400px){main{margin-top:45px}}@media(max-width:600px){header{min-height:68px;padding:14px 18px;gap:10px}.site-name{display:none}main{margin-top:25px;padding:0 16px 22px}h1 span{display:block;margin:6px 0 0;font-size:10px}.instrument-heading{align-items:center}.instrument{padding:7px}.meter-wrap{padding:5px}.hardware-key{border-width:1.5px}.readout-caption{align-items:start;margin-top:22px}.readout-caption strong{font-size:12px;line-height:1.5}.readout-caption>span{font-size:9px;padding:6px}.readout-key{gap:8px}.readout-key p{font-size:10px}.control-guide{gap:12px}footer{font-size:9px}.p-key{font-size:clamp(16px,4.7vw,28px)}}

/* Instrument presentation mode; the controls remain available at the top. */
.header-controls{display:flex;align-items:center;gap:9px}.fullscreen-toggle{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.fullscreen-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.fullscreen-toggle[aria-pressed=true]{border-color:#a3b7a4;background:#344139}
html.is-fullscreen{height:100%;overflow:hidden;background:#111315}html.is-fullscreen body{height:100%;min-height:100%;overflow:hidden}html.is-fullscreen header{position:absolute;z-index:3;top:0;right:0;min-height:0;padding:12px 16px;border:0}html.is-fullscreen header>.back,html.is-fullscreen .site-name{display:none}html.is-fullscreen main{width:min(calc(100vw - 32px),calc(100dvh - 106px));margin:58px auto 0;padding:0}html.is-fullscreen .instrument-heading{margin:0 0 10px}html.is-fullscreen h1{font-size:13px}html.is-fullscreen h1 span{font-size:10px}html.is-fullscreen .meter-wrap{box-shadow:0 8px 30px #0007}html.is-fullscreen .readout-caption,html.is-fullscreen .readout-key,html.is-fullscreen .control-guide,html.is-fullscreen footer{display:none}html.is-fullscreen .display-notice{position:fixed;left:16px;right:16px;bottom:3px;margin:0;text-align:center;font-size:10px;min-height:0}
@media(max-width:600px){header{padding-left:12px;padding-right:12px;gap:8px}.header-controls{gap:6px}.header-controls .monitor-toggle{font-size:10px;padding:9px}.back{font-size:10px}.fullscreen-toggle{gap:5px}html.is-fullscreen h1 span{display:none}}

/* All six keys share the same shaded face, border, size and press feedback. */
.cycle-key{left:76.1%}.phase-key{top:16.3%}.quantity-key{top:55.7%}.mode-key{top:73.2%}
.cycle-key .cycle-loop{stroke:#dde6d5;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}.cycle-key .cycle-arrow{fill:#dde6d5;stroke:none}
.maker-print text{font-family:Arial,Helvetica,sans-serif;font-size:9px;font-weight:700;letter-spacing:.1px;fill:#edf0e6}.maker-print path{fill:#edf0e6}