:root{color-scheme:dark;--ease:cubic-bezier(.22,1,.36,1);font-family:system-ui,sans-serif;background:#08090b;color:#ececf3}*{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden}#stars{position:fixed;inset:0;pointer-events:none;width:100%;height:100%}header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 20px) 24px 0}header>span{font-size:19px;letter-spacing:.03em}button,input{font:inherit;color:inherit}button{position:relative;border:1px solid #ffffff16;background:#ffffff03;border-radius:999px;padding:12px 20px;min-height:44px;touch-action:manipulation;cursor:pointer}button[aria-pressed=true]{color:#b4a4ff}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid #a9a0ee;outline-offset:4px}main{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100dvh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:20px 24px;text-align:center}#state{font-size:13px;color:#9397a7;min-height:20px}.stage{width:min(80vw,380px);height:min(80vw,380px);position:relative}#metal{width:100%;height:100%}#fallback{position:absolute;inset:15%;width:70%;height:70%;opacity:.85}#user{color:#999cb2;font-size:15px;min-height:22px;max-width:100%;margin:12px 0}#caption{font-size:clamp(21px,5.7vw,30px);line-height:1.55;color:#beb1ff;margin:0;max-height:20dvh;overflow:auto;overflow-wrap:anywhere}.call__foot{position:fixed;z-index:3;bottom:calc(env(safe-area-inset-bottom) + 24px);left:50%;transform:translateX(-50%);display:flex;gap:12px;padding:12px;border-radius:999px;border:1px solid #ffffff12}.call__foot button{display:grid;place-items:center;width:54px;height:54px;padding:16px;border-radius:50%}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}dialog{color:inherit;position:fixed;width:min(90vw,420px);padding:28px;border-radius:32px;background:#0e1017ee;border:1px solid #ffffff22;box-shadow:inset 0 1px 4px #ffffff26}dialog::backdrop{background:#08090b35;backdrop-filter:blur(8px)}body:has(dialog[open])>header,body:has(dialog[open])>main,body:has(dialog[open])>nav{filter:blur(8px)}dialog h2{font-size:21px;margin:0 0 14px}dialog p{font-size:14px;line-height:1.7;color:#a3a6b6}input{width:100%;padding:14px 18px;border:1px solid #ffffff17;border-radius:999px;background:#ffffff04}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}#pairError{color:#d8b2c8;min-height:22px}#preview{position:fixed;top:90px;right:20px;width:100px;height:145px;object-fit:cover;border-radius:20px;z-index:4}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
html{overflow-x:clip}
.native>header,.native>.call__foot,.native main>p,.native>dialog{display:none!important}.native main{position:fixed;inset:0;height:100%;padding:0}.native .stage{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(84vw,420px);height:min(84vw,420px)}.video-fullscreen #preview{display:block;position:fixed;inset:0;width:100vw;height:100dvh;object-fit:cover;border-radius:0;z-index:0}.video-fullscreen .stage{visibility:hidden}.video-fullscreen main>p{position:relative;z-index:3}.video-fullscreen header,.video-fullscreen .call__foot{z-index:5}
/* Portrait uses only the glyph; landscape has room for the complete wordmark. */
.native .stage{width:min(84vw,440px);height:min(84vw,440px);transition:width .42s var(--ease),height .42s var(--ease),opacity .35s var(--ease)}
@media(orientation:landscape){.native .stage{width:min(88vw,1120px);height:clamp(170px,28vw,320px);top:43%}}
.video-fullscreen .stage{visibility:visible;opacity:0;pointer-events:none}
#preview{will-change:transform}#caption,#user{will-change:transform}
@font-face{font-family:JavierBrandPixel;src:url('assets/fonts/Monocraft.ttf') format('truetype');font-display:swap}
@font-face{font-family:JavierCaptionPixelSC;src:url('assets/fonts/FusionPixelSC.woff2') format('woff2');font-display:swap}
#mobileCaptions{position:relative;z-index:5;width:min(90%,1000px);font-family:JavierBrandPixel,JavierCaptionPixelSC,sans-serif;will-change:transform}
.native #mobileCaptions{position:absolute;left:5%;width:90%;bottom:calc(110px + env(safe-area-inset-bottom));text-align:center}
#mobileCaptions #caption{font-size:clamp(20px,3vw,32px);line-height:1.6;max-height:20dvh}
#mobileCaptions #user{font-size:clamp(14px,2vw,20px)}
.native #mobileCaptions #state{font-family:system-ui,sans-serif;font-size:12px}
.video-fullscreen #mobileCaptions{z-index:6;text-shadow:0 1px 6px #000}
body.captions-hidden #mobileCaptions #user,body.captions-hidden #mobileCaptions #caption{opacity:0;pointer-events:none}
/* Keep the drawing buffer larger than either composition while dragging.
   Rotation changes the camera/layout, never an animated canvas crop. */
.native .stage{inset:0;left:0;top:0;width:100%;height:100%;transform:none;transition:opacity .35s var(--ease)}
.native #metal{position:absolute;inset:0;width:100%;height:100%}
.native #fallback{inset:30%;width:40%;height:40%;object-fit:contain}
@media(orientation:landscape){.native .stage{inset:0;width:100%;height:100%;top:0}}