:root{--bg:#1a1626;--ink:#f4efe6;--ink-dim:#f4efe68c;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}html,body{overscroll-behavior:none;background:var(--bg);height:100dvh;color:var(--ink);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;font:16px/1.4 -apple-system,PingFang SC,Hiragino Sans GB,Noto Sans CJK SC,system-ui,sans-serif;overflow:hidden}#room{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}#hud{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);pointer-events:none;position:fixed;inset:0}#version{right:calc(var(--safe-right) + 12px);bottom:calc(var(--safe-bottom) + 10px);color:var(--ink-dim);font-variant-numeric:tabular-nums;font-size:12px;position:absolute}#conn{right:calc(var(--safe-right) + 12px);bottom:calc(var(--safe-bottom) + 30px);background:var(--ink-dim);border-radius:50%;width:8px;height:8px;transition:background .3s;position:absolute}#conn[data-status=live]{background:#7bd88f}#conn[data-status=connecting]{background:#f0b46a}#conn[data-status=offline]{background:var(--ink-dim)}#hud-relink{right:calc(var(--safe-right) + 12px);bottom:calc(var(--safe-bottom) + 46px);color:var(--ink-dim);pointer-events:auto;background:#1a1626b8;border:1px solid #f4efe640;border-radius:12px;padding:7px 12px;font-size:12px;position:absolute}#hud-relink[hidden]{display:none}#toast{left:50%;bottom:calc(var(--safe-bottom) + 48px);max-width:min(320px,80vw);color:var(--ink);text-align:center;background:#1a1626db;border-radius:14px;padding:10px 14px;font-size:14px;transition:opacity .25s;position:absolute;transform:translate(-50%)}#toast[hidden]{display:none}#overlay{text-align:center;background:#1a1626eb;place-items:center;padding:24px;display:grid;position:fixed;inset:0}#overlay[hidden]{display:none}button{touch-action:manipulation;font:inherit}.screen{z-index:2;padding:calc(var(--safe-top) + 32px) 24px calc(var(--safe-bottom) + 24px);background:var(--bg);flex-direction:column;gap:16px;display:flex;position:fixed;inset:0;overflow-y:auto}.screen[hidden]{display:none}.screen h1{margin:0;font-size:28px}.screen .tagline{color:var(--ink-dim);margin:0}#pair-choice,#pair-show{flex-direction:column;gap:12px;display:flex}#pair-choice[hidden],#pair-show[hidden]{display:none}#pair-enter-label{color:var(--ink-dim);flex-direction:column;gap:6px;display:flex}#pair-input{letter-spacing:.25em;text-transform:uppercase;color:var(--ink);-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;background:#f4efe60f;border:1px solid #f4efe640;border-radius:12px;padding:12px;font:24px/1.2 ui-monospace,Menlo,monospace}#pair-was-paired{color:var(--ink-dim);margin:0;font-size:14px}#pair-was-paired[hidden]{display:none}#pair-code{letter-spacing:.3em;margin:0;font:40px/1.1 ui-monospace,Menlo,monospace}.screen button{color:#1a1626;background:#f0b46a;border:0;border-radius:14px;padding:14px 18px;font-weight:600}.screen button.secondary{color:var(--ink);background:0 0;border:1px solid #f4efe659}.screen button[disabled]{opacity:.5}.screen button[hidden]{display:none}.screen .row{gap:12px;display:flex}#pair-error{color:#ff9c9c;margin:0}#pair-waiting{color:var(--ink-dim)}