/* Advance Copy — four faces.
   Fraunces  · display, Layer I only (WONK 1, SOFT 20)
   Newsreader· text, Layers I and II
   IBM Plex Serif · text, Layer III only
   IBM Plex Mono  · instrument, every layer — "this figure was computed"
   Served from Google Fonts; no binaries ship with this system. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=IBM+Plex+Serif:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  /* ── layer grounds ── I newsprint · II bone · III graph paper ── */
  --ac-i-paper:#E6DFCE;--ac-i-raised:#EFE9DA;--ac-i-sunk:#DAD1BC;--ac-i-rule:#CDC4AC;
  --ac-i-ink:#1A1814;--ac-i-ink-2:#4E4A40;--ac-i-ink-3:#8C8574;
  --ac-ii-paper:#F4F1E9;--ac-ii-raised:#FBF9F3;--ac-ii-sunk:#E9E4D6;--ac-ii-rule:#DED8C9;
  --ac-ii-ink:#1C1D20;--ac-ii-ink-2:#4E5157;--ac-ii-ink-3:#8A8779;
  --ac-iii-paper:#E9EFF2;--ac-iii-raised:#F6FAFC;--ac-iii-sunk:#DCE5EA;--ac-iii-rule:#CBD8DE;
  /* Ruled paper is a ground, not a rule: the squares sit well beneath the
     hairlines that actually separate things, or they compete with the text. */
  --ac-iii-grid:#DEE6EA;
  --ac-iii-ink:#131A20;--ac-iii-ink-2:#435159;--ac-iii-ink-3:#7C8B95;

  /* ── the working pair, Layers II and III ── */
  --ac-blue:#1E3D63;   /* plan blue affirms */
  --ac-ochre:#9C5F1C;  /* the complement and the record */

  /* ── section palette, Layer I only ── even lightness, capped chroma ── */
  --ac-sec-monetary:#1E3D63;
  --ac-sec-energy:#9C5F1C;
  --ac-sec-technology:#2C6B64;
  --ac-sec-govern:#3E4A72;
  --ac-sec-health:#4A6A55;
  --ac-sec-bio:#6E4670;
  --ac-sec-conflict:#94402F;
  --ac-sec-culture:#5F3F63;
  --ac-sec-sport:#5F6B33;
  /* residual in any categorical set — achromatic, always drawn last */
  --ac-residual:#8C8574;

  /* ── reserved signals — never used as data ── */
  --ac-alarm:#A33A22;      /* does not reconcile. outline only, never a fill */
  --ac-caution:#8A6A20;    /* thin evidence: estimate moved, interval wide */
  --ac-reference:#6C7076;  /* market price, prior run, benchmark. achromatic on purpose */

  /* ── resolution states ── */
  --ac-res-happened:#4A6A55;
  --ac-res-partial:#9C5F1C;
  --ac-res-not:#94402F;
  --ac-res-unresolved:#8C8574;

  /* ── semantic defaults: Layer I is the default ground ── */
  --surface-page:var(--ac-i-paper);
  --surface-card:var(--ac-i-raised);
  --surface-sunk:var(--ac-i-sunk);
  --border-rule:var(--ac-i-rule);
  --text-body:var(--ac-i-ink);
  --text-muted:var(--ac-i-ink-2);
  --text-faint:var(--ac-i-ink-3);
  --accent:var(--ac-blue);
  --accent-2:var(--ac-ochre);
}

/* Depth scopes. Set data-layer on any container; never mix a
   ground from one layer with ink from another. */
[data-layer="i"]{
  --surface-page:var(--ac-i-paper);--surface-card:var(--ac-i-raised);--surface-sunk:var(--ac-i-sunk);
  --border-rule:var(--ac-i-rule);--text-body:var(--ac-i-ink);--text-muted:var(--ac-i-ink-2);
  --text-faint:var(--ac-i-ink-3);--font-text:var(--ac-font-text);--ac-grid:none; /* @kind other */
}
[data-layer="ii"]{
  --surface-page:var(--ac-ii-paper);--surface-card:var(--ac-ii-raised);--surface-sunk:var(--ac-ii-sunk);
  --border-rule:var(--ac-ii-rule);--text-body:var(--ac-ii-ink);--text-muted:var(--ac-ii-ink-2);
  --text-faint:var(--ac-ii-ink-3);--font-text:var(--ac-font-text);--ac-grid:none; /* @kind other */
}
[data-layer="iii"]{
  --surface-page:var(--ac-iii-paper);--surface-card:var(--ac-iii-raised);--surface-sunk:var(--ac-iii-sunk);
  --border-rule:var(--ac-iii-rule);--text-body:var(--ac-iii-ink);--text-muted:var(--ac-iii-ink-2);
  /* Layer III is the one layer whose ground is ruled, so its faintest ink is
     darker than the base --ac-iii-ink-3 (#7C8B95, only 3.0:1 here). 10.5px mono
     margin notes and captions sit ON the squares; they need ~5.7:1 to hold.
     The base token stays available for hairlines and inert marks. */
  --text-faint:#566A76;--font-text:var(--ac-font-technical);
  /* the deepest layer is literally ruled: a faint 22px grid under everything */
  --ac-grid:repeating-linear-gradient(0deg,var(--ac-iii-grid) 0 1px,transparent 1px var(--ac-grid-pitch)),repeating-linear-gradient(90deg,var(--ac-iii-grid) 0 1px,transparent 1px var(--ac-grid-pitch)); /* @kind other */
}

:root{
  --ac-font-display:'Fraunces',Georgia,serif;              /* Layer I only */
  --ac-font-text:'Newsreader',Georgia,serif;               /* Layers I and II */
  --ac-font-technical:'IBM Plex Serif',Georgia,serif;      /* Layer III only */
  --ac-font-mono:'IBM Plex Mono',ui-monospace,monospace;   /* every layer */
  --ac-fraunces:"WONK" 1,"SOFT" 20; /* @kind font */
  --ac-fraunces-mast:"WONK" 1,"SOFT" 24,"opsz" 144; /* @kind font */
  --ac-fraunces-head:"WONK" 1,"SOFT" 14; /* @kind font */

  /* scale — values are literal, taken from tokens.ts */
  --ac-size-masthead:clamp(36px,8vw,86px);
  --ac-size-headline-l:clamp(30px,4.4vw,45px);
  --ac-size-headline-m:23px;
  --ac-size-headline-s:18px;
  --ac-size-entry-title:clamp(26px,4vw,38px);
  --ac-size-claim:20px;
  --ac-size-lede:16.5px;
  --ac-size-body:15px;
  --ac-size-body-technical:14.5px;
  --ac-size-figure:22px;
  --ac-size-figure-lg:40px;
  --ac-size-label:9.5px;
  --ac-size-caption:10.5px;

  --ac-lh-masthead:.9; /* @kind other */
  --ac-lh-headline:1.05; /* @kind other */
  --ac-lh-entry:1.14; /* @kind other */
  --ac-lh-claim:1.42; /* @kind other */
  --ac-lh-lede:1.45; /* @kind other */
  --ac-lh-body:1.62; /* @kind other */
  --ac-lh-technical:1.72; /* @kind other */
  --ac-lh-caption:1.6; /* @kind other */

  --ac-ls-masthead:-.03em;--ac-ls-headline:-.022em;--ac-ls-entry:-.018em; /* @kind other */
  --ac-ls-claim:-.014em;--ac-ls-figure:-.02em;--ac-ls-label:.15em;--ac-ls-meta:.09em; /* @kind other */

  --font-display:var(--ac-font-display);
  --font-text:var(--ac-font-text);
  --font-mono:var(--ac-font-mono);
}

:root{
  --ac-space-1:3px;--ac-space-2:5px;--ac-space-3:7px;--ac-space-4:9px;--ac-space-5:12px;
  --ac-space-6:14px;--ac-space-7:16px;--ac-space-8:20px;--ac-space-9:26px;--ac-space-10:34px;
  --ac-space-11:44px;--ac-space-12:58px;
  --ac-measure-narrow:34ch;   /* Layer I column */
  --ac-measure-claim:56ch;    /* Layer II claim + entry */
  --ac-measure-wide:66ch;     /* Layer III prose */
  --ac-wrap:1140px;
  --ac-rail:300px;            /* Layer II side rail */
  --ac-margin-col:186px;      /* Layer III margin notes */
  --ac-depth-rail:62px;
}

:root{
  /* worlds moving between groups — slow enough to track one */
  --ac-motion-layout:550ms cubic-bezier(.4,0,.2,1); /* @kind other */
  /* hover lift — fast, slight overshoot. must live on a separate element
     from layout or the two fight over transform */
  --ac-motion-lift:170ms cubic-bezier(.34,1.3,.64,1); /* @kind other */
  --ac-motion-depth:500ms ease; /* @kind other */
  --ac-motion-fade:300ms ease; /* @kind other */
  --ac-lift-scale:1.55; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{
    --ac-motion-layout:1ms linear; /* @kind other */
    --ac-motion-lift:1ms linear; /* @kind other */
    --ac-motion-depth:1ms linear; /* @kind other */
    --ac-motion-fade:1ms linear; /* @kind other */
  }
}

:root{
  /* the hundred */
  --ac-field-count:100; /* @kind other */
  --ac-field-cols:20; /* @kind other */
  --ac-field-cols-narrow:10; /* @kind other */
  --ac-field-gap:3px;--ac-field-min-cell:10px;--ac-field-label-h:21px;
  --ac-field-group-gap:15px;--ac-field-dim:.12; /* @kind other */
  --ac-strip-h:44px;
  --ac-grid-pitch:22px;

  /* geometry — the system is printed, so corners are effectively square */
  --ac-radius-0:0px;      /* rules, plates, mastheads */
  --ac-radius-1:1px;      /* chips, tabs at Layer I */
  --ac-radius-2:2px;      /* buttons, chips at Layer II */
  --ac-radius-3:3px;      /* cards, action panels */
  --ac-radius-icon:28px;  /* the 128px app tile only */

  --ac-hair:1px;          /* rule */
  --ac-stress:2px;        /* card left edge, blockquote rule */
  --ac-double:3px;        /* masthead double rule */

  /* the one shadow in the system: a lit world on hover */
  --ac-shadow-world:0 3px 9px rgba(30,28,25,.28),inset -1px -2px 4px rgba(0,0,0,.22),inset 1px 1px 3px rgba(255,255,255,.30);
  --ac-planet:radial-gradient(circle at 32% 28%,rgba(255,252,246,.50) 0%,rgba(255,252,246,.10) 38%,rgba(0,0,0,.10) 66%,rgba(0,0,0,.34) 100%); /* @kind other */
}

.ac-root{background:var(--surface-page);color:var(--text-body);font-family:var(--font-text);font-size:var(--ac-size-body);line-height:var(--ac-lh-body);-webkit-font-smoothing:antialiased;}
.ac-root *{box-sizing:border-box;}
.ac-mono{font-family:var(--ac-font-mono);font-variant-numeric:tabular-nums;}
.ac-label{font-family:var(--ac-font-mono);font-size:var(--ac-size-label);letter-spacing:var(--ac-ls-label);text-transform:uppercase;color:var(--text-faint);}
.ac-figure{font-family:var(--ac-font-mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:var(--ac-ls-figure);}
.ac-oldstyle{font-variant-numeric:oldstyle-nums;}
/* Links are ink with a dotted rule, as in the byline. Colour is reserved for
   sections and signals — a blue link would read as a plan-blue figure. */
a{color:var(--text-body);text-decoration:none;border-bottom:1px dotted var(--text-faint);cursor:pointer;}
a:hover{border-bottom-style:solid;border-bottom-color:var(--text-body);}
a:focus-visible{outline:2px solid var(--text-body);outline-offset:2px;}

/* Micro-states. Inline styles cannot express :hover or :focus-visible, so
   every interactive component carries a class hook and its states live here.
   The rule: chrome hovers by rule and ink DARKENING — never opacity, never a
   fill, never a scale. This is a printed surface. */

/* focus is always visible, always 2px ink at 2px offset */
.ac-btn:focus-visible,.ac-chip:focus-visible,.ac-trail:focus-visible,
.ac-mark:focus-visible,.ac-act:focus-visible,.ac-orb:focus-visible,
.ac-brief:focus-visible{outline:2px solid var(--text-body);outline-offset:2px}

/* unselected controls: rule goes faint→ink, label muted→ink */
.ac-btn:hover:not([data-on="true"]),.ac-chip:hover:not([data-on="true"]){border-color:var(--text-faint);color:var(--text-body)}
/* selected controls do not respond to hover — they are already at full ink */
.ac-act:hover:not([data-on="true"]){border-color:var(--text-faint)}

/* the trail gains printing weight rather than colour */
.ac-trail:hover{border-bottom-width:2px;padding-bottom:1px}
.ac-mark:hover{border-bottom-width:2px}

/* a brief's own rule darkens; the row never fills */
.ac-brief[data-clickable="true"]:hover{border-top-color:var(--text-body)}

/* a plate fades in over one paint, so a blank canvas is never shown */
.ac-plate{opacity:0;transition:opacity var(--ac-motion-fade)}
.ac-plate[data-painted="true"]{opacity:1}

/* the empty state of a filtered field */
.ac-field-empty{font-family:var(--ac-font-mono);font-size:11.5px;line-height:1.6;
  color:var(--text-faint);border-left:2px solid var(--ac-caution);padding-left:11px;max-width:44ch}

/* A figure panel prints onto raised stock, so the ruled ground stops beneath
   the marks. Declared here as well as in the component, because the rule
   belongs to the layer rather than to one React tree. */
.ac-figpanel{background:var(--surface-card);padding:18px 16px 14px}


/* Optional masthead utilities leave the publication mark centered. */
.ac-masthead-brand-row{display:grid;grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr);align-items:center;gap:16px}
.ac-masthead-leading{text-align:left;justify-self:start}
.ac-masthead-trailing{text-align:right;justify-self:end}
.ac-masthead-rail-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.ac-masthead-rail-controls .ac-masthead-edition{text-align:left}
.ac-masthead-rail-controls .ac-masthead-compiled{text-align:right}
.ac-masthead-rail-controls .ac-masthead-dateline{display:inline-flex;align-items:center;justify-content:center;gap:10px}
@media(max-width:700px){
  .ac-masthead-brand-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px}
  .ac-masthead-brand-row h1{grid-row:2;grid-column:1 / -1}
  .ac-masthead-leading{grid-row:1;grid-column:1}
  .ac-masthead-trailing{grid-row:1;grid-column:2}
  .ac-masthead-rail-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ac-masthead-rail-controls .ac-masthead-dateline{grid-row:1;grid-column:1 / -1}
}

/* Layer III tokens are prepended at build time; no private app assets are served. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--surface-page); }
body { margin: 0; color: var(--text-body); background: var(--surface-page); background-image: var(--ac-grid); font-family: var(--ac-font-technical); font-size: 16px; line-height: var(--ac-lh-technical); }
.foundation-wrap { width: min(calc(100% - 68px), var(--ac-wrap)); margin: auto; }
.foundation-masthead { display: flex; justify-content: space-between; align-items: baseline; gap: 26px; padding: 26px 0 20px; border-bottom: 3px double var(--text-body); }
.foundation-brand { font-size: 23px; font-weight: 600; letter-spacing: var(--ac-ls-entry); border: 0; }
.foundation-masthead nav { display: flex; flex-wrap: wrap; gap: 20px; font-family: var(--ac-font-mono); font-size: 11px; }
.foundation-masthead [aria-current] { border-bottom-style: solid; }
.foundation-head { padding: 58px 0 34px; border-bottom: 1px solid var(--border-rule); }
.foundation-label { font: 10px/1.6 var(--ac-font-mono); letter-spacing: var(--ac-ls-label); text-transform: uppercase; color: var(--text-faint); }
h1 { font-size: clamp(44px, 7vw, 72px); font-weight: 400; letter-spacing: var(--ac-ls-headline); line-height: 1.1; margin: 14px 0; }
.foundation-deck { font-size: var(--ac-size-headline-m); margin: 0 0 26px; }
.foundation-byline { font: 10px/1.8 var(--ac-font-mono); color: var(--text-muted); margin: 0; }
.foundation-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--ac-margin-col); gap: 58px; padding: 34px 0 58px; }
article { max-width: var(--ac-measure-wide); }
article p { margin: 0 0 20px; }
.foundation-lede { font-size: var(--ac-size-claim); line-height: var(--ac-lh-claim); letter-spacing: var(--ac-ls-claim); }
h2 { font: 600 11px/1.6 var(--ac-font-mono); text-transform: uppercase; letter-spacing: .12em; margin: 34px 0 14px; }
section, li { scroll-margin-top: 26px; }
.foundation-agents { margin: 26px 0; border-top: 1px solid var(--border-rule); }
.foundation-agents > div { display: grid; grid-template-columns: 186px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--border-rule); }
.foundation-agents dt { font-size: 18px; font-weight: 600; }
.foundation-agents dt span { display: block; font: 10px/1.8 var(--ac-font-mono); color: var(--text-muted); }
.foundation-agents dd { margin: 0; font-size: 14.5px; }
.foundation-limitations { border-left: 2px solid var(--ac-ochre); padding: 16px 20px; margin: 34px 0; background: var(--surface-card); }
.foundation-limitations h2 { margin-top: 0; }
.foundation-limitations p { margin-bottom: 0; }
sup { padding-left: 3px; font: 10px var(--ac-font-mono); vertical-align: super; }
aside { border-left: 1px solid var(--border-rule); padding-left: 20px; }
aside > div { margin-bottom: 34px; }
aside p { font-size: 12px; line-height: 1.8; margin: 0 0 12px; }
aside nav { display: grid; justify-items: start; gap: 9px; font-size: 12px; }
.foundation-references { border-top: 1px solid var(--border-rule); margin-top: 34px; }
.foundation-references ol { padding-left: 20px; font-size: 12px; line-height: 1.8; }
.foundation-references li { padding-left: 7px; margin-bottom: 12px; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 20px 0 34px; border-top: 1px solid var(--text-body); font: 10px/1.8 var(--ac-font-mono); }
.foundation-skip { position: absolute; top: -100px; left: 16px; padding: 9px 12px; background: var(--surface-card); }
.foundation-skip:focus { top: 12px; }
@media (max-width: 760px) {
  .foundation-wrap { width: calc(100% - 40px); }
  .foundation-masthead { align-items: start; gap: 14px; flex-direction: column; }
  .foundation-head { padding-top: 34px; }
  .foundation-grid { grid-template-columns: 1fr; gap: 34px; }
  .foundation-agents > div { grid-template-columns: 1fr; gap: 7px; }
  aside { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.foundation-notebook { max-width: 880px; margin: 34px 0 58px; text-align: left; }
.foundation-intro, .foundation-lede, .foundation-publication p { max-width: 65ch; }
.foundation-jump { display: flex; flex-wrap: wrap; gap: 24px; font: 11px var(--ac-font-mono); margin: 28px 0 42px; }
.harness-figure { margin: 0; border: 1px solid var(--border-rule); background: var(--surface-card); padding: 20px; }
.harness-heading { display: flex; justify-content: space-between; gap: 20px; }
.harness-desktop { display: block; width: 100%; height: auto; }
.harness-lines { stroke: var(--text-muted); stroke-width: 1.3; }
#harness-arrow path { fill: var(--text-muted); }
.harness-provider-line { stroke-dasharray: 4 4; }
.harness-node rect { fill: var(--surface-page); stroke: var(--border-rule); }
.harness-key rect, .harness-promote rect { stroke: var(--ac-blue); }
.harness-node text { fill: var(--text-body); font: 12px var(--ac-font-technical); }
.harness-node .harness-name { font-size: 15px; font-weight: 600; }
.harness-node .harness-small, .harness-edge-label { font: 10px var(--ac-font-mono); fill: var(--text-muted); }
.harness-figure figcaption { border-top: 1px solid var(--border-rule); padding-top: 16px; font-size: 12px; color: var(--text-muted); }
.harness-mobile { display: none; }
.experiment-timeline { list-style: none; padding: 0 0 0 28px; margin: 30px 0; border-left: 1px solid var(--border-rule); }
.experiment-timeline li { position: relative; margin: 0 0 18px; }
.experiment-timeline li::before { content: ''; position: absolute; left: -33px; top: 25px; width: 9px; height: 9px; border-radius: 50%; background: var(--ac-blue); border: 2px solid var(--surface-page); }
.experiment-card { display: block; border: 1px solid var(--border-rule); background: var(--surface-card); padding: 20px 24px; text-decoration: none; }
.experiment-card:hover { border-color: var(--text-muted); }
.experiment-meta { display: flex; gap: 16px; justify-content: space-between; font: 10px var(--ac-font-mono); color: var(--text-muted); }
.experiment-meta > span { color: var(--ac-ochre); }
[data-verdict="promoted"] .experiment-meta > span, [data-verdict="adopted"] .experiment-meta > span { color: var(--ac-blue); }
.experiment-card h3 { margin: 14px 0 7px; font-size: clamp(18px, 3vw, 23px); line-height: 1.3; font-weight: 500; }
.experiment-card p { font-size: 14px; margin-bottom: 18px; }
.experiment-open { font: 10px var(--ac-font-mono); color: var(--ac-blue); }
.experiment-open > span { float: right; }
.experiment-record { border-top: 1px solid var(--border-rule); padding: 16px 0; }
.experiment-record summary { cursor: pointer; }
.foundation-enhanced .experiment-records { display: none; }
.experiment-modal-open { overflow: hidden; }
#experiment-dialog { color: var(--text-body); background: var(--surface-page); border: 1px solid var(--border-rule); padding: 0; width: min(760px, calc(100% - 32px)); max-height: 86dvh; overflow: auto; overscroll-behavior: contain; }
#experiment-dialog::backdrop { background: color-mix(in srgb, var(--text-body) 65%, transparent); }
.experiment-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; position: sticky; top: 0; background: var(--surface-page); border-bottom: 1px solid var(--border-rule); z-index: 1; }
.experiment-dialog-bar button { font: 11px var(--ac-font-mono); color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-rule); padding: 10px 14px; cursor: pointer; }
.experiment-body { padding: 24px; }
.experiment-body h2 { font: 500 clamp(24px, 4vw, 34px)/1.2 var(--ac-font-technical); text-transform: none; letter-spacing: -.02em; margin: 12px 0; }
.experiment-body h3 { font: 600 10px var(--ac-font-mono); text-transform: uppercase; letter-spacing: .08em; margin: 26px 0 10px; }
.experiment-body p { margin: 0 0 16px; font-size: 14px; }
.experiment-kind, .experiment-body .experiment-provenance { color: var(--text-muted); font-size: 11px; overflow-wrap: anywhere; }
.experiment-table-wrap { overflow-x: auto; margin: 24px 0; }
.experiment-body table { width: 100%; border-collapse: collapse; font: 11px/1.6 var(--ac-font-mono); text-align: left; }
.experiment-body caption { text-align: left; padding-bottom: 12px; }
.experiment-body th, .experiment-body td { border-bottom: 1px solid var(--border-rule); padding: 10px 8px; }
.experiment-lesson { border-left: 2px solid var(--ac-blue); padding: 1px 18px; background: var(--surface-card); margin: 24px 0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ac-blue); outline-offset: 4px; }
@media (max-width: 600px) {
  .harness-desktop { display: none; }
  .harness-heading { flex-direction: column; gap: 0; }
  .harness-mobile { display: block; font-size: 13px; }
  .harness-mobile ol { padding-left: 20px; }
  .harness-mobile li { margin: 20px 0; padding-left: 7px; }
  .harness-mobile span, .harness-mobile small { display: block; margin-top: 5px; }
  .harness-mobile small { color: var(--text-muted); }
  .harness-owner { border-bottom: 1px solid var(--border-rule); padding: 14px 0; }
  .harness-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
  .harness-branches p { border: 1px solid var(--border-rule); padding: 10px; font-size: 12px; }
  .harness-branches strong { display: block; font-size: 10px; color: var(--ac-blue); }
  .harness-return { border-top: 1px solid var(--border-rule); padding-top: 16px; }
  .experiment-timeline { padding-left: 18px; }
  .experiment-timeline li::before { left: -23px; }
  .experiment-card { padding: 18px; }
  .experiment-body { padding: 20px 16px; }
  .experiment-dialog-bar { padding: 12px 16px; }
}

.foundation-notebook > p, .foundation-notebook section > p { max-width: 65ch; }
.experiment-archive { margin: 0 0 34px 28px; }
.experiment-archive > summary { cursor: pointer; width: fit-content; padding: 12px 0; font: 11px/1.6 var(--ac-font-mono); color: var(--ac-blue); }
.experiment-archive .experiment-hide, .experiment-archive[open] .experiment-show { display: none; }
.experiment-archive[open] .experiment-hide { display: inline; }
.experiment-archive > .experiment-timeline { margin-left: -28px; }
@media (max-width: 600px) {
  .experiment-archive { margin-left: 18px; }
  .experiment-archive > .experiment-timeline { margin-left: -18px; }
}