:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#d4d4d8;font-synthesis:none;--accent:#a1a1aa;--border:#28282d;background:#080809;font-family:system-ui,sans-serif;font-weight:400}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{width:100%;max-width:660px;padding:max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));margin:auto}main[data-active=true]{flex-direction:column;height:100svh;min-height:540px;display:flex}main[data-active=true] header{display:none}header{justify-content:space-between;align-items:center;margin-bottom:48px;display:flex}.brand{letter-spacing:-1.5px;color:inherit;font-size:26px;font-weight:600;text-decoration:none}.brand span{color:var(--accent)}.eyebrow{color:var(--accent);font-size:12px}h1{letter-spacing:-1.5px;margin:0 0 12px;font-size:clamp(30px,7vw,40px);font-weight:500;line-height:1.2}.intro{color:var(--accent);margin:0 0 28px;font-size:14px;line-height:1.6}button,input{font:inherit}button{border:1px solid var(--border);cursor:pointer;min-height:48px;color:inherit;border-radius:8px;transition:background .12s}button:focus-visible,input:focus-visible,.upload:focus-within{outline-offset:3px;outline:2px solid #a1a1aa}button:disabled{cursor:default;opacity:.4}.primary{background:#202024;width:100%;min-height:52px;padding:0 20px;font-weight:500}.primary:hover{background:#2b2b30}form{border-top:1px solid var(--border);margin-top:34px;padding-top:28px}label{font-size:13px}.join-row{gap:12px;margin-top:12px;display:flex}input{border:1px solid var(--border);min-width:0;color:inherit;background:#111113;border-radius:8px;padding:14px}input::placeholder{color:#777780}#pair-code{letter-spacing:10px;width:100%;font-size:20px}.secondary{background:#17171a;padding:0 22px;font-weight:500}.secondary:hover{background:#242428}.muted{color:var(--accent);font-size:13px;line-height:1.6}#pairing{margin:0 0 16px}#pairing-code{letter-spacing:9px;margin:12px 0;font-size:clamp(38px,10vw,60px);font-weight:500}.tools{flex-shrink:0;align-items:center;gap:10px;display:flex}.upload{border-bottom:1px solid var(--border);min-width:0;min-height:48px;color:var(--accent);cursor:pointer;flex:1;justify-content:space-between;align-items:center;gap:15px;font-size:13px;display:flex}.upload span:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.upload span:last-child{color:var(--accent);font-size:22px}.file-input{opacity:0;width:1px;height:1px;position:absolute}.status-line{min-height:44px;color:var(--accent);flex-shrink:0;align-items:center;gap:9px;display:flex}#status-dot{background:#52525b;border-radius:50%;flex:none;width:6px;height:6px}#status-dot[data-ready=true]{background:var(--accent)}#status{margin:0;font-size:12px;line-height:1.5}#code-stage{background:#000;flex:1;place-items:center;min-height:180px;margin-bottom:16px;display:grid;position:relative;overflow:hidden}#hidden-code{text-align:center;color:#808089;flex-direction:column;align-items:center;font-size:12px;line-height:1.6;display:flex}#image-slot{place-items:center;padding:8px;display:grid;position:absolute;inset:0}#code-image{object-fit:contain;width:100%;height:100%;min-height:0;display:block}#code-stage:not([data-visible=true]) #code-image,#code-stage[data-visible=true] #hidden-code{visibility:hidden}#hold{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#131315;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:6px;width:100%;min-height:80px;display:flex}#hold[data-held=true]{background:#242428;border-color:#52525b}#hold-label{font-size:16px;font-weight:500}.hold-detail{color:var(--accent);font-size:10px}#error{color:#f3a6a0;padding-top:14px;font-size:13px;line-height:1.5}footer{flex-shrink:0;justify-content:flex-end;align-items:center;margin-top:12px;display:flex}footer button{min-height:44px;color:var(--accent);background:0 0;border-color:#0000;padding:0 12px;font-size:12px}#session{flex-direction:column;flex:1;display:flex}@media (width<=480px){.tools .secondary{padding:0 12px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
