: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}