/* Animated illustration of the Creator Studio prompter (pure HTML/CSS, static under reduced motion). */
.pm{position:relative;aspect-ratio:9/16;width:100%;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0c0a17,#06050b);border:1px solid rgba(247,227,161,.42);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(123,63,212,.32),0 0 0 7px rgba(255,255,255,.035);font-family:var(--sans)}
.pm-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 16px 10px;font-size:11.5px;font-weight:700}
.pm-title{display:inline-flex;align-items:center;gap:7px;color:var(--text)}
.pm-title i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.15)}
.pm-day{color:var(--text3);font-weight:600}
.pm-list{display:flex;gap:6px;padding:0 12px 10px;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line)}
.pm-list span{flex:none;padding:5px 10px;border-radius:100px;font-size:10.5px;font-weight:700;color:var(--text3);background:rgba(255,255,255,.05);border:1px solid var(--line)}
.pm-list span.on{color:var(--gold-ink);background:var(--gold-btn);border-color:var(--gold-line)}
.pm-view{position:relative;flex:1;overflow:hidden;
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%)}
.pm-scroll{position:absolute;left:0;right:0;top:0;animation:pmScroll 34s linear infinite}
.pm-copy{padding:40% 18px 20px;text-align:center}
.pm-copy p{font-family:var(--display);font-weight:800;font-size:clamp(17px,5.2vw,21px);line-height:1.28;letter-spacing:-.01em;color:var(--text);margin:0 0 12px}
.pm-copy .pm-k{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--gold2);margin:22px 0 10px}
.pm-line{position:absolute;left:10px;right:10px;top:46%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(247,227,161,.85),transparent);box-shadow:0 0 14px rgba(247,227,161,.5)}
.pm-line::before,.pm-line::after{content:"";position:absolute;top:-4px;width:0;height:0;border:5px solid transparent}
.pm-line::before{left:-2px;border-left-color:var(--gold2)}
.pm-line::after{right:-2px;border-right-color:var(--gold2)}
@keyframes pmScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.pm-ctl{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 10px 8px;border-top:1px solid var(--line);background:rgba(14,11,28,.7)}
.pm-btn{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--text2)}
.pm-btn svg{width:13px;height:13px}
.pm-play{background:var(--gold-btn);color:var(--gold-ink);border-color:var(--gold-line);box-shadow:var(--gold-hi);min-width:34px;height:34px}
.pm-speed{font-size:12px;font-weight:700;color:var(--gold2);min-width:34px;text-align:center}
.pm-txt{font-size:11px}
.pm-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px 14px;background:rgba(14,11,28,.7);font-size:10.5px;color:var(--text3)}
.pm-cap b{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:100px;background:rgba(123,63,212,.28);color:var(--lav);font-weight:700}
.pm-cap svg{width:11px;height:11px}
/* prominent included card for the prompter */
@media(min-width:640px){.card.feature{grid-column:1/-1}}
.card.feature{border-color:rgba(247,227,161,.38);background:linear-gradient(160deg,rgba(123,63,212,.22),rgba(255,255,255,.03) 60%,rgba(233,196,106,.08));box-shadow:0 0 50px rgba(123,63,212,.16)}
.card.feature h3{font-size:24px}
.card.feature p{max-width:720px;margin:0 auto}
@media(prefers-reduced-motion:reduce){.pm-scroll{animation:none;transform:translateY(-6%)}}

/* ---------- process loop "monitor" (assets/process/, optional) ---------- */
.monitor{max-width:980px;margin:0 auto 40px}
.monitor[hidden]{display:none}
.monitor-frame{position:relative;border-radius:22px;overflow:hidden;background:rgba(14,11,28,.6);border:1px solid var(--gold-line);
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 70px rgba(123,63,212,.26),inset 0 1px 0 rgba(255,255,255,.08)}
.monitor-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line);font-size:12px;color:var(--text3)}
.monitor-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.monitor-bar i:first-child{background:rgba(247,227,161,.7)}
.monitor-bar span{margin-left:8px;letter-spacing:.04em}
.monitor video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.monitor.vertical{max-width:340px}
.monitor.vertical video{aspect-ratio:9/16}

/* ---------- hover / tap previews on the agent cards ---------- */
.pv-item.has-prev{cursor:pointer}
.pv-item:focus-visible{outline:2px solid var(--gold-1);outline-offset:3px}
.pv-hint{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 12px;border-radius:100px;border:1px solid var(--gold-line);background:rgba(255,255,255,.04);color:var(--gold-1);font-size:12px;font-weight:700;letter-spacing:.04em}
.pv-hint[hidden]{display:none}
.pv-hint svg{width:11px;height:11px}
.pv{position:fixed;left:0;top:0;z-index:120;width:340px;pointer-events:none;opacity:0;transition:opacity .25s var(--ease);will-change:transform,opacity}
.pv.on{opacity:1}
.pv-in{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--gold-line);
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(123,63,212,.3),inset 0 1px 0 rgba(255,255,255,.1);transform:scale(.9);transition:transform .35s var(--ease)}
.pv.on .pv-in{transform:scale(1)}
.pv video{width:100%;height:100%;object-fit:cover}
.pv .tag{position:absolute;left:10px;bottom:10px}
.pv .tag b{font-weight:700}
.pv-inline{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.pv-inline > div{overflow:hidden;min-height:0}
.pv-item.open .pv-inline{grid-template-rows:1fr}
.pv-inline video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-top:14px;border:1px solid var(--gold-line);background:#000}