/* Clarity & Grace page (/clarity-and-grace). Every rule is scoped to .cg or a cg- class, so nothing
   here touches the shell. Layout follows the page's own width (container cg), not the viewport,
   because the page sits in the shell's centre column. extra.js sets --cg-top (the sticky header's
   height) and --cg-bleed-l/-r (room to the column's edges) on .cg. */

.cg {
  --paper: #F7F3EB; --card: #FFFDF9; --ink: #1E1B16; --ink-soft: #4F493F; --muted: #8A8377; --quiet: #6F685D;
  --line: rgba(30,27,22,.14); --line-soft: rgba(30,27,22,.08); --bar: rgba(30,27,22,.10);
  --violet: oklch(.56 .18 292); --violet-d: oklch(.46 .18 292); --violet-t: oklch(.95 .035 292); --violet-h: oklch(.46 .18 292);
  --coral: oklch(.67 .18 30); --coral-ink: oklch(.50 .15 30); --coral-t: oklch(.95 .045 34);
  --amber: oklch(.84 .14 82); --amber-ink: oklch(.50 .10 82); --amber-t: oklch(.96 .05 84);
  --green: oklch(.70 .14 158); --green-ink: oklch(.42 .11 158); --green-t: oklch(.95 .04 158);
  --sky: oklch(.74 .12 232); --sky-ink: oklch(.44 .10 232); --sky-t: oklch(.96 .035 232);
  --term-bg: #26221B; --term-ink: #EFE9DD; --term-dim: #A79E8D;
  --on-accent: #fff; --on-ink-dim: #A79E8D;
  --shadow-card: 0 12px 30px rgba(30,27,22,.06); --shadow-pop: 0 24px 60px -18px rgba(30,27,22,.22);
  --glow: 0 40px 90px -40px oklch(.56 .18 292 / .45);
  --r-lg: 22px; --r-md: 16px; --r-sm: 10px; --r-pill: 999px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", Cambria, Georgia, serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  --colgap: 56px; --cg-top: 67px; --cg-bleed-l: 16px; --cg-bleed-r: 16px; /* --cg-top: the shell header's height until extra.js measures it */
  container: cg / inline-size; position: relative;
  color: var(--ink); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
@media (max-width: 860px) { .cg { --cg-top: 111px; } } /* the shell's two-row header on phones */
@media screen and (prefers-color-scheme: dark) { /* paper is light: print keeps the light tokens */
  .cg {
    --paper: #191612; --card: #221E18; --ink: #EFE9DD; --ink-soft: #C9C1B2; --muted: #958D7E; --quiet: #A39B8C;
    --line: rgba(239,233,221,.16); --line-soft: rgba(239,233,221,.08); --bar: rgba(239,233,221,.12);
    --violet: oklch(.72 .15 292); --violet-d: oklch(.78 .13 292); --violet-t: oklch(.32 .06 292); --violet-h: oklch(.66 .16 292);
    --coral-ink: oklch(.76 .13 30); --coral-t: oklch(.32 .06 30);
    --amber-ink: oklch(.82 .11 82); --amber-t: oklch(.31 .05 82);
    --green-ink: oklch(.78 .11 158); --green-t: oklch(.30 .05 158);
    --sky-ink: oklch(.78 .10 232); --sky-t: oklch(.30 .05 232);
    --term-bg: #12100D; --on-accent: #1E1A14; --on-ink-dim: #6B6457;
    --shadow-card: 0 12px 30px rgba(0,0,0,.25); --shadow-pop: 0 24px 60px -18px rgba(0,0,0,.6);
    --glow: 0 40px 90px -40px oklch(.6 .16 292 / .35);
  }
}

/* The page heading comes from the shell; on this page it takes the hero's serif. */
main:has(> #cg) > h1 { font-family: Charter, "Bitstream Charter", "Iowan Old Style", Cambria, Georgia, serif; font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.06; letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; margin: 14px 0 20px; }

/* Base, inside the page only */
.cg *, .cg *::before, .cg *::after { box-sizing: border-box; }
.cg h2, .cg h3 { font-family: var(--serif); font-weight: 700; margin: 0; text-wrap: balance; color: var(--ink); }
.cg h2 { font-size: clamp(1.6rem, 1.15rem + 1.6cqi, 2.3rem); line-height: 1.12; letter-spacing: -.01em; }
.cg h3 { font-size: 1.15rem; line-height: 1.3; }
/* Element resets carry no class weight (:where), so the page's class rules always win over them. */
:where(.cg) p { margin: 0; text-wrap: pretty; }
:where(.cg) ol, :where(.cg) ul { margin: 0; padding: 0; }
:where(.cg) figure { margin: 0; }
:where(.cg) button { font: inherit; color: inherit; }
.cg a { color: var(--violet-d); text-decoration: none; }
.cg a:hover { text-decoration: underline; }
.cg em { font-style: normal; color: var(--ink); font-weight: 600; }
.cg :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.cg-nw { white-space: nowrap; }
.cg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared vocabulary (skillfed) */
.cg-kicker { font: 400 10.5px/1.5 var(--mono); letter-spacing: .16em; color: var(--quiet); margin-bottom: 10px; }
.cg-kicker::before { content: "\2014"; color: var(--violet); }
.cg-lede { font-size: 1.1rem; line-height: 1.55; color: var(--ink-soft); }
.cg-pill { display: inline-block; font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.cg-pill.cg-v { background: var(--violet-t); color: var(--violet-d); } .cg-pill.cg-a { background: var(--amber-t); color: var(--amber-ink); }
.cg-pill.cg-g { background: var(--green-t); color: var(--green-ink); } .cg-pill.cg-c { background: var(--coral-t); color: var(--coral-ink); }
.cg-pill.cg-s { background: var(--sky-t); color: var(--sky-ink); } .cg-pill.cg-k { background: var(--ink); color: var(--paper); }
.cg-tag { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1 var(--mono); padding: 5px 9px; border-radius: 6px; white-space: nowrap; background: var(--green-t); color: var(--green-ink); }
.cg-tag.cg-c { background: var(--coral-t); color: var(--coral-ink); }
.cg-tag.cg-n { background: var(--paper); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
.cg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font: 650 14px/1 var(--sans); background: var(--violet); color: var(--on-accent); padding: 0 20px; border-radius: var(--r-pill); border: 0; cursor: pointer; transition: background .15s, border-color .15s, color .15s; text-decoration: none; white-space: nowrap; }
.cg a.cg-btn { color: var(--on-accent); }
.cg-btn:hover, .cg a.cg-btn:hover { background: var(--violet-h); text-decoration: none; }
.cg-btn.cg-ghost, .cg a.cg-btn.cg-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.cg-btn.cg-ghost:hover { border-color: var(--ink-soft); }
.cg-term { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; font: 600 13.5px/1 var(--mono); background: var(--term-bg); color: var(--term-ink); padding: 0 8px 0 16px; border: 0; border-radius: var(--r-sm); cursor: pointer; text-align: left; transition: box-shadow .2s; }
.cg-term .cg-pr { color: oklch(.72 .15 292); font-weight: 700; }
.cg-term .cg-cmd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cg-term .cg-cp { flex: none; width: 60px; text-align: center; font: 600 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--term-dim); padding: 7px 6px; border-radius: 7px; background: rgba(239,233,221,.08); transition: background .15s, color .15s; }
.cg-term:hover .cg-cp { background: rgba(239,233,221,.16); color: var(--term-ink); }
.cg-term.cg-done { box-shadow: 0 0 0 2px var(--green); }
.cg-term.cg-done .cg-cp { background: oklch(.42 .11 158); color: #fff; }
.cg-nojs .cg-term { cursor: text; -webkit-user-select: text; user-select: text; } /* no script, no copying: the command is there to select */
.cg-nojs .cg-term .cg-cp { display: none; }
.cg-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }

/* Hero: the copy and the window side by side when there is room, stacked in the shell's column */
.cg-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--colgap); align-items: center; padding-top: 4px; }
.cg-hero-copy > * + * { margin-top: 20px; }
.cg-hero-copy .cg-kicker { margin-bottom: 0; }
.cg-hero .cg-lede { max-width: 34rem; }
.cg-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cg-hero .cg-cta { flex-direction: column; align-items: stretch; width: max-content; max-width: 100%; }
.cg-by { font-size: 13px; color: var(--quiet); }
.cg-by b { color: var(--ink-soft); font-weight: 600; }
.cg-rise { animation: cg-rise .6s var(--ease) both; }
.cg-rise.cg-d2 { animation-delay: .2s; }
@keyframes cg-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Hero window: one round of the skill, on a single clock */
.cg-hero-art { container: win / inline-size; }
.cg-win { position: relative; background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: var(--shadow-pop), var(--glow); overflow: hidden; }
.cg-winbar { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px 8px 14px; border-bottom: 1px solid var(--line-soft); font: 400 12px/1.2 var(--mono); color: var(--muted); }
.cg-winbar .cg-dots { display: inline-flex; gap: 6px; flex: none; }
.cg-winbar .cg-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.cg-winbar .cg-fname { flex: 1 1 auto; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cg-winbar .cg-tag { order: 3; transition: box-shadow .3s; }
.cg-winbar .cg-tag.cg-hot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 35%, transparent); }
.cg-pp { order: 4; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; padding: 0; }
.cg-pp[hidden] { display: none; }
.cg-pp svg { width: 12px; height: 12px; fill: currentColor; }
.cg-pp .cg-i-play, .cg-pp[aria-pressed="true"] .cg-i-pause { display: none; }
.cg-pp[aria-pressed="true"] .cg-i-play { display: block; }
.cg-pp:hover { border-color: var(--ink-soft); }
.cg-winbody { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); transition: opacity .45s var(--ease); }
.cg-winbody.cg-hide { opacity: 0; }
.cg-winbody.cg-snap * { transition: none !important; }
.cg .cg-doc[hidden], .cg .cg-winfoot[hidden] { display: flex; } /* hidden only in the bare, unstyled render */
.cg-doc { display: flex; flex-direction: column; padding: 20px 22px 16px; border-right: 1px solid var(--line-soft); min-width: 0; }
.cg-doc-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.cg-doc-h b { font: 700 1.08rem/1 var(--serif); }
.cg-wc { font: 500 11.5px/1 var(--mono); color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line-soft); border-radius: 6px; padding: 6px 8px; white-space: nowrap; }
.cg-wc em { font-weight: 700; color: var(--green-ink); font-variant-numeric: tabular-nums; display: inline-block; min-width: 3ch; text-align: right; }
.cg-docbody { height: 304px; overflow: hidden; }
.cg-lr { position: relative; height: 8px; margin-bottom: 12px; padding-right: 30px; transition: height .5s var(--ease), margin .5s var(--ease), opacity .35s; }
.cg-lr .cg-ln { position: relative; display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--bar); overflow: hidden; transition: width .6s var(--ease), background .4s; }
.cg-lr .cg-ln::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--violet); opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform .3s linear, opacity .4s; }
.cg-lr.cg-rd .cg-ln::after { opacity: .28; transform: scaleX(1); }
.cg-lr.cg-hab .cg-ln { background: color-mix(in srgb, var(--coral) 24%, transparent); }
.cg-lr.cg-marked .cg-ln { background: color-mix(in srgb, var(--coral) 42%, transparent); }
.cg-lr.cg-marked.cg-fixed .cg-ln { background: color-mix(in srgb, var(--green) 40%, transparent); }
.cg-lr .cg-mk { position: absolute; right: 0; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--mono); background: var(--coral-t); color: var(--coral-ink); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s var(--ease), background .3s, color .3s; }
.cg-lr.cg-marked .cg-mk { opacity: 1; transform: none; }
.cg-lr.cg-fixed .cg-mk { background: var(--green-t); color: var(--green-ink); }
.cg-lr.cg-cut { height: 0; margin-bottom: 0; opacity: 0; }
.cg-lr.cg-trim .cg-ln { width: var(--w2); }
/* Line lengths of the mock abstract: full, then trimmed where the writer cut words */
.cg-lr:nth-child(1) { --w: 96%; --w2: 82%; } .cg-lr:nth-child(2) { --w: 100%; } .cg-lr:nth-child(3) { --w: 91%; }
.cg-lr:nth-child(4) { --w: 98%; --w2: 84%; } .cg-lr:nth-child(5) { --w: 88%; } .cg-lr:nth-child(6) { --w: 100%; }
.cg-lr:nth-child(7) { --w: 94%; } .cg-lr:nth-child(8) { --w: 97%; } .cg-lr:nth-child(9) { --w: 93%; }
.cg-lr:nth-child(10) { --w: 99%; --w2: 88%; } .cg-lr:nth-child(11) { --w: 90%; } .cg-lr:nth-child(12) { --w: 61%; --w2: 38%; }
.cg-minifig { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-top: 14px; }
.cg-mf-slot { flex: none; width: 118px; height: 46px; display: flex; align-items: flex-end; } /* the grown figure's footprint, reserved so nothing reflows */
.cg-mf-box { flex: none; display: flex; align-items: flex-end; gap: 3px; width: 64px; height: 26px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); transition: width .6s var(--ease), height .6s var(--ease), border-color .3s, box-shadow .3s; }
.cg-mf-box i { flex: 1; height: var(--h); border-radius: 1.5px 1.5px 0 0; background: color-mix(in srgb, var(--violet) 50%, transparent); }
.cg-mf-box i:nth-child(1) { --h: 45%; } .cg-mf-box i:nth-child(2) { --h: 72%; } .cg-mf-box i:nth-child(3) { --h: 58%; }
.cg-mf-box i:nth-child(4) { --h: 88%; } .cg-mf-box i:nth-child(5) { --h: 34%; }
.cg-minifig[data-s="caught"] .cg-mf-box { border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 22%, transparent); }
.cg-minifig[data-s="ok"] .cg-mf-box { width: 118px; height: 46px; border-color: var(--green); }
.cg-mf-meta { display: grid; gap: 4px; min-width: 0; }
.cg-mf-cap { font: 500 10px/1.2 var(--mono); color: var(--quiet); }
.cg-mf-tags { display: inline-grid; }
/* Chips that replace each other swap in turn (out quickly, then in), so two texts never overprint. */
.cg-mf-tags .cg-tag, .cg-slot .cg-tag { grid-area: 1 / 1; justify-self: start; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.cg-minifig[data-s="caught"] .cg-t-c, .cg-minifig[data-s="ok"] .cg-t-g { opacity: 1; transform: none; transition: opacity .25s .14s, transform .3s var(--ease) .14s; }
.cg-doc-f { display: grid; gap: 8px; padding-top: 12px; margin-top: auto; border-top: 1px dashed var(--line); }
.cg-doc-f p { font: 400 10.5px/1.45 var(--mono); color: var(--quiet); }
.cg-slot { display: inline-grid; min-height: 21px; }
.cg-slot[data-s="b"] .cg-s-b, .cg-slot[data-s="j0"] .cg-s-j0, .cg-slot[data-s="j1"] .cg-s-j1, .cg-slot[data-s="j2"] .cg-s-j2, .cg-slot[data-s="a"] .cg-s-a { opacity: 1; transform: none; transition: opacity .25s .14s, transform .3s var(--ease) .14s; }
.cg-team { container: team / inline-size; padding: 18px 16px 14px; background: color-mix(in srgb, var(--paper) 70%, var(--card)); min-width: 0; }
.cg-team-k { font: 400 10.5px/1.4 var(--mono); letter-spacing: .14em; color: var(--quiet); margin-bottom: 10px; }
.cg-rows { list-style: none; display: grid; gap: 4px; }
.cg-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "pill st" "txt txt"; gap: 4px 8px; align-items: center; padding: 6px 10px 7px; border-radius: 10px; border: 1px solid transparent; transition: background .35s, border-color .35s, opacity .35s; }
.cg-row .cg-pill { grid-area: pill; justify-self: start; }
.cg-row p { grid-area: txt; font-size: 12.5px; line-height: 1.38; color: var(--ink-soft); }
.cg-row .cg-stt { grid-area: st; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--mono); }
.cg-row[data-state="wait"] { opacity: .42; }
.cg-row[data-state="wait"] .cg-stt { border: 1.5px dashed var(--line); }
.cg-row[data-state="run"] { background: var(--card); border-color: var(--line-soft); box-shadow: 0 6px 16px -10px rgba(30,27,22,.25); }
.cg-row[data-state="run"] .cg-stt { background: var(--violet); animation: cg-ping 1.2s ease-out infinite; }
.cg-row[data-state="done"] .cg-stt { background: var(--green-t); color: var(--green-ink); }
.cg-row[data-state="done"] .cg-stt::before { content: "\2713"; }
.cg-row .cg-ok, .cg-now .cg-ok { color: var(--green-ink); font-weight: 650; }
@keyframes cg-ping { 0% { box-shadow: 0 0 0 0 oklch(.56 .18 292 / .45); } 100% { box-shadow: 0 0 0 7px oklch(.56 .18 292 / 0); } }
@container team (min-width: 380px) {
  .cg-row { grid-template-columns: 78px minmax(0, 1fr) 18px; grid-template-areas: "pill txt st"; }
  .cg-row .cg-pill { justify-self: stretch; text-align: center; }
}
.cg-now { display: none; margin-top: 12px; min-height: 2.9em; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.cg-now.cg-swap { animation: cg-rise .4s var(--ease) both; }
.cg-winfoot { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line-soft); font: 400 10.5px/1.45 var(--mono); color: var(--quiet); }
.cg-winfoot .cg-you { color: var(--ink); }
/* The window's own width decides its phone layout: one pane, the team as a strip of pills. */
@container win (max-width: 560px) {
  .cg-winbar { flex-wrap: wrap; row-gap: 6px; }
  .cg-winbar .cg-dots { display: none; }
  .cg-winbar .cg-fname { flex: 1 0 calc(100% - 44px); } /* file name and pause on row one, the plan chip on row two */
  .cg-pp { order: 2; }
  .cg-winbar .cg-tag { order: 5; }
  .cg-winbody { grid-template-columns: minmax(0, 1fr); }
  .cg-doc { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 16px 16px 14px; }
  .cg-doc-h { margin-bottom: 14px; }
  .cg-docbody { height: 242px; }
  .cg-lr { height: 7px; margin-bottom: 8px; }
  .cg-team { padding: 14px 12px 12px; }
  .cg-team-k { display: none; }
  .cg-rows { display: flex; flex-wrap: nowrap; gap: 6px; }
  .cg-row { display: block; padding: 0; border: 0; background: none !important; box-shadow: none !important; }
  .cg-row p, .cg-row .cg-stt { display: none; }
  .cg-row .cg-pill { font-size: 9.5px; letter-spacing: .06em; padding: 6px 7px; transition: box-shadow .3s; }
  .cg-row[data-state="wait"] { opacity: .38; }
  .cg-row[data-state="run"] .cg-pill { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--violet); }
  .cg-now { display: block; }
}
@container win (max-width: 340px) {
  .cg-rows { gap: 4px; }
  .cg-row .cg-pill { font-size: 9px; letter-spacing: .02em; padding: 5px 5px; }
}
@container win (max-width: 260px) {
  .cg-team { padding-inline: 8px; }
  .cg-rows { gap: 3px; }
  .cg-row .cg-pill { padding: 5px 3px; letter-spacing: 0; }
}
/* A narrow two-pane window: the abstract's lines sit closer, so the figure and its caption stay inside the pane. */
@container win (min-width: 561px) and (max-width: 640px) {
  .cg-lr { margin-bottom: 9px; }
  .cg-minifig { margin-top: 10px; }
}

.cg-proof { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); gap: 10px 28px; margin-top: 56px; padding: 16px 22px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--shadow-card); font-size: 13.5px; color: var(--quiet); }
.cg-proof li { display: block; position: relative; padding-left: 16px; }
.cg-proof li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 2px; transform: rotate(45deg); background: var(--violet); opacity: .7; }
.cg-proof b { color: var(--ink-soft); font-weight: 600; }

/* Sections: one grid. Section heads share the three-card columns. An anchor lands the kicker just under the header. */
.cg-sec { --cg-secpad: 112px; margin: 0; padding-top: var(--cg-secpad); scroll-margin-top: calc(var(--cg-top) + 24px - var(--cg-secpad)); }
.cg-sechead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-items: end; margin-bottom: 40px; }
.cg-sechead .cg-kicker { grid-column: 1 / -1; margin-bottom: -2px; }
.cg-sechead h2 { grid-column: 1 / span 2; max-width: 20ch; }
.cg-sechead .cg-lede { grid-column: 3; padding-bottom: 4px; }
.cg-sechead.cg-solo h2 { max-width: 36ch; }

/* The story: steps on the left, the diagram assembling on the right; stacked under a sticky diagram in a narrow column */
.cg-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--colgap); align-items: start; --fig-h: min(600px, calc(100vh - var(--cg-top) - 56px)); }
.cg-steps { list-style: none; padding: 0 0 4vh; }
.cg-st { min-height: max(360px, 64vh); display: flex; flex-direction: column; justify-content: center; gap: 12px; opacity: .5; transition: opacity .45s var(--ease); }
.cg-st:first-child { justify-content: flex-start; padding-top: 44px; }
.cg-st:last-child { min-height: max(240px, 40vh, calc(var(--fig-h) / 2 + var(--cg-top) / 2 + 100px)); } /* the finished figure stays pinned while step 6 is read */
.cg-st.cg-active { opacity: 1; }
.cg-st .cg-pill { align-self: flex-start; }
.cg-st h3 { font-size: clamp(1.35rem, 1rem + 1cqi, 1.7rem); line-height: 1.2; }
.cg-st p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); max-width: 34rem; }
.cg-st .cg-act { margin-top: 8px; }
.cg-st .cg-term { font-size: 13px; }
.cg-nojs .cg-st { opacity: 1; min-height: 0; padding: 28px 0; }
.cg-fig { position: sticky; top: calc(var(--cg-top) + (100vh - var(--cg-top) - var(--fig-h)) / 2); height: var(--fig-h); }
.cg-figbox { position: relative; height: 100%; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.cg-dia { position: absolute; inset: 0 0 46px 0; --nw: 128px; }
.cg-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cg-w { fill: none; stroke: var(--ink-soft); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .85s var(--ease), opacity .25s; }
.cg-w.cg-on { stroke-dashoffset: 0; opacity: 1; }
.cg-w.cg-dash { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; stroke-dashoffset: 0; transition: opacity .25s; }
.cg-w.cg-dash.cg-on { transition: opacity .5s .1s; }
.cg-w.cg-vio { stroke: var(--violet); stroke-width: 1.7; }
.cg-ah { fill: var(--ink-soft); opacity: 0; transition: opacity .2s; }
.cg-ah.cg-on { opacity: 1; transition: opacity .3s .6s; }
.cg-ah.cg-dash { fill: var(--muted); } .cg-ah.cg-vio { fill: var(--violet); }
.cg-tok { fill: var(--ink); opacity: 0; transition: opacity .3s; }
.cg-tok.cg-vio { fill: var(--violet); }
.cg-tok.cg-on { opacity: 1; }
.cg-node { position: absolute; left: 0; top: 0; width: var(--nw); padding: 8px 8px 9px; border-radius: 11px; border: 1.3px solid var(--line); background: var(--card); text-align: center; opacity: 0; transition: opacity .3s var(--ease); will-change: transform; }
.cg-node.cg-on { opacity: 1; transition: opacity .45s var(--ease); }
.cg-node b, .cg-node span { display: grid; }
.cg-node b { font: 700 14px/1.2 var(--serif); color: var(--ink); }
.cg-node span { margin-top: 3px; font: 400 11px/1.3 var(--sans); color: var(--ink-soft); text-wrap: balance; }
.cg-node i, .cg-frame .cg-fl i { grid-area: 1 / 1; font-style: normal; transition: opacity .22s .16s; }
.cg-node i.cg-off, .cg-frame .cg-fl i.cg-off { opacity: 0; transition: opacity .14s; }
.cg-node.cg-a { background: var(--amber-t); border-color: var(--amber); }
.cg-node.cg-s { background: var(--sky-t); border-color: var(--sky); }
.cg-node.cg-c { background: var(--coral-t); border-color: var(--coral); }
.cg-node.cg-v { background: var(--violet-t); border-color: var(--violet); }
.cg-node.cg-g { background: var(--green-t); border-color: var(--green); }
.cg-node.cg-k { background: var(--ink); border-color: var(--ink); }
.cg-node.cg-k b { color: var(--paper); } .cg-node.cg-k span { color: var(--on-ink-dim); }
.cg-node[data-id="you"] { width: calc(var(--nw) + 34px); }
.cg-narrow .cg-node { padding: 6px 4px 7px; border-radius: 9px; }
.cg-narrow .cg-node b { font-size: 12.5px; }
.cg-narrow .cg-node span { font-size: 9.5px; line-height: 1.25; }
.cg-narrow.cg-tight .cg-node b { font-size: 11.5px; }
.cg-tight .cg-node span { display: none; } /* the smallest or shortest boxes keep the role names only */
.cg-frame { position: absolute; left: 0; top: 0; border: 1.3px dashed var(--muted); border-radius: 16px; opacity: 0; transition: opacity .3s var(--ease), border-color .4s; pointer-events: none; }
.cg-frame.cg-on { opacity: 1; transition: opacity .5s var(--ease), border-color .4s; }
.cg-frame.cg-harness { border-style: solid; border-color: var(--green); }
.cg-frame .cg-fl { position: absolute; left: 12px; top: 8px; display: grid; font: 500 10px/1.3 var(--mono); letter-spacing: .1em; color: var(--quiet); white-space: nowrap; transition: opacity .25s .1s, visibility 0s; }
.cg-frame .cg-fl i + i { color: var(--green-ink); }
.cg-frame.cg-nolabel .cg-fl { opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s linear .15s; }
.cg-narrow .cg-frame { border-radius: 12px; }
.cg-elab { position: absolute; left: 0; top: 0; font: 400 10px/1.25 var(--mono); letter-spacing: .03em; color: var(--quiet); background: var(--card); padding: 2px 5px; border-radius: 5px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.cg-elab.cg-on { opacity: 1; transition: opacity .4s .45s; }
.cg-elab.cg-on.cg-hop { transition: opacity .25s; } /* changing sides: back in quickly */
.cg-elab.cg-on.cg-blocked { opacity: 0; transition: opacity .2s; }
.cg-elab.cg-vio { color: var(--violet-d); }
.cg-narrow .cg-elab { font-size: 9.5px; padding: 1px 3px; }
.cg-ring { position: absolute; left: 0; top: 0; border: 2.5px solid var(--green); border-radius: 14px; opacity: 0; transition: opacity .25s; pointer-events: none; }
.cg-ring.cg-on { opacity: 1; transition: opacity .4s; animation: cg-breathe 1.8s ease-in-out infinite; }
@keyframes cg-breathe { 50% { border-color: color-mix(in srgb, var(--green) 30%, transparent); } }
.cg-narrow .cg-ring { border-radius: 9px; }
.cg-note { position: absolute; left: 0; top: 0; font: 600 10.5px/1.3 var(--mono); color: var(--green-ink); white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.cg-note.cg-on { opacity: 1; transition: opacity .4s .3s; }
.cg-narrow .cg-note { font-size: 9.5px; }
.cg-figcap { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-top: 1px solid var(--line-soft); font: 400 11.5px/1.3 var(--mono); color: var(--ink-soft); }
.cg-figcap .cg-prog { display: inline-flex; gap: 4px; flex: none; }
.cg-figcap .cg-prog i { width: 16px; height: 4px; border-radius: 2px; background: var(--line); transition: background .3s; }
.cg-figcap .cg-prog i.cg-on { background: var(--violet); }
.cg-figcap .cg-cap { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Secret sauce */
.cg-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cg-pillar { padding: 24px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; min-width: 0; }
.cg-pillar .cg-pill { justify-self: start; }
.cg-pillar p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.cg-pillar .cg-src { padding-top: 12px; border-top: 1px solid var(--line-soft); font: 400 10.5px/1.6 var(--mono); letter-spacing: .04em; color: var(--quiet); }
.cg-viz { position: relative; min-height: 176px; margin-top: 4px; align-self: center; width: 100%; container: viz / inline-size; display: grid; align-items: center; }
/* evals */
.cg-evals-wrap { position: relative; padding-top: 30px; }
.cg-evals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; transition: opacity .4s; }
.cg-evals-wrap.cg-fade .cg-evals { opacity: 0; }
.cg-ev { position: relative; height: 112px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 9px; padding: 25px 8px 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; transition: border-color .3s, opacity .4s; }
.cg-ev > b { position: absolute; top: 7px; left: 7px; right: 4px; font: 500 9.5px/1.2 var(--mono); letter-spacing: 0; color: var(--quiet); white-space: nowrap; }
.cg-ev .cg-l { display: block; height: 4px; border-radius: 2px; background: var(--line); flex: none; }
/* Lines of the broken test versions: ragged (fractured), out of order (shuffled), a gap where the figure was, one frame repeated */
.cg-ev:nth-child(1) .cg-l:nth-of-type(1) { width: 52%; } .cg-ev:nth-child(1) .cg-l:nth-of-type(2) { width: 30%; } .cg-ev:nth-child(1) .cg-l:nth-of-type(3) { width: 46%; }
.cg-ev:nth-child(1) .cg-l:nth-of-type(4) { width: 24%; } .cg-ev:nth-child(1) .cg-l:nth-of-type(5) { width: 38%; }
.cg-ev:nth-child(2) .cg-l:nth-of-type(1) { width: 72%; } .cg-ev:nth-child(2) .cg-l:nth-of-type(2) { width: 94%; } .cg-ev:nth-child(2) .cg-l:nth-of-type(3) { width: 40%; }
.cg-ev:nth-child(2) .cg-l:nth-of-type(4) { width: 86%; } .cg-ev:nth-child(2) .cg-l:nth-of-type(5) { width: 60%; }
.cg-ev:nth-child(3) .cg-l:nth-of-type(1) { width: 90%; } .cg-ev:nth-child(3) .cg-l:nth-of-type(3) { width: 84%; }
.cg-ev.cg-fresh .cg-l { width: 80%; }
.cg-ev .cg-fx { display: grid; place-items: center; height: 22px; border: 1px dashed var(--line); border-radius: 4px; font: 700 10px var(--mono); color: var(--coral-ink); font-style: normal; flex: none; }
.cg-ev::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: linear-gradient(transparent, color-mix(in srgb, var(--violet) 22%, transparent)); opacity: 0; }
.cg-ev.cg-scan { border-color: var(--violet); }
.cg-ev.cg-scan::after { opacity: 1; animation: cg-scan .9s linear forwards; }
@keyframes cg-scan { to { top: 100%; } }
.cg-ev .cg-ok { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--mono); font-style: normal; background: var(--green-t); color: var(--green-ink); opacity: 0; transform: scale(.5); transition: opacity .25s, transform .3s var(--ease); }
.cg-ev.cg-ok-on .cg-ok, .cg-nojs .cg-ev .cg-ok { opacity: 1; transform: none; }
.cg-ev.cg-fresh { border-style: dashed; border-color: var(--line); background: transparent; }
.cg-ev.cg-fresh > :not(.cg-ph) { opacity: 0; transition: opacity .4s; }
.cg-ev.cg-fresh .cg-ph { position: absolute; inset: 0; display: grid; place-items: center; font: 500 9.5px/1.3 var(--mono); color: var(--quiet); text-align: center; padding: 6px; transition: opacity .3s; }
.cg-ev.cg-fresh.cg-in { border-style: solid; border-color: var(--coral); background: var(--paper); }
.cg-ev.cg-fresh.cg-in > :not(.cg-ph) { opacity: 1; }
.cg-ev.cg-fresh.cg-in .cg-ph { opacity: 0; }
.cg-ev.cg-fresh.cg-in.cg-ok-on { border-color: var(--line-soft); }
.cg-evtag { position: absolute; top: 2px; right: 0; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.cg-evals-wrap.cg-has-new .cg-evtag { opacity: 1; transform: none; }
@container viz (max-width: 300px) {
  .cg-evals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-ev { height: 78px; }
}
/* gym */
.cg-gym { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; overflow: visible; }
.cg-gym .cg-ringl { fill: none; stroke: var(--line); stroke-width: 2; }
.cg-gym .cg-stn circle { stroke-width: 1.3; transition: r .3s var(--ease); }
.cg-gym .cg-stn text { font: 700 12px var(--sans); text-anchor: middle; dominant-baseline: central; fill: var(--ink); }
.cg-gym .cg-stn.cg-hit circle { r: 22px; }
.cg-gym .cg-run circle { fill: var(--violet-t); stroke: var(--violet); } .cg-gym .cg-catch circle { fill: var(--coral-t); stroke: var(--coral); }
.cg-gym .cg-trace circle { fill: var(--amber-t); stroke: var(--amber); } .cg-gym .cg-fix circle { fill: var(--green-t); stroke: var(--green); }
.cg-gym .cg-ctr { font: 400 12px var(--mono); fill: var(--quiet); text-anchor: middle; dominant-baseline: central; }
.cg-gym .cg-path { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; }
.cg-gym .cg-gate rect { fill: var(--card); stroke: var(--line); stroke-width: 1.2; transition: stroke .3s, fill .3s; }
.cg-gym .cg-gate.cg-open rect { stroke: var(--green); fill: var(--green-t); }
.cg-gym .cg-gate .cg-gt { font: 700 12px var(--sans); fill: var(--ink); text-anchor: middle; }
.cg-gym .cg-gate .cg-tl { font: 400 11.5px var(--mono); fill: var(--quiet); dominant-baseline: central; }
.cg-gym .cg-tick { fill: var(--card); stroke: var(--muted); stroke-width: 1.2; transition: fill .25s, stroke .25s; }
.cg-gym .cg-tick.cg-on { fill: var(--green); stroke: var(--green); }
.cg-gym .cg-core rect { fill: var(--ink); transition: filter .3s; }
.cg-gym .cg-core text { font: 700 12px var(--sans); fill: var(--paper); text-anchor: middle; dominant-baseline: central; }
.cg-gym .cg-core.cg-flash rect { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--green) 80%, transparent)); }
.cg-gym .cg-cap { font: 400 11.5px var(--mono); fill: var(--quiet); text-anchor: middle; }
.cg-gym .cg-gtok { fill: var(--violet); }
.cg-nojs .cg-gym .cg-gtok { fill: none; }
.cg-gym .cg-ahd { fill: var(--muted); }
/* layers */
.cg-stack { display: grid; gap: 6px; position: relative; padding: 4px 0; }
.cg-layer { position: relative; border-radius: var(--r-sm); padding: 9px 14px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; align-items: center; transition: box-shadow .4s; }
.cg-layer b { font: 700 14px/1.25 var(--serif); }
.cg-layer span { grid-column: 1 / -1; font: 400 10.5px/1.4 var(--mono); }
.cg-layer.cg-brief { background: var(--sky-t); color: var(--sky-ink); }
.cg-layer.cg-prof { background: var(--violet-t); color: var(--violet-d); border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent); }
.cg-layer.cg-core { background: var(--ink); color: var(--paper); } .cg-layer.cg-core span { color: var(--on-ink-dim); }
.cg-layer.cg-prof.cg-glow { box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 30%, transparent); }
.cg-layer .cg-lk { font: 500 9.5px/1 var(--mono); letter-spacing: .06em; font-style: normal; color: var(--on-ink-dim); transition: color .3s; }
.cg-layer.cg-core.cg-hold .cg-lk { color: var(--paper); }
.cg-corr { position: absolute; right: 12px; top: 0; font: 600 10px/1 var(--mono); padding: 5px 9px; border-radius: var(--r-pill); background: var(--card); color: var(--green-ink); border: 1px solid var(--green); white-space: nowrap; opacity: 0; transition: opacity .35s, transform .7s var(--ease); z-index: 2; }

/* Results */
.cg-results { padding: 24px; }
.cg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cg-stat { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 16px 18px; min-width: 0; }
.cg-stat .cg-n { font: 700 2rem/1.1 var(--mono); color: var(--green-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cg-stat .cg-n small { font-size: 1rem; font-weight: 400; color: var(--quiet); margin: 0 4px; vertical-align: 4px; }
.cg-stat .cg-t { font-size: 13px; color: var(--quiet); margin-top: 6px; line-height: 1.45; }
.cg-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; margin-top: 24px; }
.cg-chart-k { font: 400 10.5px/1.6 var(--mono); letter-spacing: .08em; color: var(--quiet); }
.cg-bars { display: grid; gap: 10px; margin-top: 12px; }
.cg-bar { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4.2rem; gap: 12px; align-items: center; font-size: 13px; color: var(--ink-soft); }
.cg-bar .cg-track { height: 14px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-pill); overflow: hidden; }
.cg-bar .cg-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--muted); opacity: .55; transition: width 1.1s var(--ease) .15s; }
.cg-bar .cg-fill.cg-v { background: var(--violet); opacity: 1; } .cg-bar .cg-fill.cg-c { background: var(--coral); opacity: 1; }
.cg-w-v2 { --w: 9.3%; } .cg-w-v3 { --w: 27.3%; } .cg-w-bare { --w: 17.5%; } .cg-w-sf { --w: 22.8%; } /* each bar's true share: 4/43, 15/55, 17.5%, 22.8% */
.cg-bar .cg-val { font-family: var(--mono); text-align: right; color: var(--ink); white-space: nowrap; }
.cg-in .cg-fill, .cg-nojs .cg-fill { width: var(--w); }
.cg-srcl { font: 400 10.5px/1.6 var(--mono); letter-spacing: .04em; color: var(--quiet); margin-top: 12px; }
.cg-catches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: 16px; margin-top: 16px; }
.cg-catch { padding: 18px 20px; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.cg-catch .cg-pill { justify-self: start; }
.cg-catch b { font: 700 1.02rem/1.3 var(--serif); color: var(--ink); }
.cg-catch .cg-fix { font-size: 13px; line-height: 1.5; }

/* Final */
.cg-final { margin-top: 112px; padding: 56px 0 64px; border-top: 1px solid var(--line-soft); text-align: center; scroll-margin-top: calc(var(--cg-top) + 24px - 56px); }
.cg-final h2 { max-width: 26ch; margin: 0 auto; }
.cg-ib { display: inline-block; } /* keeps a phrase together, so balanced headings break between sentences */
.cg-final .cg-lede { max-width: 36rem; margin: 14px auto 0; }
.cg-final .cg-cta { justify-content: center; margin-top: 24px; }
.cg-final .cg-kicker { display: inline-block; }

/* Tiers follow the page's own width (in the shell's centre column it is about 560px on a desktop):
   widest first, so a narrower override always wins */
@container cg (min-width: 1052px) {
  /* The three cards share one set of rows, so their pictures and footers line up. */
  .cg-pillars { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .cg-pillar { grid-row: span 5; grid-template-rows: subgrid; row-gap: 12px; }
}
@container cg (max-width: 1051px) {
  .cg-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cg-hero .cg-lede { max-width: 40rem; }
  .cg-hero .cg-cta { flex-direction: row; width: auto; align-items: center; }
  .cg-hero-art { max-width: 760px; } /* wider, the team rows go one-line and leave the pane half empty */
  .cg-pillars { grid-template-columns: minmax(0, 1fr); }
  .cg-pillar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto 1fr auto; column-gap: 32px; }
  /* Section heads split like the horizontal cards below them. */
  .cg-sechead { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 32px; }
  .cg-sechead h2 { grid-column: 1; }
  .cg-sechead .cg-lede { grid-column: 2; }
  .cg-sechead.cg-solo h2 { grid-column: 1 / -1; }
  .cg-pillar > .cg-pill, .cg-pillar > h3, .cg-pillar > p:not(.cg-src) { grid-column: 1; }
  .cg-pillar > .cg-viz { grid-column: 2; grid-row: 1 / 4; }
  .cg-pillar > .cg-src { grid-column: 1 / -1; }
}
@container cg (max-width: 911px) {
  .cg-st .cg-term { font-size: 12.5px; }
}
@container cg (max-width: 851px) {
  .cg-sec { --cg-secpad: 88px; }
  .cg-sechead { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; }
  .cg-sechead h2, .cg-sechead .cg-lede { grid-column: 1; }
  .cg-story { grid-template-columns: minmax(0, 1fr); gap: 0; --fig-h: clamp(340px, calc(56svh - var(--cg-top) / 3), 480px); }
  .cg-fig { order: -1; top: calc(var(--cg-top) + 6px); z-index: 5; background: var(--paper); }
  .cg-fig::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--cg-bleed-l)); right: calc(-1 * var(--cg-bleed-r)); top: -8px; height: 40px; background: var(--paper); }
  .cg-fig::after { content: ""; position: absolute; left: calc(-1 * var(--cg-bleed-l)); right: calc(-1 * var(--cg-bleed-r)); top: 100%; height: 30px; background: linear-gradient(var(--paper), transparent); pointer-events: none; }
  .cg-dia { inset: 0 0 52px 0; }
  .cg-figcap { height: 52px; padding: 0 14px; gap: 10px; font-size: 10.5px; }
  .cg-figcap .cg-prog i { width: 9px; }
  .cg-steps { padding: 18px 0 4svh; }
  .cg-st, .cg-st:first-child { min-height: 50svh; justify-content: flex-start; padding: 22px 0 18px; opacity: .55; scroll-margin-top: calc(var(--cg-top) + var(--fig-h) + 24px); }
  .cg-st.cg-active { opacity: 1; }
  .cg-st:last-child { min-height: 0; padding-bottom: 40px; }
  .cg-st .cg-term { scroll-margin-top: calc(var(--cg-top) + var(--fig-h) + 24px); }
  .cg-nojs .cg-st { opacity: 1; min-height: 0; }
  .cg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-catches { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; }
  .cg-catch { grid-row: auto; grid-template-rows: none; }
  .cg-duo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@container cg (max-width: 727px) {
  .cg-sec { --cg-secpad: 76px; }
  .cg-results { padding: 18px 16px; }
  .cg-bar { grid-template-columns: 6.2rem minmax(0, 1fr) 3.8rem; gap: 10px; }
  .cg-proof { margin-top: 36px; padding: 14px 16px; }
  .cg-final { margin-top: 80px; padding: 44px 0 52px; }
}
@container cg (max-width: 607px) {
  .cg-pillar { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 20px 18px; }
  .cg-pillar > .cg-viz { grid-column: 1; grid-row: auto; }
  .cg-pillar > .cg-src { grid-column: 1; }
  .cg-term { font-size: 12.5px; }
  .cg-cta, .cg-hero .cg-cta { flex-direction: column; align-items: stretch; width: auto; }
  .cg-cta .cg-btn, .cg-cta .cg-term, .cg-st .cg-act .cg-term { width: 100%; }
  .cg-cta .cg-term .cg-cp, .cg-st .cg-act .cg-term .cg-cp { margin-left: auto; }
}
@container cg (max-width: 387px) {
  .cg-stat .cg-n { font-size: clamp(1.5rem, 7.4cqi, 2rem); }
}
@container cg (max-width: 347px) {
  .cg-stats { grid-template-columns: minmax(0, 1fr); }
  .cg-stat .cg-n { font-size: 1.6rem; }
  .cg-bar { grid-template-columns: 5.4rem minmax(0, 1fr) 3.4rem; }
  .cg-term, .cg-st .cg-term { font-size: 12px; gap: 6px; padding-left: 10px; }
  .cg-term .cg-cp { width: auto; padding: 7px 6px; letter-spacing: .08em; } /* a slimmer chip keeps "copy" on small phones */
}
@container cg (max-width: 300px) {
  .cg-figcap { gap: 8px; padding: 0 12px; }
  .cg-figcap .cg-prog i { width: 6px; }
}
@container cg (max-width: 279px) {
  .cg-term .cg-cp { display: none; }
}
/* Too short for a sticky diagram (landscape phones, zoomed laptops): it sits in the flow, finished, at a size that fits it. */
@media (max-height: 560px) {
  .cg-story { --fig-h: 470px; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 820px; }
  .cg-fig { position: relative; top: 0; order: -1; }
  .cg-fig::after, .cg-fig::before { display: none; }
  .cg-steps { padding-bottom: 0; }
  .cg-st, .cg-st:first-child, .cg-st:last-child { min-height: 0; padding: 22px 0; opacity: 1; scroll-margin-top: 0; }
  .cg-st .cg-term { scroll-margin-top: 0; }
}
/* Short laptop screens, wide page: a tighter hero, so the whole window clears the fold. */
@media (max-height: 760px) {
  @container cg (min-width: 1052px) {
    .cg-docbody { height: 278px; }
    .cg-lr { margin-bottom: 10px; }
    .cg-rows { gap: 2px; }
    .cg-row { padding: 4px 10px 5px; }
    .cg-proof { margin-top: 40px; }
  }
}
.cg-paused *, .cg-paused *::before, .cg-paused *::after { animation-play-state: paused !important; }
.cg-paused .cg-now.cg-swap { animation: none; } /* the line that speaks for the team never freezes half faded */
@media (prefers-reduced-motion: reduce) {
  .cg *, .cg *::before, .cg *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .cg-tok, .cg-gym .cg-gtok, .cg-pp { display: none; }
}
@media (forced-colors: active) {
  .cg-bar .cg-fill, .cg-lr .cg-ln, .cg-lr.cg-hab .cg-ln, .cg-lr.cg-marked .cg-ln, .cg-lr.cg-marked.cg-fixed .cg-ln, .cg-figcap .cg-prog i.cg-on, .cg-mf-box i, .cg-ev .cg-l { forced-color-adjust: none; background: CanvasText; }
  .cg-term, .cg-btn { border: 1px solid ButtonText; }
}
/* Print shows every finished state: the hero's last round, the whole harness, all six steps, filled bars. */
.cg.cg-printing .cg-fig { position: relative; top: 0; width: 640px; height: 480px; } /* one size on screen and paper, so the drawing matches */
@media print {
  .cg-bar .cg-fill { width: var(--w) !important; transition: none; }
  .cg-pp { display: none; }
  .cg-bar .cg-fill, .cg-lr .cg-ln, .cg-mf-box i, .cg-layer.cg-core, .cg-term, .cg-btn, .cg-pill, .cg-fig, .cg-fig * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cg-sechead, .cg-proof, .cg-pillar, .cg-stat, .cg-catch, .cg-st { break-inside: avoid; }
  .cg-st { opacity: 1 !important; min-height: 0 !important; padding: 16px 0 !important; }
  .cg-fig { position: relative !important; top: 0 !important; break-inside: avoid; }
  .cg-fig::before, .cg-fig::after { display: none; }
  .cg *, .cg *::before, .cg *::after { transition: none !important; animation: none !important; }
}