:root{--ral-9005: #0a0a0a;--ral-9007: #8a8c8e;--ral-9010: #f1ece0;--gold: #b8985a;--green-led: #2bff6a;--oled-bg: #0a0d10;--oled-fg: #f4f4f4;--label-engrave: var(--ral-9007)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}html,body{margin:0;padding:0;min-height:100vh;min-height:100dvh;background:radial-gradient(circle at 20% 0%,#2a2a2c,#131315,#0a0a0a);color:var(--ral-9010);font-family:Inter,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;touch-action:manipulation}button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation}@media(hover:none){.key:hover{color:var(--label-engrave)}}.stage{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:24px;padding:32px 16px}.device-holder{width:1520px;height:320px;position:relative;flex-shrink:0}.device{position:absolute;top:0;left:0;width:1520px;height:320px;background:#0a0a0a;clip-path:path("M 284,0 L 1510,0 A 10,10 0 0 1 1520,10 L 1520,310 A 10,10 0 0 1 1510,320 L 18,320 A 8,8 0 0 1 13,307 L 277,3 A 10,10 0 0 1 284,0 Z");filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}.device-silver{position:absolute;top:0;left:0;width:1520px;height:320px;background:var(--ral-9007);clip-path:path("M 285,6 L 1509,6 A 5,5 0 0 1 1514,11 L 1514,309 A 5,5 0 0 1 1509,314 L 23,314 A 4,4 0 0 1 20,307 L 281,8 A 5,5 0 0 1 285,6 Z");pointer-events:none}.device-inner{position:absolute;top:0;left:0;width:1520px;height:320px;background:linear-gradient(180deg,#1c1c1e,#0c0c0d,#050505);clip-path:path("M 285,8 L 1508,8 A 4,4 0 0 1 1512,12 L 1512,308 A 4,4 0 0 1 1508,312 L 25,312 A 3,3 0 0 1 23,307 L 282,9 A 4,4 0 0 1 285,8 Z");pointer-events:none}.device:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);pointer-events:none}.subpanel{position:absolute;left:340px;right:30px;top:30px;bottom:30px;background:transparent}.key{position:absolute;background:transparent;border:none;color:var(--label-engrave);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:color .1s ease,transform .1s ease;font-family:inherit}.key svg{display:block}.key .engrave-rect{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;box-shadow:inset 0 0 0 3px var(--ral-9007),0 0 0 1px #0006}.key:hover{color:#ffffffb3}.key:active,.key.pressed{transform:translateY(1px);color:#fff}.key:active .engrave-rect,.key.pressed .engrave-rect{box-shadow:inset 0 0 0 1px #ffffff29,0 0 0 1px #0006,inset 0 0 14px #ffffff0d}.key .num-label{font:700 24px Inter,sans-serif;color:var(--label-engrave);letter-spacing:.02em}.keypad{position:absolute;left:0;top:20px;width:400px;height:220px}.keypad .k-power{left:0;top:0;width:80px;height:60px}.keypad .k-drain{left:0;top:160px;width:80px;height:60px}.keypad .k-up{left:240px;top:0;width:80px;height:60px}.keypad .k-left{left:160px;top:80px;width:80px;height:60px}.keypad .k-right{left:320px;top:80px;width:80px;height:60px}.keypad .k-down{left:240px;top:160px;width:80px;height:60px}.progpad{position:absolute;left:1060px;top:20px;width:80px;height:220px}.progpad .pk{position:absolute;width:80px;height:60px;left:0}.progpad .pk-1{top:0}.progpad .pk-2{top:80px}.progpad .pk-3{top:160px}.startbtn{position:absolute;left:830px;top:50px;width:160px;height:160px;background:linear-gradient(180deg,#1d1d1e,#101012);border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px #ffffff1a,inset 0 -2px 4px #00000080,0 2px 6px #0009;transition:transform 80ms ease;z-index:2}.startbtn:active,.startbtn.pressed{transform:translateY(1px)}.startbtn .play-tri{width:0;height:0;border-top:52px solid transparent;border-bottom:52px solid transparent;border-left:76px solid var(--ral-9007);margin-left:12px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.led-ring{position:absolute;left:800px;top:20px;width:220px;height:220px;border-radius:12px;pointer-events:none;z-index:1;box-shadow:inset 0 0 0 10px var(--gold);transition:box-shadow .12s ease}.oled-wrap{position:absolute;left:440px;top:10px;width:320px;height:240px;border-radius:14px;background:#000;padding:6px;box-shadow:0 0 0 2px var(--ral-9007),inset 0 1px #ffffff0a,inset 0 -1px #0009}.oled{width:100%;height:100%;background:var(--oled-bg);border-radius:8px;overflow:hidden;position:relative}.oled canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.oled:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0 1px,transparent 1px 3px);pointer-events:none;mix-blend-mode:multiply;opacity:.4}.oled:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 90% at 50% 30%,rgba(255,255,255,.04),transparent 70%);pointer-events:none;z-index:1}.controls{background:#18181a;border:1px solid #2a2a2c;border-radius:12px;padding:16px 20px;color:var(--ral-9010);width:100%;max-width:1520px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:18px;-webkit-user-select:text;user-select:text}@media(max-width:1100px){.controls{grid-template-columns:1fr 1fr;gap:12px}}@media(max-width:720px){.controls{grid-template-columns:1fr;gap:10px;padding:12px 14px}}.controls h3{margin:0 0 8px;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8c8a84;font-weight:500}.controls .row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid #2c2c2e;gap:8px}.controls .row:last-child{border-bottom:none}.controls .row .lab{font-family:JetBrains Mono,monospace;font-size:10px;color:#8c8a84}.controls .row .val{font-family:Inter,sans-serif;font-weight:500;color:#f1efe9;font-size:12px;display:inline-flex;align-items:center;gap:6px}.controls .pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#0d0d0e;font-family:JetBrains Mono,monospace;font-size:10px}#ws-status.ws-connected{color:#2bff6a}#ws-status.ws-disconnected,#swap-status.error{color:#ff7070}#swap-status.done{color:#2bff6a}progress{width:80px;height:6px;border:none;background:#0d0d0e;border-radius:3px;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}progress::-webkit-progress-bar{background:#0d0d0e;border-radius:3px}progress::-webkit-progress-value{background:var(--gold);border-radius:3px}progress::-moz-progress-bar{background:var(--gold);border-radius:3px}.buzzer{color:#5a5a5c;transition:color .12s}.buzzer.active{color:var(--gold);text-shadow:0 0 6px rgba(184,152,90,.6)}#firmware-select{background:#0d0d0e;color:#e8e6e0;border:1px solid #2a2a2c;border-radius:4px;font:500 11px JetBrains Mono,monospace;padding:3px 6px;cursor:pointer}#firmware-select:disabled{opacity:.5;cursor:wait}.firmware-upload{margin-top:8px;display:flex;flex-direction:column;gap:4px}.firmware-upload.dragover .upload-btn{border-color:var(--gold);color:var(--gold)}.upload-btn{display:inline-block;background:#0d0d0e;border:1px solid #2a2a2c;color:#e8e6e0;padding:6px 10px;border-radius:6px;font:500 11px/1 JetBrains Mono,monospace;letter-spacing:.04em;cursor:pointer;text-align:center}.upload-btn:hover{background:#1a1a1c}.upload-status{font-family:JetBrains Mono,monospace;font-size:10px;color:#8c8a84}.upload-status.error{color:#ff7070}.upload-status.ok{color:#2bff6a}#log{list-style:none;margin:0;padding:0;max-height:180px;overflow-y:auto;font-family:JetBrains Mono,monospace;font-size:10px;line-height:1.4;color:#c4c2bc}#log li{padding:2px 0;border-bottom:1px solid #1f1f21;word-break:break-word}#log li.warn{color:#ffd070}#log li.error{color:#ff7070}#uart{margin:0;padding:8px;background:#0a0a0b;border:1px solid #1f1f21;border-radius:6px;color:#c4c2bc;font:400 10px/1.4 JetBrains Mono,monospace;max-height:180px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;-webkit-user-select:text;user-select:text}.controls p.hint{margin:6px 0 0;color:#6c6a64;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase}.presence-banner{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;background:linear-gradient(180deg,#6a4d10,#5a4210);color:#fce8b6;font-family:Inter,sans-serif;font-size:13px;font-weight:500;letter-spacing:.02em;border-bottom:1px solid #8a6a1a;box-shadow:0 2px 8px #0006;-webkit-user-select:text;user-select:text}.presence-banner[hidden]{display:none}.presence-icon{font-size:16px}