/* AirCode CLI product page (aircode.html), the "Studio" direction picked 2026-10-14.
 *
 * This page draws both themes itself: Night tokens on .ac, Day tokens under html[data-theme="studio"]
 * (Final Light off the homepage is data-theme="studio" + data-final="light", see final-theme.css).
 * The file is linked rather than inlined and lives outside css/, so the generated Studio colour adapter
 * (tailwind/studio-colors.cjs) never rewrites it; <main data-st-own> keeps studio-icons.js from
 * re-tagging its sections, panels and cards. The header and footer are the shared site chrome and keep
 * their own styles. Every rule is scoped under .ac. */

/* ── Tokens ─────────────────────────────────────────────────────────────────────────── */
.ac {
  --ac-display: var(--ft-display, 'Sora', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --ac-body: var(--ft-sans, 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --ac-mono: var(--ft-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --ac-r: 20px; --ac-r-sm: 12px;
  /* Night */
  --ac-bg: #0B0E13; --ac-band: #10141B; --ac-band-line: rgba(255,255,255,.06);
  --ac-surface: #131821; --ac-surface2: #181E29;
  --ac-line: rgba(255,255,255,.08); --ac-line2: rgba(255,255,255,.16);
  --ac-ink: #F3F5F9; --ac-ink2: #B0B9C6; --ac-ink3: #8F99A8;
  --ac-acc: #22D3EE; --ac-acc-soft: rgba(34,211,238,.08);
  --ac-btn-bg: #F3F5F9; --ac-btn-fg: #0B0E13; --ac-btn-glow: 0 10px 30px -14px rgba(255,255,255,.35);
  --ac-btn2-fg: #F3F5F9; --ac-btn2-line: rgba(255,255,255,.22);
  --ac-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 50px -30px rgba(0,0,0,.9);
  --ac-focus: #22D3EE;
  --ac-cy: #22D3EE; --ac-vi: #A78BFA; --ac-am: #FBBF24; --ac-gr: #34D399; --ac-bl: #60A5FA; --ac-ro: #FB7185;
  --ac-tile-hi: rgba(255,255,255,.12);
  /* terminals stay dark in both themes */
  --ac-term-bg: #070A0F; --ac-term-bar: #0D1118; --ac-term-line: rgba(255,255,255,.1);
  --t-ink: #E6EDF3; --t-dim: #8B949E; --t-ok: #4ADE80; --t-err: #F87171; --t-warn: #FACC15; --t-acc: #22D3EE; --t-vio: #C4B5FD; --t-sel: rgba(34,211,238,.12);
  /* code panels (diff, editor) */
  --ac-code-bg: #070A0F; --ac-code-bar: #0D1118; --ac-code-line: rgba(255,255,255,.09); --ac-code-ink: #E6EDF3; --ac-code-dim: #7D8590;
  --ac-add-bg: rgba(74,222,128,.10); --ac-add-ink: #7EE787; --ac-del-bg: rgba(248,113,113,.10); --ac-del-ink: #FFA198;
  --sx-kw: #D2A8FF; --sx-str: #7EE787; --sx-fn: #67E8F9; --sx-ty: #FDBA74; --sx-com: #7D8590; --sx-num: #79C0FF;
  /* closing band */
  --ac-close-bg: #0B0E13;
}
html[data-theme="studio"] .ac {
  /* Day: the site's Final Light ground and grey band, Studio's dark ink */
  --ac-bg: #FBFCFD; --ac-band: #EEF2F7; --ac-band-line: rgba(11,22,34,.12);
  --ac-surface: #FFFFFF; --ac-surface2: #F6F8FA;
  --ac-line: #E3E6EA; --ac-line2: #C8CCD2;
  --ac-ink: #0B1626; --ac-ink2: #1C2A3C; --ac-ink3: #3E4C5F;
  --ac-acc: #0C6A84; --ac-acc-soft: rgba(14,116,144,.07);
  --ac-btn-bg: #0B1626; --ac-btn-fg: #FFFFFF; --ac-btn-glow: 0 10px 24px -14px rgba(11,22,38,.6);
  --ac-btn2-fg: #0B1626; --ac-btn2-line: #C8CCD2;
  --ac-shadow: 0 1px 2px rgba(11,22,38,.05), 0 18px 40px -28px rgba(11,22,38,.4);
  --ac-focus: #155E75;
  --ac-cy: #0E7490; --ac-vi: #6D28D9; --ac-am: #B45309; --ac-gr: #047857; --ac-bl: #1D4ED8; --ac-ro: #BE123C;
  --ac-tile-hi: rgba(255,255,255,.55);
  --ac-term-bg: #0E1420; --ac-term-bar: #151C2A; --ac-term-line: rgba(11,22,38,.25);
  --ac-code-bg: #FFFFFF; --ac-code-bar: #F6F8FA; --ac-code-line: rgba(11,22,34,.11); --ac-code-ink: #1F2B3A; --ac-code-dim: #5B6878;
  --ac-add-bg: rgba(4,120,87,.09); --ac-add-ink: #036B4E; --ac-del-bg: rgba(180,35,24,.07); --ac-del-ink: #B42318;
  --sx-kw: #6D28D9; --sx-str: #047857; --sx-fn: #0E7490; --sx-ty: #B45309; --sx-com: #5B6878; --sx-num: #1D4ED8;
  --ac-close-bg: #0B1626;
}

/* ── Base ───────────────────────────────────────────────────────────────────────────── */
.ac { display: block; color: var(--ac-ink); font-family: var(--ac-body); font-size: 16px; line-height: 1.6; overflow-x: clip; }
.ac *, .ac *::before, .ac *::after { box-sizing: border-box; }
.ac :focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 3px; border-radius: 4px; }
.ac a { color: inherit; }
.ac button { font: inherit; color: inherit; }
.ac .ac-ico { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ac .ac-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.ac .ac-mono { font-family: var(--ac-mono); }
.ac .ac-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ac .ac-headline, .ac h2, .ac h3 { font-family: var(--ac-display); margin: 0; text-wrap: balance; color: var(--ac-ink); }
.ac .ac-headline { font-size: clamp(2.6rem, 7vw, 6rem); line-height: .98; font-weight: 600; letter-spacing: -.05em; }
.ac h2 { font-size: clamp(2.1rem, 4.4vw, 3.8rem); line-height: 1.02; font-weight: 600; letter-spacing: -.04em; }
.ac h3 { font-size: 1.06rem; line-height: 1.3; font-weight: 600; letter-spacing: -.012em; }
.ac p { margin: 0; text-wrap: pretty; }
.ac .ac-g { color: var(--ac-acc); }
.ac .ac-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--ac-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ac-ink3); }
.ac .ac-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ac-acc); }
.ac .ac-lede { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--ac-ink2); max-width: 60ch; line-height: 1.65; }
.ac .ac-key { margin: 0; font-family: var(--ac-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; color: var(--ac-ink); }

.ac .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px;
  font-weight: 650; font-size: 15px; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s ease, filter .2s ease, border-color .2s; }
.ac .ac-btn .ac-ico { font-size: 17px; }
.ac .ac-btn-p { background: var(--ac-btn-bg); color: var(--ac-btn-fg); box-shadow: var(--ac-btn-glow); }
.ac .ac-btn-p:hover { transform: translateY(-1px); filter: brightness(1.07); }
.ac .ac-btn-s { background: transparent; color: var(--ac-btn2-fg); border-color: var(--ac-btn2-line); }
.ac .ac-btn-s:hover { border-color: var(--ac-acc); transform: translateY(-1px); }
.ac .ac-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Terminal ───────────────────────────────────────────────────────────────────────── */
.ac .ac-term { position: relative; min-width: 0; overflow: hidden; color: var(--t-ink); background: var(--ac-term-bg);
  border: 1px solid var(--ac-term-line); border-radius: var(--ac-r); box-shadow: var(--ac-shadow); }
.ac .ac-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px 0 14px; background: var(--ac-term-bar); border-bottom: 1px solid var(--ac-term-line); }
.ac .ac-dots { display: flex; gap: 7px; flex: none; }
.ac .ac-dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.ac .ac-dots i:nth-child(2) { background: #FEBC2E; }
.ac .ac-dots i:nth-child(3) { background: #28C840; }
.ac .ac-title { flex: 1; min-width: 0; font-family: var(--ac-mono); font-size: 12px; color: var(--t-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.ac .ac-replay, .ac .ac-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--ac-term-line); background: transparent; color: var(--t-dim); font-family: var(--ac-mono); font-size: 11px; }
.ac .ac-replay:hover, .ac .ac-copy:hover { color: var(--t-ink); border-color: var(--t-dim); }
.ac .ac-copy.ok { color: var(--t-ok); border-color: var(--t-ok); }
.ac .ac-tbody { font-family: var(--ac-mono); font-size: 13.5px; line-height: 1.72; padding: 18px 20px 20px; overflow-wrap: anywhere; tab-size: 2; }
.ac .ac-tbody .ln { display: block; min-height: 1.72em; white-space: pre-wrap; }
.ac .ac-tbody .ln.in { animation: acLnIn .28s ease both; }
@keyframes acLnIn { from { opacity: 0; transform: translateY(3px); } }
.ac .ac-tbody .c-dim { color: var(--t-dim); } .ac .ac-tbody .c-ok { color: var(--t-ok); } .ac .ac-tbody .c-err { color: var(--t-err); }
.ac .ac-tbody .c-warn { color: var(--t-warn); } .ac .ac-tbody .c-acc { color: var(--t-acc); } .ac .ac-tbody .c-vio { color: var(--t-vio); }
.ac .ac-tbody .c-b { color: var(--t-ink); font-weight: 600; }
.ac .ac-tbody .pr { color: var(--t-acc); font-weight: 600; }
.ac .ac-caret { display: inline-block; width: .6em; height: 1.15em; vertical-align: -.2em; margin-left: 1px; background: var(--t-acc); animation: acBlink 1.05s steps(1) infinite; }
@keyframes acBlink { 50% { opacity: 0; } }
.ac .ac-tbody .spin { display: inline-block; width: 1.1em; color: var(--t-acc); }
.ac .ac-tbody .tui-box { display: block; border: 1px solid var(--ac-term-line); border-radius: 6px; padding: 6px 4px; margin: 6px 0; }
.ac .ac-tbody .tb-h { display: flex; justify-content: space-between; gap: 12px; padding: 0 8px 5px; margin-bottom: 4px; border-bottom: 1px solid var(--ac-term-line); white-space: nowrap; }
.ac .ac-tbody .tb-r { display: block; padding: 1px 8px; border-radius: 4px; white-space: pre-wrap; transition: background-color .15s, color .15s; }
.ac .ac-tbody .tb-r.sel { background: var(--t-sel); color: var(--t-acc); }
.ac .ac-tbody .tb-r .dot { color: var(--t-ok); }
.ac .ac-tbody .tb-r .nm { display: inline-block; min-width: 14ch; }
.ac .ac-tbody .tb-f { display: block; padding: 5px 8px 0; margin-top: 4px; border-top: 1px solid var(--ac-term-line); font-size: .88em; white-space: pre-wrap; }
.ac .ac-tbody .tui-rule { display: block; min-height: 0; height: 0; border-top: 1px dashed var(--ac-term-line); margin: 8px 0 10px; }
.ac .ac-tbody .alogo { font-weight: 700; letter-spacing: 0; color: #6F95FF; background: linear-gradient(180deg, #6F95FF, #7C3AED); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* code panels: diff and editor */
.ac .ac-code { min-width: 0; overflow: hidden; color: var(--ac-code-ink); background: var(--ac-code-bg); border: 1px solid var(--ac-code-line); border-radius: var(--ac-r); box-shadow: var(--ac-shadow); }
.ac .ac-code > .ac-bar { padding: 0; gap: 0; background: var(--ac-code-bar); border-bottom-color: var(--ac-code-line); overflow-x: auto; scrollbar-width: none; }
.ac .ac-ctab { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; font-family: var(--ac-mono); font-size: 12px; white-space: nowrap; cursor: pointer;
  color: var(--ac-code-dim); background: transparent; border: 0; border-right: 1px solid var(--ac-code-line); }
.ac :is(.ac-ctab[aria-selected="true"], .ac-ctab.is-current) { color: var(--ac-code-ink); background: var(--ac-code-bg); box-shadow: inset 0 -2px 0 var(--ac-acc); }
.ac .ac-ctab .badge { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--ac-add-bg); color: var(--ac-add-ink); }
.ac .ac-cbody { font-family: var(--ac-mono); font-size: 13px; line-height: 1.75; padding: 12px 0; overflow-x: auto; }
.ac .ac-cbody .cl { display: grid; grid-template-columns: 44px 18px minmax(0, 1fr); white-space: pre; min-height: 1.75em; transition: background-color .3s; }
.ac .ac-cbody .cl > .n { color: var(--ac-code-dim); text-align: right; padding-right: 10px; opacity: .7; user-select: none; }
.ac .ac-cbody .cl > .m { color: var(--ac-code-dim); user-select: none; }
.ac .ac-cbody .cl.add { background: var(--ac-add-bg); } .ac .ac-cbody .cl.add > .m { color: var(--ac-add-ink); }
.ac .ac-cbody .cl.del { background: var(--ac-del-bg); } .ac .ac-cbody .cl.del > .m { color: var(--ac-del-ink); }
.ac .ac-cbody .cl.del > .t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ac-del-ink) 50%, transparent); opacity: .8; }
.ac .ac-cbody .cl.hide { display: none; }
.ac .ac-cbody .cl.ai > .m { color: var(--ac-acc); font-weight: 700; }
.ac .ac-cbody .cl.flash { animation: acFlash 1.2s ease; }
@keyframes acFlash { 0%, 40% { background: color-mix(in srgb, var(--ac-acc) 22%, transparent); } }
.ac .ac-cbody .k { color: var(--sx-kw); } .ac .ac-cbody .s { color: var(--sx-str); } .ac .ac-cbody .f { color: var(--sx-fn); }
.ac .ac-cbody .ty { color: var(--sx-ty); } .ac .ac-cbody .cm { color: var(--sx-com); font-style: italic; } .ac .ac-cbody .nu { color: var(--sx-num); }

/* ── Sections ───────────────────────────────────────────────────────────────────────── */
.ac .ac-sec { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.ac .ac-alt { background: var(--ac-band); border-block: 1px solid var(--ac-band-line); }
.ac .ac-sx { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vis" "feats" "key"; }
.ac .ac-sx > .ac-head { grid-area: head; min-width: 0; }
.ac .ac-sx > .ac-vis { grid-area: vis; min-width: 0; container-type: inline-size; }
.ac .ac-sx > .ac-feats { grid-area: feats; min-width: 0; }
.ac .ac-sx > .ac-key { grid-area: key; }
.ac .ac-head .ac-lede { margin-top: 18px; }
.ac .ac-feats { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .ac .ac-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.ac .ac-feat { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; min-width: 0; }
.ac .ac-feat p { color: var(--ac-ink2); font-size: 14.5px; margin-top: 4px; line-height: 1.55; }
.ac .ac-tile { --h: var(--ac-cy); width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 20px; color: var(--h);
  background: linear-gradient(180deg, color-mix(in srgb, var(--h) 14%, var(--ac-surface)), color-mix(in srgb, var(--h) 24%, var(--ac-surface)));
  box-shadow: inset 0 1px 0 var(--ac-tile-hi), inset 0 -2px 4px color-mix(in srgb, var(--h) 24%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--h) 70%, transparent); }
.ac .h-cy { --h: var(--ac-cy); } .ac .h-vi { --h: var(--ac-vi); } .ac .h-am { --h: var(--ac-am); }
.ac .h-gr { --h: var(--ac-gr); } .ac .h-bl { --h: var(--ac-bl); } .ac .h-ro { --h: var(--ac-ro); }
/* glow cards: white (Day) / raised (Night) with a faint glow of the card's colour */
.ac .ac-glow { --gl: var(--ac-acc); background: var(--ac-surface); border: 1px solid transparent; border-radius: var(--ac-r);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gl) 14%, transparent), 0 18px 44px -26px color-mix(in srgb, var(--gl) 55%, transparent); }

/* Hero */
.ac .ac-hero { padding-block: calc(80px + clamp(48px, 7vw, 96px)) clamp(64px, 8vw, 112px); }
.ac .ac-hero-g { display: grid; gap: clamp(36px, 5vw, 56px); grid-template-columns: minmax(0, 1fr); }
.ac .ac-hero-copy { min-width: 0; }
.ac .ac-hc-bot .ac-lede { margin-top: 26px; }
.ac .ac-hc-bot .ac-ctas { margin-top: 32px; }
.ac .ac-meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--ac-mono); font-size: 12.5px; color: var(--ac-ink3); }
.ac .ac-meta span { display: inline-flex; align-items: center; gap: 7px; }
.ac .ac-meta .ac-ico { color: var(--ac-acc); }
.ac .ac-hero-vis { min-width: 0; }
.ac #t-hero .ac-tbody { min-height: 400px; }

/* S2 — workflow steps + split */
.ac .ac-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-family: var(--ac-mono); font-size: 12.5px; }
.ac .ac-step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--ac-line2); color: var(--ac-ink3); background: var(--ac-surface); transition: color .3s, border-color .3s, background-color .3s; }
.ac .ac-step i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; }
.ac .ac-step.on { color: var(--ac-acc); border-color: color-mix(in srgb, var(--ac-acc) 55%, transparent); background: var(--ac-acc-soft); }
.ac .ac-step.on i { opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac-acc) 20%, transparent); }
.ac .ac-step.done { color: var(--ac-ink2); } .ac .ac-step.done i { background: var(--ac-gr); opacity: 1; }
.ac .ac-arr { color: var(--ac-ink3); opacity: .7; }
.ac .ac-split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 760px) { .ac .ac-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.ac #t-build .ac-tbody { min-height: 300px; }

/* S3 — models */
.ac .ac-models { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 760px) { .ac .ac-models { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.ac .ac-mlist { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 520px) { .ac .ac-mlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 760px) { .ac .ac-mlist { grid-template-columns: minmax(0, 1fr); } }
.ac .ac-mcard { --gl: var(--ac-acc); text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 16px 18px; cursor: pointer;
  color: var(--ac-ink); background: var(--ac-surface); border: 1px solid transparent; border-radius: var(--ac-r-sm);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gl) 14%, transparent), 0 18px 44px -26px color-mix(in srgb, var(--gl) 55%, transparent); transition: transform .2s, background-color .2s; }
.ac .ac-mcard:hover { transform: translateY(-1px); }
.ac .ac-mcard .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ac-line2); grid-row: span 2; display: grid; place-items: center; }
.ac .ac-mcard .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ac-acc); transform: scale(0); transition: transform .2s; }
.ac .ac-mcard b { font-family: var(--ac-mono); font-size: 14.5px; font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac .ac-mcard .d { color: var(--ac-ink2); font-size: 13.5px; }
.ac .ac-mcard .tag { font-family: var(--ac-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--ac-acc-soft); color: var(--ac-acc); font-weight: 600; }
.ac .ac-mcard[aria-checked="true"] { background: var(--ac-acc-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac-acc) 60%, transparent), 0 18px 44px -26px color-mix(in srgb, var(--ac-acc) 55%, transparent); }
.ac .ac-mcard[aria-checked="true"] .radio { border-color: var(--ac-acc); }
.ac .ac-mcard[aria-checked="true"] .radio::after { transform: scale(1); }
.ac .ac-route { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--ac-mono); font-size: 12.5px; color: var(--ac-ink2);
  padding: 14px 16px; border: 1px dashed var(--ac-line2); border-radius: var(--ac-r-sm); }
.ac .ac-route .nd { padding: 4px 10px; border-radius: 6px; background: var(--ac-surface); border: 1px solid var(--ac-line); color: var(--ac-ink); }
.ac .ac-route .nd.gw { color: var(--ac-acc); border-color: color-mix(in srgb, var(--ac-acc) 45%, transparent); }
.ac .ac-route .ar { color: var(--ac-ink3); }
.ac .ac-route .note { flex-basis: 100%; color: var(--ac-ink3); font-family: var(--ac-body); font-size: 13px; }
.ac .ac-route .note b { color: var(--ac-ink); }
.ac #t-model .ac-tbody { min-height: 290px; }

/* S4 — loop */
.ac .ac-loopv { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 940px) { .ac .ac-loopv { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.ac #t-loop .ac-tbody { min-height: 330px; }
.ac .ac-tl { --gl: var(--ac-gr); padding: 22px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ac .ac-tl h3, .ac .ac-panel h3 { font-family: var(--ac-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ac-ink3); font-weight: 600; }
.ac .ac-panel h3 { margin-bottom: 12px; }
.ac .ac-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; height: 170px; padding: 0 6px; border-bottom: 1px solid var(--ac-line2); }
.ac .ac-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ac .ac-col i { width: min(54px, 70%); height: 0; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--t-err) 70%, transparent); transition: height .7s cubic-bezier(.2,.8,.2,1); }
.ac .ac-col.zero i { background: var(--ac-gr); height: 3px !important; }
.ac .ac-col b { font-family: var(--ac-mono); font-size: 13px; color: var(--ac-ink); margin-bottom: 6px; opacity: 0; transition: opacity .3s; }
.ac .ac-col.on b { opacity: 1; }
.ac .ac-col.zero b { color: var(--ac-gr); }
.ac .ac-bars-x { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: -8px; text-align: center; font-family: var(--ac-mono); font-size: 11.5px; color: var(--ac-ink3); }
.ac .ac-prog { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 12px; font-family: var(--ac-mono); font-size: 13px; color: var(--ac-ink3);
  background: var(--ac-surface2); border: 1px solid var(--ac-line); border-radius: var(--ac-r-sm); }
.ac .ac-prog span { transition: color .3s; } .ac .ac-prog span.on { color: var(--ac-ink); } .ac .ac-prog span.fin.on { color: var(--ac-gr); font-weight: 600; }
.ac .ac-limits-l { font-size: 12.5px; color: var(--ac-ink3); margin-bottom: 8px; }
.ac .ac-limits { display: flex; flex-wrap: wrap; gap: 8px; }
.ac .ac-limits code { font-family: var(--ac-mono); font-size: 12px; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--ac-line); color: var(--ac-ink2); background: var(--ac-surface2); }

/* S5 — watch */
.ac .ac-watchv { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.ac .ac-wire { height: 46px; position: relative; display: flex; justify-content: center; }
.ac .ac-wire svg { height: 100%; width: 24px; overflow: visible; }
.ac .ac-wire path { stroke: var(--ac-line2); stroke-width: 2; fill: none; stroke-dasharray: 4 5; }
.ac .ac-wire .pulse { fill: var(--ac-acc); opacity: 0; }
.ac .ac-wire.go .pulse { animation: acPulseV .9s ease-in forwards; }
@keyframes acPulseV { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(46px); } }
.ac .ac-wire .wh { display: none; }
@container (min-width: 820px) {
  .ac .ac-watchv { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
  .ac .ac-wire { height: auto; align-items: center; }
  .ac .ac-wire .wv { display: none; }
  .ac .ac-wire .wh { display: block; width: 64px; height: 24px; }
  .ac .ac-wire.go .pulse { animation: acPulseH .9s ease-in forwards; }
}
@keyframes acPulseH { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(64px); } }
.ac .ac-ed-state { margin-left: auto; margin-right: 12px; font-family: var(--ac-mono); font-size: 11px; color: var(--ac-code-dim); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ac .ac-ed-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-code-dim); }
.ac .ac-ed-state.dirty i { background: var(--ac-am); }
.ac .ac-ed-state.saved i { background: var(--ac-gr); }
.ac .ac-ed-state.saved { color: var(--ac-gr); }
.ac .ac-code.saved-ring { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac-acc) 60%, transparent), var(--ac-shadow); }
.ac #t-watch .ac-tbody { min-height: 296px; }

/* S6 — understand / remember */
.ac .ac-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 999px; border: 1px solid var(--ac-line); background: var(--ac-surface); }
.ac .ac-tab { display: inline-flex; gap: 8px; align-items: center; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ac-ink2); }
.ac .ac-tab[aria-selected="true"] { background: var(--ac-ink); color: var(--ac-surface); }
.ac .ac-ctx { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 760px) { .ac .ac-ctx { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.ac .ac-panel { --gl: var(--ac-vi); padding: 18px; min-width: 0; }
.ac .ac-panel[hidden] { display: none; }
.ac .ac-tree { font-family: var(--ac-mono); font-size: 13px; line-height: 1.85; white-space: pre; overflow-x: auto; color: var(--ac-ink2); }
.ac .ac-tree .tn { display: block; padding: 0 6px; border-radius: 4px; transition: background-color .3s, color .3s; }
.ac .ac-tree .tn.dir { color: var(--ac-ink); }
.ac .ac-tree .tn.hit { background: var(--ac-acc-soft); color: var(--ac-acc); }
.ac .ac-tree .tn.hit::after { content: "  ✓"; color: var(--ac-gr); }
.ac .ac-sess { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.ac .ac-sess li { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--ac-line); border-radius: var(--ac-r-sm); background: var(--ac-surface2); }
.ac .ac-sess li i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ac-ink3); }
.ac .ac-sess li span { margin-left: auto; font-family: var(--ac-mono); font-size: 12px; color: var(--ac-ink3); white-space: nowrap; }
.ac .ac-sess li.pick { border-color: color-mix(in srgb, var(--ac-acc) 55%, transparent); background: var(--ac-acc-soft); }
.ac .ac-sess li.pick i { background: var(--ac-acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac-acc) 22%, transparent); }
.ac .ac-mem { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ac-line2); }
.ac .ac-mem ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ac-ink2); }
.ac .ac-mem li { display: flex; gap: 8px; align-items: baseline; }
.ac .ac-mem li::before { content: "•"; color: var(--ac-vi); }
.ac .ac-mem code { font-family: var(--ac-mono); font-size: .92em; }
.ac #t-ctx .ac-tbody { min-height: 300px; }

/* S7 — workflows */
.ac .ac-wf { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.ac .ac-wf-cards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 560px) { .ac .ac-wf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac .ac-wcard { --gl: var(--ac-acc); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; padding: 20px; min-width: 0; color: var(--ac-ink);
  transition: transform .2s, background-color .2s, box-shadow .2s; }
.ac .ac-wcard:nth-child(2) { --gl: var(--ac-vi); } .ac .ac-wcard:nth-child(3) { --gl: var(--ac-am); } .ac .ac-wcard:nth-child(4) { --gl: var(--ac-gr); }
.ac .ac-wcard:hover { transform: translateY(-2px); }
.ac .ac-wcard[aria-selected="true"] { background: var(--ac-acc-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac-acc) 60%, transparent), 0 18px 44px -26px color-mix(in srgb, var(--ac-acc) 55%, transparent); }
.ac .ac-wcard .lbl { font-family: var(--ac-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ac-ink3); }
.ac .ac-wcard h3 { font-size: 1.08rem; }
.ac .ac-wcard p { color: var(--ac-ink2); font-size: 14px; line-height: 1.55; }
.ac .ac-wcard .cmd { margin-top: auto; padding: 8px 10px; border-radius: 8px; font-family: var(--ac-mono); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--ac-term-bg); color: var(--t-ink); border: 1px solid var(--ac-term-line); }
.ac .ac-wcard .cmd .pr { margin-right: 6px; color: var(--t-acc); font-weight: 600; }
.ac #t-wf .ac-tbody { min-height: 250px; }

/* S8 — control */
.ac .ac-ctl { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .ac .ac-ctl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac .ac-ccard { display: flex; gap: 16px; align-items: flex-start; padding: 28px; min-width: 0; }
.ac .ac-ccard p { color: var(--ac-ink2); font-size: 14.5px; margin-top: 6px; }
.ac .ac-ccard:nth-child(1) { --gl: var(--ac-am); } .ac .ac-ccard:nth-child(2) { --gl: var(--ac-ro); }
.ac .ac-ccard:nth-child(3) { --gl: var(--ac-vi); } .ac .ac-ccard:nth-child(4) { --gl: var(--ac-gr); }
.ac .ac-ccard code { font-family: var(--ac-mono); font-size: .92em; }

/* S9 — get started: a dark closing panel in Night and Day (Cloud's is white) */
.ac .ac-closing { background: var(--ac-close-bg); border-top: 1px solid var(--ac-line); }
html[data-theme="studio"]:not([data-final="cloud"]) .ac .ac-closing {
  --ac-ink: #F3F5F9; --ac-ink2: #B0B9C6; --ac-ink3: #8F99A8; --ac-acc: #22D3EE; --ac-line: rgba(255,255,255,.1); --ac-line2: rgba(255,255,255,.18);
  --ac-btn-bg: #FFFFFF; --ac-btn-fg: #0B1626; --ac-btn-glow: none; --ac-btn2-fg: #FFFFFF; --ac-btn2-line: rgba(255,255,255,.3); --ac-focus: #22D3EE;
  --ac-term-line: rgba(255,255,255,.14); color: var(--ac-ink);
}
.ac .ac-start { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; }
.ac .ac-start .ac-lede { margin-top: 18px; }
.ac .ac-start .ac-ctas { margin-top: 28px; }
.ac .ac-powered { margin-top: 22px; font-size: 13.5px; color: var(--ac-ink3); }
.ac .ac-itabs { display: flex; gap: 2px; margin-left: auto; }
.ac .ac-itab { border: 0; background: transparent; cursor: pointer; font-family: var(--ac-mono); font-size: 11.5px; padding: 4px 9px; border-radius: 5px; color: var(--t-dim); }
.ac .ac-itab[aria-selected="true"] { background: var(--t-sel); color: var(--t-acc); }
.ac .ac-irow { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.ac .ac-irow .ln { flex: 1; min-width: 0; }
.ac .ac-plat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-family: var(--ac-mono); font-size: 11.5px; color: var(--t-dim); }
.ac .ac-plat span { padding: 2px 8px; border: 1px solid var(--ac-term-line); border-radius: 999px; }

/* ── Wide layouts: editorial spreads ────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .ac .ac-hero-g { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "h h" "c v"; row-gap: 48px; align-items: start; }
  .ac .ac-hero-copy { display: contents; }
  .ac .ac-hc-top { grid-area: h; }
  .ac .ac-hc-bot { grid-area: c; }
  .ac .ac-hc-bot .ac-lede { margin-top: 0; }
  .ac .ac-hero-vis { grid-area: v; }
  .ac .ac-sx { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head vis" "feats vis" "key vis"; column-gap: 64px; align-content: start; }
  .ac .ac-flip .ac-sx { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "vis head" "vis feats" "vis key"; }
  .ac .ac-sx > .ac-head { align-self: end; }
  .ac .ac-sx:not(.ac-wide) .ac-feats { grid-template-columns: minmax(0, 1fr); gap: 4px; align-self: start; }
  .ac .ac-sx.ac-wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vis" "feats" "key"; }
  .ac .ac-start { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ── Small screens ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ac .ac-tbody { font-size: 12.5px; padding: 14px 14px 16px; }
  .ac .ac-cbody { font-size: 12px; }
  .ac .ac-cbody .cl { grid-template-columns: 32px 14px minmax(0, 1fr); }
  .ac #t-hero .ac-tbody { min-height: 360px; }
  .ac .ac-btn { width: 100%; }
  .ac .ac-ccard { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac *, .ac *::before, .ac *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ac .ac-caret { animation: none; }
}
.ac [hidden] { display: none !important; }

/* ── Telemetry (the third visitor theme: html data-final="telemetry", see telemetry.css) ────────
   The same console as the rest of the site: charcoal panels on the page's dot grid, one amber
   signal (green / red / orange keep their meaning), 8px shoulders, mono keys and bracketed eyebrows. */
html[data-theme="studio"][data-final="telemetry"] .ac {
  --ac-r: 8px; --ac-r-sm: 6px;
  --ac-bg: #0B0C0E; --ac-band: #0E1013; --ac-band-line: #22262C;
  --ac-surface: #111316; --ac-surface2: #16191D;
  --ac-line: #22262C; --ac-line2: #353B44;
  --ac-ink: #ECEEF1; --ac-ink2: #B7BDC6; --ac-ink3: #9AA2AE;
  --ac-acc: var(--tm-accent); --ac-acc-soft: rgb(var(--tm-accent-rgb) / .08);
  --ac-btn-bg: var(--tm-accent); --ac-btn-fg: var(--tm-accent-ink); --ac-btn-glow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px -14px rgb(var(--tm-accent-rgb) / .7);
  --ac-btn2-fg: #ECEEF1; --ac-btn2-line: #3D444E;
  --ac-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  --ac-focus: var(--tm-accent);
  --ac-cy: var(--tm-accent); --ac-vi: var(--tm-accent); --ac-am: #FB923C; --ac-gr: #4ADE80; --ac-bl: var(--tm-accent); --ac-ro: #F87171;
  --ac-tile-hi: rgba(255,255,255,.05);
  --ac-term-bg: #08090B; --ac-term-bar: #0F1114; --ac-term-line: #22262C;
  --t-ink: #E6EDF3; --t-dim: #8B949E; --t-ok: #4ADE80; --t-err: #F87171; --t-warn: #FACC15; --t-acc: var(--tm-accent); --t-vio: var(--tm-accent-2); --t-sel: rgb(var(--tm-accent-rgb) / .12);
  --ac-code-bg: #08090B; --ac-code-bar: #0F1114; --ac-code-line: #22262C; --ac-code-ink: #E6EDF3; --ac-code-dim: #8B949E;
  --ac-add-bg: rgba(74,222,128,.10); --ac-add-ink: #7EE787; --ac-del-bg: rgba(248,113,113,.10); --ac-del-ink: #FFA198;
  --sx-kw: var(--tm-accent-2); --sx-str: #7EE787; --sx-fn: var(--tm-accent); --sx-ty: #FDBA74; --sx-com: #7D8590; --sx-num: #E6EDF3;
  --ac-close-bg: #111316;
}
html[data-theme="studio"][data-final="telemetry"] .ac .ac-closing {
  --ac-ink: #ECEEF1; --ac-ink2: #B7BDC6; --ac-ink3: #9AA2AE; --ac-acc: var(--tm-accent); --ac-line: #22262C; --ac-line2: #353B44;
  --ac-btn-bg: var(--tm-accent); --ac-btn-fg: var(--tm-accent-ink); --ac-btn2-fg: #ECEEF1; --ac-btn2-line: #3D444E; --ac-focus: var(--tm-accent); --ac-term-line: #2C3138;
  border-top-color: #22262C;
}
html[data-theme="studio"][data-final="telemetry"] .ac .ac-eyebrow { color: var(--tm-accent); letter-spacing: .14em; gap: 8px; }
html[data-theme="studio"][data-final="telemetry"] .ac .ac-eyebrow::before { content: "["; width: auto; height: auto; border-radius: 0; background: none; color: #9AA2AE; letter-spacing: 0; }
html[data-theme="studio"][data-final="telemetry"] .ac .ac-eyebrow::after { content: "]"; color: #9AA2AE; letter-spacing: 0; }
html[data-theme="studio"][data-final="telemetry"] .ac .ac-btn { border-radius: 6px; font-family: var(--ac-mono); font-size: 14px; font-weight: 600; letter-spacing: .01em; }
html[data-theme="studio"][data-final="telemetry"] .ac .ac-btn-s { background: #111316; }
html[data-theme="studio"][data-final="telemetry"] .ac .ac-btn-s:hover { color: var(--tm-accent); border-color: var(--tm-accent); }
html[data-theme="studio"][data-final="telemetry"] .ac .ac-tile { border-radius: 6px; background: color-mix(in srgb, var(--h) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 32%, transparent); }
html[data-theme="studio"][data-final="telemetry"] .ac .ac-glow { border-color: #22262C; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
html[data-theme="studio"][data-final="telemetry"] .ac .ac-wcard[aria-selected="true"] { box-shadow: 0 0 0 1px rgb(var(--tm-accent-rgb) / .6), inset 0 1px 0 rgba(255,255,255,.04); }
html[data-theme="studio"][data-final="telemetry"] .ac .ac-dots i { background: transparent; border: 1.5px solid #5B6470; }
html[data-theme="studio"][data-final="telemetry"] .ac .ac-cbody .cl > .n { opacity: 1; }

/* ── Cloud (the fourth visitor theme: html data-final="cloud", see cloud.css) ───────────────────
   The site's app-store light: the grey-lavender ground, floating white cards with wide soft shadows
   and big corners, the system face, grey two-tone headlines, one action blue and colourful glyphs with
   no tile fill. Terminals stay graphite; the closing band is white. */
html[data-theme="studio"][data-final="cloud"] .ac {
  --ac-r: 24px; --ac-r-sm: 14px;
  --ac-bg: #F4F5F9; --ac-band: #FAFBFD; --ac-band-line: rgba(24,27,38,.08);
  --ac-surface: #FFFFFF; --ac-surface2: #F7F8FB;
  --ac-line: #E4E6EC; --ac-line2: #D3D6DE;
  --ac-ink: #090A0D; --ac-ink2: #474A56; --ac-ink3: #5F6270;
  --ac-acc: #0060C4; --ac-acc-soft: rgba(10,132,255,.07);
  --ac-btn-bg: #0071E3; --ac-btn-fg: #FFFFFF; --ac-btn-glow: 0 16px 34px rgba(10,132,255,.22);
  --ac-btn2-fg: #090A0D; --ac-btn2-line: rgba(24,27,38,.1);
  --ac-shadow: 0 32px 70px rgba(56,62,82,.13);
  --ac-focus: #0071E3;
  --ac-cy: #0060C4; --ac-vi: #6633D6; --ac-am: #954400; --ac-gr: #006B4F; --ac-bl: #0A5FD0; --ac-ro: #C0102C;
  --ac-term-bg: #16171C; --ac-term-bar: #1D1E24; --ac-term-line: rgba(24,27,38,.2);
  --ac-code-line: rgba(24,27,38,.08); --ac-code-bar: #F7F8FB;
  --sx-ty: #954400;
  --ac-close-bg: #FFFFFF;
}
html[data-theme="studio"][data-final="cloud"] .ac .ac-headline { font-weight: 650; letter-spacing: -.05em; }
html[data-theme="studio"][data-final="cloud"] .ac h2 { font-weight: 650; letter-spacing: -.042em; }
html[data-theme="studio"][data-final="cloud"] .ac h3 { font-weight: 650; letter-spacing: -.02em; }
html[data-theme="studio"][data-final="cloud"] .ac .ac-g { color: #555864; }
html[data-theme="studio"][data-final="cloud"] .ac .ac-eyebrow { font-family: var(--ac-body); font-size: 11.5px; font-weight: 700; letter-spacing: .22em; gap: 0; }
html[data-theme="studio"][data-final="cloud"] .ac .ac-eyebrow::before { display: none; }
html[data-theme="studio"][data-final="cloud"] .ac .ac-btn { border-radius: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1), background-color .25s; }
html[data-theme="studio"][data-final="cloud"] .ac .ac-btn-p:hover { transform: translateY(-3px); filter: none; background: #0066D6; box-shadow: 0 21px 42px rgba(10,132,255,.28); }
html[data-theme="studio"][data-final="cloud"] .ac .ac-btn-s { background: #FFFFFF; box-shadow: 0 10px 30px rgba(70,72,105,.08); }
html[data-theme="studio"][data-final="cloud"] .ac .ac-btn-s:hover { transform: translateY(-3px); border-color: var(--ac-btn2-line); box-shadow: 0 18px 40px rgba(70,72,105,.13); }
html[data-theme="studio"][data-final="cloud"] .ac .ac-tile { --clt: #0A84FF; color: var(--clt); background: none; box-shadow: none; font-size: 27px; }
html[data-theme="studio"][data-final="cloud"] .ac .h-cy { --clt: #0A84FF; } html[data-theme="studio"][data-final="cloud"] .ac .h-vi { --clt: #9556FF; }
html[data-theme="studio"][data-final="cloud"] .ac .h-am { --clt: #FF9F0A; } html[data-theme="studio"][data-final="cloud"] .ac .h-gr { --clt: #00B386; }
html[data-theme="studio"][data-final="cloud"] .ac .h-bl { --clt: #3973ED; } html[data-theme="studio"][data-final="cloud"] .ac .h-ro { --clt: #FF375F; }
html[data-theme="studio"][data-final="cloud"] .ac .ac-glow { border-color: rgba(24,27,38,.045); box-shadow: 0 20px 55px rgba(70,72,105,.07); }
html[data-theme="studio"][data-final="cloud"] .ac .ac-wcard { transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1); }
html[data-theme="studio"][data-final="cloud"] .ac .ac-wcard:hover { transform: translateY(-4px); box-shadow: 0 27px 62px rgba(70,72,105,.12); }
html[data-theme="studio"][data-final="cloud"] .ac .ac-wcard[aria-selected="true"] { background: #FFFFFF; box-shadow: 0 0 0 2px #0A84FF, 0 22px 55px rgba(10,132,255,.16); }
html[data-theme="studio"][data-final="cloud"] .ac .ac-closing { border-top-color: var(--ac-band-line); }
html[data-theme="studio"][data-final="cloud"] .ac .ac-cbody .cl > .n { opacity: 1; }   /* diff line numbers stay AA on the added-line wash */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="studio"][data-final="cloud"] .ac .ac-btn:hover, html[data-theme="studio"][data-final="cloud"] .ac .ac-wcard:hover { transform: none; }
}

/* ── Cloud Dark (the fifth visitor theme: data-final="cloud" + data-cloud="dark", see cloud-dark.css) ──
   Cloud's layout on Telemetry's charcoal lifted 10%, with lighter charcoal cards and light ink; the glyph
   colours stay Cloud's.
   Code panels and terminals take Night's syntax colours. */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] .ac {
  --ac-bg: #232426; --ac-band: #27292C; --ac-band-line: rgba(255,255,255,.07);
  --ac-surface: #2C2E32; --ac-surface2: #27292C;
  --ac-line: #3A3C41; --ac-line2: #4A4C52;
  --ac-ink: #FFFFFF; --ac-ink2: #CFD1D8; --ac-ink3: #B4B7C0;
  --ac-acc: #9CCBFF; --ac-acc-soft: rgba(10,132,255,.14);
  --ac-btn-bg: #0071E3; --ac-btn-fg: #FFFFFF; --ac-btn-glow: 0 16px 34px rgba(10,132,255,.3);
  --ac-btn2-fg: #FFFFFF; --ac-btn2-line: rgba(255,255,255,.12);
  --ac-shadow: 0 32px 70px rgba(0,0,0,.48);
  --ac-focus: #4DA3FF;
  --ac-cy: #9CCBFF; --ac-vi: #B3BCFF; --ac-am: #FFCB7A; --ac-gr: #7EE2B8; --ac-bl: #A9B4FF; --ac-ro: #FFADB5;
  --ac-term-bg: #17181B; --ac-term-bar: #1C1D20; --ac-term-line: rgba(255,255,255,.1);
  --ac-code-bg: #17181B; --ac-code-bar: #1C1D20; --ac-code-line: rgba(255,255,255,.08); --ac-code-ink: #E6EDF3; --ac-code-dim: #A3ABB6;
  --ac-add-bg: rgba(74,222,128,.10); --ac-add-ink: #7EE787; --ac-del-bg: rgba(248,113,113,.10); --ac-del-ink: #FFA198;
  --sx-kw: #D2A8FF; --sx-str: #7EE787; --sx-fn: #67E8F9; --sx-ty: #FDBA74; --sx-com: #A3ABB6; --sx-num: #79C0FF;
  --t-dim: #A3ABB6;
  --ac-close-bg: #27292C;
}
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] .ac .ac-g { color: #A9ACB6; }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] .ac .ac-btn-s { background: #36383D; box-shadow: 0 10px 30px rgba(0,0,0,.34); }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] .ac .ac-btn-s:hover { box-shadow: 0 18px 40px rgba(0,0,0,.46); }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] .ac .ac-glow { border-color: rgba(255,255,255,.06); box-shadow: 0 20px 55px rgba(0,0,0,.34); }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] .ac .ac-wcard:hover { box-shadow: 0 27px 62px rgba(0,0,0,.46); }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] .ac .ac-wcard[aria-selected="true"] { background: #2C2E32; box-shadow: 0 0 0 2px #0A84FF, 0 22px 55px rgba(0,0,0,.46); }

/* SEO (2026-10-20): the hero's eyebrow is the page's <h1>, carrying the search phrase; the big display headline under
   it is p.ac-headline (the rules above that styled "h1" now style it). The eyebrow keeps its own look: these undo what
   final-type.css gives every h1 (the display face) and keep a wrapped eyebrow readable. */
.ac h1.ac-eyebrow { font-family: var(--ac-mono); line-height: 1.5; text-wrap: balance; }
/* Telemetry brackets the eyebrow: as a block, a long one wraps with its brackets beside the words instead of at the edges. */
html[data-final="telemetry"] .ac h1.ac-eyebrow { display: block; }
html[data-final="telemetry"] .ac h1.ac-eyebrow::before { margin-right: 8px; }
html[data-final="telemetry"] .ac h1.ac-eyebrow::after { margin-left: 8px; }