/* Pre-generation atmosphere, recovered from the original Studio teaser language.
   All geometry sits outside document flow. No generator/tracking hooks live here. */
body:has(#builderScreen.active){background:#0c1422}
body:has(#builderScreen.active) .ambient{opacity:.22}
body:has(#builderScreen.active) .studio-topbar{background:#0d1625;border-bottom-color:rgba(166,189,227,.12);backdrop-filter:none}
body:has(#builderScreen.active) .studio-mark{color:#f3f6ff}
body:has(#builderScreen.active) .studio-mark small{color:#8c9bb3}
body:has(#builderScreen.active) .back-link{color:#b6c2d7}
body:has(#builderScreen.active) .secure-pill{background:rgba(255,255,255,.035);border-color:rgba(170,196,236,.13);color:#a8b7cd}
body:has(#builderScreen.active) .studio-footer{background:#0c1422;border-color:rgba(166,189,227,.1)}
body:has(#builderScreen.active) .studio-footer-brand{color:#eff4ff}
body:has(#builderScreen.active) .studio-footer nav a{color:#9eacc3}
#builderScreen{position:relative;isolation:isolate}
#builderScreen .hero-copy{position:relative;z-index:1}
#builderScreen .hero-copy h1{color:#f1f5ff}
#builderScreen .hero-copy h1 em{color:#a0b5ff}
#builderScreen .hero-copy p{color:#adbdd3}
#builderScreen .hero-copy .eyebrow{color:#89a5cd}
#builderScreen .hero-copy .eyebrow span{background:#7c9eff}
#builderScreen .builder-layout{position:relative;z-index:2}
#builderScreen .form-card{background:linear-gradient(130deg,#fff,#f4f7fd);border-color:#d4def1;box-shadow:0 1px 0 rgba(255,255,255,.3),0 20px 64px rgba(0,5,17,.26);backdrop-filter:none}
#builderScreen .form-card:before{content:'';position:absolute;left:24px;right:24px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#aecaff 24%,#f8ffff 50%,#b0e9ed 76%,transparent);pointer-events:none}
#builderScreen #studioForm .input-shell{border-color:#d8e0ed;box-shadow:inset 0 1px 2px rgba(18,36,69,.035)}
#builderScreen #studioForm .input-shell:focus-within{border-color:rgba(var(--brand-rgb),.65);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.11),inset 0 1px 2px rgba(18,36,69,.035)}
#builderScreen #studioForm .field-wrap.invalid .input-shell{border-color:#e9a4a4}
#builderScreen #studioForm .software-option{border-color:#dce3ee;background:linear-gradient(150deg,#fff,#f9fbff)}
#builderScreen #studioForm .software-option.selected{border-color:rgba(var(--brand-rgb),.62);background:linear-gradient(135deg,#fff,var(--brand-soft));box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb),.13),0 3px 10px rgba(var(--brand-rgb),.07)}
#builderScreen #studioForm .upload-zone{background:linear-gradient(105deg,#f1f5fb,#fafcff);border-color:#c4cfe1}
#builderScreen #studioForm .upload-zone:hover,#builderScreen #studioForm .upload-zone.dragging{border-color:rgba(var(--brand-rgb),.6);background:var(--brand-soft)}
#builderScreen #studioForm .build-button{background:linear-gradient(108deg,#14243e,#182e52 66%,#1d395f);box-shadow:inset 0 1px 0 rgba(178,207,255,.2),0 9px 22px rgba(18,36,65,.2)}
#builderScreen #studioForm .build-button:hover{box-shadow:inset 0 1px 0 rgba(178,207,255,.3),0 12px 25px rgba(18,36,65,.26)}
#builderScreen #studioForm .build-arrow{background:linear-gradient(135deg,#526eff,#4269ea);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
/* One clipped stage, with the control surface occupying its quiet center. */
.studio-environment{position:absolute;inset:-12px calc((100% - 100vw)/2) -44px;z-index:-1;overflow:clip;pointer-events:none;user-select:none;background:radial-gradient(ellipse at 80% 38%,rgba(53,84,137,.24),transparent 42%),radial-gradient(ellipse at 14% 72%,rgba(38,110,137,.13),transparent 37%)}
.studio-environment:after{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(12,20,34,.12),transparent 33%,transparent 82%,#0c1422),radial-gradient(ellipse 490px 160px at 50% 10%,#0c1422 38%,rgba(12,20,34,.84) 66%,transparent 100%);pointer-events:none}
.studio-env-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(173,200,241,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(173,200,241,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 75%,transparent)}
.studio-env-contour{position:absolute;left:50%;top:238px;width:1280px;height:380px;border:1px solid rgba(137,169,222,.12);border-radius:50%;transform:translateX(-50%) rotate(-20deg);box-shadow:0 0 0 32px rgba(103,156,208,.015)}
.studio-environment .studio-env-desktop{left:calc(50% + 180px);top:145px;width:640px;height:374px;border-radius:16px;transform:perspective(1300px) rotateY(-22deg) rotateZ(9deg);transform-origin:center;animation:none;background:linear-gradient(145deg,#24354e,#111c2f 72%);border-color:rgba(149,180,227,.36);box-shadow:0 1px 0 rgba(207,227,255,.12),0 24px 46px rgba(2,8,20,.2);opacity:.9}
.studio-environment .teaser-top{height:28px;background:linear-gradient(90deg,#2a3a52,#1c2b40);border-bottom:1px solid rgba(166,194,234,.12);gap:5px;padding:0 12px}
.studio-environment .teaser-top i{width:5px;height:5px;background:#8194b0}
.studio-environment .teaser-top span{width:200px;height:9px;background:rgba(177,203,239,.1)}
.studio-environment .teaser-top b{font:600 7px 'Manrope',sans-serif;letter-spacing:.14em;color:#b1c3dd}
.studio-env-workspace{display:grid;grid-template-columns:66px 1fr;height:calc(100% - 28px)}
.studio-env-rail{border-right:1px solid rgba(148,174,213,.1);padding:22px 15px;background:rgba(6,13,25,.25)}
.studio-env-rail i{display:block;width:25px;height:25px;border:1px solid rgba(141,167,235,.5);border-radius:7px;background:linear-gradient(140deg,#5b7ba8,#273e60);margin-bottom:24px}
.studio-env-rail span{display:block;height:5px;margin-bottom:20px;background:#50607a;border-radius:2px}
.studio-env-rail span:nth-of-type(2){background:#8fa9f7;box-shadow:0 0 12px rgba(118,146,233,.16)}
.studio-env-canvas{padding:26px}
.studio-environment .teaser-line{height:7px;background:#6d809d;opacity:.7}
.studio-environment .teaser-line.w26{height:4px;background:#485b79}
.studio-env-modules{display:flex;gap:12px;margin:24px 0 20px}
.studio-env-modules i{position:relative;display:block;width:104px;height:60px;border:1px solid rgba(173,198,230,.17);border-radius:8px;background:linear-gradient(140deg,rgba(155,187,244,.12),rgba(119,144,194,.03))}
.studio-env-modules i:before{content:'';position:absolute;width:13px;height:13px;left:12px;top:12px;border:1px solid #748eb5;border-radius:4px}
.studio-env-modules i:after{content:'';position:absolute;width:46px;height:4px;left:12px;bottom:12px;background:#536986;border-radius:2px}
.studio-env-modules i:nth-child(2){transform:translateY(-8px);border-color:rgba(158,185,255,.4);background:linear-gradient(145deg,#304766,#243650)}
.studio-env-records{border-top:1px solid rgba(150,181,224,.14)}
.studio-env-records>span{display:flex;align-items:center;gap:14px;height:42px;border-bottom:1px solid rgba(150,181,224,.09)}
.studio-env-records i{width:13px;height:13px;border-radius:4px;border:1px solid #607c9f}
.studio-env-records b{height:4px;width:120px;background:#475f7f;border-radius:2px}
.studio-env-records em{margin-left:auto;width:38px;height:12px;border:1px solid rgba(131,184,202,.3);background:rgba(78,149,171,.07);border-radius:4px}
.studio-env-plane{position:absolute;left:calc(50% - 760px);top:224px;width:330px;height:148px;padding:24px;transform:perspective(900px) rotateY(22deg) rotateZ(-12deg);border:1px solid rgba(156,186,230,.27);border-radius:12px;background:linear-gradient(130deg,#17273d,#203551);box-shadow:0 16px 40px rgba(0,5,19,.2)}
.studio-env-plane>span,.studio-env-workflow>span{display:block;color:#99afd0;font:600 7px 'Manrope',sans-serif;letter-spacing:.18em}
.studio-env-plane>i{display:inline-block;width:42px;height:35px;margin:18px 10px 0 0;border-radius:6px;border:1px solid rgba(148,183,236,.23);background:linear-gradient(145deg,rgba(132,163,240,.15),transparent)}
.studio-env-plane>i:nth-of-type(2){border-color:#6a87bb;background:rgba(131,168,245,.15)}
.studio-env-plane>div{height:3px;width:130px;margin-top:14px;background:linear-gradient(90deg,#536d97,transparent)}
.studio-environment .studio-env-phone{left:calc(50% - 625px);right:auto;top:438px;bottom:auto;width:184px;height:342px;padding:32px 15px 18px;transform:rotate(-12deg);animation:none;border-radius:30px;background:linear-gradient(145deg,#27364e,#0f1b2d 65%);border-color:rgba(156,185,230,.38);box-shadow:inset 0 0 0 4px rgba(118,148,192,.08),0 25px 46px rgba(0,5,19,.25)}
.studio-environment .studio-env-phone:before{border-color:rgba(163,191,232,.2);border-radius:25px}
.studio-environment .phone-notch{height:10px;width:54px;border-radius:0 0 8px 8px;background:#0c1422}
.studio-env-phone-brand{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.studio-env-phone-brand i{width:24px;height:24px;border:1px solid #728dc4;border-radius:7px;background:linear-gradient(145deg,#5c76a3,#263951)}
.studio-env-phone-brand span{width:65px;height:5px;border-radius:2px;background:#5c7295}
.studio-environment .phone-mini-head{height:5px;width:55%;border-radius:2px;background:#637c9d;margin-bottom:12px}
.studio-environment .phone-mini-card{height:64px;margin-bottom:16px;border-radius:10px;border:1px solid rgba(160,187,242,.24);background:linear-gradient(135deg,#304875,#243953);position:relative}
.studio-environment .phone-mini-card:before,.studio-environment .phone-mini-card:after{content:'';position:absolute;height:4px;left:12px;top:15px;width:40px;border-radius:2px;background:#8b9fc3}
.studio-environment .phone-mini-card:after{top:33px;width:70px;background:#4f6993}
.studio-env-phone-row{display:flex;align-items:center;gap:10px;height:34px;border-bottom:1px solid rgba(151,181,225,.13)}
.studio-env-phone-row i{width:12px;height:12px;border:1px solid #627c9e;border-radius:4px}
.studio-env-phone-row span{width:64px;height:4px;background:#405a7a;border-radius:2px}
.studio-env-phone-dock{position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-around;border-top:1px solid rgba(151,181,225,.14);padding-top:14px}
.studio-env-phone-dock i{width:9px;height:9px;border:1px solid #7b94b6;border-radius:3px}
.studio-env-workflow{position:absolute;left:calc(50% + 420px);top:610px;width:280px;height:136px;transform:rotate(8deg);padding:21px;border:1px solid rgba(156,186,230,.23);border-radius:12px;background:linear-gradient(125deg,#20364c,#15253a);box-shadow:0 16px 36px rgba(0,5,19,.18)}
.studio-env-workflow>div{display:flex;align-items:center;gap:6px;margin-top:20px}
.studio-env-workflow i{width:23px;height:23px;border:1px solid #668799;border-radius:6px;background:rgba(105,168,189,.08)}
.studio-env-workflow i:last-child{border-color:#7798d3;background:rgba(116,149,223,.13)}
.studio-env-workflow b{width:28px;height:1px;background:linear-gradient(90deg,#4e697e,#7994b2)}
.studio-env-workflow>em{display:block;width:106px;height:3px;margin-top:14px;background:#425d76;border-radius:2px}
.studio-env-workflow>em:last-child{width:70px;margin-top:7px}
/* Reveal only: no loops, pointer tracking, or permanent animated layers. */
@media(prefers-reduced-motion:no-preference){.studio-environment{animation:studioEnvironmentIn 1.2s ease-out both}}
@keyframes studioEnvironmentIn{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){
  .studio-environment .studio-env-desktop{left:calc(50% + 155px);top:168px;opacity:.65}
  .studio-env-plane{left:calc(50% - 650px)}
  .studio-environment .studio-env-phone{left:calc(50% - 525px);opacity:.65}
  .studio-env-workflow{left:calc(50% + 345px)}
}
@media(max-width:600px){
  .studio-environment{inset:-18px calc((100% - 100vw)/2) -28px;background:radial-gradient(ellipse at 100% 10%,rgba(74,113,167,.23),transparent 55%)}
  .studio-environment:after{background:linear-gradient(180deg,rgba(12,20,34,.1),rgba(12,20,34,.4) 21%,transparent 44%,#0c1422 98%),linear-gradient(90deg,rgba(12,20,34,.72),rgba(12,20,34,.32) 65%,transparent)}
  .studio-env-grid{background-size:34px 34px;opacity:.7}
  .studio-env-contour{left:70%;top:125px;width:560px;height:170px;opacity:.65}
  .studio-environment .studio-env-desktop{left:42%;top:-28px;width:380px;height:236px;transform:perspective(900px) rotateY(-18deg) rotateZ(14deg);opacity:.4;border-radius:12px}
  .studio-environment .teaser-top{height:21px;padding:0 8px}
  .studio-environment .teaser-top span{width:100px;height:6px}
  .studio-env-workspace{grid-template-columns:40px 1fr}
  .studio-env-rail{padding:12px 8px}
  .studio-env-canvas{padding:16px}
  .studio-env-modules{gap:8px;margin:16px 0}
  .studio-env-modules i{height:43px;width:68px}
  .studio-env-plane{left:-125px;top:280px;opacity:.5;width:260px;height:125px}
  .studio-environment .studio-env-phone{left:auto;right:-122px;top:400px;opacity:.42;transform:rotate(12deg)}
  .studio-env-workflow{display:none}
  #builderScreen .form-card{background:linear-gradient(135deg,#fff,#f2f6fc);box-shadow:0 14px 40px rgba(0,5,19,.22)}
}
@media(prefers-reduced-motion:reduce){.studio-environment{animation:none}}