/* =====================================================================================================
   assets/pg-os.css · THE one RIVET OS theme (reset Round 2/4, lane foundation, 3 Nov 2026).
   The menu's "RIVET OS" group: /infinite-os-overview (clickup.com/brain), /agents (/brain/agents), /superstar
   (/brain/skills), /license (ClickUp enterprise). Dark mode: the corporate buyer (brief 2.2, 6b-D5). Signature: the
   Command duo (black -> cyan, "dark tech hero"), on bounded bands only, its black anchor under the copy.
   Opt in:  kit.css, then ip.css (when the K10 scene, K13 islands or marks are used), then pg-os.css (LAST)
            <main id="main" class="os" data-mode="dark" data-m="kit">
   API and exact markup: .research/reset/r2/foundation.md section 7. Built ON the kit, the product UI (K6/K7 partials
   with data-pui-mode="dark"), the IP partials (K10 scene, K13 island) and assets/ip/**. Never redraws IP.
   Rules: tokens only; magenta = the one .k-btn--decision + one insight per screen (a mark's hinge, a read model, one
   bar); one duo per surface and per viewport; no glow, no full-bleed gradient; cards on elev-1 without borders;
   nothing fixed at a bottom corner (the ElevenLabs widget).
   Sections: 0 base · 1 Command signature · 2 hero · 3 pinned scene + figure islands · 4 "how it runs" chain ·
   5 dashboards with notes · 6 sample deliverable · 7 agents · 8 the two-lane read (SUPERSTAR) · 9 enterprise (license)
   · 10 reduced motion, RTL, print · 11 ds-shared (identical block in pg-academy.css)
   ===================================================================================================== */

/* ---------- 0. base ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body:has(main.os){ margin:0; background:var(--black); color:var(--white); font:400 16px/1.6 var(--font-sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
main.os{ display:block; overflow-x:clip; background:var(--ground); color:var(--ink);
  --os-cyan-text:var(--cyan);                       /* cyan as text on black: AA (13.9:1) */
  --os-rule:var(--elev-4);
  --os-panel:var(--elev-1);
  --os-raised:var(--elev-2);
}
:where(main.os) *, :where(main.os) *::before, :where(main.os) *::after{ box-sizing:border-box; }
:where(main.os) :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote){ margin:0; }
:where(main.os) :where(ul,ol){ padding:0; }
:where(main.os) :where(a:not([class])){ color:inherit; }
:where(main.os) :where(p a:not([class])){ color:var(--link-ink); text-underline-offset:3px; }
:where(main.os) :where(button){ font:inherit; }
main.os .k-head .t-section{ max-width:22ch; }
main.os .k-head--wide .t-section{ max-width:28ch; }
/* the OS eyebrow keeps the kit's slate Mono caps; the section index in cyan Mono reads as the system's own numbering */
.os-k{ display:inline-flex; align-items:center; gap:12px; font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.os-k__n{ color:var(--os-cyan-text); font-variant-numeric:tabular-nums; padding-inline-end:12px; border-inline-end:1px solid var(--os-rule); }
.os-k::after{ content:""; width:28px; height:1px; background:var(--os-rule); }
.os-meta{ font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }

/* ---------- 1. the Command signature: one bounded band per viewport, the black anchor under the text ----------
   <div class="os-command">…</div> = .k-duo.k-duo--command with the OS defaults (40% hold, aimed from the copy).
   Text sits in the anchor two-thirds (BRAND: Command, body text with a 40% hold). */
.os-command{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--radius-xl); color:var(--white);
  background:linear-gradient(var(--os-aim, 115deg), var(--black) 0 var(--os-hold, 40%), var(--cyan) 100%);
  box-shadow:inset 0 0 0 1px var(--elev-4); }
[dir="rtl"] .os-command{ background:linear-gradient(calc(360deg - var(--os-aim, 115deg)), var(--black) 0 var(--os-hold, 40%), var(--cyan) 100%); }
.os-command--down{ --os-aim:180deg; --os-hold:62%; }   /* copy only in the top 60% of the band; controls below sit on an elev-1 panel */
.os-command > *{ position:relative; z-index:1; }
/* the engineering grid fades in on the cyan side only (the "science" substrate), never under the copy */
.os-command::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb, var(--black) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--black) 14%, transparent) 1px, transparent 1px);
  background-size:var(--blueprint-size, 32px) var(--blueprint-size, 32px);
  -webkit-mask:linear-gradient(var(--os-aim, 115deg), transparent 0 52%, #000 100%); mask:linear-gradient(var(--os-aim, 115deg), transparent 0 52%, #000 100%); }
@media (max-width:767px){ .os-command{ border-radius:var(--radius-base); --os-aim:170deg; --os-hold:48%; } }
/* text and controls inside the band take the duo ink */
.os-command{ --ink:var(--white); --ink-muted:var(--on-duo-muted); --focus-ring:var(--focus-ring-on-duo); }
.os-command .t-eyebrow, .os-command .os-k{ color:var(--on-duo-muted); }

/* ---------- 2. hero: the product system in the first screen (Command band, copy on the anchor, the system on the cyan side) ---------- */
.os-hero{ padding-block:clamp(16px, 2vw, 28px) clamp(48px, 6vw, 88px); }
.os-hero__band{ display:grid; gap:clamp(28px, 4vw, 56px); padding:clamp(28px, 5vw, 72px) clamp(20px, 5vw, 72px); align-items:center; min-height:min(78svh, 760px); }
@media (min-width:1024px){ .os-hero__band{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } }
.os-hero__copy{ display:grid; gap:20px; align-content:start; max-width:36rem; }
.os-hero__copy .t-hero{ max-width:14ch; text-wrap:balance; }
.os-hero__copy .t-lead{ color:var(--on-duo-muted); max-width:32rem; }
.os-hero__art{ position:relative; min-width:0; display:grid; place-items:center; }
.os-hero__art > :is(.k-desk, .ds-island, .os-panel){ width:100%; }
/* a dark product panel sitting on the cyan side: elev-1 with an elev-4 rim (the anchor matches the ground) */
.os-panel{ position:relative; border-radius:var(--radius-card); background:var(--os-panel); color:var(--white); box-shadow:inset 0 0 0 1px var(--elev-4), 0 40px 80px -40px rgba(0,0,0,.9); overflow:hidden; }
.os-panel__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; box-shadow:inset 0 -1px 0 var(--elev-4); font:500 12px/1.3 var(--font-mono); letter-spacing:.04em; color:var(--slate-on-dark); }
.os-panel__body{ padding:clamp(16px, 2vw, 24px); }
/* the K16 tool chips that belong to the system (HubSpot, Salesforce, Slack…): logos in their own colours on a white chip */
.os-tools{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.os-tool{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px 0 8px; border-radius:var(--ds-pill, 999px); background:var(--white); color:var(--black); font:500 13px/1 var(--font-sans); }
.os-tool img{ width:20px; height:20px; display:block; }

/* ---------- 3. the pinned INFINITE scene (K10, partial ip-infinite-scene) + figure islands (K13) on dark ---------- */
/* wrap the K10 partial: <div class="os-scene"> <!-- section:ip-infinite-scene --> … </div>; the scene owns its pinning */
.os-scene{ position:relative; background-image:radial-gradient(circle at 1px 1px, var(--ds-dots) 1px, transparent 1.5px); background-size:var(--blueprint-size, 32px) var(--blueprint-size, 32px); }
.os-scene::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(var(--ground), transparent 12%, transparent 88%, var(--ground)); }
/* islands on the OS take the dots grid (B3: lines compete with tables on dark) */
main.os .ds-island .ds-island__canvas{ background-image:radial-gradient(circle at 1px 1px, var(--ds-dots) 1px, transparent 1.5px); background-size:var(--blueprint-size, 32px) var(--blueprint-size, 32px); }
/* only for a figure drawn on a LIGHT paper ground (most assets/figures/C-*.svg, A-*.svg); the fig-*.png/webp book
   figures are already dark and sit straight on the island. A registered PNG/WebP figure drawn for paper (assets/figures/fig-*.png) sits on a light plate inside the dark island,
   so the figure is used as authored (6b-D10) rather than inverted */
.os-plate{ display:block; width:100%; max-width:var(--ds-fig-max, 880px); margin-inline:auto; padding:clamp(12px, 2vw, 24px); border-radius:var(--radius-card); background:var(--white); }
.os-plate > img{ display:block; width:100%; height:auto; }
/* the eight models row + the AI-SCORE figure, side by side under one head */
.os-models{ display:grid; gap:clamp(24px, 3vw, 40px); }
@media (min-width:1024px){ .os-models--split{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); align-items:start; } }

/* ---------- 4. "how it runs": diagnostic -> playbook -> operating view, joined by curved connectors (never elbows) ---------- */
.os-chain{ display:grid; gap:12px; list-style:none; counter-reset:osc; }
@media (min-width:1024px){ .os-chain{ grid-template-columns:repeat(var(--os-n, 3), minmax(0,1fr)); gap:clamp(32px, 4vw, 56px); } }
.os-step{ counter-increment:osc; position:relative; display:grid; grid-template-rows:auto auto 1fr; gap:12px; padding:clamp(18px, 2vw, 24px); border-radius:var(--radius-card); background:var(--os-panel); box-shadow:inset 0 0 0 1px var(--elev-4); }
.os-step__k{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.os-step__k::before{ content:counter(osc, decimal-leading-zero); font:500 13px/1 var(--font-mono); color:var(--os-cyan-text); font-variant-numeric:tabular-nums; }
.os-step__t{ font:600 20px/1.3 var(--font-sans); letter-spacing:-0.01em; }
.os-step__p{ font:400 15px/1.5 var(--font-sans); color:var(--ink-muted); }
.os-step__media{ margin-top:6px; border-radius:10px; overflow:hidden; background:var(--elev-2); }
.os-step__media > img{ display:block; width:100%; height:auto; }
/* the connector: a bezier from one step to the next, drawn as a mask in the rule colour, cyan where it is live */
@media (min-width:1024px){
  .os-step:not(:last-child)::after{ content:""; position:absolute; top:44px; inset-inline-start:100%; width:clamp(32px, 4vw, 56px); height:28px;
    background:var(--os-rule); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28'%3E%3Cpath d='M1 22 C 18 22, 20 6, 38 6 S 50 6, 55 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='52' cy='6' r='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28'%3E%3Cpath d='M1 22 C 18 22, 20 6, 38 6 S 50 6, 55 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='52' cy='6' r='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
  [dir="rtl"] .os-step:not(:last-child)::after{ scale:-1 1; }
  .os-step.is-live:not(:last-child)::after{ background:var(--cyan); }
}
.os-step.is-live{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 55%, transparent); }

/* ---------- 5. dashboards with notes (K6 dark): the frame, numbered notes beside it, "Sample" on the frame ---------- */
.os-dash{ display:grid; gap:clamp(24px, 3vw, 40px); align-items:start; }
@media (min-width:1024px){ .os-dash{ grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); } .os-dash--flip{ grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); } .os-dash--flip > :first-child{ order:2; } }
.os-dash__frame{ position:relative; min-width:0; }
.os-dash__frame > .k-status{ position:absolute; z-index:3; inset-inline-end:14px; top:14px; }
.os-notes{ display:grid; gap:4px; list-style:none; counter-reset:osn; }
.os-note{ counter-increment:osn; display:grid; grid-template-columns:28px minmax(0,1fr); gap:4px 12px; padding:16px 0; box-shadow:inset 0 -1px 0 var(--elev-4); }
.os-note::before{ content:counter(osn); grid-row:span 2; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--cyan);
  font:500 12px/1 var(--font-mono); color:var(--os-cyan-text); }
.os-note b{ font:600 16px/1.3 var(--font-sans); }
.os-note span{ font:400 14px/1.5 var(--font-sans); color:var(--ink-muted); }
/* a numbered pin over the frame that matches a note: <span class="os-pin" style="--x:62%;--y:38%">2</span> */
.os-pin{ position:absolute; z-index:4; left:var(--x); top:var(--y); translate:-50% -50%; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--black); color:var(--cyan); box-shadow:0 0 0 1px var(--cyan); font:500 12px/1 var(--font-mono); pointer-events:none; }
[dir="rtl"] .os-pin{ left:auto; right:var(--x); translate:50% -50%; }

/* ---------- 6. the sample deliverable: a document page from the OS (the diagnostic a partner delivers), labelled Sample ----------
   <article class="os-doc" data-mode="light"> … </article>  : a light paper island on the dark page (DS:35, one bounded island) */
.os-doc{ position:relative; display:grid; gap:20px; padding:clamp(22px, 3vw, 40px); border-radius:var(--radius-card); background:var(--white); color:var(--black);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 50px 100px -50px rgba(0,0,0,.95); max-width:760px; }
.os-doc__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; box-shadow:inset 0 -1px 0 var(--silver); }
.os-doc__head img{ height:18px; width:auto; }
.os-doc__k{ font:500 11px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--slate); }
.os-doc__t{ font:600 clamp(20px, 2.2vw, 26px)/1.25 var(--font-sans); letter-spacing:-0.01em; }
.os-doc__grid{ display:grid; gap:16px; }
@media (min-width:640px){ .os-doc__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.os-doc__kpi{ display:grid; gap:2px; padding:12px 14px; border-radius:8px; background:var(--ghost-white); }
.os-doc__kpi b{ font:500 24px/1.1 var(--font-mono); font-variant-numeric:tabular-nums; }
.os-doc__kpi span{ font:400 13px/1.4 var(--font-sans); color:var(--slate); }
.os-doc__rows{ display:grid; list-style:none; }
.os-doc__rows li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:10px 0; box-shadow:inset 0 1px 0 var(--silver); font:400 14px/1.45 var(--font-sans); }
.os-doc__rows li b{ font:500 13px/1.4 var(--font-mono); font-variant-numeric:tabular-nums; }
.os-doc > .k-status{ position:absolute; inset-inline-end:16px; top:-12px; }
.os-doc--tilt{ rotate:-1.2deg; } [dir="rtl"] .os-doc--tilt{ rotate:1.2deg; }
.os-stack{ position:relative; display:grid; justify-items:center; }
.os-stack > .os-doc + .os-doc{ margin-top:-62%; translate:8% 0; rotate:2deg; z-index:-1; opacity:.9; }

/* ---------- 7. agents: humans with AI. Agent cards with their level mark; the person decides ---------- */
.os-agents{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); list-style:none; }
.os-agent{ display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; padding:20px; border-radius:var(--radius-card); background:var(--os-panel); box-shadow:inset 0 0 0 1px var(--elev-4); color:var(--ink); text-decoration:none; }
a.os-agent:hover{ box-shadow:inset 0 0 0 1px var(--slate); }
.os-agent__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.os-agent__cover{ width:44px; height:44px; border-radius:10px; object-fit:cover; background:var(--elev-2); }
.os-agent__t{ font:600 17px/1.3 var(--font-sans); }
.os-agent__p{ font:400 14px/1.5 var(--font-sans); color:var(--ink-muted); }
.os-agent__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; box-shadow:inset 0 1px 0 var(--elev-4); }
.os-agent .ds-level{ --ds-level-w:44px; }
/* the decision line: "Your agents draft. You decide." The person is gold (human), the agent cyan (AI) */
.os-decide{ display:grid; gap:10px; }
.os-decide__row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; font:500 15px/1.4 var(--font-sans); }
.os-decide__row::before{ content:""; width:10px; height:10px; border-radius:50%; }
.os-decide__row--ai::before{ background:var(--cyan); } .os-decide__row--you::before{ background:var(--gold); }
/* "In development" (MCP), "Coming soon": the kit status label, cyan rim on dark */
.os-dev{ display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 10px; border-radius:var(--ds-pill, 999px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 50%, transparent);
  color:var(--os-cyan-text); font:500 11px/1 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; }
.os-dev::before{ content:""; width:6px; height:6px; border-radius:50%; box-shadow:inset 0 0 0 1.5px currentColor; }

/* ---------- 8. the two-lane read (SUPERSTAR: the same nine steps train a person and an AI agent) ----------
   the registered figure in a ds-island, nine ds-read chips (aria-pressed), and one read in two lanes */
.os-dual{ display:grid; gap:12px; }
@media (min-width:768px){ .os-dual{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } }
.os-lane{ display:grid; gap:8px; align-content:start; padding:18px 20px; border-radius:var(--radius-card); background:var(--os-raised); min-height:132px; }
.os-lane__k{ display:inline-flex; align-items:center; gap:8px; font:500 11px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.os-lane__k::before{ content:""; width:8px; height:8px; border-radius:50%; }
.os-lane--person .os-lane__k::before{ background:var(--gold); } .os-lane--agent .os-lane__k::before{ background:var(--cyan); }
.os-lane__t{ font:600 18px/1.3 var(--font-sans); }
.os-lane__p{ font:400 15px/1.5 var(--font-sans); color:var(--ink-muted); }
.os-steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
@media (min-width:768px){ .os-steps{ grid-template-columns:repeat(9, minmax(0,1fr)); } }
.os-steps .ds-read{ padding:0 8px; justify-content:center; display:inline-flex; align-items:center; gap:6px; font-size:14px; }
.os-steps .ds-read b{ font:500 11px/1 var(--font-mono); color:var(--ink-muted); }
.os-steps .ds-read[aria-pressed="true"] b{ color:inherit; }

/* ---------- 9. enterprise (license): who licenses, what is delivered, the real figures, the talk form ---------- */
.os-who{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); list-style:none; }
.os-who__i{ display:grid; gap:12px; align-content:start; padding:22px; border-radius:var(--radius-card); background:var(--os-panel); box-shadow:inset 0 0 0 1px var(--elev-4); }
.os-who__i .ac-ico, .os-who__i .os-ico{ width:24px; height:24px; color:var(--os-cyan-text); }
.os-who__t{ font:600 18px/1.3 var(--font-sans); }
.os-who__p{ font:400 15px/1.5 var(--font-sans); color:var(--ink-muted); }
.os-ico{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* what is delivered: a checklist beside the stacked sample deliverable */
.os-deliver{ display:grid; gap:clamp(32px, 5vw, 72px); align-items:center; }
@media (min-width:1024px){ .os-deliver{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } }
.os-list{ display:grid; gap:12px; list-style:none; }
.os-list li{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:baseline; font:400 16px/1.5 var(--font-sans); }
.os-list li::before{ content:""; width:14px; height:8px; border-inline-start:2px solid var(--cyan); border-bottom:2px solid var(--cyan); rotate:-45deg; translate:2px -3px; }
[dir="rtl"] .os-list li::before{ rotate:45deg; }
.os-list b{ font-weight:600; }
/* the talk form: copy + what happens next on the anchor side, the K17 form on an elev-1 card (never glass) */
.os-talk{ display:grid; gap:clamp(28px, 4vw, 64px); align-items:start; padding:clamp(24px, 5vw, 64px) clamp(18px, 5vw, 64px); }
@media (min-width:1024px){ .os-talk{ grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); } }
.os-talk__form{ padding:clamp(20px, 3vw, 32px); border-radius:var(--radius-card); background:var(--os-panel); box-shadow:inset 0 0 0 1px var(--elev-4); color:var(--white); }
.os-next{ display:grid; gap:0; list-style:none; counter-reset:osx; margin-top:8px; }
.os-next li{ counter-increment:osx; display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; padding:12px 0; box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--white) 14%, transparent); font:400 15px/1.5 var(--font-sans); }
.os-next li::before{ content:counter(osx, decimal-leading-zero); font:500 12px/1.9 var(--font-mono); color:var(--on-duo-muted); font-variant-numeric:tabular-nums; }

/* ---------- 10. reduced motion, RTL, print ---------- */
@media (prefers-reduced-motion:reduce){ .os-doc--tilt, .os-stack > .os-doc + .os-doc{ rotate:none; } }
@media print{ .os-command{ background:var(--black) !important; } .os-command::before{ display:none; } }

/* ---------- 11. ds-shared ---------- */
/* ==== ds-shared:begin · the design-system uplift (ds-audit U1-U9, ADOPT/ADAPT moves) · IDENTICAL in assets/pg-academy.css
   and assets/pg-os.css. Source: .research/reset/r2/ds-shared.css; inject with python3 -I .research/reset/r2/ds_inject.py.
   Mode-neutral: every colour is a mode token (resolved by main[data-mode]) or an --ip-* token, so one block serves the
   light Academy and the dark RIVET OS group. Geometry is never redrawn: marks come from assets/ip/** renders; the
   RivetShape glyphs below are the authored paths with only the viewBox cropped to their bounds (data URIs).
   Kit lane: lift this block into kit.css when convenient (request in r2/foundation.md). ==== */

:where(main.ac, main.os){
  --ds-pill:999px;
  --ds-press:.97;
  --ds-skel-base:color-mix(in srgb, var(--silver) 35%, var(--white));
  --ds-skel-hi:var(--ghost-white);
  --ds-ring-track:color-mix(in srgb, var(--ink) 10%, transparent);
  --ds-ip:var(--purple);                 /* IP strokes: purple on light, cyan on dark (ip.css --ip-primary) */
  --ds-ip-soft:color-mix(in srgb, var(--purple) 10%, transparent);
  --ds-level-at:var(--ui-primary);       /* the current agent level: product primary; magenta only as the screen's insight */
  --ds-dots:color-mix(in srgb, var(--purple) 16%, transparent);
}
:where(main.ac, main.os):where([data-mode="dark"]), :where(main.ac, main.os) :where([data-mode="dark"]){
  --ds-skel-base:var(--elev-2);
  --ds-skel-hi:var(--elev-4);
  --ds-ip:var(--cyan);
  --ds-ip-soft:color-mix(in srgb, var(--cyan) 10%, transparent);
  --ds-dots:color-mix(in srgb, var(--white) 14%, transparent);
}
:where(main.ac, main.os):where([data-mode="light"]), :where(main.ac, main.os) :where([data-mode="light"]){
  --ds-skel-base:color-mix(in srgb, var(--silver) 35%, var(--white));
  --ds-skel-hi:var(--ghost-white);
  --ds-ip:var(--purple);
  --ds-ip-soft:color-mix(in srgb, var(--purple) 10%, transparent);
  --ds-dots:color-mix(in srgb, var(--purple) 16%, transparent);
}
:where(main.ac, main.os) .k-btn:active{ scale:var(--ds-press); }   /* M4 press, dur-instant via the kit transition */

/* ---- U1 · an IP mark in front of an eyebrow (ModelMark, agent level, the authored mark icon), mono, 20px ---- */
.ds-eyemark{ display:inline-flex; align-items:center; gap:10px; }
.ds-eyemark__i{ flex:none; display:inline-grid; place-items:center; width:20px; height:20px; color:var(--ds-ip); }
.ds-eyemark__i :is(svg, img){ width:20px; height:20px; display:block; overflow:visible; --ip-primary:currentColor; --ip-insight:currentColor; }

/* ---- U3 · the eight ModelMarks as one row (assets/ip/models/*.svg pasted inline, without xmlns) ----
   Mono at rest (every mark's own magenta element on --ip-primary); the one being read (hover, focus, .is-on,
   aria-pressed/aria-current) takes magenta: the screen's one insight. 4 x 2 on desktop, 2 x 4 on phones. */
.ds-models{ --ip-primary:var(--ds-ip); --ip-insight:var(--ds-ip); display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); margin:0; padding:0; list-style:none; }
@media (min-width:768px){ .ds-models{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; } }
.ds-models--row{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (min-width:1024px){ .ds-models--row{ grid-template-columns:repeat(8, minmax(0,1fr)); } }
.ds-models > li{ display:grid; }
.ds-model{ position:relative; width:100%; display:grid; grid-template-columns:40px minmax(0,1fr); gap:4px 14px; align-items:center; min-height:76px; padding:14px 16px;
  border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); color:var(--ink); text-align:start; font:inherit;
  border:0; text-decoration:none; cursor:default; transition:box-shadow var(--dur-instant) var(--ease-standard), translate var(--dur-instant) var(--ease-standard); }
:is(a, button).ds-model{ cursor:pointer; }
.ds-model svg{ grid-row:span 2; width:40px; height:40px; display:block; overflow:visible; }
.ds-model__n{ font:600 15px/1.25 var(--font-sans); letter-spacing:-0.005em; }
.ds-model__j{ font:400 13px/1.35 var(--font-sans); color:var(--ink-muted); }
.ds-models--row .ds-model{ grid-template-columns:1fr; justify-items:start; gap:10px; min-height:0; padding:16px; }
.ds-models--row .ds-model svg{ grid-row:auto; }
.ds-model:is(:hover, :focus-visible, .is-on, [aria-pressed="true"], [aria-current]){ --ip-insight:var(--magenta); }
:is(a, button).ds-model:hover{ box-shadow:var(--card-lift-hover); translate:0 -2px; }
:not(:root)[data-mode="dark"] .ds-model{ box-shadow:none; }
:not(:root)[data-mode="dark"] .k-sec--alt .ds-model{ background:var(--elev-2); }
.ds-models--quiet .ds-model{ background:none; box-shadow:none; padding-inline:0; }

/* ---- agent level mark (presets C1/C2 geometry: five arcs over a base line, lit up to the level; dashed = not built)
   Paste the snippet from r2/foundation.md 6; recolour only. Levels: Manual, Assisted, Orchestrated, Agentic, Autonomous ---- */
.ds-level{ display:inline-grid; grid-template-columns:auto minmax(0,1fr); justify-content:start; justify-self:start; align-items:center; gap:12px; color:var(--ink); }
.ds-level svg{ width:var(--ds-level-w, 56px); height:auto; overflow:visible; display:block; }
.ds-level__base{ stroke:var(--ink-muted); stroke-width:.7; opacity:.5; }
.ds-level__arc{ fill:none; stroke:var(--ink-muted); stroke-width:1.1; stroke-linecap:round; opacity:.22; }
.ds-level__arc.is-lit{ stroke:currentColor; opacity:1; }
.ds-level__arc.is-at{ stroke:var(--ds-level-at); stroke-width:1.3; opacity:1; }
.ds-level--insight .ds-level__arc.is-at{ stroke:var(--magenta); }
.ds-level--planned .ds-level__arc{ stroke-dasharray:1.6 1.6; }
.ds-level--planned .ds-level__arc.is-lit{ stroke:var(--ink-muted); }
.ds-level__dot{ fill:currentColor; }
.ds-level--planned .ds-level__dot{ fill:var(--ink-muted); }
.ds-level__t{ display:grid; gap:2px; }
.ds-level__t b{ font:600 15px/1.2 var(--font-sans); }
.ds-level__t small{ font:500 11px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }

/* ---- U4 · RivetShape glyphs as the structural layer (founder glyphs; token colours only; never magenta, never over
   photos or data; aria-hidden). One shape per section at most. ---- */
.ds-shape{ display:inline-block; flex:none; background:currentColor; -webkit-mask:var(--ds-shape) center / contain no-repeat; mask:var(--ds-shape) center / contain no-repeat;
  height:var(--ds-shape-h, 48px); aspect-ratio:var(--ds-shape-r, 1); }
.ds-shape--divider{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='149.3 542.6 1367.1 656.2'%3E%3Cpath d='M149.34,823.36h468.46s17.83,0,17.83,0h17.43c73.63-4.48,131.94-65.61,131.94-140.37v-134.35c.04-3.07.02-5.14,0-6.04,99.19,0,275.45,0,374.9,0h.52s355.99,0,355.99,0v375.39h-468.46s-17.83,0-17.83,0h-17.43c-73.63,4.48-131.94,65.61-131.94,140.37v134.35c-.04,3.07-.02,5.14,0,6.04-99.19,0-275.45,0-374.9,0h-.52s-355.99,0-355.99,0v-375.39h0Z'/%3E%3C/svg%3E"); --ds-shape-r:2.0834; }
.ds-shape--ribbon{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='149.5 460.1 1316.3 766.8'%3E%3Cpath d='M1294.14,911.17h171.64v-180.73h-242.51c-35.45-2.16-63.52-31.59-63.52-67.58v-64.68c-.02-1.48,0-2.47,0-2.91h-352.13s0,0,0,0h-242.51c-35.45-2.16-63.52-31.59-63.52-67.58v-64.68c-.02-1.48,0-2.47,0-2.91H149.46v180.73h242.51c35.45,2.16,63.52,31.59,63.52,67.58v64.68c.01,1.28.01,2.2,0,2.7H149.46v180.73h242.51c35.45,2.16,63.52,31.59,63.52,67.58v64.68c.02,1.48,0,2.47,0,2.91h352.13s0,0,0,0h242.51c35.45,2.16,63.52,31.59,63.52,67.58v64.68c.02,1.48,0,2.47,0,2.91h352.13v-180.73h-242.51c-35.45-2.16-63.52-31.59-63.52-67.58v-64.68c-.01-1.28-.01-2.2,0-2.7h134.4ZM979.26,910.96h-171.64s0,0,0,0h-242.51c-35.45-2.16-63.52-31.59-63.52-67.58v-64.68c-.01-1.28-.01-2.2,0-2.7h306.03s0,0,0,0h242.51c35.45,2.16,63.52,31.59,63.52,67.58v64.68c.01,1.28.01,2.2,0,2.7h-134.4Z'/%3E%3C/svg%3E"); --ds-shape-r:1.7166; }
.ds-shape--ribbon-2{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='106.4 462.2 1402.4 816.9'%3E%3Cpath d='M1325.96,942.8h182.87v-192.55h-258.37c-37.77-2.3-67.68-33.66-67.68-72v-68.91c-.02-1.57,0-2.64,0-3.1h-375.16s0,0,0,0h-258.37c-37.77-2.3-67.68-33.66-67.68-72v-68.91c-.02-1.57,0-2.64,0-3.1H106.41v192.54h258.37c37.77,2.3,67.68,33.66,67.68,72v68.91c.02,1.36.01,2.3,0,2.84H106.41v192.55h258.37c37.77,2.3,67.68,33.66,67.68,72v68.91c.02,1.57,0,2.64,0,3.1h375.16s0,0,0,0h258.37c37.77,2.3,67.68,33.66,67.68,72v68.91c.02,1.57,0,2.63,0,3.1h375.16v-192.55h-258.37c-37.77-2.3-67.68-33.66-67.68-72v-68.91c-.02-1.36-.01-2.3,0-2.84h143.18Z'/%3E%3C/svg%3E"); --ds-shape-r:1.7167; }
.ds-shape--frame{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='338.8 128.4 977.4 1484.5'%3E%3Cpath d='M1311.67,601.87h-100.06c-55.68,0-101.21-43.43-104.55-98.27V128.43h0s-279.59,0-279.59,0h-279.59v375.17c-3.34,54.84-48.87,98.27-104.55,98.27h-100.06c-2.29.03-3.83.01-4.5,0v537.6c.67-.01,2.21-.02,4.5,0h100.06c55.68,0,101.21,43.43,104.55,98.27v375.17h0s279.59,0,279.59,0h279.59v-375.17c3.34-54.84,48.87-98.27,104.55-98.27h100.06c2.29-.03,3.83-.01,4.5,0v-537.6c-.67.01-2.21.02-4.5,0ZM827.47,1347.39l-477.86-476.71,477.86-476.71,477.86,476.71-477.86,476.71Z'/%3E%3C/svg%3E"); --ds-shape-r:0.6584; }
.ds-shape--ascend{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='494.0 325.9 627.3 970.7'%3E%3Cpath d='M1016.7,823.23h-104.56v-138.45c-3.34-54.84-48.87-98.27-104.55-98.27h-104.5v-162.3c-3.34-54.84-48.87-98.27-104.55-98.27h-104.56v473.44h209.05v260.57h209.11v236.72h209.11v-375.17c-3.34-54.84-48.87-98.27-104.55-98.27Z'/%3E%3C/svg%3E"); --ds-shape-r:0.6462; }
.ds-shape--origin{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='563.3 466.9 488.7 753.1'%3E%3Cpath d='M563.27,954.47v265.53h279.59v-375.17c3.34-54.84,48.87-98.27,104.55-98.27h100.06c2.29-.03,3.83-.01,4.5,0v-279.62l-488.7,487.53Z'/%3E%3C/svg%3E"); --ds-shape-r:0.6489; }
.ds-shape--banner{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='370.6 203.7 874.1 1333.9'%3E%3Cpath d='M994.62,203.7h0v335.51c-2.99,49.04-43.7,87.88-93.5,87.88h-89.48c-2.04.02-3.42.01-4.02,0h0s-250.03-.01-250.03-.01h0v335.51c-2.99,49.04-43.7,87.88-93.5,87.88h-89.48c-2.04.02-3.42.01-4.02,0v487.18h250.03v-335.51c2.99-49.04,43.7-87.88,93.5-87.88h89.48c2.04-.02,3.42-.01,4.02,0h0s250.03.01,250.03.01h0v-335.51c2.99-49.04,43.7-87.88,93.5-87.88h89.48c2.04-.02,3.42-.01,4.02,0V203.7h-250.03Z'/%3E%3C/svg%3E"); --ds-shape-r:0.6553; }
.ds-shape--mass{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='461.2 148.9 692.8 1443.5'%3E%3Cpath d='M1150.84,484.52h-70.93c-39.47,0-71.74-30.79-74.11-69.66V148.92h0s-198.19,0-198.19,0h-198.19v265.94c-2.37,38.87-34.64,69.66-74.11,69.66h-70.93c-1.62.02-2.71,0-3.19,0v772.3c.48,0,1.57-.02,3.19,0h70.93c39.47,0,71.74,30.79,74.11,69.66v265.94h0s198.19,0,198.19,0h198.19v-265.94c2.37-38.87,34.64-69.66,74.11-69.66h70.93c1.62-.02,2.71,0,3.19,0V484.52c-.48,0-1.57.02-3.19,0Z'/%3E%3C/svg%3E"); --ds-shape-r:0.4799; }
.ds-shape--needle{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='461.2 148.9 692.8 1443.5'%3E%3Cpath d='M1150.84,484.52h-70.93c-39.47,0-71.74-30.79-74.11-69.66V148.92h0s-198.19,0-198.19,0h-198.19v265.94c-2.37,38.87-34.64,69.66-74.11,69.66h-70.93c-1.62.02-2.71,0-3.19,0v772.3c.48,0,1.57-.02,3.19,0h70.93c39.47,0,71.74,30.79,74.11,69.66v265.94h0s198.19,0,198.19,0h198.19v-265.94c2.37-38.87,34.64-69.66,74.11-69.66h70.93c1.62-.02,2.71,0,3.19,0V484.52c-.48,0-1.57.02-3.19,0ZM955.85,870.67v265.94c-2.37,38.87-34.64,69.66-74.11,69.66h-70.93c-1.62.02-2.71,0-3.19,0-.48,0-1.57.02-3.19,0h-70.93c-39.47,0-71.74-30.79-74.11-69.66v-265.94h0v-265.94c2.37-38.87,34.64-69.66,74.11-69.66h70.93c1.62-.02,2.71,0,3.19,0,.48,0,1.57-.02,3.19,0h70.93c39.47,0,71.74,30.79,74.11,69.66v265.94h0Z'/%3E%3C/svg%3E"); --ds-shape-r:0.4799; }
/* ascend climbs toward the inline end (directional glyphs mirror, BRAND) */
:dir(ltr) .ds-shape--ascend, [dir="ltr"] .ds-shape--ascend{ scale:-1 1; }
/* chapter divider: a hairline with the divider glyph at its centre, between the chapters of a long page */
.ds-divider{ display:flex; align-items:center; gap:20px; color:var(--hairline); margin-block:clamp(8px, 2vw, 24px); }
.ds-divider::before, .ds-divider::after{ content:""; flex:1; height:1px; background:currentColor; }
.ds-divider .ds-shape{ --ds-shape-h:22px; color:var(--ink-muted); opacity:.55; }
/* section index on a ribbon: 01 · 02 … on K8 tabs, K9 rails, chapter heads */
.ds-index{ position:relative; display:inline-grid; place-items:center; width:64px; height:38px; flex:none; }
.ds-index .ds-shape{ position:absolute; inset:0; margin:auto; --ds-shape-h:38px; color:var(--ink); opacity:.1; }
.ds-index__n{ position:relative; font:500 13px/1 var(--font-mono); letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--ink); }
/* portrait in the frame window (K2 quote card, the founder letter): the glyph in --role-human, the photo inside its diamond */
.ds-frame{ position:relative; display:block; width:var(--ds-frame-w, 220px); aspect-ratio:0.6584; color:var(--role-human); }
.ds-frame > .ds-shape{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.ds-frame > img{ position:absolute; left:6%; width:88%; top:calc(50% - 44% * 0.6584); height:auto; aspect-ratio:1; object-fit:cover;
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background:var(--ground-alt); }
/* steps that climb (Starting out -> Stepping up -> Leading) */
.ds-climb{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px 28px; align-items:center; }
.ds-climb > .ds-shape{ --ds-shape-h:clamp(96px, 12vw, 160px); color:var(--role-structure); opacity:.9; }

/* ---- U9 / K13 · figure island: the engineering grid, the figure, a hand note, the earned read, "Now you know" ----
   <figure class="ds-island"> <div class="ds-island__canvas k-blueprint">figure</div> <p class="ds-hand">…</p>
   <figcaption class="ds-island__cap"><b>Now you know</b> …</figcaption> </figure> */
.ds-island{ position:relative; display:grid; gap:0; margin:0; border-radius:var(--radius-base); overflow:hidden; background:var(--card-surface); box-shadow:var(--card-lift); }
:not(:root)[data-mode="dark"] .ds-island{ background:var(--elev-1); box-shadow:inset 0 0 0 1px var(--elev-4); }
.ds-island__canvas{ position:relative; display:grid; place-items:center; padding:clamp(24px, 4vw, 56px) clamp(16px, 3vw, 48px); min-height:240px; }
.ds-island__canvas > :is(img, svg, picture){ display:block; width:100%; max-width:var(--ds-fig-max, 880px); height:auto; }
.ds-island--dots .ds-island__canvas, .ds-dots{ background-image:radial-gradient(circle at 1px 1px, var(--ds-dots) 1px, transparent 1.5px); background-size:var(--blueprint-size, 32px) var(--blueprint-size, 32px); }
.ds-island__body{ display:grid; gap:14px; padding:clamp(18px, 2.4vw, 28px) clamp(18px, 3vw, 36px) clamp(20px, 2.6vw, 32px); box-shadow:inset 0 1px 0 var(--hairline-soft); }
.ds-island__cap{ font:400 15px/1.55 var(--font-sans); color:var(--ink-muted); max-width:62ch; }
.ds-island__cap b{ display:block; margin-bottom:4px; font:500 11px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink); }
/* the earned read on a static figure: one line that appears on hover, focus or tap of the island */
.ds-island__read{ position:absolute; inset-inline:16px; bottom:16px; margin:0; padding:10px 14px; border-radius:var(--radius-button); background:var(--scrim-strong); color:var(--white);
  font:500 14px/1.4 var(--font-sans); opacity:0; translate:0 6px; transition:opacity var(--dur-quick) var(--ease-standard), translate var(--dur-quick) var(--ease-standard); pointer-events:none; }
.ds-island:is(:hover, :focus-within) .ds-island__read{ opacity:1; translate:0 0; }
@media (hover:none){ .ds-island__read{ position:static; margin:0 16px 16px; opacity:1; translate:none; } }
/* one Square Peg hand note per island (hand-ink: purple on light, gold on dark), aria-hidden, same words in the caption */
.ds-hand{ font:400 24px/1.05 var(--font-hand); color:var(--hand-ink); margin:0; }
.ds-island .ds-hand{ position:absolute; inset-inline-start:var(--x, auto); top:var(--y, auto); inset-inline-end:var(--xe, auto); bottom:var(--yb, auto); max-width:16ch; rotate:-3deg; pointer-events:none; }
:lang(ar) .ds-hand{ font-family:"Aref Ruqaa", var(--font-hand); font-size:22px; }
@media (max-width:767px){ .ds-hand{ font-size:20px; } .ds-island .ds-hand{ display:none; } }
/* chips that read one part of a figure (aria-pressed), and the read they write */
.ds-reads{ display:flex; flex-wrap:wrap; gap:8px; }
.ds-read{ min-height:44px; padding:0 16px; border:0; border-radius:var(--ds-pill); background:var(--ground-alt); color:var(--ink); font:500 14px/1 var(--font-sans); cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--hairline-soft); transition:background var(--dur-instant) var(--ease-standard), color var(--dur-instant) var(--ease-standard); }
.ds-read:hover{ box-shadow:inset 0 0 0 1px var(--ink-muted); }
.ds-read[aria-pressed="true"]{ background:var(--ink); color:var(--ground); box-shadow:none; }

/* ---- D6 · insight callout (counts as the screen's one insight: the magenta dot) ---- */
.ds-callout{ display:grid; grid-template-columns:12px minmax(0,1fr); gap:6px 12px; align-items:baseline; margin:0; }
.ds-callout::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--magenta); translate:0 1px; }
.ds-callout__s{ font:600 17px/1.4 var(--font-sans); color:var(--ink); }
.ds-callout__e{ grid-column:2; font:500 12px/1.4 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); font-variant-numeric:tabular-nums; }

/* ---- U2 · course locator (assets/ip/locators/<course>[-names|-dark].svg), 0 magenta ---- */
.ds-loc{ display:block; width:var(--ds-loc-w, 160px); height:auto; aspect-ratio:906 / 462; }
.ds-loc--s{ --ds-loc-w:96px; } .ds-loc--l{ --ds-loc-w:min(100%, 440px); }
.ds-locchip{ display:inline-flex; align-items:center; gap:10px; padding:6px 12px 6px 8px; border-radius:var(--ds-pill); background:var(--glass-tint, var(--card-surface));
  -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); box-shadow:var(--glass-rim, 0 0 0 1px var(--hairline-soft)); font:500 11px/1.2 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink); }
.ds-locchip .ds-loc{ --ds-loc-w:72px; }
.ds-locchip b{ font-weight:600; }

/* ---- E3 / D2 · progress ring: <svg class="ds-ring" viewBox="0 0 40 40" style="--v:67"><circle class="t" …/><circle class="v" …/></svg>
   circles: cx=20 cy=20 r=16 pathLength=100. Fills once in view where scroll timelines exist; the end state otherwise. ---- */
.ds-ring{ width:var(--ds-ring-w, 44px); height:var(--ds-ring-w, 44px); rotate:-90deg; display:block; flex:none; }
.ds-ring circle{ fill:none; stroke-width:4; }
.ds-ring .t{ stroke:var(--ds-ring-track); }
.ds-ring .v{ stroke:var(--ds-ring-ink, var(--ui-primary)); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--v, 0)); }
.ds-ring--outcome .v{ --ds-ring-ink:var(--zone-expansion); }
/* line draw-on for figures and sparklines: add pathLength="1" to the path */
.ds-draw{ stroke-dasharray:1; stroke-dashoffset:0; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .ds-ring .v{ animation:ds-ring linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; }
    .ds-draw{ animation:ds-draw linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; }
  }
}
@keyframes ds-ring{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:calc(100 - var(--v, 0)); } }
@keyframes ds-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* ---- D7 · skeleton while something fetches; static under reduced motion ---- */
.ds-skel{ display:block; min-height:1em; border-radius:6px; background:var(--ds-skel-base); }
@media (prefers-reduced-motion:no-preference){ .ds-skel{ animation:ds-skel 1.2s var(--ease-standard) infinite alternate; } }
@keyframes ds-skel{ from{ background:var(--ds-skel-base); } to{ background:var(--ds-skel-hi); } }
/* ==== ds-shared:end ==== */

/* ---- sub-pages cut from the OS page (/the-8-models, /infinite-pipeline; 9 Nov 2026) ---- */
.os-subhead{ padding-block:calc(var(--hdr-h, 64px) + 40px) 24px; }
.os-subhead .k-wrap{ display:grid; gap:14px; }
.os-crumbs{ font:500 14px/1.4 var(--font-sans); color:var(--ink-muted); }
.os-crumbs a{ color:var(--ink-muted); text-decoration:none; }
.os-crumbs a:hover{ color:var(--ink); text-decoration:underline; }
.os-crumbs [aria-current]{ color:var(--ink); }
.os-subhead .t-hero{ margin:0; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:-.02em; max-inline-size:20ch; }
.os-subhead .t-lead{ margin:0; max-inline-size:62ch; }
.os-next{ padding-block:24px 0; }
.os-next__list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.os-next__a{ display:grid; gap:6px; block-size:100%; padding:24px; border-radius:var(--radius-card, 12px); background:var(--elev-1, #0A0A0C);
  color:var(--ink); text-decoration:none; transition:background-color var(--dur-instant, 120ms) var(--ease-standard, ease); }
.os-next__a:hover{ background:var(--elev-2, #12121A); }
.os-next__a:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.os-next__a b{ font:600 20px/1.2 var(--font-sans); }
.os-next__a span{ font:400 16px/1.6 var(--font-sans); color:var(--ink-muted); }
:lang(ar) .os-subhead .t-hero{ text-transform:none; letter-spacing:0; }