/* aircode-studio.html — AirCode Studio, shown as the real app (built from its own screenshots).
 *
 * Designed in Telemetry (charcoal panels, hairlines, mono labels, bracketed eyebrows, one signal colour:
 * --tm-accent*, the visitor's Telemetry colour pick, amber by default) and drawn by this file in all five
 * visitor themes, with the same tokens as the homepage (home-tm.css):
 *   Telemetry  html[data-final="telemetry"]                  the base tokens below
 *   Night      html:not([data-theme="studio"])               the live Final Dark look
 *   Day        html[data-theme="studio"] (data-final="light") the live Final Light look
 *   Cloud      html[data-final="cloud"]                      the soft app-store light (cloud.css)
 *   Cloud Dark html[data-final="cloud"][data-cloud="dark"]   Cloud on a charcoal ground (cloud-dark.css)
 * The Studio window (.sw) follows the real app's layout; where the app uses its blue, the page's signal colour
 * stands in. The apps inside the previews (Acme, Neon Snake, Lumen Loop) are the visitor's own, so they keep their
 * own colours in every theme. The <main> is marked data-st-own, so studio-icons.js and the theme layers' generic
 * rules leave it alone. Every rule is scoped under .as. aircode-studio-page.js runs the demos. */

/* ── Tokens ─────────────────────────────────────────────────────────────────────────────────── */
.as {
  --as-ink: #eceef1; --as-mid: #b7bdc6; --as-muted: #9aa2ae; --as-dim: #8a929e;
  --as-line: #22262c; --as-line2: #2c3138; --as-line3: #3d444e;
  --as-panel: #111316; --as-panel2: #16191d; --as-well: #08090b; --as-band: #0e1013;
  --as-acc: var(--tm-accent, #ffb020); --as-acc-rgb: var(--tm-accent-rgb, 255 176 32);
  --as-acc-hi: var(--tm-accent-hi, #ffc34d); --as-acc-ink: var(--tm-accent-ink, #1a1100);
  --as-ok: #4ade80; --as-ok-rgb: 74 222 128; --as-err: #f87171; --as-err-rgb: 248 113 113;
  --as-warn: #fb923c; --as-warn-rgb: 251 146 60;
  --as-lights: #5b6470;
  --as-sheen: inset 0 1px 0 rgb(255 255 255 / .035);
  --as-shadow: inset 0 1px 0 rgb(255 255 255 / .035), 0 30px 60px -40px rgb(0 0 0 / .9);
  --as-card-shadow: var(--as-sheen);
  --as-win-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 0 0 1px rgb(0 0 0 / .45), 0 50px 90px -50px rgb(0 0 0 / .95);
  --as-btn-bg: var(--as-acc); --as-btn-fg: var(--as-acc-ink); --as-btn-line: var(--as-acc);
  --as-btn-hi: var(--as-acc-hi); --as-btn-hi-line: var(--as-acc-hi);
  --as-btn-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 0 0 1px rgb(0 0 0 / .4), 0 10px 24px -14px rgb(var(--as-acc-rgb) / .7);
  --as-btn-font: var(--as-mono); --as-r-btn: 6px;
  --as-mono: var(--ft-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  --as-display: var(--ft-display, 'Sora', 'Manrope', system-ui, sans-serif);
  --as-sans: var(--ft-sans, 'Manrope', system-ui, sans-serif);
  --as-r: 8px; --as-r-sm: 6px; --as-r-win: 10px;
  --as-ease: cubic-bezier(.2, .8, .2, 1);
  display: block; position: relative; color: var(--as-ink); font-family: var(--as-sans);
  font-size: 16px; line-height: 1.6; letter-spacing: -.005em; overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* Night: the live Final Dark look — black ground, cyan signal, blue → violet actions. */
html:not([data-theme="studio"]) .as {
  --as-ink: #ffffff; --as-mid: #b4bbc6; --as-muted: #9ca3af; --as-dim: #8a93a2;
  --as-line: rgb(255 255 255 / .08); --as-line2: rgb(255 255 255 / .12); --as-line3: rgb(255 255 255 / .2);
  --as-panel: #0e0e10; --as-panel2: #141417; --as-well: #08080a; --as-band: #0a0a0a;
  --as-acc: #00f0ff; --as-acc-rgb: 0 240 255; --as-acc-hi: #5cf6ff; --as-acc-ink: #00191c;
  --as-ok: #4ade80; --as-ok-rgb: 74 222 128; --as-err: #f87171; --as-err-rgb: 248 113 113;
  --as-warn: #fb923c; --as-warn-rgb: 251 146 60;
  --as-r: 16px; --as-r-sm: 12px; --as-r-win: 14px; --as-r-btn: 999px; --as-btn-font: var(--as-sans);
  --as-head-grad: linear-gradient(90deg, #3b82f6 0%, #8a2be2 50%, #00f0ff 100%);
  --as-btn-bg: linear-gradient(90deg, #0055ff 0%, #8a2be2 100%); --as-btn-fg: #ffffff; --as-btn-line: transparent;
  --as-btn-hi: linear-gradient(90deg, #1a66ff 0%, #9a40ee 100%); --as-btn-hi-line: transparent;
  --as-btn-shadow: 0 0 30px rgb(138 43 226 / .3), inset 0 1px 0 rgb(255 255 255 / .2);
  --as-lights: rgb(255 255 255 / .28);
  --as-sheen: inset 0 1px 0 rgb(255 255 255 / .04);
  --as-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 30px 60px -30px rgb(0 0 0 / .85);
  --as-win-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 0 80px -30px rgb(0 240 255 / .14), 0 50px 90px -50px rgb(0 0 0 / .95);
}
/* Day: the live Final Light look — off-white ground, grey bands, teal signal, teal → navy actions.
   (Also what the hidden ?theme= previews get.) */
html[data-theme="studio"]:not([data-final="telemetry"]) .as {
  --as-ink: #0b1622; --as-mid: #2e3b4a; --as-muted: #4a5a6b; --as-dim: #4a5a6b;
  --as-line: rgb(11 22 34 / .11); --as-line2: rgb(11 22 34 / .17); --as-line3: rgb(11 22 34 / .26);
  --as-panel: #ffffff; --as-panel2: #f6f8fa; --as-well: #eef1f5; --as-band: #eef2f7;
  --as-acc: #0c6a84; --as-acc-rgb: 12 106 132; --as-acc-hi: #155e75; --as-acc-ink: #ffffff;
  --as-ok: #036b4e; --as-ok-rgb: 3 107 78; --as-err: #b42318; --as-err-rgb: 180 35 24;
  --as-warn: #9a3412; --as-warn-rgb: 154 52 18;
  --as-r: 16px; --as-r-sm: 12px; --as-r-win: 14px; --as-r-btn: 999px; --as-btn-font: var(--as-sans);
  --as-head-grad: linear-gradient(90deg, #0e7490 0%, #1e40af 100%);
  --as-btn-bg: linear-gradient(90deg, #0e7490 0%, #1e40af 100%); --as-btn-fg: #ffffff; --as-btn-line: transparent;
  --as-btn-hi: linear-gradient(90deg, #155e75 0%, #1e3a8a 100%); --as-btn-hi-line: transparent;
  --as-btn-shadow: 0 10px 26px -14px rgb(14 116 144 / .6);
  --as-lights: rgb(11 22 34 / .3);
  --as-sheen: 0 0 0 0 transparent;
  --as-shadow: 0 1px 2px rgb(11 22 34 / .06), 0 10px 26px -18px rgb(11 22 34 / .45);
  --as-card-shadow: 0 1px 2px rgb(11 22 34 / .05), 0 8px 22px -18px rgb(11 22 34 / .4);
  --as-win-shadow: 0 1px 2px rgb(11 22 34 / .06), 0 40px 80px -40px rgb(11 22 34 / .38);
}
/* Cloud: the soft app-store light — lavender-grey ground, white cards with wide soft shadows, one action blue. */
html[data-theme="studio"][data-final="cloud"] .as {
  --as-ink: #090a0d; --as-mid: #474a56; --as-muted: #5f6270; --as-dim: #5f6270;
  --as-line: rgb(24 27 38 / .07); --as-line2: rgb(24 27 38 / .12); --as-line3: rgb(24 27 38 / .2);
  --as-panel: #ffffff; --as-panel2: #f7f8fb; --as-well: #f1f2f7; --as-band: #fafbfd;
  --as-acc: #0060c4; --as-acc-rgb: 0 96 196; --as-acc-hi: #0058b0; --as-acc-ink: #ffffff;
  --as-ok: #006b4f; --as-ok-rgb: 0 107 79; --as-err: #c0102c; --as-err-rgb: 192 16 44;
  --as-warn: #954400; --as-warn-rgb: 149 68 0;
  --as-r: 24px; --as-r-sm: 14px; --as-r-win: 20px; --as-r-btn: 16px; --as-btn-font: var(--as-sans);
  --as-head-ink: #555864;
  --as-btn-bg: #0071e3; --as-btn-fg: #ffffff; --as-btn-line: #0071e3;
  --as-btn-hi: #0066d6; --as-btn-hi-line: #0066d6;
  --as-btn-shadow: 0 16px 34px rgb(10 132 255 / .22);
  --as-lights: rgb(24 27 38 / .25);
  --as-sheen: 0 0 0 0 transparent;
  --as-shadow: 0 20px 55px rgb(70 72 105 / .07);
  --as-card-shadow: 0 20px 55px rgb(70 72 105 / .07);
  --as-win-shadow: 0 30px 80px rgb(70 72 105 / .13);
}
/* Cloud Dark: Cloud on Telemetry's charcoal lifted 10%; the same action blue. */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] .as {
  --as-ink: #ffffff; --as-mid: #cfd1d8; --as-muted: #b4b7c0; --as-dim: #a7abb5;
  --as-line: rgb(255 255 255 / .07); --as-line2: rgb(255 255 255 / .12); --as-line3: rgb(255 255 255 / .2);
  --as-panel: #2c2e32; --as-panel2: #313338; --as-well: #1c1d20; --as-band: #27292c;
  --as-acc: #9ccbff; --as-acc-rgb: 156 203 255; --as-acc-hi: #b8d9ff; --as-acc-ink: #0a1a2e;
  --as-ok: #7ee2b8; --as-ok-rgb: 126 226 184; --as-err: #ffadb5; --as-err-rgb: 255 173 181;
  --as-warn: #ffcb7a; --as-warn-rgb: 255 203 122;
  --as-head-ink: #a9acb6;
  --as-btn-shadow: 0 16px 34px rgb(10 132 255 / .3);
  --as-lights: rgb(255 255 255 / .3);
  --as-shadow: 0 20px 55px rgb(0 0 0 / .34);
  --as-card-shadow: 0 20px 55px rgb(0 0 0 / .3);
  --as-win-shadow: 0 30px 80px rgb(0 0 0 / .45);
}
.as *, .as *::before, .as *::after { box-sizing: border-box; }
.as :focus-visible { outline: 2px solid var(--as-acc); outline-offset: 3px; border-radius: 4px; }
.as a { color: inherit; text-decoration: none; }
.as p, .as h1, .as .as-headline, .as h2, .as h3, .as ol, .as ul, .as dl, .as dd, .as figure, .as pre { margin: 0; }
.as ol, .as ul { padding: 0; list-style: none; }
.as svg { display: block; }
.as button { font: inherit; color: inherit; }
.as code { font: inherit; }
.as [hidden] { display: none !important; }
.as .as-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.as .as-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.as .as-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Type ───────────────────────────────────────────────────────────────────────────────────── */
.as .as-headline, .as h2, .as h3 { font-family: var(--as-display); color: var(--as-ink); text-wrap: balance; }
.as .as-headline { font-size: clamp(2.8rem, 6.2vw, 5.4rem); line-height: .98; font-weight: 600; letter-spacing: -.045em; }
.as h2 { font-size: clamp(1.9rem, 3.9vw, 3.2rem); line-height: 1.06; font-weight: 600; letter-spacing: -.038em; }
.as h3 { font-size: 1.06rem; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
.as .as-acc { color: var(--as-acc); }
.as .as-eyebrow { display: inline-flex; gap: 8px; margin-bottom: 18px; font-family: var(--as-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--as-acc); }
.as .as-eyebrow::before { content: "["; color: var(--as-muted); letter-spacing: 0; }
.as .as-eyebrow::after { content: "]"; color: var(--as-muted); letter-spacing: 0; }
.as .as-lede { margin-top: 20px; max-width: 62ch; font-size: clamp(1.02rem, 1.35vw, 1.15rem); line-height: 1.65; color: var(--as-mid); text-wrap: pretty; }
.as .as-lede + .as-lede { margin-top: 12px; }
.as .as-statement { margin-top: clamp(28px, 4vw, 44px); display: flex; align-items: center; gap: 14px; font-family: var(--as-display);
  font-size: clamp(1.08rem, 1.8vw, 1.32rem); font-weight: 600; letter-spacing: -.02em; color: var(--as-ink); }
.as .as-statement::before { content: "\203A"; flex: none; font-family: var(--as-mono); font-weight: 700; color: var(--as-acc); }
.as .as-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--as-line3); border-radius: 4px;
  font-family: var(--as-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--as-muted); white-space: nowrap; }
.as .as-tag-acc { color: var(--as-acc); border-color: rgb(var(--as-acc-rgb) / .45); }

/* ── Sections ───────────────────────────────────────────────────────────────────────────────── */
.as .as-sec { position: relative; padding-block: clamp(76px, 9vw, 124px); }
.as .as-band { background: var(--as-band); border-block: 1px solid var(--as-line); }
.as .as-head { max-width: 860px; }
.as .as-head-c { margin-inline: auto; text-align: center; }
.as .as-head-c .as-lede { margin-inline: auto; }
.as .as-body { margin-top: clamp(36px, 5vw, 56px); }
.as .as-split { display: grid; gap: clamp(36px, 5vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .as .as-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.as .as-checklist { display: grid; gap: 10px; margin-top: 26px; }
.as .as-checklist li { display: flex; align-items: baseline; gap: 12px; font-size: 15px; color: var(--as-mid); }
.as .as-checklist li::before { content: ""; flex: none; width: 6px; height: 10px; margin-left: 3px; border: solid var(--as-acc); border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); }
.as .as-checklist-2 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 22px; }

/* ── Buttons ────────────────────────────────────────────────────────────────────────────────── */
.as .as-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.as .as-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--as-r-btn); font-family: var(--as-btn-font); font-size: 14px; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--as-ease), background-color .2s, border-color .2s, color .2s; }
.as .as-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--as-ease); }
.as .as-btn-p { background: var(--as-btn-bg); color: var(--as-btn-fg); border-color: var(--as-btn-line); box-shadow: var(--as-btn-shadow); }
.as .as-btn-p:hover { background: var(--as-btn-hi); border-color: var(--as-btn-hi-line); transform: translateY(-1px); }
.as .as-btn-p:hover svg { transform: translateY(2px); }
.as .as-btn-s { background: var(--as-panel); color: var(--as-ink); border-color: var(--as-line3); box-shadow: var(--as-sheen); }
.as .as-btn-s:hover { color: var(--as-acc); border-color: var(--as-acc); background: var(--as-panel2); }
/* Studio is not out yet: the primary slot shows a status, not a link — no hover lift, a slow pulse on the dot. */
.as .as-btn-soon { cursor: default; user-select: none; }
.as .as-btn-soon:hover { background: var(--as-btn-bg); border-color: var(--as-btn-line); transform: none; }
.as .as-btn-soon::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; animation: as-soon 2.4s ease-in-out infinite; }
@keyframes as-soon { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Surfaces ───────────────────────────────────────────────────────────────────────────────── */
.as .as-panel { position: relative; background: var(--as-panel); border: 1px solid var(--as-line); border-radius: var(--as-r);
  box-shadow: var(--as-shadow); }
.as .as-bar { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--as-line);
  font-family: var(--as-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--as-muted); }
.as .as-live { margin-left: auto; color: var(--as-ok); letter-spacing: .1em; white-space: nowrap; }
.as .as-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; vertical-align: 1px;
  background: var(--as-ok); box-shadow: 0 0 0 0 rgb(var(--as-ok-rgb) / .6); animation: as-led 2.2s ease-out infinite; }
.as .as-lights { display: inline-flex; gap: 6px; flex: none; }
.as .as-lights i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--as-lights); }
.as .as-card { padding: 24px; background: var(--as-panel); border: 1px solid var(--as-line); border-radius: var(--as-r);
  box-shadow: var(--as-card-shadow); transition: border-color .2s, transform .25s var(--as-ease), box-shadow .25s var(--as-ease); }
.as .as-card:hover { border-color: var(--as-line3); }
.as .as-card h3 { margin-top: 14px; }
.as .as-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--as-mid); }
.as .as-ico { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: var(--as-r-sm);
  background: rgb(var(--as-acc-rgb) / .07); box-shadow: inset 0 0 0 1px rgb(var(--as-acc-rgb) / .3); color: var(--as-acc); }
.as .as-ico .as-i { width: 18px; height: 18px; }
.as .as-grid3 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .as .as-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Scroll reveal (only once aircode-studio-tm.js runs, so the page reads without it). */
.as.as-js .as-rv { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--as-ease), transform .7s var(--as-ease); }
.as.as-js .as-rv.is-in { opacity: 1; transform: none; }

/* ── Studio window pieces (hero, targets, review) ───────────────────────────────────────────── */
.as .as-win { position: relative; background: var(--as-panel); border: 1px solid var(--as-line2); border-radius: var(--as-r-win);
  box-shadow: var(--as-win-shadow); overflow: hidden; }
.as .as-tb { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 16px; background: var(--as-panel2); border-bottom: 1px solid var(--as-line);
  font-family: var(--as-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--as-muted); white-space: nowrap; }
.as .as-tb-name { color: var(--as-ink); font-weight: 600; }
.as .as-tb-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--as-mid); }
.as .as-tb-crumb .sep { margin: 0 7px; color: var(--as-dim); }
.as .as-tb-state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--as-acc); }
.as .as-tb-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: as-blink 1.4s ease-in-out infinite; }
.as .as-tb-state .ok { display: none; }
.as .is-done .as-tb-state { color: var(--as-ok); }
.as .is-done .as-tb-state i { animation: none; }
.as .is-done .as-tb-state .run { display: none; }
.as .is-done .as-tb-state .ok { display: inline; }
.as .as-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--as-line2); border-radius: 5px;
  font-family: var(--as-mono); font-size: 10.5px; letter-spacing: .02em; color: var(--as-mid); white-space: nowrap; }
.as .as-chip-ok { color: var(--as-ok); border-color: rgb(var(--as-ok-rgb) / .4); }
.as .as-chip-acc { color: var(--as-acc); border-color: rgb(var(--as-acc-rgb) / .45); }
.as .as-spin { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1.6px solid rgb(var(--as-acc-rgb) / .25);
  border-top-color: var(--as-acc); animation: as-spin .8s linear infinite; }
/* status icon: a check when done (the default), a spinner while running */
.as .ic { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; color: var(--as-ok);
  box-shadow: inset 0 0 0 1.5px rgb(var(--as-ok-rgb) / .55); }
.as .ic::before { content: ""; width: 4px; height: 7px; margin-top: -2px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.as .is-pend > .ic, .as .is-pend .ic { box-shadow: none; border: 1.6px solid rgb(var(--as-acc-rgb) / .25); border-top-color: var(--as-acc); animation: as-spin .8s linear infinite; }
.as .is-pend > .ic::before, .as .is-pend .ic::before { content: none; }
.as .is-wait > .ic { box-shadow: inset 0 0 0 1.5px var(--as-line3); }
.as .is-wait > .ic::before { content: none; }


/* The agent's pointer, the screenshot flash and the evidence toast, inside a preview stage. */
.as .as-cursor { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: flex-start; pointer-events: none; opacity: 0;
  transform: translate(var(--cx, 70%), var(--cy, 60%)); transition: transform .75s cubic-bezier(.55, 0, .2, 1), opacity .3s; }
.as .as-cursor svg { width: 19px; height: 19px; fill: var(--as-acc); stroke: #0b0c0e; stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35)); }
.as .as-cursor span { margin: 15px 0 0 -3px; padding: 2px 6px; border-radius: 4px; background: var(--as-acc); color: var(--as-acc-ink); font-family: var(--as-mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.as .as-cursor::before { content: ""; position: absolute; left: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--as-acc); opacity: 0; }
.as .is-cursor .as-cursor { opacity: 1; }
.as .as-cursor.is-click::before { animation: as-ripple .5s ease-out; }
.as .as-flash { position: absolute; inset: 0; z-index: 7; background: #ffffff; opacity: 0; pointer-events: none; }
.as .is-flash .as-flash { animation: as-flash .55s ease-out; }
.as .as-toast { position: absolute; right: 12px; bottom: 12px; z-index: 8; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 6px;
  background: var(--as-panel); border: 1px solid var(--as-line2); box-shadow: 0 10px 24px -12px rgb(0 0 0 / .5); font-family: var(--as-mono); font-size: 11px; color: var(--as-ink);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--as-ease); }
.as .as-toast .as-i { width: 14px; height: 14px; color: var(--as-acc); }
.as .is-shot .as-toast { opacity: 1; transform: none; }


/* ── 1 · Hero ───────────────────────────────────────────────────────────────────────────────── */
.as .as-hero { padding-block: calc(80px + clamp(48px, 7vw, 92px)) clamp(72px, 8vw, 112px); overflow: clip; }
.as .as-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 46% at 80% 22%, rgb(var(--as-acc-rgb) / .08), transparent 70%), radial-gradient(60% 40% at 50% 92%, rgb(var(--as-acc-rgb) / .05), transparent 70%); }
.as .as-hero-copy { position: relative; display: grid; gap: 22px clamp(40px, 6vw, 88px); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 1024px) { .as .as-hero-copy { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.as .as-hero .as-headline { font-size: clamp(2.6rem, 5.2vw, 4.4rem); }
.as .as-hero .as-headline span { display: block; }
@media (min-width: 640px) { .as .as-hero .as-headline span { white-space: nowrap; } }
.as .as-hero .as-lede { margin-top: 0; }
.as .as-hero .as-ctas { margin-top: 28px; }
.as .as-hero .as-note { margin-top: 18px; font-family: var(--as-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--as-muted); }


/* ── 2 · The loop ───────────────────────────────────────────────────────────────────────────── */
.as .as-loop { position: relative; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(40px, 5vw, 60px); }
@media (min-width: 1024px) { .as .as-loop { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; } }
.as .as-stage { position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; background: var(--as-panel); border: 1px solid var(--as-line);
  border-radius: var(--as-r); box-shadow: var(--as-card-shadow); }
@media (min-width: 1024px) {
  .as .as-stage { border-radius: 0; }
  .as .as-stage + .as-stage { border-left: 0; }
  .as .as-stage:first-child { border-radius: var(--as-r) 0 0 var(--as-r); }
  .as .as-stage:last-child { border-radius: 0 var(--as-r) var(--as-r) 0; }
  .as .as-stage + .as-stage::after { content: ""; position: absolute; left: -9px; top: 26px; width: 16px; height: 16px; z-index: 1; border-radius: 50%; background: var(--as-panel);
    box-shadow: inset 0 0 0 1px var(--as-line3); }
  .as .as-stage + .as-stage .as-arrow { position: absolute; left: -5px; top: 30px; z-index: 2; width: 8px; height: 8px; color: var(--as-muted); }
}
.as .as-arrow { display: none; }
@media (min-width: 1024px) { .as .as-arrow { display: block; } }
.as .as-stage::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--as-acc); transform: scaleX(0); transform-origin: left; }
.as .as-stage .n { font-family: var(--as-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--as-dim); }
.as .as-stage h3 { margin-top: 10px; font-family: var(--as-mono); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--as-ink); }
.as .as-stage > p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--as-mid); }
.as .as-mini { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 18px; }
.as .as-mini-box { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border: 1px solid var(--as-line); border-radius: var(--as-r-sm); background: var(--as-well);
  font-family: var(--as-mono); font-size: 11px; color: var(--as-mid); }
.as .as-mini-box > span { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.as .as-mini-box .ic { width: 14px; height: 14px; }
.as .as-mini-box .ic::before { width: 3.5px; height: 6px; }
.as .as-mini-box .x { margin-left: auto; }
.as .as-mini-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.as .as-mini-chips .as-chip.is-on { color: var(--as-acc); border-color: rgb(var(--as-acc-rgb) / .45); }
.as .as-mini-ok { color: var(--as-ok); }
.as .as-bars { display: flex; gap: 3px; }
.as .as-bars i { width: 9px; height: 9px; border-radius: 2px; background: rgb(var(--as-ok-rgb) / .6); }
.as .as-bars i.d { background: rgb(var(--as-err-rgb) / .6); }
.as .as-bars i.n { background: var(--as-line2); }
.as .as-mini-commit { align-self: flex-start; padding: 3px 9px; border-radius: 5px; background: var(--as-btn-bg); color: var(--as-btn-fg); font-weight: 700; letter-spacing: .04em; }
.as .as-loop-under { display: none; }
@media (min-width: 1024px) {
  .as .as-loop-under { display: grid; grid-template-columns: 2fr 3fr; gap: 0; margin-top: 14px; font-family: var(--as-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
  .as .as-loop-under span { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 12px; color: var(--as-muted); }
  .as .as-loop-under span::before { content: ""; position: absolute; top: 0; left: 6px; right: 6px; height: 7px; border: 1px solid var(--as-line3); border-top: 0; border-radius: 0 0 4px 4px; }
  .as .as-loop-under span + span { color: var(--as-acc); }
  .as .as-loop-under span + span::before { border-color: rgb(var(--as-acc-rgb) / .55); }
}
.as .is-live .as-stage::before { animation: as-bar 10s linear infinite; animation-delay: calc(var(--i) * 2s - 2s); }
.as .is-live .as-stage h3 { animation: as-lit 10s linear infinite; animation-delay: calc(var(--i) * 2s - 2s); }


/* ── 4 · Native pipelines ───────────────────────────────────────────────────────────────────── */
.as .as-arch { display: flex; flex-direction: column; align-items: center; max-width: 1080px; margin: clamp(40px, 5vw, 60px) auto 0; }
.as .as-anode { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid var(--as-line2); border-radius: var(--as-r-sm); background: var(--as-panel);
  box-shadow: var(--as-card-shadow); }
.as .as-anode b { display: block; font-family: var(--as-display); font-size: 15px; font-weight: 600; color: var(--as-ink); }
.as .as-anode small { display: block; font-family: var(--as-mono); font-size: 11px; color: var(--as-muted); }
.as .as-anode-studio { padding: 16px 26px; border-color: rgb(var(--as-acc-rgb) / .55); box-shadow: 0 0 0 5px rgb(var(--as-acc-rgb) / .06), var(--as-shadow); }
.as .as-anode-studio b { font-size: 18px; }
.as .as-anode-studio small { color: var(--as-acc); }
.as .as-wire { position: relative; width: 2px; height: 44px; flex: none; background: var(--as-line3); overflow: hidden; }
.as .as-wire::after { content: ""; position: absolute; left: 0; top: -14px; width: 2px; height: 14px; border-radius: 1px; background: var(--as-acc); }
.as .is-live .as-wire::after { animation: as-drop 1.6s linear infinite; }
.as .as-wire:nth-of-type(2)::after { animation-delay: .5s; }
.as .as-wire:nth-of-type(3)::after { animation-delay: 1s; }
.as .as-arow { position: relative; display: grid; gap: 10px; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; border: 1px dashed var(--as-line2); border-radius: var(--as-r); }
.as .as-arow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 10px; border: 1px solid var(--as-line2); border-radius: var(--as-r-sm);
  background: var(--as-panel); text-align: center; }
.as .as-arow li b { font-family: var(--as-display); font-size: 14.5px; font-weight: 600; color: var(--as-ink); }
.as .as-arow li span { font-family: var(--as-mono); font-size: 10.5px; color: var(--as-muted); }
.as .as-arow-out li .as-i { width: 18px; height: 18px; margin-bottom: 4px; color: var(--as-acc); }
@media (min-width: 640px) { .as .as-arow-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } .as .as-arow-out { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .as .as-arow { padding: 24px 0 0; border: 0; border-radius: 0; gap: 12px; }
  .as .as-arow-tools { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-bottom: 24px; }
  .as .as-arow-out { max-width: 760px; }
  .as .as-arow::before { content: ""; position: absolute; top: 0; left: calc(100% / (var(--n) * 2)); right: calc(100% / (var(--n) * 2)); height: 2px; background: var(--as-line3); }
  .as .as-arow-tools::after { content: ""; position: absolute; bottom: 0; left: calc(100% / 12); right: calc(100% / 12); height: 2px; background: var(--as-line3); }
  .as .as-arow li::before { content: ""; position: absolute; top: -25px; left: 50%; width: 2px; height: 24px; margin-left: -1px; background: var(--as-line3); }
  .as .as-arow-tools li::after { content: ""; position: absolute; bottom: -25px; left: 50%; width: 2px; height: 24px; margin-left: -1px; background: var(--as-line3); }
}
.as .is-live .as-arow-tools li { animation: as-flowpulse 6s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
.as .as-notes { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); margin-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--as-line); }
@media (min-width: 720px) { .as .as-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .as .as-notes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.as .as-notes li { padding: 22px 22px 6px 0; }
.as .as-notes h3 { font-family: var(--as-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--as-acc); }
.as .as-notes p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--as-mid); }


/* ── 6 · Objective checks ───────────────────────────────────────────────────────────────────── */
.as .as-checks { margin-top: clamp(40px, 5vw, 56px); }
.as .as-check { display: flex; flex-direction: column; padding: 26px; }
.as .as-check-top { display: flex; align-items: center; justify-content: space-between; }
.as .as-check h3 { margin-top: 20px; font-size: 1.35rem; letter-spacing: -.025em; }
.as .as-ev { margin-top: 20px; padding: 13px 14px; border: 1px solid var(--as-line); border-radius: var(--as-r-sm); background: var(--as-well); overflow-x: auto;
  font-family: var(--as-mono); font-size: 11.5px; line-height: 1.75; color: var(--as-mid); white-space: pre; }
.as .as-ev .c { color: var(--as-acc); }
.as .as-ev .ok { color: var(--as-ok); }
.as .as-ev .dim { color: var(--as-dim); }
.as .as-mount { position: relative; margin-top: 20px; height: 118px; padding: 14px; border: 1px solid var(--as-line); border-radius: var(--as-r-sm); background: var(--as-well); }
.as .as-mount-app { position: relative; height: 100%; border-radius: 5px; background: #ffffff; padding: 12px 14px; }
.as .as-mount-app i { display: block; height: 7px; margin-top: 7px; border-radius: 2px; background: #e3e6ea; }
.as .as-mount-app i:first-child { width: 46%; height: 9px; margin-top: 0; background: #111418; }
.as .as-mount-app i:nth-child(2) { width: 70%; }
.as .as-mount-app i:nth-child(3) { width: 82%; height: 14px; }
.as .as-mount-app i:nth-child(4) { width: 36%; height: 14px; background: #111418; }
.as .as-mount-box { position: absolute; inset: 8px; border: 1.5px dashed var(--as-acc); border-radius: 7px; }
.as .as-mount-box span { position: absolute; right: 8px; top: -9px; padding: 1px 6px; border-radius: 3px; background: var(--as-acc); color: var(--as-acc-ink);
  font-family: var(--as-mono); font-size: 9.5px; font-weight: 700; }
.as .as-check .as-res { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 20px; font-family: var(--as-mono); font-size: 12.5px; font-weight: 600; color: var(--as-ok); }
.as .as-res .p { display: none; color: var(--as-acc); }
.as .as-check.is-pend .as-res .p { display: inline; }
.as .as-check.is-pend .as-res .d { display: none; }
.as .as-check.is-wait .as-res { color: var(--as-dim); }
.as .as-check.is-wait .as-res .d { visibility: hidden; }


.as .as-git-notes { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--as-line); }
@media (min-width: 720px) { .as .as-git-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .as .as-git-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.as .as-git-notes li { padding: 22px 22px 4px 0; }
.as .as-git-notes h3 { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; }
.as .as-git-notes h3 .as-i { color: var(--as-acc); }
.as .as-git-notes p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--as-mid); }

/* ── 8 · Session continuity ─────────────────────────────────────────────────────────────────── */
.as .as-cont { display: flex; flex-direction: column; padding: clamp(18px, 3vw, 28px); }
.as .as-cnode { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--as-line2); border-radius: var(--as-r-sm); background: var(--as-panel2);
  transition: opacity .5s, border-color .5s; }
.as .as-cnode .as-lights i { width: 8px; height: 8px; }
.as .as-cnode b { display: block; font-size: 14px; font-weight: 600; color: var(--as-ink); }
.as .as-cnode small { display: block; font-family: var(--as-mono); font-size: 11px; color: var(--as-muted); }
.as .as-cnode .st { margin-left: auto; font-family: var(--as-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--as-muted); white-space: nowrap; }
.as .as-csvc { flex-wrap: wrap; border-color: rgb(var(--as-acc-rgb) / .5); background: rgb(var(--as-acc-rgb) / .05); box-shadow: 0 0 0 4px rgb(var(--as-acc-rgb) / .05); }
.as .as-csvc .st { color: var(--as-ok); }
.as .as-csvc .st::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--as-ok); vertical-align: 1px;
  animation: as-led 2.2s ease-out infinite; }
.as .as-prog { height: 4px; overflow: hidden; border-radius: 2px; background: var(--as-line2); }
.as .as-prog i { display: block; height: 100%; }
.as .as-csvc .as-prog { flex: 1 0 100%; width: auto; margin-top: 6px; }
.as .as-csvc .as-prog i { width: 100%; background: linear-gradient(90deg, transparent, var(--as-acc), transparent) 0 0 / 50% 100% no-repeat; }
.as .is-live .as-csvc .as-prog i { animation: as-sweep 1.8s linear infinite; }
.as .as-clink { position: relative; display: flex; align-items: center; height: 46px; padding-left: 52px; font-family: var(--as-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--as-dim); }
.as .as-clink::before { content: ""; position: absolute; left: 28px; top: 4px; bottom: 4px; border-left: 2px dashed var(--as-line3); }
.as .as-clink::after { content: ""; position: absolute; left: 24px; bottom: 4px; width: 8px; height: 8px; border: solid var(--as-line3); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ── 9 · Preview lanes ──────────────────────────────────────────────────────────────────────── */
.as .as-lanes { overflow: hidden; }
.as .as-lane-w { display: none; position: relative; height: 2px; background: var(--as-line2); overflow: hidden; }
@media (min-width: 640px) { .as .as-lane-w { display: block; } }
.as .as-lane-w::after { content: ""; position: absolute; top: 0; left: -24px; width: 24px; height: 2px; background: var(--as-acc); }
.as .is-live .as-lane-w::after { animation: as-run 2.4s linear infinite; animation-delay: calc(var(--i) * .7s); }
.as .as-lanes-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 16px; background: var(--as-panel2); font-family: var(--as-mono); font-size: 11.5px; color: var(--as-muted); }
.as .as-lanes-foot .ok { color: var(--as-ok); }

/* ── 10 · Everything else ───────────────────────────────────────────────────────────────────── */
.as .as-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--as-line); border-left: 1px solid var(--as-line); }
.as .as-more li { padding: 20px 22px; border-right: 1px solid var(--as-line); border-bottom: 1px solid var(--as-line); }
.as .as-more h3 { display: flex; align-items: center; gap: 10px; font-family: var(--as-sans); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.as .as-more h3 .as-i { color: var(--as-acc); }
.as .as-more p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--as-muted); }

/* ── 11 · From idea to verified change ──────────────────────────────────────────────────────── */
.as .as-flow { position: relative; max-width: 1000px; margin: clamp(40px, 5vw, 56px) auto 0; }
.as .as-flow::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 40px; width: 2px; background: var(--as-line2); }
.as .as-flow > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 20px; padding-bottom: 30px; }
.as .as-flow > li:last-child { padding-bottom: 0; }
@media (min-width: 900px) { .as .as-flow > li { grid-template-columns: 40px minmax(0, .9fr) minmax(0, 1fr); align-items: start; gap: 24px; } }
.as .as-flow .nd { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--as-line3); border-radius: 50%;
  background: var(--as-panel); font-family: var(--as-mono); font-size: 12px; font-weight: 600; color: var(--as-muted); }
.as .as-flow > li:last-child .nd { border-color: rgb(var(--as-ok-rgb) / .6); color: var(--as-ok); }
.as .is-live .as-flow .nd, .as .as-flow.is-live .nd { animation: as-ringnode 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.5s); }
.as .as-flow h3 { margin-top: 8px; font-size: 1.22rem; letter-spacing: -.02em; }
.as .as-flow .tx p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--as-mid); }
.as .as-flow .art { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--as-line); border-radius: var(--as-r-sm);
  background: var(--as-panel); box-shadow: var(--as-card-shadow); font-family: var(--as-mono); font-size: 12px; color: var(--as-mid); }
@media (min-width: 900px) { .as .as-flow .art { grid-column: 3; margin-top: 4px; } }
.as .as-flow .art q { font-family: var(--as-sans); font-size: 14px; color: var(--as-ink); quotes: "\201C" "\201D"; }
.as .as-flow .art .ok { color: var(--as-ok); }

/* ── Final CTA ──────────────────────────────────────────────────────────────────────────────── */
.as .as-final { text-align: center; padding-block: clamp(96px, 12vw, 150px); overflow: hidden; border-top: 1px solid var(--as-line); }
.as .as-final::before { content: ""; position: absolute; left: 50%; bottom: -260px; width: 1000px; height: 520px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--as-acc-rgb) / .1), transparent); }
.as .as-final .as-wrap { position: relative; }
.as .as-final h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.as .as-final .as-lede { margin-inline: auto; }
.as .as-final .as-ctas { justify-content: center; }
.as .as-final .as-note { margin-top: 18px; font-family: var(--as-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--as-muted); }

/* ── The AirCode Studio window, laid out as the real app (its own screenshots), in the page's tokens ─
   Sidebar (projects → sessions), conversation (user bubbles, "Worked for …", progress rows, the green
   "ready" card, composer with the model and Send) and the right panel (Preview · Changes · Files ·
   Terminal, Web · iOS · Android, the run toolbar, the preview). Telemetry recolours it: charcoal panels,
   the visitor's signal colour where the app uses its blue. */
.as .sw, .as .sw-frag { --sw-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --sw-side: var(--as-band); --sw-raise: var(--as-panel2); --sw-field: var(--as-well);
  --sw-pick: rgb(var(--as-acc-rgb) / .1); --sw-bubble: rgb(var(--as-acc-rgb) / .09); --sw-bubble-line: rgb(var(--as-acc-rgb) / .24);
  font-family: var(--sw-font); letter-spacing: -.006em; }
.as .sw { position: relative; overflow: hidden; background: var(--as-panel); border: 1px solid var(--as-line2); border-radius: var(--as-r-win);
  box-shadow: var(--as-win-shadow); font-size: 13px; line-height: 1.45; color: var(--as-ink); text-align: left; }
.as .sw .as-i, .as .sw-frag .as-i { width: 15px; height: 15px; }
.as .sw-lights { display: inline-flex; gap: 8px; flex: none; }
.as .sw-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .18); }
.as .sw-lights i:nth-child(2) { background: #febc2e; }
.as .sw-lights i:nth-child(3) { background: #28c840; }
html[data-final="telemetry"] .as .sw-lights i { background: none; box-shadow: inset 0 0 0 1.5px var(--as-lights); }
.as .sw-top { display: flex; flex: none; align-items: center; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--as-line); }
.as .sw-ico { color: var(--as-muted); }
.as .sw button { font-family: inherit; }

/* hero window: sidebar | conversation | right panel (sidebar from 1160px, side by side from 900px) */
.as .sw-body { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .as .sw-hero .sw-body { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); grid-template-rows: 680px; } }
@media (min-width: 1160px) { .as .sw-hero .sw-body { grid-template-columns: 238px minmax(0, .94fr) minmax(0, 1.06fr); } }

/* sidebar */
.as .sw-side { display: none; }
@media (min-width: 1160px) {
  .as .sw-side { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; min-height: 0; padding: 0 10px 12px; background: var(--sw-side); border-right: 1px solid var(--as-line); }
}
.as .sw-side-top { gap: 18px; padding: 0 6px; border-bottom: 0; }
.as .sw-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 16px; }
.as .sw-brand img { width: 20px; height: 20px; }
.as .sw-brand b { font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.as .sw-brand small { margin-top: 3px; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--as-muted); }
.as .sw-acts li { display: flex; align-items: center; gap: 11px; padding: 7px 8px; font-size: 13.5px; color: var(--as-ink); }
.as .sw-acts .as-i, .as .sw-tree .as-i { color: var(--as-mid); }
.as .sw-ph { display: flex; align-items: center; justify-content: space-between; margin: 16px 8px 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--as-muted); }
.as .sw-ph .r { display: inline-flex; gap: 12px; }
.as .sw-ph .as-i { width: 14px; height: 14px; color: var(--as-muted); }
.as .sw-tree { min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.as .sw-proj { display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px; font-size: 13.5px; color: var(--as-ink); white-space: nowrap; }
.as .sw-sess { position: relative; margin-left: 15px; padding: 6px 8px 6px 20px; border-left: 1px solid var(--as-line2); font-size: 13px; color: var(--as-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .3s, color .3s; }
.as .sw-sess.is-on, .as .sw[data-scene="acme"] [data-pick="acme"], .as .sw[data-scene="snake"] [data-pick="snake"], .as .sw[data-scene="lumen"] [data-pick="lumen"] {
  border-radius: 0 7px 7px 0; background: var(--sw-pick); color: var(--as-ink); }
.as .sw-sess.is-on::before, .as .sw[data-scene="acme"] [data-pick="acme"]::before, .as .sw[data-scene="snake"] [data-pick="snake"]::before, .as .sw[data-scene="lumen"] [data-pick="lumen"]::before {
  content: ""; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--as-acc); }
.as .sw-archd { margin: 6px 8px 0; padding: 10px 0 8px; font-size: 12.5px; color: var(--as-muted); }
.as .sw-acct { display: flex; align-items: center; gap: 10px; padding: 10px 8px 0; border-top: 1px solid var(--as-line); }
.as .sw-acct .av { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--sw-pick); color: var(--as-acc); font-weight: 700; }
.as .sw-acct .nm { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.as .sw-acct b { font-size: 13.5px; font-weight: 600; }
.as .sw-acct small { font-size: 11.5px; color: var(--as-muted); }
.as .sw-acct .as-i { width: 13px; height: 13px; color: var(--as-muted); }

/* conversation */
.as .sw-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; }
.as .sw-hero .sw-main { height: 430px; border-bottom: 1px solid var(--as-line); }
@media (min-width: 900px) { .as .sw-hero .sw-main { height: auto; border-bottom: 0; border-right: 1px solid var(--as-line); } }
.as .sw-mh { gap: 12px; padding: 0 22px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.as .sw-sub { display: flex; justify-content: space-between; gap: 14px; padding: 12px 22px 0; font-size: 12.5px; color: var(--as-muted); white-space: nowrap; }
.as .sw-sub > span { overflow: hidden; text-overflow: ellipsis; }
.as .sw-sub .arch { flex: none; }
.as .sw-convs { position: relative; min-height: 0; overflow: hidden; }
.as .sw-conv { display: flex; flex-direction: column; gap: 14px; padding: 16px 22px 14px; }
.as .sw-convs > .sw-conv { height: 100%; overflow: hidden; }
.as .sw-user { align-self: flex-end; max-width: 84%; padding: 10px 14px; border-radius: 14px; background: var(--sw-bubble); box-shadow: inset 0 0 0 1px var(--sw-bubble-line);
  font-size: 13.5px; line-height: 1.5; color: var(--as-ink); }
.as .sw-user .sw-u2 { display: block; margin-top: 10px; }
.as .sw-worked { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--as-line); font-size: 13px; color: var(--as-muted); }
.as .sw-worked::after { content: "\203A"; font-size: 15px; line-height: 1; }
.as .sw-text { font-size: 13.5px; line-height: 1.6; color: var(--as-mid); }
.as .sw-list { display: grid; gap: 3px; margin-top: 8px; }
.as .sw-list li { position: relative; padding-left: 18px; }
.as .sw-list li::before { content: ""; position: absolute; left: 6px; top: .68em; width: 4px; height: 4px; border-radius: 50%; background: var(--as-muted); }
.as .sw-prog { display: flex; flex-direction: column; gap: 12px; }
.as .sw-prog li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--as-muted); }
.as .sw-prog li::before { content: ""; flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-block: 3.5px solid transparent; }
.as .sw-prog li.is-pend { color: var(--as-ink); }
.as .sw-prog li.is-pend > span { background: linear-gradient(90deg, var(--as-mid) 0 35%, var(--as-acc) 50%, var(--as-mid) 65% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sw-shine 1.6s linear infinite; }
.as .sw-done { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: rgb(var(--as-ok-rgb) / .1);
  box-shadow: inset 0 0 0 1px rgb(var(--as-ok-rgb) / .3); font-size: 14px; color: var(--as-ink); }
.as .sw-done .ok { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--as-ok); }
.as .sw-done .ok::before { content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid var(--as-panel); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.as .sw-reply { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.55; color: var(--as-mid); }
.as .sw-reply > div, .as .sw-reply > p { flex: 1; min-width: 0; padding-top: 4px; }
.as .sw-av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--as-panel2); box-shadow: inset 0 0 0 1px var(--as-line2); }
.as .sw-av img { width: 14px; height: 14px; }
.as .sw-sks { display: grid; flex: 1; gap: 9px; padding-top: 6px; }
.as .sw-sks i { display: block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--as-line) 25%, var(--as-line3) 50%, var(--as-line) 75%) 0 0 / 300% 100%;
  animation: sw-sk 1.4s linear infinite; }
.as .sw-comp { margin: 0 18px; padding: 12px 12px 10px 16px; border: 1px solid var(--as-line2); border-radius: 16px; background: var(--as-panel); box-shadow: 0 8px 22px -16px rgb(0 0 0 / .55); }
.as .sw-comp .ph { display: block; font-size: 14px; color: var(--as-muted); }
.as .sw-comp-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.as .sw-comp-row .pl { display: grid; color: var(--as-mid); }
.as .sw-model { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--sw-raise); font-size: 12.5px; color: var(--as-ink); }
.as .sw-model .as-i { width: 12px; height: 12px; }
.as .sw-send { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 12px; border-radius: 9px; background: var(--as-btn-bg); color: var(--as-btn-fg);
  font-size: 13px; font-weight: 600; }
.as .sw-send .as-i { width: 13px; height: 13px; stroke-width: 2.4; }
.as .sw-hint { padding: 8px 20px 12px; text-align: right; font-size: 11.5px; color: var(--as-muted); }

/* right panel */
.as .sw-right { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--as-panel); }
.as .sw-hero .sw-right { height: 600px; }
@media (min-width: 900px) { .as .sw-hero .sw-right { height: auto; } }
.as .sw-rtabs { justify-content: flex-end; gap: 4px; padding: 0 12px; overflow: hidden; }
.as .sw-rt { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 0; border-radius: 8px; background: none; font-size: 12.5px; color: var(--as-mid); white-space: nowrap; }
.as .sw-rt b { font-weight: 500; }
.as .sw-rt.is-on, .as .sw-rt[aria-selected="true"] { background: var(--sw-pick); color: var(--as-acc); }
.as button.sw-rt { cursor: pointer; }
.as button.sw-rt:hover { color: var(--as-ink); }
.as button.sw-rt[aria-selected="true"]:hover { color: var(--as-acc); }
.as .sw-rtabs .sw-ico { flex: none; margin-left: 8px; }
.as .sw-pv { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.as .sw-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 12px 0; padding: 3px; border-radius: 11px; background: var(--sw-field); box-shadow: inset 0 0 0 1px var(--as-line); }
.as .sw-seg > * { padding: 6px 4px; border: 0; border-radius: 8px; background: none; font-size: 12.5px; color: var(--as-mid); text-align: center; }
.as .sw-seg .is-on, .as .sw-seg [aria-selected="true"] { background: var(--as-panel2); color: var(--as-ink); box-shadow: 0 1px 2px rgb(0 0 0 / .25), inset 0 0 0 1px var(--as-line2); }
.as .sw-seg .is-off { color: var(--as-dim); }
.as button.sw-segb { cursor: pointer; transition: color .2s; }
.as button.sw-segb:hover { color: var(--as-ink); }
.as .sw-tools { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 12px 16px 0; font-size: 12.5px; color: var(--as-ink); white-space: nowrap; overflow: hidden; }
/* Narrow phones: the mock's tab and tool rows start at the left and tighten, so the active "Preview" tab and the tools
   are never cut at their start ("ew"); the tool row wraps instead of cutting "Settings". */
@media (max-width: 419.98px) {
  .as .sw-rtabs { justify-content: flex-start; gap: 0; padding: 0 6px; }
  .as .sw-rt { padding: 5px 7px; font-size: 12px; }
  .as .sw-rtabs .sw-ico { display: none; }
  .as .sw-tools { flex-wrap: wrap; gap: 8px 10px; padding: 12px 12px 0; font-size: 12px; }
}
.as .sw-tool { display: inline-flex; align-items: center; gap: 7px; transition: background-color .25s, color .25s, box-shadow .25s; }
.as .sw-tool .sq { width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
.as .sw-tool .pl { width: 0; height: 0; border-left: 9px solid var(--as-acc); border-block: 5.5px solid transparent; }
.as .sw-tool .cb { position: relative; width: 14px; height: 14px; border-radius: 4px; background: var(--as-acc); }
.as .sw-tool .cb::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 3.5px; height: 7px; border: solid var(--as-acc-ink); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.as .sw-run { color: var(--as-acc); }
.as .sw-tool.is-active { margin: -4px -8px; padding: 4px 8px; border-radius: 7px; background: var(--sw-pick); color: var(--as-acc); box-shadow: inset 0 0 0 1px rgb(var(--as-acc-rgb) / .35); }
.as .sw-devs { display: inline-flex; gap: 4px; margin-left: auto; }
.as .sw-devs > * { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--as-muted); }
.as .sw-devs .is-on, .as .sw-devs [aria-pressed="true"] { background: var(--sw-pick); color: var(--as-acc); }
.as .sw-devs button { cursor: pointer; }
.as .sw-devs button:hover { color: var(--as-ink); }
.as .sw-url { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 12px 16px 8px; font-size: 12.5px; color: var(--as-muted); white-space: nowrap; overflow: hidden; }
.as .sw-url .u { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--as-mid); }
.as .sw-url .open { margin-left: auto; }
.as .sw-agentchip { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--sw-pick); color: var(--as-acc); font-size: 11.5px; }
.as .sw-sels { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 8px; padding: 12px 12px 6px; }
.as .sw-sel { position: relative; display: flex; align-items: center; min-width: 0; height: 32px; padding: 0 28px 0 11px; border-radius: 8px; background: var(--as-panel2);
  box-shadow: inset 0 0 0 1px var(--as-line2); font-size: 12.5px; color: var(--as-ink); white-space: nowrap; }
.as .sw-sel > span { overflow: hidden; text-overflow: ellipsis; }
.as .sw-sel::before, .as .sw-sel::after { content: ""; position: absolute; right: 12px; width: 4px; height: 4px; border: solid var(--as-muted); border-width: 1.4px 1.4px 0 0; }
.as .sw-sel::before { top: 11px; transform: rotate(-45deg); }
.as .sw-sel::after { bottom: 11px; transform: rotate(135deg); }
.as .sw-stage { position: relative; min-height: 0; margin: 4px 12px 12px; overflow: hidden; border-radius: 12px; background: var(--sw-field); box-shadow: inset 0 0 0 1px var(--as-line); }
.as .sw-stage.is-dev { display: grid; place-items: center; padding: 14px; }
.as .sw-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 16px 12px; border-top: 1px solid var(--as-line); font-size: 12px; color: var(--as-muted); white-space: nowrap; }
.as .sw-foot .live { color: var(--as-ok); }
.as .sw-idle { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--sw-field);
  font-size: 13px; color: var(--as-muted); }
.as :is([data-pv="idle"], [data-pv="start"]) .sw-idle { display: flex; }
.as [data-pv="idle"] .sw-idle .as-spin { display: none; }
.as [data-pv="boot"] .sw-boot { display: flex; }
.as [data-pv="off"] .sw-boot { display: flex; }
.as [data-pv="off"] .sw-boot > * { visibility: hidden; }
.as .sw-stage .as-cursor svg { stroke: #0b0c0e; }

/* the hero's three sessions, and its demo states (without the script: the finished AcmeDashboard session) */
.as .sw[data-scene="acme"] [data-sc]:not([data-sc="acme"]), .as .sw[data-scene="snake"] [data-sc]:not([data-sc="snake"]),
.as .sw[data-scene="lumen"] [data-sc]:not([data-sc="lumen"]) { display: none !important; }
.as .sw.is-run [data-at]:not(.is-on) { display: none !important; }
.as .sw.is-run [data-at].is-on { animation: as-in .35s var(--as-ease) both; }
.as .sw:not(.is-run) [data-until], .as .sw [data-until].is-gone { display: none !important; }
/* the app opening (skeleton, as Studio draws it) and an app still loading in the preview */
.as .sw.is-loading .t, .as .sw [data-pv="sk"] .sw-stage .t { color: transparent !important; -webkit-text-fill-color: transparent; border-radius: 4px;
  background: linear-gradient(90deg, var(--as-line2) 25%, var(--as-line3) 50%, var(--as-line2) 75%) 0 0 / 300% 100% !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: sw-sk 1.4s linear infinite; }
.as .sw [data-pv="sk"] .sw-stage .acme .t, .as .sw.is-loading .acme .t { background: linear-gradient(90deg, #eceef3 25%, #f6f7fa 50%, #eceef3 75%) 0 0 / 300% 100% !important; }
.as .sw.is-loading :is(.sw-user, .sw-done, .sw-send, .up) { color: transparent; }
.as .sw.is-loading .acme :is(.acme-bars, .acme-line, .acme-donut) { opacity: .55; }

/* phones: the iPhone Simulator and the Android Emulator around a dark app */
.as .sw-phone { position: relative; height: 100%; max-height: 560px; aspect-ratio: 1 / 2.05; padding: 7px; border-radius: 40px; background: #0b0b0d;
  box-shadow: 0 0 0 1.5px #34363b, inset 0 0 0 1px #000, 0 30px 50px -26px rgb(0 0 0 / .8); }
.as .sw-phone.is-android { border-radius: 26px; }
.as .sw-scr { container-type: inline-size; position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 33px; background: #070d12; }
.as .is-android .sw-scr { border-radius: 19px; }
.as .sw-sbar { display: flex; flex: none; align-items: center; justify-content: space-between; height: 30px; padding: 0 20px; background: #070d12; color: #f1f5f9;
  font: 600 11px -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; }
.as .is-android .sw-sbar { padding: 0 14px; font-weight: 500; }
.as .sw-sbar .r { display: flex; align-items: center; gap: 5px; }
.as .sw-sbar .w { width: 11px; height: 8px; background: #f1f5f9; clip-path: polygon(50% 100%, 0 20%, 50% 0, 100% 20%); }
.as .sw-sbar .b { width: 18px; height: 9px; border-radius: 2.5px; box-shadow: inset 0 0 0 1.2px #f1f5f9; position: relative; }
.as .sw-sbar .b::before { content: ""; position: absolute; inset: 2px 4px 2px 2px; border-radius: 1px; background: #f1f5f9; }
.as .is-ios .sw-scr::before { content: ""; position: absolute; z-index: 5; top: 8px; left: 50%; width: 30%; height: 18px; transform: translateX(-50%); border-radius: 10px; background: #000; }
.as .is-android .sw-scr::before { content: ""; position: absolute; z-index: 5; top: 10px; left: 50%; width: 9px; height: 9px; transform: translateX(-50%); border-radius: 50%; background: #000; box-shadow: 0 0 0 1px #1a1d22; }
.as .sw-scr::after { content: ""; position: absolute; z-index: 5; bottom: 6px; left: 50%; width: 34%; height: 4px; transform: translateX(-50%); border-radius: 2px; background: #e5e7eb; opacity: .85; }
.as .sw-scr > .snk { flex: 1; min-height: 0; }
.as .sw-boot { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #000;
  color: #a5adba; font: 500 10px -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; }
.as .sw-boot-logo { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #5eead4, #818cf8); animation: as-blink 1.2s ease-in-out infinite; }

/* ── The apps in the previews (the visitor's own: they keep their own colours in every theme) ── */
/* Acme, the SaaS dashboard */
.as .acme { container-type: inline-size; position: relative; height: 100%; overflow: hidden; background: #ffffff; color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; font-size: 11px; line-height: 1.35; letter-spacing: -.005em; }
.as .acme-in { transition: transform .9s cubic-bezier(.4, 0, .2, 1); }
.as .acme-nav { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-bottom: 1px solid #eef0f4; }
.as .acme-logo { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 750; letter-spacing: -.03em; color: #111a3a; }
.as .acme-logo svg { width: 20px; height: 20px; fill: #1e1b6b; }
.as .acme-tabs { display: flex; gap: 2px; margin-left: auto; }
.as .acme-tabs > span { padding: 4px 8px; border-radius: 6px; font-size: 10.5px; color: #374151; }
.as .acme-tabs .is-on { background: #eef2ff; color: #3730a3; font-weight: 600; }
.as .acme-av { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #e0e7ff; color: #3730a3; font-size: 9px; font-weight: 700; }
.as .acme-body { display: flex; flex-direction: column; gap: 9px; padding: 13px 14px 16px; }
.as .acme-hello { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.as .acme-h { font-size: 19px; font-weight: 750; letter-spacing: -.035em; color: #0b1020; }
.as .acme-s { margin-top: 3px; font-size: 10.5px; color: #4b5563; }
.as .acme-date { position: relative; display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #e5e7eb; border-radius: 7px; font-size: 9.5px; color: #111827; white-space: nowrap; }
.as .acme-date .as-i { width: 11px; height: 11px; }
.as .acme-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 4; display: none; flex-direction: column; min-width: 110px; padding: 4px; border-radius: 8px; background: #fff;
  box-shadow: 0 0 0 1px #e5e7eb, 0 10px 24px -8px rgb(16 24 40 / .25); }
.as .acme-menu > span { padding: 5px 8px; border-radius: 5px; font-size: 9.5px; color: #374151; }
.as .acme-menu .is-on { background: #eef2ff; color: #3730a3; }
.as .acme-date.is-open .acme-menu { display: flex; }
.as .acme-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.as .acme-card { min-width: 0; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #eceef3, 0 1px 2px rgb(16 24 40 / .04); }
.as .acme-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 7px; }
.as .acme-kpi .lbl { font-size: 9.5px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as .acme-kpi .v { grid-column: 1 / -1; margin-top: 7px; font-size: 17px; font-weight: 750; letter-spacing: -.035em; color: #0b1020; white-space: nowrap; }
.as .acme-kpi .d { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 8.5px; color: #4b5563; white-space: nowrap; }
.as .acme .ico, .as .acme .ai { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
.as .acme .ico .as-i, .as .acme .ai .as-i { width: 12px; height: 12px; }
.as .acme .c1 { background: #eef2ff; color: #4f46e5; }
.as .acme .c2 { background: #eff6ff; color: #2563eb; }
.as .acme .c3 { background: #f5f3ff; color: #7c3aed; }
.as .acme .c4 { background: #ecfdf5; color: #059669; }
.as .acme .c5 { background: #fff7ed; color: #ea580c; }
.as .acme .up { padding: 1px 5px; border-radius: 4px; background: #dcfce7; color: #166534; font-size: 8.5px; font-weight: 650; }
.as .acme-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.as .acme-ch { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; font-weight: 650; color: #111827; }
.as .acme-ch .sel { padding: 3px 6px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 8.5px; font-weight: 500; white-space: nowrap; }
.as .acme-ch .lnk { font-size: 9px; font-weight: 600; color: #4338ca; }
.as .acme-big { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 16px; font-weight: 750; letter-spacing: -.03em; color: #0b1020; }
.as .acme-bars { display: flex; align-items: flex-end; gap: 2px; height: 66px; margin-top: 8px; background: repeating-linear-gradient(to top, #f1f3f7 0 1px, transparent 1px 16.5px); }
.as .acme-bars i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(#6d8ff3, #b4c4fa); transform-origin: bottom; }
.as .acme-line { display: block; width: 100%; height: 66px; margin-top: 8px; overflow: visible; }
.as .acme-line .ar { fill: rgb(139 92 246 / .1); stroke: none; }
.as .acme-line .ln { fill: none; stroke: #8b5cf6; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.as .acme-x { display: flex; justify-content: space-between; margin-top: 4px; font-size: 7.5px; color: #6b7280; }
.as .acme-act { display: grid; gap: 2px; margin-top: 6px; }
.as .acme-act li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 0; }
.as .acme-act b { display: block; font-size: 9.5px; font-weight: 650; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as .acme-act small { display: block; font-size: 8.5px; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as .acme-act time { font-size: 8px; color: #6b7280; white-space: nowrap; }
.as .acme-donut { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.as .acme-donut .dn { position: relative; display: grid; place-items: center; width: 78px; height: 78px; flex: none; border-radius: 50%; text-align: center;
  background: conic-gradient(#5b8def 0 50%, #8b5cf6 0 79%, #b39dfa 0 95%, #ddd6fe 0); }
.as .acme-donut .dn::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: #fff; }
.as .acme-donut .dn b, .as .acme-donut .dn small { position: relative; display: block; }
.as .acme-donut .dn b { font-size: 14px; font-weight: 750; line-height: 1; color: #0b1020; }
.as .acme-donut .dn small { font-size: 7.5px; color: #4b5563; }
.as .acme-donut ul { display: grid; flex: 1; gap: 6px; min-width: 0; }
.as .acme-donut li { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #111827; white-space: nowrap; }
.as .acme-donut li span { margin-left: auto; color: #4b5563; }
.as .acme-donut li i { width: 6px; height: 6px; flex: none; border-radius: 50%; }
.as .acme-donut .p1 { background: #5b8def; } .as .acme-donut .p2 { background: #8b5cf6; } .as .acme-donut .p3 { background: #b39dfa; } .as .acme-donut .p4 { background: #ddd6fe; }
.as .acme.is-draw .acme-bars i { animation: acme-grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 16ms); }
.as .acme.is-draw .acme-line .ln { animation: acme-draw 1.1s ease-out both; }
.as .acme.is-draw .acme-donut .dn { animation: acme-spin .9s ease-out both; }
@container (max-width: 420px) {
  .as .acme-kpis, .as .acme-two { grid-template-columns: minmax(0, 1fr); }
  .as .acme-tabs > span:not(.is-on) { display: none; }
  .as .acme-hello { flex-direction: column; }
}
/* Acme's sign-up flow (agent test): /signup → form → the dashboard */
.as .acme[data-view="dash"] .acme-auth, .as .acme:not([data-view="dash"]) .acme-dash { display: none; }
.as .acme[data-view="land"] .acme-form, .as .acme[data-view="form"] .acme-land, .as .acme[data-view="blank"] .acme-auth { display: none; }
.as .acme-auth { display: flex; flex-direction: column; justify-content: center; max-width: 300px; height: 100%; margin: 0 auto; padding: 20px; }
.as .acme-auth .acme-logo { margin-bottom: 18px; }
.as .acme-ah { font-size: 20px; font-weight: 750; letter-spacing: -.035em; color: #0b1020; }
.as .acme-as { margin-top: 4px; font-size: 11.5px; color: #4b5563; }
.as .acme-f { display: block; margin-top: 10px; }
.as .acme-f > span:first-child { display: block; font-size: 10.5px; font-weight: 600; color: #374151; }
.as .acme-input { display: flex; align-items: center; height: 32px; margin-top: 4px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px #d1d5db; font-size: 12px; color: #0b1020;
  white-space: nowrap; overflow: hidden; transition: box-shadow .2s; }
.as .acme-input.is-focus { box-shadow: inset 0 0 0 1.5px #4338ca, 0 0 0 3px rgb(67 56 202 / .12); }
.as .acme-input.is-focus::after { content: ""; width: 1.5px; height: 14px; margin-left: 1px; background: #0b1020; animation: as-blink 1s steps(1) infinite; }
.as .acme-btn { display: grid; place-items: center; height: 36px; margin-top: 16px; border-radius: 9px; background: #4338ca; color: #fff; font-size: 12.5px; font-weight: 650; transition: transform .15s, background-color .15s; }
.as .acme-btn.is-press { transform: scale(.97); background: #3730a3; }
.as .acme-alt { margin-top: 12px; font-size: 11px; color: #4b5563; text-align: center; }
.as .acme-alt b { color: #3730a3; }
.as .acme-dash { height: 100%; }

/* Neon Snake (iOS and Android; a wide layout in the browser) */
.as .snk { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 10px 11px 16px; overflow: hidden;
  background: radial-gradient(120% 50% at 50% 0%, #0f2630 0%, #081016 62%); color: #e7f7f8; font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; letter-spacing: 0; }
.as .snk-top { display: flex; align-items: center; gap: 9px; }
.as .snk-logo { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: linear-gradient(135deg, #5eead4, #60a5fa); color: #062a2e; }
.as .snk-logo .as-i { width: 17px; height: 17px; stroke-width: 2.2; }
.as .snk-name b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: .06em; }
.as .snk-name small { display: block; margin-top: 1px; font-size: 7px; font-weight: 700; letter-spacing: .2em; color: #9cc0c6; }
.as .snk-pause { display: flex; align-items: center; justify-content: center; gap: 3px; width: 28px; height: 28px; margin-left: auto; border-radius: 8px; background: #122630; }
.as .snk-pause i { width: 3px; height: 10px; border-radius: 1px; background: #e7f7f8; }
.as .snk-side { display: contents; }
.as .snk-stats { order: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.as .snk-stats > span { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "i l" "i v"; column-gap: 6px; align-items: center; padding: 7px; border-radius: 10px;
  background: #0f1e26; box-shadow: inset 0 0 0 1px #1c3540; }
.as .snk-stats i { grid-area: i; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.as .snk-stats i .as-i { width: 11px; height: 11px; }
.as .snk-stats .s1 { background: rgb(94 234 212 / .15); color: #5eead4; }
.as .snk-stats .s2 { background: rgb(251 191 36 / .15); color: #fbbf24; }
.as .snk-stats .s3 { background: rgb(167 139 250 / .15); color: #a78bfa; }
.as .snk-stats small { grid-area: l; font-size: 7px; font-weight: 700; letter-spacing: .12em; color: #cfe6ea; }
.as .snk-stats b { grid-area: v; font-size: 17px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.as .snk-stats .sc { color: #5eead4; } .as .snk-stats .bs { color: #fbbf24; } .as .snk-stats .lv { color: #a78bfa; }
.as .snk-board { order: 2; position: relative; display: grid; flex: 1; min-height: 0; place-items: center; padding: 10px; overflow: hidden; border-radius: 14px; background-color: #0a161c;
  background-image: linear-gradient(rgb(94 234 212 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(94 234 212 / .06) 1px, transparent 1px); background-size: 16px 16px;
  box-shadow: inset 0 0 0 1px #1c3540; }
.as .snk-run { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 12px; border-radius: 14px; background: rgb(14 28 35 / .94);
  box-shadow: inset 0 0 0 1px #24434e; text-align: center; transition: opacity .4s, transform .4s; }
.as .snk-badge { padding: 3px 8px; border-radius: 999px; background: rgb(94 234 212 / .12); box-shadow: inset 0 0 0 1px rgb(94 234 212 / .3); color: #5eead4; font-size: 7.5px; font-weight: 800; letter-spacing: .12em; }
.as .snk-run .h { font-size: 17px; font-weight: 800; line-height: 1.12; letter-spacing: .04em; color: #d6e8eb; }
.as .snk-run .s { max-width: 22ch; font-size: 9.5px; color: #a9c6cb; }
.as .snk-go { margin-top: 4px; padding: 8px 16px; border-radius: 10px; background: #5eead4; color: #04282a; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  box-shadow: 0 0 18px rgb(94 234 212 / .35); transition: transform .15s; }
.as .snk-go.is-press { transform: scale(.94); }
.as .snk-speed { order: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 8px 10px; border-radius: 10px; background: #0f1e26; box-shadow: inset 0 0 0 1px #1c3540;
  font-size: 7.5px; font-weight: 800; letter-spacing: .12em; color: #cfe6ea; }
.as .snk-speed .n { color: #a78bfa; }
.as .snk-speed i { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 2px; background: #1c3540; }
.as .snk-speed i b { display: block; width: 8%; height: 100%; background: #5eead4; transition: width .8s; }
.as .snk-pad { order: 4; display: grid; place-items: center; align-self: center; width: 42px; height: 30px; border-radius: 10px 10px 4px 4px; background: #0f1e26;
  box-shadow: inset 0 0 0 1px #1c3540; color: #5eead4; }
.as .snk-snake { position: absolute; left: 20%; top: 64%; display: none; gap: 2px; }
.as .snk-snake i { width: 10px; height: 10px; border-radius: 3px; background: #5eead4; box-shadow: 0 0 8px rgb(94 234 212 / .7); }
.as .snk-snake i:last-child { background: #b9fbe9; }
.as .snk-food { position: absolute; left: 72%; top: 34%; display: none; width: 9px; height: 9px; border-radius: 50%; background: #f472b6; box-shadow: 0 0 10px #f472b6; }
.as .snk.is-play .snk-run { opacity: 0; transform: scale(.94); }
.as .snk.is-play .snk-snake { display: flex; animation: snk-move 3.2s steps(22) infinite; }
.as .snk.is-play .snk-food { display: block; }
.as .snk.is-play .snk-speed i b { width: 46%; }
@container (min-width: 520px) {
  .as .snk { display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px 14px; padding: 16px 18px; }
  .as .snk-top { grid-column: 1 / -1; }
  .as .snk-side { display: flex; flex-direction: column; gap: 10px; grid-column: 2; grid-row: 2; }
  .as .snk-stats { grid-template-columns: minmax(0, 1fr); }
  .as .snk-board { grid-column: 1; grid-row: 2 / 4; }
  .as .snk-pad { grid-column: 2; grid-row: 3; }
}

/* Lumen Loop, the browser game (data-v: 0 bare game, 1 start screen, 2 larger title + subtitle, 3 + best score) */
.as .lum { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 10px; overflow: hidden; background: #060a14; color: #e8ecff;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; letter-spacing: 0; }
.as .lum-top { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.as .lum-logo { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px #7dd3fc, 0 0 12px rgb(125 211 252 / .35); }
.as .lum-logo::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #e0f2fe; }
.as .lum-name b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .32em; }
.as .lum-name small { display: block; font-size: 7.5px; letter-spacing: .5em; color: #b4bcdf; }
.as .lum-best { display: flex; align-items: center; gap: 7px; margin-left: auto; padding: 4px 11px 4px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
  transition: opacity .5s, transform .5s; }
.as .lum-best .as-i { width: 12px; height: 12px; color: #fcd34d; fill: #fcd34d; }
.as .lum-best small { display: block; font-size: 6.5px; letter-spacing: .2em; color: #b4bcdf; }
.as .lum-best b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.as .lum-music { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); color: #c4b5fd; }
.as .lum-music .as-i { width: 13px; height: 13px; }
.as .lum:not([data-v="3"]) .lum-best { opacity: 0; transform: translateY(-4px); }
.as .lum-card { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 0; padding: 14px; overflow: hidden;
  border-radius: 16px; text-align: center; background: radial-gradient(60% 50% at 50% 42%, #131c3a 0%, #0a0f22 60%, #070b17 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
.as .lum-orbit { position: absolute; left: 50%; top: 46%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 0 33%, rgb(129 140 248 / .16) 33.3% 33.8%, transparent 34.2% 49.6%, rgb(129 140 248 / .13) 49.9% 50.4%, transparent 50.8% 66.2%, rgb(129 140 248 / .1) 66.5% 67%, transparent 67.4%);
  animation: lum-spin 9s linear infinite; }
.as .lum-orbit i { position: absolute; left: 50%; top: 16.6%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fde68a; box-shadow: 0 0 12px 2px #fde68a; }
.as .lum-eye { position: relative; display: flex; align-items: center; gap: 8px; font-size: 7.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #b4bcdf; }
.as .lum-eye::before { content: ""; width: 16px; height: 1px; background: currentColor; }
.as .lum-title { position: relative; display: flex; flex-direction: column; align-items: center; font-size: 48px; font-weight: 900; line-height: .86; letter-spacing: -.045em;
  transition: font-size .6s var(--as-ease); }
.as .lum-title .g { background: linear-gradient(90deg, #5eead4, #818cf8 55%, #c084fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.as .lum-sub { position: relative; font-size: 11px; line-height: 1.45; color: #dde2f8; }
.as .lum-keys { position: relative; display: flex; align-items: center; gap: 6px; font-size: 8.5px; color: #b4bcdf; }
.as .lum-keys kbd { padding: 2px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); font: 700 7.5px -apple-system, 'Inter', sans-serif; letter-spacing: .1em; color: #e8ecff; }
.as .lum-keys i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); font-size: 8px; font-style: normal; }
.as .lum-go { position: relative; display: inline-flex; align-items: center; gap: 22px; margin-top: 4px; padding: 8px 8px 8px 18px; border-radius: 12px;
  background: linear-gradient(90deg, #67e8f9, #a5b4fc 60%, #c4b5fd); color: #0b1020; font-size: 13px; font-weight: 700; box-shadow: 0 0 24px rgb(129 140 248 / .35); }
.as .lum-go i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0b1020; color: #fff; font-size: 11px; font-style: normal; }
.as .lum-pb { position: relative; font-size: 7.5px; letter-spacing: .25em; text-transform: uppercase; color: #b4bcdf; }
.as .lum-pb b { margin-left: 8px; letter-spacing: .1em; color: #fff; }
.as .lum-foot { display: flex; align-items: center; gap: 7px; padding: 6px 8px 2px; font-size: 9.5px; color: #b4bcdf; }
.as .lum-foot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5eead4; }
.as .lum[data-v="0"] :is(.lum-eye, .lum-title, .lum-sub, .lum-keys, .lum-go, .lum-pb) { display: none; }
.as .lum[data-v="1"] :is(.lum-sub, .lum-keys, .lum-pb) { display: none; }
.as .lum[data-v="1"] .lum-title { flex-direction: row; gap: 8px; font-size: 26px; }
@container (max-width: 320px) { .as .lum-title { font-size: 38px; } .as .lum-name small, .as .lum-music { display: none; } }

/* ── Small Studio pieces used beside the copy (loop stages, workflow steps) ─────────────────── */
.as .sw-frag { font-size: 12.5px; color: var(--as-ink); }
.as .as-mini.sw-frag { gap: 10px; }
.as .sw-frag .sw-user { max-width: 100%; padding: 7px 11px; border-radius: 11px; font-size: 12px; }
.as .sw-frag .sw-prog { gap: 7px; }
.as .sw-frag .sw-prog li { font-size: 12px; }
.as .sw-frag .sw-seg { margin: 0; }
.as .sw-frag .sw-seg > * { padding: 4px; font-size: 11.5px; }
.as .sw-frag .sw-tool.is-active { align-self: flex-start; margin: 0; }
.as .sw-rt-mini { align-self: flex-start; padding: 4px 10px; font-size: 12px; }
.as .sw-mini-ok { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--as-ok); }
.as .sw-mini-ok::before { content: ""; width: 4px; height: 8px; margin: -3px 2px 0 1px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.as .sw-done-sm { gap: 10px; padding: 9px 11px; border-radius: 10px; font-size: 12px; }
.as .sw-done-sm .ok { width: 20px; height: 20px; }
.as .sw-done-sm .ok::before { width: 4px; height: 8px; margin-top: -2px; border-width: 0 2px 2px 0; }
.as .sw-files { display: grid; gap: 4px; }
.as .sw-files li { display: flex; align-items: center; gap: 8px; font-family: var(--as-mono); font-size: 11px; color: var(--as-ink); white-space: nowrap; }
.as .sw-files li > span { margin-left: auto; }
.as .sw-files em, .as .sw-file-h em { font-style: normal; }
.as :is(.sw-files, .sw-file-h) i { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 4px; font: 700 10px var(--as-mono); font-style: normal; }
.as :is(.sw-files, .sw-file-h) i.m { background: rgb(var(--as-warn-rgb) / .14); color: var(--as-warn); }
.as :is(.sw-files, .sw-file-h) i.a { background: rgb(var(--as-ok-rgb) / .14); color: var(--as-ok); }
.as :is(.sw-files, .sw-file-h) i.c { background: rgb(var(--as-err-rgb) / .14); color: var(--as-err); }
.as .sw-send-sm { align-self: flex-start; margin-left: 0; padding: 5px 12px; font-size: 12px; }
.as .sw-thumb { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 8px; background: var(--as-panel2); box-shadow: inset 0 0 0 1px var(--as-line2);
  font-size: 12px; color: var(--as-ink); }
.as .sw-thumb i { width: 34px; height: 22px; border-radius: 4px; background: linear-gradient(#111a3a 0 0) 4px 5px / 12px 3px no-repeat, linear-gradient(#6d8ff3 0 0) 4px 11px / 18px 6px no-repeat, #fff;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.as .as-flow .art.sw-frag { font-family: var(--sw-font); }
.as .as-flow .art.sw-frag .sw-user { align-self: auto; }

/* ── 1 · Hero ───────────────────────────────────────────────────────────────────────────────── */
.as .sw-hero { margin-top: clamp(44px, 6vw, 72px); }

/* ── 3 · Three targets: the Preview panel, its Web · iOS · Android control as the tabs ──────── */
.as .sw-tg { margin-top: clamp(36px, 5vw, 52px); }
.as .sw-tg-top { display: flex; align-items: center; gap: 16px; height: 50px; padding-left: 16px; border-bottom: 1px solid var(--as-line); }
.as .sw-tg-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; white-space: nowrap; overflow: hidden; }
.as .sw-tg-title b { font-size: 14.5px; font-weight: 600; }
.as .sw-tg-title span { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--as-muted); }
.as .sw-tg-top .sw-rtabs { height: 100%; margin-left: auto; border-bottom: 0; }
@media (max-width: 760px) { .as .sw-tg-title span, .as .sw-tg-top .sw-rtabs { display: none; } }
.as .sw-tg .sw-seg { margin: 14px 16px 0; }
.as .sw-tg .sw-segb { padding: 8px 4px; font-size: 13px; }
.as .sw-tbody { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .as .sw-tbody { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.as .sw-tbody .sw-stage { height: 500px; margin: 8px 12px 12px; }
@media (max-width: 520px) { .as .sw-tbody .sw-stage { height: 460px; } }
.as .sw-out { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 4px 16px 18px; }
@media (min-width: 980px) { .as .sw-out { padding: 10px 18px 18px 8px; } }
.as .sw-out-h { margin-bottom: -8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--as-muted); }
.as .sw-out h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.as .sw-out .as-checklist { margin-top: 0; }
.as .sw-out .as-checklist li { font-family: var(--as-sans); }
.as .sw-vp { display: flex; justify-content: center; }
.as .sw-vpi { container-type: inline-size; width: 100%; height: 100%; overflow: hidden; transition: width .5s var(--as-ease); }
.as .sw-vp[data-device="tablet"] .sw-vpi { width: min(100%, 440px); box-shadow: 0 0 0 1px var(--as-line2); }
.as .sw-vp[data-device="phone"] .sw-vpi { width: min(100%, 260px); box-shadow: 0 0 0 1px var(--as-line2); }
.as .as-log { padding: 12px 14px; border: 1px solid var(--as-line); border-radius: var(--as-r-sm); background: var(--as-well); overflow-x: auto;
  font-family: var(--as-mono); font-size: 11.5px; line-height: 1.75; color: var(--as-mid); white-space: pre; }
.as .as-log .c { color: var(--as-acc); }
.as .as-log .ok { color: var(--as-ok); }
.as .as-log .dim { color: var(--as-dim); }

/* ── 5 · The agent tests the app ────────────────────────────────────────────────────────────── */
.as .sw-ag, .as .sw-git { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(40px, 5vw, 56px); }
@media (min-width: 1024px) {
  .as .sw-ag { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
  .as .sw-git { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
}
.as :is(.sw-ag, .sw-git) > .sw-main { grid-template-rows: auto auto auto auto auto; border-bottom: 1px solid var(--as-line); }
@media (min-width: 1024px) { .as :is(.sw-ag, .sw-git) > .sw-main { grid-template-rows: auto auto minmax(0, 1fr) auto auto; border-bottom: 0; border-right: 1px solid var(--as-line); } }
.as .sw-mh .sw-lights { margin-right: 4px; }
.as .sw-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 16px; gap: 10px; color: var(--as-ink); }
.as .sw-steps li .tx { min-width: 0; }
.as .sw-steps code { font-family: var(--as-mono); font-size: .9em; color: var(--as-acc); }
.as .sw-steps .m { font-family: var(--as-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--as-muted); }
.as .sw-steps .ic { width: 16px; height: 16px; }
.as .sw-ag.is-run .sw-steps li:not(.is-on):not(.is-done) { color: var(--as-dim); }
.as .sw-ag.is-run .sw-steps li:not(.is-done) .ic { visibility: hidden; }
.as .sw-ag.is-run .sw-steps li.is-on .ic { visibility: visible; box-shadow: none; border: 1.6px solid rgb(var(--as-acc-rgb) / .25); border-top-color: var(--as-acc); animation: as-spin .8s linear infinite; }
.as .sw-ag.is-run .sw-steps li.is-on .ic::before { content: none; }
.as .sw-ag.is-run .sw-steps li.is-on .tx { background: linear-gradient(90deg, var(--as-ink) 0 35%, var(--as-acc) 50%, var(--as-ink) 65% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sw-shine 1.6s linear infinite; }
.as .sw-ag.is-run .sw-steps li.is-on .tx code { -webkit-text-fill-color: var(--as-acc); }
.as .sw-result b { display: block; font-size: 14px; font-weight: 600; }
.as .sw-result small { display: block; font-size: 12px; color: var(--as-muted); }
.as .sw-ag.is-run:not(.is-pass) .sw-result { visibility: hidden; }
.as .sw-ag.is-run.is-pass .sw-result { animation: as-in .45s var(--as-ease) both; }
.as .sw-ag.is-run:not(.is-evid) .sw-evid { visibility: hidden; }
.as .sw-ag .sw-pv { grid-template-rows: auto auto auto minmax(0, 1fr); }
.as .sw-ag-stage { height: 470px; }
@media (max-width: 520px) { .as .sw-ag-stage { height: 430px; } .as .sw-agentchip { display: none; } }
.as .as-hl { position: absolute; z-index: 5; border: 1.5px dashed var(--as-acc); border-radius: 6px; background: rgb(var(--as-acc-rgb) / .06); opacity: 0; transition: opacity .3s; pointer-events: none; }
.as .as-hl span { position: absolute; left: -1.5px; bottom: 100%; margin-bottom: 4px; padding: 2px 6px; border-radius: 4px; background: var(--as-acc); color: var(--as-acc-ink);
  font-family: var(--as-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.as .is-hl .as-hl { opacity: 1; }
.as .as-caps { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
@media (min-width: 900px) { .as .as-caps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.as .as-caps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--as-line); border-radius: var(--as-r-sm); background: var(--as-panel);
  font-size: 13.5px; font-weight: 600; color: var(--as-ink); box-shadow: var(--as-card-shadow); }
.as .as-caps .as-i { color: var(--as-acc); }
.as .as-guard { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--as-mono); font-size: 12.5px; color: var(--as-muted); }
.as .as-guard .as-i { width: 15px; height: 15px; color: var(--as-acc); }

/* ── 7 · Review: Preview · Changes · Files · Terminal ───────────────────────────────────────── */
.as .sw-git .sw-right { grid-template-rows: auto minmax(0, 1fr); }
.as .sw-git .sw-conv { padding-bottom: 18px; }
.as .sw-gp { min-width: 0; min-height: 0; }
.as .sw-gp .sw-pv { height: 100%; grid-template-rows: auto auto auto minmax(380px, 1fr); }
.as .sw-changes { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; }
.as .sw-commit { display: flex; gap: 8px; }
.as .sw-commit-msg { display: flex; flex: 1; align-items: center; min-width: 0; height: 34px; padding: 0 12px; border-radius: 9px; background: var(--sw-field); box-shadow: inset 0 0 0 1px var(--as-line2);
  font-size: 12.5px; color: var(--as-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as .sw-xbtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--as-panel2); box-shadow: inset 0 0 0 1px var(--as-line3);
  font-size: 12px; font-weight: 600; color: var(--as-ink); white-space: nowrap; cursor: pointer; transition: color .2s, box-shadow .2s, background-color .2s; }
.as .sw-xbtn .as-i { width: 13px; height: 13px; }
.as .sw-xbtn:hover:not(:disabled) { color: var(--as-acc); box-shadow: inset 0 0 0 1px var(--as-acc); }
.as .sw-xbtn:disabled { cursor: default; opacity: .55; }
.as .sw-xbtn-p { height: 34px; padding: 0 14px; background: var(--as-btn-bg); box-shadow: none; color: var(--as-btn-fg); }
.as .sw-xbtn-p:hover:not(:disabled) { background: var(--as-btn-hi); box-shadow: none; color: var(--as-btn-fg); }
.as .sw-xbtn-warn { color: var(--as-warn); box-shadow: inset 0 0 0 1px rgb(var(--as-warn-rgb) / .6); }
.as .sw-git-status { font-size: 12px; color: var(--as-muted); }
.as .sw-git-status.is-ok { color: var(--as-ok); }
.as .sw-file { overflow: hidden; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--as-line); }
.as .sw-file-h { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--as-panel2); font-family: var(--as-mono); font-size: 12px; color: var(--as-ink); }
.as .sw-file-h > span { margin-left: auto; flex: none; }
/* A long path breaks rather than pushing the +/− counts out of the card on a narrow phone. */
.as .sw-file-h { overflow-wrap: anywhere; }
.as .sw-hunk-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px 6px 12px; border-top: 1px solid var(--as-line); font-family: var(--as-mono); font-size: 11px; color: var(--as-muted); }
.as .sw-hunk-h .state { color: var(--as-dim); }
.as .sw-hunk.is-staged .sw-hunk-h .state { color: var(--as-ok); }
.as .sw-hunk-h .sw-xbtn { margin-left: auto; }
.as .sw-code { overflow-x: auto; padding: 6px 0; border-top: 1px solid var(--as-line); font-family: var(--as-mono); font-size: 11.5px; line-height: 1.75; color: var(--as-mid); }
.as .sw-code > span { display: block; min-width: max-content; padding-right: 14px; white-space: pre; }
.as .sw-code .g { display: inline-block; width: 46px; padding-right: 12px; text-align: right; color: var(--as-dim); user-select: none; }
.as .sw-code .a { background: rgb(var(--as-ok-rgb) / .09); color: var(--as-ink); }
.as .sw-code .a .g { color: var(--as-ok); }
.as .sw-code .x { background: rgb(var(--as-err-rgb) / .09); }
.as .sw-code .x .g { color: var(--as-err); }
.as .sw-code .m { background: rgb(var(--as-warn-rgb) / .12); color: var(--as-warn); font-weight: 600; }
.as .sw-code .m .g { color: var(--as-warn); }
.as .sw-code .k { color: var(--as-acc); }
.as .sw-code .s { color: var(--as-ok); }
.as .sw-code .cm { color: var(--as-muted); }
.as .sw-hunk.is-resolved .sw-conf, .as .sw-hunk:not(.is-resolved) .sw-merged { display: none; }
.as .sw-ftree { padding: 12px 16px; font-family: var(--as-mono); font-size: 12.5px; }
.as .sw-ftree li { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--as-mid); }
.as .sw-ftree .as-i { width: 14px; height: 14px; color: var(--as-muted); }
.as .sw-ftree .d1, .as .sw-ftree .f1 { padding-left: 18px; }
.as .sw-ftree .d2, .as .sw-ftree .f2 { padding-left: 36px; }
.as .sw-ftree .f3 { padding-left: 54px; }
.as .sw-ftree em { margin-left: auto; font-style: normal; font-weight: 700; }
.as .sw-ftree .is-new { color: var(--as-ink); } .as .sw-ftree .is-new em { color: var(--as-ok); }
.as .sw-ftree .is-mod { color: var(--as-ink); } .as .sw-ftree .is-mod em { color: var(--as-warn); }
.as .sw-term { margin: 12px; padding: 14px 16px; overflow-x: auto; border-radius: 10px; background: var(--as-well); box-shadow: inset 0 0 0 1px var(--as-line);
  font-family: var(--as-mono); font-size: 12px; line-height: 1.7; color: var(--as-mid); white-space: pre; }
.as .sw-term .c { color: var(--as-acc); } .as .sw-term .ok { color: var(--as-ok); } .as .sw-term .dim { color: var(--as-dim); }

/* ── 8 · The session outlives the window ────────────────────────────────────────────────────── */
.as .sw-cwin { overflow: hidden; border-radius: 12px; background: var(--as-panel2); box-shadow: inset 0 0 0 1px var(--as-line2); transition: box-shadow .5s, background-color .5s; }
.as .sw-cwin-top { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--as-line); font-size: 12.5px; }
.as .sw-cwin-top .sw-lights { gap: 6px; }
.as .sw-cwin-top .sw-lights i { width: 9px; height: 9px; }
.as .sw-cwin-top b { font-weight: 600; }
.as .sw-cwin-top .st { margin-left: auto; font-family: var(--as-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--as-muted); }
.as .as-cui2 .sw-cwin-top .st { color: var(--as-ok); }
.as .sw-cwin-body { display: flex; height: 104px; }
.as .sw-cwin-side { display: flex; flex-direction: column; gap: 7px; width: 58px; padding: 12px 9px; background: var(--sw-side); border-right: 1px solid var(--as-line); }
.as .sw-cwin-side i { height: 6px; border-radius: 3px; background: var(--as-line2); }
.as .sw-cwin-side i.on { background: rgb(var(--as-acc-rgb) / .55); }
.as .sw-cwin-conv { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; }
.as .sw-cwin .sw-user { max-width: 92%; padding: 4px 9px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as .sw-cwin .sw-worked { padding-bottom: 0; border: 0; font-size: 11px; }
.as .sw-comp-mini { margin-top: auto; padding: 5px 9px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--as-line2); font-size: 11.5px; color: var(--as-ink); }
/* a window that is closed (or not yet open) goes quiet: dashed outline, no fill, its text in the dim tone (still AA) */
.as .as-cont:is([data-phase="away"], [data-phase="back"]) .as-cui1, .as .as-cont:is([data-phase="live"], [data-phase="away"]) .as-cui2 {
  background: transparent; box-shadow: none; outline: 1.5px dashed var(--as-line3); outline-offset: -1.5px; }
.as .as-cont:is([data-phase="away"], [data-phase="back"]) .as-cui1 :is(b, .st, .sw-user, .sw-worked, .sw-comp-mini),
.as .as-cont:is([data-phase="live"], [data-phase="away"]) .as-cui2 :is(b, .st, .sw-user, .sw-worked, .sw-comp-mini) { color: var(--as-dim); }
.as .as-cont:is([data-phase="away"], [data-phase="back"]) .as-cui1 :is(.sw-lights, .sw-cwin-side, .sw-user),
.as .as-cont:is([data-phase="live"], [data-phase="away"]) .as-cui2 :is(.sw-lights, .sw-cwin-side, .sw-user) { background: transparent; box-shadow: none; }
.as .as-cont:is([data-phase="away"], [data-phase="back"]) .as-cui1 .sw-lights, .as .as-cont:is([data-phase="live"], [data-phase="away"]) .as-cui2 .sw-lights { opacity: .5; }

/* ── 9 · Each project's own preview URL ─────────────────────────────────────────────────────── */
.as .as-lanes-split { margin-top: clamp(36px, 5vw, 52px); }
@media (min-width: 1024px) { .as .as-lanes-split { grid-template-columns: minmax(0, 1.75fr) minmax(0, .7fr); } }
.as .as-lanes li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--as-line); }
@media (min-width: 720px) { .as .as-lanes li { grid-template-columns: 150px minmax(14px, .4fr) minmax(0, 1.5fr) minmax(14px, .4fr) 76px; } }
.as .sw-lane-proj { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.as .sw-lane-proj b { font-weight: 600; }
.as .sw-lane-proj .as-i { color: var(--as-mid); }
.as .sw-lane-url { padding: 7px 10px; border-radius: 8px; background: var(--sw-field); box-shadow: inset 0 0 0 1px var(--as-line); gap: 12px; font-size: 12px; }
.as .sw-lane-url .u b { color: var(--as-acc); font-weight: 600; }
.as .sw-thumb-app { position: relative; display: none; height: 46px; overflow: hidden; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--as-line2); }
@media (min-width: 720px) { .as .sw-thumb-app { display: block; } }
.as .sw-thumb-app i { position: absolute; display: block; }
.as .th-acme { background: #fff; }
.as .th-acme i:nth-child(1) { left: 7px; top: 7px; width: 30%; height: 4px; border-radius: 2px; background: #111a3a; }
.as .th-acme i:nth-child(2) { left: 7px; bottom: 7px; width: 48%; height: 20px; background: repeating-linear-gradient(90deg, #8ea7f5 0 3px, transparent 3px 5px); -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(to top, #000 30%, rgb(0 0 0 / .4)); }
.as .th-acme i:nth-child(3) { right: 7px; bottom: 7px; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(#5b8def 0 50%, #8b5cf6 0 79%, #ddd6fe 0); }
.as .th-lumen { background: radial-gradient(circle at 50% 45%, #141d3d, #060a14 70%); }
.as .th-lumen i:nth-child(1) { left: 50%; top: 11px; width: 34px; height: 9px; margin-left: -17px; border-radius: 2px; background: linear-gradient(90deg, #fff 40%, #818cf8 40%); }
.as .th-lumen i:nth-child(2) { left: 50%; bottom: 9px; width: 30px; height: 8px; margin-left: -15px; border-radius: 4px; background: linear-gradient(90deg, #67e8f9, #c4b5fd); }
.as .th-lumen i:nth-child(3) { left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(129 140 248 / .35); }
.as .th-renew { background: #f7f8fb; }
.as .th-renew i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 16px; background: #1f2937; }
.as .th-renew i:nth-child(2) { left: 22px; top: 8px; width: 40%; height: 4px; border-radius: 2px; background: #0f766e; }
.as .th-renew i:nth-child(3) { left: 22px; right: 7px; top: 18px; height: 20px; border-radius: 3px; background: repeating-linear-gradient(#fff 0 5px, #e5e7eb 5px 6px); box-shadow: 0 0 0 1px #e5e7eb; }
.as .as-lanes-split > .as-checklist { margin-top: 0; }

@keyframes sw-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes sw-sk { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes acme-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes acme-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes acme-spin { from { transform: rotate(-90deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes snk-move { from { transform: translateX(-80px); } to { transform: translateX(200px); } }
@keyframes lum-spin { to { transform: rotate(360deg); } }

/* ── Theme shapes ───────────────────────────────────────────────────────────────────────────── */
/* Telemetry's bracketed mono eyebrows become the site's LED pills in Night and Day, and Cloud's
   spaced grey caps; headline accents take each theme's treatment. Colours are all tokens above. */
html:not([data-final="telemetry"]) .as .as-eyebrow { align-items: center; padding: 5px 13px; border: 1px solid rgb(var(--as-acc-rgb) / .3);
  border-radius: 999px; background: rgb(var(--as-acc-rgb) / .07); font-family: var(--as-sans); font-size: 12px; letter-spacing: .1em; }
html:not([data-final="telemetry"]) .as .as-eyebrow::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
html:not([data-final="telemetry"]) .as .as-eyebrow::after { content: none; }
html:not([data-final="telemetry"]) .as :is(.as-headline, h2) .as-acc { background: var(--as-head-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

html[data-final="cloud"] .as .as-eyebrow { padding: 0; border: 0; border-radius: 0; background: none; font-size: 12.5px; font-weight: 600;
  letter-spacing: .16em; color: var(--as-muted); }
html[data-final="cloud"] .as .as-eyebrow::before { content: none; }
html[data-final="cloud"] .as :is(.as-headline, h2) { font-weight: 650; letter-spacing: -.04em; }
html[data-final="cloud"] .as :is(.as-headline, h2) .as-acc { background: none; -webkit-text-fill-color: currentColor; color: var(--as-head-ink); }
html[data-final="cloud"] .as :is(.as-card, .as-panel, .sw, .as-stage, .as-anode, .as-arow li, .as-caps li, .as-flow .art) { border-color: rgb(24 27 38 / .045); }
html[data-final="cloud"][data-cloud="dark"] .as :is(.as-card, .as-panel, .sw, .as-stage, .as-anode, .as-arow li, .as-caps li, .as-flow .art) { border-color: rgb(255 255 255 / .06); }
html[data-final="cloud"] .as .as-stage::before { height: 3px; border-radius: 3px; }
html[data-final="cloud"] .as .as-btn { transition: transform .25s var(--as-ease), box-shadow .25s var(--as-ease), background-color .25s; }
html[data-final="cloud"] .as .as-btn-p:hover { transform: translateY(-3px); box-shadow: 0 21px 42px rgb(10 132 255 / .28); }
html[data-final="cloud"] .as .as-btn-soon:hover { transform: none; box-shadow: var(--as-btn-shadow); }
html[data-final="cloud"] .as .as-btn-s { border-color: var(--as-line); box-shadow: var(--as-card-shadow); }
html[data-final="cloud"] .as .as-btn-s:hover { transform: translateY(-3px); color: var(--as-ink); border-color: var(--as-line2); }
html[data-final="cloud"] .as .as-card:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { html[data-final="cloud"] .as :is(.as-btn, .as-card):hover { transform: none; } }

/* ── Motion ─────────────────────────────────────────────────────────────────────────────────── */
@keyframes as-led { 0% { box-shadow: 0 0 0 0 rgb(var(--as-ok-rgb) / .55); } 100% { box-shadow: 0 0 0 7px rgb(var(--as-ok-rgb) / 0); } }
@keyframes as-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes as-spin { to { transform: rotate(360deg); } }
@keyframes as-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes as-fill { to { width: 100%; } }
@keyframes as-sweep { from { background-position: -100% 0; } to { background-position: 200% 0; } }
@keyframes as-ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes as-flash { 0% { opacity: 0; } 18% { opacity: .85; } 100% { opacity: 0; } }
@keyframes as-drop { to { transform: translateY(72px); } }
@keyframes as-run { from { left: -24px; } to { left: 100%; } }
@keyframes as-bar { 0% { transform: scaleX(0); opacity: 1; } 19% { transform: scaleX(1); opacity: 1; } 24%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes as-lit { 0%, 20% { color: var(--as-acc); } 24%, 100% { color: var(--as-ink); } }
@keyframes as-flowpulse { 0%, 100% { border-color: var(--as-line2); } 6%, 14% { border-color: var(--as-acc); box-shadow: 0 0 0 3px rgb(var(--as-acc-rgb) / .1); } 22% { border-color: var(--as-line2); box-shadow: none; } }
@keyframes as-ringnode { 0%, 100% { border-color: var(--as-line3); } 3%, 14% { border-color: var(--as-acc); color: var(--as-ink); box-shadow: 0 0 0 4px rgb(var(--as-acc-rgb) / .12); } 20% { border-color: var(--as-line3); box-shadow: none; } }
/* demos that loop pause while off screen (aircode-studio-tm.js toggles .is-live) */
@media (prefers-reduced-motion: reduce) {
  .as *, .as *::before, .as *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .as .as-wire::after, .as .as-lane-w::after { display: none; }
}

/* 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.as-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. */
.as h1.as-eyebrow { font-family: var(--as-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"] .as h1.as-eyebrow { display: block; }
html[data-final="telemetry"] .as h1.as-eyebrow::before { margin-right: 8px; }
html[data-final="telemetry"] .as h1.as-eyebrow::after { margin-left: 8px; }