/* AI Fabric page (/ai-fabric/). Loaded after styles.css and site-pages.css, on this page only.
   Paper page with night « stages »: the hero, the four workload scenes and the cost receipt are
   rounded night panels, so the shared header and footer stay on paper.
   Colours come from brand.css and tokens.css. The cyan is the selection colour: it marks the code
   a scene is talking about, nothing else. Gold stays on the action, Buddy and the small active
   details (the strike through a GPU name, lit cards, checkpoints, the playhead). Warnings use the
   design system's dark orange. Every animation has a still frame under reduced motion. */

.fabric-page { --fab-ease:cubic-bezier(.165,.84,.44,1); --fab-stage-pad:clamp(24px,4.4vw,64px); --fab-lit:color-mix(in srgb,var(--b-select) 24%,transparent) }
.fabric-page :where(p,li,td,dd) > code,.fab-note code,.fab-plumb code { font:500 .88em var(--font-code);padding:.08em .32em;border-radius:5px;background:color-mix(in srgb,var(--color-ink) 6%,transparent);overflow-wrap:anywhere }
.fab-cost :where(p,li,td) > code,.fab-hero :where(p,li) > code { background:rgba(255,255,255,.08);color:var(--on-night-strong) }
@keyframes fab-in { from { opacity:0;transform:translateY(6px) } to { opacity:1;transform:none } }

/* ── Night stages ─────────────────────────────────────────────────────────────────────── */
.fab-hero-grid,.fab-cost>.wrap { background:var(--b-night);color:var(--on-night);border-radius:var(--radius-panel,28px);padding:var(--fab-stage-pad);position:relative;isolation:isolate;overflow:hidden }
.fab-hero-grid::before,.fab-cost>.wrap::before { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.3px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(120% 90% at 85% 0%,black 0%,transparent 70%);mask-image:radial-gradient(120% 90% at 85% 0%,black 0%,transparent 70%) }
.fab-hero-grid h1,.fab-cost h2,.fab-cost h3 { color:var(--on-night-strong) }
.fab-cost .page-section-heading>p { color:var(--on-night-muted) }
.section-cut--night { color:var(--on-night) }
.section-cut--night::after { background:rgba(255,255,255,.12) }
.section-cut--night span { background:var(--b-night) }
.section-cut--night span::after { background:var(--on-night) }
.fab-cost :focus-visible,.fab-hero-grid :focus-visible,.fab-demo :focus-visible { outline-color:var(--b-gold) }
.fab-replay { margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:transparent;color:var(--on-night-muted);font:500 12px var(--font-body);cursor:pointer;transition:color var(--dur-short) ease,border-color var(--dur-short) ease }
.fab-replay:hover { color:var(--on-night-strong);border-color:rgba(255,255,255,.3) }

/* ── Hero: the rotating sentence ──────────────────────────────────────────────────────── */
.fab-hero { padding-top:clamp(16px,2vw,32px) }
.fab-hero-grid { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4vw,64px);align-items:center }
.fab-hero .eyeline { color:var(--on-night);font-weight:500;letter-spacing:.01em }
.fab-hero .availability { color:var(--on-night-muted) }
.fab-hero .availability::before { background:var(--b-gold) }
.fab-hero .welcome-credit { color:var(--on-night) }
.fab-hero .welcome-credit strong { color:var(--b-gold) }
.fab-hero h1 { font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1.04;font-weight:600;letter-spacing:-.04em }
.fab-h1-lead { display:block }
.fab-rot { display:grid }
.fab-rot>.fab-rot-item { grid-area:1/1;transition:opacity .45s var(--fab-ease),transform .55s var(--fab-ease) }
.fab-rot>.fab-rot-item[hidden] { display:none }
[data-rotator].is-enhanced .fab-rot>.fab-rot-item:not(.is-on) { opacity:0;transform:translateY(.32em);pointer-events:none }
[data-rotator].is-enhanced .fab-rot>.fab-rot-item.was-on { transform:translateY(-.32em) }
.fab-rot-gpu { justify-items:start }
.fab-strike { position:relative;display:inline-block }
.fab-strike::after { content:"";position:absolute;left:-.04em;right:-.04em;top:55%;height:.075em;border-radius:.04em;background:var(--b-gold);transform:scaleX(1);transform-origin:left center }
[data-rotator].is-enhanced .fab-strike::after { transform:scaleX(0);transition:transform .45s var(--fab-ease) }
[data-rotator].is-enhanced .is-on .fab-strike::after { transform:scaleX(1);transition-delay:.6s }
.fab-rot-use { margin-top:.28em;font-size:.48em;line-height:1.15;font-weight:500;letter-spacing:-.025em;color:var(--on-night) }
.fab-proof { list-style:none;margin:var(--space-md) 0 0;padding:0;min-height:34px }
.fab-proof-item { display:flex;flex-wrap:wrap;align-items:center;gap:8px }
.fab-proof-item[hidden] { display:none }
[data-rotator].is-enhanced .fab-proof-item.is-on { animation:fab-in .5s .15s var(--fab-ease) both }
.fab-proof-item span,.fab-proof-item b { display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font:500 12.5px var(--font-code);color:var(--on-night) }
.fab-proof-item b { border-color:color-mix(in srgb,var(--b-gold) 60%,transparent);color:var(--b-gold) }
.fab-hero .page-lede { color:var(--on-night-muted);font-size:17px;line-height:1.65;max-width:52ch;margin-top:var(--space-md) }
.fab-cta { display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--space-lg) }
.fab-install { display:inline-flex;align-items:center;gap:4px;min-height:54px;padding:0 6px 0 18px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font:500 14px var(--font-code);color:var(--on-night-strong) }
.fab-install code span { color:var(--on-night-faint) }
.fab-copy { display:inline-grid;place-items:center;width:42px;height:42px;border:0;border-radius:6px;background:transparent;color:var(--on-night-muted);cursor:pointer;transition:background-color var(--dur-short) ease,color var(--dur-short) ease }
.fab-copy:hover { background:rgba(255,255,255,.08);color:var(--on-night-strong) }
.fab-copy svg { fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round }
.fab-copy.is-copied { color:var(--b-gold) }

/* The command strip under the hero, on paper: the CLI's daily loop. */
.fab-loop { list-style:none;margin-block:0;padding:clamp(28px,3vw,40px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px) }
.fab-loop li { min-width:0;padding-top:18px;border-top:1px solid var(--color-rule) }
.fab-loop code { display:block;font:600 15px var(--font-code);color:var(--color-ink) }
.fab-loop code::before { content:"$ ";color:var(--color-accent-text) }
.fab-loop p { margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--color-muted);max-width:40ch }
.fab-loop p code { display:inline;font-size:.88em }
.fab-loop p code::before { content:none }

/* ── Hero: the file of the example, and the cards it takes ────────────────────────────── */
.fab-console { margin:0;min-width:0 }
.fab-window { overflow:hidden;box-shadow:0 50px 100px -50px rgba(5,8,12,.9) }
.fab-window>.code-window-bar { gap:12px;padding-right:10px }
.fab-window .code-window-label { color:var(--on-night) }
.fab-rot-file { display:inline-grid;white-space:nowrap }
.fab-slides { display:flex;align-items:center;gap:2px;margin-left:auto }
.fab-slides[hidden],.fab-pause[hidden] { display:none }
.fab-slides button { display:grid;place-items:center;width:22px;height:28px;padding:0;border:0;background:transparent;cursor:pointer }
.fab-slides i { display:block;width:14px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);transition:width .3s var(--fab-ease) }
.fab-slides button:hover i { background:rgba(255,255,255,.4) }
.fab-slides [aria-current="true"] { width:38px }
.fab-slides [aria-current="true"] i { width:32px;background:linear-gradient(90deg,var(--b-gold) calc(var(--p,0) * 100%),rgba(255,255,255,.22) 0) }
[data-rotator].is-held .fab-slides [aria-current="true"] i { background:var(--b-gold) }
.fab-pause { display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:transparent;color:var(--on-night-muted);font:500 12px var(--font-body);cursor:pointer }
.fab-pause:hover { color:var(--on-night-strong);border-color:rgba(255,255,255,.3) }
.fab-pause-icon { width:8px;height:10px;border-inline:2.5px solid currentColor }
.fab-pause[aria-pressed="true"] .fab-pause-icon { width:0;height:0;border-block:5px solid transparent;border-inline:0;border-left:8px solid currentColor }
.code-window>.fab-code { margin:0;padding:16px 0;max-width:none;font:400 12.5px/1.72 var(--font-code);overflow:auto;counter-reset:ln;tab-size:4 }
.fab-console--hero .code-window>.fab-code { height:calc(21 * 1.72em + 32px) }
[data-rotator].is-enhanced .fab-console--hero .fab-code:not([hidden]) { animation:fab-in .45s var(--fab-ease) }
.fab-code code { display:block;min-width:max-content;white-space:normal }
.fab-code .cl { display:block;padding:0 20px 0 0;counter-increment:ln;white-space:pre }
.fab-code .cl::before { content:counter(ln);display:inline-block;width:3.2em;padding-right:1.2em;text-align:right;color:var(--code-gutter);user-select:none }
.fab-code .kw { color:var(--code-keyword);font-weight:600 }
.fab-code .dec { color:var(--b-gold) }
.fab-code .str { color:var(--code-string) }
.fab-code .num { color:var(--code-number) }
.fab-code .fn { color:var(--code-name);font-weight:600 }
.fab-code .cm { color:var(--code-comment) }
.fab-code .kwarg { border-radius:4px;box-shadow:0 0 0 1px color-mix(in srgb,var(--b-gold) 70%,transparent);background:var(--fab-lit);padding:1px 2px;margin:-1px -2px }
.fab-alloc { display:grid;gap:10px;padding:14px 18px 16px;background:var(--term-bg);border-top:1px solid rgba(255,255,255,.07);min-height:118px }
.fab-alloc-cmd { font:500 12.5px var(--font-code);color:var(--term-text) }
.tp { color:var(--on-night-faint) }
.fab-slots { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px }
.fab-slot { position:relative;height:34px;border:1px dashed rgba(255,255,255,.14);border-radius:5px }
.fab-slot em { position:absolute;left:6px;bottom:4px;font:500 9.5px var(--font-code);font-style:normal;color:var(--b-ink);opacity:0 }
.fab-slot.is-lit { border-style:solid;border-color:color-mix(in srgb,var(--b-gold) 70%,transparent) }
.fab-slot.is-lit::before { content:"";position:absolute;inset:3px;border-radius:3px;background:var(--b-gold);transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--fab-ease) calc(var(--k,0) * 70ms + .15s) }
.fab-alloc.is-in .fab-slot.is-lit::before { transform:none }
.fab-alloc.is-in .fab-slot.is-lit em { opacity:1;transition:opacity .2s calc(var(--k,0) * 70ms + .4s) }
.fab-slot em { z-index:1 }
.fab-alloc>b { font:600 13px var(--font-body);color:var(--on-night-strong) }
.fab-console>figcaption { margin-top:12px;min-height:3em;font-size:12.5px;line-height:1.5;color:var(--on-night-faint) }
.fab-console>figcaption [hidden] { display:none }

/* ── Workload pillars (paper, with night scenes) ──────────────────────────────────────── */
/* A zigzag: the copy on one side, the scene on the other, swapping sides from one pillar to
   the next. Each pillar is numbered on the brand's slash. */
.fab-pillar-list { margin-top:var(--space-xl) }
.fab-pillar { display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,64px);align-items:center }
.fab-pillar:nth-child(even) { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr) }
.fab-pillar:nth-child(even) .fab-pillar-copy { order:2 }
.fab-pillar+.fab-pillar { margin-top:clamp(72px,9vw,128px) }
.fab-pillar-copy { min-width:0 }
.fab-pillar-kicker { display:flex;align-items:baseline;gap:14px;font:500 12px var(--font-code);letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-text) }
.fab-pillar-num { position:relative;padding-left:22px;font:600 clamp(40px,4.4vw,60px)/.9 var(--font-display);letter-spacing:-.05em;color:var(--color-ink) }
.fab-pillar-num::before { content:"";position:absolute;left:4px;top:8%;height:84%;width:5px;border-radius:2px;background:var(--b-gold);transform:skewX(-22deg) }
.fab-pillar h3 { margin-top:18px;font-size:clamp(1.7rem,2.7vw,2.5rem);line-height:1.06;letter-spacing:-.035em }
.fab-pillar-sub { margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--color-muted) }
.fab-pillar-cards { list-style:none;margin:var(--space-md) 0 0;padding:0;display:grid;gap:0 }
.fab-pillar-cards li { padding:14px 0;border-top:1px solid var(--color-rule) }
.fab-pillar-cards h4 { font:600 15px/1.3 var(--font-display);letter-spacing:-.01em }
.fab-pillar-cards p { margin-top:6px;font-size:14px;line-height:1.6;color:var(--color-muted) }
.fab-pillar .fab-demo { margin-top:0 }

/* A scene: a night stage, a code line on top, the illustration, a status line, a replay. */
.fab-demo { margin-top:var(--space-lg);border-radius:20px;background:var(--b-night);color:var(--on-night);overflow:hidden;box-shadow:0 40px 80px -56px rgba(23,26,31,.7) }
.fd-stage { display:grid;gap:16px;padding:clamp(18px,2.4vw,28px) }
.fd-bar { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px }
.fd-bar code { padding:5px 9px;border-radius:6px;background:var(--code-on-night);font:500 12.5px var(--font-code);color:var(--on-night-strong);transition:background-color .3s ease,box-shadow .3s ease }
.fd-bar code.is-lit { background:var(--fab-lit);box-shadow:0 0 0 1px var(--b-select) }
.fd-step { font:500 12.5px var(--font-code);color:var(--on-night-muted);font-variant-numeric:tabular-nums }
.fd-status { min-height:1.5em;font:500 13px var(--font-code);color:var(--on-night) }
.fd-status[data-state="stopped"],.fd-status[data-state="blocked"],.fd-status[data-state="away"] { color:var(--warn-on-night) }
.fd-status[data-state="done"] { color:var(--window-green) }
.fd-foot { display:flex;align-items:center;gap:12px;padding:12px clamp(18px,2.4vw,28px);border-top:1px solid rgba(255,255,255,.07);font-size:12px;color:var(--on-night-faint) }
.fd-foot .fab-replay[hidden] { display:none }
.fd-chart { display:block;width:100%;height:120px;overflow:visible }
.fd-grid { fill:none;stroke:rgba(255,255,255,.07);stroke-width:1 }
.fd-curve { fill:none;stroke:var(--on-night-strong);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke }

/* Train: eight cards, a loss, checkpoints, one reclaim. */
.fd-lanes { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px }
.fd-lane { position:relative;height:52px;border:1px dashed rgba(255,255,255,.14);border-radius:6px;overflow:hidden;transition:border-color .25s ease,background-color .25s ease }
.fd-lane em { position:absolute;left:7px;top:6px;font:500 10px var(--font-code);font-style:normal;color:var(--on-night-faint) }
.fd-lane i { position:absolute;left:0;right:0;bottom:0;height:5px;opacity:0;background:repeating-linear-gradient(90deg,var(--b-gold) 0 10px,var(--b-gold-light) 10px 20px);background-size:40px 5px }
.fd-lane.is-lit { border-style:solid;border-color:color-mix(in srgb,var(--b-gold) 55%,transparent);background:color-mix(in srgb,var(--b-gold) 8%,transparent) }
.fd-lane.is-lit em { color:var(--on-night) }
.fd-lane.is-busy i { opacity:1;animation:fd-flow .8s linear infinite }
.fd-lane.is-lost { border-style:solid;border-color:var(--warn-on-night);background:color-mix(in srgb,var(--warn-on-night) 10%,transparent) }
@keyframes fd-flow { to { background-position:40px 0 } }
.fd-ck { fill:var(--night-deep);stroke:var(--b-gold);stroke-width:2;opacity:0;transition:opacity .2s ease;vector-effect:non-scaling-stroke }
.fd-ck.is-on { opacity:1 }
.fd-ck.is-used { fill:var(--b-gold) }
.fd-cut { stroke:var(--warn-on-night);stroke-width:1.5;stroke-dasharray:4 4;opacity:0;vector-effect:non-scaling-stroke }
.fd-cut.is-on { opacity:1 }
.fd-redo { fill:color-mix(in srgb,var(--warn-on-night) 16%,transparent);opacity:0;transition:opacity .3s ease }
.fd-redo.is-on { opacity:1 }
.fd-legend { display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:-6px;font:500 11px var(--font-code);color:var(--on-night-faint) }
.fd-legend span { display:inline-flex;align-items:center;gap:6px }
.fd-legend i { display:inline-block;width:9px;height:9px }
.fd-key-ck { border:2px solid var(--b-gold);border-radius:50% }
.fd-legend i.fd-key-cut { width:0;height:11px;border-left:2px dashed var(--warn-on-night) }
.fd-key-redo { background:color-mix(in srgb,var(--warn-on-night) 30%,transparent);border-radius:2px }

/* Serve: traffic, vLLM's queue, three replicas. */
.fd-traffic { height:90px }
.fd-area { fill:rgba(255,255,255,.06) }
.fd-queue { display:grid;grid-template-columns:auto minmax(0,1fr) 2.5em;align-items:center;gap:12px;font:500 12px var(--font-code);color:var(--on-night-muted) }
.fd-queue em { font-style:normal;text-align:right;color:var(--on-night-strong);font-variant-numeric:tabular-nums }
.fd-meter { position:relative;height:8px;border-radius:4px;background:rgba(255,255,255,.08) }
.fd-meter i { position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:var(--on-night-strong) }
.fd-meter b { position:absolute;left:40%;top:-5px;bottom:-5px;border-left:1.5px dashed var(--b-gold) }
.fd-meter.is-over i { background:var(--warn-on-night) }
.fd-replicas { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px }
.fd-replica { position:relative;display:flex;flex-direction:column;gap:4px;min-height:64px;padding:10px 12px 14px;border:1px dashed rgba(255,255,255,.14);border-radius:8px;overflow:hidden;transition:border-color .25s ease,background-color .25s ease }
.fd-replica em { font:500 11px var(--font-code);font-style:normal;color:var(--on-night-faint) }
.fd-replica b { font:600 13px var(--font-code);color:var(--on-night-muted) }
.fd-replica i { position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--b-gold);transition:width .3s ease }
.fd-replica[data-state="loading"] { border-style:solid;border-color:rgba(255,255,255,.35) }
.fd-replica[data-state="loading"] b { color:var(--on-night-strong) }
.fd-replica[data-state="serving"] { border-style:solid;border-color:color-mix(in srgb,var(--b-gold) 60%,transparent);background:color-mix(in srgb,var(--b-gold) 7%,transparent) }
.fd-replica[data-state="serving"] b { color:var(--b-gold) }
.fd-replica[data-state="idle"] { border-style:solid;border-color:rgba(255,255,255,.22) }
.fd-replica[data-state="idle"] b { color:var(--on-night) }

/* Sandbox: tool calls, a grid of short-lived sandboxes. */
.fd-split { display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;min-height:236px }
.fd-log { list-style:none;margin:0;padding:12px 14px;border-radius:10px;background:var(--code-on-night);display:flex;flex-direction:column;justify-content:flex-end;gap:7px;overflow:hidden;font:400 11.5px/1.45 var(--font-code);color:var(--on-night) }
.fd-log li { animation:fab-in .3s var(--fab-ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.fd-log span { color:var(--on-night-faint) }
.fd-log code { color:var(--code-string) }
.fd-log [data-blocked] code { color:var(--warn-on-night);text-decoration:line-through }
.fd-cells { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:6px }
.fd-cell { display:flex;flex-direction:column;justify-content:space-between;gap:2px;min-width:0;padding:7px 8px;border:1px dashed rgba(255,255,255,.12);border-radius:7px;font:500 10px/1.3 var(--font-code);transition:border-color .2s ease,background-color .2s ease }
.fd-cell b { font-weight:500;color:var(--on-night-faint) }
.fd-cell code { color:var(--on-night);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.fd-cell em { font-style:normal;color:var(--on-night-muted) }
.fd-cell[data-state="boot"] { border-style:solid;border-color:rgba(255,255,255,.3) }
.fd-cell[data-state="run"] { border-style:solid;border-color:color-mix(in srgb,var(--b-gold) 60%,transparent);background:color-mix(in srgb,var(--b-gold) 8%,transparent) }
.fd-cell[data-state="run"] em { color:var(--b-gold) }
.fd-cell[data-state="done"] { border-style:solid;border-color:rgba(255,255,255,.18) }
.fd-cell[data-state="done"] em { color:var(--window-green) }
.fd-cell[data-state="blocked"] { border-style:solid;border-color:var(--warn-on-night) }
.fd-cell[data-state="blocked"] em { color:var(--warn-on-night) }

/* Batch: progress, a laptop that leaves, eight workers. */
.fd-progress { position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden }
.fd-progress i { position:absolute;left:0;top:0;bottom:0;width:0;background:var(--b-gold) }
.fd-batch-grid { display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;align-items:center }
.fd-client { display:grid;justify-items:center;gap:8px;font:500 11px var(--font-code);color:var(--on-night-muted) }
.fd-client em { font-style:normal }
.fd-laptop { position:relative;width:76px;height:58px }
.fd-laptop::after { content:"";position:absolute;left:-6px;right:-6px;bottom:0;height:6px;border-radius:2px 2px 6px 6px;background:rgba(255,255,255,.35) }
.fd-laptop i { position:absolute;left:4px;right:4px;bottom:6px;height:46px;border:2px solid rgba(255,255,255,.55);border-bottom:0;border-radius:5px 5px 0 0;background:var(--code-on-night);transform-origin:bottom;transition:transform .45s var(--fab-ease),border-color .3s ease }
.fd-client[data-state="away"] .fd-laptop i { transform:scaleY(.08);border-color:var(--warn-on-night) }
.fd-client[data-state="away"] em { color:var(--warn-on-night) }
.fd-workers { display:grid;gap:6px }
.fd-worker { position:relative;height:14px;border-radius:4px;background:rgba(255,255,255,.05);overflow:hidden }
.fd-worker i { position:absolute;top:2px;bottom:2px;left:0;width:12%;border-radius:3px;background:var(--on-night-faint) }
.fd-worker.is-on i { background:var(--b-gold) }

/* ── The composer (paper, a night card) ───────────────────────────────────────────────── */
.fab-composer { display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;margin-top:var(--space-md);border-radius:20px;background:var(--b-night);color:var(--on-night);overflow:hidden;box-shadow:0 40px 80px -56px rgba(23,26,31,.7) }
.fab-composer-code { grid-column:1;border:0;border-radius:0;box-shadow:none;background:var(--code-on-night) }
.fab-composer-code { display:flex;flex-direction:column }
.code-window.fab-composer-code>.fab-code { flex:1;display:flex;align-items:center;padding:28px 0;font-size:clamp(14px,1.45vw,19px);line-height:1.75 }
.fab-composer [data-c] { display:inline-block;border-radius:3px }
.fab-composer [data-c].is-new { animation:fc-new .9s var(--fab-ease) }
@keyframes fc-new { 0% { background:var(--b-gold);color:var(--b-ink) } 100% { background:transparent } }
.fab-composer-controls { grid-column:1;display:grid;gap:12px;padding:20px 24px 26px;background:var(--code-on-night);border-top:1px solid rgba(255,255,255,.07) }
.fab-composer-controls[hidden] { display:none }
.fc-group { display:flex;flex-wrap:wrap;align-items:center;gap:6px }
.fc-group>span { width:78px;font:500 11px var(--font-code);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-faint) }
.fc-group button { min-height:36px;min-width:44px;padding:0 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:transparent;color:var(--on-night);font:500 13px var(--font-code);cursor:pointer;transition:background-color var(--dur-short) ease,border-color var(--dur-short) ease,color var(--dur-short) ease }
.fc-group button:hover { border-color:rgba(255,255,255,.4) }
.fc-group button[aria-pressed="true"] { background:var(--on-night-strong);border-color:var(--on-night-strong);color:var(--b-ink) }
.fab-composer-out { grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:22px;padding:clamp(22px,3vw,40px);border-left:1px solid rgba(255,255,255,.07) }
.fc-slots { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px }
.fc-slot { position:relative;height:58px;border:1px dashed rgba(255,255,255,.14);border-radius:8px;transition:border-color .3s ease }
.fc-slot::before { content:"";position:absolute;inset:4px;border-radius:5px;background:var(--b-gold);transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--fab-ease) }
.fc-slot em { position:absolute;left:10px;bottom:8px;z-index:1;font:600 11px var(--font-code);font-style:normal;color:var(--b-ink) }
.fc-slot.is-lit { border-style:solid;border-color:color-mix(in srgb,var(--b-gold) 70%,transparent) }
.fc-slot.is-lit::before { transform:none }
.fc-mem { position:relative;height:10px;margin-top:22px;border-radius:5px;background:rgba(255,255,255,.08) }
.fc-mem i { position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:5px;background:var(--on-night-strong);transition:width .5s var(--fab-ease),background-color .3s ease }
.fc-mem.is-over i { background:var(--b-gold) }
.fc-mem b { position:absolute;left:50%;top:-24px;bottom:-6px;border-left:1.5px dashed var(--on-night-muted) }
.fc-mem b span { position:absolute;left:8px;top:-2px;font:500 11px var(--font-code);white-space:nowrap;color:var(--on-night-muted) }
.fc-figures { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 }
.fc-figures dt { font:500 11px var(--font-code);letter-spacing:.05em;text-transform:uppercase;color:var(--on-night-faint) }
.fc-figures dd { margin:8px 0 0;font:600 clamp(22px,2.4vw,32px)/1.05 var(--font-display);letter-spacing:-.03em;color:var(--on-night-strong);font-variant-numeric:tabular-nums }
.fc-figures dd.fc-sub { margin-top:6px;font:500 12px/1.4 var(--font-code);letter-spacing:0;color:var(--on-night-muted) }
.fc-figures [data-o="fit16"] { font-size:clamp(16px,1.5vw,20px);letter-spacing:-.015em;line-height:1.2 }
.fc-note { margin-top:auto;font-size:15px;line-height:1.55;color:var(--on-night) }
.fab-fit-caveat { margin-top:14px;font-size:13px;line-height:1.6;color:var(--color-muted);max-width:90ch }
.fab-inline-link { text-decoration:underline;text-underline-offset:3px;color:var(--color-ink) }

/* ── Cost: the replica receipt and the price table (night) ────────────────────────────── */
.fab-cost { padding-block:clamp(48px,6vw,96px) 0 }
.fab-cost .page-section-heading { align-items:end }
.fab-cost h2 { font-size:var(--text-heading);line-height:1.04;letter-spacing:-.035em }
.fab-receipt { margin:var(--space-lg) 0 0;padding:clamp(20px,2.6vw,36px);border-radius:20px;background:var(--night-deep);border:1px solid rgba(255,255,255,.06) }
.fab-receipt-head { display:flex;align-items:center;gap:18px }
.fab-receipt-buddy { position:relative;flex:none;width:76px;height:44px }
.fab-receipt-buddy .rb { position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .25s ease }
.fab-receipt-buddy[data-buddy="rest"] .rb-rest,.fab-receipt-buddy[data-buddy="look"] .rb-look,.fab-receipt-buddy[data-buddy="asleep"] .rb-asleep { opacity:1 }
.fab-receipt:not(.is-enhanced) .rb-asleep { opacity:1 }
.fab-receipt-title { font:600 18px/1.2 var(--font-display);color:var(--on-night-strong) }
.fab-receipt-sub { margin-top:4px;font:500 12.5px var(--font-code);color:var(--on-night-muted) }
.fab-receipt-head .fab-replay { align-self:flex-start }
.fab-phases { list-style:none;margin:28px 0 0;padding:0;display:flex;gap:4px }
.fab-phases li { flex:var(--w) 1 0;min-width:68px }
/* Compressed time: each phase's share of the replay (the receipt table holds the real durations). */
.fab-phases [data-phase="0"] { --w:5 }
.fab-phases [data-phase="1"] { --w:13 }
.fab-phases [data-phase="2"] { --w:13 }
.fab-phases [data-phase="3"] { --w:33 }
.fab-phases [data-phase="4"] { --w:22 }
.fab-phases [data-phase="5"] { --w:14 }
.fab-phases button { display:flex;align-items:flex-end;width:100%;height:68px;padding:8px 10px;border-radius:8px;border:1px dashed rgba(255,255,255,.22);background:transparent;color:var(--on-night-muted);font:500 12px/1.2 var(--font-body);text-align:left;cursor:pointer;transition:background-color .3s var(--fab-ease),border-color .3s var(--fab-ease),color .3s var(--fab-ease) }
.fab-phases button { flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:3px }
.fab-phases span { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.fab-phases .ph-meta { font:500 10.5px var(--font-code);opacity:.8 }
.fab-phases .is-billed button { border:1px solid transparent;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.16) 0 6px,rgba(255,255,255,.1) 6px 12px);color:var(--on-night-strong) }
.fab-receipt.is-enhanced .fab-phases li:not(.is-done):not(.is-current) button { opacity:.45 }
.fab-receipt.is-enhanced .fab-phases .is-billed.is-done button,.fab-receipt.is-enhanced .fab-phases .is-billed.is-current button { background:repeating-linear-gradient(-45deg,var(--b-gold) 0 7px,var(--b-gold-light) 7px 14px);color:var(--b-ink);font-weight:600 }
.fab-phases .is-current button { border-color:var(--b-gold);opacity:1 }
.fab-phases button:hover { border-color:rgba(255,255,255,.5) }
.fab-meter { position:relative;height:10px;margin-top:6px }
.fab-meter-head { position:absolute;top:0;left:var(--at,100%);width:2px;height:10px;margin-left:-1px;border-radius:1px;background:var(--b-gold);opacity:0;transition:opacity .2s ease }
.fab-receipt.is-playing .fab-meter-head { opacity:1 }
.fab-phase-note { min-height:3.2em;margin-top:10px;font-size:14px;line-height:1.6;color:var(--on-night-muted) }
.fab-receipt.is-enhanced .fab-receipt-table { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap }
.fab-receipt-total { display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1) }
.fab-receipt:not(.is-enhanced) .fab-receipt-total { display:none }
.fab-receipt-total span { font:500 11px var(--font-code);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-faint) }
.fab-receipt-total b { font:600 clamp(36px,4.4vw,56px)/1 var(--font-display);letter-spacing:-.04em;color:var(--b-gold);font-variant-numeric:tabular-nums }
.fab-receipt-total em { font:500 13px var(--font-code);font-style:normal;color:var(--on-night-muted) }
.fab-receipt-table { width:100%;margin-top:14px;border-collapse:collapse;font:400 13.5px var(--font-code);font-variant-numeric:tabular-nums }
.fab-receipt-table th,.fab-receipt-table td { padding:11px 12px 11px 0;border-top:1px solid rgba(255,255,255,.08);text-align:left;font-weight:400 }
.fab-receipt-table thead th { border-top:0;padding-top:0;font:500 11px var(--font-code);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-faint) }
.fab-receipt-table td:last-child,.fab-receipt-table th:last-child { text-align:right }
.fab-receipt-table tbody th { color:var(--on-night) }
.fab-receipt-table td { color:var(--on-night-muted) }
.fab-receipt-table tr { transition:opacity .3s ease,background-color .3s ease }
.fab-receipt-table tr.is-pending { opacity:.35 }
.fab-receipt-table tr.is-current th,.fab-receipt-table tr.is-current td { color:var(--on-night-strong) }
.fab-receipt-table tr.is-current th::before { content:"";display:inline-block;width:6px;height:6px;margin:0 10px 1px 0;border-radius:50%;background:var(--b-gold) }
.fab-receipt-table tfoot th,.fab-receipt-table tfoot td { border-top:1px solid rgba(255,255,255,.3);padding-top:14px;color:var(--on-night-strong);font-weight:600 }
.fab-receipt-table [data-total] { font-size:16px;color:var(--b-gold) }
.fab-receipt figcaption { margin-top:14px;font-size:12.5px;color:var(--on-night-faint) }
.fab-prices { margin-top:clamp(36px,4vw,56px) }
.fab-prices-head { display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap }
.fab-prices-head h3 { font-size:var(--text-subheading,22px) }
.fab-units { display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:rgba(255,255,255,.07) }
.fab-units[hidden] { display:none }
.fab-units button { min-height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--on-night-muted);font:600 13px var(--font-body);cursor:pointer }
.fab-units button[aria-pressed="true"] { background:var(--on-night-strong);color:var(--b-ink) }
.fab-price-cards { list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px }
.fab-price-cards li { display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;border-radius:16px;background:var(--night-deep);border:1px solid rgba(255,255,255,.06) }
.fab-price-gpu { font:600 15px var(--font-body);color:var(--on-night-strong) }
.fab-price-gpu span { margin-left:6px;font:500 12px var(--font-code);color:var(--on-night-muted) }
.fab-price-big { display:flex;align-items:baseline;flex-wrap:wrap;gap:8px }
.fab-price-big b { font:600 clamp(40px,4.6vw,60px)/1 var(--font-display);letter-spacing:-.045em;color:var(--on-night-strong);font-variant-numeric:tabular-nums }
.fab-price-big>span { font:500 13px var(--font-code);color:var(--on-night-muted) }
.fab-price-alt { font:500 12.5px var(--font-code);color:var(--on-night-muted) }
.fab-note { margin-top:16px;max-width:80ch;font-size:13.5px;line-height:1.7;color:var(--on-night-muted) }

/* ── The plumbing (paper): three illustrated cards and a line of extras ────────────────── */
.fab-plumbing { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px) }
.fab-plumb { display:flex;flex-direction:column;border:1px solid var(--color-rule);border-radius:var(--radius-card,16px);background:var(--color-surface);overflow:hidden }
.fab-plumb h3 { margin:22px 24px 0;font-size:19px;line-height:1.25;letter-spacing:-.015em }
.fab-plumb p { margin:8px 24px 26px;font-size:15px;line-height:1.65;color:var(--color-muted) }
.fab-plumb-art { position:relative;height:196px;padding:22px;background:var(--b-night);color:var(--on-night);font:500 11.5px var(--font-code);overflow:hidden }
.pa-layers { display:flex;flex-direction:column;justify-content:flex-end;gap:6px }
.pa-layer { display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:transform .45s var(--fab-ease) }
.pa-layer code { color:var(--on-night-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.pa-layer em { font-style:normal;color:var(--window-green) }
.pa-layer:first-child { border-color:color-mix(in srgb,var(--b-gold) 60%,transparent) }
.pa-layer:first-child em { color:var(--b-gold) }
.pa-layer.is-base em { color:var(--on-night-muted) }
.fab-plumb:hover .pa-layer:first-child { transform:translateY(-4px) }
.pa-volume { display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:10px }
.pa-src { padding:8px 10px;border-radius:7px;border:1px dashed rgba(255,255,255,.25);color:var(--on-night-muted) }
.pa-arrow { position:relative;width:34px;height:1px;background:rgba(255,255,255,.35) }
.pa-arrow::after { content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid rgba(255,255,255,.35);border-block:3.5px solid transparent }
.pa-once { font-size:0 }
.pa-once::before { content:"once";position:absolute;left:0;top:-18px;font-size:10px;color:var(--b-gold) }
.pa-disk { display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--b-gold) 14%,transparent);border:1px solid color-mix(in srgb,var(--b-gold) 55%,transparent) }
.pa-disk b { font:600 13px var(--font-body);color:var(--on-night-strong) }
.pa-disk em { font-style:normal;color:var(--on-night-muted) }
.pa-fan { display:none }
.pa-boxes { display:grid;gap:6px }
.pa-boxes span { padding:7px 10px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--on-night) }
.pa-boxes span::before { content:"← ";color:var(--b-gold) }
.pa-versions { display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap }
.pa-line { position:absolute;left:22px;right:22px;top:50%;height:1px;background:rgba(255,255,255,.12) }
.pa-v { position:relative;padding:8px 11px;border-radius:999px;background:var(--b-night);border:1px solid rgba(255,255,255,.18);color:var(--on-night) }
.pa-v.is-bad { border-color:var(--warn-on-night);color:var(--warn-on-night);text-decoration:line-through }
.pa-v.is-live { border-color:var(--b-gold);color:var(--b-gold) }
.pa-back { position:relative;font-size:10.5px;color:var(--on-night-muted) }
.pa-back::before { content:"↩ ";color:var(--b-gold) }
.fab-extras { list-style:none;margin:var(--space-lg) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px }
.fab-extras li { padding:8px 14px;border-radius:999px;border:1px solid var(--color-rule);font-size:14px;color:var(--color-ink) }

/* ── Model guides: a closed disclosure, for those who want them ─────────────────────────── */
.fab-guides { margin-top:var(--space-2xl);padding-block:16px;border-top:1px solid var(--color-rule) }
.fab-guides summary { cursor:pointer;min-height:44px;align-content:center;font-size:15px;font-weight:500;color:var(--color-muted);list-style:none }
.fab-guides summary::-webkit-details-marker { display:none }
.fab-guides[open] summary span { display:inline-block;transform:rotate(180deg) }
.fab-guides .serverless-model-list { display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0 }
.fab-guides .serverless-model-list li { min-height:0;padding:0;border:0;font-size:14px }
.fab-guides .serverless-model-list li::before { content:none }
.fab-guides .serverless-model-list a { display:inline-flex;padding:7px 12px;border-radius:999px;border:1px solid var(--color-rule);font-size:14px;color:var(--color-ink) }
.fab-guides .serverless-model-list a:hover { border-color:var(--color-ink) }

/* ── FAQ and outro ────────────────────────────────────────────────────────────────────── */
.fab-faq { padding-top:clamp(64px,7vw,110px) }
.fab-faq .faq-item p { font-size:17px;line-height:1.7 }
.fabric-page .cross-product { margin-top:var(--space-2xl) }

/* ── Responsive ───────────────────────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .fab-hero-grid { grid-template-columns:minmax(0,1fr) }
  .fab-pillar,.fab-pillar:nth-child(even) { grid-template-columns:minmax(0,1fr) }
  .fab-pillar:nth-child(even) .fab-pillar-copy { order:0 }
}
@media (max-width:760px) {
  .fab-hero-grid,.fab-cost>.wrap { border-radius:20px }
  .fab-loop { grid-template-columns:minmax(0,1fr);gap:0 }
  .fab-loop li { padding-block:16px }
  .fab-plumbing,.fab-price-cards,.fc-figures { grid-template-columns:minmax(0,1fr) }
  .fab-composer { grid-template-columns:minmax(0,1fr) }
  .fab-composer-out { grid-column:1;grid-row:auto;border-left:0;border-top:1px solid rgba(255,255,255,.07) }
  .fab-console--hero .code-window>.fab-code { height:auto;max-height:340px }
  .fab-window>.code-window-bar { flex-wrap:wrap;row-gap:0;padding-block:6px }
  .fab-slides { order:3;flex-basis:100%;margin-left:-4px }
  .fab-pause { margin-left:auto }
  .fab-slides button { width:18px }
  .fd-lanes { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .fd-split { grid-template-columns:minmax(0,1fr) }
  .fd-log { min-height:120px }
  .fd-cells { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .fd-batch-grid { grid-template-columns:90px minmax(0,1fr) }
  .fd-laptop { width:56px;height:44px }
  .fd-laptop i { height:34px }
  .fab-phases { flex-wrap:wrap }
  .fab-phases li { flex:1 1 30% }
  .fab-phases button { height:auto;min-height:64px }
  .fab-phases span { white-space:normal }
  .fab-receipt-head { display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px 14px }
  .fab-receipt-head .fab-replay { grid-column:1/-1;justify-self:start }
  .fab-receipt-buddy { width:64px;height:38px }
  .fab-cost .page-section-heading { grid-template-columns:minmax(0,1fr) }
}
@media (max-width:540px) {
  .fab-install { width:100%;justify-content:space-between }
  .fab-cta .button { width:100% }
  .fab-code { font-size:11.5px }
  .fab-slots { gap:4px }
}
@media (prefers-reduced-motion:reduce) {
  .fab-rot>.fab-rot-item,.fab-strike::after,.fab-slot.is-lit::before,.fab-receipt-table tr,.fab-phases button,.fab-receipt-buddy .rb,.fc-slot::before,.fc-mem i,.pa-layer,.fd-lane,.fd-replica,.fd-replica i,.fd-cell,.fd-laptop i,.fd-bar code { transition:none }
  .fd-lane.is-busy i,.fab-proof-item.is-on,.fab-composer [data-c].is-new,.fd-log li,[data-rotator].is-enhanced .fab-console--hero .fab-code:not([hidden]) { animation:none }
}