:root{--join-bg0: #f8fafc;--join-bg1: #eef2ff;--join-text: #0f172a;--join-muted: #475569;--join-text-muted-strong: #334155;--join-accent: #6d28d9;--join-accent-bright: #7c3aed;--join-accent-dim: #5b21b6;--join-card: rgba(255, 255, 255, .78);--join-card-border: rgba(148, 163, 184, .28);--join-shadow: 0 8px 16px rgba(15, 23, 42, .06), 0 25px 50px -12px rgba(15, 23, 42, .14);--join-code-bg: #f1f5f9;--join-code-border: #cbd5e1;--join-code-focus: #7c3aed;--join-orb1: rgba(124, 58, 237, .09);--join-orb2: rgba(59, 130, 246, .07);--join-orb3: rgba(236, 72, 153, .06);--join-trust-border: rgba(148, 163, 184, .35);--join-trust-title: #0f172a;--join-trust-desc: #475569}html.dark{--join-bg0: #0b1120;--join-bg1: #1e1b4b;--join-text: #f1f5f9;--join-muted: #94a3b8;--join-text-muted-strong: #cbd5e1;--join-accent: #a78bfa;--join-accent-bright: #c4b5fd;--join-accent-dim: #8b5cf6;--join-card: rgba(30, 41, 59, .58);--join-card-border: rgba(148, 163, 184, .18);--join-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 25px 50px -12px rgba(0, 0, 0, .45);--join-code-bg: rgba(15, 23, 42, .92);--join-code-border: #475569;--join-code-focus: #a78bfa;--join-orb1: rgba(139, 92, 246, .12);--join-orb2: rgba(59, 130, 246, .08);--join-orb3: rgba(244, 114, 182, .06);--join-trust-border: rgba(148, 163, 184, .25);--join-trust-title: #f1f5f9;--join-trust-desc: #94a3b8}body{background:linear-gradient(165deg,var(--join-bg0) 0%,var(--join-bg1) 55%,var(--join-bg0) 100%);color:var(--join-text)}.join-page-body{transition:opacity .45s ease}.join-page-body.join-page-ready{opacity:1!important}.join-ambient{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-21;pointer-events:none;background:radial-gradient(ellipse 85% 55% at 50% 38%,color-mix(in srgb,var(--join-accent-bright) 14%,transparent),transparent 72%);animation:ambient-shift 14s ease-in-out infinite alternate}@keyframes ambient-shift{0%{opacity:.85;transform:scale(1)}to{opacity:1;transform:scale(1.03)}}.cursor-glow{position:fixed;width:42vmax;height:42vmax;border-radius:50%;pointer-events:none;z-index:-19;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--join-accent-bright) 8%,transparent),transparent 68%);opacity:.55;transition:opacity .3s ease}.orb{position:absolute;border-radius:50%;filter:blur(88px);will-change:transform;opacity:.45;transition:transform .35s cubic-bezier(.22,1,.36,1)}.orb-a{width:min(42vw,380px);height:min(42vw,380px);background:var(--join-orb1);top:10%;left:-8%}.orb-b{width:min(38vw,340px);height:min(38vw,340px);background:var(--join-orb2);bottom:5%;right:-5%}.orb-c{width:min(28vw,260px);height:min(28vw,260px);background:var(--join-orb3);top:40%;right:15%}.hero-radial{position:relative;width:100%}.join-headline{font-size:clamp(1.875rem,4vw + 1rem,2.5rem);line-height:1.15;letter-spacing:-.02em}.join-fade-in{animation:join-fade-in .55s ease forwards;opacity:0}@keyframes join-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.glass-panel.join-card{background:var(--join-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--join-card-border);box-shadow:var(--join-shadow)}.code-boxes-wrap{position:relative}.code-boxes-wrap--shake{animation:code-shake .52s cubic-bezier(.36,.07,.19,.97)}@keyframes code-shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.code-boxes-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.5rem,2vw,.75rem);width:100%;max-width:100%}@media (min-width: 1024px){.code-boxes-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:.625rem}}.code-boxes-grid>.code-cell{opacity:0;animation:code-cell-in .4s ease forwards}@keyframes code-cell-in{0%{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.code-cell{box-sizing:border-box;width:100%;min-width:0;max-width:100%;aspect-ratio:1;max-height:clamp(2.75rem,10vw,3.25rem);min-height:2.75rem;padding:0 .125rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:clamp(1rem,2.8vw,1.2rem);font-weight:600;text-align:center;text-transform:uppercase;border-radius:.75rem;background:var(--join-code-bg);border:2px solid var(--join-code-border);color:var(--join-text);box-shadow:inset 0 1px 3px #0000000f;transition:border-color .2s,box-shadow .2s,transform .18s ease}.code-cell:focus{outline:none}.code-cell:focus-visible{border-color:var(--join-code-focus);box-shadow:inset 0 1px 3px #0000000f,0 0 0 2px color-mix(in srgb,var(--join-code-focus) 45%,transparent);transform:scale(1.02);z-index:1;position:relative}.code-cell--focused:not(:focus-visible){transform:scale(1.01);z-index:0;position:relative}.code-cell--valid{border-color:#16a34a;animation:valid-pulse .65s ease}@keyframes valid-pulse{0%{box-shadow:inset 0 2px 4px #0000000d,0 0 color-mix(in srgb,#22c55e 45%,transparent)}55%{box-shadow:inset 0 2px 4px #0000000d,0 0 0 6px color-mix(in srgb,#22c55e 15%,transparent)}to{box-shadow:inset 0 2px 4px #0000000d,0 0 0 2px color-mix(in srgb,#22c55e 22%,transparent)}}html.dark .code-cell--valid{border-color:#4ade80}.code-cell--invalid{border-color:#ef4444}.btn-primary{background:linear-gradient(135deg,var(--join-accent-bright) 0%,var(--join-accent-dim) 100%);box-shadow:0 4px 14px color-mix(in srgb,var(--join-accent-bright) 40%,transparent),0 1px 2px #0000000f;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,#fff 18%,transparent) 50%,transparent 60%);background-size:220% 100%;animation:btn-shimmer 5s ease-in-out infinite;opacity:.35;pointer-events:none}@keyframes btn-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.btn-primary:hover:not(:disabled):before{opacity:.55}.btn-primary:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 10px 28px color-mix(in srgb,var(--join-accent-bright) 48%,transparent),0 0 0 1px color-mix(in srgb,var(--join-accent-bright) 25%,transparent)}.btn-primary:active:not(:disabled){transform:scale(.98) translateY(0)}.btn-primary:disabled:before{animation:none;opacity:0}.btn-secondary{border:2px solid color-mix(in srgb,var(--join-accent-bright) 35%,var(--join-card-border));color:var(--join-accent-bright);background:color-mix(in srgb,var(--join-card) 55%,transparent);transition:background .2s,border-color .2s,transform .15s}.btn-secondary:hover{background:color-mix(in srgb,var(--join-accent-bright) 10%,var(--join-card));border-color:color-mix(in srgb,var(--join-accent-bright) 55%,transparent)}.btn-secondary:active{transform:scale(.99)}.join-trust-footer{background:color-mix(in srgb,var(--join-card) 35%,transparent)}.trust-icon{width:1.375rem;height:1.375rem;color:var(--join-accent-bright);margin-top:.125rem}@media (min-width: 640px){.trust-icon{width:1.5rem;height:1.5rem}}.trust-title{font-size:.875rem;font-weight:600;color:var(--join-trust-title);letter-spacing:-.01em}.trust-desc{font-size:.8125rem;margin-top:.25rem;color:var(--join-trust-desc);line-height:1.4}.success-check{animation:success-pop .45s cubic-bezier(.34,1.56,.64,1)}@keyframes success-pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.join-page-body{transition:opacity .01s}.join-ambient{animation:none;opacity:.92;transform:none}.cursor-glow{transition:none;opacity:.35}.orb{transition:none;transform:none!important}.join-fade-in{animation:none;opacity:1;transform:none}.code-boxes-wrap--shake{animation:none}.code-boxes-grid>.code-cell{animation:none;opacity:1;transform:none}.code-cell{transition:border-color .15s ease,box-shadow .15s ease}.code-cell:focus-visible,.code-cell--focused:not(:focus-visible){transform:none}.code-cell--valid{animation:none}.btn-primary:before{animation:none;opacity:0}.btn-primary,.btn-secondary{transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,filter .15s ease}.btn-primary:hover:not(:disabled),.btn-primary:active:not(:disabled){transform:none}.btn-secondary:active{transform:none}.success-check,.animate-spin{animation:none}}