body{overflow-x:hidden;background:#f7f5ff}
.ambient{position:fixed;z-index:-1;inset:0;background:radial-gradient(ellipse at 85% 0%,#e7c8ff8c,transparent 42%),radial-gradient(ellipse at 10% 20%,#ffd0ea55,transparent 36%),radial-gradient(ellipse at 70% 80%,#ffd8bf55,transparent 40%);pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:40;pointer-events:none}
.scroll-progress span{display:block;height:100%;background:var(--gradient);transform:scaleX(var(--progress,0));transform-origin:left center}
header{position:sticky;top:0;z-index:30;width:100%;max-width:none;background:#fff;padding:18px max(24px,calc((100% - 1200px) / 2));box-shadow:0 1px 0 #efeaf6;transition:box-shadow .3s}
header.is-stuck{box-shadow:0 12px 30px #1a102014}
header button{margin-left:0}
header .theme-toggle{margin-left:auto}
#logout{margin-left:4px}
.wordmark{transition:transform .35s}
.wordmark:hover{transform:rotate(-2deg)}
.tag{animation:tag-in .6s ease both}
.top{position:relative;grid-template-columns:1.05fr .95fr;align-items:center;gap:48px}
.top>div:first-child{grid-column:1}
.studio-art{grid-column:2}
.top>div:first-child,.top>p,.studio-art,#signin,#mode{animation:rise .7s cubic-bezier(.16,.84,.32,1) both}
.top>p{animation-delay:.08s}
.studio-art{animation-delay:.16s}
#signin{animation-delay:.22s}
h1 span{background-image:linear-gradient(110deg,#ad00ff,#fa2181 35%,#ffd0ea 50%,#fa2181 65%,#ff6928);background-size:220% 100%;animation:shimmer 7s ease-in-out infinite;-webkit-background-clip:text;background-clip:text;color:transparent}
.path-step b{-webkit-background-clip:text}
.studio-path{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 26px}
.path-step{display:flex;align-items:center;gap:10px;width:100%;min-height:0;padding:12px 14px;border-radius:16px;border:1px solid #efe6f6;background:#fff;color:#151325;font-size:13px;font-weight:700;text-align:left;box-shadow:none;cursor:pointer;transition:transform .3s,border-color .3s,box-shadow .3s}
.path-step b{font-size:11px;letter-spacing:.08em;background:var(--gradient);background-clip:text;color:transparent}
.path-step:hover,.path-step.is-on{transform:translateY(-3px);border-color:#f3b6e4;box-shadow:0 12px 28px #e23a8a18;filter:none}
.studio-art{position:relative;min-height:340px;border-radius:28px;overflow:hidden;box-shadow:0 24px 60px #7a2ca322}
.studio-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 42%,#140818c7);pointer-events:none}
.studio-reel{position:relative;height:420px}
.studio-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:reel 12s infinite}
.studio-reel img:nth-child(2){animation-delay:4s}
.studio-reel img:nth-child(3){animation-delay:8s}
.float-likes{position:absolute;right:18px;top:72px;display:grid;gap:8px;z-index:2}
.float-likes svg{width:22px;height:22px;fill:#ff2d78;filter:drop-shadow(0 8px 10px #ff2d7866);animation:floaty 3.2s ease-in-out infinite}
.float-likes svg:nth-child(2){animation-delay:.35s;justify-self:end}
.float-likes svg:nth-child(3){animation-delay:.7s;width:16px;height:16px}
.float-likes svg:nth-child(4){animation-delay:1s;width:14px;height:14px;justify-self:end}
.studio-faces{position:absolute;left:16px;bottom:46px;display:flex;z-index:2}
.studio-faces img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-10px;box-shadow:0 6px 16px #0003}
.studio-faces img:first-child{margin-left:0}
.studio-live{position:absolute;top:16px;right:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;background:#fff;color:#c21872;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:99px;padding:7px 10px;animation:glow 1.8s ease-in-out infinite}
.studio-live i{width:7px;height:7px;border-radius:50%;background:#ee2a7b;box-shadow:0 0 0 0 #ee2a7b88;animation:blink 1.4s ease-out infinite}
.studio-caption{position:absolute;left:16px;bottom:16px;z-index:2;color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em}
#signin,.accounts{transition:box-shadow .35s}
#signin:hover,.accounts:hover{box-shadow:0 16px 40px #3a145010}
#demo-login,.sim-start{min-width:220px}
.top #demo-login{margin-top:8px}
#message,#studio{scroll-margin-top:96px}
.signin-faces{display:flex;margin-bottom:14px}
.signin-faces img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid #fff;margin-left:-12px;box-shadow:0 0 0 2px #f3c6ff}
.signin-faces img:first-child{margin-left:0}
button:not(.secondary):not(.quiet):not(.theme-toggle):not(.path-step){position:relative;overflow:hidden}
button:not(.secondary):not(.quiet):not(.theme-toggle):not(.path-step):after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffff73 50%,transparent 70%);transform:translateX(-130%)}
button:not(.secondary):not(.quiet):not(.theme-toggle):not(.path-step):hover:after{animation:sweep .75s ease}
input,textarea,select{transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:#e35cff;box-shadow:0 0 0 4px #f4d9ff}
#studio:not([hidden]){animation:rise .55s ease}
.campaign.arrive{animation:arrive .55s cubic-bezier(.16,.84,.32,1)}
dialog[open]{animation:pop .35s cubic-bezier(.16,.84,.32,1)}
#demo-art{animation:ken 8s ease-in-out infinite alternate}
.pre-reveal{opacity:0;transform:translateY(24px)}
.pre-reveal.is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,.84,.32,1),transform .7s cubic-bezier(.16,.84,.32,1)}
@keyframes rise{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ken{to{transform:scale(1.08)}}
@keyframes sweep{to{transform:translateX(130%)}}
@keyframes drift{to{transform:translate3d(-2%,1%,0) scale(1.04)}}
@keyframes glow{50%{box-shadow:0 0 0 6px #ee2a7b33}}
@keyframes arrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.campaign{transition:translate .3s,box-shadow .3s}
.campaign:hover{translate:0 -3px;box-shadow:0 16px 40px #3a145014}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tag-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{border-color:#e7b6ff}}
@keyframes reel{0%,28%{opacity:1;transform:scale(1.04)}36%,100%{opacity:0;transform:scale(1.08)}}
@keyframes floaty{50%{translate:0 -12px}}
@keyframes blink{70%{box-shadow:0 0 0 8px #ee2a7b00}}
@media(max-width:760px){header{padding-inline:16px}body:has(#launch-form)>header{flex-wrap:nowrap}body:has(#launch-form)>header #logout{margin-left:4px}header .tag{display:none}.studio-art{min-height:0;grid-column:1}.studio-reel{height:240px}.top{grid-template-columns:1fr;gap:22px}.top>div:first-child{grid-column:1}.studio-path{grid-template-columns:1fr 1fr}}
html[data-theme=dark] body{background:#111018}
html[data-theme=dark] .ambient{opacity:.45}
html[data-theme=dark] header{background:#16141f;box-shadow:0 1px 0 #2c2638}
html[data-theme=dark] header.is-stuck{box-shadow:0 12px 30px #0008}
html[data-theme=dark] .path-step{background:#1b1723;border-color:#393043;color:#f7f3fc}
html[data-theme=dark] .studio-live,.signin-faces img{border-color:#1b1723}
html[data-theme=dark] .studio-faces img{border-color:#16141f}
@media(prefers-reduced-motion:reduce){.pre-reveal{opacity:1;transform:none}.studio-reel img{animation:none;opacity:0}.studio-reel img:first-child{opacity:1}.ambient,.float-likes svg,.studio-live,.studio-live i,.tag,#demo-art{animation:none}}