/* Genie stage v4: a theatre in CSS 3D. Searchlights and a follow-spot open the show, a neon On Air sign, velvet curtains and
   wooden boards lit from the footlights; title cards; a brass lamp and a claymation-style Genie who stays and talks; painted
   set pieces with torn edges that fly in from the loft, the wings and the trap; a sunrise; the dream dashboard built centre
   stage; three dashboard signs on ropes; the console as the curtain call. Shared by the home page and /custom-creator-studio/.
   Transforms and opacity only (no blend modes, no backdrop filters). Pointer parallax through --px / --py. Still under reduced motion. */
.gstage{--hs:1;--px:0;--py:0;--velvet:url(/assets/img/stage/genie/velvet-tile.webp);--boards:url(/assets/img/stage/genie/boards-tile.webp);--boards-size:512px 256px;position:relative;overflow:hidden;overflow:clip;background:#07060b;color:#F4F0FA;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 28px}
@media (min-width:901px){.gstage{min-height:clamp(600px,calc(100vh - 121px),1040px)}}
@supports (height:1svh){@media (min-width:901px){.gstage{min-height:clamp(600px,calc(100svh - 121px),1040px)}}}
@media (min-width:901px) and (max-width:1250px){.gstage{--hs:.8}}
.gs-scene{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 40%;overflow:hidden}
.gs-scene>*{position:absolute}
@keyframes fadeIn{to{opacity:1}}
/* ---------- the house ---------- */
.gs-cyc{inset:-2% -2% 20%;background:radial-gradient(70% 60% at 50% 30%,#1b1424,#0b0910 70%)}
.gs-pros{top:0;bottom:0;width:2.6%;z-index:11;background:linear-gradient(90deg,#2a1a08,#8a6322 30%,#f0cf79 50%,#8a6322 70%,#2a1a08);box-shadow:0 0 30px rgba(0,0,0,.8)}
.gs-pros.l{left:0}.gs-pros.r{right:0}
.gs-apron{left:0;right:0;bottom:0;height:3.2%;z-index:5;background:linear-gradient(180deg,#5a3a20,#2a180c 40%,#120a05);box-shadow:0 -6px 20px rgba(0,0,0,.6)}
/* ---------- boards ---------- */
.gs-floor{left:-30%;right:-30%;bottom:-2%;height:46%;transform-origin:50% 100%;transform:rotateX(58deg) translateZ(0);
  background:linear-gradient(90deg,rgba(0,0,0,.65) 0,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 86%,rgba(0,0,0,.65) 100%),var(--boards) center top/var(--boards-size) repeat;
  box-shadow:inset 0 0 140px 50px rgba(0,0,0,.7)}
.gs-floor::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 35% at 50% 8%,rgba(255,220,150,.22),transparent 70%),linear-gradient(180deg,rgba(7,6,11,.95) 0%,rgba(7,6,11,.4) 32%,rgba(7,6,11,.06) 68%,rgba(7,6,11,.3) 100%)}
.gs-floor .spec{position:absolute;inset:0;pointer-events:none;opacity:0;background:
  radial-gradient(6% 60% at 13% 0%,rgba(255,236,190,.5),transparent 70%),radial-gradient(6% 60% at 29% 0%,rgba(255,236,190,.5),transparent 70%),
  radial-gradient(6% 60% at 45% 0%,rgba(255,236,190,.5),transparent 70%),radial-gradient(6% 60% at 60% 0%,rgba(255,236,190,.5),transparent 70%),
  radial-gradient(6% 60% at 75% 0%,rgba(255,236,190,.5),transparent 70%),radial-gradient(6% 60% at 90% 0%,rgba(255,236,190,.5),transparent 70%)}
.gstage.s-lights .gs-floor .spec{animation:fadeIn 1.4s ease .6s forwards}
.gs-cshadow{left:0;right:0;bottom:0;height:46%;pointer-events:none;z-index:4;background:linear-gradient(90deg,rgba(0,0,0,.75) 0,rgba(0,0,0,.35) 9%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,rgba(0,0,0,.35) 91%,rgba(0,0,0,.75) 100%)}
/* ---------- light: searchlights, haze, follow-spot, footlights and the warm glow they throw up the set ---------- */
.gs-beam{top:-40%;width:34vw;max-width:520px;height:150%;transform-origin:50% 0;opacity:0;pointer-events:none;z-index:10;filter:blur(.5px);background:
  radial-gradient(ellipse at 50% 0%,rgba(255,240,205,.6) 0%,rgba(255,236,200,.16) 30%,rgba(255,236,200,0) 58%),linear-gradient(180deg,rgba(255,240,205,.1),rgba(255,240,205,0) 70%)}
.gs-beam.l{left:8%}.gs-beam.r{right:8%}
.gstage.s-sweep .gs-beam{opacity:1;transition:opacity .4s}
.gstage.s-sweep .gs-beam.l{animation:sweepL 2.8s cubic-bezier(.45,0,.55,1) forwards,beamL 7s ease-in-out 2.8s infinite alternate}
.gstage.s-sweep .gs-beam.r{animation:sweepR 2.8s cubic-bezier(.45,0,.55,1) forwards,beamR 7s ease-in-out 2.8s infinite alternate}
@keyframes sweepL{0%{transform:rotate(-40deg)}30%{transform:rotate(32deg)}60%{transform:rotate(-24deg)}100%{transform:rotate(-30deg)}}
@keyframes sweepR{0%{transform:rotate(40deg)}30%{transform:rotate(-32deg)}60%{transform:rotate(24deg)}100%{transform:rotate(30deg)}}
@keyframes beamL{0%{transform:rotate(-30deg)}100%{transform:rotate(6deg)}}
@keyframes beamR{0%{transform:rotate(30deg)}100%{transform:rotate(-6deg)}}
.gs-haze{left:0;right:0;top:0;height:60%;pointer-events:none;z-index:3;opacity:0;background:radial-gradient(60% 70% at 50% 0%,rgba(255,228,180,.18),rgba(255,228,180,0) 70%)}
.gstage.s-lights .gs-haze{animation:fadeIn 2s ease .3s forwards}
.gs-spot{--sx:50%;--sy:60%;left:0;top:0;width:42vmin;height:42vmin;max-width:540px;max-height:540px;border-radius:50%;pointer-events:none;z-index:10;opacity:0;background:radial-gradient(circle,rgba(255,246,222,.55) 0%,rgba(255,232,188,.24) 36%,rgba(255,225,170,.07) 58%,rgba(255,225,170,0) 70%);transform:translate(-50%,-50%) translate(var(--sx),var(--sy));transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .5s ease;will-change:transform}
.gstage.s-spot .gs-spot{opacity:1}
.gstage.s-open .gs-spot,.gstage.s-open .gs-beam{z-index:6}
.gstage.s-spotslow .gs-spot{transition:transform 1.1s cubic-bezier(.4,0,.2,1),opacity .7s ease}
.gs-foot{left:5%;right:5%;bottom:8.5%;height:14px;display:flex;justify-content:space-between;pointer-events:none;z-index:5}
.gs-foot i{position:relative;width:64px;height:18px;opacity:0;background:radial-gradient(ellipse at 50% 100%,rgba(255,232,175,1),rgba(255,205,130,.4) 45%,transparent 72%);filter:blur(1.2px)}
.gs-foot i::after{content:"";position:absolute;left:50%;bottom:-3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff8e6;box-shadow:0 0 12px 4px rgba(255,236,190,.95)}
.gstage.s-lights .gs-foot i{animation:bulbOn .5s steps(3) forwards}
.gstage.s-lights .gs-foot i:nth-child(2){animation-delay:.08s}.gstage.s-lights .gs-foot i:nth-child(3){animation-delay:.16s}.gstage.s-lights .gs-foot i:nth-child(4){animation-delay:.24s}.gstage.s-lights .gs-foot i:nth-child(5){animation-delay:.32s}.gstage.s-lights .gs-foot i:nth-child(6){animation-delay:.4s}.gstage.s-lights .gs-foot i:nth-child(7){animation-delay:.48s}
@keyframes bulbOn{0%{opacity:0}40%{opacity:.8}60%{opacity:.2}100%{opacity:1}}
.gs-footglow{left:0;right:0;bottom:0;height:62%;z-index:5;pointer-events:none;opacity:0;background:
  radial-gradient(55% 40% at 50% 100%,rgba(255,196,120,.34),rgba(255,180,100,0) 70%),
  linear-gradient(0deg,rgba(255,190,110,.22),rgba(255,190,110,0) 45%)}
.gstage.s-lights .gs-footglow{animation:fadeIn 1.6s ease .5s forwards}
.gs-fx{inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.gs-fx-front{z-index:8}
/* ---------- curtains (velvet tile under folds, sheen, gold fringe) lit from below by the footlights ---------- */
.gs-curtain{top:0;bottom:0;width:54%;z-index:9;
  background:
    linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.05) 12%,rgba(0,0,0,0) 40%,rgba(0,0,0,.08) 75%,rgba(0,0,0,.5) 100%),
    linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.07) 48%,rgba(255,255,255,0) 60%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 5px,rgba(0,0,0,.22) 5px 16px,rgba(255,255,255,0) 16px 30px,rgba(255,255,255,.13) 30px 40px,rgba(255,255,255,.03) 40px 52px,rgba(0,0,0,.18) 52px 66px,rgba(0,0,0,.5) 66px 72px),
    var(--velvet),
    linear-gradient(90deg,#4a0618,#7d1030 40%,#5a0a20 70%,#8a1434);
  background-size:auto,auto,72px 100%,512px 512px,auto;
  box-shadow:0 0 80px rgba(0,0,0,.75),inset 0 -40px 60px rgba(0,0,0,.35)}
.gs-curtain.l{left:0;transform-origin:0 50%}.gs-curtain.r{right:0;transform-origin:100% 50%}
.gs-curtain::before{content:"";position:absolute;top:0;bottom:0;width:26px;background:repeating-linear-gradient(180deg,#f0cf79 0 7px,#b8862e 7px 10px,#f7df9a 10px 14px,#9c6f22 14px 18px);opacity:.95;box-shadow:0 0 18px rgba(0,0,0,.6)}
.gs-curtain.l::before{right:-6px;border-right:2px solid #5c3e10}.gs-curtain.r::before{left:-6px;border-left:2px solid #5c3e10}
.gs-curtain::after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(0deg,rgba(255,186,110,.3),rgba(255,186,110,0) 38%)}
.gstage.s-lights .gs-curtain::after{animation:fadeIn 1.4s ease .6s forwards}
.gstage.s-open .gs-curtain.l{animation:curtainL 2.2s cubic-bezier(.65,0,.25,1) forwards}
.gstage.s-open .gs-curtain.r{animation:curtainR 2.2s cubic-bezier(.65,0,.25,1) forwards}
@keyframes curtainL{from{transform:none}to{transform:scaleX(.12) translateX(-4%)}}
@keyframes curtainR{from{transform:none}to{transform:scaleX(.12) translateX(4%)}}
.gs-valance{left:0;right:0;top:0;height:13%;z-index:11;box-shadow:0 10px 30px rgba(0,0,0,.6);
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,0) 40%,rgba(0,0,0,.35)),repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 6px,rgba(0,0,0,.15) 6px 18px,rgba(255,255,255,.1) 18px 30px,rgba(0,0,0,.15) 30px 44px,rgba(0,0,0,.5) 44px 52px),var(--velvet),linear-gradient(90deg,#4a0618,#7d1030 50%,#4a0618);
  background-size:auto,52px 100%,512px 512px,auto;
  -webkit-mask-image:radial-gradient(14px at 50% 100%,transparent 98%,#000) 0 0/28px 100% repeat-x,linear-gradient(#000 0 0);-webkit-mask-composite:source-out;mask-image:radial-gradient(14px at 50% 100%,transparent 98%,#000) 0 0/28px 100% repeat-x,linear-gradient(#000 0 0);mask-composite:subtract}
.gs-valance::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:radial-gradient(circle at 50% 100%,#f7df9a 0 3px,rgba(247,223,154,0) 4px) 0 0/14px 14px repeat-x,linear-gradient(90deg,#b8862e,#f7df9a,#b8862e)}
/* ---------- On Air: dark, a flicker, then full neon for the whole show ---------- */
.gs-onair{left:50%;top:4%;transform:translateX(-50%);z-index:12;font:800 .78rem/1 Poppins,Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:8px 13px;border:2px solid #6a2030;border-radius:7px;color:#d98a9a;background:#170a0e}
.gs-onair.flick{animation:onairFlick 1s steps(1) forwards}
.gs-onair.on{color:#fff;background:#ff1f4b;border-color:#ffc2cf;text-shadow:0 0 6px #fff,0 0 14px #ff8aa6;box-shadow:0 0 14px 2px rgba(255,31,75,.95),0 0 46px 10px rgba(255,31,75,.55),0 0 90px 24px rgba(255,31,75,.25),inset 0 0 10px rgba(255,255,255,.45);animation:neonHum 3s ease-in-out infinite}
@keyframes onairFlick{0%{color:#fff;background:#ff1f4b;box-shadow:0 0 30px rgba(255,31,75,.9)}12%{color:#d98a9a;background:#170a0e;box-shadow:none}22%{color:#fff;background:#ff1f4b;box-shadow:0 0 30px rgba(255,31,75,.9)}30%{color:#d98a9a;background:#170a0e;box-shadow:none}55%{color:#fff;background:#ff1f4b;box-shadow:0 0 40px rgba(255,31,75,.9)}62%{color:#d98a9a;background:#170a0e;box-shadow:none}100%{color:#fff;background:#ff1f4b}}
@keyframes neonHum{0%,100%{opacity:1}50%{opacity:.93}}
/* ---------- act 1: title cards fly in as set pieces ---------- */
.gs-cards{left:0;right:0;top:0;bottom:0;z-index:8;pointer-events:none;perspective:1000px}
.gs-card{position:absolute;left:50%;top:32%;width:min(760px,70%);margin:0;transform:translate(-50%,-50%);opacity:0;text-align:center;font:800 clamp(1.5rem,3.6vw,3.4rem)/1.05 Poppins,Inter,sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25),0 18px 40px rgba(0,0,0,.6)}
.gs-card b{color:#FFD60A}
.gs-card small{display:block;margin-top:14px;font:700 clamp(.9rem,1.5vw,1.25rem)/1.35 Inter,sans-serif;letter-spacing:0;color:#F4F0FA;opacity:.92}
.gs-card .chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.gs-card .chips span{font:700 .82rem/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;transform:translateY(16px);opacity:0}
.gstage.s-c1 .gs-card.c1,.gstage.s-c2 .gs-card.c2{animation:cardIn 1s cubic-bezier(.2,.8,.2,1) forwards}
.gstage.s-c1.s-c1out .gs-card.c1,.gstage.s-c2.s-c2out .gs-card.c2{animation:cardOut .7s cubic-bezier(.6,0,.8,.3) forwards}
.gstage.s-c2 .gs-card.c2 .chips span{animation:chipIn .5s ease forwards}
.gstage.s-c2 .gs-card.c2 .chips span:nth-child(1){animation-delay:.5s}.gstage.s-c2 .gs-card.c2 .chips span:nth-child(2){animation-delay:.65s}.gstage.s-c2 .gs-card.c2 .chips span:nth-child(3){animation-delay:.8s}.gstage.s-c2 .gs-card.c2 .chips span:nth-child(4){animation-delay:.95s}.gstage.s-c2 .gs-card.c2 .chips span:nth-child(5){animation-delay:1.1s}
@keyframes cardIn{0%{opacity:0;transform:translate(-50%,-50%) translateZ(-500px) rotateX(30deg) translateY(-120px)}100%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes cardOut{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%) translateZ(300px) translateY(-60px)}}
@keyframes chipIn{to{opacity:1;transform:none}}
.gs-card::after{content:"";position:absolute;inset:-10% -5%;pointer-events:none;opacity:0;background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,244,214,.28) 50%,rgba(255,255,255,0) 60%) -150% 0/250% 100% no-repeat}
.gstage.s-c1 .gs-card.c1::after,.gstage.s-c2 .gs-card.c2::after{animation:cardGlint 1.1s ease-out .9s forwards}
@keyframes cardGlint{0%{opacity:1;background-position:-150% 0}100%{opacity:1;background-position:250% 0}}
/* ---------- act 2: the lamp and the Genie (he stays to the end) ---------- */
.gs-lamp{left:44%;bottom:17%;width:clamp(110px,13vw,190px);z-index:7;transform:translateX(-180%);opacity:0;pointer-events:none;transform-origin:50% 100%;transition:left 1.4s cubic-bezier(.3,.7,.2,1)}
.gs-lamp img.lamp{display:block;width:100%;height:auto;position:relative;z-index:2}
.gs-lamp .lamp-sh{position:absolute;left:10%;right:10%;bottom:-6px;height:16px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.65),rgba(0,0,0,0) 70%);filter:blur(3px)}
.gs-lamp .lamp-glow{position:absolute;left:-40%;right:-40%;bottom:-20%;height:120%;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,rgba(255,200,90,.45),rgba(255,200,90,0) 65%);opacity:0;z-index:1}
.gstage.s-lamp.has-lamp .gs-lamp{animation:lampIn 1.3s cubic-bezier(.2,.8,.2,1) forwards}
.gstage.s-g1 .gs-lamp .lamp-glow{animation:lampGlow 2.4s ease-in-out infinite}
@keyframes lampIn{0%{opacity:0;transform:translateX(-180%) rotate(-8deg)}30%{opacity:1}70%{transform:translateX(4%) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes lampGlow{0%,100%{opacity:.55}50%{opacity:1}}
.gs-genie{position:absolute;left:-189.9%;bottom:30.4%;width:384.7%;z-index:3;transform:translateY(40%) scale(.1);transform-origin:50% 95%;opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s ease;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.gs-genie .gbody{position:relative;display:block;transform-origin:50% 95%}
.gs-genie img{display:block;width:100%;height:auto;transition:opacity .16s linear}
.gs-genie img.pb,.gs-genie img.mouth{position:absolute;left:0;top:0;opacity:0}
.gs-genie.b-on img.pa{opacity:0}.gs-genie.b-on img.pb{opacity:1}
.gs-genie img.mouth{transition:none}
.gs-genie.talk img.mouth.open{opacity:1}
.gstage.s-g1 .gs-genie{opacity:1;transform:translateY(6%) scale(.6)}
.gstage.s-g2 .gs-genie{opacity:1;transform:none}
.gstage.s-g2 .gs-genie .gbody{animation:genieFloat 3.4s ease-in-out .9s infinite}
@keyframes genieFloat{0%,100%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-6px) scale(.995,1.012)}50%{transform:translateY(-12px) scale(1,1)}75%{transform:translateY(-6px) scale(1.006,.994)}}
/* the Genie's speech bubble (placed at his head by stage.js) */
.gs-gsay{position:absolute;left:0;top:0;z-index:13;max-width:320px;margin:0;padding:12px 16px;border-radius:18px 18px 18px 4px;background:linear-gradient(135deg,#fff,#fff6fb);border:3px solid #15121F;box-shadow:4px 5px 0 #15121F,0 0 30px rgba(255,46,147,.35);font:800 1.02rem/1.3 Poppins,Inter,sans-serif;color:#15121F;opacity:0;transform:translateY(8px) scale(.9);transform-origin:0 100%;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.gs-gsay.show{opacity:1;transform:none}
.gs-gsay::before{content:"";position:absolute;left:-3px;bottom:-14px;border:9px solid transparent;border-top-color:#15121F;border-left-color:#15121F}
.gs-gsay.left{border-radius:18px 18px 4px 18px;transform-origin:100% 100%}
.gs-gsay.left::before{left:auto;right:-3px;border-left-color:transparent;border-right-color:#15121F}
.gs-gsay.side{border-radius:4px 18px 18px 18px}.gs-gsay.side::before{left:-14px;top:-3px;bottom:auto;border-top-color:#15121F;border-right-color:#15121F;border-left-color:transparent}
.gs-gsay.left.side{border-radius:18px 4px 18px 18px}.gs-gsay.left.side::before{left:auto;right:-14px;border-right-color:transparent;border-left-color:#15121F}
.gs-gsay.mid{border-radius:18px}.gs-gsay.mid::before{left:50%;margin-left:-9px;border-left-color:transparent;border-right-color:transparent}
/* ---------- act 3: painted set pieces with torn edges, far to near ---------- */
.gs-flat{left:-6%;right:-6%;top:-4%;height:74%;pointer-events:none}
.gs-flat img{position:absolute;left:0;width:100%}
.gs-flat.full img{inset:0;height:100%;object-fit:cover;object-position:50% 100%}
.gs-flat.strip img{height:auto;bottom:0}
.gs-flat>*{opacity:0}
.gs-f-sky{transform:translate3d(calc(var(--px)*-14px),calc(var(--py)*-6px),-420px) scale(1.5)}
.gs-f-sky img{opacity:.001}
.gs-f-clouds{top:2%;height:22%;transform:translate3d(calc(var(--px)*-11px),calc(var(--py)*-5px),-330px) scale(1.38)}
.gs-f-hills{transform:translate3d(calc(var(--px)*-7px),calc(var(--py)*-3px),-260px) scale(1.3)}
.gs-f-ridge{left:-10%;right:auto;width:62%;top:8%;height:52%;transform:translate3d(calc(var(--px)*-5px),calc(var(--py)*-2px),-200px) scale(1.24)}
.gs-f-trees{transform:translate3d(calc(var(--px)*-3px),calc(var(--py)*-1px),-150px) scale(1.17)}
.gs-f-meadow{top:auto;bottom:30%;height:20%;transform:translate3d(calc(var(--px)*-1px),0,-100px) scale(1.11)}
.gs-f-ground{top:auto;bottom:21%;height:30%;transform:translate3d(calc(var(--px)*2px),0,-60px) scale(1.07)}
.gs-f-near{top:auto;bottom:16%;height:19%;transform:translate3d(calc(var(--px)*5px),0,-20px) scale(1.03)}
.gstage.s-sky .gs-f-sky>*{animation:flyDown 1.6s cubic-bezier(.3,.7,.2,1) forwards}
.gstage.s-clouds .gs-f-clouds>*{animation:flyDown 1.3s cubic-bezier(.3,.7,.2,1) forwards,drift 9s ease-in-out 1.3s infinite alternate}
.gstage.s-hills .gs-f-hills>*{animation:slideL 1.3s cubic-bezier(.3,.7,.2,1) forwards}
.gstage.s-ridge .gs-f-ridge>*{animation:slideL 1.2s cubic-bezier(.3,.7,.2,1) forwards}
.gstage.s-trees .gs-f-trees>*{animation:slideR 1.3s cubic-bezier(.3,.7,.2,1) forwards}
.gstage.s-meadow .gs-f-meadow>*{animation:riseUp 1.1s cubic-bezier(.3,.7,.2,1) forwards,sway 6s ease-in-out 1.1s infinite alternate}
.gstage.s-ground .gs-f-ground>*{animation:riseUp 1.1s cubic-bezier(.3,.7,.2,1) forwards}
.gstage.s-near .gs-f-near>*{animation:popUp .9s cubic-bezier(.3,1.4,.4,1) forwards,sway 5s ease-in-out .9s infinite alternate-reverse}
@keyframes flyDown{0%{opacity:0;transform:translateY(-110%) rotate(-2deg)}20%{opacity:1}85%{transform:translateY(2%) rotate(.6deg)}100%{opacity:1;transform:none}}
@keyframes slideL{0%{opacity:0;transform:translateX(-80%) rotateY(28deg)}25%{opacity:1}100%{opacity:1;transform:none}}
@keyframes slideR{0%{opacity:0;transform:translateX(80%) rotateY(-28deg)}25%{opacity:1}100%{opacity:1;transform:none}}
@keyframes riseUp{0%{opacity:0;transform:translateY(80%)}30%{opacity:1}100%{opacity:1;transform:none}}
@keyframes popUp{0%{opacity:0;transform:translateY(110%) rotate(1.5deg)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes drift{0%{opacity:1;transform:translateX(-1.2%)}100%{opacity:1;transform:translateX(1.2%)}}
@keyframes sway{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:1;transform:translateY(-4px) rotate(-.4deg)}}
.gs-flat .flat-sh{position:absolute;left:8%;right:8%;bottom:-2%;height:6%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),rgba(0,0,0,0) 70%);filter:blur(6px)}
.gstage.s-hills .gs-f-hills .flat-sh,.gstage.s-trees .gs-f-trees .flat-sh,.gstage.s-ground .gs-f-ground .flat-sh{animation:fadeIn 1s ease .8s forwards}
/* the sun */
.gs-sun{left:50%;top:26%;width:0;height:0;z-index:0;transform:translate3d(calc(var(--px)*-11px),calc(var(--py)*-5px),-380px) scale(1.45);pointer-events:none}
.gs-sun .disc{position:absolute;left:-90px;top:-90px;width:180px;height:180px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff8dc 0 30%,#ffd86b 46%,rgba(255,170,60,.9) 60%,rgba(255,140,40,0) 72%);box-shadow:0 0 60px 20px rgba(255,200,90,.55),0 0 160px 60px rgba(255,160,60,.35)}
.gs-sun .rays{position:absolute;left:-420px;top:-420px;width:840px;height:840px;border-radius:50%;opacity:0;background:repeating-conic-gradient(from 0deg,rgba(255,220,140,.22) 0 6deg,rgba(255,220,140,0) 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 10%,rgba(0,0,0,.6) 40%,transparent 70%);mask:radial-gradient(circle,#000 10%,rgba(0,0,0,.6) 40%,transparent 70%)}
.gstage.s-sun .gs-sun .disc{animation:sunrise 2.8s cubic-bezier(.3,.6,.2,1) forwards}
.gstage.s-sun .gs-sun .rays{animation:raysIn 2.4s ease .8s forwards,raysTurn 60s linear infinite}
@keyframes sunrise{0%{opacity:0;transform:translateY(150px) scale(.7)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes raysIn{to{opacity:1}}
@keyframes raysTurn{to{transform:rotate(360deg)}}
.gs-sunwash{inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(60% 50% at 50% 30%,rgba(255,196,110,.28),rgba(255,196,110,0) 70%),linear-gradient(180deg,rgba(255,180,90,0) 40%,rgba(255,170,80,.16) 100%)}
.gstage.s-sun .gs-sunwash{animation:fadeIn 2.6s ease .6s forwards}
/* ---------- act 4: the dream dashboard is built centre stage, then steps to the side ---------- */
.gs-holo-beam{position:absolute;right:2.5%;bottom:-4%;width:440px;height:46%;background:linear-gradient(180deg,rgba(0,184,240,0),rgba(0,184,240,.32));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);opacity:0;pointer-events:none;filter:blur(2px);z-index:9}
.gs-holo{position:absolute;right:2.5%;top:13%;width:440px;z-index:10;pointer-events:none;opacity:0;transform-origin:50% 0;transform:perspective(1200px) translateX(-40%) translateY(80px) scale(calc(var(--hs) * 1.05)) rotateX(38deg);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
.gstage.s-dash .gs-holo{opacity:1;transform:perspective(1200px) translateX(-30%) scale(calc(var(--hs) * 1.14));pointer-events:auto}
.gs-holo .wd-lock{transition:opacity .6s ease}
.gstage:not(.s-holo) .gs-holo .wd-lock{opacity:0}
.gstage.s-holo .gs-holo{opacity:1;transform:perspective(1200px) rotateY(-10deg) rotateX(4deg) scale(var(--hs));pointer-events:auto}
.gstage.s-holo .gs-holo-beam{animation:fadeIn .8s ease .6s forwards}
.gs-holo .wd{border-color:rgba(0,184,240,.5);box-shadow:0 0 0 1px rgba(0,184,240,.25),0 30px 80px rgba(0,0,0,.6),0 0 70px rgba(0,184,240,.3)}
.gs-holo .wd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 2px,transparent 2px 5px);z-index:4}
.gs-holo .wd::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;z-index:5;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(160,240,255,.22),rgba(255,255,255,0));transform:skewX(-18deg);opacity:0}
.gstage.s-dash .gs-holo .wd::before{animation:glint 1.6s ease-in-out .9s 2}
@keyframes glint{0%{opacity:1;left:-40%}100%{opacity:1;left:120%}}
.gs-holo .wd-card,.gs-holo .wd-top{opacity:0;transform:translateY(26px) scale(.96)}
.gstage.s-dash .gs-holo .wd-top,.gstage.s-dash .gs-holo .wd-card,.gstage.s-holo .gs-holo .wd-top,.gstage.s-holo .gs-holo .wd-card{animation:build .6s cubic-bezier(.2,.8,.2,1) forwards}
.gstage.s-dash .gs-holo .wd-card:nth-child(1){animation-delay:.35s}.gstage.s-dash .gs-holo .wd-card:nth-child(2){animation-delay:.6s}.gstage.s-dash .gs-holo .wd-card:nth-child(3){animation-delay:.85s}.gstage.s-dash .gs-holo .wd-card:nth-child(4){animation-delay:1.1s}
@keyframes build{to{opacity:1;transform:none}}
.gs-holo .wd-bar i{width:8%;transition:width 3.2s cubic-bezier(.3,.6,.2,1) 1s}
.gstage.s-dash .gs-holo .wd-bar i,.gstage.s-holo .gs-holo .wd-bar i{width:78%}
/* ---------- act 5: three dashboards on ropes ---------- */
.gs-signs{left:0;right:0;top:0;bottom:0;z-index:9;pointer-events:none}
.gs-sign{position:absolute;top:15%;width:17%;padding:14px 16px 16px;border-radius:12px;text-align:center;color:#2a1608;transform-origin:50% -120px;transform:translateY(-190%);
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%),linear-gradient(180deg,#f6e7c8,#e7cf9e);border:3px solid #b8862e;box-shadow:0 0 0 3px #3a2410,0 24px 40px rgba(0,0,0,.55),inset 0 -6px 12px rgba(120,70,20,.25)}
.gs-sign::before,.gs-sign::after{content:"";position:absolute;top:-400px;width:3px;height:400px;background:linear-gradient(180deg,#5a3a18,#c9a25a)}
.gs-sign::before{left:16%}.gs-sign::after{right:16%}
.gs-sign b{display:block;font:800 clamp(1rem,1.7vw,1.5rem)/1.1 Poppins,Inter,sans-serif;letter-spacing:-.01em;color:#15121F}
.gs-sign span{display:block;margin-top:6px;font:600 clamp(.72rem,1vw,.9rem)/1.3 Inter,sans-serif;color:#3d2a14}
.gs-sign em{display:inline-block;margin-top:8px;font:800 .72rem/1 Inter,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#C2185B;border-radius:999px;padding:6px 9px}
.gs-sign i{display:block;margin:0 auto 6px;font:800 .66rem/1 Inter,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#7a4c14}
.gs-sign.s1{left:max(110px,7%)}.gs-sign.s2{left:calc(max(110px,7%) + 19%)}.gs-sign.s3{left:calc(max(110px,7%) + 38%);background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 40%),linear-gradient(180deg,#ffe9a8,#ffcf5a);box-shadow:0 0 0 3px #3a2410,0 24px 40px rgba(0,0,0,.55),0 0 40px rgba(255,214,10,.45)}
.gstage.s-signs .gs-sign{animation:signDrop 1.6s cubic-bezier(.3,.7,.3,1) forwards}
.gstage.s-signs .gs-sign.s2{animation-delay:.25s}.gstage.s-signs .gs-sign.s3{animation-delay:.5s}
.gstage.s-signs.s-signsout .gs-sign{animation:signUp .8s cubic-bezier(.6,0,.8,.3) forwards}
.gstage.s-signs.s-signsout .gs-sign.s2{animation-delay:.1s}.gstage.s-signs.s-signsout .gs-sign.s3{animation-delay:.2s}
@keyframes signDrop{0%{transform:translateY(-190%) rotate(0)}45%{transform:translateY(6%) rotate(0)}60%{transform:translateY(0) rotate(3deg)}75%{transform:rotate(-2deg)}88%{transform:rotate(1deg)}100%{transform:none}}
@keyframes signUp{from{transform:none}to{transform:translateY(-200%)}}
/* ---------- Producer Z on the boards: a full-body clay figure, walked by stage.js (four stacked frames, one shown) ---------- */
.gstage{--zw:clamp(112px,11.2vw,172px)}
.gs-z{position:absolute;left:0;bottom:10.5%;width:var(--zw);z-index:8;pointer-events:none;transform:translate3d(-400px,0,0);will-change:transform}
.gs-z-shadow{position:absolute;left:14%;right:14%;bottom:-5px;height:16px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.62),rgba(0,0,0,0) 70%);filter:blur(2px);z-index:-1}
.gs-z-actor{display:block;position:relative;width:100%;aspect-ratio:517/560;padding:0;margin:0;border:0;background:none;cursor:pointer;pointer-events:auto;border-radius:16px;-webkit-tap-highlight-color:transparent}
.gs-z-actor:focus-visible{outline:3px solid #00B8F0;outline-offset:4px}
.gs-z-fig{position:absolute;inset:0;transform-origin:50% 100%;transform:translateY(var(--bob,0)) scaleX(var(--face,1));transition:transform .12s ease}
.gs-z.face-l{--face:-1}.gs-z.bob{--bob:-3.5%}
.gs-z-fig img{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;opacity:0}
.gs-z-actor[data-f="w1"] .zf-w1,.gs-z-actor[data-f="w2"] .zf-w2,.gs-z-actor[data-f="w3"] .zf-w3,.gs-z-actor[data-f="ch"] .zf-ch{opacity:1}
.gs-z.hop .gs-z-fig{animation:zhop .46s ease-in-out 3}
@keyframes zhop{50%{transform:translateY(-9%) scaleX(var(--face,1))}}
.gs-z-say{position:absolute;right:62%;bottom:78%;width:max-content;max-width:280px;pointer-events:auto;background:#fff;border:3px solid #15121F;border-radius:14px 14px 4px 14px;padding:10px 14px;box-shadow:3px 4px 0 #15121F;opacity:0;transform:translateY(6px)}
.gs-z-say.show{animation:sayIn .25s ease forwards}
.gs-z.say-r .gs-z-say{right:auto;left:62%;border-radius:14px 14px 14px 4px}
@keyframes sayIn{to{opacity:1;transform:none}}
.gs-z-say p{margin:0;font:700 .98rem/1.3 Poppins,Inter,sans-serif;color:#15121F}
/* ---------- the wish sign: a lit marquee that drops in on ropes beside the Genie when he finishes ---------- */
.gs-wish{position:absolute;left:0;top:0;z-index:12;width:max-content;max-width:min(300px,46vw);transform:translateY(-150%);opacity:0;transform-origin:50% -80px;pointer-events:none}
.gs-wish[hidden]{display:none}
.gs-wish::before,.gs-wish::after{content:"";position:absolute;bottom:100%;width:3px;height:900px;background:linear-gradient(180deg,#5a3a18,#c9a25a)}
.gs-wish::before{left:22%}.gs-wish::after{right:22%}
.gs-wish.in{animation:wishDrop 1.5s cubic-bezier(.3,.7,.3,1) forwards;pointer-events:auto}
@keyframes wishDrop{0%{transform:translateY(-150%) rotate(0);opacity:1}45%{transform:translateY(5%) rotate(0);opacity:1}60%{transform:rotate(3deg);opacity:1}76%{transform:rotate(-2deg);opacity:1}90%{transform:rotate(.8deg);opacity:1}100%{transform:none;opacity:1}}
.gs-wishbtn{position:relative;display:block;width:100%;margin:0;padding:15px 22px 14px;border:3px solid #3a2410;border-radius:16px;cursor:pointer;text-align:center;color:#15121F;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 45%),linear-gradient(90deg,#FFD60A,#FFB21A 55%,#FF8A00);
  box-shadow:0 0 0 3px #f7df9a,0 0 0 6px #3a2410,0 18px 40px rgba(0,0,0,.55),0 0 46px rgba(255,190,40,.55);transition:transform .12s ease,box-shadow .12s ease}
.gs-wishbtn b{display:block;font:800 clamp(1.25rem,1.9vw,1.7rem)/1.05 Poppins,Inter,sans-serif;letter-spacing:-.01em}
.gs-wishbtn b::after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.32em;vertical-align:.02em;background:#C2185B;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.gs-wishbtn small{display:block;margin-top:6px;font:700 .78rem/1.3 Inter,sans-serif;color:#3a2410}
.gs-wishbtn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 0 3px #fff2c2,0 0 0 6px #3a2410,0 22px 46px rgba(0,0,0,.6),0 0 70px rgba(255,200,60,.8)}
.gs-wishbtn:focus-visible{outline:3px solid #00B8F0;outline-offset:8px}
/* marquee bulbs chase round the edge: two dotted rings swap (opacity only) */
.gs-wish-bulbs,.gs-wish-bulbs::after{position:absolute;inset:-12px;border-radius:24px;pointer-events:none;
  background:radial-gradient(circle,#fff9e0 0 2.4px,rgba(255,240,190,.55) 3.4px,transparent 5px) 0 0/18px 18px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:6px}
.gs-wish-bulbs::after{content:"";inset:0;padding:6px;background-position:9px 9px;animation:chase .9s steps(1) infinite}
.gs-wish-bulbs{animation:chase .9s steps(1) infinite reverse}
@keyframes chase{50%{opacity:.25}}
.gs-wish.in .gs-wishbtn{animation:wishPulse 2.6s ease-in-out 1.6s infinite}
@keyframes wishPulse{0%,100%{box-shadow:0 0 0 3px #f7df9a,0 0 0 6px #3a2410,0 18px 40px rgba(0,0,0,.55),0 0 46px rgba(255,190,40,.55)}50%{box-shadow:0 0 0 3px #fff2c2,0 0 0 6px #3a2410,0 18px 40px rgba(0,0,0,.55),0 0 80px rgba(255,200,60,.85)}}
/* when the sign lands, both searchlights cross onto it once */
.gstage.s-cta .gs-beam.l{animation:ctaL 1.8s cubic-bezier(.45,0,.55,1) forwards,beamL 7s ease-in-out 1.8s infinite alternate}
.gstage.s-cta .gs-beam.r{animation:ctaR 1.8s cubic-bezier(.45,0,.55,1) forwards,beamR 7s ease-in-out 1.8s infinite alternate}
@keyframes ctaL{0%{transform:rotate(-30deg)}50%{transform:rotate(-58deg)}100%{transform:rotate(-30deg)}}
@keyframes ctaR{0%{transform:rotate(30deg)}50%{transform:rotate(10deg)}100%{transform:rotate(30deg)}}
/* ---------- controls on the stage ---------- */
.gs-ctrl{position:absolute;right:max(16px,calc((100% - 1240px)/2 + 32px));top:18px;z-index:13;display:flex;gap:8px}
.gs-ctrl button{font:700 .8rem/1 Inter,sans-serif;color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 14px;cursor:pointer;min-height:34px}
.gs-ctrl button:hover{background:rgba(255,255,255,.14)}
.gs-ctrl button:focus-visible{outline:3px solid #00B8F0;outline-offset:2px}
.gs-sound[hidden]{display:none}
.gs-sound[aria-pressed="true"]{background:#C2185B;border-color:#ffb3d6}
.gstage.s-done .gs-skip{display:none}
/* ---------- the console: hidden until the show is over, closable ---------- */
.gs-wrap{position:relative;z-index:12;width:100%;max-width:1240px;margin:0 auto;padding:0 32px;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.gstage:not(.s-console) .gs-wrap{opacity:0;transform:translateY(40px);visibility:hidden}
.gs-wrap{pointer-events:none}.gstage.s-console .gs-wrap .gs-panel{pointer-events:auto}
.gstage.s-closed .gs-wrap{display:none}
.gs-panel{max-width:600px;margin:0;padding:24px 26px;border-radius:20px;background:rgba(12,10,20,.92);border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 60px rgba(255,46,147,.1),inset 0 1px 0 rgba(255,255,255,.1);position:relative}
.gs-panel::before{content:"";position:absolute;inset:-1px;border-radius:21px;padding:1px;background:linear-gradient(135deg,rgba(255,46,147,.9),rgba(139,61,255,.6) 45%,rgba(0,184,240,.7));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.gs-close{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:700 1.3rem/1 Inter,sans-serif;cursor:pointer;display:grid;place-items:center}
.gs-close:hover{background:rgba(255,255,255,.18)}
.gs-close:focus-visible,.gs-reopen:focus-visible{outline:3px solid #00B8F0;outline-offset:2px}
.gs-reopen{display:none;position:absolute;left:max(16px,calc((100% - 1240px)/2 + 32px));bottom:28px;z-index:12;font:800 .95rem/1 Poppins,Inter,sans-serif;color:#15121F;background:linear-gradient(90deg,#FFD60A,#FF8A00);border:0;border-radius:999px;padding:14px 20px;cursor:pointer;box-shadow:0 10px 30px rgba(255,138,0,.45)}
.gstage.s-closed .gs-reopen{display:inline-flex}
.gs-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:700 .72rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#B9B2C8;margin:0 0 10px;padding-right:40px}
.gs-kicker i{width:8px;height:8px;border-radius:50%;background:#7ED321;box-shadow:0 0 10px #7ED321;animation:livepulse 2s ease-in-out infinite}
@keyframes livepulse{50%{opacity:.4}}
.gs-h1{font:800 clamp(1.9rem,3.2vw,3rem)/1.02 Poppins,Inter,sans-serif;letter-spacing:-.03em;color:#fff;margin:0 0 8px}
.gs-line{font:600 clamp(.98rem,1.25vw,1.1rem)/1.4 Inter,sans-serif;color:#F4F0FA;margin:0 0 12px}
.gs-line .poof{font-weight:800;background:linear-gradient(90deg,#FF2E93,#FF8A00,#8B3DFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.gs-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px;padding:0;list-style:none}
.gs-ladder a{display:block;height:100%;box-sizing:border-box;padding:9px 10px;border-radius:12px;text-decoration:none;color:#F4F0FA;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.gs-ladder a:hover{border-color:#FF7CC0;background:rgba(255,46,147,.12)}
.gs-ladder a:focus-visible{outline:3px solid #00B8F0;outline-offset:2px}
.gs-ladder b{display:block;font:800 .88rem/1.15 Poppins,Inter,sans-serif;color:#fff}
.gs-ladder span{display:block;margin-top:3px;font:600 .74rem/1.3 Inter,sans-serif;color:#B9B2C8}
.gs-ladder .dream{border-color:rgba(255,214,10,.6);background:rgba(255,214,10,.08)}
.gs-modes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px;padding:0;list-style:none}
.gs-modes a,.gs-modes button{font:700 .78rem/1 Inter,sans-serif;color:#F4F0FA;text-decoration:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.gs-modes a:hover,.gs-modes button:hover{border-color:#FF7CC0;background:rgba(255,46,147,.15)}
.gs-modes .lead{color:#B9B2C8;font:600 .78rem/1 Inter,sans-serif;padding-left:0;background:none;border:0}
.gcon label{display:block;font:700 .8rem/1.3 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#B9B2C8;margin:0 0 8px}
.gcon textarea{width:100%;box-sizing:border-box;min-height:88px;resize:vertical;font:500 1.05rem/1.5 Inter,sans-serif;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px 14px;caret-color:#FF2E93;transition:border-color .2s,box-shadow .2s}
.gcon textarea::placeholder{color:#8e86a3}
.gcon textarea:focus{outline:none;border-color:#FF7CC0;box-shadow:0 0 0 3px rgba(255,46,147,.25),0 0 24px rgba(255,46,147,.25)}
.gcon textarea.glow{animation:wishglow 1.2s ease-in-out 2}
@keyframes wishglow{50%{box-shadow:0 0 0 6px rgba(255,46,147,.35),0 0 30px rgba(255,46,147,.4)}}
.gcon .hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.gcon-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 10px}
.gcon .btn-start{font:800 1.1rem/1 Poppins,Inter,sans-serif;letter-spacing:.08em;color:#15121F;background:linear-gradient(90deg,#FF2E93,#FF6CB5);border:0;border-radius:12px;padding:0 30px;min-height:56px;cursor:pointer;box-shadow:0 10px 30px rgba(255,46,147,.45),0 0 0 1px rgba(255,255,255,.15) inset;transition:transform .12s,box-shadow .12s}
.gcon .btn-start:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(255,46,147,.55)}
.gcon .btn-start:focus-visible{outline:3px solid #00B8F0;outline-offset:3px}
.gcon-test{font:600 .95rem/1.3 Inter,sans-serif;color:#F4F0FA;text-decoration:underline;text-underline-offset:3px}
.gcon-meta{margin:0;font:500 .84rem/1.5 Inter,sans-serif;color:#B9B2C8}
.gcon-meta b{color:#fff}
.gcon-meta a{color:#F4F0FA}
.gcon .genie-note{display:none;margin:0 0 10px;background:#FFF0F0;color:#8A1C1C;border-radius:10px;padding:10px 12px;font-weight:600}
.gcon .genie-note.show{display:block}
.gs-foot-row{position:relative;z-index:12;max-width:1240px;margin:10px auto 0;padding:0 32px;display:flex;justify-content:flex-end;gap:10px;align-items:center}
.gs-cap{margin:0;font:500 .78rem/1.4 Inter,sans-serif;color:#B9B2C8;max-width:600px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:7px 10px}
.gs-replay{font:700 .82rem/1 Inter,sans-serif;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 14px;cursor:pointer;min-height:34px}
.gs-replay:hover{background:rgba(255,255,255,.16)}
/* at the curtain call the lamp steps right so the Genie stands between the console and the dashboard */
@media (min-width:901px){
  .gstage.s-dash .gs-lamp{left:20%}
  .gstage.s-console .gs-lamp{left:54%}
  .gstage.s-console.s-g2 .gs-genie{transform:scale(.88)}
  /* curtain call: the sample dashboard steps up into the top-right corner, leaving the Genie's right for the wish sign */
  .gstage.s-console.s-holo .gs-holo{transform-origin:100% 0;transform:perspective(1200px) rotateY(-8deg) scale(calc(var(--hs) * .62))}
  .gstage.s-console .gs-holo .wd-lock{display:none}
  .gstage.s-console .gs-holo-beam{opacity:0!important}
  .gs-wrap{max-width:none;padding:0 0 0 calc(2.6% + 22px)}
  .gs-panel{max-width:540px}
  .gs-reopen{left:calc(2.6% + 22px)}
}
/* ---------- phones and tablets: a tall stage band (most of the screen), the console always under it ---------- */
@media (max-width:900px){
  .gstage{--hdr:97px;--peek:158px;--mh:clamp(360px,calc(100vh - var(--hdr) - var(--peek)),720px);--zw:clamp(88px,24vw,124px);min-height:0;padding:var(--mh) 0 16px;justify-content:flex-start}
  .gs-scene{height:var(--mh);inset:auto 0 auto 0;top:0}
  .gs-floor{height:40%}
  .gs-pros{display:none}
  .gs-beam{width:70vw}
  .gs-onair{top:5%;left:3%;transform:none;font-size:.62rem;padding:5px 9px}
  .gs-card{top:44%;width:90%;font-size:clamp(1.5rem,7vw,2.2rem)}
  .gs-card .chips{margin-top:12px;gap:6px}
  .gs-card small{font-size:clamp(.95rem,4.2vw,1.15rem);margin-top:10px}
  .gs-card .chips span{font-size:.72rem;padding:7px 10px}
  .gs-lamp{left:34%;bottom:15%;width:clamp(74px,20vw,120px)}
  .gstage.s-console .gs-lamp{left:31%}
  .gs-gsay{font-size:.92rem;padding:9px 12px;border-width:2.5px}
  .gs-wish{max-width:min(190px,48vw)}
  .gs-wishbtn{padding:11px 12px 10px;border-radius:13px}
  .gs-wishbtn b{font-size:1.15rem}.gs-wishbtn small{font-size:.68rem;margin-top:4px}
  .gstage.s-signs:not(.s-signsout) .gs-gsay{opacity:0}
  .gs-kicker{font-size:.64rem;letter-spacing:.1em}
  .gs-f-ground,.gs-f-near{display:none}
  .gs-sun{top:30%}.gs-sun .disc{left:-50px;top:-50px;width:100px;height:100px}.gs-sun .rays{left:-240px;top:-240px;width:480px;height:480px}
  .gs-holo{right:auto;left:50%;top:6%;width:620px;max-width:none;transform:translateX(-50%) translateY(40px) scale(.48);transform-origin:50% 0}
  .gstage.s-dash .gs-holo{transform:translateX(-50%) scale(.56)}
  .gstage.s-holo .gs-holo{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.45);pointer-events:none}
  .gs-holo-beam{display:none}
  .gs-sign{top:17%;width:29.5%;padding:9px 6px 10px;border-radius:10px}
  .gs-sign.s1{left:3%}.gs-sign.s2{left:35.25%}.gs-sign.s3{left:67.5%}
  .gs-sign b{font-size:clamp(.92rem,4.2vw,1.2rem)}.gs-sign span{font-size:.7rem;margin-top:4px}.gs-sign em{font-size:.6rem;padding:4px 6px}.gs-sign i{font-size:.58rem}
  .gs-z{bottom:auto;top:calc(var(--mh) * .93 - var(--zw) * 1.083)}
  .gs-z-say{max-width:min(210px,56vw);right:70%;bottom:82%}.gs-z-say p{font-size:.88rem}
  .gs-ctrl{top:calc(5% + 2px);right:10px}.gs-ctrl button{padding:7px 11px;min-height:30px;font-size:.74rem}
  .gs-close,.gs-reopen{display:none!important}
  .gstage.s-closed .gs-wrap{display:block}
  .gs-panel{padding:18px 16px;max-width:none;border-radius:16px}
  .gs-wrap,.gs-foot-row{padding:0 16px}
  .gs-h1{font-size:clamp(1.8rem,7.6vw,2.3rem)}
  .gs-ladder{grid-template-columns:1fr;gap:6px}
  .gs-ladder a{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .gs-ladder span{margin:0;text-align:right}
  .gs-modes{display:none}
  .gcon textarea{min-height:84px;font-size:1rem}
  .gcon .btn-start{width:100%}
  .gs-foot-row{justify-content:flex-start}
}
@supports (height:1svh){@media (max-width:900px){.gstage{--mh:clamp(360px,calc(100svh - var(--hdr) - var(--peek)),720px)}}}

@media (min-width:600px) and (max-width:900px){.gs-holo{transform:translateX(-50%) translateY(40px) scale(.7)}.gstage.s-dash .gs-holo{transform:translateX(-50%) scale(.8)}.gs-sign span{font-size:.82rem}}
@media (max-width:420px){.gs-sign span{display:none}}
@media (max-width:380px){.gs-gsay{font-size:.84rem;padding:8px 10px}.gcon textarea{min-height:76px}.gs-long{display:none}.gs-wishbtn b{font-size:1.02rem;white-space:nowrap}.gs-wishbtn{padding:10px 9px 9px}}
/* ---------- reduced motion: the finished scene, no animation ---------- */
@media (prefers-reduced-motion:reduce){
  .gstage *{animation:none!important;transition:none!important}
  .gs-curtain.l{transform:scaleX(.12) translateX(-4%)}.gs-curtain.r{transform:scaleX(.12) translateX(4%)}
  .gs-beam,.gs-foot i,.gs-haze,.gs-footglow,.gs-floor .spec,.gs-flat>*,.gs-flat .flat-sh,.gs-sun .disc,.gs-sun .rays,.gs-sunwash,.gs-curtain::after{opacity:1!important;transform:none!important}
  .gs-lamp,.gs-genie{opacity:1!important;transform:none!important}
  .gs-z-actor,.gs-holo .wd-card,.gs-holo .wd-top{transform:none;opacity:1}
  .gs-fx,.gs-spot,.gs-cards,.gs-signs,.gs-gsay{display:none}
  .gs-wish{transform:none!important;opacity:1!important;pointer-events:auto}
}

/* the hologram's unlock line sits under the tiles, not over them */
.gs-holo .wd-lock{position:static;background:none;padding:6px 12px 14px;pointer-events:auto}
.gs-holo .wd-lock p small,.gs-holo .wd-sample{display:none}
.gs-holo .wd-q li:nth-child(3){display:none}
/* shorter desktops: the hologram stays above the fold and clear of the chat orb */
@media (min-width:901px) and (max-height:860px){.gs-holo{top:10%}.gs-holo .wd-q li:nth-child(n+2){display:none}.gs-holo .wd-tank{margin-top:4px}}

/* ---------- the wish console: the focus after the show (brighter, gold-edged wish box) ---------- */
.gs-panel{background:linear-gradient(160deg,rgba(46,14,66,.97),rgba(20,10,36,.97) 52%,rgba(8,24,44,.97));box-shadow:0 0 0 1px rgba(255,214,10,.22),0 40px 90px rgba(0,0,0,.65),0 0 80px rgba(255,46,147,.22),inset 0 1px 0 rgba(255,255,255,.12)}
.gcon label[for="wish"]{display:flex;align-items:center;gap:8px;color:#FFD60A;font-size:.86rem;letter-spacing:.08em}
.gcon label[for="wish"]::before{content:"";width:14px;height:14px;flex:none;background:#FFD60A;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.gcon textarea{min-height:104px;font-size:1.08rem;background:rgba(255,255,255,.07);border:2px solid rgba(255,214,10,.55);box-shadow:0 0 0 4px rgba(255,214,10,.07),0 0 34px rgba(255,46,147,.16)}
.gcon textarea:focus{border-color:#FFD60A;box-shadow:0 0 0 4px rgba(255,214,10,.22),0 0 40px rgba(255,46,147,.3)}
.gcon textarea::placeholder{color:#b3aac6}
/* the Genie grows the wish: a reaction line and idea chips under the box */
.gs-grow{margin:10px 0 2px}
.gs-grow-say{margin:0 0 8px;font:700 .92rem/1.4 Poppins,Inter,sans-serif;color:#F4F0FA}
.gs-grow-say b{color:#FFD60A}
.gs-grow-chips{display:flex;flex-wrap:wrap;gap:7px}
.gs-grow-chips button{font:700 .82rem/1.25 Inter,sans-serif;color:#15121F;background:linear-gradient(90deg,#FFE680,#FFC94A);border:0;border-radius:999px;padding:9px 13px;min-height:36px;cursor:pointer;text-align:left;box-shadow:0 4px 14px rgba(255,190,40,.25)}
.gs-grow-chips button::before{content:"+ ";font-weight:800}
.gs-grow-chips button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.gs-grow-chips button:focus-visible,.gs-grow-z:focus-visible{outline:3px solid #00B8F0;outline-offset:2px}
.gs-grow-chips button.start{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.gs-grow-chips button.start::before{content:""}
.gs-grow-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:9px;font:500 .78rem/1.4 Inter,sans-serif;color:#B9B2C8}
.gs-grow-z{font:700 .8rem/1 Inter,sans-serif;color:#F4F0FA;background:rgba(0,184,240,.14);border:1px solid rgba(0,184,240,.5);border-radius:999px;padding:8px 12px;min-height:32px;cursor:pointer}
/* the cards and signs on the stage open the wish box */
.gs-card,.gs-sign{pointer-events:auto;cursor:pointer}
@media (prefers-reduced-motion:reduce){.gs-grow-chips button:hover{transform:none}}

/* ---------- Loading your studio: five ring gauges come online (an animation of the studio's tools, not live status) ---------- */
.mw-load{position:relative;background:radial-gradient(80% 120% at 50% 0%,#2a1640 0%,#120b1e 55%,#0a0712 100%);color:#F4F0FA;padding:44px 0 48px;text-align:center;overflow:hidden}
.mw-load::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px)}
.mw-load .wrap{position:relative}
.mw-load-k{margin:0 0 22px;font:800 .9rem/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#7CF2C8;text-shadow:0 0 14px rgba(124,242,200,.5)}
.mw-rings{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(14px,3vw,34px);margin:0 auto;padding:0;list-style:none;max-width:900px}
.mw-ring{width:clamp(92px,14vw,128px);text-align:center}
.mw-ring svg{display:block;width:100%;height:auto;overflow:visible}
.mw-ring .trk{fill:none;stroke:rgba(255,255,255,.14);stroke-width:7}
.mw-ring .tick{fill:none;stroke:rgba(255,255,255,.18);stroke-width:2;stroke-dasharray:1 7.3}
.mw-ring .arc{fill:none;stroke:#3fe0d0;stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:283;stroke-dashoffset:283;filter:drop-shadow(0 0 6px rgba(63,224,208,.6))}
.mw-ring.done .arc{stroke:#FF2E93;filter:drop-shadow(0 0 8px rgba(255,46,147,.75))}
.mw-ring .val{font:800 19px/1 Poppins,Inter,sans-serif;fill:#fff}
.mw-ring.done .val{fill:#FFD60A;font-size:15px;letter-spacing:.06em}
.mw-ring b{display:block;margin-top:10px;font:800 .74rem/1.2 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#d9d2e8}
.mw-load-line{margin:26px 0 6px;font:800 clamp(1.5rem,3.4vw,2.3rem)/1.1 Poppins,Inter,sans-serif;color:#fff}
.mw-load-line span{color:#FFD60A}
.mw-load-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:800 1rem/1 Poppins,Inter,sans-serif;color:#15121F;background:linear-gradient(90deg,#FFD60A,#FF8A00);border-radius:999px;padding:14px 22px;text-decoration:none;box-shadow:0 10px 30px rgba(255,138,0,.35)}
.mw-load-cta:focus-visible{outline:3px solid #00B8F0;outline-offset:3px}
.mw-load-note{margin:14px auto 0;max-width:560px;font:500 .78rem/1.45 Inter,sans-serif;color:#a79fbb}
/* desktop: the console sits on the stage, so it stays compact enough to fit the screen with the wish ideas */
@media (min-width:901px){
  .gstage .gs-modes{display:none}
  .gstage .gs-line{margin-bottom:10px}
  .gstage .gs-ladder{margin-bottom:10px}
  .gstage .gcon textarea{min-height:80px}
  .gstage .gs-grow{margin-top:8px}
  .gstage .gs-grow-chips button{padding:7px 11px;min-height:30px;font-size:.78rem}
  .gstage .gs-grow-foot{margin-top:6px}
  .gstage .gcon-row{margin:10px 0 8px}
}
@media (min-width:901px) and (max-height:860px){.gstage .gs-line{display:none}.gstage .gs-grow-foot span{display:none}}
@media (min-width:901px){
  .gstage .gs-panel{max-width:590px}
  .gstage .gs-h1{font-size:clamp(1.8rem,2.5vw,2.45rem)}
  .gstage .gs-grow-chips button.start:nth-child(4){display:none}
  .gstage .gs-grow-foot{flex-wrap:nowrap}
  .gstage .gs-grow-foot span{flex:1;min-width:0}
  .gstage .gs-grow-z{flex:none}
}

/* ---------- stage pages: slim top bar (logo, call, Start for $5); the six tiles ride in a band at the foot of the stage
   (desktop: the bottom of the first screen; phones: right under the stage picture, the wish console peeking below).
   Same tile design as the header (nav.css). ---------- */
.site-header.mh-slim .mh-bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand . acts"}
.gstage .mh-band{position:relative;z-index:14;flex:none;width:100%;background:linear-gradient(180deg,#0B1A3A 0%,#081429 100%);border-top:1px solid rgba(56,240,255,.2);border-bottom:1px solid rgba(56,240,255,.16);box-shadow:0 -10px 30px -16px rgba(3,8,24,.9);color:#CFDBF1}
.gstage .mh-band .mh-tiles{box-sizing:border-box;max-width:1400px;margin:0 auto;padding:5px 12px;border-top:0}
@media (min-width:901px){
  .gstage{--bandh:78px;padding-bottom:0}
  .gstage .gs-scene{bottom:var(--bandh)}
  .gstage .gs-foot-row{position:absolute;right:max(16px,calc((100% - 1240px)/2 + 32px));bottom:calc(var(--bandh) + 12px);left:auto;margin:0;padding:0;max-width:min(560px,calc(100% - 700px))}
  .gstage .gs-wrap{margin-bottom:16px}
  .gstage .mh-band{margin-top:0}
}
@media (max-width:999px){
  .site-header.mh-slim .mh-bar{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand acts";padding-bottom:8px}
  .gstage .mh-band .mh-tiles{margin:0;padding:4px 8px}
  .gstage .mh-band .mh-t{flex:1 1 0;max-width:150px}
}
@media (max-width:900px){
  .gstage{--hdr:97px;--peek:158px}
  .gstage .mh-band{order:-1;margin:0 0 14px}
}
@media (max-width:400px){.gstage{--hdr:87px}}
@media (max-width:360px){.gstage{--hdr:65px;--peek:150px}}
@media (max-width:640px){.gstage .mh-band .mh-tiles{padding:3px 2px}.gstage .mh-band .mh-t{flex:1 1 auto}}
.gstage .gs-replay{white-space:nowrap;flex:none}