:root{--bg: #090a07;--panel: #12140f;--line: #2a2e22;--key: #1a1d15;--text: #e7ead8;--muted: #7d826c;--phos: #c8f542;--amber: #e8a317;--cyan: #7ee0c8;--unit: 52px;--gap: 5px;--font-ui: "Rajdhani", sans-serif;--font-mono: "Share Tech Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1200px 500px at 10% -10%,#1a2410 0%,transparent 55%),radial-gradient(900px 400px at 100% 0%,#14241f 0%,transparent 50%),var(--bg);color:var(--text);font-family:var(--font-ui)}.grain{pointer-events:none;position:fixed;inset:0;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");z-index:0}body>*:not(.grain){position:relative;z-index:1}.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px 8px}.brand{display:flex;gap:12px;align-items:center}.brand h1{margin:0;font-size:28px;letter-spacing:.18em;font-weight:700}.brand p{margin:0;color:var(--muted);letter-spacing:.12em;font-size:12px}.hud-readout{display:flex;gap:28px;font-family:var(--font-mono)}.hud-readout .k{display:block;color:var(--muted);font-size:11px;letter-spacing:.14em}.hud-readout strong{font-size:18px;color:var(--phos)}.top-actions,.log-actions,.seg{display:flex;gap:8px;align-items:center}button{font-family:var(--font-ui);font-weight:600;letter-spacing:.06em;border:1px solid var(--line);background:#181b13;color:var(--text);border-radius:6px;padding:7px 12px;cursor:pointer}button:hover,button.active{border-color:var(--phos);color:var(--phos)}button.ghost{background:transparent}.lock-badge{font-family:var(--font-mono);font-size:12px;padding:6px 10px;border:1px solid var(--phos);color:var(--bg);background:var(--phos);letter-spacing:.12em}.lock-badge[data-on="0"]{background:transparent;color:var(--amber);border-color:var(--amber)}.leds{display:flex;gap:10px;padding:8px 22px 14px;flex-wrap:wrap}.led{display:flex;align-items:center;gap:8px;min-width:92px;padding:8px 12px;border:1px solid var(--line);background:var(--panel);font-family:var(--font-mono);font-size:13px;letter-spacing:.12em}.led i{width:9px;height:9px;border-radius:50%;background:#2c3024;box-shadow:inset 0 0 0 1px #000}.led.on i{background:var(--phos);box-shadow:0 0 12px var(--phos)}.led.on{border-color:#4a5a22;color:var(--phos)}.panel{margin:0 22px 16px;padding:14px;background:color-mix(in srgb,var(--panel) 92%,black);border:1px solid var(--line);box-shadow:inset 0 0 0 1px #1c2016}.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}.panel-head h2,.stats{margin:0;font-size:13px;letter-spacing:.16em;color:var(--muted)}.panel-head small{color:var(--phos)}.stats{display:flex;gap:16px;font-family:var(--font-mono)}.stats strong{color:var(--text)}#unknown-key{margin:0;color:var(--amber);font-family:var(--font-mono);font-size:12px}.board{display:flex;gap:16px;align-items:flex-end;overflow-x:auto;padding-bottom:6px}.kb-main,.kb-arrows{display:flex;flex-direction:column;gap:var(--gap)}.kb-row{display:flex;gap:var(--gap)}.kb-row.compact{justify-content:center}.key{position:relative;-webkit-user-select:none;user-select:none;width:calc(var(--u) * var(--unit) + (var(--u) - 1) * var(--gap));height:var(--unit);border:0;border-radius:8px;background:linear-gradient(180deg,#26291e,var(--key));box-shadow:0 3px #050605,inset 0 1px #ffffff12;color:var(--text);padding:6px 7px;text-align:left;cursor:default}.key .lab{position:absolute;left:8px;bottom:7px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em}.key .sub{position:absolute;top:6px;left:8px;font-size:10px;color:var(--muted)}.key .combo{position:absolute;top:4px;right:6px;min-width:16px;padding:0 4px;border-radius:8px;background:var(--amber);color:#111;font-size:10px;font-family:var(--font-mono);text-align:center}.key.is-down{transform:translateY(2px);background:var(--phos);color:#111;box-shadow:0 0 18px #c8f54288,0 1px #7aa018}.key.is-down .sub{color:#31400d}.key.is-flash{animation:keyflash .18s ease-out}@keyframes keyflash{0%{box-shadow:0 0 28px #c8f542cc}}.lower{display:grid;grid-template-columns:1.15fr .85fr;gap:0}.mouse-body{display:grid;grid-template-columns:150px 1fr;gap:14px;min-height:280px}.mouse-device{display:flex;align-items:center;gap:6px}.shell{width:92px;height:150px;border:1px solid var(--line);border-radius:46px 46px 38px 38px;display:grid;grid-template-columns:1fr 18px 1fr;grid-template-rows:54px 1fr;overflow:hidden;background:#161910}.shell .btn,.shell .wheel,.shell .mid,.side{display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;color:var(--muted);border:1px solid transparent}.shell .left{grid-column:1;border-right:1px solid var(--line)}.shell .right{grid-column:3;border-left:1px solid var(--line)}.shell .wheel{grid-column:2}.shell .mid{grid-column:1 / 4;border-top:1px solid var(--line)}.side{width:22px;height:42px;border:1px solid var(--line);border-radius:6px;writing-mode:vertical-rl}.shell .btn.is-down,.shell .mid.is-down,.shell .wheel.is-down,.side.is-down{background:var(--phos);color:#111;box-shadow:0 0 16px #c8f54266}.pad{position:relative;overflow:hidden;border:1px solid #2b3820;background:linear-gradient(transparent 23px,#1b2414 24px),linear-gradient(90deg,transparent 23px,#1b2414 24px),#0e120c;background-size:24px 24px;min-height:260px}.pad-hint{margin:12px;color:var(--muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em}.ripple{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border:1px solid var(--phos);border-radius:50%;animation:ripple .85s ease-out forwards;pointer-events:none}.ripple span{position:absolute;left:16px;top:-8px;white-space:nowrap;font-family:var(--font-mono);font-size:11px;color:var(--cyan);background:#0c100acc;padding:2px 6px;border:1px solid #2c4a40}@keyframes ripple{to{transform:scale(3.4);opacity:0}}.log-list{height:280px;overflow:auto;font-family:var(--font-mono);font-size:12px;background:#0b0c09;border:1px solid #1b1e16}.log-row{display:grid;grid-template-columns:88px 1fr 42px 68px;gap:8px;padding:5px 10px;border-bottom:1px solid #171910}.log-kind{color:var(--amber)}.kind-keydown .log-kind,.kind-mousedown .log-kind{color:var(--phos)}.log-mod{color:var(--cyan)}.log-dt{color:var(--muted);text-align:right}@media(max-width:1100px){:root{--unit: 42px}.lower,.mouse-body{grid-template-columns:1fr}.hud-readout{display:none}}@media(max-width:720px){:root{--unit: 32px;--gap: 3px}.top{flex-wrap:wrap}.key .lab{font-size:10px}}