/* ==========================================================================
   Studio — platform overview (owner: studio-code agent)
   Hero "Bento" · verbs marquee · built for (scroll-snap) · why Omni (neural panel)
   Every selector is scoped with .studio-… ; logical properties only (RTL-safe).
   Tile loops only animate transform/opacity (compositor) and only while the tile is on
   screen (.is-playing, toggled by js/pages/studio.js).
   ========================================================================== */

.page-studio {
  --studio-del: color-mix(in srgb, var(--amber) 45%, var(--text-3));
  --studio-tile-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 60%, transparent), color-mix(in srgb, var(--bg-1) 85%, transparent));
  /* One gap between sections instead of two paddings added together (≈200px at 1440). */
  --studio-pad-top: calc(var(--section-y) * 0.62);
  --studio-pad-bottom: calc(var(--section-y) * 0.55);
}

/* Serif italic descenders (y, g, p) in split headings: the gold gradient is painted by each word box
   (inline-block, one line tall), so give that box and its clip mask room below the line. */
.page-studio :is(h1, h2) .accent { padding-block-end: 0.16em; }
.page-studio .is-split .accent span:has(> .split-word) { padding-block-end: 0.3em; margin-block-end: -0.3em; }
.page-studio .is-split .accent .split-word { padding-block-end: 0.26em; margin-block-end: -0.26em; }

/* ---------------------------------------------------------------- Hero */
.studio-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: calc(var(--header-h) + clamp(28px, 3.4vw, 56px)) clamp(64px, 7vw, 104px);
}
.studio-hero__grid {
  -webkit-mask-image: radial-gradient(ellipse 80% 38% at 50% 10%, #000 5%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 38% at 50% 10%, #000 5%, transparent 72%);
  opacity: 0.55;
}
.studio-hero__orb--a { width: min(760px, 90vw); aspect-ratio: 1; inset-block-start: -320px; inset-inline-end: -220px; opacity: 0.5; }
.studio-hero__orb--b { width: min(520px, 70vw); aspect-ratio: 1; inset-block-start: 520px; inset-inline-start: -260px; opacity: 0.28; }

.studio-hero__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 410px);
  column-gap: clamp(32px, 3.6vw, 52px);
  row-gap: 24px;
  align-items: end;
}
.studio-hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 1.8vw, 24px); min-width: 0; }
.studio-hero__title { font-size: clamp(46px, 6.4vw, 92px); }
.studio-hero__title .accent { padding-inline-end: 0.08em; }

.studio-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 1.8vw, 26px);
  padding-inline-start: clamp(20px, 2vw, 30px);
  padding-block-end: 0.35em;
  border-inline-start: 1px solid var(--line-strong);
}
.studio-hero__lead { font-size: clamp(16px, 1.16vw, 17px); max-width: 44ch; }
.studio-hero__actions { --cluster-gap: 14px 26px; }
.studio-hero__more { font-size: 15px; }
.studio-hero__more .icon { rotate: 90deg; }
.studio-hero__side .studio-hero__more:hover .icon { transform: translateX(3px); }

/* ---------------------------------------------------------------- Bento */
.studio-surfaces { position: relative; margin-block-start: clamp(36px, 3.8vw, 56px); scroll-margin-block-start: calc(var(--header-h) + 24px); }
.studio-bento {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(280px, auto) minmax(280px, auto) minmax(250px, auto) minmax(250px, auto);
  grid-template-areas:
    "chat   chat   code   code   code   code"
    "chat   chat   image  image  video  video"
    "lang   lang   agents agents agents agents"
    "models models agents agents agents agents";
}
.studio-bento > .studio-tile--chat { grid-area: chat; }
.studio-bento > .studio-tile--code { grid-area: code; }
.studio-bento > .studio-tile--image { grid-area: image; }
.studio-bento > .studio-tile--video { grid-area: video; }
.studio-bento > .studio-tile--lang { grid-area: lang; }
.studio-bento > .studio-tile--models { grid-area: models; }
.studio-bento > .studio-tile--agents { grid-area: agents; }

.studio-tile {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.8vw, 24px);
  padding: clamp(16px, 1.5vw, 22px);
  border-radius: var(--radius-l);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.studio-tile:hover { border-color: color-mix(in srgb, var(--ice) 26%, transparent); }
.studio-tile__visual {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  border-radius: calc(var(--radius-l) - 10px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 60%),
    var(--studio-tile-bg);
}
.studio-tile__body { display: flex; flex-direction: column; gap: 8px; padding-inline: clamp(4px, 0.6vw, 8px); padding-block-end: 4px; }
.studio-tile__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-2);
}
[dir="rtl"] .studio-tile__tag, :lang(zh-Hans) .studio-tile__tag { letter-spacing: 0.02em; }
.studio-tile__tag .icon { width: 15px; height: 15px; }
.studio-tile__title { font-size: clamp(20px, 1.7vw, 25px); font-weight: 400; line-height: 1.18; letter-spacing: -0.02em; color: var(--text); }
.studio-tile__title--lg { font-size: clamp(28px, 3vw, 44px); font-weight: 300; line-height: 1.04; letter-spacing: -0.035em; }
.studio-tile__title--lg .accent { padding-block-end: 0.12em; }
.studio-tile__text { font-size: 15px; line-height: 1.55; color: var(--text-2); max-width: 48ch; text-wrap: pretty; }
.studio-tile__link { margin-block-start: 6px; font-size: 14.5px; }

/* Wide tiles: copy beside the visual */
.studio-tile--code { flex-direction: row; align-items: stretch; }
.studio-tile--code .studio-tile__body { flex: 0 0 38%; justify-content: flex-end; padding-block: 8px; }
.studio-tile--code .studio-tile__tag { margin-block-end: auto; }
.studio-tile--code .studio-tile__visual { min-height: 230px; }

.studio-tile--agents .studio-tile__visual { min-height: 320px; }
.studio-tile--agents .studio-tile__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 8px;
  align-items: end;
}
.studio-tile--agents .studio-tile__tag { grid-column: 1 / -1; }
.studio-tile--agents .studio-tile__title { grid-column: 1; grid-row: 2 / span 2; align-self: end; }
.studio-tile--agents .studio-tile__text { grid-column: 2; grid-row: 2; }
.studio-tile--agents .studio-tile__link { grid-column: 2; grid-row: 3; }

.studio-tile--lang .studio-tile__visual,
.studio-tile--models .studio-tile__visual { min-height: 136px; }

/* ---------- Chat visual (in flow: the tile grows with its conversation) */
.studio-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(14px, 1.4vw, 20px);
  font-size: 13.5px;
  line-height: 1.45;
}
.studio-chat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-2);
}
.studio-chat__brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--text); }
.studio-chat__brand .icon { width: 15px; height: 15px; color: var(--gold-2); }
.studio-chat__toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.studio-chat__toggle i {
  position: relative;
  width: 26px;
  height: 15px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-2) 50%, transparent);
}
.studio-chat__toggle i::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold-3);
}
.studio-chat__thread { display: flex; flex-direction: column; gap: 12px; }
.studio-chat__msg--user {
  align-self: flex-end;
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px;
  border-end-end-radius: 4px;
  color: var(--ice-2);
  background: color-mix(in srgb, var(--blue-2) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue-2) 34%, transparent);
}
.studio-chat__think {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--bg-0) 45%, transparent);
}
.studio-chat__think-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.studio-chat__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 10px var(--gold-2); }
.studio-chat__ellipsis { display: inline-flex; gap: 3px; }
.studio-chat__ellipsis i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
ol.studio-chat__steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.studio-chat__steps li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 12.5px;
  color: var(--text-3);
}
.studio-chat__steps li::before {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  inset-block: -4px 50%;
  width: 8px;
  border-inline-start: 1px solid var(--line-strong);
  border-block-end: 1px solid var(--line-strong);
  border-end-start-radius: 4px;
}
.studio-chat__answer { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.studio-chat__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold-2) 35%, transparent);
  background: var(--bg-0);
  overflow: hidden;
}
.studio-chat__avatar .logo { width: 19px; height: 19px; object-fit: contain; } /* emblem ≈ 68% of the circle: diamond tips keep ~3.5px clearance */
.studio-chat__answer-body { display: grid; gap: 7px; padding-block-start: 3px; }
.studio-chat__answer-text { color: var(--text); font-size: 13.5px; }
.studio-chat__caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-inline-start: 3px;
  vertical-align: -0.15em;
  background: var(--gold-2);
  border-radius: 1px;
}
.studio-chat__line {
  display: block;
  width: var(--w);
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ice) 14%, transparent), color-mix(in srgb, var(--ice) 6%, transparent));
}
.studio-chat__composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block-start: auto;
  padding-block: 7px;
  padding-inline: 14px 7px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-0) 62%, transparent);
  font-size: 13px;
  color: var(--text-3);
}
.studio-chat__composer > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-chat__send {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--bg-0);
  background: var(--grad-gold);
}
.studio-chat__send .icon { width: 14px; height: 14px; stroke-width: 2; }
[dir="rtl"] .studio-chat__send .icon { transform: scaleX(-1); }

/* ---------- Code visual */
.studio-code {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.studio-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding-inline: 14px;
  border-block-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--ice) 3%, transparent);
  font-size: 11.5px;
  color: var(--text-3);
}
.studio-code__file { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.studio-code__file .icon { width: 14px; height: 14px; color: var(--gold-2); }
.studio-code__diff b { font-weight: 500; color: var(--gold-2); }
.studio-code__diff i { font-style: normal; color: var(--studio-del); }
.studio-code__lines {
  flex: 1;
  display: grid;
  align-content: center;
  padding-block: 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.studio-code__ln {
  display: grid;
  grid-template-columns: 58px max-content;
  line-height: 2;
  white-space: pre;
  color: var(--text-2);
}
.studio-code__ln > em { font-style: normal; text-align: end; padding-inline-end: 14px; color: var(--text-3); opacity: 0.6; }
.studio-code__ln b { font-weight: inherit; }
.studio-code__ln .k { color: var(--blue-2); }
.studio-code__ln .f { color: var(--ice); }
.studio-code__ln .n { color: var(--gold-2); }
.studio-code__ln--del { background: color-mix(in srgb, var(--studio-del) 10%, transparent); }
.studio-code__ln--del > span { color: var(--text-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--studio-del) 70%, transparent); }
.studio-code__ln--del > em::after { content: " −"; color: var(--studio-del); }
.studio-code__ln--add { background: color-mix(in srgb, var(--gold) 11%, transparent); box-shadow: inset 2px 0 0 var(--gold-2); }
.studio-code__ln--add > em::after { content: " +"; color: var(--gold-2); }
.studio-code__ln--add > span { color: var(--text); }
/* Typing reveal = a clip window sliding in while its content slides back: transforms only. */
.studio-code__type { display: inline-block; overflow: hidden; vertical-align: top; }
.studio-code__type > span { display: inline-block; }
ul.studio-code__status {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-block-start: 1px solid var(--line);
}
.studio-code__status li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 5px;
  padding-inline: 8px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--gold-2) 30%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--gold-3);
}
.studio-code__status .icon { width: 13px; height: 13px; color: var(--gold-2); stroke-width: 2; }

/* ---------- Image visual (noise → picture) */
.studio-img { position: absolute; inset: 0; overflow: hidden; }
.studio-img__art { width: 100%; height: 100%; transform-origin: 64% 50%; }
.studio-img .s-sky-0 { stop-color: var(--bg-1); }
.studio-img .s-sky-1 { stop-color: var(--navy); }
.studio-img .s-sky-2 { stop-color: var(--gold-3); }
.studio-img .s-sun-0 { stop-color: var(--gold-3); stop-opacity: 0.9; }
.studio-img .s-sun-1 { stop-color: var(--gold); stop-opacity: 0.32; }
.studio-img .s-sun-2 { stop-color: var(--gold); stop-opacity: 0; }
.studio-img .s-da-0 { stop-color: var(--amber); }
.studio-img .s-da-1 { stop-color: var(--navy); }
.studio-img .s-db-0 { stop-color: var(--gold-2); }
.studio-img .s-db-1 { stop-color: var(--bg-3); }
.studio-img .s-dc-0 { stop-color: var(--bg-3); }
.studio-img .s-dc-1 { stop-color: var(--bg-0); }
.studio-img__disc { fill: var(--ice-2); opacity: 0.92; }
.studio-img__ridge { fill: none; stroke: var(--gold-3); stroke-width: 1; opacity: 0.55; }
/* The veil is the latent image: tinted grain over a navy→amber wash. It slides away (outer) while its
   content slides back (inner), which reads as a left-to-right wipe. Hidden when not animating. */
.studio-img__veil { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.studio-img__noise {
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .8 0 0 0 0 .45 0 0 0 .75 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(55% 65% at 64% 48%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%),
    linear-gradient(170deg, var(--bg-1), var(--navy) 62%, color-mix(in srgb, var(--navy) 55%, var(--amber)));
}
.studio-img__scan { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.studio-img__scan::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -1px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-3), transparent);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--gold-2) 70%, transparent);
}
.studio-img__prompt {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  max-width: calc(100% - 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 7px;
  padding-inline: 9px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-0) 62%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 12px;
  color: var(--text);
}
.studio-img__prompt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-img__prompt .icon { width: 14px; height: 14px; color: var(--gold-2); fill: currentColor; stroke-width: 1; }

/* ---------- Video visual (HTML layers: every loop is a transform) */
.studio-vid { position: absolute; inset: 0; display: flex; flex-direction: column; }
.studio-vid__frame {
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 70% 100%, color-mix(in srgb, var(--blue-2) 40%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-0), var(--navy) 70%, color-mix(in srgb, var(--blue-2) 60%, var(--navy)));
}
.studio-vid__aurora { position: absolute; inset: 0; }
.studio-vid__aurora i {
  position: absolute;
  inset-inline-start: -20%;
  width: 140%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ice) 34%, transparent), transparent);
}
.studio-vid__aurora i:first-child { inset-block-start: 12%; rotate: -7deg; }
.studio-vid__aurora i:last-child { inset-block-start: 30%; rotate: 5deg; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold-2) 38%, transparent), transparent); }
.studio-vid__wave { position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 200%; max-width: none; height: 36%; }
.studio-vid__wave--a path { fill: color-mix(in srgb, var(--blue) 55%, var(--bg-0)); }
.studio-vid__wave--b { height: 26%; }
.studio-vid__wave--b path { fill: color-mix(in srgb, var(--bg-0) 85%, var(--navy)); }
.studio-vid__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-block-start: -22px;
  margin-inline-start: -22px;
  border-radius: 50%;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--ice) 30%, transparent);
  background: color-mix(in srgb, var(--bg-0) 40%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.studio-vid__play .icon { width: 16px; height: 16px; fill: currentColor; margin-inline-start: 2px; }
.studio-vid__rec {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-0) 55%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-2);
}
.studio-vid__rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 8px var(--gold-2); }
.studio-vid__timeline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding-inline: 12px;
  border-block-start: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-0) 70%, transparent);
}
.studio-vid__tc { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.studio-vid__track { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--line-strong); }
.studio-vid__track i { position: absolute; inset-inline-start: var(--x); inset-block: -3px; width: 1px; background: color-mix(in srgb, var(--ice) 40%, transparent); }
.studio-vid__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--grad-gold); transform-origin: 0 50%; transform: scaleX(0.38); }
.studio-vid__head { position: absolute; inset: 0; transform: translateX(38%); }
.studio-vid__head::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 11px;
  height: 11px;
  margin-block-start: -5.5px;
  margin-inline-start: -5.5px;
  border-radius: 50%;
  background: var(--ice-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-2) 35%, transparent), 0 0 12px var(--gold-2);
}

/* ---------- Multilingual visual */
.studio-lang { position: absolute; inset: 0; display: grid; place-items: center; }
.studio-lang__ring {
  position: absolute;
  height: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--ice) 18%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 22%, transparent), transparent 65%);
}
.studio-lang__words { position: relative; display: grid; place-items: center; margin-block-end: 22px; }
.studio-lang__word {
  grid-area: 1 / 1;
  font-size: clamp(34px, 3.3vw, 48px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(35%);
  transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
}
.studio-lang__word.is-on { opacity: 1; transform: none; }
.studio-lang__word.is-out { opacity: 0; transform: translateY(-35%); }
.studio-lang__voice {
  position: absolute;
  inset-block-end: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--gold-2);
}
.studio-lang__voice > .icon { width: 15px; height: 15px; }
.studio-lang__wave { display: flex; align-items: center; gap: 3px; height: 24px; }
.studio-lang__wave i {
  width: 2px;
  height: var(--h, 8px);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-2), color-mix(in srgb, var(--ice) 60%, transparent));
  opacity: 0.85;
}

/* ---------- Mixed models visual */
.studio-models {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
}
.studio-models__router {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 4px;
  padding-inline: 7px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--blue-2) 35%, transparent);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ice);
}
.studio-models__router .icon { width: 14px; height: 14px; }
.studio-models__router::after {
  content: "";
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: 50%;
  width: 18px;
  height: 1px;
  background: var(--line-strong);
}
ul.studio-models__lanes { position: relative; list-style: none; margin: 0; padding: 4px 0; padding-inline-start: 14px; display: grid; gap: 9px; border-inline-start: 1px solid var(--line-strong); }
.studio-models__lanes li { display: grid; grid-template-columns: 80px minmax(0, 1fr) 8px; align-items: center; gap: 10px; }
.studio-models__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .studio-models__label, [dir="rtl"] .studio-models__router { letter-spacing: 0.02em; }
.studio-models__bar { position: relative; height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.studio-models__bar i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--i) * 17%);
  width: 34%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gold-2), var(--ice));
  opacity: 0.85;
}
/* Pulses flow away from the router: towards inline-end. */
[dir="rtl"] .studio-models__bar i { background: linear-gradient(270deg, transparent, var(--gold-2), var(--ice)); }
.studio-models__led { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.studio-models__led::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold-2);
  opacity: 0;
}
.studio-models__lanes li:nth-child(2) .studio-models__led::after { opacity: 1; }

/* ---------- Agents flow visual */
.studio-flow { position: absolute; inset: clamp(18px, 2vw, 28px) clamp(16px, 2vw, 28px) clamp(20px, 2.2vw, 30px); isolation: isolate; }
.studio-flow__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[dir="rtl"] .studio-flow__wires { transform: scaleX(-1); }
.studio-flow__base path { fill: none; stroke: var(--line-strong); stroke-width: 1.25; }
.studio-flow__bus { fill: none; stroke: color-mix(in srgb, var(--ice) 22%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.studio-flow__pulses path {
  fill: none;
  stroke: var(--gold-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 14 86;
  stroke-dashoffset: 14;
  opacity: 0;
}
.studio-flow__node {
  position: absolute;
  inset-block-start: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  transform: translateY(-50%);
  border-radius: 13px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--bg-0) 90%, transparent);
  font-size: 12.5px;
  line-height: 1.2;
  text-align: center;
  color: var(--text-2);
}
.studio-flow__node .icon { width: 15px; height: 15px; flex-shrink: 0; }
.studio-flow__node--prompt { inset-inline-start: 0; width: 20%; color: var(--ice-2); border-color: color-mix(in srgb, var(--ice) 26%, transparent); }
.studio-flow__node--prompt .icon { color: var(--ice); }
.studio-flow__node--rewrite { inset-inline-start: 27%; width: 16%; color: var(--ice); border-color: color-mix(in srgb, var(--blue-2) 40%, transparent); background: color-mix(in srgb, var(--blue) 20%, var(--bg-2)); }
.studio-flow__node--agent { inset-inline-start: 52%; width: 20%; inset-block-start: var(--y); justify-content: flex-start; padding-inline: 12px; }
.studio-flow__node--agent::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold-2);
  opacity: 0.35;
}
.studio-flow__node--result {
  inset-inline-start: 80%;
  width: 20%;
  color: var(--gold-3);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, var(--bg-2)), var(--bg-2)) padding-box,
    linear-gradient(120deg, var(--gold-2), color-mix(in srgb, var(--gold) 20%, transparent) 60%, var(--ice)) border-box;
  box-shadow: 0 0 34px -10px color-mix(in srgb, var(--gold) 45%, transparent);
}
/* Pre-rendered bloom: only its opacity animates. */
.studio-flow__node--result::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 60px -4px color-mix(in srgb, var(--gold) 80%, transparent);
  opacity: 0.2;
  pointer-events: none;
}
.studio-flow__node--result .icon { color: var(--gold-2); fill: currentColor; stroke-width: 1; }
.studio-flow__rail {
  position: absolute;
  inset-block-start: 95%;
  inset-inline: 27% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.studio-flow__rail > * { position: relative; }
.studio-flow__rail .icon { width: 14px; height: 14px; color: var(--ice); }
.studio-flow__rail::before {
  content: "";
  position: absolute;
  inset-inline: calc(50% - 132px);
  inset-block: -4px;
  border-radius: var(--radius-pill);
  background: var(--bg-1);
  z-index: -1;
}
[dir="rtl"] .studio-flow__rail { letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- Verbs marquee */
.studio-verbs {
  position: relative;
  padding-block: clamp(26px, 3.6vw, 52px);
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-2) 55%, transparent) 50%, transparent);
  overflow: hidden;
}
.studio-verbs__marquee { --gap: clamp(28px, 3.6vw, 60px); }
.studio-verbs__track { list-style: none; margin: 0; padding: 0; align-items: center; }
.studio-verbs__item {
  display: flex;
  align-items: center;
  gap: var(--gap);
  font-size: clamp(54px, 8.4vw, 136px);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -0.05em;
  color: var(--text);
}
.studio-verbs__word { background: var(--grad-ice); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: 0.04em; }
.studio-verbs__item .accent { font-size: 1.06em; letter-spacing: -0.02em; padding-block-end: 0.12em; }
.studio-verbs__star { width: 0.28em; height: 0.28em; color: var(--gold-2); stroke-width: 1.2; opacity: 0.8; }
[dir="rtl"] .studio-verbs__item { letter-spacing: 0; }

/* ---------------------------------------------------------------- Built for */
.studio-built { overflow: clip; padding-block: var(--studio-pad-top) var(--studio-pad-bottom); }
.studio-built__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 40px;
  margin-block-end: clamp(36px, 4.6vw, 60px);
}
.studio-built__head .section-head { margin-block-end: 0; }
.studio-built__controls:not([hidden]) { display: flex; align-items: center; gap: 10px; }
.studio-built__progress {
  position: relative;
  width: clamp(80px, 10vw, 140px);
  height: 1px;
  margin-inline-end: 14px;
  background: var(--line-strong);
  overflow: hidden;
}
.studio-built__progress i {
  position: absolute;
  inset: 0;
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold-2);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0.2));
  transition: transform 240ms var(--ease-out);
}
[dir="rtl"] .studio-built__progress i { transform-origin: 100% 50%; }
.studio-built__btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--ice) 5%, transparent);
  color: var(--text);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur), color var(--dur), opacity var(--dur);
}
.studio-built__btn:hover:not([aria-disabled="true"]) { border-color: color-mix(in srgb, var(--gold-2) 45%, transparent); color: var(--gold-2); background: color-mix(in srgb, var(--gold) 8%, transparent); }
/* Ends of the row: stay focusable (aria-disabled), only look inactive. */
.studio-built__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.studio-built__btn .icon { width: 18px; height: 18px; }
.studio-built__prev { rotate: 180deg; }

ol.studio-built__track {
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
  list-style: none;
  margin: 0;
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding-inline: var(--edge);
  padding-block: 6px 26px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.studio-built__track:focus-visible { outline-offset: -2px; border-radius: var(--radius-l); }
.studio-built__track::-webkit-scrollbar { height: 4px; }
.studio-built__track::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.studio-aud {
  position: relative;
  flex: 0 0 clamp(276px, 28vw, 372px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: clamp(400px, 34vw, 450px);
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--radius-l);
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ice) 5%, transparent), color-mix(in srgb, var(--ice) 1%, transparent)),
    var(--glass);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.studio-aud:hover { border-color: color-mix(in srgb, var(--gold-2) 32%, transparent); transform: translateY(-4px); }
.studio-aud__num {
  position: absolute;
  inset-block-start: -0.16em;
  inset-inline-end: -0.02em;
  z-index: -1;
  font-size: clamp(140px, 13vw, 200px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.07em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ice) 16%, transparent), transparent 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.studio-aud:nth-child(2n) .studio-aud__num { background-image: linear-gradient(180deg, color-mix(in srgb, var(--gold-2) 20%, transparent), transparent 78%); }
.studio-aud__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio-aud__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--gold-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, transparent), color-mix(in srgb, var(--gold) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold-2) 24%, transparent);
}
.studio-aud:nth-child(2n) .studio-aud__icon { color: var(--ice); background: linear-gradient(180deg, color-mix(in srgb, var(--blue-2) 20%, transparent), color-mix(in srgb, var(--blue-2) 4%, transparent)); border-color: color-mix(in srgb, var(--blue-2) 30%, transparent); }
.studio-aud__icon .icon { width: 22px; height: 22px; }
.studio-aud__title { margin-block-start: clamp(48px, 6vw, 88px); font-size: clamp(26px, 2.4vw, 34px); font-weight: 300; line-height: 1.06; letter-spacing: -0.03em; color: var(--text); }
.studio-aud__text { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.studio-aud__prompt { margin-block-start: auto; padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.studio-aud__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.studio-aud__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block-start: 10px;
  padding-block: 8px;
  padding-inline: 14px 8px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-0) 60%, transparent);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}
.studio-aud__send {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--bg-0);
  background: var(--grad-gold);
}
.studio-aud__send .icon { width: 15px; height: 15px; stroke-width: 2; }
[dir="rtl"] .studio-aud__send .icon { transform: scaleX(-1); }

/* ---------------------------------------------------------------- Why Omni */
.studio-why { padding-block: var(--studio-pad-top) var(--studio-pad-bottom); }
.studio-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "aside head" "aside list";
  column-gap: clamp(40px, 6vw, 104px);
  align-items: start;
}
.studio-why__head { grid-area: head; }
.studio-why__aside { grid-area: aside; position: sticky; inset-block-start: calc(var(--header-h) + 36px); }
.studio-why__list { grid-area: list; }
.studio-panel {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - var(--header-h) - 72px);
  min-height: 420px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 46% at 50% 44%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 72%),
    radial-gradient(34% 28% at 62% 56%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  box-shadow: var(--shadow-2);
}
.studio-panel::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-0) 92%, transparent) 80%);
  pointer-events: none;
}
.studio-panel__art { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; }
.studio-panel__art > * { grid-area: 1 / 1; }
.studio-panel__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ice) 22%, transparent) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 10%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 44%, #000 10%, transparent 62%);
}
.studio-panel__ring { width: 40%; aspect-ratio: 1; margin-block-end: 12%; border-radius: 50%; border: 1px solid var(--line-strong); }
.studio-panel__ring--2 { width: 62%; border-style: dashed; border-color: var(--line); }
.studio-panel__ring--3 { width: 86%; border-color: color-mix(in srgb, var(--gold-2) 16%, transparent); }
.studio-panel__core {
  width: 24%;
  aspect-ratio: 1;
  margin-block-end: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, var(--ice-2), color-mix(in srgb, var(--blue-2) 70%, transparent) 38%, color-mix(in srgb, var(--gold) 30%, transparent) 64%, transparent 72%);
  filter: blur(2px);
  box-shadow: 0 0 80px 20px color-mix(in srgb, var(--blue) 35%, transparent);
  opacity: 0.85;
}
.studio-panel__fx { position: absolute; inset: 0; z-index: 1; }
/* Once the particle orb is live it leads; the static art steps back. */
.studio-panel__core, .studio-panel__dots { transition: opacity 1.2s var(--ease-out); }
.studio-panel:has(.fx-neural.is-live) .studio-panel__core { opacity: 0.45; }
.studio-panel:has(.fx-neural.is-live) .studio-panel__dots { opacity: 0.35; }
.studio-panel__corner { position: absolute; z-index: 3; width: 20px; height: 20px; border-color: color-mix(in srgb, var(--ice) 45%, transparent); border-style: solid; border-width: 0; }
.studio-panel__corner--ts { inset-block-start: 18px; inset-inline-start: 18px; border-block-start-width: 1px; border-inline-start-width: 1px; }
.studio-panel__corner--te { inset-block-start: 18px; inset-inline-end: 18px; border-block-start-width: 1px; border-inline-end-width: 1px; }
.studio-panel__corner--bs { inset-block-end: 18px; inset-inline-start: 18px; border-block-end-width: 1px; border-inline-start-width: 1px; }
.studio-panel__corner--be { inset-block-end: 18px; inset-inline-end: 18px; border-block-end-width: 1px; border-inline-end-width: 1px; }
.studio-panel__label,
.studio-panel__stats {
  position: absolute;
  z-index: 3;
  inset-block-start: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.studio-panel__label { inset-inline-start: 44px; color: var(--gold-2); }
.studio-panel__stats { inset-inline-end: 44px; gap: 6px; color: var(--text-3); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.studio-panel__stats span { color: var(--ice); }
[dir="rtl"] .studio-panel__label, [dir="rtl"] .studio-panel__stats { letter-spacing: 0.02em; }
ul.studio-panel__axes {
  position: absolute;
  z-index: 3;
  inset-block-end: clamp(92px, 9vw, 116px);
  inset-inline: 44px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
[dir="rtl"] ul.studio-panel__axes { letter-spacing: 0.02em; }
.studio-panel__axes li { display: inline-flex; align-items: center; gap: 12px; }
.studio-panel__axes li + li::before { content: ""; width: 18px; height: 1px; background: var(--line-strong); }
.studio-panel__axes li:last-child { color: var(--gold-2); }
.studio-panel__caption {
  position: absolute;
  z-index: 3;
  inset-block-end: clamp(30px, 3vw, 40px);
  inset-inline: 44px;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text);
}
.studio-panel__caption .accent { padding-block-end: 0.1em; }

.studio-why__head .section-head { margin-block-end: clamp(28px, 4vw, 48px); }
.studio-why__list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.studio-principle {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 46px;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
  padding-block: clamp(24px, 2.8vw, 38px);
  border-block-end: 1px solid var(--line);
}
.studio-principle::before {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-2), transparent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out);
}
[dir="rtl"] .studio-principle::before { background: linear-gradient(270deg, var(--gold-2), transparent); transform-origin: 100% 50%; }
.studio-principle:hover::before { transform: scaleX(1); }
.studio-principle__num { padding-block-start: 0.7em; font-size: 12px; letter-spacing: 0.12em; color: var(--gold-2); }
.studio-principle__title { font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; color: var(--text); }
.studio-principle__text { margin-block-start: 10px; max-width: 52ch; color: var(--text-2); text-wrap: pretty; }
.studio-principle__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-3);
  transition: color var(--dur) var(--ease-out), border-color var(--dur), background-color var(--dur);
}
.studio-principle__icon .icon { width: 20px; height: 20px; }
.studio-principle:hover .studio-principle__icon { color: var(--gold-2); border-color: color-mix(in srgb, var(--gold-2) 40%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); }

/* Closing band follows "Why" with one gap, not two. */
.page-studio .cta-band { padding-block-start: var(--studio-pad-top); }

/* ---------------------------------------------------------------- Motion (never under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .studio-chat__pulse { animation: studio-pulse 1.6s ease-in-out infinite; }
  .studio-chat__ellipsis i { animation: studio-blink 1.2s ease-in-out infinite; }
  .studio-chat__ellipsis i:nth-child(2) { animation-delay: 0.2s; }
  .studio-chat__ellipsis i:nth-child(3) { animation-delay: 0.4s; }
  .studio-chat__steps li { animation: studio-step 9s var(--ease-out) infinite backwards; animation-delay: calc(0.6s + var(--i) * 0.7s); }
  .studio-chat__answer { animation: studio-step 9s var(--ease-out) infinite backwards; animation-delay: 2.8s; }
  .studio-chat__line { transform-origin: 0 50%; animation: studio-grow 9s var(--ease-out) infinite backwards; animation-delay: calc(3.3s + var(--i) * 0.35s); }
  [dir="rtl"] .studio-chat__line { transform-origin: 100% 50%; }
  .studio-chat__caret { animation: studio-blink 1s steps(2, jump-none) infinite; }

  .studio-code__type { animation: studio-type-window 7s steps(44, end) infinite; }
  .studio-code__type > span { animation: studio-type-text 7s steps(44, end) infinite; }
  .studio-code__ln--del > span { animation: studio-strike 7s ease-out infinite; }
  .studio-code__status li { animation: studio-chip 7s var(--ease-out) infinite; animation-delay: calc(var(--i) * 0.35s); }

  .studio-img__art { animation: studio-kenburns 14s var(--ease-in-out) infinite alternate; }
  .studio-img__veil { animation: studio-veil 8s var(--ease-in-out) infinite; }
  .studio-img__noise { animation: studio-veil-counter 8s var(--ease-in-out) infinite; }
  .studio-img__scan { animation: studio-scan 8s var(--ease-in-out) infinite; }

  .studio-vid__wave--a { animation: studio-wave 6s linear infinite; }
  .studio-vid__wave--b { animation: studio-wave 9s linear infinite; }
  .studio-vid__aurora i { animation: studio-aurora 10s var(--ease-in-out) infinite alternate; }
  .studio-vid__aurora i:last-child { animation-duration: 13s; animation-direction: alternate-reverse; }
  .studio-vid__fill { animation: studio-fill 8s linear infinite; }
  .studio-vid__head { animation: studio-head 8s linear infinite; }
  .studio-vid__rec i { animation: studio-pulse 1.4s ease-in-out infinite; }

  .studio-lang__ring { animation: studio-spin 48s linear infinite; }
  .studio-lang__wave i { animation: studio-bar 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); }

  .studio-models__bar i { animation: studio-lane 2.8s var(--ease-in-out) infinite; animation-delay: calc(var(--i) * -0.7s); }
  [dir="rtl"] .studio-models__bar i { animation-name: studio-lane-rtl; }
  .studio-models__led::after { animation: studio-led 2.8s steps(1, end) infinite; animation-delay: calc(var(--i, 0) * 0.7s); }

  .studio-flow__pulses path { animation: studio-pulse-path 5.2s var(--ease-in-out) infinite; animation-delay: calc(var(--i) * 0.28s); }
  .studio-flow__node--agent::before { animation: studio-led 5.2s steps(1, end) infinite; animation-delay: calc(1s + var(--i) * 0.28s); }
  .studio-flow__node--result::after { animation: studio-glow 5.2s var(--ease-in-out) infinite; }

  .studio-panel__core { animation: studio-breathe 6s var(--ease-in-out) infinite; }
  .studio-panel__ring--2 { animation: studio-spin 60s linear infinite; }
}

/* Offscreen (or hidden tab): every tile loop holds still. Without JS the loops simply run. */
.js .studio-tile:not(.is-playing) *,
.js .studio-tile:not(.is-playing) *::before,
.js .studio-tile:not(.is-playing) *::after,
.js .studio-panel:not(.is-playing) *,
.js .studio-panel:not(.is-playing) *::before,
.js .studio-panel:not(.is-playing) *::after { animation-play-state: paused !important; }

@keyframes studio-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
@keyframes studio-blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes studio-step {
  0% { opacity: 0; transform: translateY(8px); }
  6%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}
@keyframes studio-grow {
  0% { transform: scaleX(0); opacity: 0; }
  8%, 86% { transform: scaleX(1); opacity: 1; }
  94%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes studio-type-window {
  0%, 18% { transform: translateX(-100%); }
  52%, 100% { transform: none; }
}
@keyframes studio-type-text {
  0%, 18% { transform: translateX(100%); }
  52%, 100% { transform: none; }
}
@keyframes studio-strike {
  0%, 10% { opacity: 1; }
  18%, 100% { opacity: 0.62; }
}
@keyframes studio-chip {
  0%, 52% { opacity: 0.6; transform: translateY(2px); }
  58%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0.6; transform: translateY(2px); }
}
@keyframes studio-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
/* 8s loop: grain 0–4%, wipe 4–22%, finished picture 22–92%, grain fades back 92–100% (≈ a quarter noisy). */
@keyframes studio-veil {
  0%, 4% { transform: none; opacity: 1; }
  22%, 91.9% { transform: translateX(100%); opacity: 1; }
  92% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes studio-veil-counter {
  0%, 4% { transform: none; }
  22%, 91.9% { transform: translateX(-100%); }
  92%, 100% { transform: none; }
}
@keyframes studio-scan {
  0%, 4% { transform: none; opacity: 0; }
  6%, 20% { opacity: 1; }
  22%, 100% { transform: translateX(100%); opacity: 0; }
}
@keyframes studio-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes studio-aurora { from { transform: translateX(-4%) scaleY(0.85); } to { transform: translateX(4%) scaleY(1.15); } }
@keyframes studio-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes studio-head { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes studio-spin { to { rotate: 360deg; } }
@keyframes studio-bar { from { transform: scaleY(0.35); } to { transform: scaleY(1.2); } }
@keyframes studio-lane {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@keyframes studio-lane-rtl {
  0% { transform: translateX(120%); }
  100% { transform: translateX(-320%); }
}
@keyframes studio-led {
  0% { opacity: 1; }
  35%, 100% { opacity: 0.2; }
}
@keyframes studio-pulse-path {
  0% { stroke-dashoffset: 14; opacity: 0; }
  4% { opacity: 1; }
  30% { stroke-dashoffset: -86; opacity: 1; }
  32%, 100% { stroke-dashoffset: -86; opacity: 0; }
}
@keyframes studio-glow {
  0%, 30% { opacity: 0.2; }
  45% { opacity: 1; }
  100% { opacity: 0.2; }
}
@keyframes studio-breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.12); opacity: 1; } }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1180px) {
  .studio-tile--code .studio-tile__body { flex-basis: 40%; }
}

/* Title and side column no longer fit side by side: stack, lead and actions share a row. */
@media (max-width: 1140px) {
  .studio-hero__head { grid-template-columns: minmax(0, 1fr); }
  .studio-hero__title { font-size: clamp(46px, 8.4vw, 92px); }
  .studio-hero__side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    margin-block-start: clamp(8px, 1.4vw, 16px);
    padding-block: clamp(20px, 2.4vw, 28px) 0;
    padding-inline-start: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
  }
  .studio-hero__lead { max-width: 52ch; }
}

@media (max-width: 1040px) {
  .studio-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "chat   chat"
      "code   code"
      "image  video"
      "agents agents"
      "lang   models";
  }
  .studio-tile--chat { flex-direction: row-reverse; align-items: stretch; }
  .studio-tile--chat .studio-tile__body { flex: 0 0 38%; justify-content: flex-end; padding-block: 8px; }
  .studio-tile--chat .studio-tile__tag { margin-block-end: auto; }
  .studio-tile--image .studio-tile__visual,
  .studio-tile--video .studio-tile__visual { min-height: 190px; }
  .studio-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

@media (max-width: 820px) {
  .studio-tile--agents .studio-tile__body { grid-template-columns: minmax(0, 1fr); }
  .studio-tile--agents .studio-tile__title,
  .studio-tile--agents .studio-tile__text,
  .studio-tile--agents .studio-tile__link { grid-column: 1; grid-row: auto; }
  .studio-flow__node { font-size: 12px; padding-inline: 8px; }
  .studio-flow__node .icon { display: none; }
  .studio-why__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "aside" "list"; }
  .studio-why__aside { position: relative; inset-block-start: 0; margin-block-end: clamp(28px, 5vw, 48px); }
  .studio-panel { aspect-ratio: 5 / 4; max-height: none; min-height: 360px; }
}

@media (max-width: 640px) {
  .studio-hero__side { flex-direction: column; align-items: flex-start; }
  .studio-bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "chat" "code" "image" "video" "agents" "lang" "models";
  }
  .studio-tile--chat,
  .studio-tile--code { flex-direction: column; }
  .studio-tile--code .studio-tile__visual { order: -1; }
  .studio-tile--chat .studio-tile__body,
  .studio-tile--code .studio-tile__body { flex: none; padding-block: 0 4px; }
  .studio-tile--chat .studio-tile__tag,
  .studio-tile--code .studio-tile__tag { margin-block-end: 4px; }
  .studio-tile--code .studio-tile__visual { min-height: 220px; }
  .studio-code { font-size: 11.5px; }
  .studio-code__ln { grid-template-columns: 48px max-content; }
  .studio-tile--agents .studio-tile__visual { min-height: 300px; }
  .studio-tile--lang .studio-tile__visual,
  .studio-tile--models .studio-tile__visual { min-height: 156px; }
  .studio-flow { inset: 16px 10px 22px; }
  .studio-flow__node { padding: 6px 5px; border-radius: 10px; min-height: 34px; }
  .studio-flow__node--agent { padding-inline: 7px; gap: 5px; }
  /* Too narrow for the resources caption: keep the icon on the bus. */
  .studio-flow__rail-label { display: none; }
  .studio-flow__rail::before { inset-inline: calc(50% - 16px); }
  .studio-aud { flex-basis: min(84vw, 330px); min-height: 400px; }
  .studio-built__head { align-items: flex-start; }
  .studio-panel { aspect-ratio: 4 / 5; min-height: 0; }
  .studio-panel__label, .studio-panel__axes, .studio-panel__caption { inset-inline: 30px; }
  .studio-panel__stats { display: none; }
  ul.studio-panel__axes { gap: 6px 8px; }
  .studio-panel__axes li { gap: 8px; }
  .studio-panel__axes li + li::before { display: none; }
  .studio-panel__caption { font-size: clamp(22px, 6vw, 28px); }
  .studio-principle { grid-template-columns: 36px minmax(0, 1fr); }
  .studio-principle__icon { display: none; }
}

@media (max-width: 420px) {
  .studio-hero__actions { width: 100%; }
  .studio-hero__actions .btn { flex: 1 1 auto; }
}