/* =========================================================================
   bigaidex.css — the BIGAI Dexterity blog template.
   White, sans (Inter), tight. Four-zone layout: far-left site nav · numbered
   sticky TOC + meta · ~660px content · right-gutter Tufte footnotes. Dark hero
   banner, grey abstract box, task-icon + 2-up video grids, "Figure N" charts,
   citation, More Videos, footer with socials + back-to-blog.
   ========================================================================= */
:root{
  --ink:#1a1a1a; --body:#2a2a2a; --mute:#6b6b6b; --faint:#9a9a9a;
  --rule:#e6e6e6; --box:#f2f2f1; --white:#fff;
  --accent:#e8590c;            /* accent orange */
  --accent-soft:#fde3d1;
  --pill:#fdf0c2;              /* soft yellow highlight pill */
  --navy:#0e1b34;
  --sans:'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono:ui-monospace, Menlo, Consolas, monospace;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px;}
body{margin:0; background:var(--white); color:var(--body); font-family:var(--sans);
  font-size:16px; line-height:1.45; letter-spacing:.01em; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;}   /* page-level safety; drag galleries keep their own overflow-x:auto */
a{color:inherit; text-decoration:none;}
.bd em{font-style:italic;} .bd strong{font-weight:600; color:var(--ink);}
.bd code{font-family:var(--mono); font-size:.82em; background:var(--box); border-radius:3px; padding:1px 5px; color:var(--ink);}
img,video{max-width:100%; display:block;}

/* ---------- 3-zone grid: TOC rail · content · footnote gutter (bigaidex) ----------
   left = meta + TOC (sticky); centre = hero + content; right = an empty gutter
   that the floated margin references drop into. Below 1080px it collapses to one
   stacked column — TOC on top, footnotes at the bottom (see the media query). */
.bd-shell{
  display:grid;
  grid-template-columns:220px minmax(0,684px) 220px;
  grid-template-areas:"side hero hero" "side main .";
  column-gap:44px; row-gap:0; justify-content:center; align-items:start;
  max-width:1264px; margin:0 auto; padding:34px 26px 84px;   /* 1212 tracks + 52 padding, so the content track truly reaches 684px
                                                                (684 = quote cite line 659 + 20 quote inset + buffer — one line, both layouts) */
}
.bd-side{grid-area:side;}
.bd-hero{grid-area:hero;}
.bd-main{grid-area:main; min-width:0;}
/* hairline vertical rules framing the columns (three-zone structure), desktop only.
   align-self:stretch is required — the shell's align-items:start would collapse
   the empty pseudo-elements to zero height. */
@media (min-width:1200px){
  .bd-shell::before,
  .bd-shell::after{content:""; width:1px; background:var(--rule); justify-self:end; align-self:stretch;}
  .bd-shell::before{grid-column:1; grid-row:1 / -1; margin-right:-22px;}  /* TOC ⁄ content */
  .bd-shell::after{grid-column:2; grid-row:2; margin-right:-22px;}        /* content ⁄ footnotes */
}

/* left column — meta (date/author/read) + TOC box; sticky on desktop.
   No overflow clipping and a raised z-index, so the author popover can extend
   past the column and paint ABOVE the content column. */
.bd-side{position:sticky; top:26px; align-self:start; z-index:50;}
.bd-meta{margin:0 0 24px;}
.bd-date{font-size:14px; color:var(--ink); margin:0 0 8px;}
.bd-author{font-size:14px; color:var(--ink); font-weight:500; margin:0 0 10px; position:relative;}
/* hover/tap popover with the full author list (PI-style) */
.bd-authors-trigger{cursor:default; text-decoration:underline dotted; text-decoration-color:var(--faint); text-underline-offset:3px;}
.bd-authors-pop{display:none; position:absolute; left:0; top:calc(100% + 8px); z-index:40;
  /* ← 盒宽旋钮:两个数一起改。≈475 → 作者 3 行;≥~590 → 2 行;544 左右会出孤名 */
  width:620px; max-width:min(92vw,620px); background:var(--white); border:1px solid var(--rule);
  border-radius:3px; box-shadow:0 10px 30px rgba(0,0,0,.10); padding:14px 18px;
  font-size:13px; font-weight:400; line-height:1.75; color:var(--body);}
/* invisible bridge over the 8px gap so hover survives the trip from trigger to card */
.bd-authors-pop::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px;}
.bd-author:hover .bd-authors-pop, .bd-author:focus-within .bd-authors-pop, .bd-author.open .bd-authors-pop{display:block;}
.bd-authors-pop a{color:var(--ink); text-decoration:underline; text-decoration-color:#cfcfcf; text-underline-offset:2px; white-space:nowrap;}
.bd-authors-pop a:hover{color:var(--accent); text-decoration-color:var(--accent);}
.bd-authors-pop sup{font-size:.68em; color:var(--mute);}
.bd-authors-note{display:block; margin-top:8px; font-size:11.5px; color:var(--faint);}
.bd-read{display:inline-block; font-size:12px; color:var(--mute); background:var(--box); border-radius:6px; padding:3px 9px;}
/* PI-style key/value link rows under the byline (Paper / BibTeX) */
.bd-metalinks{margin-top:14px; font-size:13px; display:grid; grid-template-columns:auto 1fr; gap:5px 14px; align-items:baseline;}
.bd-metalinks .k{color:var(--ink);}
.bd-metalinks a{color:var(--ink); text-decoration:underline; text-decoration-color:#cfcfcf; text-underline-offset:2px;}
.bd-metalinks a:hover{color:var(--accent); text-decoration-color:var(--accent);}
.bd-toc-h{font-size:14px; color:var(--ink); margin:0 0 12px;}
.bd-toc{list-style:none; margin:0; padding:0; counter-reset:s;}
.bd-toc>li{counter-increment:s; margin:0 0 7px; font-size:13.5px; line-height:1.4;}
.bd-toc>li>a{color:var(--mute); display:flex; gap:5px;}
.bd-toc>li>a::before{content:counter(s) "."; color:var(--faint); flex:0 0 auto;
  min-width:0.95em; font-variant-numeric:tabular-nums;}   /* fixed marker column — "1." vs "2." width can't shift the labels */
.bd-toc>li>a.active{color:var(--ink); font-weight:600;}
.bd-toc .sub{list-style:none; margin:5px 0 0; padding:0; counter-reset:ss;}
.bd-toc .sub li{counter-increment:ss; margin:4px 0;}
.bd-toc .sub a{color:var(--mute); display:flex; gap:5px; font-size:13px; padding-left:15px;}
.bd-toc .sub a::before{content:counter(ss,lower-alpha) "."; color:var(--faint); flex:0 0 auto; min-width:0.95em;}
.bd-toc .sub a.active{color:var(--ink); font-weight:600;}

/* col 3 — content */
.bd-main{min-width:0;}
.bd-main > * + *{margin-top:0;}
.bd-main p{margin:0 0 18px; color:var(--body);}
/* gen-0-style bullet list: one type-step smaller and tighter than body copy;
   default item shape is a bold lead + explanation */
.bd-list{margin:0 0 18px; padding-left:18px; font-size:14px; line-height:1.35; color:var(--body);}
.bd-list li{margin:0 0 4px;}
.bd-list li::marker{color:var(--ink);}
.bd-list strong{color:var(--ink);}
.bd-main p sup{font-size:.7em; color:var(--body); font-weight:400;}   /* quiet, house style */
/* near-flat heading scale (house trait): headings ≈ body size, weight-differentiated */
.bd h2{font-size:17px; font-weight:600; color:var(--ink); letter-spacing:.01em; margin:36px 0 10px; scroll-margin-top:24px; line-height:1.3;}
.bd h3{font-size:16px; font-weight:600; font-style:italic; color:var(--ink); margin:24px 0 8px; scroll-margin-top:24px;}
.bd .lead{font-size:16.5px;}
.bd a.ref, .bd span.ref{text-decoration:underline; text-underline-offset:2px; text-decoration-color:#cfcfcf;}
.bd a.ref:hover{text-decoration-color:var(--accent); color:var(--accent);}
/* minimal footer at the bottom of the content */
.bd-footer{margin-top:54px; padding-top:20px; border-top:1px solid var(--rule); font-size:12.5px; color:var(--faint);}
.bd-footer .sep{margin:0 14px;}   /* wide dot — the © line and the design credit read as two pieces */
.bd-footer a{text-decoration:underline; text-underline-offset:2px; text-decoration-color:#cfcfcf;}
.bd-footer a:hover{color:var(--accent); text-decoration-color:var(--accent);}
/* TOC box: plain wrapper on desktop, a bordered card when stacked on mobile */
.bd-toc-box{margin:0;}

/* ---------- footnote references (bigaidex): margin notes on wide, list on narrow ----------
   Inline <sup> links to a footnote; the .bd-note right after it floats into the right
   gutter, roughly aligned with its citation. Below 1080px gen.js lifts every .bd-note
   into a "Footnotes" list at the very bottom (single source of truth; degrades to inline
   blocks with no JS). */
.bd-main sup{font-weight:400; color:var(--body); line-height:0;}
.bd-main sup a{color:inherit; text-decoration:none;}
.bd-note{
  float:right; clear:right; width:220px; margin:2px -264px 16px 0;   /* neg right margin (-264 = gap 44 + width 220) pushes it into the empty gutter column */
  font-size:12.5px; line-height:1.5; color:var(--mute);
}
.bd-note::before{
  content:attr(data-n); color:var(--faint); font-weight:500;
  font-size:.85em; vertical-align:super; line-height:0; margin-right:5px;
}
.bd-note a{color:var(--ink); text-decoration:underline; text-decoration-color:#cfcfcf; text-underline-offset:2px;}
.bd-note a:hover{color:var(--accent); text-decoration-color:var(--accent);}
.bd-note a.fn-back{color:var(--faint); text-decoration:none; margin-left:5px;}
.bd-note a.fn-back:hover{color:var(--accent);}
.bd-note:target{background:var(--accent-soft); border-radius:4px; outline:4px solid var(--accent-soft);}
.bd-note{scroll-margin-top:90px;}
sup[id]{scroll-margin-top:90px;}
/* bottom "Footnotes" card — used on narrow (JS relocates the notes here).
   A bordered box like the stacked footnotes design, matching the stacked TOC card. */
.bd-footnotes{margin-top:46px; border:1px solid var(--rule); border-radius:3px; padding:20px 22px;}
/* .bd .bd-fn-h (0-2-0) must out-rank .bd h2 (0-1-1), or the card heading renders 22px */
.bd .bd-fn-h{font-size:14px; font-weight:600; color:var(--ink); margin:0 0 16px; letter-spacing:0;}
.bd-fnlist{list-style:none; margin:0; padding:0;}
.bd-fn-li{margin:0 0 16px;} .bd-fn-li:last-child{margin:0;}
.bd-fn-li .bd-note{float:none; clear:none; width:auto; margin:0; display:block; font-size:13.5px;
  position:relative; padding-left:22px;}          /* hanging number in the left margin, by design */
.bd-fn-li .bd-note::before{position:absolute; left:0; top:.15em; margin:0;}

/* hero banner — white panel with a hairline frame, ink wordmark, brand-red accent */
.bd-hero{position:relative; border-radius:3px; overflow:hidden; background:var(--white);
  border:1px solid var(--rule); color:var(--ink); text-align:center; padding:64px 24px 30px;}
.bd-hero .wm{font-size:clamp(38px,7.6vw,72px); font-weight:800; letter-spacing:-.03em; line-height:1.02; margin:0; overflow-wrap:break-word;}
.bd-hero .wm b{color:var(--accent); font-weight:800;}
.bd-hero .sub{font-size:15px; color:var(--mute); margin:14px 0 0; font-weight:500;}

/* teledexter hero: smaller wordmark, larger standfirst (subtitle may run wider than the wordmark) */
.bd--teledexter .bd-hero .wm{font-size:clamp(31px,5.6vw,56px);}
.bd--teledexter .bd-hero .sub{font-size:clamp(15.5px,1.9vw,19px); margin-top:12px;}
@media (max-width:1199.98px){
  .bd--teledexter .bd-hero .wm{font-size:clamp(29px,7.8vw,46px);}
  .bd--teledexter .bd-hero .sub{font-size:clamp(14.5px,3.4vw,17.5px);}
}

/* abstract grey box — one step above body, standfirst style */
.bd-abstract{background:var(--box); border-radius:3px; padding:20px 24px; margin:22px 0; font-size:17px; line-height:1.5; color:var(--ink);}
.bd-abstract p{margin:0 0 14px;}
.bd-abstract p:last-child{margin-bottom:0;}

/* video figure */
.bd-fig{margin:26px 0;}
.bd-frame{position:relative; border-radius:3px; overflow:hidden; background:#000;
  outline:1px solid rgba(0,0,0,.15); outline-offset:-1px;}
.bd-frame video, .bd-frame img{width:100%; height:auto; display:block;}
.bd-frame.r169 video{aspect-ratio:16/9; object-fit:cover;}
/* native fullscreen must letterbox, never crop (portrait phones) */
.bd-frame video:fullscreen{aspect-ratio:auto; object-fit:contain; background:#000;}
.bd-frame video:-webkit-full-screen{aspect-ratio:auto; object-fit:contain; background:#000;}

/* ---------- custom video controller (pi0-style strip, accent-orange) ----------
   bigaidex.js injects a .bd-vc bar into every video's frame. Visible while the
   clip is paused (or being scrubbed) and on hover; ambient autoplay clips stay
   clean until the pointer arrives. */
.bd-hasvc{position:relative;}
.bd-vc{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:8px;
  padding:4px 8px; background:rgba(252,251,249,.94);
  opacity:0; pointer-events:none; transition:opacity .18s ease;}
.bd-hasvc:hover .bd-vc, .bd-vc.on{opacity:1; pointer-events:auto;}
.bd-vc button{display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  border:0; padding:0; background:none; color:var(--ink); cursor:pointer;}
/* the accent play square must out-rank `.bd-vc button`'s background:none */
.bd-vc button.bd-vc-play{width:22px; height:22px; border-radius:6px; background:var(--accent); color:#fff;}
.bd-vc-play svg{width:10px; height:10px;}
.bd-vc-time,.bd-vc-dur{flex:0 0 auto; font-family:var(--mono); font-size:11px; color:var(--ink); font-variant-numeric:tabular-nums;}
.bd-vc-track{flex:1 1 auto; min-width:24px; height:14px; display:flex; align-items:center; cursor:pointer; touch-action:none;}
.bd-vc-rail{position:relative; width:100%; height:4px; border-radius:999px; background:rgba(0,0,0,.16);}
.bd-vc-fill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px; background:var(--accent);}
.bd-vc-knob{position:absolute; left:0; top:50%; width:11px; height:11px; border-radius:4px; transform:translate(-50%,-50%);
  background:#fff; border:1px solid rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,.22);}
.bd-vc-fs svg{width:14px; height:14px;}
.bd-vc-fs:hover{color:var(--accent);}
/* mute toggle (sound-bearing players only): plain icon in both states */
.bd-vc-mute{width:24px; height:24px; border-radius:6px;}
.bd-vc-mute svg{width:15px; height:15px;}
.bd-vc-mute:hover{color:var(--accent);}
.bd-vc.micro .bd-vc-mute{display:none;}
/* narrow clips (gallery cards, strip items): drop the time labels, then the fs button */
.bd-vc.mini .bd-vc-time, .bd-vc.mini .bd-vc-dur{display:none;}
.bd-vc.micro{gap:6px; padding:3px 6px;}
.bd-vc.micro .bd-vc-time, .bd-vc.micro .bd-vc-dur, .bd-vc.micro .bd-vc-fs{display:none;}
.bd-vc.micro .bd-vc-play, .bd-vc.micro button.bd-vc-play{width:19px; height:19px; border-radius:5px;}
/* buffering mask: dark veil + mono "Loading…" while playback outruns the network */
.bd-vload{position:absolute; inset:0; z-index:2; display:none; align-items:center; justify-content:center;
  background:rgba(8,8,8,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  color:#fff; font-family:var(--mono); font-size:13.5px; letter-spacing:.12em; pointer-events:none;}
.bd-hasvc.loading .bd-vload{display:flex;}
/* fullscreen on the WRAPPER (keeps the custom bar): letterbox, never crop */
.bd-hasvc:fullscreen{width:100%; height:100%; background:#000; border-radius:0;}
.bd-hasvc:fullscreen video{width:100%; height:100%; aspect-ratio:auto; object-fit:contain;}
.bd-hasvc:-webkit-full-screen{width:100%; height:100%; background:#000; border-radius:0;}
.bd-hasvc:-webkit-full-screen video{width:100%; height:100%; aspect-ratio:auto; object-fit:contain;}
/* our clips carry a burned-in speed badge bottom-left, so our mode label sits top-left */
.bd-badge{position:absolute; left:10px; top:10px; font-size:10.5px; color:#fff; background:rgba(20,20,20,.5); padding:2px 8px; border-radius:2px; letter-spacing:.03em; text-transform:uppercase;}
.bd-wm{position:absolute; right:10px; bottom:10px; font-size:11px; color:rgba(255,255,255,.7);}
.bd-cap{font-size:13px; color:var(--mute); margin-top:9px;}
.bd-cap b{color:var(--ink); font-weight:600;}

/* grey callout (capability definitions) */
.bd-callout{background:var(--box); border-radius:3px; padding:20px 26px; margin:22px 0;}
.bd-callout p{margin:0 0 14px;} .bd-callout p:last-child{margin:0;}
.bd-callout b{color:var(--ink); font-weight:600;}

/* pull-quote / epigraph */
.bd-quote{margin:22px 0; padding:3px 0 3px 18px; border-left:2px solid var(--accent);
          font:italic 400 16px/1.62 var(--sans); color:#3a3734;}
.bd-quote p{margin:0;}
.bd-quote-by{display:block; margin-top:11px; font:400 12.5px/1.5 var(--sans); font-style:normal; color:var(--mute);}
.bd-quote-by em{font-style:italic;}
.bd-quote-by a{color:var(--mute); text-decoration:none; border-bottom:1px solid var(--rule);}
@media (max-width:620px){ .bd-quote{font-size:15.5px; padding-left:16px;} }

/* task-icon header */
.bd-task{text-align:center; margin:34px 0 14px;}
.bd h3 + .bd-task{margin-top:10px;}   /* tuck under its own heading, don't attach to the block above */
.bd-task .ic{font-size:30px; line-height:1;}
.bd-task .nm{font-size:16px; font-weight:600; color:var(--ink); margin-top:6px;}

/* 2-up video grid */
.bd-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0;}
@media (max-width:620px){ .bd-grid2{grid-template-columns:1fr;} }

/* draggable horizontal gallery ("drag to see many results") */
.bd-drag-wrap{margin:16px 0; max-width:100%;}
/* grid scroll-container (stays bounded to its block parent, unlike a flex row) */
.bd-drag{display:grid; grid-auto-flow:column; grid-auto-columns:min(70%,340px); gap:14px;
  max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:12px;
  cursor:grab; scrollbar-width:thin;}   /* no scroll-snap — dragging stays continuous */
.bd-drag.dragging{cursor:grabbing;}
.bd-drag > figure{margin:0;}
/* videos stay hit-testable so right-click offers the native "Show controls" menu;
   the drag handler ignores non-left buttons */
.bd-drag-hint{font-size:12px; color:var(--mute); margin-top:2px; display:flex; align-items:center; gap:6px;}
/* hint-less gallery (:::gallery hint=0): the stage-list {cap} hugs the row */
.bd-drag-wrap.nohint{margin-bottom:0;}
.bd-drag-wrap.nohint .bd-drag{padding-bottom:6px;}
.bd-drag-wrap.nohint + .bd-smallcap{margin-top:-2px;}

/* figure (chart) block — faint tinted panel, no border (house style) */
.bd-figure{border:none; border-radius:3px; padding:18px; margin:24px 0; background:rgba(0,0,0,.03);}
.bd-figure .bdc-svg, .bd-figure .bdm-grid4{margin:0 auto;}
.bd-img{width:100%; height:auto; display:block; border-radius:2px;}
.bd-figcap{font-size:13px; color:var(--mute); margin-top:12px;}
.bd-figcap b{color:var(--ink); font-weight:600;}
/* filmstrip row: mixed portrait/landscape clips at equal height (:::strip in md) */
.bd-strip{position:relative; display:flex; gap:6px; margin:0 0 10px;}
.bd-strip > .bd-badge{position:absolute; top:10px; left:10px; z-index:2;}
.bd-strip-item{position:relative; margin:0; min-width:0; border-radius:3px; overflow:hidden; background:#000;}
.bd-strip-item video{width:100%; height:100%; object-fit:cover; display:block;}
/* standalone small caption paragraph ({cap} in md) — e.g. stage lists under a task row */
.bd-smallcap{font-size:13px; line-height:1.5; color:var(--mute); margin:-8px 0 18px;}
.bd-smallcap b{color:var(--ink); font-weight:600;}

/* stage-wise small multiples inside a figure */
.bdm-grid4{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media (max-width:620px){ .bdm-grid4{grid-template-columns:1fr;} }
.bdm-fig{margin:0;}
.bdm-svg{width:100%; height:auto; display:block; font-family:var(--sans);}
.bdm-grid{stroke:#eee; stroke-width:1;}
.bdm-ax{font-size:11px; fill:#6b6b6b;}
.bdm-base{fill:none; stroke:#c9c9c9; stroke-width:1.3;}
.bdm-ours{fill:none; stroke:var(--accent); stroke-width:2.6;}
.bdm-odot{fill:var(--accent); stroke:#fff; stroke-width:1;}
/* white halo so the end label survives crossing the series line */
.bdm-oval{font-size:11px; font-weight:700; fill:var(--accent); paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round;}
.bdm-cap{font-size:12px; color:var(--mute); margin-top:7px;}
/* results table (figure snippet); wrapper scrolls sideways on narrow screens */
.bdm-tablewrap{overflow-x:auto;}
.bdm-table{width:100%; border-collapse:collapse; font-size:12px; line-height:1.4; color:var(--body); white-space:nowrap;}
.bdm-table th, .bdm-table td{padding:5px 6px; text-align:center;}
.bdm-table thead th{font-weight:600; color:var(--ink); border-bottom:1.5px solid var(--ink);}
.bdm-table tbody td{border-bottom:1px solid var(--rule);}
.bdm-table th:first-child, .bdm-table td:first-child{text-align:left;}
.bdm-table .ours{color:var(--accent); font-weight:600;}
.bdm-table tr.avg td{font-weight:600; color:var(--ink); border-bottom:none;}
.bdm-table tr.avg td.ours{color:var(--accent);}
/* dominance chart */
.bdc-svg{width:100%; height:auto; display:block; font-family:var(--sans);}
.bdc-title{font-size:15px; font-weight:600; fill:var(--ink);}
.bdc-grid{stroke:#eaeaea; stroke-width:1;}
.bdc-ax,.bdc-axtitle{font-size:12.5px; fill:var(--mute);}
.bdc-bar{fill:#c4c4c4;} .bdc-bar-2{fill:#9aa7b8;} .bdc-bar-ours{fill:var(--accent);}
.bdc-val{font-size:13px; font-weight:600; fill:var(--mute); paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round;}
.bdc-val-ours{font-size:15px; font-weight:700; fill:var(--accent);}
.bdc-cat{font-size:13px; fill:var(--mute);} .bdc-cat-ours{fill:var(--ink); font-weight:600;}
/* narrow: the SVGs scale ~0.45x, so boost chart type in viewBox units to stay legible */
@media (max-width:620px){
  .bdc-title{font-size:18px;}
  .bdc-ax,.bdc-axtitle{font-size:15px;}
  .bdc-cat,.bdc-val{font-size:15px;}
  .bdc-val-ours{font-size:18px;}
  .bdm-ax{font-size:12px;} .bdm-oval{font-size:12px;}
}

/* mini SR bars (per-task / cross-embodiment inline) */
.bd-bars{display:grid; gap:11px; margin:16px 0;}
.bd-bar{display:grid; grid-template-columns:170px 1fr auto; gap:12px; align-items:center; font-size:13.5px;}
.bd-bar .l{color:var(--ink);}
.bd-bar .t{height:9px; background:var(--box); border-radius:3px; overflow:hidden;}
.bd-bar .t span{display:block; height:100%; background:var(--accent);}
.bd-bar .t span.g{background:#c4c4c4;}
.bd-bar .v{font-variant-numeric:tabular-nums; color:var(--mute); white-space:nowrap;}
.bd-bar .v b{color:var(--accent); font-weight:600;}

/* citation — a real <pre>, so copied text is valid BibTeX and long lines scroll.
   Light grey mono panel (house style), no syntax colouring. */
.bd-citewrap{position:relative; margin:16px 0;}
.bd-citewrap .bd-citebox{margin:0;}
.bd-copy{position:absolute; top:10px; right:10px; font:500 11.5px/1 var(--sans); color:var(--mute);
  background:var(--white); border:1px solid var(--rule); border-radius:5px; padding:6px 10px; cursor:pointer;}
.bd-copy:hover{color:var(--ink); border-color:var(--faint);}
.bd-copy.ok{color:var(--accent); border-color:var(--accent-soft);}
.bd-citebox{background:var(--box); color:var(--ink); border-radius:3px; padding:20px 22px; margin:16px 0; font-family:var(--mono); font-size:12.5px; line-height:1.75; overflow-x:auto; white-space:pre;}
.bd-citebox .k{color:inherit;}

/* reveal */
.reveal{opacity:1;}
.js .reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease;}
.js .reveal.in{opacity:1; transform:none;}

/* ---------- responsive: wide = TOC rail + content + footnote gutter; narrow = one
   stacked column ---------- Breakpoint aligned with the reference template: a
   6-track grid at min-width:1200px and collapses to a single stacked column at
   ≤1199px (footnotes flow last = at the bottom). Narrow order here:
   meta → hero → TOC box → content → footnotes at the very bottom. */
@media (max-width:1199.98px){
  .bd-shell{
    display:flex; flex-direction:column; gap:0;
    max-width:724px; padding:22px 20px 60px;   /* 684px column + padding — same text width as the wide 3-column layout */
    align-items:stretch;   /* override the grid rule's align-items:start — every stacked
                              card (meta / hero / TOC / main) spans the full column width */
  }
  /* let every descendant shrink to the viewport (fixes the mobile right-overflow) */
  .bd-side, .bd-meta, .bd-toc-box, .bd-hero, .bd-main{ min-width:0; max-width:100%; }
  .bd-main *{ min-width:0; }
  .bd-side{ display:contents; }                    /* dissolve so meta/TOC reorder around the hero */
  .bd-meta{ order:1; margin:0 0 16px; }
  .bd-hero{ order:2; padding:44px 20px 26px; }
  .bd-hero .wm{ font-size:clamp(34px,11vw,58px); }
  .bd-toc-box{ order:3; border:1px solid var(--rule); border-radius:3px; padding:16px 18px; margin:18px 0 4px; }
  .bd-main{ order:4; }
  /* references un-float; gen.js lifts them into the bottom Footnotes list (this is
     the no-JS fallback: they simply appear inline after their citation) */
  .bd-note{ float:none; clear:none; width:auto; margin:6px 0; display:block; }
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .js .reveal{opacity:1; transform:none; transition:none;} }

/* =========================================================================
   Physical-Intelligence variant — same white/sans/tight tokens, but a wide
   single centred column with NO sidebar TOC and NO footnote gutter.
   ========================================================================= */
.pi-topbar{max-width:940px; margin:0 auto; padding:20px 26px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--rule);}
.pi-topbar .brand{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); font-size:16px;}
.pi-topbar nav{display:flex; gap:20px; font-size:14px; color:var(--mute);}
.pi-topbar nav a:hover{color:var(--accent);}
.pi-shell{max-width:820px; margin:0 auto; padding:34px 26px 90px;}
.pi-shell.wide{max-width:940px;}
.pi-shell .bd-head{margin:8px 0 26px;}
.pi-shell .bd-kicker{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 12px;}
.pi-shell h1{font-size:clamp(34px,5.4vw,52px); font-weight:700; letter-spacing:-.022em; line-height:1.05; color:var(--ink); margin:0 0 14px;}
.pi-shell .bd-dek{font-size:19px; color:var(--mute); margin:0 0 16px; max-width:40ch;}
.pi-shell .bd-meta{font-size:13px; color:var(--mute);}
.pi-shell h2{font-size:25px; margin-top:46px;}
.pi-shell section + section{border-top:1px solid var(--rule); padding-top:8px; margin-top:20px;}
/* PI has no gutter → side-notes fold into inline grey boxes */
.pi-shell .bd-note{float:none; width:auto; margin:10px 0; padding:11px 15px; background:var(--box); border-radius:6px;}
/* PI galleries breathe wider */
.pi-shell .bd-drag{grid-auto-columns:min(58%,400px);}
.pi-shell .bd-figure{padding:22px;}
/* PI mobile: full-width column, smaller display type, bars stack */
@media (max-width:760px){
  .bd{overflow-x:clip;}
  .pi-shell, .pi-shell *{min-width:0;}          /* let everything shrink to fit the viewport */
  .pi-shell .bd-citebox{font-size:11px;}
  .pi-topbar, .pi-shell, .pi-shell.wide{max-width:100%; width:100%;}
  .pi-topbar{padding:16px 18px 14px;}
  .pi-shell{padding:24px 18px 72px;}
  .pi-shell h1{font-size:clamp(26px,7.6vw,40px); line-height:1.1;}
  .pi-shell .bd-dek{font-size:16.5px;}
  .pi-shell h2{font-size:22px; margin-top:36px;}
  .pi-shell .bd-drag{grid-auto-columns:82%;}
}
/* narrow: the mini SR bars stack (label over track) so they never overflow */
@media (max-width:560px){
  .bd-bar{grid-template-columns:1fr auto; row-gap:4px;}
  .bd-bar .l{grid-column:1 / -1;}
}