@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color:#18201e;background:#f4f1e9;font-family:"Space Grotesk",sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 15%,#ffd8a8 0,transparent 29rem),radial-gradient(circle at 85% 85%,#b6e9d0 0,transparent 30rem),#f4f1e9}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:999px;padding:.7rem 1.05rem;background:#18201e;color:#fffdf7;font-weight:600;transition:transform .16s ease,opacity .16s ease}button:hover{transform:translateY(-2px)}button:disabled{opacity:.5;cursor:wait}.panel{max-width:620px;margin:16vh auto;padding:2rem}.eyebrow,header,footer,.error{font-family:"DM Mono",monospace;font-size:.78rem;letter-spacing:.08em}.eyebrow{color:#5c625e}h1{margin:.35rem 0 1rem;font-size:clamp(2.8rem,9vw,5.5rem);line-height:.9;letter-spacing:-.07em}.panel p:not(.eyebrow):not(.error){max-width:420px;font-size:1.15rem;line-height:1.5}form{display:flex;gap:.5rem;margin-top:2rem;align-items:center;flex-wrap:wrap}.subdomain{min-width:240px;flex:1;display:flex;align-items:center;border-bottom:2px solid #18201e}.subdomain input{min-width:0;flex:1;padding:.67rem .2rem;background:transparent;border:0;outline:0}.subdomain span{padding:.67rem .2rem;color:#5c625e;font: .8rem "DM Mono",monospace}.error{color:#9b2b20;min-height:1.3rem}#room{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}header,footer{display:flex;align-items:center;gap:1rem;padding:1rem 1.35rem}header{border-bottom:1px solid #18201e22}header #room-label{flex:1;color:#5c625e}.brand{color:inherit;font-weight:700;text-decoration:none;letter-spacing:-.06em;font-size:1.35rem}#copy-link{background:transparent;color:#18201e;border:1px solid #18201e55;padding:.45rem .75rem}#stage{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:clamp(.8rem,2vw,1.5rem);padding:clamp(1rem,3vw,3rem)}.bubble{position:relative;width:clamp(120px,18vw,210px);flex:0 0 clamp(120px,18vw,210px);aspect-ratio:1;overflow:hidden;border-radius:50%;background:#d0cec7;box-shadow:0 14px 30px #18201e22;isolation:isolate}.bubble video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.spectating .bubble.remote video{filter:blur(12px) saturate(.85) opacity(.62);transform:scale(1.12) scaleX(-1)}.bubble span{position:absolute;z-index:2;left:50%;bottom:.8rem;transform:translateX(-50%);border-radius:20px;padding:.25rem .55rem;color:#fff;background:#0008;font:.68rem "DM Mono",monospace}#empty[hidden]{display:none}#empty{align-self:center;justify-self:center;display:grid;gap:.3rem;text-align:center;color:#5c625e}#empty strong{color:#18201e;font-size:1.3rem}footer{justify-content:center;border-top:1px solid #18201e22}#visitor-count{color:#5c625e}#status{color:#5c625e}@media(max-width:550px){.panel{margin:8vh auto}.bubble{width:clamp(110px,39vw,170px);flex-basis:clamp(110px,39vw,170px)}}