:root{--bg: #07080b;--surface: #0c0e13;--line: #15191f;--text: #d8dde6;--dim: #6b7482;--p1: #ffca3a;--p2: #36c5b0;--core: #ff8a2a}*{box-sizing:border-box;touch-action:manipulation}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:ui-monospace,SF Mono,Menlo,monospace;font-weight:700}#app{height:100%;display:flex;flex-direction:column}button{font:inherit;font-weight:900;color:var(--text);background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:14px 22px;cursor:pointer}button.primary{border-color:var(--p1);color:var(--p1)}button.danger{border-color:#e0483e;color:#e0483e}.env-tag{display:inline-block;vertical-align:middle;font-size:12px;letter-spacing:.18em;color:var(--core);border:1px solid var(--core);border-radius:6px;padding:2px 8px;margin-left:10px}h1 .env-tag{font-size:22px}#version-badge{position:fixed;left:10px;bottom:8px;color:var(--dim);font-size:12px;font-weight:400;letter-spacing:.08em;z-index:20}.host{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.host h1{font-weight:900;letter-spacing:.2em;margin:0}.host .code{font-size:56px;letter-spacing:.3em;color:var(--p1)}.host .url{color:var(--dim)}#board{image-rendering:pixelated;background:var(--surface);border:2px solid var(--line);max-width:92vw}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#07080bd1;font-size:40px;letter-spacing:.1em;z-index:10}.hidden{display:none!important}#diag{position:fixed;top:8px;right:8px;background:#0c0e13eb;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;font-weight:400;line-height:1.5;z-index:20;min-width:240px}#diag b{color:var(--p2)}#diag .bad{color:#e0483e;font-weight:900}.ctrl{flex:1;display:flex;flex-direction:column}.ctrl .bar{display:flex;gap:8px;padding:10px;align-items:center}.ctrl .bar .status{flex:1;color:var(--dim);font-size:13px}.ctrl .bar button{padding:8px 12px;font-size:13px}#pad{position:relative;flex:1;overflow:hidden;background:var(--surface);border-top:2px solid var(--line)}#joy-base{position:absolute;width:128px;height:128px;border:2px solid var(--p1);border-radius:50%;transform:translate(-50%,-50%);opacity:.45;pointer-events:none}#joy-base.live{opacity:.9}#joy-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;background:var(--p1);border-radius:50%;transform:translate(-50%,-50%)}#fire-zone{position:absolute;border:2px solid var(--core);border-radius:18px;display:flex;align-items:center;justify-content:center;color:var(--core);font-size:24px;letter-spacing:.2em;opacity:.85}#fire-zone.pressed{background:#ff8a2a40}.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}input[type=text]{font:inherit;font-size:28px;letter-spacing:.3em;text-transform:uppercase;background:var(--surface);color:var(--text);border:2px solid var(--line);border-radius:10px;padding:10px 14px;width:7ch;text-align:center}