:root{--bg: #07080d;--panel: #0d1118;--panel-2: #121826;--line: #1e2a3d;--cyan: #00f0ff;--magenta: #ff2bd6;--yellow: #ffdc28;--ok: #28ff8c;--text: #e8f1ff;--muted: #7d8da6;--danger: #ff4d6d;--glow: 0 0 18px rgba(0, 240, 255, .35)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:radial-gradient(1200px 500px at 10% -10%,rgba(0,240,255,.08),transparent 50%),radial-gradient(900px 400px at 100% 0%,rgba(255,43,214,.08),transparent 45%),var(--bg);color:var(--text);font-family:Share Tech Mono,ui-monospace,monospace}h1,h2,h3,.brand{font-family:Orbitron,sans-serif;letter-spacing:.08em}button,input,select{font-family:inherit}.app{max-width:1280px;margin:0 auto;padding:20px 20px 48px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border:1px solid var(--line);background:#0d1118d9;box-shadow:var(--glow);margin-bottom:18px}.brand{color:var(--cyan);font-size:20px;margin:0}.brand span{color:var(--magenta)}.meta{color:var(--muted);font-size:12px;display:flex;gap:14px;flex-wrap:wrap}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}.dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}.dot.off{background:var(--danger)}.btn{background:transparent;color:var(--cyan);border:1px solid var(--cyan);padding:8px 14px;cursor:pointer;text-transform:uppercase;letter-spacing:.08em}.btn:hover{background:#00f0ff1f}.btn.primary{background:var(--cyan);color:#041016;font-weight:700}.btn.mag{border-color:var(--magenta);color:var(--magenta)}.btn.mag:hover{background:#ff2bd61f}.btn:disabled{opacity:.4;cursor:not-allowed}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.tab{border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:8px 12px;cursor:pointer}.tab.active{color:var(--cyan);border-color:var(--cyan);box-shadow:var(--glow)}.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:960px){.grid-2,.grid-3{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--line);padding:16px}.panel h2{margin:0 0 12px;font-size:14px;color:var(--magenta)}.keygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.keycap{position:relative;min-height:110px;border:1px solid var(--line);background:linear-gradient(180deg,#151b28,#0c1018);padding:10px;cursor:pointer;overflow:hidden}.keycap.selected{border-color:var(--cyan);box-shadow:var(--glow)}.keycap.cal-wait{border-color:var(--yellow);box-shadow:0 0 16px #ffdc2859}.keycap.cal-done{border-color:var(--ok)}.keyname{color:var(--cyan);font-family:Orbitron,sans-serif;font-size:13px}.keymeta{color:var(--muted);font-size:11px;margin-top:4px}.bar{position:absolute;left:0;bottom:0;height:6px;width:100%;background:#1a2230}.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--magenta),var(--cyan));transition:width 40ms linear}.mm{position:absolute;right:8px;top:8px;color:var(--text);font-size:12px}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}label{color:var(--muted);font-size:12px}input[type=range]{width:180px;accent-color:var(--cyan)}input[type=text],input[type=color],select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);padding:6px 8px}.help{color:var(--muted);font-size:12px;line-height:1.5}.badge{padding:2px 8px;border:1px solid var(--yellow);color:var(--yellow);font-size:11px}.ledrow{display:flex;gap:8px;flex-wrap:wrap}.led{width:36px;height:36px;border:1px solid var(--line);cursor:pointer}.led.on{outline:1px solid var(--cyan)}.oled-wrap{display:flex;gap:16px;flex-wrap:wrap}canvas.oled{width:288px;height:192px;image-rendering:pixelated;border:1px solid var(--cyan);background:#000}.toast{color:var(--ok);font-size:12px;min-height:16px}.err{color:var(--danger)}