/* ===== hero: headline + pinned "Roblox Studio + agent" window that assembles slots-anime on scroll ===== */
#hero.sec{padding:0}
#hero .hero-track{position:relative;height:360vh}
#hero .hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--wtop:84px}

/* corner decoration: isometric stud baseplate with one yellow stud */
#hero .hero-corner{position:absolute;top:22px;right:max(-16px,calc((100vw - 1440px) / 2 - 16px));width:min(560px,44vw);aspect-ratio:560/380;pointer-events:none;user-select:none;will-change:transform,opacity}
#hero .hero-corner img{position:absolute;inset:0;width:100%;height:100%}
/* bricks layer drifts a touch against the cursor, so the stack reads as standing on the plate */
#hero .hero-bricks{transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}

/* left gutter: exploded brick tower on a baseplate fragment (wide screens only) */
#hero .hero-loose{display:none;position:absolute;top:clamp(56px,9vh,110px);left:max(0px,calc((100vw - var(--max)) / 4 - 170px));width:clamp(240px,calc((100vw - var(--max)) / 2 + 20px),360px);aspect-ratio:360/420;pointer-events:none;user-select:none;will-change:transform,opacity}
#hero .hero-loose img{width:100%;height:100%;transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media (min-width:1500px) and (min-height:640px){#hero .hero-loose{display:block}}

/* ---------- head ---------- */
#hero .hero-head{position:relative;padding-top:clamp(48px,8.5vh,92px);will-change:transform,opacity}
#hero .hero-head .h1{max-width:15.5em;font-size:clamp(40px,5.6vw,72px)}
#hero .hero-lede{max-width:540px;margin-top:24px;font-size:17.5px}
#hero .hero-cta{display:flex;align-items:center;gap:14px;margin-top:30px}
#hero .hero-cta .btn-ghost{padding:0 8px}

/* ---------- window ---------- */
#hero .hero-win{position:absolute;left:0;right:0;margin:0 auto;top:var(--wtop);
  width:min(1200px,calc(100vw - 2 * var(--gut)));height:min(calc(100svh - var(--wtop) - 60px),800px);
  display:flex;flex-direction:column;background:var(--night);color:var(--ntext);border-radius:12px;
  font:400 12px/1.4 var(--sans);letter-spacing:-.003em;
  box-shadow:0 0 0 1px rgba(10,9,12,.9),inset 0 1px 0 rgba(255,255,255,.07),0 2px 4px rgba(23,22,27,.08),0 24px 48px -16px rgba(23,22,27,.32),0 70px 120px -40px rgba(23,22,27,.42);
  transform-origin:50% 0;will-change:transform}
#hero .hero-win svg{flex:none}
#hero .hw-title{height:38px;flex:none;display:flex;align-items:center;gap:16px;padding:0 12px 0 14px;background:#1a191f;border-bottom:1px solid #08070a;border-radius:12px 12px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
#hero .hw-dots{display:flex;gap:7px}
#hero .hw-dots i{width:11px;height:11px;border-radius:50%;background:#3a3842;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.4)}
#hero .hw-app{display:flex;align-items:center;gap:7px;font-weight:600;color:#c9c5cd;font-size:12px}
#hero .hw-app svg{width:15px;height:15px;color:#e8e4dc}
#hero .hw-tabs{display:flex;align-items:flex-end;align-self:stretch;gap:2px;margin-left:6px}
#hero .hw-tab{display:flex;align-items:center;gap:7px;height:29px;padding:0 10px 0 11px;border-radius:7px 7px 0 0;color:#8f8b96;font-size:12px}
#hero .hw-tab svg{width:14px;height:14px;color:#8fb8ff}
#hero .hw-tab i{font-style:normal;color:#6c6874;margin-left:8px;font-size:13px}
#hero .hw-tab.on{background:var(--night2);color:#ece8e0;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px #08070a}
#hero .hw-tab.add{padding:0 8px;font-size:15px;color:#6c6874}
#hero .hw-conn{margin-left:auto;display:flex;align-items:center;gap:7px;height:22px;padding:0 9px;border-radius:6px;background:#121116;box-shadow:inset 0 0 0 1px #2a2830;font:500 11px var(--mono);color:#a29eaa;letter-spacing:0}
#hero .hw-conn b{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(34,179,94,.18)}
#hero .hw-menu{height:32px;flex:none;display:flex;align-items:center;gap:2px;padding:0 10px;background:var(--night2);border-bottom:1px solid #08070a}
#hero .hw-menu span{padding:0 10px;height:24px;display:flex;align-items:center;border-radius:5px;color:#8f8b96;font-weight:500}
#hero .hw-menu span.on{color:#f1ede5;background:#2a2930}
#hero .hw-menu .hw-menu-r{margin-left:auto;gap:6px;color:#c9c5cd;box-shadow:inset 0 0 0 1px #34323b}
#hero .hw-menu .hw-menu-r svg{width:12px;height:12px;color:var(--ok)}
#hero .hw-body{flex:1;min-height:0;display:grid;grid-template-columns:204px minmax(0,1fr) 240px;border-radius:0 0 12px 12px;overflow:hidden}

/* side panels */
#hero .hw-panel{background:#16151b;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#hero .hw-explorer{border-right:1px solid #08070a}
#hero .hw-props{border-left:1px solid #08070a}
#hero .hw-ph{height:30px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px;font-weight:600;color:#ebe7df;border-bottom:1px solid #222129;white-space:nowrap}
#hero .hw-ph-i{margin-left:auto;color:#6c6874}
#hero .hw-ph-sub{margin-left:auto;font:500 11px var(--mono);color:#7d7985;overflow:hidden;text-overflow:ellipsis;min-width:0}
#hero .hw-filter{flex:none;display:flex;align-items:center;gap:7px;margin:7px 8px;height:24px;padding:0 8px;border-radius:5px;background:#0f0e13;box-shadow:inset 0 0 0 1px #26242d;color:#5f5b67;font-size:11px;white-space:nowrap;overflow:hidden}
#hero .hw-filter svg{width:12px;height:12px}
#hero .hw-tree{list-style:none;margin:0;padding:2px 0 0}
#hero .hw-tree li{position:relative;display:flex;align-items:center;gap:6px;height:22px;padding-left:calc(8px + var(--dp,0) * 14px);padding-right:8px;color:#d2cec6;white-space:nowrap;transition:opacity .25s,transform .25s var(--ease)}
#hero .hw-tree li .c{width:9px;height:9px;color:#6c6874;flex:none;transition:transform .2s}
#hero .hw-tree li .c.x{transform:rotate(90deg)}
#hero .hw-tree li .c.n{visibility:hidden}
#hero .hw-tree li .ic{width:14px;height:14px}
#hero .hw-tree li em{font-style:normal;color:#6c6874;margin-left:auto;font:400 10.5px var(--mono)}
#hero .hw-tree li.pend{opacity:0;transform:translateX(-6px)}
#hero .hw-tree li.sel{background:#1d4f86;color:#fff}
#hero .hw-tree li.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sel)}
#hero .hw-tree li.sel em{color:#a9cdf5}
#hero .hw-plist{overflow:hidden}
#hero .hw-pg{display:flex;align-items:center;gap:6px;height:22px;padding:0 10px;background:#1c1b22;color:#d8d4cc;font-weight:600;font-size:11.5px;border-top:1px solid #24232a;border-bottom:1px solid #24232a}
#hero .hw-pg svg{width:9px;height:9px;color:#6c6874;transform:rotate(90deg)}
#hero .hw-pr{display:grid;grid-template-columns:44% 1fr;height:22px;border-bottom:1px solid #1e1d24;font-size:11.5px}
#hero .hw-pr>span{display:flex;align-items:center;padding:0 10px 0 18px;color:#99959f;white-space:nowrap;overflow:hidden;border-right:1px solid #1e1d24}
#hero .hw-pr>b{display:flex;align-items:center;gap:6px;padding:0 8px;font-weight:400;color:#ece8e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .7s}
#hero .hw-pr>b.m{font:400 11px var(--mono);letter-spacing:-.01em}
#hero .hw-pr>b.dim{color:#7d7985}
#hero .hw-pr>b.chg{background:rgba(31,140,255,.22);transition:none}
#hero .hw-pr>b i{width:10px;height:10px;border-radius:2px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}

/* viewport */
#hero .hw-view{position:relative;display:flex;flex-direction:column;min-width:0;background:#0e0d12}
#hero .hw-vbar{height:30px;flex:none;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid #08070a;background:#141318;font:400 11px var(--mono);color:#7d7985;letter-spacing:0}
#hero .hw-crumb i{font-style:normal;color:#4a4752;margin:0 3px}
#hero .hw-crumb b{font-weight:500;color:#d2cec6}
#hero .hw-res{margin-left:auto}
#hero .hw-canvas{position:relative;flex:1;min-height:0;overflow:hidden;perspective:1700px;perspective-origin:50% 40%;
  background:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1.6px) 0 0/20px 20px,radial-gradient(120% 90% at 50% 45%,#1a1920 0%,#0e0d12 70%)}
#hero .hw-scene{position:absolute;left:50%;top:50%;width:1050px;height:590px;margin:-295px 0 0 -525px;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform;--k:.6}
#hero .hw-scene::before{content:"";position:absolute;inset:0;border:calc(1px / var(--k)) dashed rgba(255,255,255,.16);border-radius:calc(2px / var(--k))}
#hero .hw-piece{position:absolute;transform-origin:50% 50%;will-change:transform;--ol:0}
#hero .hw-piece img{position:absolute;max-width:none;pointer-events:none;user-select:none}
#hero .hw-piece .o{position:absolute;inset:0;border:calc(1px / var(--k)) solid var(--sel);opacity:var(--ol);pointer-events:none}
#hero .hw-piece .t{position:absolute;left:calc(-1px / var(--k));bottom:100%;padding:calc(1.5px / var(--k)) calc(5px / var(--k));border-radius:calc(3px / var(--k)) calc(3px / var(--k)) 0 0;background:var(--sel);color:#fff;font:500 calc(10.5px / var(--k))/1.3 var(--mono);letter-spacing:0;white-space:nowrap;opacity:var(--ol)}
#hero .hw-piece .t s{text-decoration:none;opacity:.7;margin-left:calc(5px / var(--k))}
#hero .hw-piece .hd{position:absolute;inset:0;opacity:0;pointer-events:none}
#hero .hw-piece .hd i{position:absolute;width:calc(7px / var(--k));height:calc(7px / var(--k));background:#fff;border:calc(1px / var(--k)) solid var(--sel);margin:calc(-3.5px / var(--k))}
#hero .hw-piece .hd i:nth-child(1){left:0;top:0}#hero .hw-piece .hd i:nth-child(2){right:0;top:0;margin-right:calc(-3.5px / var(--k))}
#hero .hw-piece .hd i:nth-child(3){left:0;bottom:0;margin-bottom:calc(-3.5px / var(--k))}#hero .hw-piece .hd i:nth-child(4){right:0;bottom:0;margin-right:calc(-3.5px / var(--k));margin-bottom:calc(-3.5px / var(--k))}
#hero .hw-piece .sl{position:absolute;inset:0;opacity:0;pointer-events:none}
#hero .hw-piece .sl i{position:absolute;background:repeating-linear-gradient(90deg,#7cc0ff 0 calc(4px / var(--k)),transparent 0 calc(8px / var(--k)))}
#hero .hw-piece .sl i.h{left:0;right:0;height:calc(1px / var(--k))}
#hero .hw-piece .sl i.v{top:0;bottom:0;width:calc(1px / var(--k));background:repeating-linear-gradient(180deg,#7cc0ff 0 calc(4px / var(--k)),transparent 0 calc(8px / var(--k)))}
#hero .hw-piece.act{--ol:1}
#hero .hw-piece.act .hd{opacity:1}
#hero .hw-piece.act .sl{opacity:.9}
#hero .hw-piece.act .o{border-width:calc(1.5px / var(--k))}

#hero .hw-built{position:absolute;left:50%;bottom:18px;display:flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 11px;border-radius:99px;background:#0f1f15;box-shadow:inset 0 0 0 1px rgba(34,179,94,.45),0 8px 24px -8px rgba(0,0,0,.6);color:#8be3ae;font:500 12px var(--sans);opacity:0;transform:translate(-50%,8px);will-change:transform,opacity}
#hero .hw-built b{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(34,179,94,.2)}
#hero .hw-built svg{width:14px;height:14px}

#hero .hero-note{position:absolute;right:0;top:100%;margin:14px 0 0;font:400 12px var(--sans);color:var(--ink2);opacity:0;transition:opacity .5s}
#hero .hero-note code{font:400 11.5px var(--mono);color:var(--ink2)}
#hero .hero-win.done .hero-note{opacity:1}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  #hero .hw-body{grid-template-columns:188px minmax(0,1fr) 224px}
  #hero .hw-tabs .hw-tab.add,#hero .hw-conn{display:none}
}
@media (max-width:980px) and (min-width:761px){
  #hero .hw-props{display:none}
  #hero .hw-body{grid-template-columns:188px minmax(0,1fr)}
}

/* ---------- mobile: no pin, simplified mock, short auto-play ---------- */
@media (max-width:760px){
  #hero .hero-track{height:auto}
  #hero .hero-stage{position:relative;height:auto;overflow:visible;padding-bottom:72px}
  #hero .hero-corner{width:300px;right:-90px;top:-20px;opacity:.75}
  #hero .hero-head{padding-top:78px}
  #hero .hero-head .h1{font-size:clamp(34px,9.6vw,44px)}
  #hero .hero-lede{font-size:16px}
  #hero .hero-cta{flex-wrap:wrap;gap:6px 10px}
  #hero .hero-win{position:relative;top:auto;margin-top:44px;height:auto;width:calc(100vw - 2 * var(--gut));border-radius:10px}
  #hero .hw-title{height:34px;border-radius:10px 10px 0 0;gap:10px}
  #hero .hw-app,#hero .hw-conn,#hero .hw-tab.add,#hero .hw-tab i{display:none}
  #hero .hw-menu{display:none}
  #hero .hw-body{display:block;border-radius:0 0 10px 10px}
  #hero .hw-panel{display:none}
  #hero .hw-canvas{flex:none;aspect-ratio:1050/660}
  #hero .hero-note{position:static;margin:14px 2px 0;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  #hero .hero-track{height:auto}
  #hero .hero-stage{position:relative;height:auto;overflow:visible;padding-bottom:96px}
  #hero .hero-win{position:relative;top:auto;margin-top:56px;height:min(calc(100svh - 120px),760px)}
  #hero .hero-note{opacity:1}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  #hero .hero-win{height:auto}
}