/* ─────────────────────────────────────────────────────────────────────────────
   brand-io's OWN sheet. It is not the shared area sheet: 107 rules the others do not have (the `.lc` library card, `.fxcell.is-card`, `.hc`, `.rl-stats`) and 9 it does not (the whole `.io-nav` bottom bar, which this page has no element for).

   The source's own bytes, unedited, so a diff against the original is a diff of
   markup only. Linked by the page whose site.pages.stylesheet names it — see
   app/(area)/areas/[slug]/page.tsx for why this is per PAGE and not per route
   group.
   carried by 1 page(s)
   ──────────────────────────────────────────────────────────────────────────── */


/* ============================================================
   GALLERY CHROME  — the sheet the heroes sit on
   ============================================================ */
:root{
  /* the sticky area bar's height. Declared here and not on .area-nav so the
     heroes can read it too: they clear the bar by exactly this. */
  --nav-h:51px;
  /* and the second bar parked under it. It is the same bar again, so it is
     the same height — the stack is --nav-h twice. This is the value the page
     is laid out with before the script runs; once the bar has mounted the
     script overwrites it with what the bar MEASURES, and writes 0 on a page
     that turned out to have nothing worth indexing. */
  --sub-h:51px;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Inter,Arial,sans-serif;
  --io-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  --io-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --page:#F8F7F6; --line:#EEEDEA; --nm:#37352F;
  /* the black cover's light-template variant reads these two */
  --bar:#F0EFED; --colhead:#73706B;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--page);color:var(--nm);font-family:var(--ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
main{padding:0 0 96px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

.toc{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 46px;background:#fff}
.toc table{border-collapse:collapse;width:100%}
.toc caption{font:600 11px/16px var(--ui);letter-spacing:.05em;color:#9B9A97;text-align:left;
     padding:11px 14px 10px;background:#FBFAF9;border-bottom:1px solid var(--line)}
.toc th{font:600 10.5px/15px var(--ui);letter-spacing:.05em;color:#A3A19E;text-align:left;
     padding:7px 14px;border-bottom:1px solid var(--line);text-transform:uppercase}
.toc td{font:400 12.5px/18px var(--ui);color:#5F5E5B;padding:7px 14px;border-bottom:1px solid var(--line)}
.toc tr:last-child td{border-bottom:0}
.toc td.c{font:600 11px/16px var(--io-mono);color:#B4531A;width:52px}
.toc td.c a{text-decoration:none}
.toc td.k{font:400 11.5px/16px var(--io-mono);color:#A3A19E;width:210px;white-space:nowrap}
.toc td a{color:inherit;text-decoration:none}
.toc td a:hover{text-decoration:underline}
.toc tr:hover td{background:#FCFBFA}

.blab{font:600 11px/16px var(--io-mono);color:#787774;letter-spacing:.05em;
      margin:44px 0 11px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;scroll-margin-top:16px}
.blab .id{font:600 11px/16px var(--io-mono);color:#B4531A;background:#FDF0E6;
      border:1px solid #F4DAC2;border-radius:5px;padding:1px 6px;letter-spacing:.05em}
.blab em{font-style:normal;font-weight:400;color:#B0AFAC;letter-spacing:0;
      font-family:var(--ui);font-size:11.5px}
.spec{font:400 11.5px/18px var(--io-mono);color:#A3A19E;margin:-4px 0 12px;max-width:820px}
.spec b{font-weight:500;color:#787774}
.spec i{font-style:normal;color:#C9C7C4;padding:0 4px}

/* no frame — each hero runs the full width of the window, as it does on the
   source page. .hb is nothing but the token scope and the ground under it. */
.hb{width:100%}

/* ============================================================
   THE AREA BAR  (.area-nav)  — the index, as a sticky rail
   ============================================================
   What was a 66-cell matrix under a 64px headline is now a bar that stays at
   the top of the window: the same 65 links, in the same order, scrolling
   sideways instead of wrapping. The prose that introduced the page went with
   it — on a page this long an intro is read once and then scrolled past
   forever, while a way back to any area is wanted the whole way down.

   `position:sticky` and not `fixed`. Fixed would take the bar out of flow and
   the first hero would start underneath it. Sticky keeps its space in the
   document, so the page below begins where it always did.

   THAT IS NOT ENOUGH ON ITS OWN, and the first version of this assumed it was.
   Keeping its space fixes the INITIAL layout; it does nothing for an anchor
   jump, which still scrolls the target to viewport 0 — under the bar. Measured:
   the hero landed at top 0 with the bar's bottom edge at 51. So the heroes
   carry `scroll-margin-top`, off the same `--nav-h` the bar is sized by, and
   the two cannot drift apart.

   It carries `id="top"`, which the "all areas" link on every label band already
   points at, so those 65 links keep working without being touched. */
.area-nav{position:sticky;top:0;z-index:80;display:flex;align-items:stretch;
  background:rgba(10,10,10,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid #272727;
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif}
.an-brand{flex:none;display:flex;align-items:center;gap:9px;padding:0 18px 0 24px;
  font:600 13px/1 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.01em;color:#fff;
  border-right:1px solid #272727;white-space:nowrap}
.an-brand em{font-style:italic;font-weight:500;color:#FF9013}
.an-brand b{font:600 10px/1 var(--io-mono);letter-spacing:.1em;color:#7A7A7A;
  border:1px solid #272727;border-radius:20px;padding:4px 8px}

/* the viewport, with the two fades that say there is more either way */
.an-vp{position:relative;flex:1;min-width:0}
.an-vp::before,.an-vp::after{content:"";position:absolute;top:0;bottom:0;width:44px;
  pointer-events:none;z-index:3}
.an-vp::before{left:0;background:linear-gradient(90deg,rgba(10,10,10,.94),transparent)}
.an-vp::after{right:0;background:linear-gradient(270deg,rgba(10,10,10,.94),transparent)}

.an-scroll{display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.an-scroll::-webkit-scrollbar{display:none}

/* ---- the bar, made endless ---------------------------------------
   Two properties have to be off for the wrap in the script below to
   stay invisible. A proximity snap would re-aim the bar in the frame
   right after a wrap, and a smooth scroll-behaviour would animate the
   wrap itself — either one turns a seam nobody can see into a visible
   twitch. `overscroll-behavior-x` keeps a trackpad swipe that runs on
   past the chips from being read as a browser Back. */
.an-scroll.an-loop{scroll-snap-type:none;scroll-behavior:auto;overscroll-behavior-x:contain}
.an-scroll.an-loop .an{scroll-snap-align:none}

/* ---- and made to read as a ring ----------------------------------
   Endless is a fact about the scroll; a ring is a thing you can see.
   So the chips no longer stop dead at the two edges — they turn away
   from you and go round the back.

   Each chip carries its OWN `perspective()` rather than the bar
   carrying one for all of them. It has to: `overflow-x:auto` on the
   scroller forces `transform-style:flat`, so a single shared 3D space
   is not available here. At a chip's size the difference between one
   projection and 65 is not visible — what you read either way is a
   surface curving off.

   The angle per chip is written by the script, off how near an edge
   it is. What the stylesheet owns is the axis it turns about and the
   two fades — widened from 44px to the depth of the turn, so the far
   side of the ring dissolves into the bar's own black instead of
   being sliced flat by the edge of it. */
.an-scroll.an-ring .an{transform-origin:50% 50%}
.an-vp.an-ring::before,.an-vp.an-ring::after{width:150px}
.an-vp.an-ring::before{background:linear-gradient(90deg,#0A0A0A 4%,rgba(10,10,10,.55) 40%,transparent 82%)}
.an-vp.an-ring::after{background:linear-gradient(270deg,#0A0A0A 4%,rgba(10,10,10,.55) 40%,transparent 82%)}

.an{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;gap:5px;
  justify-content:center;padding:11px 16px;border-right:1px solid #1F1F1F;
  text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 0 0 0 #FF9013;transition:background .15s,box-shadow .15s}
.an:hover{background:#151515;box-shadow:inset 0 -2px 0 0 #FF9013}
.an-n{font:400 9.5px/1 var(--io-mono);letter-spacing:.1em;color:#5A5A5A}
.an:hover .an-n{color:#FF9013}
.an-t{font:600 13.5px/1 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.015em;color:#fff}
/* the one rule that matters: only the mark is orange, and it is italic */
.an-t em{font-style:italic;font-weight:500;color:#FF9013}
/* the chip for the page you are on */
.an[aria-current="page"]{background:#151515;box-shadow:inset 0 -2px 0 0 #FF9013}
.an[aria-current="page"] .an-n{color:#FF9013}
.an-brand{text-decoration:none}
.an-brand:hover em{color:#FF7A00}

/* the mark, in front of the wordmark — its own link, back to the areas landing page */
.an-home{flex:none;display:flex;align-items:center;padding:0 0 0 20px;
  text-decoration:none;line-height:0}
.an-home svg{display:block;width:22px;height:22px;
  transition:opacity .15s ease,transform .15s ease}
.an-home:hover svg{opacity:.85;transform:scale(1.06)}
.an-home + .an-brand{padding-left:10px}
@media(max-width:760px){
  .an-home{padding-left:14px}
  .an-home svg{width:19px;height:19px}
  .an-home + .an-brand{padding-left:8px}
}


/* what the bar costs every anchor on the page */
.hb .fl-hero{scroll-margin-top:calc(var(--nav-h) + var(--sub-h))}
.blab{scroll-margin-top:calc(var(--nav-h) + var(--sub-h))}

@media(max-width:760px){
  :root{--nav-h:47px;--sub-h:47px}
  .an-brand{padding:0 12px 0 16px;font-size:12px}
  .an-brand b{display:none}
  .an{padding:9px 13px}
  .an-t{font-size:12.5px}
}

/* ---- the second bar: the first bar, mounted again ----
   What used to sit here was a different bar — its own ground, its own chip,
   its own two type sizes, half the height of the one above it and a ticker
   that drove itself sideways. Two bars that are not the same bar have to be
   kept the same by hand, and were not: the chip up top carried its number
   above its name, the chip down here carried it beside; the mark was #FF9013
   up top and #C97A28 down here. That is all gone, and what replaces it is
   the bar above, MOUNTED A SECOND TIME.

   So this rule is two lines long, and that is the point of it. The second
   bar carries `.area-nav` and its chips carry `.an`, which means every rule
   above already describes it — the black ground and its blur, the brand cell
   and its count, the number over the name, the mark in orange italic, the
   underline on hover, the endless strip and the ring it bends into at both
   ends. Nothing here restates any of that, so nothing here can drift from it.

   What is actually different about the second bar is two numbers and a feed:
   it parks against the first one's underside rather than the top of the
   window, it sits one step below it in the stack, and where the bar above is
   the same 65 links on every page of this site, this one is built at load out
   of whatever sections the page it is on actually has. The feed is the
   script's business; the two numbers are this rule.

   The two bars are therefore the same height, and the sticky stack is
   `--nav-h` twice — which is what every anchor below clears. A page with
   nothing worth indexing mounts no second bar, and the script sets `--sub-h`
   to 0 so those anchors do not clear a bar that is not there. */
.area-nav.is-sub{top:var(--nav-h);z-index:79}

/* And everything the second bar points at clears both of them.

   Two rules below already give that clearance to the heroes and the label
   bands, because until now those were the only things anything linked to.
   The second bar links to whatever the page is made of — a panel, a rail, a
   named row inside a rail — and none of that had ever been a scroll target,
   so a chip scrolled its section to the top of the WINDOW and both bars sat
   on top of it. Measured on Context IO: Agent Libraries landed at 0 with
   102px of bar over it.

   Keyed to the attribute the script writes as it indexes a section, rather
   than to a list of the classes it happens to index today. The bar and the
   clearance are then the same decision made once: anything that gets a chip
   gets the offset, and a shape added to the table of contents tomorrow
   cannot arrive without it. */
[data-toc]{scroll-margin-top:calc(var(--nav-h) + var(--sub-h))}

/* The arrival. A new page brings a new set of chips in the second bar, and a
   set that is simply already there reads as a glitch — the bar above is the
   same 65 links you were just looking at, so only this one has anything to
   announce. A third of a second, once, and `both` so the end state stays
   applied: if the script never runs, nothing is left invisible. */
.area-nav.is-sub .an-scroll{animation:an-in .34s ease-out both}
@keyframes an-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.area-nav.is-sub .an-scroll{animation:none}}
/* ============================================================
   IO TOKENS  — scoped to .hb, not :root, so the sheet stays light
   ============================================================ */
.hb{
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;
  --font-display:"Space Grotesk","IBM Plex Sans",system-ui,sans-serif;

  --wf-brand:#FF9013;--wf-brand-hover:#FF7A00;--wf-brand-fg:#0A0A0A;
  --wf-brand-muted:rgba(255,144,19,.12);--wf-brand-glow:rgba(255,144,19,.06);
  --wf-brand-ring:rgba(255,144,19,.35);--wf-brand-border:rgba(255,144,19,.24);
  --wf-bg:#0A0A0A;--wf-bg-elevated:#151515;--wf-bg-sunken:#060606;
  --wf-surface:#151515;--wf-surface-2:#1C1C1C;
  --wf-fg:#FFFFFF;--wf-fg-muted:#B4B4B4;--wf-fg-subtle:#7A7A7A;--wf-fg-faint:#5A5A5A;
  --wf-border:#272727;--wf-border-strong:#3A3A3A;--wf-border-subtle:#1F1F1F;
  --io-accent:#FF9013;--io-accent-2:#FF4C29;--io-accent-soft:rgba(255,144,19,.12);

  background:var(--wf-bg);color:var(--wf-fg);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;
}
.hb.light{
  color-scheme:light;
  --wf-brand:#E56E00;--wf-brand-hover:#CC6200;--wf-brand-fg:#FFFFFF;
  --wf-brand-muted:rgba(255,144,19,.14);--wf-brand-glow:rgba(255,144,19,.09);
  --wf-bg:#FFFFFF;--wf-bg-elevated:#FFFFFF;--wf-bg-sunken:#FAFAFA;
  --wf-surface:#FFFFFF;--wf-surface-2:#F5F5F5;
  --wf-fg:#0A0A0A;--wf-fg-muted:#4A4A4A;--wf-fg-subtle:#8A8A8A;--wf-fg-faint:#A8A8A8;
  --wf-border:#E4E4E4;--wf-border-strong:#D4D4D4;--wf-border-subtle:#EFEFEF;
  --io-accent:#E56E00;--io-accent-2:#FF4C29;--io-accent-soft:rgba(255,144,19,.14);
}
.hb a{color:inherit;text-decoration:none}
.hb h1,.hb h2,.hb h3{font-family:var(--font-display);letter-spacing:-.02em}
.hb .container{max-width:1200px;margin:0 auto;padding:0 24px}
.hb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;
  border-radius:8px;font-size:15px;font-weight:600;white-space:nowrap;border:1px solid transparent;
  transition:.16s;cursor:pointer;font-family:var(--font-sans);line-height:1.2}
.hb .btn-lg{padding:14px 28px;font-size:16px}
.hb .btn-accent{background:linear-gradient(135deg,var(--wf-brand),var(--io-accent-2));color:#fff}
.hb .btn-accent:hover{filter:brightness(1.08)}
.hb .btn-secondary{border-color:var(--wf-border-strong);color:var(--wf-fg);background:transparent}
.hb .btn-secondary:hover{border-color:var(--wf-brand);color:var(--wf-brand)}

/* ============================================================
   SVG PLACEHOLDER SYSTEM  (.ph)
   ============================================================ */
.hb .ph{position:relative;overflow:hidden;border-radius:16px;background:
  radial-gradient(120% 120% at 20% 0%,var(--wf-surface-2),var(--wf-bg-sunken)),var(--wf-surface);
  border:1px solid var(--wf-border);display:block}
.hb .ph::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--wf-brand-glow) 1px,transparent 1px),
                   linear-gradient(90deg,var(--wf-brand-glow) 1px,transparent 1px);
  background-size:34px 34px;opacity:.9}
.hb .ph .ph-art{position:absolute;inset:0;width:100%;height:100%}
.hb .ph .ph-wm{position:absolute;right:12px;bottom:12px;z-index:3;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.04em;color:var(--wf-fg-subtle);opacity:.8}
.hb .ph-puck{position:absolute;right:14px;bottom:44px;z-index:3;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--wf-bg) 60%,transparent);
  border:1px solid var(--wf-border);color:var(--wf-fg)}
.hb .ph-puck svg{width:15px;height:15px}

/* ============================================================
   THE HEADING SECTION  (.fl-hero)  — lifted verbatim from the source
   ============================================================ */
.hb .fl-hero{position:relative;padding:44px 0 72px;overflow:hidden;
  --arch-h:clamp(260px,27vw,420px);--arch-ar:3/2;--arch-ov:calc(var(--arch-h) * .20)}
.hb .fl-hero::before{content:"";position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:1100px;height:760px;background:radial-gradient(closest-side,var(--wf-brand-glow),transparent 70%);
  pointer-events:none;z-index:0}
.hb .fl-hero .container{position:relative;z-index:1;overflow:visible}

.hb .fl-arch{display:flex;justify-content:center;align-items:flex-start;width:100%;min-width:0}
.hb .fl-arch .ph{flex:none;border-radius:14px;aspect-ratio:var(--arch-ar);
  height:calc(var(--arch-h) * var(--s));margin-top:var(--o);position:relative;z-index:var(--z);
  box-shadow:0 18px 50px rgba(0,0,0,.55)}
.hb.light .fl-arch .ph{box-shadow:0 18px 50px rgba(15,15,15,.16)}
/* the wordmark is hard-coded #FFF because it sits on dark media; under the light
   token set the media is light too, so it takes the foreground token instead. */
.hb.light .fl-hero-stack h1{color:var(--wf-fg);text-shadow:0 6px 34px rgba(255,255,255,.75)}
.hb.light .fl-hero-stack .btn{box-shadow:0 16px 40px rgba(15,15,15,.18)}
.hb .fl-arch .ph + .ph{margin-left:calc(var(--arch-ov) * -1)}

.hb .fl-hero-stack{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:6;text-align:center}
.hb .fl-hero-stack h1{font-family:var(--font-display);font-weight:700;
  font-size:clamp(72px,15vw,210px);letter-spacing:-.04em;line-height:.9;color:#fff;
  text-shadow:0 10px 50px rgba(0,0,0,.7);pointer-events:none}
.hb .fl-hero-stack h1 em{font-style:italic;font-weight:500;color:var(--io-accent)}
.hb .fl-hero-stack .btn{margin-top:clamp(18px,2.4vw,32px);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.hb .fl-hero-stack h1.two{font-size:clamp(64px,13vw,168px);line-height:.86}
/* `.hb .fl-h2` was the "Every IO area" headline; it went with the index
   section. `.fl-eyebrow` and `.fl-lead` stay — the wm-lead arrangement
   still uses both. */
.hb .fl-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wf-fg-subtle);text-align:center}
.hb .fl-lead{max-width:640px;margin:20px auto 0;text-align:center;color:var(--wf-fg-muted);
  font-size:18px;line-height:1.55}
.hb .fl-hero-stack .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.hb .fl-hero-stack .row .btn{margin-top:0}

/* ---- arrangement modifiers ---- */
.hb .fl-hero.wm-left .fl-hero-stack{text-align:left;padding-left:clamp(24px,6vw,90px)}
.hb .fl-hero.wm-lead .fl-hero-stack h1{margin-top:8px}
.hb .fl-hero.wm-lead .fl-hero-stack .fl-eyebrow,
.hb .fl-hero.wm-lead .fl-hero-stack .fl-lead{text-shadow:0 2px 18px rgba(0,0,0,.85)}
.hb.light .fl-hero.wm-lead .fl-hero-stack .fl-eyebrow,
.hb.light .fl-hero.wm-lead .fl-hero-stack .fl-lead{color:#fff}
.hb .fl-hero.wm-stroke .fl-hero-stack h1{color:transparent;-webkit-text-stroke:2px #fff;
  text-shadow:0 10px 50px rgba(0,0,0,.55)}
.hb .fl-hero.wm-stroke .fl-hero-stack h1 em{-webkit-text-stroke:0;color:var(--io-accent)}
.hb .fl-hero.wm-grad .fl-hero-stack h1{background:linear-gradient(180deg,#FFFFFF 30%,#8A8A8A);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 10px 40px rgba(0,0,0,.6))}
.hb .fl-hero.wm-grad .fl-hero-stack h1 em{-webkit-text-fill-color:var(--io-accent)}
.hb .fl-hero.wm-under{padding-bottom:86px}
.hb .fl-hero.wm-under .fl-hero-stack{position:static;transform:none;margin-top:clamp(26px,4vw,52px)}
.hb .fl-hero.wm-under .fl-hero-stack h1{color:var(--wf-fg);text-shadow:none}
.hb .fl-hero.glow-max::before{--wf-brand-glow:rgba(255,144,19,.15)}

/* The AREAS INDEX block was here — a 66-cell matrix, its column counts, and
   the inert 66th cell that squared it off. All of it went with the grid when
   the index became the bar at the top of this file: a row that scrolls has no
   column count to divide and no corner to close. */

@media(max-width:760px){
  .wrap{padding:0 16px}
  .hb .fl-hero{padding:32px 0 48px}
}

/* ---- one sheet, 42 sections: the label band is the only chrome ---- */
.blab .totop{margin-left:auto;font:400 11px/16px var(--io-mono);color:#C2C0BD;
  text-decoration:none;letter-spacing:.04em}
.blab .totop:hover{color:#B4531A}
/* The wordmark is sized against its own character count so every name fills the
   same measure and none of them wrap. The bound is the CONTAINER, not the window
   (1200px less its 24px gutters), and 1.75 is the reciprocal of the per-character
   advance the measure can afford: at `cw * 1.75 / ch` the line comes out at
   ch x .571 x size, which is cw. So the divisor does the fitting, and it fits
   ANY name — the character count is the only thing it needs to know.

   MEASURED, not assumed, across all 65 names in Space Grotesk 700 at the tracking
   this h1 actually sets (-.04em, which the earlier .554 figure did not include):
   the widest is "Commerce IO" at .530em per character, comfortably inside the
   .571 the divisor budgets. Nothing here overflows while the clamp is free.

   THE FLOOR IS WHAT BINDS, AND IT WAS TOO HIGH. Below about 375px the formula
   asks for less than the minimum and the minimum wins, so a long name stops
   shrinking and is clipped by .fl-hero's overflow instead — silently, since
   there is no wrap to notice. At 40px that bit "Model Context IO" and
   "Opportunity Gap" by a 320px screen and "Prompt Libraries IO", the longest
   name here at nineteen characters, by 360px. 30px clears all three down to
   320px and costs nothing anywhere else: the floor only ever applies where the
   alternative was a cut-off word. */
.hb .fl-hero{--cw:min(1152px,calc(100vw - 48px))}
.hb .fl-hero-stack h1{font-size:clamp(30px,calc(var(--cw) * 1.75 / var(--ch,8)),210px)}

/* ============================================================
   AGENT LIBRARIES  (.fx nocv)  — S17, lifted from
   notion-agent-library-cards.html
   ============================================================
   Section S17 of that file, "Agent Libraries · no header image, light":
   every library in an area rendered as a whole 960x540 Notion page with the
   cover removed, so it opens straight onto icon and title.

   VERBATIM, and reduced rather than rewritten. S17 uses exactly one article
   class (`fx nocv`), one view (the table, `fx-tb`), one icon and one symbol,
   so the board, calendar and gallery views, the chips, the cover and the whole
   dark set are simply not copied — none of them has a selector to match here.
   What IS here is character-for-character the source's, because the cards are
   the source's and a "tidied" copy is how two files stop agreeing.

   IT NEEDS NO NEW TOKENS. Both files declare the same :root — same --ui,
   --io-display, --io-mono, --page, --line, --nm, same values — so the cards
   inherit the type they were designed against without importing anything.

   NOT SCOPED TO .hb, deliberately. The heroes are a dark band; these are the
   light sheet the band sits on, which is the variant asked for and also why
   they read as the page's own content rather than as part of the hero. */

/* Each node still LAYS OUT at 960x540 — the cell scales the finished thing to
   600px, so nothing reflows and the 16:9 is exact at both sizes.

   `.fxgrid` is NOT copied. The source lays these out three across on a wrapping
   grid; here they run in one horizontal rail, so the grid rule would be a rule
   with nothing to match — and a stylesheet that still describes the layout it
   used to have is how the next reader gets the wrong idea about this one. */
.fxwide{width:min(1880px,calc(100vw - 40px));margin-left:50%;
   transform:translateX(-50%)}
.fxcell{width:600px;height:337.5px;overflow:hidden;border-radius:14px}
/* the raw template is the one portrait card on the rail */
.fxcell.is-mobile{width:156px;border-radius:8px}
.fxcell .fx,.fxcell .mx,.fxcell .fd{transform:scale(.625);transform-origin:top left}
/* the black cover is 336x189 — 16:9, like the pages, so the same rail
   height puts it at the same 600px width. It scales UP, which costs
   nothing: there is not a bitmap on it. */
/* SCOPED TO THE COVER CELL, and it has to be. `.bk` cards also appear inside
   the heading cards, as the wall in the arch, where they are already being
   scaled by `.ntc` to fit their slot. Unscoped, this rule caught those too
   and multiplied the two scales together — a wall card came out 1.79x its
   slot and spilled across the wordmark. */
.fxcell.is-cover .bk{transform:scale(1.7857);transform-origin:top left}
.fxcell .rw{transform:scale(.4);transform-origin:top left}
.fx{position:relative;width:960px;height:540px;flex:none;
   background:#fff;border:1px solid #E4E4E4;border-radius:14px;overflow:hidden;
   box-shadow:0 1px 3px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.05);
   display:flex;flex-direction:column}
.fx-tag{position:absolute;right:12px;top:12px;z-index:3;
   font:600 9px/1 var(--io-mono);letter-spacing:.12em;text-transform:uppercase;
   color:rgba(255,255,255,.72);background:rgba(0,0,0,.28);backdrop-filter:blur(6px);
   border-radius:4px;padding:5px 8px}

/* page header */
.fx-page{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 34px}
.fx-head{display:flex;align-items:flex-start;gap:12px;padding:20px 0 0}
.fx-ic{width:30px;height:30px;flex:none;color:#D9730D;margin-top:2px}
.fx-ic svg{width:30px;height:30px;display:block}
.fx-ht{min-width:0;flex:1}
.fx-ht h3{margin:0;font:700 23px/1.2 var(--io-display);letter-spacing:-.028em;color:#37352F;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-ht p{margin:5px 0 0;font:400 12.5px/1.5 var(--ui);color:#787774;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-meta{flex:none;font:400 10px/1 var(--io-mono);letter-spacing:.06em;
   text-transform:uppercase;color:#9B9A97;background:#F3F1EF;border-radius:4px;
   padding:6px 8px;margin-top:4px;white-space:nowrap}

/* view tabs */
.fx-tabs{display:flex;gap:3px;margin-top:16px;border-bottom:1px solid #EDECEA;
   padding-bottom:0;overflow:hidden}
.fx-tab{display:inline-flex;align-items:center;gap:5px;padding:7px 9px 8px;
   font:500 12px/1 var(--ui);color:#787774;border-bottom:2px solid transparent;
   white-space:nowrap}
.fx-tab.on{color:#37352F;border-bottom-color:#37352F}
.fx-tab .mi{width:12px;height:12px;color:#9B9A97}
.fx-tab .mi svg{width:12px;height:12px;display:block}

.fx-body{flex:1;min-height:0;overflow:hidden;padding-bottom:2px}

/* atoms */
.fbar{display:inline-block;height:7px;border-radius:3.5px;background:#EDECEA;
   vertical-align:middle;max-width:100%}
/* From the source's "shared atoms", and easy to miss because `.fx-tab .mi`
   below looks like it says everything. It does not: it sets size and colour
   but not `flex:none`, so without this the tab icons are shrinkable flex items
   that hold their 12px only while the row happens to have room. */
.mi{width:15px;height:15px;flex:none;display:block}
.mi svg{width:15px;height:15px;display:block}

/* table view */
.fx-tb .fx-r{display:grid;grid-template-columns:1.5fr repeat(6,1fr);gap:14px;
   align-items:center;height:30px;border-bottom:1px solid #F1F0EE}
.fx-tb .fx-hr{height:30px;border-bottom:1px solid #E9E8E6}
.fx-tb .fx-hr .ft,.fx-tb .fx-hr .fc{font:400 11.5px/1 var(--ui);color:#787774;
   letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-tb .ft,.fx-tb .fc{overflow:hidden;white-space:nowrap}

/* ── dark ─────────────────────────────────────────────────────────────── */
/* Section S18 — the same 221 libraries, dark. Same reduction as the light set:
   S18 uses one article class, one view, no chips and no dimmed bars, so the
   board / calendar / gallery overrides and `.fbar.dim` are left where they are.

   THE LIGHT RULES ARE THE BASE AND THESE ARE THE DIFFERENCE, exactly as in the
   source. That is why there is no duplicated geometry here — every size,
   padding and grid the dark card uses is the one above it, and only colour
   moves. Copying the block and recolouring it would have produced two
   descriptions of one card that drift the first time either is edited. */
.fx.dk{background:#0F0F11;border-color:#262628;
   box-shadow:0 1px 3px rgba(0,0,0,.5),0 14px 36px rgba(0,0,0,.45)}
.fx.dk .fx-ht h3{color:#fff}
.fx.dk .fx-ht p{color:#8A8A8E}
.fx.dk .fx-meta{color:#8A8A8E;background:#1B1B1E}
.fx.dk .fx-tabs{border-bottom-color:#242427}
.fx.dk .fx-tab{color:#8A8A8E}
.fx.dk .fx-tab.on{color:#fff;border-bottom-color:#fff}
.fx.dk .fx-tab .mi{color:#6E6E72}
.fx.dk .fbar{background:#232326}
.fx.dk .fx-tb .fx-r{border-bottom-color:#1E1E21}
.fx.dk .fx-tb .fx-hr{border-bottom-color:#2A2A2D}
.fx.dk .fx-tb .fx-hr .ft,.fx.dk .fx-tb .fx-hr .fc{color:#8A8A8E}
.fx.dk .fx-ic{color:#FF9013}
.fx.dk .fx-tag{color:rgba(255,255,255,.62);background:rgba(255,255,255,.08)}

/* ── no header image ──────────────────────────────────────────────────── */
.fx.nocv .fx-page{padding-top:6px}
.fx.nocv .fx-tag{color:#9B9A97;background:#F3F1EF}
.fx.nocv.dk .fx-tag{color:#8A8A8E;background:#1B1B1E}

/* ============================================================
   THE RAIL  — ported from waterfall-breakbeat-proposal.html
   ============================================================
   Its "rail": a lead card that holds still while the cards beside it move
   through a horizontal scroller. Structure and behaviour are that file's,
   class for class — .rail / .rail-head / .rail-nav / .rail-body / .rail-lead /
   .rail-vp / .scroller, the same .at-start / .at-end edge state, the same
   drag-to-pan, the same arrows that disable at each end.

   WHAT WAS TRANSLATED, AND WHY. The proposal is a dark document with its own
   token system (--surface-1, --ink-4, --accent, --radius). This sheet is light
   and already has tokens of its own, so the values are this file's and the
   RULES are that file's. Porting the palette as well would have put a dark
   panel in the middle of a light page and called it consistency.

   WHAT THE LEAD CARD DROPPED. The proposal's version ends with a scope input
   and a Run button that queue tasks. There is nothing here to run, and a Run
   button that does nothing is worse than no Run button. The rows became the
   control instead: each one is the library it names, and pressing it moves the
   rail to that card — which is the one thing a list beside a scroller is for.

   THE LEAD CARD IS NOT position:sticky, and neither is the proposal's. It is a
   flex sibling of the scroller rather than a child of it, so the cards slide
   and it does not. Same result, no stacking context, nothing to unstick. */

.rail{position:relative;padding:34px 0 40px}
.rail-head{display:flex;align-items:center;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.rail-eb{display:inline-flex;align-items:center;gap:8px;font:700 10px/1 var(--io-mono);
  letter-spacing:.16em;text-transform:uppercase;color:#B4531A}
.rail-eb svg{width:13px;height:13px;flex-shrink:0}
.rail-title{font:600 19px/1.2 var(--io-display);letter-spacing:-.012em;color:var(--nm)}
.rail-vol{font:600 9.5px/1 var(--io-mono);letter-spacing:.11em;text-transform:uppercase;
  color:#B4531A;border:1px solid #F4DAC2;background:#FDF0E6;padding:5px 10px;border-radius:999px}
.rail-nav{margin-left:auto;display:flex;gap:6px}
.rail-nav button{width:30px;height:30px;padding:0;border:1px solid #E4E2DF;border-radius:6px;
  background:#fff;color:#787774;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}
.rail-nav button:hover{color:#B4531A;border-color:#F4DAC2;background:#FDF0E6}
.rail-nav button:disabled{opacity:.28;pointer-events:none}
.rail-nav svg{width:15px;height:15px}
.rail-sub{font:400 13px/1.6 var(--ui);color:#787774;margin:6px 0 0;max-width:82ch}

.rail-body{display:flex;align-items:stretch;gap:12px;margin-top:16px}
.rail-vp{position:relative;flex:1;min-width:0}
.rail-vp::before,.rail-vp::after{content:'';position:absolute;top:0;bottom:12px;width:56px;
  pointer-events:none;z-index:6;transition:opacity .2s cubic-bezier(.4,0,.2,1)}
.rail-vp::before{left:0;background:linear-gradient(90deg,var(--page) 12%,transparent);opacity:1}
.rail-vp::after{right:0;background:linear-gradient(270deg,var(--page) 12%,transparent)}
.rail-vp.at-start::before{opacity:0}
.rail-vp.at-end::after{opacity:0}

.scroller{display:flex;align-items:stretch;gap:20px;overflow-x:auto;overflow-y:hidden;
  padding:2px 2px 12px;scroll-snap-type:x proximity;scroll-padding-inline:2px;
  -webkit-overflow-scrolling:touch;cursor:grab}
.scroller:active{cursor:grabbing}
.scroller.dragging{scroll-snap-type:none;cursor:grabbing}
.scroller.dragging *{pointer-events:none}
/* The card CSS above is the source's and stays untouched; a scroller needs two
   things of its children that a grid did not, so they are asked for here. */
.scroller .fxcell{flex:0 0 auto;scroll-snap-align:start}

/* ── the lead card ─────────────────────────────────────────────────────── */
.rail-lead{flex:0 0 288px;align-self:stretch;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#FFFFFF,#FBFAF9);border:1px solid #E8E6E3;
  border-radius:10px;padding:15px 16px 14px;display:flex;flex-direction:column;gap:11px;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 14px 32px -18px rgba(0,0,0,.18)}
.rail-lead::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(#EFEDEA 1px,transparent 1px),linear-gradient(90deg,#EFEDEA 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 120% 70% at 100% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 120% 70% at 100% 0%,#000,transparent 72%)}
.rail-lead::after{content:'';position:absolute;top:-60px;right:-60px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,144,19,.10),transparent 68%);
  pointer-events:none}
.rail-lead > *{position:relative;z-index:2}

.rl-top{display:flex;align-items:center;gap:8px}
.rl-idx{font:700 8.5px/1 var(--io-mono);letter-spacing:.18em;text-transform:uppercase;
  color:#B4531A;border:1px solid #F4DAC2;background:#FDF0E6;padding:4px 8px;border-radius:4px}
.rl-state{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font:700 8px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;color:#9B9A97}
.rl-state i{width:5px;height:5px;border-radius:50%;background:#FF9013;
  box-shadow:0 0 0 3px rgba(255,144,19,.16)}
.rl-name{font:600 16px/1.22 var(--io-display);letter-spacing:-.012em;color:var(--nm)}
.rl-count{font:700 29px/1 var(--io-display);color:#B4531A;letter-spacing:-.028em}
.rl-count small{font:500 9px/1 var(--io-mono);color:#9B9A97;letter-spacing:.11em;
  text-transform:uppercase;margin-left:6px}

/* one row per library — the list the rail is steered from */
/* No fixed height. The box takes its natural size, so the 36 areas with five
   or fewer libraries show the whole list with no scrollbar, and only the six
   longer ones (Author and Website at nine) shrink and scroll — `min-height:0`
   is what lets a flex item shrink below its content at all. A fixed height
   would have scrolled the short lists' empty space and clipped the long ones
   at the same arbitrary line. */
.rl-rows{display:flex;flex-direction:column;gap:1px;background:#EFEDEA;border:1px solid #EFEDEA;
  border-radius:7px;overflow-y:auto;min-height:0;margin-bottom:auto}
.rl-row{display:block;width:100%;text-align:left;background:#fff;border:0;
  padding:8px 10px;font:inherit;cursor:pointer;transition:background .14s cubic-bezier(.4,0,.2,1)}
.rl-row:hover{background:#FDF0E6}
.rl-row.on{background:#FDF0E6}
.rl-row.on .rl-k{color:#B4531A}
.rl-rt{display:flex;align-items:center;gap:7px}
.rl-rt svg{width:11px;height:11px;color:#D9730D;flex-shrink:0}
.rl-k{font:400 10.5px/1.35 var(--ui);color:#37352F;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.rl-v{margin-left:auto;font:700 10px/1 var(--io-mono);color:#787774;flex-shrink:0}

/* ══ MOBILE · no header image ═════════════════════════════════════════════
   Ported from notion-agent-library-cards.html, section S15
   ("Full templates · mobile, no header image", classes `mx` and `mx dk`).

   THESE CARDS WERE BUILT, NOT COPIED, and the difference is worth stating.
   S15 is 37 FULL TEMPLATES x 2 — Account Management, Asset Library, Document
   Hub — and it overlaps the 221 Agent Libraries in exactly two titles. There
   is no mobile rendering of the libraries anywhere in that file. So the LAYOUT
   here is S15's, character for character, and what is poured into it is each
   library's OWN data, taken from the desktop card sitting next to it on the
   rail: its title, its one-line description, its "N column prompts · M briefs",
   and its six list rows sized from the first column of its own table. Nothing
   on these cards was invented, and nothing was carried over from the template
   they were stamped from.

   REDUCED THE SAME WAY as the desktop set: the generated cards use the list
   view, so the board, calendar and gallery views and the chips have no
   selector here. `.mbar.sm` is kept — the list's second line uses it.

   ONE DELIBERATE DEPARTURE FROM THE SOURCE MARKUP. S15 inlines the IO grid
   five times per card with `fill="#D9730D"` hard-coded on all sixteen rects —
   in the DARK card too, which makes `.mx.dk .mx-ic{color:#FF9013}` and its
   `.mb-ic` twin dead rules there: the source's dark phone wears the light
   icon. These cards reference the `#iogrid` symbol this file already carries,
   which draws in `currentColor`, so those two rules do what they say. It also
   takes about 5.5KB off each of the 442 cards. */
.mx{position:relative;width:960px;height:540px;flex:none;display:grid;
   grid-template-columns:470px 490px;background:#fff;border:1px solid #E4E4E4;
   border-radius:14px;overflow:hidden;
   box-shadow:0 1px 3px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.05)}
.mx-l{padding:44px 34px;display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow:hidden}
.mx-ic{width:44px;height:44px;display:block;color:#D9730D;margin-bottom:22px}
.mx-ic svg{width:44px;height:44px;display:block}
.mx h3{margin:0;font:700 28px/1.18 var(--io-display);letter-spacing:-.03em;color:#37352F}
.mx p{margin:11px 0 0;font:400 14px/1.55 var(--ui);color:#787774;max-width:330px}
.mx-tabs{display:flex;gap:3px;margin-top:22px;flex-wrap:wrap}
.mx-tab{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:6px;
   font:500 11.5px/1 var(--ui);color:#787774;background:#F4F3F1;white-space:nowrap}
.mx-tab.on{color:#37352F;background:#E9E7E4}
.mx-tab .mi{width:11px;height:11px;color:#9B9A97}
.mx-tab .mi svg{width:11px;height:11px;display:block}
.mx-cta{display:flex;gap:9px;margin-top:26px;flex-wrap:wrap}
.mx-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:9px;
   background:#37352F;color:#fff;font:600 13px/1 var(--ui);white-space:nowrap}
.mx-btn .mi{width:13px;height:13px;color:#fff}
.mx-btn .mi svg{width:13px;height:13px;display:block}
.mx-btn.ghost{background:transparent;color:#37352F;border:1px solid #DFDDD9}
.mx .fx-meta{margin-top:auto;margin-left:0}

/* the coloured ground and the phone */
.mx-r{position:relative;background:var(--acc);overflow:hidden;min-width:0;
   display:flex;align-items:flex-end;justify-content:center}
.mx-phone{width:286px;height:452px;background:#0A0A0A;border-radius:40px 40px 0 0;
   padding:11px 11px 0;box-shadow:0 -2px 24px rgba(0,0,0,.28)}
.mx-screen{width:100%;height:100%;background:#fff;border-radius:31px 31px 0 0;
   overflow:hidden;position:relative;display:flex;flex-direction:column}

/* phone chrome */
.mb-top{display:flex;align-items:center;gap:7px;padding:16px 14px 0}
.mb-sp{flex:1}
.mb-btn{width:26px;height:26px;border-radius:50%;background:#F1F0EE;color:#37352F;
   display:flex;align-items:center;justify-content:center;flex:none}
.mb-btn svg{width:13px;height:13px;display:block}
.mb-hd{padding:12px 16px 0}
.mb-ic{width:30px;height:30px;display:block;color:#D9730D;margin-bottom:8px}
.mb-ic svg{width:30px;height:30px;display:block}
.mb-hd h4{margin:0;font:700 19px/1.16 var(--io-display);letter-spacing:-.03em;color:#1F1F1E;
   display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mb-ctl{display:flex;align-items:center;gap:6px;padding:13px 16px 0}
.mb-pill{display:inline-flex;align-items:center;gap:5px;max-width:104px;padding:6px 9px;
   border-radius:14px;background:#F1F0EE;font:600 11px/1 var(--ui);color:#37352F;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-pill i{width:9px;height:9px;flex:none;color:#787774}
.mb-pill i svg,.mb-add i svg{width:9px;height:9px;display:block}
.mb-i{width:19px;height:19px;color:#787774;flex:none}
.mb-i svg{width:19px;height:19px;display:block}
.mb-add{margin-left:auto;display:inline-flex;align-items:center;gap:3px;padding:5px 8px;
   border-radius:7px;background:#2383E2;color:#fff;font:700 13px/1 var(--ui);flex:none}
.mb-add i{color:#fff}

/* the list view */
.mbar{display:block;height:8px;border-radius:4px;background:#EDECEA}
.mbar.sm{height:6px;background:#F2F1EF}
.mb-list{padding:14px 16px 0;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.mb-row{border-bottom:1px solid #F1F0EE;padding-bottom:10px}
.mb-meta{display:flex;align-items:center;gap:7px;margin-top:7px}
.mb-bar{margin-top:auto;display:flex;align-items:center;gap:9px;padding:10px 14px 14px;
   background:linear-gradient(180deg,rgba(255,255,255,0),#fff 34%)}
.mb-ask{flex:1;display:flex;align-items:center;height:34px;padding:0 12px;border-radius:18px;
   background:#F7F6F4;border:1px solid #EAE8E5;font:400 12px/1 var(--ui);color:#9B9A97}
.mb-ask i{margin-left:auto;width:14px;height:14px;color:#787774}
.mb-ask i svg{width:14px;height:14px;display:block}

/* dark */
.mx.dk{background:#0F0F11;border-color:#262628;
   box-shadow:0 1px 3px rgba(0,0,0,.5),0 14px 36px rgba(0,0,0,.45)}
.mx.dk h3{color:#fff}
.mx.dk p{color:#8A8A8E}
.mx.dk .mx-ic{color:#FF9013}
.mx.dk .mx-tab{background:#1B1B1E;color:#8A8A8E}
.mx.dk .mx-tab.on{background:#242427;color:#fff}
.mx.dk .mx-btn{background:#FF9013;color:#0F0F11}
.mx.dk .mx-btn .mi{color:#0F0F11}
.mx.dk .mx-btn.ghost{background:transparent;color:#fff;border-color:#2E2E31}
.mx.dk .fx-meta{color:#8A8A8E;background:#1B1B1E}
.mx.dk .mx-screen{background:#191919}
.mx.dk .mb-btn{background:#232326;color:#E8E8E8}
.mx.dk .mb-hd h4{color:#fff}
.mx.dk .mb-ic{color:#FF9013}
.mx.dk .mb-pill{background:#232326;color:#E8E8E8}
.mx.dk .mb-i,.mx.dk .mb-pill i{color:#8A8A8E}
.mx.dk .mbar{background:#242427}
.mx.dk .mbar.sm{background:#1E1E21}
.mx.dk .mb-row{border-bottom-color:#232326}
.mx.dk .mb-bar{background:linear-gradient(180deg,rgba(25,25,25,0),#191919 34%)}
.mx.dk .mb-ask{background:#232326;border-color:#2E2E31;color:#7A7A7E}
.mx.dk .mb-ask i{color:#8A8A8E}
.mx.dk .fx-tag{color:rgba(255,255,255,.62);background:rgba(255,255,255,.08)}

/* ══ THE RAW MOBILE TEMPLATE  (.rw) ═══════════════════════════════════════
   The phone's screen, and nothing around it: no marketing panel, no coloured
   ground, no bezel. `.mx` is a WEBSITE SECTION that happens to contain a
   phone; this is the template that phone was showing, on its own, at the size
   a mobile page is actually designed at. One is a picture of the product for a
   landing page; the other is the artefact you would build from.

   390 x 844 — a real mobile viewport, not the 264 x 441 the screen occupied
   inside the bezel. Every `mb-*` rule from the mobile set applies unchanged,
   so what follows is only re-sizing for a canvas half again as wide: padding,
   type and bar height, never structure.

   TEN ROWS against the `.mx` phone's six. At 844 tall there is room for the
   ten the library's own desktop table has, and the widths are that table's
   first column — the same data, one more row of it visible.

   ── THE DARK RULES ARE REPEATED HERE, AND THAT IS NOT AN OVERSIGHT ─────────
   Every dark override for the phone chrome in the source is written
   `.mx.dk .mb-*`, scoped to the website section. None of them reach a screen
   that is not inside one, so the first version of this card rendered a dark
   frame with the LIGHT phone inside it — white pills, black-on-black title.
   The choice was to re-scope the source's selectors to `.mx.dk, .rw.dk` or to
   restate them; restating keeps the ported block above byte-identical to the
   file it came from, which is the property that makes it checkable.

   IN THE RAIL it is the one portrait cell — 156 x 337.5 against the others'
   600 x 337.5, being 390 x 844 at a scale that puts its height on the rail's.
   Narrow, and correctly so: it is the only card here that is not a 16:9 page. */
.rw{position:relative;width:390px;height:844px;flex:none;display:flex;flex-direction:column;
   background:#fff;border:1px solid #E4E4E4;border-radius:20px;overflow:hidden;
   box-shadow:0 1px 3px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.05)}
.rw .mb-top{padding:22px 20px 0;gap:10px}
.rw .mb-btn{width:36px;height:36px}
.rw .mb-btn svg{width:18px;height:18px}
.rw .mb-hd{padding:20px 22px 0}
.rw .mb-ic{width:44px;height:44px;margin-bottom:12px}
.rw .mb-ic svg{width:44px;height:44px}
.rw .mb-hd h4{font-size:27px;line-height:1.14}
.rw .mb-ctl{padding:20px 22px 0;gap:8px}
.rw .mb-pill{max-width:152px;padding:9px 13px;border-radius:19px;font-size:15px;gap:7px}
.rw .mb-pill i{width:12px;height:12px}
.rw .mb-pill i svg,.rw .mb-add i svg{width:12px;height:12px}
.rw .mb-i{width:26px;height:26px}
.rw .mb-i svg{width:26px;height:26px}
.rw .mb-add{padding:7px 11px;border-radius:9px;font-size:18px;gap:4px}
.rw .mb-list{padding:22px 22px 0;gap:16px}
.rw .mb-row{padding-bottom:15px}
.rw .mbar{height:11px;border-radius:5.5px}
.rw .mbar.sm{height:8px;border-radius:4px}
.rw .mb-meta{margin-top:10px;gap:10px}
.rw .mb-bar{padding:14px 20px 22px;gap:12px}
.rw .mb-ask{height:48px;padding:0 17px;border-radius:24px;font-size:16px}
.rw .mb-ask i{width:19px;height:19px}
.rw .mb-ask i svg{width:19px;height:19px}
.rw .fx-tag{position:absolute;right:14px;top:14px;z-index:3;color:#9B9A97;background:#F3F1EF}

/* dark — the same values the source gives `.mx.dk`, said again for this frame */
.rw.dk{background:#191919;border-color:#262628;
   box-shadow:0 1px 3px rgba(0,0,0,.5),0 14px 36px rgba(0,0,0,.45)}
.rw.dk .mb-btn{background:#232326;color:#E8E8E8}
.rw.dk .mb-hd h4{color:#fff}
.rw.dk .mb-ic{color:#FF9013}
.rw.dk .mb-pill{background:#232326;color:#E8E8E8}
.rw.dk .mb-i,.rw.dk .mb-pill i{color:#8A8A8E}
.rw.dk .mbar{background:#242427}
.rw.dk .mbar.sm{background:#1E1E21}
.rw.dk .mb-row{border-bottom-color:#232326}
.rw.dk .mb-bar{background:linear-gradient(180deg,rgba(25,25,25,0),#191919 34%)}
.rw.dk .mb-ask{background:#232326;border-color:#2E2E31;color:#7A7A7E}
.rw.dk .mb-ask i{color:#8A8A8E}
.rw.dk .fx-tag{color:#8A8A8E;background:#1B1B1E}

/* ══ THE BLACK COVER  (.bk)  and  THE FOLDABLE  (.fd) ═════════════════════
   Two more renderings of the same 221 libraries.

   .bk — sections S19 and S20, "Agent Library · black, light/dark template":
   336x189, the neutral #151515→#0A0A0A ground with one orange light source,
   the library's own ghosted AREA behind it and a Notion page overhanging the
   right and bottom edges. `bk wp` carries the light page, `bk` the dark one,
   which is exactly the Tone filter's distinction. TAKEN AS THEY ARE — those
   two sections are real Agent Library sections, 42 area groups each, and they
   pair 1:1 with S17 by area and by title.

   .fd — section S16, the book-fold device. That section is the 37 full
   templates again, so like Site and Mobile these were BUILT: the layout is
   S16's, and the area kicker, the title, the "N column prompts · M briefs",
   the six list rows and the four property keys are the library's own — the
   keys being its real column-prompt names, which the desktop card carries in
   its table header.

   ── THE RULES BELOW ARE NOT HAND-PICKED ───────────────────────────────────
   Twice already a ported card came in missing a rule that looked like it did
   not matter (`.mi`'s flex:none; every `.mx.dk` phone override). So this set
   was computed instead: each selector in the source stylesheet was tested
   against the actual tag/class tree of a `bk` and an `fd` card, and everything
   that could reach one was taken. `.mi` and `.fbar` came back byte-identical
   to what this file already declares and were dropped as duplicates; nothing
   else collided with a name already in use here.

   `.pv`, `.bar`, `.tb`, `.vhd`, `.vttl`, `.eyebrow` and `.tc` arrive unscoped,
   as they are in the source. Checked rather than assumed: no element outside
   these cards carries any of those class names, so the source's own cascade
   is preserved exactly — which is worth more than tidier selectors, because
   re-scoping them would change which rule wins. */
.pv{position:absolute;left:23px;right:-23px;top:74px;bottom:-90px;background:#fff;
    border:1px solid var(--edge);border-radius:6px;overflow:hidden;
    box-shadow:0 1px 2px rgba(15,15,15,.045),0 3px 8px rgba(15,15,15,.03)}
.pv-hd{display:flex;align-items:center;gap:6px;padding:12px 18px 2px;white-space:nowrap;overflow:hidden}
.pv-hd svg{width:15px;height:15px;flex:none;display:block}
.pv-hd .nm{font:600 14px/19px var(--ui);letter-spacing:-.003em;color:var(--nm);overflow:hidden;text-overflow:clip;min-width:0}
.bar{display:inline-block;height:6px;border-radius:3px;background:var(--bar);
     vertical-align:middle}
.tb .r{display:flex;align-items:center;height:22px;padding:0 18px;
       border-top:1px solid var(--line)}
.tb .r.hr{height:19px;border-top:0}
.tb .c{width:90px;flex:none;display:flex;align-items:center;gap:6px;
       overflow:hidden;white-space:nowrap}
.tb .hr .c{display:block;font:400 11px/19px var(--ui);letter-spacing:-.035em;
   color:var(--colhead);padding-right:8px;overflow:hidden;text-overflow:ellipsis}
.vhd{position:relative;padding:17px 24px 0 22px}
.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.eyebrow i{width:22px;height:1px;background:var(--br);flex:none}
.eyebrow span{font:600 9px/1 var(--io-mono);letter-spacing:.16em;color:var(--br)}
.vttl{font:500 16px/21px var(--io-display);letter-spacing:-.02em;color:#fff;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-hd .meta{margin-left:auto;font:400 9.5px/1 var(--io-mono);letter-spacing:.05em;
   text-transform:uppercase;color:rgba(255,255,255,.38);white-space:nowrap;
   border-left:1px solid rgba(255,255,255,.10);padding-left:8px}
.bk{position:relative;width:336px;max-width:100%;height:189px;border-radius:10px;
    overflow:hidden;border:1px solid rgba(255,144,19,.22);
    background:radial-gradient(125% 135% at 100% 0%,rgba(255,144,19,.16) 0%,
               rgba(255,144,19,0) 58%),linear-gradient(180deg,#151515 0%,#0A0A0A 100%)}
.bk .ghost{position:absolute;right:8px;top:-10px;font:400 52px/1 var(--io-display);
    letter-spacing:-.055em;color:#FF9013;opacity:.10;white-space:nowrap;
    pointer-events:none;user-select:none}
.bk .eyebrow span{color:#FF9013}
.bk .eyebrow i{background:#FF9013}
.bk .eyebrow .area{margin-left:auto;font:400 10.5px/1 var(--ui);font-style:normal;
    color:#7A7A7A;letter-spacing:0}
.bk .eyebrow .area b{font-family:"GT Super Display","Times New Roman",Georgia,serif;
    font-style:italic;font-weight:400;color:#FF9013}
.bk .vttl{color:#fff}
.bk .pv{position:absolute;left:22px;right:-22px;top:66px;bottom:-90px;
    background:#101012;border:1px solid rgba(255,144,19,.16);border-radius:6px;
    overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.bk .pv-hd .nm{color:#fff}
.bk .pv-hd .meta{color:#7A7A7A;border-left-color:rgba(255,144,19,.16)}
.bk .bar{background:rgba(255,255,255,.10)}
.bk .tb .r{border-top-color:rgba(255,144,19,.10)}
.bk .tb .hr .c{color:#7A7A7A}
.bk .mi{width:15px;height:15px;flex:none;display:block}
.bk.wp .pv{background:#fff;border-color:rgba(0,0,0,.10);
    box-shadow:0 2px 12px rgba(0,0,0,.45)}
.bk.wp .pv-hd .nm{color:#37352F}
.bk.wp .pv-hd .meta{color:#9B9A97;border-left-color:#E6E5E4}
.bk.wp .bar{background:var(--bar)}
.bk.wp .tb .r{border-top-color:var(--line)}
.bk.wp .tb .hr .c{color:var(--colhead)}
/* `.tc,.vc,.bk{width:100%;height:189px}` is NOT here, and its absence is the
   point. It exists in the source inside `@media (max-width:719px)` — a phone
   rule for a page that lays these cards out directly. The rule extractor read
   the stylesheet flat and hoisted it out of its query, where it outranked
   `.bk{width:336px}` by source order and stretched every cover to 600px
   before the transform, rendering it at 1071. Nothing here wants it: these
   cards are a fixed 336x189 in their own coordinate space and the CELL does
   the responding, so a viewport-conditional override cannot apply to them.
   It was the only rule in the whole ported set that came from inside a
   media query; the other four blocks touch nothing these cards use. */

.bk .mi{color:#FF9013}
.bk.wp .mi{color:#D9730D}

/* ---- FOLDABLE ---- */
.fd{position:relative;width:960px;height:540px;flex:none;overflow:hidden;
   background:#F5F5F7;border:1px solid #E4E4E4;border-radius:14px;
   box-shadow:0 1px 3px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.05)}
.fd-cap{position:absolute;left:34px;top:24px;z-index:3}
.fd-kick{font:600 10px/1 var(--io-mono);letter-spacing:.15em;text-transform:uppercase;
   color:var(--acc)}
.fd-cap h3{margin:8px 0 0;font:700 23px/1.15 var(--io-display);letter-spacing:-.03em;
   color:#1D1D1F;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-dev{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
   width:816px;height:436px;padding:10px;border-radius:28px;
   background:linear-gradient(160deg,#E7E7EA 0%,#BFBFC6 22%,#F2F2F4 48%,#AFAFB6 78%,#DCDCE1 100%);
   box-shadow:0 22px 50px rgba(0,0,0,.22),0 2px 0 rgba(255,255,255,.7) inset}
.fd-scr{position:relative;width:100%;height:100%;border-radius:19px;overflow:hidden;
   background:#fff;display:grid;grid-template-columns:1fr 1px 1fr}
.fd-crease{background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.05) 40%,rgba(0,0,0,.10));
   box-shadow:0 0 9px rgba(0,0,0,.10)}
.fd-leaf{position:relative;padding:14px 16px;min-width:0;overflow:hidden;
   display:flex;flex-direction:column}
.fd-leaf.r{padding-right:46px}
.fd-bar{display:flex;align-items:center;gap:7px;margin-bottom:12px}
.fd-sp{flex:1}
.fd-rb{width:25px;height:25px;border-radius:50%;background:#F0F0F2;color:#3A3A3C;
   display:flex;align-items:center;justify-content:center;flex:none}
.fd-rb svg{width:13px;height:13px;display:block}
.fd-hd h4{margin:0;font:700 20px/1.15 var(--io-display);letter-spacing:-.03em;color:#1D1D1F;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-hd p{margin:5px 0 0;font:400 10.5px/1 var(--ui);color:#86868B;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-pills{display:flex;gap:5px;margin:11px 0 10px;overflow:hidden}
.fd-pill{padding:5px 10px;border-radius:13px;background:#F0F0F2;color:#3A3A3C;
   font:600 10px/1 var(--ui);white-space:nowrap;flex:none}
.fd-pill.on{background:var(--acc);color:#fff}
.fd-lst{display:flex;flex-direction:column;gap:0;flex:1;min-height:0;overflow:hidden}
.fd-li{padding:8px;border-radius:7px;border-bottom:1px solid #F0F0F2;flex:none}
.fd-li.sel{background:color-mix(in srgb,var(--acc) 9%,transparent);
   box-shadow:inset 2px 0 0 var(--acc);border-bottom-color:transparent}
.fd-lm{display:flex;align-items:center;gap:6px;margin-top:7px}
.fd-srch{margin-top:10px;flex:none;display:flex;align-items:center;gap:7px;height:30px;padding:0 11px;
   border-radius:15px;background:#F0F0F2;font:400 11px/1 var(--ui);color:#86868B}
.fd-srch .mi{width:13px;height:13px;color:#86868B}
.fd-srch .mi svg{width:13px;height:13px;display:block}
.fd-status{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:6px;
   font:600 11px/1 var(--ui);color:#1D1D1F;z-index:2}
.fd-wifi{width:14px;height:14px;color:#1D1D1F}
.fd-wifi svg{width:14px;height:14px;display:block}
.fd-rt{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.fd-cnt{font:400 9.5px/1 var(--ui);color:#A1A1A6}
.fd-sum{font:500 9.5px/1 var(--ui);color:var(--acc)}
.fd-rh{display:flex;align-items:center;gap:7px;margin-bottom:12px}
.fd-rh .mi{width:16px;height:16px;color:var(--acc)}
.fd-rh .mi svg{width:16px;height:16px;display:block}
.fd-rh h5{margin:0;font:700 17px/1.18 var(--io-display);letter-spacing:-.03em;color:#1D1D1F;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-props{display:flex;flex-direction:column;gap:7px;padding-bottom:12px;
   border-bottom:1px solid #F0F0F2;margin-bottom:12px}
.fd-pr{display:flex;align-items:center;gap:9px}
.fd-pk{width:96px;flex:none;font:400 10px/1 var(--ui);color:#86868B;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-body{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.fd-asset{flex:1;min-height:0;border-radius:9px;
   background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 24%,#F0F0F2),#F0F0F2)}
.fd-edge{position:absolute;right:9px;top:50%;transform:translateY(-50%);
   display:flex;flex-direction:column;gap:8px;z-index:2}
.fd.dk{background:#000;border-color:#1C1C1E}
.fd.dk .fd-cap h3{color:#F5F5F7}
.fd.dk .fd-dev{background:linear-gradient(160deg,#5A5A60 0%,#2C2C30 22%,#6E6E76 48%,
   #26262A 78%,#4A4A50 100%);box-shadow:0 22px 50px rgba(0,0,0,.6),
   0 2px 0 rgba(255,255,255,.16) inset}
.fd.dk .fd-scr{background:#0B0B0C}
.fd.dk .fd-crease{background:linear-gradient(180deg,rgba(255,255,255,.14),
   rgba(255,255,255,.05) 40%,rgba(255,255,255,.14))}
.fd.dk .fd-rb{background:#1C1C1E;color:#E5E5E7}
.fd.dk .fd-hd h4,.fd.dk .fd-rh h5,.fd.dk .fd-status{color:#F5F5F7}
.fd.dk .fd-wifi{color:#F5F5F7}
.fd.dk .fd-hd p,.fd.dk .fd-pk,.fd.dk .fd-cnt,.fd.dk .fd-agt,.fd.dk .fd-srch{color:#8E8E93}
.fd.dk .fd-pill{background:#1C1C1E;color:#E5E5E7}
.fd.dk .fd-li{border-bottom-color:#1C1C1E}
.fd.dk .fd-gp,.fd.dk .fd-srch{background:#1C1C1E}
.fd.dk .fd-props{border-bottom-color:#1C1C1E}
.fd.dk .fbar{background:#232326}
.fd.dk .fd-asset{background:linear-gradient(150deg,
   color-mix(in srgb,var(--acc) 34%,#141416),#141416)}
.fd.dk .fx-tag{color:rgba(255,255,255,.62);background:rgba(255,255,255,.08)}

/* ── the arch, built from the area's own Agent Library cards ───────────────
   Ported from io-area-headings-agent-cards.html. The arch is the same five
   overhanging slots, in the same --s / --o / --z ramp; what sits in them is a
   real `bk wp` card from the rail below instead of a drawn placeholder.

   WHY A UNITLESS --archn. The wall has to SCALE a 336x189 card to the slot's
   height, and calc() cannot divide a length by a length to make a scale
   factor. So the source carries the arch height twice — once as a bare number
   for the division, once as a length for the layout — and steps it at
   breakpoints rather than using clamp(). Here it does not step at all: these
   heroes live in a fixed 1200x675 frame, so the number is a constant and the
   media queries the source needs have nothing to respond to.

   The card keeps its own 336x189 geometry and is scaled, not restyled — which
   is why `max-width:none` is needed: `.bk` carries `max-width:100%` for the
   page it was designed on, and inside a slot narrower than 336px that would
   squeeze the card instead of scaling it. */
.hb .fl-arch .ac{flex:none;position:relative;z-index:var(--z);margin-top:var(--o);
  height:calc(var(--archn) * var(--s) * 1px);
  width:calc(var(--archn) * var(--s) * 336 / 189 * 1px)}
.hb .fl-arch .ac + .ac{margin-left:calc(var(--arch-ov) * -1)}
.hb .fl-arch .ntc{position:absolute;top:0;left:0;width:336px;height:189px;
  transform-origin:0 0;transform:scale(calc(var(--archn) * var(--s) / 189));
  border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.62)}
.hb .fl-arch .ntc .bk{max-width:none;width:336px;height:189px;
  clip-path:inset(0 round 10px)}
.hb.light .fl-arch .ntc{box-shadow:0 14px 34px rgba(15,15,15,.28)}

/* Which wall a card carries. Same shape as the Tone and View groups: the
   group owns a class prefix on the rail and the value names what survives. */
.rail.w-graphic .fxcell:not(.is-graphic){display:none}
.rail.w-cards .fxcell:not(.is-cards){display:none}
.rail.w-animated .fxcell:not(.is-animated){display:none}
.rail.w-tilt .fxcell:not(.is-tilt){display:none}
.rail.w-stack .fxcell:not(.is-stack){display:none}

/* ── TWO MORE WALLS, ON THE SAME FIVE CARDS  (.tilt, .stack) ──────────────
   Both are the Cards cell's markup exactly — same five `.ac` slots holding the
   same five `bk wp` cards from the rail below — and differ only by a class on
   the hero. That is the whole reason they are cheap: a wall that needs its own
   card copies costs 504 cells x N cards, which is what the nine-card belt
   costs and why it is the largest thing on this page. These two cost nothing
   the Cards wall had not already spent.

   Both override the arch's flex arrangement rather than the cards themselves,
   so `.ntc` keeps scaling each card to its slot and nothing about the card is
   restyled — the same discipline the belt follows. */

/* TILT — the wall turned away from you, receding to the right. The slots keep
   their sizes and their overlap; the plane they sit on is what moved. The
   perspective is on .fl-arch so all five share one vanishing point: set per
   card, each would get its own and the wall would bend rather than turn. */
.hb .fl-hero.tilt .fl-arch{perspective:1400px;perspective-origin:30% 50%}
.hb .fl-hero.tilt .fl-arch .ac{transform:rotateY(-24deg) translateZ(calc(var(--s) * 40px));
  transition:none}
.hb .fl-hero.tilt .fl-arch .ac:nth-child(1){transform:rotateY(-24deg) translateZ(-90px)}
.hb .fl-hero.tilt .fl-arch .ac:nth-child(2){transform:rotateY(-24deg) translateZ(-30px)}
.hb .fl-hero.tilt .fl-arch .ac:nth-child(3){transform:rotateY(-24deg) translateZ(30px)}
.hb .fl-hero.tilt .fl-arch .ac:nth-child(4){transform:rotateY(-24deg) translateZ(-30px)}
.hb .fl-hero.tilt .fl-arch .ac:nth-child(5){transform:rotateY(-24deg) translateZ(-90px)}
.hb .fl-hero.tilt .fl-arch .ntc{box-shadow:0 22px 50px rgba(0,0,0,.66)}
.hb.light .fl-hero.tilt .fl-arch .ntc{box-shadow:0 22px 50px rgba(15,15,15,.30)}

/* STACK — the same five as a fanned deck rather than a row. The overlap goes
   from a fifth of a card to nearly all of it and each card takes a few degrees
   of rotation, so they read as one pile seen square on. `--arch-ov` is the
   variable the row spacing already comes from, so the fan is a change to that
   one number plus a rotation, not a new layout. */
.hb .fl-hero.stack .fl-arch{--arch-ov:calc(var(--arch-h) * .82)}
.hb .fl-hero.stack .fl-arch .ac{transform-origin:50% 120%}
.hb .fl-hero.stack .fl-arch .ac:nth-child(1){transform:rotate(-9deg)}
.hb .fl-hero.stack .fl-arch .ac:nth-child(2){transform:rotate(-4.5deg)}
.hb .fl-hero.stack .fl-arch .ac:nth-child(3){transform:rotate(0deg)}
.hb .fl-hero.stack .fl-arch .ac:nth-child(4){transform:rotate(4.5deg)}
.hb .fl-hero.stack .fl-arch .ac:nth-child(5){transform:rotate(9deg)}
.hb .fl-hero.stack .fl-arch .ntc{box-shadow:0 18px 44px rgba(0,0,0,.70)}
.hb.light .fl-hero.stack .fl-arch .ntc{box-shadow:0 18px 44px rgba(15,15,15,.26)}

/* Both get the belt's scrim, for the same reason the belt needs one: five
   cards behind a wordmark is a busy ground to read white type off. */
.hb .fl-hero.tilt .container::after,.hb .fl-hero.stack .container::after{
  content:"";position:absolute;inset:-22% -46%;z-index:5;pointer-events:none;
  background:radial-gradient(42% 54% at 50% 50%,rgba(10,10,10,.86) 0%,
    rgba(10,10,10,.66) 34%,rgba(10,10,10,.22) 58%,rgba(10,10,10,0) 76%)}
.hb.light .fl-hero.tilt .container::after,.hb.light .fl-hero.stack .container::after{
  background:radial-gradient(42% 54% at 50% 50%,rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.74) 34%,rgba(255,255,255,.28) 58%,rgba(255,255,255,0) 76%)}

/* ── THE BELT — the wall, looping ─────────────────────────────────────────
   Ported from io-area-headings-agent-cards-animated.html.

   Every card runs the SAME animation and is only offset in time, so the belt
   is seamless by construction: card n sits exactly one --step behind card n-1,
   and when the last walks off the left the first is already back at the right.
   x is linear in time; only the scale is shaped, so a card swells to full size
   crossing the centre and shrinks as it leaves — the static arch, in motion.

   SCOPED TO `.fl-hero.belt`, which the source did not need to do: every hero
   in that file is a belt. Here the static card wall is the same `.fl-arch`
   with the same `.ac` children, so the unscoped rules would have turned every
   Cards wall into a pile of absolutely-positioned cards at the centre point.
   The marker class is on the hero, and specificity does the rest.

   --far is the one value that could not come across as written. The source
   sends cards to `50vw` — off the edge of the WINDOW — which is right for a
   full-bleed hero and wrong inside a 1200px card, where it would fling them
   several card-widths past the frame and leave the belt empty most of the
   time. Here it is half the card. */
.hb .fl-hero.belt{--step:4.6s;
  --K:calc(var(--archn) / 189);                  /* native card -> centre card */
  --far:calc(600px + var(--archn) * 1.07 * 1px)} /* fully clear of both edges  */
.hb .fl-hero.belt .fl-arch{display:block;position:relative;
  height:calc(var(--archn) * 1px)}
.hb .fl-hero.belt .fl-arch .ac{position:absolute;left:50%;top:50%;
  width:336px;height:189px;margin:0;
  animation:io-belt calc(var(--n) * var(--step)) linear infinite;
  animation-delay:calc(var(--i) * var(--step) * -1)}
.hb .fl-hero.belt .fl-arch .ntc{position:absolute;top:0;left:0;
  width:336px;height:189px;transform:none;border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.62)}
.hb.light .fl-hero.belt .fl-arch .ntc{box-shadow:0 14px 34px rgba(15,15,15,.28)}

@keyframes io-belt{
  0%   {transform:translate(calc(-50% + var(--far)),-50%)          scale(calc(var(--K) * .34));z-index:1}
  16.7%{transform:translate(calc(-50% + var(--far) * .667),-50%)   scale(calc(var(--K) * .55));z-index:2}
  33.3%{transform:translate(calc(-50% + var(--far) * .333),-50%)   scale(calc(var(--K) * .78));z-index:3}
  50%  {transform:translate(-50%,-50%)                             scale(calc(var(--K) * 1));  z-index:4}
  66.7%{transform:translate(calc(-50% - var(--far) * .333),-50%)   scale(calc(var(--K) * .78));z-index:3}
  83.3%{transform:translate(calc(-50% - var(--far) * .667),-50%)   scale(calc(var(--K) * .55));z-index:2}
  100% {transform:translate(calc(-50% - var(--far)),-50%)          scale(calc(var(--K) * .34));z-index:1}
}

/* The scrim that lets the wordmark read over moving cards. It has to hang off
   .container, not .fl-hero: .container carries z-index:1 and so opens its own
   stacking context — a scrim outside it paints over the wordmark no matter how
   low its z-index. The light tone needs its own, or the dark one greys out a
   white hero. */
.hb .fl-hero.belt .container::after{content:"";position:absolute;inset:-22% -46%;z-index:5;
  pointer-events:none;background:radial-gradient(42% 54% at 50% 50%,rgba(10,10,10,.90) 0%,
    rgba(10,10,10,.72) 34%,rgba(10,10,10,.26) 58%,rgba(10,10,10,0) 76%)}
.hb.light .fl-hero.belt .container::after{background:radial-gradient(42% 54% at 50% 50%,
    rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 34%,rgba(255,255,255,.30) 58%,
    rgba(255,255,255,0) 76%)}

/* 504 belts of nine cards is far more compositing than is worth running at
   once. Two brakes, both the source's: the cells are already skipped by
   `content-visibility` when off screen, and the observer in the script pauses
   every belt that is not on screen. The belts run by DEFAULT and the script
   only ever pauses them, so if it never executes the page is merely expensive
   rather than frozen still. A paused animation holds its position, so a belt
   resumes exactly where it left off. */
.hb.idle .fl-hero.belt .fl-arch .ac{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .hb .fl-hero.belt .fl-arch .ac{animation-play-state:paused}
}

/* ══ THE HEADING SECTION AS A CARD  (.hs) ═════════════════════════════════
   The hero from the section below, on the rail, in the six arrangements this
   stylesheet already described and nothing used.

   `.wm-left`, `.wm-stroke`, `.wm-grad`, `.wm-under`, `.wm-lead`, and the whole
   `.hb.light` token set, were written into this file and matched by no element
   in it — six arrangements and a complete light theme that had never been
   drawn. This rail is what they were for. No new hero CSS: every card below is
   the same `.hb > .fl-hero` markup as the full-width section it sits above,
   wearing one of those class names.

   ── WHY THE HERO NEEDS A FIXED FRAME ──────────────────────────────────────
   It is fluid by design: `--cw` is `min(1152px, 100vw - 48px)` and `--arch-h`
   is `clamp(260px, 27vw, 420px)`, so both track the WINDOW. Inside a 600px
   cell that is the wrong measure entirely — the wordmark would size itself to
   the browser and overflow a card a third as wide. The frame pins both to the
   card's own coordinate space, which is what those variables are for; it is
   the same trick the rail already plays on every other card, done with two
   custom properties instead of a transform.

   1200x675 is 16:9, so at .5 it lands on the same 600 x 337.5 cell as the
   pages, the site sections and the covers — the row height does not change. */
.hs{position:relative;width:1200px;height:675px;flex:none;overflow:hidden;
   border-radius:14px;display:flex;align-items:center;
   box-shadow:0 1px 3px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.08)}
.hs .hb{width:100%;align-self:stretch;display:flex;align-items:center}
/* --archn is the same number as --arch-h, without a unit, because the card
   wall divides by it. See the arch-wall block above. */
.hs .fl-hero{width:100%;--cw:1152px;--arch-h:340px;--archn:340}
/* the tag sits on dark ground in one tone and light in the other */
.hs .fx-tag{position:absolute;right:14px;top:14px;z-index:9;
   color:rgba(255,255,255,.62);background:rgba(255,255,255,.08)}
.hs .hb.light + .fx-tag,.hs .hb.light ~ .fx-tag{color:#787774;background:#F0EFED}
.fxcell .hs{transform:scale(.5);transform-origin:top left}

/* ── keeping 2,714 cards affordable ───────────────────────────────────────
   Every cell is a fixed 600 (or 156) x 337.5 whatever is inside it, so the
   browser can be told to skip laying out and painting the ones that are not
   on screen without the page reflowing when it does. `contain-intrinsic-size`
   supplies the size it would have measured, which is the part that makes this
   safe here: the scroller's scrollWidth, every offsetLeft the rail script
   measures, and the filter's `offsetParent` test all keep answering exactly
   as they did — a skipped cell still occupies its box.

   This was overdue at 1,326 cards and is not optional at 2,714. */
.fxcell{content-visibility:auto;contain-intrinsic-size:600px 337.5px}
.fxcell.is-mobile{contain-intrinsic-size:156px 337.5px}

/* ── the treatment filter ─────────────────────────────────────────────── */
/* Each library is on this rail twice, light then dark, so the pair sits
   together and the comparison is one glance rather than one scroll. The filter
   drops one of the two.

   IT HIDES WITH `display:none`, on purpose. `visibility` or opacity would keep
   the hidden cards in the scroll width, so the rail would still be twice as
   long as what is on it and both arrows would run past the end into nothing.
   `display:none` also gives the script a free and exact test for "is this card
   showing" — `offsetParent` — with no state of its own to keep in step. */
.rl-filter{display:flex;align-items:stretch;gap:1px;background:#EFEDEA;
  border:1px solid #EFEDEA;border-radius:7px;overflow:hidden}
/* Both groups are three buttons wide and both begin with "All", so each says
   what it filters. Inside the group rather than above it: a caption on its own
   line would add two rows to a card whose library list is already the first
   thing to lose height. */
.rl-fk{flex:0 0 auto;display:flex;align-items:center;padding:6px 8px;background:#FBFAF9;
  font:700 8px/1 var(--io-mono);letter-spacing:.14em;text-transform:uppercase;color:#B0AFAC}
/* Six values will not sit in a row 288px wide next to a label, so the View
   group is a grid: the label takes the top line, the six buttons take two of
   three. Shrinking the type until they fitted was the other option and it
   would have made the control harder to read the more it could do. */
.rl-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.rl-grid .rl-fk{grid-column:1/-1;background:#FBFAF9}
.rl-grid button{letter-spacing:.05em}
.rl-filter button{flex:1;padding:6px 4px;border:0;background:#fff;cursor:pointer;
  font:600 9px/1.3 var(--io-mono);letter-spacing:.12em;text-transform:uppercase;
  color:#9B9A97;transition:background .14s cubic-bezier(.4,0,.2,1),color .14s cubic-bezier(.4,0,.2,1)}
.rl-filter button:hover{background:#FBFAF9;color:#37352F}
.rl-filter button.on{background:#FDF0E6;color:#B4531A}

.rail.f-light .fxcell.is-dark{display:none}
.rail.f-dark .fxcell.is-light{display:none}
/* One line per value now that there are five. `:not()` says the rule once
   instead of listing the four it is not, which is how the three-value
   version would have grown into twenty selectors. */
.rail.m-desktop .fxcell:not(.is-desktop){display:none}
.rail.m-mobile .fxcell:not(.is-mobile){display:none}
.rail.m-foldable .fxcell:not(.is-foldable){display:none}
.rail.m-site .fxcell:not(.is-site){display:none}
.rail.m-cover .fxcell:not(.is-cover){display:none}

/* ══ THE INDEX PAGE'S CARD, ON A RAIL  (.lc) ══════════════════════════════
   io-areas-landing.html states one card: an eyebrow and a live count, the
   name, how much of it there is, what is inside it, and a strip along the
   bottom. That card is this page's own lead card in the dark set — same
   measure, same 15/16 padding, same 11px rhythm — which is why it can be
   put on the rail beside the lead card without a second design appearing.

   It is here in BOTH sets, because every rail on this page shows its cards
   light and dark and is filtered between them. `.lc` is the light one, and
   the values are this sheet's; `.lc.dk` restates only what changes, which is
   colour and nothing else. A dark card built by re-declaring the whole rule
   is how the two drift.

   THE CELL IS 288 WIDE, NOT 600. The renderings are 16:9 pages scaled to
   600; a card is a card and keeps the 288px measure it was designed at. The
   height is the rail's, so a rail carrying both still has one baseline. */
.fxcell.is-card{width:288px;height:337.5px;border-radius:10px;overflow:visible;
  contain-intrinsic-size:288px 337.5px}
.lc{height:100%;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:11px;
  background:linear-gradient(160deg,#FFFFFF,#FBFAF9);border:1px solid #E8E6E3;
  border-radius:10px;padding:15px 16px 14px;text-decoration:none;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 14px 32px -18px rgba(0,0,0,.18);
  transition:border-color .16s cubic-bezier(.4,0,.2,1),transform .16s cubic-bezier(.4,0,.2,1)}
.lc::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(#EFEDEA 1px,transparent 1px),
                   linear-gradient(90deg,#EFEDEA 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 120% 70% at 100% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 120% 70% at 100% 0%,#000,transparent 72%)}
.lc::after{content:'';position:absolute;top:-60px;right:-60px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,144,19,.10),transparent 68%);
  pointer-events:none}
.lc > *{position:relative;z-index:2}
.lc:hover{border-color:#FF9013;transform:translateY(-3px)}

.lc-top{display:flex;align-items:center;gap:8px}
.lc-idx{font:700 8.5px/1 var(--io-mono);letter-spacing:.18em;text-transform:uppercase;
  color:#B4531A;border:1px solid #F4DAC2;background:#FDF0E6;padding:4px 8px;border-radius:4px}
.lc-state{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font:700 8px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;color:#9B9A97}
.lc-state i{width:5px;height:5px;border-radius:50%;background:#FF9013;
  box-shadow:0 0 0 3px rgba(255,144,19,.16);flex:none}
.lc-name{font:600 16px/1.22 var(--io-display);letter-spacing:-.012em;color:var(--nm)}
.lc-name em{font-style:italic;font-weight:500;color:#E56E00}
.lc-count{font:700 29px/1 var(--io-display);color:#B4531A;letter-spacing:-.028em}
.lc-count small{font:500 9px/1 var(--io-mono);color:#9B9A97;letter-spacing:.11em;
  text-transform:uppercase;margin-left:6px}
/* The list takes the room it needs and no more; the strip below is pushed to
   the bottom by the two `auto` margins, so a library with three prompts and
   one with six both end flush. */
.lc-rows{display:flex;flex-direction:column;gap:1px;background:#EFEDEA;
  border:1px solid #EFEDEA;border-radius:7px;overflow:hidden;min-height:0;margin-bottom:auto}
.lc-row{display:block;background:#fff;padding:8px 10px}
.lc-rt{display:flex;align-items:center;gap:7px}
.lc-rt svg{width:11px;height:11px;color:#D9730D;flex:none}
.lc-k{font:400 10.5px/1.35 var(--ui);color:#37352F;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.lc-v{margin-left:auto;font:700 10px/1 var(--io-mono);color:#787774;flex:none}
.lc-more .lc-k{color:#B0AFAC;font-style:italic}
/* The row that is this card. Same treatment the rail's own list gives the
   library you are looking at, so "you are here" reads the same in both. */
.lc-row.is-on{background:#FDF0E6}
.lc-row.is-on .lc-k{color:#B4531A}
.lc-row.is-on .lc-v{color:#B4531A}
.lc-foot{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:7px;
  border:1px dashed #F4DAC2;background:#FDF6F0;margin-top:auto}
.lc-fk{font:700 8px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;color:#9B9A97}
.lc-fv{margin-left:auto;font:700 10.5px/1 var(--io-mono);color:#B4531A;letter-spacing:.04em}

/* ── the same card, dark ── */
.lc.dk{background:linear-gradient(160deg,#151515,#060606);border-color:#272727;
  box-shadow:0 1px 3px rgba(0,0,0,.4),0 14px 32px -18px rgba(0,0,0,.6)}
.lc.dk::before{opacity:.5;
  background-image:linear-gradient(rgba(255,144,19,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,144,19,.06) 1px,transparent 1px)}
.lc.dk::after{background:radial-gradient(circle,rgba(255,144,19,.12),transparent 68%)}
.lc.dk:hover{border-color:#FF9013}
.lc.dk .lc-idx{color:#FF9013;border-color:rgba(255,144,19,.26);background:rgba(255,144,19,.10)}
.lc.dk .lc-state{color:#7A7A7A}
.lc.dk .lc-name{color:#FFFFFF}
.lc.dk .lc-name em{color:#FF9013}
.lc.dk .lc-count{color:#FF9013}
.lc.dk .lc-count small{color:#7A7A7A}
.lc.dk .lc-rows{background:#1F1F1F;border-color:#1F1F1F}
.lc.dk .lc-row{background:#1C1C1C}
.lc.dk .lc-k{color:#B4B4B4}
.lc.dk .lc-v{color:#7A7A7A}
.lc.dk .lc-more .lc-k{color:#5A5A5A}
.lc.dk .lc-row.is-on{background:rgba(255,144,19,.10)}
.lc.dk .lc-row.is-on .lc-k,.lc.dk .lc-row.is-on .lc-v{color:#FF9013}
.lc.dk .lc-foot{border-color:rgba(255,144,19,.26);background:rgba(255,144,19,.07)}
.lc.dk .lc-fk{color:#7A7A7A}
.lc.dk .lc-fv{color:#FF9013}

/* ── what the band under the hero brought with it ──────────────────────────
   The three stats moved into the lead card when the band became a rail, and
   they are the same three: a number and what it counts. Two columns rather
   than the band's one row, because the card is 288 wide and the row was as
   wide as the page. */
.rl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px 10px}
.rl-stat b{display:block;font:700 15px/1 var(--io-display);letter-spacing:-.02em;color:var(--nm)}
.rl-stat span{font:400 8.5px/1.4 var(--io-mono);letter-spacing:.09em;text-transform:uppercase;
  color:#9B9A97}
/* The lead card's own way out: on an area it opens the library, on a library
   it opens the area above it. Same strip as the card's, and it is a link, so
   it says so on hover. */
.rl-foot{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:7px;
  border:1px dashed #F4DAC2;background:#FDF6F0;text-decoration:none;
  transition:background .14s cubic-bezier(.4,0,.2,1),border-color .14s cubic-bezier(.4,0,.2,1)}
.rl-foot:hover{background:#FDF0E6;border-color:#E9B27A}
.rl-fk{font:700 8px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;color:#9B9A97}
.rl-fv{margin-left:auto;font:700 10.5px/1 var(--io-mono);color:#B4531A;letter-spacing:.04em}

/* ══ THE HEADING SECTION'S OWN CONTROL  (.hc) ═════════════════════════════
   The hero at the top of this page is one of the cards on the rail below it,
   full-bleed: the same six arrangements, on the same five walls, in the same
   two tones. Under the wordmark there was a button that linked to `#`. It is
   now the control for all sixty of them, and it does not live in the hero any
   more — it is docked to the bottom of the window where the orange footer bar
   used to be, so it is on hand the whole way down the page instead of only
   while the header is on screen. The footer went with it: two things fixed
   across the bottom of a window is one too many, and the bar the page is
   actually driven from won.

   IT IS THE LEAD CARD'S CONTROLS, LAID OUT AS A BAR. The rail's card has room
   to stack a Tone group over a Wall group over six rows; a dock has one line,
   so the two filters that composed into 30 combinations become 30 chips that
   ARE those combinations, and the tone stays a toggle because it is the one
   axis you want to flip without losing your place. Nothing was dropped.

   THE SHAPE IS THE SITE HEADER'S, from WEBSITE_DESIGN/3d-maps.html — 1px
   border, blurred ground, 8px pill buttons, a moon/sun toggle on the right —
   reduced to the buttons, which is the part a dock has room for.

   IT CARRIES ITS OWN TOKENS, and this is the one thing that changed when it
   left the hero. Inside `.hb` it could read the band's set and turn over with
   it for free; over the page's light sheet there is no set to read, so it
   declares its own and `.is-light` restates them. Dark is the default, which
   is also what the page opens on. */
.hc{
  --hc-bg:#0A0A0A;--hc-line:#272727;--hc-line-2:#1F1F1F;--hc-surf:#1C1C1C;
  --hc-fg:#FFFFFF;--hc-mut:#B4B4B4;--hc-sub:#7A7A7A;--hc-faint:#5A5A5A;
  --hc-acc:#FF9013;--hc-acc-soft:rgba(255,144,19,.12);
  --hc-acc-line:rgba(255,144,19,.28);--hc-acc-fg:#0A0A0A;
  /* the folded size and the corner gap, declared rather than written into
     three rules and a script. A custom property is not transitioned, which is
     the point: read back mid-fold it gives the value, not the frame. */
  --hc-mini:52px;--hc-gap:22px;--hc-x:0px;
  position:fixed;bottom:var(--hc-gap);left:50%;z-index:120;
  transform:translateX(-50%) translateX(var(--hc-x));
  display:flex;align-items:center;gap:10px;
  height:var(--hc-mini);max-width:min(1040px,calc(100vw - 32px));padding:0 8px 0 7px;overflow:hidden;
  border:1px solid var(--hc-line);border-radius:16px;
  background:color-mix(in srgb,var(--hc-bg) 88%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.78),0 2px 10px rgba(0,0,0,.34);
  color:var(--hc-fg);font-family:var(--ui);
  transition:transform .44s cubic-bezier(.4,0,.2,1),
             max-width .44s cubic-bezier(.4,0,.2,1),
             padding .32s cubic-bezier(.4,0,.2,1),
             border-radius .32s cubic-bezier(.4,0,.2,1),
             background .2s,border-color .2s,box-shadow .32s}
.hc.is-light{
  --hc-bg:#FFFFFF;--hc-line:#E4E2DF;--hc-line-2:#EFEDEA;--hc-surf:#FBFAF9;
  --hc-fg:#37352F;--hc-mut:#4A4A4A;--hc-sub:#787774;--hc-faint:#B0AFAC;
  --hc-acc:#B4531A;--hc-acc-soft:#FDF0E6;--hc-acc-line:#F4DAC2;--hc-acc-fg:#FFFFFF;
  box-shadow:0 22px 50px -18px rgba(15,15,15,.34),0 2px 10px rgba(15,15,15,.10)}
.hc *{box-sizing:border-box}
.hc button{font-family:inherit}

/* who it is — and the button that folds the bar away */
.hc-id{flex:none;align-self:stretch;display:flex;align-items:center;gap:8px;
  padding:0 11px 0 7px;border:0;border-right:1px solid var(--hc-line-2);
  background:none;color:inherit;cursor:pointer;border-radius:12px 0 0 12px;
  transition:background .15s cubic-bezier(.4,0,.2,1)}
.hc-id:hover{background:var(--hc-surf)}
.hc-mark{width:22px;height:22px;flex:none}
.hc-nm{font:600 13px/1 var(--io-display);letter-spacing:-.01em;color:var(--hc-fg);
  white-space:nowrap;display:block;max-width:240px;overflow:hidden;
  transition:opacity .18s cubic-bezier(.4,0,.2,1),
             max-width .32s cubic-bezier(.4,0,.2,1)}
.hc-nm em{font-style:italic;font-weight:500;color:var(--hc-acc)}
.hc-n{flex:none;font:700 9.5px/1 var(--io-mono);letter-spacing:.12em;
  color:var(--hc-sub);white-space:nowrap}
.hc-n b{color:var(--hc-acc)}
.hc-n i{font-style:normal;margin:0 4px;opacity:.55}

/* the strip: every combination, and no end to it in either direction */
.hc-vp{position:relative;flex:1;min-width:0;align-self:stretch}
.hc-vp::before,.hc-vp::after{content:"";position:absolute;top:1px;bottom:1px;width:26px;
  z-index:2;pointer-events:none}
.hc-vp::before{left:0;background:linear-gradient(90deg,var(--hc-bg),transparent)}
.hc-vp::after{right:0;background:linear-gradient(270deg,var(--hc-bg),transparent)}
.hc-strip{display:flex;align-items:center;gap:3px;height:100%;overflow-x:auto;
  overflow-y:hidden;scrollbar-width:none;cursor:grab;scroll-behavior:auto}
.hc-strip::-webkit-scrollbar{display:none}
.hc-strip.dragging{cursor:grabbing}
.hc-chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;
  padding:0 10px;border:1px solid transparent;border-radius:9px;background:none;
  cursor:pointer;color:var(--hc-mut);
  transition:background .14s cubic-bezier(.4,0,.2,1),color .14s cubic-bezier(.4,0,.2,1),
             border-color .14s cubic-bezier(.4,0,.2,1)}
.hc-chip:hover{background:var(--hc-surf);color:var(--hc-fg)}
.hc-chip .n{font:700 8.5px/1 var(--io-mono);letter-spacing:.1em;color:var(--hc-faint)}
.hc-chip .t{font:500 12.5px/1 var(--ui);white-space:nowrap}
.hc-chip .w{font:600 8px/1 var(--io-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--hc-sub);border:1px solid var(--hc-line);border-radius:5px;padding:4px 5px}
.hc-chip.on{background:var(--hc-acc-soft);border-color:var(--hc-acc-line);color:var(--hc-fg)}
.hc-chip.on .n{color:var(--hc-acc)}
.hc-chip.on .w{color:var(--hc-acc);border-color:var(--hc-acc-line)}

/* step, run, and the tone */
.hc-act{flex:none;align-self:stretch;display:flex;align-items:center;gap:6px;
  padding-left:9px;border-left:1px solid var(--hc-line-2)}
.hc-ico{width:32px;height:32px;display:grid;place-items:center;padding:0;
  border:1px solid var(--hc-line);border-radius:8px;background:none;
  color:var(--hc-mut);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}
.hc-ico:hover{color:var(--hc-fg);border-color:var(--hc-acc)}
.hc-ico svg{width:15px;height:15px}
.hc-play[aria-pressed="true"]{background:var(--hc-acc);border-color:var(--hc-acc);
  color:var(--hc-acc-fg)}
.hc-play .i-pause{display:none}
.hc-play[aria-pressed="true"] .i-play{display:none}
.hc-play[aria-pressed="true"] .i-pause{display:block}
.hc-tone{display:flex;align-items:center;gap:7px;height:32px;padding:0 11px;
  border:1px solid var(--hc-line);border-radius:8px;background:none;
  color:var(--hc-mut);font:500 12px/1 var(--ui);cursor:pointer;
  transition:all .15s cubic-bezier(.4,0,.2,1)}
.hc-tone:hover{color:var(--hc-fg);border-color:var(--hc-acc)}
.hc-tone svg{width:14px;height:14px;flex:none}
.hc-tone .i-sun{display:none}
.hc.is-light .hc-tone .i-sun{display:block}
.hc.is-light .hc-tone .i-moon{display:none}

/* ── FOLDED  (.mini) ──────────────────────────────────────────────────────
   The bar folds into its own mark and travels to the bottom right corner,
   where a page keeps the thing you can always call back.

   IT MOVES BY TRANSFORM AND SHRINKS BY MAX-WIDTH, because those are the two
   things that animate. `left` does not interpolate between a percentage and
   a corner, and `width:auto` does not interpolate at all — so the bar stays
   centred on `left:50%` for good, and the corner is a translation on top of
   the centring one. The two run on the same curve, so the fold reads as one
   movement rather than a shrink followed by a slide.

   --hc-x IS SET IN SCRIPT, off clientWidth. The value below is the same sum
   in CSS and does the right thing on its own; it is a fallback, because on a
   platform with classic scrollbars 100vw is the window and clientWidth is the
   page, and the difference is the icon sitting half a scrollbar off. */
.hc.mini{--hc-x:calc(50vw - var(--hc-gap) - var(--hc-mini) / 2);
  max-width:var(--hc-mini);padding:0;border-radius:50%;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.82),0 0 0 1px rgba(255,144,19,.20)}
.hc.mini.is-light{box-shadow:0 18px 40px -14px rgba(15,15,15,.34),0 0 0 1px rgba(255,144,19,.28)}
.hc.mini .hc-id{width:var(--hc-mini);height:var(--hc-mini);padding:0;gap:0;
  justify-content:center;border-right:0;border-radius:50%}
.hc.mini .hc-mark{width:24px;height:24px}
/* The name has to stop TAKING ROOM, not just stop being visible: a 52px
   button centring 24px of mark next to 70px of invisible wordmark centres the
   pair, and the mark ends up outside the circle and clipped. */
.hc.mini .hc-nm{opacity:0;max-width:0}
/* Hidden rather than merely faded once the fold is over: a control nobody can
   see is not a control anyone should reach by pressing Tab. */
.hc.mini .hc-n,.hc.mini .hc-vp,.hc.mini .hc-act{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s cubic-bezier(.4,0,.2,1),visibility 0s .16s}

/* The two lines the Lead arrangement adds. They live in the stack rather than
   being written in and taken out again, because the hero is switched sixty
   times a minute with the bar running and DOM surgery on every step is how a
   heading section ends up with two eyebrows. */
.hb .fl-hero.is-live:not(.wm-lead) .fl-hero-stack > .fl-eyebrow,
.hb .fl-hero.is-live:not(.wm-lead) .fl-hero-stack > .fl-lead{display:none}

@media(max-width:1000px){
  .hc{height:auto;flex-wrap:wrap;padding:8px;gap:8px;max-width:calc(100vw - 24px)}
  .hc-id{border-right:0;padding-left:4px}
  .hc-vp{flex:1 0 100%;height:40px;order:3}
  .hc-act{border-left:0;margin-left:auto;padding-left:0}
  .hc.mini{height:var(--hc-mini);flex-wrap:nowrap;padding:0}
  .hc.mini .hc-vp{flex:none}
}

/* .rl-sched is gone with its markup: the total it carried moved up to
   .rl-state, and the library list took the height back. */

@media(max-width:1100px){
  .rail-body{flex-direction:column}
  .rail-lead{flex:0 0 auto;align-self:auto}
}

/* ============================================================
   ONE AREA — the page for a single area of operations
   ============================================================
   Its heading section full-bleed, then the same two rails the index page runs
   for it: the heading section in its arrangements and walls, and the area's
   Agent Libraries in their five renderings. Both are lifted whole from
   io-area-headings.html, so this page and that one cannot disagree about what
   an area holds — there is one source and it is that file.

   The stylesheet above is that file's, entire, and the script below is too.
   Three times while building it a ported card arrived missing one rule that
   looked inconsequential; a reduced copy would be a fourth.

   THE 23 AREAS WITH NO LIBRARIES get a heading rail built here rather than
   lifted, because the index page has no rail for them to lift: four of the
   five walls are made of an area's own library cards, so an area with none
   can only have the graphic one. Its rail says so and drops the Wall filter
   rather than offering four values that would all be empty.
   ============================================================ */
.ar-wrap{max-width:1360px;margin:0 auto;padding:0 24px}
.ar-band{padding:40px 0 4px}
.ar-eb{display:inline-flex;align-items:center;gap:8px;font:700 10px/1 var(--io-mono);
  letter-spacing:.16em;text-transform:uppercase;color:#B4531A}
.ar-eb svg{width:13px;height:13px}
.ar-h2{font:600 26px/1.2 var(--io-display);letter-spacing:-.02em;color:var(--nm);margin:10px 0 0}
.ar-h2 em{font-style:italic;font-weight:500;color:#E56E00}
.ar-sub{font:400 14px/1.6 var(--ui);color:#787774;margin:8px 0 0;max-width:80ch}
.ar-stats{display:flex;gap:26px;margin:22px 0 0;flex-wrap:wrap}
.ar-stat b{display:block;font:700 24px/1 var(--io-display);letter-spacing:-.02em;color:var(--nm)}
.ar-stat span{font:400 11px/1.5 var(--io-mono);letter-spacing:.09em;text-transform:uppercase;color:#9B9A97}
.ar-none{margin:26px auto 60px;max-width:560px;text-align:center;padding:30px 24px;
  border:1px dashed #E4E2DF;border-radius:12px;background:#FBFAF9}
.ar-none b{display:block;font:600 15px/1.4 var(--io-display);color:var(--nm);margin-bottom:6px}
.ar-none span{font:400 13.5px/1.6 var(--ui);color:#787774}

/* ---- where the global footer was ----
   An orange bar fixed across the bottom, carrying a way back to the
   index and a way home. Both are in the bar at the top of the page,
   which is the site's own and is on every page; this one was a
   second fixed row competing for the same edge with the control the
   page is actually driven from. The padding stays, sized for what is
   down there now: a 52px dock, 22px off the bottom. */
body{padding-bottom:96px}