.join [hidden]{display:none!important}body.is-bare{color:#f4f1ea;background:#0c0c0f;margin:0}.join{isolation:isolate;color:#f4f1ea;grid-template-rows:auto 1fr;min-height:100svh;padding:clamp(18px,3vw,36px);display:grid;position:relative;overflow:hidden}.join__bg{z-index:-3;background:#0c0c0f url(/art/bg-shield.jpg) 50%/cover no-repeat;position:absolute;inset:0;overflow:hidden}.join__video{object-fit:cover;object-position:center;opacity:0;pointer-events:none;width:100%;height:100%;transition:opacity .8s;position:absolute;inset:0}.join__bg.is-playing .join__video{opacity:1}.join__bg:after{content:"";background:linear-gradient(90deg,#0a0a0de6 0%,#0a0a0da8 42%,#0a0a0d33 100%),linear-gradient(#0a0a0d00 55%,#0a0a0de0);position:absolute;inset:0}.join__smoke{z-index:-2;filter:blur(18px);background:radial-gradient(40% 30% at 70% 60%,#f5a5241f,#0000 70%),radial-gradient(35% 25% at 85% 30%,#ff6a2a14,#0000 70%);animation:18s ease-in-out infinite alternate join-smoke;position:absolute;inset:-20%}.join__frame{z-index:-1;pointer-events:none;border:1px solid #f4f1ea24;position:absolute;inset:clamp(10px,1.6vw,18px)}@keyframes join-smoke{0%{opacity:.7;transform:translate(-3%,2%)}to{opacity:1;transform:translate(3%,-2%)}}.join__top{justify-content:space-between;align-items:flex-start;gap:16px;padding:8px 10px 0;display:flex}.join__brand{color:#f4f1ea;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.join__brand svg,.join__brand img{width:38px;height:38px}.join__brand-text{gap:2px;display:grid}.join__brand-text>span{color:#f4f1ea;font-family:var(--display);letter-spacing:.02em;font-size:18px}.join__brand b{color:#f5a524}.join__brand small{color:#bdb9b0;font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;font-size:9px}.join__tag{color:#bdb9b0;font-family:var(--mono);letter-spacing:.2em;text-align:right;text-transform:uppercase;margin:0;font-size:10px;line-height:1.6}.join__body{align-self:center;width:min(640px,100%);padding:0 10px clamp(60px,10vh,120px)}.join__kicker{color:#dedad2;font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;margin:0 0 18px;font-size:12px}.join__kicker span{color:#f5a524;margin-right:6px}.join__title{color:#f4f1ea;font-family:var(--display);letter-spacing:-.04em;text-transform:uppercase;margin:0;font-size:clamp(3rem,10vw,6.6rem);font-weight:800;line-height:.9}.join__title em{color:#f5a524;font-style:normal}.join__server{color:#f5a524;font-family:var(--display);letter-spacing:.01em;text-transform:uppercase;margin:12px 0 6px;font-size:clamp(1.4rem,3.4vw,2.2rem);font-weight:700}.join__name{color:#bdb9b0;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;margin:0 0 26px;font-size:11px}.join__box{backdrop-filter:blur(6px);background:#0e0e12c7;border:1px solid #f4f1ea33;gap:10px;max-width:520px;padding:18px 20px 20px;display:grid;position:relative;overflow:hidden}.join__box:after{content:"";border-bottom:2px solid #f5a524;border-right:2px solid #f5a524;width:14px;height:14px;position:absolute;bottom:-1px;right:-1px}.join__box b{font-family:var(--display);letter-spacing:.02em;text-transform:uppercase;font-size:18px}.join__box p{color:#dedad2;margin:0;font-size:15px;line-height:1.5}.join__scan{opacity:0;background:linear-gradient(90deg,#0000,#f5a524,#0000);width:100%;height:2px;position:absolute;inset:0 auto auto 0}.join[data-state=finding] .join__scan,.join[data-state=launched] .join__scan,.join[data-state=starting] .join__scan,.join[data-state=copied] .join__scan{opacity:1;animation:1.3s ease-in-out infinite join-scan}@keyframes join-scan{0%{transform:translate(-100%)}to{transform:translate(100%)}}.join[data-state=ready] .join__box,.join[data-state=launched] .join__box,.join[data-state=starting] .join__box,.join[data-state=copied] .join__box{border-color:#f5a52499;box-shadow:0 0 0 1px #f5a52433,0 20px 60px #00000073}.join[data-state=ready] .join__box b,.join[data-state=launched] .join__box b,.join[data-state=starting] .join__box b,.join[data-state=copied] .join__box b{color:#f5a524}.join[data-state=offline] .join__box{border-color:#ff5d5d73}.join__actions{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.join__btn{color:#f4f1ea;min-height:42px;font:700 14px/1 var(--sans);cursor:pointer;background:0 0;border:1px solid #f4f1ea47;border-radius:3px;justify-content:center;align-items:center;padding:0 16px;text-decoration:none;transition:transform .15s,background .15s,border-color .15s;display:inline-flex}.join__btn:hover{color:#f4f1ea;border-color:#f4f1ea80;transform:translateY(-1px)}.join__btn--go{color:#1a1205;background:linear-gradient(#ffb547,#f5a524);border-color:#f5a524}.join__btn--go:hover{color:#1a1205;background:linear-gradient(#ffc266,#ffaa2a)}.join__btn--ghost{justify-self:start}.join__retry{color:#dedad2;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;margin-top:14px;padding:0;font-size:11px;transition:color .15s;display:inline-flex}.join__retry:hover{color:#fff}.join__code{border-top:1px solid #f4f1ea29;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;max-width:520px;margin-top:18px;padding-top:16px;display:grid}.join__code span{color:#bdb9b0;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-size:10px}.join__code code{color:#f4f1ea;font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;user-select:all;font-size:13px;overflow:hidden}.join__code button{color:#f4f1ea;min-height:32px;font:600 12px/1 var(--sans);cursor:pointer;background:#f4f1ea0f;border:1px solid #f4f1ea4d;border-radius:3px;padding:0 12px}.join__foot{z-index:1;flex-wrap:wrap;align-items:center;gap:10px 22px;display:flex;position:absolute;bottom:clamp(22px,3vw,40px);left:clamp(26px,3.4vw,54px);right:clamp(26px,3.4vw,54px)}.join__tagline{color:#bdb9b0;font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;margin:0 0 0 auto;font-size:10px}.join__status{color:#dedad2;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;align-items:center;gap:8px;margin:0;font-size:11px;display:inline-flex}.join__back{color:#bdb9b0;font-size:13px;text-decoration:none;display:inline-block}.join__back:hover{color:#f4f1ea}.join__num{z-index:-1;color:#f4f1ea12;font-family:var(--display);letter-spacing:-.04em;user-select:none;margin:0;font-size:clamp(5rem,16vw,12rem);font-weight:900;line-height:1;position:absolute;bottom:clamp(56px,9vh,96px);right:clamp(24px,5vw,70px)}@media (width<=640px){.join__tag{display:none}.join__code{grid-template-columns:minmax(0,1fr) auto}.join__code span{grid-column:1/-1}.join__num{opacity:.5}.join{grid-template-rows:auto 1fr auto}.join__body{padding-bottom:24px}.join__foot{padding:0 10px 8px;position:static}.join__tagline{width:100%;margin:0}}@media (prefers-reduced-motion:reduce){.join__smoke,.join[data-state=finding] .join__scan{animation:none}}
