:root{--bg:#0f0f14;--surface:#17171f;--surface-2:#1f1f29;--text:#f4f4f8;--text-muted:#a3a3b7;--border:#26262f;--accent:#8e7df8;--accent-contrast:#16102b;--accent-wash:#8e7df81f;--success:#46d393;--warning:#f0b429;--danger:#f87171;--radius-card:16px;--radius-tile:12px}@media (prefers-color-scheme:light){:root{--bg:#f6f6fa;--surface:#fff;--surface-2:#f0eff6;--text:#1c1b26;--text-muted:#5c5b6e;--border:#e5e4ee;--accent:#5f4bd8;--accent-contrast:#fff;--accent-wash:#5f4bd81a}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.shell{min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;gap:16px;max-width:430px;margin:0 auto;display:flex}.header{align-items:center;gap:10px;padding-top:8px;display:flex}.logo{background:var(--accent-wash);width:34px;height:34px;color:var(--accent);border-radius:12px;justify-content:center;align-items:center;display:flex}.title{margin:0;font-size:17px;font-weight:600}.banner{border-radius:var(--radius-tile);align-items:center;gap:8px;padding:10px 12px;font-size:13px;font-weight:500;display:flex}.banner.waiting{background:var(--surface-2);color:var(--text-muted)}.banner.connected{color:var(--success);background:#46d3931f}.banner.error{color:var(--danger);background:#f871711f}.dot{background:currentColor;border-radius:999px;flex-shrink:0;width:8px;height:8px}.preview-card{border-radius:var(--radius-card);background:var(--surface);border:1px solid var(--border);aspect-ratio:3/4;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.preview-card video{object-fit:cover;width:100%;height:100%;display:block}.preview-card video.mirrored{transform:scaleX(-1)}.preview-empty{color:var(--text-muted);text-align:center;justify-content:center;align-items:center;padding:0 24px;font-size:14px;line-height:1.5;display:flex;position:absolute;inset:0}.big-button{border-radius:var(--radius-card);background:var(--accent);width:100%;min-height:60px;color:var(--accent-contrast);cursor:pointer;border:none;justify-content:center;align-items:center;gap:10px;font-size:17px;font-weight:600;transition:transform .15s;display:flex}.big-button:active{transform:scale(.98)}.big-button:disabled{opacity:.6}.controls{gap:8px;display:flex}.control{border-radius:var(--radius-tile);border:1px solid var(--border);background:var(--surface);min-height:52px;color:var(--text);cursor:pointer;flex:1;font-size:13px;font-weight:600}.control.active{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}.control:disabled{opacity:.5}.ghost-button{border-radius:var(--radius-tile);background:var(--surface-2);min-height:52px;color:var(--danger);cursor:pointer;border:none;font-size:15px;font-weight:600}.code-row{gap:8px;display:flex}.code-input{border-radius:var(--radius-tile);border:1px solid var(--border);background:var(--surface);min-height:56px;color:var(--text);letter-spacing:.35em;text-align:center;text-transform:uppercase;flex:1;font-size:22px;font-weight:600}.code-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.hint{color:var(--text-muted);margin:0;font-size:13px;line-height:1.55}.hint strong{color:var(--text)}.help{border:1px solid var(--border);border-radius:var(--radius-tile);color:var(--text-muted);padding:12px 14px;font-size:13px;line-height:1.6}.help strong{color:var(--text)}.spacer{flex:1}.footer-note{text-align:center;color:var(--text-muted);font-size:12px}:root{--motion-instant:.1s;--motion-fast:.15s;--motion-base:.22s;--motion-slow:.35s;--motion-hero:.6s;--ease-standard:cubic-bezier(.2, 0, 0, 1);--ease-decelerate:cubic-bezier(.05, .7, .1, 1);--ease-accelerate:cubic-bezier(.3, 0, .8, .15)}:root[data-motion=reduced] *,:root[data-motion=off] *{transition-property:opacity,background-color,color,border-color!important;transition-duration:80ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important}:root[data-motion=off] *{transition-duration:0s!important}@keyframes vc-fade-in{0%{opacity:0;transform:translateY(4px)}}@keyframes vc-appear{0%{opacity:.3;transform:scale(.985)}}@keyframes vc-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}@keyframes vc-breathe{0%,to{opacity:1}50%{opacity:.55}}.vc-fade-in{animation:vc-fade-in .22s var(--ease-decelerate) both}.vc-appear{animation:vc-appear .4s var(--ease-decelerate) both}.vc-shake{animation:vc-shake .12s var(--ease-standard) 1}.vc-breathe{animation:3s ease-in-out infinite vc-breathe}