.gf-explainer {
  width: min(100%, 650px); aspect-ratio: 1.18/1; min-height: 430px; position: relative; overflow: hidden; isolation: isolate;
  color: #fff; border-radius: 30px; background: radial-gradient(circle at 82% 20%,rgba(255,255,255,.12) 0 17%,transparent 17.5%),linear-gradient(145deg,rgba(34,8,128,.8),rgba(93,21,220,.66)); box-shadow: 0 26px 70px rgba(17,0,91,.34);
}
.gf-explainer * { box-sizing: border-box; }
.gf-explainer__stage { position:absolute; inset:0 0 94px; }
.gf-scene { position:absolute; inset:0; padding:clamp(28px,6vw,46px); opacity:0; transform:translateX(22px); pointer-events:none; transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1); }
.gf-scene.is-active { opacity:1; transform:none; pointer-events:auto; }
.gf-eyebrow { margin:0 0 8px!important; color:#ffc94a; font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.gf-scene h2 { margin:0; max-width:430px; color:#fff; font-size:clamp(26px,5vw,40px); line-height:1.03; letter-spacing:-.035em; }
.gf-demo-card,.gf-demo-form { position:absolute; left:clamp(28px,7vw,58px); right:clamp(28px,7vw,58px); top:144px; min-height:205px; padding:20px; color:#101c35; background:#fff; border-radius:24px; box-shadow:0 18px 44px rgba(24,2,92,.34); }
.gf-demo-card { display:grid; grid-template-columns:112px 1fr; gap:22px; }
.gf-demo-art { min-height:112px; display:grid; place-items:center; border-radius:17px; font-size:48px; background:linear-gradient(145deg,#ff9a38,#ff4c83); }
.gf-demo-copy h3 { margin:2px 0 6px; color:#1b1740; font-size:23px; }
.gf-demo-copy p { margin:0 0 15px; color:#665f82; font-size:14px; line-height:1.55; }
.gf-demo-seats { display:flex; align-items:center; gap:5px; margin-bottom:15px; font-size:13px; }
.gf-demo-seats i { width:20px; height:20px; border-radius:50%; background:#5724dd; }
.gf-demo-seats i:nth-child(n+3) { background:#d9d4e8; }
.gf-demo-seats strong { margin-left:5px; }
.gf-demo-button { display:inline-grid; place-items:center; min-height:39px; padding:0 18px; color:#3a2700; background:#ffc94a; border-radius:999px; font-size:13px; font-weight:900; }
.gf-demo-status { position:absolute; right:34px; bottom:24px; padding:11px 16px; color:#103f35; background:#cafff2; border-radius:999px; font-size:13px; font-weight:850; opacity:0; }
.gf-demo-form { top:135px; display:grid; grid-template-columns:1fr 156px; gap:19px; }
.gf-demo-fields { display:grid; gap:9px; }
.gf-demo-fields > span:not(.gf-demo-button) { min-height:36px; display:flex; align-items:center; padding:0 12px; color:#342c5b; background:#f1eef9; border:1px solid #e4def2; border-radius:9px; font-size:13px; font-weight:700; }
.gf-demo-fields b { width:62px; color:#8b84a2; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.gf-demo-preview { display:grid; place-items:center; align-content:center; gap:12px; color:#fff; text-align:center; background:linear-gradient(145deg,#5724dd,#2b0d95); border-radius:16px; }
.gf-demo-preview em { font-style:normal; font-size:38px; }.gf-demo-preview small{color:#ded2ff;font-size:11px}
.gf-demo-players { position:absolute; right:35px; bottom:18px; display:flex; }
.gf-demo-players i { width:38px;height:38px;display:grid;place-items:center;margin-left:-8px;color:#fff;background:#8b78b7;border:3px solid #fff;border-radius:50%;font-style:normal;font-weight:900;opacity:0; }
.gf-explainer__tabs { position:absolute;z-index:3;inset:auto 0 0;height:94px;display:grid;grid-template-columns:1fr 1fr;background:rgba(17,3,79,.76);border-top:1px solid rgba(255,255,255,.16);backdrop-filter:blur(11px); }
.gf-explainer__tabs button { min-height:0; padding:0; color:rgba(255,255,255,.66)!important; background:transparent!important; border-radius:0!important; box-shadow:none!important; font-size:clamp(14px,2.7vw,17px);font-weight:850; }
.gf-explainer__tabs button[aria-selected=true]{color:#fff!important}.gf-explainer__tabs button[aria-selected=true]::after{content:"";position:absolute;left:21%;right:21%;bottom:18px;height:4px;border-radius:99px;background:#ffc94a;animation:gf-progress 12s linear both}
.gf-explainer__tabs button{position:relative}.gf-scene.is-active .gf-demo-card,.gf-scene.is-active .gf-demo-form{animation:gf-card .7s .2s both}
.gf-scene--join.is-active .gf-seat-target{animation:gf-seat 10.5s 3s both}.gf-scene--join.is-active .gf-demo-status{animation:gf-status 10.5s 3.4s both}
.gf-scene--host.is-active .gf-demo-players i:nth-child(1){animation:gf-player 10s 3.2s both}.gf-scene--host.is-active .gf-demo-players i:nth-child(2){animation:gf-player 10s 3.7s both}.gf-scene--host.is-active .gf-demo-players i:nth-child(3){animation:gf-player 10s 4.2s both}
@keyframes gf-card{from{opacity:0;transform:translateY(30px) rotate(1deg)}to{opacity:1;transform:none}}@keyframes gf-seat{0%,19%{background:#d9d4e8;transform:scale(1)}23%{background:#1ee0b2;transform:scale(1.32)}29%,100%{background:#1ee0b2;transform:scale(1)}}@keyframes gf-status{0%,21%{opacity:0;transform:translateY(12px)}28%,83%{opacity:1;transform:none}92%,100%{opacity:0}}@keyframes gf-player{0%,22%{opacity:0;transform:translateY(10px) scale(.5)}29%,88%{opacity:1;transform:none}100%{opacity:0}}@keyframes gf-progress{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
@media(max-width:520px){.gf-explainer{min-height:500px;border-radius:22px}.gf-scene{padding:29px 23px}.gf-demo-card{top:125px;grid-template-columns:82px 1fr;gap:14px;padding:15px}.gf-demo-art{min-height:90px;font-size:38px}.gf-demo-form{top:118px;grid-template-columns:1fr;padding:15px}.gf-demo-preview{display:none}.gf-explainer__tabs{height:82px}}
@media(prefers-reduced-motion:reduce){.gf-explainer *{animation-duration:.001ms!important;transition-duration:.001ms!important}.gf-demo-status,.gf-demo-players i{opacity:1!important}.gf-seat-target{background:#1ee0b2!important}}