:root{--bg: #000000;--fg: #e8e8e8;--dim: #6a6a6a;--accent: #3dff9a;--warn: #ffb020;--danger: #ff4d4d;--line: #1a1a1a;--panel: #050505;--mono: "IBM Plex Mono", "JetBrains Mono", "Cascadia Code", "Consolas", monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:13px;letter-spacing:.02em}body{background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:24px 24px}.shell{display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"top top" "metrics stage" "status status";min-height:100vh;min-height:100dvh}.top{grid-area:top;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:100}.brand{font-size:1.15rem;font-weight:700;letter-spacing:.18em}.mode-toggle{display:grid;grid-auto-flow:column;gap:0;border:1px solid var(--line);z-index:101;position:relative}.tab{background:transparent;color:var(--dim);border:0;padding:.65rem 1.25rem;min-height:44px;min-width:64px;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(61,255,154,.25);position:relative;z-index:102}.tab.active{background:#111;color:var(--accent)}.install{background:transparent;color:var(--accent);border:1px solid var(--accent);padding:.4rem .8rem;font:inherit;cursor:pointer}.metrics{grid-area:metrics;display:grid;grid-auto-rows:min-content;gap:0;border-right:1px solid var(--line);background:var(--panel);padding:.5rem 0}.metric{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.65rem 1rem;border-bottom:1px solid var(--line)}.metric .k{color:var(--dim);font-size:.7rem;letter-spacing:.12em}.metric .v{font-size:1rem;color:var(--fg);word-break:break-all}.pair-metric .pair-value{font-size:1.6rem;letter-spacing:.28em;color:var(--accent)}.v.lock-on{color:var(--accent)}.v.lock-off{color:var(--danger)}.stage{grid-area:stage;display:grid;place-items:stretch;min-width:0;background:#000}.panel{display:grid;grid-template-rows:auto 1fr;min-height:0}.panel.hidden,.hidden,.hidden-canvas{display:none!important}.controls{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--line);background:var(--panel)}.controls button,.file-btn,.download{background:#0a0a0a;color:var(--fg);border:1px solid #2a2a2a;padding:.45rem .75rem;font:inherit;cursor:pointer;text-decoration:none}.controls button:hover:not(:disabled),.file-btn:hover,.download:hover{border-color:var(--accent);color:var(--accent)}.controls button:disabled{opacity:.35;cursor:not-allowed}.file-meta{color:var(--dim);margin-left:auto}.pair-entry{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #2a2a2a;padding:.25rem .5rem;background:#0a0a0a}.pair-entry span{color:var(--dim);font-size:.7rem;letter-spacing:.12em}.pair-entry input{width:6.5rem;background:transparent;border:0;color:var(--accent);font:inherit;font-size:1.1rem;letter-spacing:.28em;text-transform:uppercase;outline:none}.tx-stage{display:grid;grid-template-rows:auto 1fr;place-items:center;gap:1rem;padding:1rem;min-height:0}.pair-banner{display:grid;justify-items:center;gap:.25rem;padding:.75rem 1.25rem;border:1px solid #222;background:#050505;min-width:min(90vw,28rem)}.pair-banner.live{border-color:var(--accent)}.pair-banner.mismatch{border-color:var(--danger)}.pair-banner.idle{border-color:#222}.pair-label{color:var(--dim);font-size:.7rem;letter-spacing:.2em}.pair-digits{font-size:clamp(2rem,8vw,3.4rem);font-weight:700;letter-spacing:.35em;color:var(--accent);padding-left:.35em}.pair-banner.mismatch .pair-digits{color:var(--danger)}.pair-hint{color:var(--dim);font-size:.7rem;text-align:center}#qr-canvas{width:min(72vmin,100%);height:auto;margin:0 auto;image-rendering:pixelated;background:#fff;padding:0;display:block}.tx-qr-wrap{display:grid;justify-items:center;gap:.5rem;padding:.75rem;border:3px dashed #333;background:#050505}.tx-qr-wrap.ready{border-color:var(--warn)}.tx-qr-wrap.streaming{border-color:var(--accent);border-style:solid;animation:tx-pulse 1.2s ease-in-out infinite}.tx-aim-label{font-size:.75rem;letter-spacing:.14em;color:var(--accent);text-align:center;max-width:28rem}.tx-qr-wrap.idle .tx-aim-label{color:var(--dim)}@keyframes tx-pulse{0%,to{box-shadow:0 0 #3dff9a59}50%{box-shadow:0 0 0 10px #3dff9a00}}.viewfinder{position:relative;display:grid;place-items:center;overflow:hidden;background:#000;min-height:50vh}#cam{width:100%;height:100%;max-height:calc(100dvh - 11rem);object-fit:cover;transform:none}.align-frame{position:absolute;width:min(72vmin,80%);aspect-ratio:1;box-shadow:0 0 0 9999px #00000073;pointer-events:none;border:2px solid transparent;z-index:1}.aim-hud{position:absolute;top:.85rem;z-index:3;display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .9rem;border:2px solid currentColor;background:#000000c7;font-size:.85rem;letter-spacing:.16em;font-weight:700;pointer-events:none}.aim-dot{width:.7rem;height:.7rem;border-radius:50%;background:currentColor}.aim-text{white-space:nowrap}.viewfinder.aim-seeking{--aim: var(--warn);color:var(--warn)}.viewfinder.aim-signal{--aim: #ffe566;color:#ffe566}.viewfinder.aim-locked,.viewfinder.aim-receiving{--aim: var(--accent);color:var(--accent)}.viewfinder.aim-mismatch{--aim: var(--danger);color:var(--danger)}.viewfinder.aim-done{--aim: var(--accent);color:var(--accent)}.viewfinder.aim-idle{--aim: #555;color:#888}.viewfinder.aim-seeking .aim-dot,.viewfinder.aim-signal .aim-dot{animation:blink .7s step-end infinite}.viewfinder.aim-receiving .aim-dot{animation:blink .35s step-end infinite}@keyframes blink{50%{opacity:.15}}.viewfinder.aim-seeking .align-frame{border-color:#ffb0208c;animation:frame-pulse-seek 1s ease-in-out infinite}.viewfinder.aim-signal .align-frame{border-color:#ffe566d9}.viewfinder.aim-locked .align-frame,.viewfinder.aim-receiving .align-frame,.viewfinder.aim-done .align-frame{border-color:#3dff9af2;box-shadow:0 0 0 9999px #0006,0 0 24px #3dff9a73}.viewfinder.aim-mismatch .align-frame{border-color:#ff4d4df2;animation:frame-pulse-bad .45s ease-in-out infinite}@keyframes frame-pulse-seek{0%,to{transform:scale(1)}50%{transform:scale(1.015)}}@keyframes frame-pulse-bad{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.corner{position:absolute;width:1.75rem;height:1.75rem;border-color:var(--aim, var(--accent));border-style:solid;border-width:0}.corner.tl{top:-2px;left:-2px;border-top-width:5px;border-left-width:5px}.corner.tr{top:-2px;right:-2px;border-top-width:5px;border-right-width:5px}.corner.bl{bottom:-2px;left:-2px;border-bottom-width:5px;border-left-width:5px}.corner.br{bottom:-2px;right:-2px;border-bottom-width:5px;border-right-width:5px}.align-crosshair{position:absolute;inset:50%;width:1.25rem;height:1.25rem;margin:-.625rem;border:1px solid rgba(255,255,255,.35);border-radius:50%;opacity:.7}.viewfinder.aim-locked .align-crosshair,.viewfinder.aim-receiving .align-crosshair,.viewfinder.aim-done .align-crosshair{border-color:#3dff9ab3}.align-crosshair:before,.align-crosshair:after{content:"";position:absolute;background:#ffffff59}.viewfinder.aim-locked .align-crosshair:before,.viewfinder.aim-locked .align-crosshair:after,.viewfinder.aim-receiving .align-crosshair:before,.viewfinder.aim-receiving .align-crosshair:after,.viewfinder.aim-done .align-crosshair:before,.viewfinder.aim-done .align-crosshair:after{background:#3dff9ab3}.align-crosshair:before{left:50%;top:-.55rem;bottom:-.55rem;width:1px;transform:translate(-50%)}.align-crosshair:after{top:50%;left:-.55rem;right:-.55rem;height:1px;transform:translateY(-50%)}.align-progress{position:absolute;left:8%;right:8%;bottom:.65rem;height:.45rem;background:#ffffff1f;overflow:hidden}.align-progress i{display:block;height:100%;width:0%;background:var(--aim, var(--accent));transition:width .15s linear}.pair-banner.rx{position:absolute;bottom:1rem;z-index:2;background:#000000d1}.status-bar{grid-area:status;padding:.5rem 1rem;border-top:1px solid var(--line);color:var(--dim);background:var(--panel);font-size:.75rem}@media(max-width:800px){.shell{grid-template-columns:1fr;grid-template-areas:"top" "metrics" "stage" "status"}.metrics{grid-auto-flow:column;grid-auto-columns:minmax(140px,1fr);overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.metric{border-bottom:0;border-right:1px solid var(--line);min-width:140px}.top{grid-template-columns:1fr;justify-items:start}}