:root{--cream: #f7f0e4;--mint: #a7e8d5;--font-ui: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-display: "Fraunces", "Iowan Old Style", Georgia, serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:var(--font-ui);color:var(--cream);background:radial-gradient(110% 80% at 74% 8%,#f7d8a1,#a9cfd6 30%,#3b8390 58%,#123b46 82%,#071e25)}#app,#scene{width:100%;height:100%;display:block}#scene{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 1.4s ease}#scene.ready{opacity:1}.hidden{display:none!important}#join{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;overflow:hidden;padding:clamp(22px,3.1vw,48px) clamp(24px,5vw,84px);opacity:1;transition:opacity .85s cubic-bezier(.4,0,.2,1)}#join.leaving{opacity:0}#join.leaving,#join.leaving *{pointer-events:none!important}#join.no-scene{background:radial-gradient(110% 80% at 74% 8%,#f7d8a1,#a9cfd6 30%,#3b8390 58%,#123b46 82%,#071e25)}.join-scrim,.join-glow,.join-grain{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.join-scrim{background:linear-gradient(90deg,#031115e6,#031115b8 24%,#03111561 45%,#0311150f 64%,#03111500 76%),linear-gradient(180deg,#0311156b,#03111500 24%,#03111500 68%,#03111594),radial-gradient(120% 90% at 50% 100%,rgba(2,14,18,.28),transparent 55%)}.join-glow{background:radial-gradient(55% 45% at 74% 14%,rgba(255,208,146,.2),transparent 70%);mix-blend-mode:screen}.join-grain{opacity:.15;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");background-size:200px 200px}.join-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;animation:rise .9s .05s cubic-bezier(.2,.7,.2,1) both}.wordmark{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-size:27px;font-weight:500;letter-spacing:-.02em;line-height:1}.brand-mark{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff6cd,#ffd89a 38%,#ff9d61);box-shadow:0 0 0 1px #ffffff2e,0 0 28px #ffb26ccc}.status-pill{display:flex;flex-shrink:0;align-items:center;gap:9px;padding:9px 15px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:#061c2152;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:#f6efe3b3}.status-dot{width:6px;height:6px;border-radius:50%;background:#8bf0c5;box-shadow:0 0 11px #6beab3;animation:pulse 2.6s ease-in-out infinite}.status-pill.offline .status-dot{animation:none;background:#ff9d8a;box-shadow:0 0 11px #ff785abf}.join-main{position:relative;z-index:1;margin-block:auto;max-width:640px;padding-bottom:2vh;pointer-events:none}.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 23px;color:var(--mint);font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;opacity:0;animation:rise .9s .16s cubic-bezier(.2,.7,.2,1) both}.eyebrow-line{width:36px;height:1px;background:linear-gradient(90deg,var(--mint),rgba(167,232,213,0))}.title{margin:0 0 28px;font-family:var(--font-display);font-size:clamp(66px,8vw,128px);font-weight:350;font-optical-sizing:auto;line-height:.86;letter-spacing:-.038em;color:var(--cream);text-wrap:balance;text-shadow:0 12px 60px rgba(0,12,16,.24);opacity:0;animation:rise 1s .24s cubic-bezier(.2,.7,.2,1) both}.title em{font-style:italic;font-weight:320;color:#ffe1b3}.lede{max-width:420px;margin:0 0 38px;color:#f7f0e4ad;font-size:clamp(15px,1.05vw,16.5px);font-weight:300;line-height:1.65;letter-spacing:.002em;text-shadow:0 1px 24px rgba(0,0,0,.28);opacity:0;animation:rise .9s .35s cubic-bezier(.2,.7,.2,1) both}.join-form{max-width:492px;pointer-events:auto;opacity:0;animation:rise .9s .44s cubic-bezier(.2,.7,.2,1) both}.name-label{display:block;margin:0 0 10px 6px;color:#f7f0e485;font-size:10px;font-weight:500;letter-spacing:.19em;text-transform:uppercase}.name-field{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#061a1e61;box-shadow:0 24px 60px #000a0e52,inset 0 1px #ffffff1a;backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);transition:border-color .25s,background .25s,box-shadow .25s}.name-field:focus-within{border-color:#a7e8d58c;background:#061a1e80;box-shadow:0 24px 70px #000a0e6b,0 0 0 4px #a7e8d517,inset 0 1px #ffffff1f}#name{flex:1;min-width:0;height:52px;padding:0 20px;border:0;outline:0;background:transparent;color:var(--cream);font-family:var(--font-ui);font-size:16px;font-weight:400}#name::placeholder{color:#f7f0e457}#play{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:176px;height:52px;padding:0 24px 0 26px;overflow:hidden;border:0;border-radius:999px;background:linear-gradient(135deg,#ffe3ad,#ffc477 52%,#f7a75f);box-shadow:0 8px 24px #ffa85e38,inset 0 1px #ffffff8c;color:#123129;font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1;cursor:pointer;transition:transform .25s,box-shadow .25s,filter .25s}#play:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);transform:translate(-130%);transition:transform .65s ease}#play:hover{transform:translateY(-1px);filter:brightness(1.03);box-shadow:0 12px 34px #ffa85e59,inset 0 1px #ffffff8c}#play:hover:after{transform:translate(130%)}#play:active{transform:translateY(0) scale(.99)}#play:focus-visible{outline:2px solid var(--mint);outline-offset:3px}#play:disabled{cursor:wait}.btn-text{position:relative;z-index:1;white-space:nowrap}.btn-arrow{position:relative;z-index:1;font-size:17px;line-height:1;transition:transform .25s}#play:hover .btn-arrow{transform:translate(3px)}.btn-spinner{display:none;position:relative;z-index:1;width:15px;height:15px;border:2px solid rgba(18,49,41,.24);border-top-color:#123129;border-radius:50%;animation:spin .7s linear infinite}#play.is-loading .btn-arrow{display:none}#play.is-loading .btn-spinner{display:block}.join-error{min-height:20px;margin:11px 9px 0;color:#ffb3a1;font-size:12.5px;line-height:1.5}.join-foot{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;animation:rise .9s .56s cubic-bezier(.2,.7,.2,1) both;opacity:0}.foot-note{color:#f7f0e475;font-family:var(--font-display);font-size:15px;font-style:italic;letter-spacing:.01em}.controls{display:flex;align-items:center;gap:20px;color:#f7f0e475;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}.controls span{display:flex;align-items:center;gap:7px}kbd{padding:4px 6px;border:1px solid rgba(255,255,255,.14);border-radius:5px;background:#ffffff12;color:#f7f0e4cc;font-family:var(--font-ui);font-size:9.5px;font-weight:500;letter-spacing:.08em}#chat{position:fixed;z-index:5;left:24px;bottom:24px;width:min(340px,calc(100vw - 48px))}#messages{display:flex;flex-direction:column;gap:6px;max-height:240px;margin-bottom:8px;overflow-y:auto;scrollbar-width:none}#messages::-webkit-scrollbar{display:none}#messages div{align-self:flex-start;max-width:100%;padding:8px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px 12px 12px 4px;background:#061c218c;box-shadow:0 6px 20px #00000026;color:var(--cream);font-size:12.5px;line-height:1.45;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}#messages b{color:var(--mint);font-weight:600}#chatInput{width:100%;padding:12px 16px;border:1px solid rgba(255,255,255,.15);border-radius:999px;outline:none;background:#061c2180;color:#fff;font-family:var(--font-ui);font-size:13px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .2s,background .2s}#chatInput:focus{border-color:#a7e8d580;background:#061c21a6}#chatInput::placeholder{color:#f7f0e459}#hint{position:fixed;z-index:5;top:22px;left:50%;transform:translate(-50%);padding:8px 16px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:#061c216b;color:#f7f0e4ad;font-size:11px;letter-spacing:.04em;white-space:nowrap;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:rise .8s .15s both}#count{position:fixed;z-index:5;top:22px;right:24px;padding:8px 14px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:#061c216b;color:var(--cream);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:rise .8s .15s both}@keyframes rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 1180px) and (min-width: 861px){.join-scrim{background:linear-gradient(90deg,#031115eb,#031115cc 32%,#03111580 52%,#0311151f 74%,#03111500 86%),linear-gradient(180deg,#0311156b,#03111500 24%,#03111500 68%,#03111594)}}@media (max-width: 860px){#join{padding:22px}.join-scrim{background:radial-gradient(120% 55% at 18% 51%,rgba(3,17,21,.5),transparent 72%),linear-gradient(180deg,#03111599,#03111538 26%,#03111580 58%,#031115d1),linear-gradient(90deg,#03111566,#0311150f)}.lede{text-shadow:0 1px 22px rgba(0,0,0,.35)}.join-main{padding-bottom:0}.title{margin-bottom:24px;font-size:clamp(58px,15vw,98px)}.lede{max-width:370px;margin-bottom:30px}.join-foot{flex-direction:column;align-items:flex-start;gap:14px}.foot-note{display:none}.controls{flex-wrap:wrap;gap:13px}}@media (max-width: 560px){#join{padding:18px}.join-top{align-items:flex-start}.status-pill{padding:8px 12px;font-size:9px;letter-spacing:.14em}.eyebrow{margin-bottom:16px}.title{font-size:clamp(54px,19vw,82px)}.lede{margin-bottom:26px;font-size:14px;line-height:1.6}.name-field{flex-direction:column;align-items:stretch;gap:8px;padding:8px;border-radius:24px}#name{height:48px;text-align:center}#play{justify-content:center;width:100%;height:50px}.join-error{text-align:center}.controls{gap:14px;font-size:9.5px}#chat{right:12px;bottom:12px;left:12px;width:auto}#hint{top:12px;max-width:calc(100vw - 92px);overflow:hidden;text-overflow:ellipsis}#count{top:12px;right:12px}}@media (max-height: 680px){.join-foot{display:none}.eyebrow{margin-bottom:14px}.title{margin-bottom:18px;font-size:clamp(48px,11vh,88px)}.lede{margin-bottom:22px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}