*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050b1c;color:#dff9ff;font-family:Arial,sans-serif}canvas{display:block;width:100%;height:100%;touch-action:none}#camera{position:fixed;width:1px;height:1px;left:-100px;opacity:0;pointer-events:none}.signature,footer{position:absolute;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:16px}.signature{top:6%;font-size:10px;letter-spacing:.23em;color:#83a4b5}.signature span:first-child{font-weight:bold;color:#d7edef}main{position:absolute;inset:15% 8%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;transition:opacity 2s;pointer-events:none}main.active{opacity:0}main.active button{pointer-events:none}.seal{font-size:27px;color:#94d9e4;margin:8px}h1{font-size:clamp(52px,10vw,130px);font-weight:400;letter-spacing:.22em;margin:0 0 20px;padding-left:.22em}main>p{font-size:clamp(13px,2vw,20px);font-weight:300;letter-spacing:.03em;margin:0}.invitation{font-size:10px;letter-spacing:.3em;color:#9ac3cf;margin:32px 0}#permission{max-width:460px}#permission p{font-size:13px;color:#9cb8c8}button{pointer-events:auto;cursor:pointer;color:#dff9ff;background:#13273b;border:1px solid #496c7c;border-radius:30px;font:inherit;padding:12px 22px;letter-spacing:.03em}button:hover,button:focus-visible{background:#23506a;outline:1px solid #bdffff;outline-offset:4px}.secondary{border-color:transparent;background:transparent;display:block;margin:10px auto}small{display:block;max-width:360px;margin:18px auto;color:#8ba5b6;font-size:10px;line-height:1.6}footer{bottom:5%;font-size:9px;letter-spacing:.18em;color:#8ba5b6}footer #reset{border:0;background:transparent;padding:5px;font-size:23px}#source{margin-left:auto;font-size:10px;padding:8px 12px}#notice{position:absolute;bottom:12%;width:80%;left:10%;text-align:center;font-size:12px;color:#dff9ff}#modes{position:absolute;right:5%;top:13%;display:flex;gap:6px}#modes[hidden],[hidden]{display:none!important}#modes button{font-size:10px;padding:8px 12px;background:#091424b8}#modes button[aria-pressed=true]{border-color:#a0ebee}@media(max-height:550px){main{inset:8%}h1{font-size:55px;margin:0 0 10px}.invitation{margin:16px 0}small{margin:8px auto}.signature{top:4%}#permission p{margin:5px}button{padding:8px 16px}}@media(max-width:600px){.signature span:last-child{font-size:8px;letter-spacing:.12em}footer{font-size:8px;letter-spacing:.08em}h1{font-size:clamp(38px,11vw,65px)}#modes{top:10%;gap:3px}#modes button{padding:7px}main{inset:17% 5%}}@media(prefers-reduced-motion:reduce){main{transition:opacity .3s}}
footer{flex-wrap:wrap}#listen{font-size:10px;padding:8px 12px;background:#0b1b2b;white-space:nowrap}#listen[aria-pressed=true]{border-color:#a0ebdf;color:#afffe6}#listen:disabled{opacity:.65;cursor:wait}@media(max-width:600px){footer{gap:8px}#state-label{flex-basis:100%;padding-bottom:3px}#source{margin-left:0}#listen{margin-left:auto;font-size:9px}}