:root{--pink:#f3136d;--bg:#050306;--panel:#100a10;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#fff;font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 73% 42%,#f3136d2c,transparent 28%),radial-gradient(circle at 5% 90%,#a800461f,transparent 32%),linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:auto,auto,72px 72px,72px 72px;mask-image:linear-gradient(#000,transparent 95%)}.topbar{position:relative;z-index:5;max-width:1440px;margin:auto;padding:20px 48px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand strong{font-size:21px;letter-spacing:-1px}.brand em{color:var(--pink);font-style:normal}.logo{width:42px;height:42px;display:grid;place-items:center;border:1px solid #ffffff20;border-radius:14px;color:#ff287d;background:#ffffff0d;box-shadow:inset 0 0 18px #f3136d1f}.logo svg{width:21px}.topbar nav{display:flex;gap:32px;color:#ffffff75;font-size:14px}.topbar nav a:hover{color:#fff}.auth{min-height:43px;padding:0 16px;display:flex;align-items:center;gap:9px;border:1px solid #ffffff20;border-radius:13px;background:#ffffff0e;color:#ffffffe5;font-weight:650}.auth svg{width:17px}.auth.user span{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(145deg,#ff3186,#9d0a48);font-size:12px}.hero{position:relative;z-index:1;min-height:calc(100vh - 84px);max-width:1440px;margin:auto;padding:28px 48px 58px;display:grid;grid-template-columns:1.07fr .93fr;align-items:center;gap:60px}.intro{max-width:700px}.kicker{width:max-content;display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #ff318138;border-radius:999px;background:#f3136d12;color:#ff7cac;font-size:13px;font-weight:700}.kicker svg{width:15px}.intro h1{margin:24px 0 0;font-size:clamp(60px,7.3vw,118px);line-height:.83;letter-spacing:-.075em}.intro h1 span{color:var(--pink);text-shadow:0 0 32px #f3136d66}.lead{max-width:590px;margin:27px 0 0;color:#ffffff94;font-size:18px;line-height:1.65}.features{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}.features b{padding:10px 13px;display:flex;align-items:center;gap:8px;border:1px solid #ffffff12;border-radius:12px;background:#ffffff08;color:#ffffffb8;font-size:13px}.features svg{width:16px;color:#ff2d81}.card{position:relative;max-width:580px;width:100%;margin-left:auto;overflow:hidden;border:1px solid #ffffff1c;border-radius:28px;background:#0e090e;box-shadow:0 50px 120px #0009,0 0 90px #f3136d1a}.cover{position:relative;min-height:310px;background:url('/assets/studio.png') center/cover}.shade{position:absolute;inset:0;background:linear-gradient(180deg,#0000000d,#0502051f 45%,#0e090e 100%)}.live{position:absolute;top:18px;left:18px;padding:7px 10px;display:flex;align-items:center;gap:7px;border:1px solid #ffffff25;border-radius:9px;background:#080408b8;font-size:11px;font-weight:900;letter-spacing:.1em}.live span{width:7px;height:7px;border-radius:50%;background:#ff176f;box-shadow:0 0 12px #ff176f}.cover-copy{position:absolute;left:24px;bottom:27px;display:flex;align-items:center;gap:13px;color:#ffffffb8;font-size:14px}.cover-copy svg{width:28px;color:#ff2a7d}.cover-copy p{margin:0}.panel{padding:24px}.panel-title,.guest-box>p{margin:0;font-weight:750}.muted,.guest-box small{margin:4px 0 0;color:#ffffff6b;font-size:14px}.room-input,.guest-box form{margin-top:16px;padding:7px 7px 7px 15px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:1px solid #ffffff18;border-radius:15px;background:#ffffff0a}.room-input:focus-within,.guest-box form:focus-within{border-color:#ff237c88;box-shadow:0 0 0 4px #f3136d13}.room-input b{color:#ff3c87}.room-input input,.guest-box input{min-width:0;height:42px;border:0;outline:0;background:transparent;color:#fff;font-weight:650}.room-input button,.guest-box button{height:42px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;background:var(--pink);color:#fff;font-weight:750}.room-input button{width:42px}.guest-box form{grid-template-columns:1fr auto}.guest-box button{padding:0 15px}.room-input svg,.guest-box svg{width:18px}.guest-box small{display:block;text-align:center;margin-top:12px}.or{display:flex;align-items:center;gap:12px;margin:18px 0;color:#ffffff47;font-size:12px}.or:before,.or:after{content:"";height:1px;flex:1;background:#ffffff13}.create{width:100%;min-height:50px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #ffffff1f;border-radius:14px;background:#ffffff0e;color:#fff;font-weight:750}.create svg{width:19px}.create svg:last-child{margin-left:auto;color:#ffffff66}.capacity{display:flex;justify-content:center;align-items:center;gap:7px;margin:14px 0 0;color:#ffffff5c;font-size:12px}.capacity svg{width:14px}.security{position:relative;z-index:1;max-width:820px;margin:0 auto 60px;padding:22px;display:flex;align-items:center;gap:16px;border:1px solid #ffffff12;border-radius:18px;background:#ffffff06}.security>svg{color:#ff2b7f}.security strong{font-size:14px}.security p{margin:2px 0 0;color:#ffffff6b;font-size:13px}.room-body{min-height:100vh;background:radial-gradient(circle at 50% 0,#2b0818,transparent 38%),#050306}.room-head{height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff13;background:#080508dd;backdrop-filter:blur(18px)}.room-head>div{display:flex;align-items:center;gap:8px}.room-head small{color:#ffffff52;font-size:10px;letter-spacing:.12em}.room-head>div strong{font-size:13px}.room-head>button{padding:10px 13px;display:flex;align-items:center;gap:8px;border:1px solid #ffffff19;border-radius:11px;background:#ffffff0c;color:#ffffffb8}.room-head>button svg{width:16px}.room-shell{padding:22px 22px 110px}.video-grid{min-height:calc(100vh - 210px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}.video-tile{position:relative;min-height:250px;overflow:hidden;border:1px solid #ffffff17;border-radius:20px;background:linear-gradient(145deg,#171017,#0c080c);box-shadow:0 20px 60px #0006}.video-tile video{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.video-tile .avatar{position:absolute;left:50%;top:50%;width:76px;height:76px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:24px;background:linear-gradient(145deg,#ff267d,#72042f);font-size:27px;font-weight:900}.video-tile>span{position:absolute;left:12px;bottom:12px;z-index:2;padding:6px 9px;border-radius:9px;background:#050305b8;font-size:12px}.connect-status{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#ffffff75}.connect-status svg{animation:spin 1s linear infinite}.connect-status strong{color:#fff}.connect-status span{font-size:14px}.controls{position:fixed;z-index:10;left:50%;bottom:22px;padding:8px;display:flex;gap:8px;transform:translateX(-50%);border:1px solid #ffffff1b;border-radius:18px;background:#110b11e8;box-shadow:0 18px 50px #0009;backdrop-filter:blur(20px)}.controls button{width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:13px;background:#ffffff0d;color:#fff}.controls button:hover,.controls button.active{background:#f3136d33;color:#ff4b91}.controls button.off,.controls button.danger{background:#d90f4c;color:#fff}.controls svg{width:20px}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){.topbar{padding:18px 22px}.topbar nav{display:none}.hero{padding:24px 22px 45px;grid-template-columns:1fr;gap:38px}.card{margin:auto}.intro h1{font-size:clamp(56px,15vw,90px)}.room-head{padding:0 16px}.room-head .brand strong{display:none}.room-head>button{font-size:0}.room-shell{padding:14px 14px 105px}.video-tile{min-height:210px}}@media(max-width:560px){.auth{font-size:0;padding:0 12px}.auth.user{font-size:0}.cover{min-height:245px}.panel{padding:20px}.features{gap:7px}.security{margin:0 16px 40px}.video-grid{grid-template-columns:1fr}.room-head>div{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
