/* Launch video library (scoringfactory.ai/launch-videos).
   Loads after /assets/site-pages.css, which supplies the site tokens, the
   nav, .pill-btn, .eyebrow, .page-hero, .stripes and .contact-shell; the
   footer is /assets/site-footer.css, loaded last. Everything here is scoped under .lv-page (the <main>) and
   maps the library's component variables onto those tokens. The few values
   the site uses without a token (a field border, the middle stripe, its
   shadows, the white-on-dark steps of the footer and trust band) are named
   once in the block below and used by name; nothing further down is a
   literal colour or shadow.
   The components below the token block are ported from
   ~/Code/lab/launch-videos/sf-site/assets/site.css. */

/* ---------- App tokens and Button ----------
   The library hero and its controls match the ScoringFactory apps
   (talentplatformSF, gtmSF, vcSF): their src/styles/tokens.css, the
   .button and :focus-visible rules in src/styles/global.css, .nav-item in
   src/components/layout/layout.css (the library tabs), and RecordPageHeader in
   src/styles/records.css. The values the apps write as literals are named
   once here. This file loads only on /launch-videos pages, so the rest of
   the site keeps assets/site-pages.css as it is. */
@font-face {
  font-family: Inter;
  src: url("fonts/inter-latin-variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --font-size-base: 12px;
  --font-sans: Inter, system-ui, sans-serif;
  --text-detail: calc(var(--font-size-base) * 0.85); /* 10.2px, phone tab labels */
  --text-xs: calc(var(--font-size-base) * 0.9);     /* 10.8px, metadata and counts */
  --text-body: var(--font-size-base);               /* 12px, at the apps' 1.45 line height */
  --text-sm: var(--font-size-base);                 /* 12px, body and buttons */
  --text-label: calc(var(--font-size-base) * 1.1);  /* 13.2px, navigation */
  --text-h2: calc(var(--font-size-base) * 1.2);     /* 14.4px, the brand */
  --text-h1: calc(var(--font-size-base) * 1.5);     /* 18px, page heading */
  --weight-normal: 400; --weight-medium: 500; --weight-emphasis: 550; --weight-semibold: 600;
  --color-text: #25252b;
  --color-secondary: #716c79;
  --color-background: #f5f5f7;
  --color-surface: #fff;
  --color-border: #e1e1e6;
  --color-accent: #514080;
  --color-accent-soft: #ece8f5;
  --color-accent-hover: #44346e;   /* .button--primary:hover */
  --color-button-hover: #f6f5f9;   /* .button:hover */
  --color-nav-ink: #64646f;        /* .nav-item */
  --color-nav-hover: #eeecf2;      /* .nav-item:hover */
  --color-nav-active: #564183;     /* .nav-item.is-active */
  --color-nav-icon: #85828d;       /* .nav-item .icon */
  --color-nav-icon-active: #6d55a1; /* .nav-item.is-active .icon */
  --color-panel-border: #e4e3e9;   /* .workspace-content */
  --color-muted: #686470;
  --color-hover: #faf8fe;
  --color-search-border: #e0dfe6;  /* .records-search */
  --color-search-icon: #9995a0;    /* .records-search */
  --color-kbd-border: #e7e6eb;     /* .records-search kbd */
  --color-checkbox-border: #d8d5df; /* .checkbox */
  --color-filter-tint: #fcfbfd;    /* .talent-filter-fields, -footer */
  --color-filter-field: #5f5968;   /* .talent-field */
  --color-filter-group: #81788d;   /* .talent-filter-fields h3 */
  --color-filter-selected: #b4a8c9; /* .talent-selected-values */
  --shadow-filter-panel: 0 12px 36px #2520331a; /* .talent-filter-panel */
  --radius-check: 3px;             /* .checkbox, .records-search kbd */
  --radius-field: 5px;             /* filter inputs, fields and chips */
  --radius-popover: 8px;           /* .popover__content */
  --radius-filter-panel: 9px;      /* .talent-filter-panel */
  --lv-filter-width: 708px;        /* --talent-filter-width */
  --lv-filter-fields-width: calc(var(--font-size-base) * 18.5); /* --talent-filter-fields-width */
  --search-width: 310px;           /* .records-search */
  --shadow-control: 0 1px 2px #15152105;   /* .button */
  --shadow-panel: 0 2px 3px #25203304;     /* .workspace-content */
  --shadow-popover: 0 8px 28px #25203314;  /* .popover__content */
  --radius-badge: 4px;
  --radius-control: 6px;
  --radius-panel: 10px;
  --radius-mark: 7px;              /* .brand-mark */
  --board-card-padding: calc(var(--font-size-base) * 5 / 6); /* 10px, GTM/VC --board-card-padding */
  --board-card-gap: calc(var(--font-size-base) * 2 / 3);     /* 8px, --board-card-gap */
  --board-card-radius: 7px;                                  /* --board-card-radius */
  /* Geometry scales with the type, at the apps' tokens.css ratios. */
  --control-height: calc(var(--font-size-base) * 8 / 3);        /* 32px */
  --nav-item-height: calc(var(--font-size-base) * 17 / 6);      /* 34px, .nav-item */
  --header-height: calc(var(--font-size-base) * 13 / 3);        /* 52px */
  --icon-size: calc(var(--font-size-base) * 1.5);               /* 18px */
  --mark-size: calc(var(--font-size-base) * 2.25);              /* 27px, .brand-mark */
  --tap-target: calc(var(--font-size-base) * 11 / 3);           /* 44px */
  /* RecordPageHeader's side inset (records.css .records-header), 12px under 680px. */
  --header-inset: 18px;
  --header-inset-narrow: 12px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-6: 24px;
  --motion-quick: 160ms;
  /* The site header (assets/site-pages.css) ends at most 84px down, at the
     top and floating. Everything that has to clear it uses this one offset. */
  --shell-inset: 8px;
  --header-offset: 84px;
  /* The library's black canvas and the white on it. Fixed: they stay the
     same in light and dark, so the dark header and grid never flip. */
  --night: #1e1a2e;  /* the site's --ink */
  --day: #fff;       /* the site's --card */
}

/* Button: the apps' src/components/ui/Button. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--control-height); padding: 0 11px;
  border: 1px solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-text);
  font: var(--weight-medium) var(--text-sm)/1.45 var(--font-sans); font-feature-settings: "cv11", "ss01";
  white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-control);
  transition: background-color var(--motion-quick);
}
.button:hover { background: var(--color-button-hover); }
.button--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--day); } /* white, global.css */
.button--primary:hover { background: var(--color-accent-hover); }
.button .icon { width: var(--icon-size); height: var(--icon-size); flex: none; }
.button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* The site header is the main pages' own (assets/site-pages.css): the
   same markup, menu button and floating pill. Only the skip link takes the
   apps' look here. */
.skip { background: var(--color-accent); border-radius: var(--radius-control); font-size: var(--text-sm); padding: 8px 11px; }
.skip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.lv-page {
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "EB Garamond", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --bg: var(--paper);
  --surface: var(--card);
  --surface-2: var(--paper-warm);
  --ink-2: var(--muted);
  --ink-3: var(--muted);
  --line-2: var(--field-line);
  --accent: var(--brand);
  --accent-hover: var(--brand-lift);
  --accent-fill: var(--brand);
  --accent-fill-hover: var(--brand-lift);
  --on-accent: var(--day);
  --accent-soft: var(--soft-2);
  --accent-softer: var(--soft-3);
  --accent-line: var(--soft);
  --link: var(--brand);
  --viz: var(--brand-lift);
  --viz-muted: var(--soft);
  --viz-dot: var(--cited);
  --viz-neutral: var(--ink-soft);
  --grid: var(--line-soft);
  --ramp-0: var(--soft-2);
  --ramp-1: var(--soft);
  --ramp-2: var(--stripe-2);
  --ramp-3: var(--brand-lift);
  --ramp-ink-0: var(--ink);
  --ramp-ink-3: var(--day);
  --warn-bg: color-mix(in srgb, var(--flagged) 10%, var(--card));
  --warn-ink: color-mix(in srgb, var(--flagged) 55%, var(--ink));
  --warn-line: color-mix(in srgb, var(--flagged) 30%, var(--card));
  --deep: var(--brand-deep);
  --deep-2: var(--brand);
  --deep-ink: var(--day);
  --deep-ink-2: var(--on-dark-2);
  --deep-line: transparent;

  /* Hook-style identity swatches, drawn from the site palette. */
  --h1: var(--flagged); --h2: var(--cited); --h3: var(--verified); --h4: var(--neutral);
  --h5: var(--brand); --h6: var(--stripe-2); --h7: var(--brand-lift); --h8: var(--ink); --h0: var(--ink-soft);

  /* Site values without a token yet (flagged to the design system). */
  --field-line: #d8d4cc;                 /* .field input border, site-pages.css */
  --stripe-2: #b9adee;                   /* the middle footer stripe, .s2 */
  --shadow-hair: 0 1px 2px rgba(30,26,46,.08);                                  /* .seg a.on, index.html */
  --shadow-float: 0 1px 2px rgba(30,26,46,.05), 0 14px 34px -18px rgba(30,26,46,.35); /* the floating nav */
  --shadow-lift: 0 24px 50px -30px rgba(15,10,36,.7);                           /* .founder:hover */
  --ring: 0 0 0 4px rgba(58,45,107,.11);                                        /* .field input:focus */
  /* Dark variant: the white-on-dark steps of the footer and .trust-card. */
  --on-dark: var(--day);
  --on-dark-2: color-mix(in srgb, var(--day) 76%, transparent);
  --on-dark-3: color-mix(in srgb, var(--day) 64%, transparent);
  --dark-fill: color-mix(in srgb, var(--day) 7%, transparent);
  --dark-line: color-mix(in srgb, var(--day) 12%, transparent);
  --dark-line-2: color-mix(in srgb, var(--day) 18%, transparent);
  --dark-ring: 0 0 0 4px color-mix(in srgb, var(--soft) 14%, transparent);
  --scrim: color-mix(in srgb, var(--night) 80%, transparent);
  /* Clears the fixed site header (--header-offset, below) with room to spare. */
  --nav-clear: calc(var(--header-offset) + 36px);

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.5rem;
  --t-2xl: 1.875rem;
  --t-3xl: 2.5rem;
  --t-display: clamp(2.6rem, 1.8rem + 3vw, 4.25rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --control-h: 44px;
  --page: var(--max);
  --gutter: 32px;
  --ease-out: var(--ease);
  --dur-fast: 140ms;
  --dur: 220ms;

  display: block;
  padding-bottom: var(--s-20);
  font-feature-settings: "cv11", "ss01";
  caret-color: var(--accent);
  accent-color: var(--accent-fill);
}
.lv-page:focus { outline: none; }
.lv-page [hidden] { display: none !important; }
.lv-page [id] { scroll-margin-top: var(--nav-clear); }
.lv-page ::selection { background: var(--soft-2); color: var(--ink); }
.lv-page a:not([class]) { color: var(--link); text-decoration: underline; text-decoration-color: var(--soft); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.lv-page a:not([class]):hover { text-decoration-color: currentColor; }
.lv-page :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.lv-page h1, .lv-page h2, .lv-page h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.lv-page h1 { font-size: var(--t-display); line-height: 1.04; }
.lv-page h2 { font-size: var(--t-2xl); }
.lv-page h3 { font-size: var(--t-xl); }
.lv-page p { margin: 0; }
.lv-page code { font-family: var(--font-mono); font-size: 0.84em; }
.lv-page strong, .lv-page b { font-weight: 600; }
.lv-page .wrap { padding: 0 var(--gutter); }
.lv-page .i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.12em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--ink-3); }
/* Big numbers set in the display face, with lining figures. */
.lv-page .big, .lv-page .ledger dd, .lv-page .stat-tile dd, .lv-page .compare-lines b, .lv-page .gauge-num b, .lv-page .lv-stat dd {
  font-family: var(--font-serif); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em;
}

/* ---------- Library sub-navigation ---------- */
/* In-page tabs, as the apps' record tabs (record-preview.css .modaltabs):
   text tabs in the body type (Inter, 1.45), 6px corners, the current one
   filled accent-soft, no wrapping. They sit under the "Launch Videos" title
   inside the dark header (.lv-top) as independent links, like the apps'
   .nav-item: no enclosing track (a segmented track is the apps' view
   toggle, not navigation). The nav is the scroller: when the track is wider than the
   screen it scrolls sideways, fades at whichever edge has more, and lv.js
   centres the current tab. Its 5px padding keeps the 2px focus ring (3px
   out) inside the clip; the negative margin keeps the track on the title's
   edge. Scoped to .lv-page so body link colours never reach it. */
.lv-tabs {
  display: flex; margin: 0 -5px var(--space-2); padding: 5px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-padding-inline: var(--space-6);
}
.lv-tabs::-webkit-scrollbar { display: none; }
.lv-tabs[data-overflow="end"] { mask-image: linear-gradient(to left, transparent, currentColor var(--s-8)); }
.lv-tabs[data-overflow="start"] { mask-image: linear-gradient(to right, transparent, currentColor var(--s-8)); }
.lv-tabs[data-overflow="start end"] { mask-image: linear-gradient(to right, transparent, currentColor var(--s-8), currentColor calc(100% - var(--s-8)), transparent); }
.lv-tabs-track { display: inline-flex; flex: none; gap: 2px; }
.lv-page .lv-tabs a {
  display: inline-flex; align-items: center; justify-content: center; height: var(--nav-item-height); padding: 0 12px;
  border-radius: var(--radius-control); color: var(--on-dark-2); white-space: nowrap; box-shadow: none; text-decoration: none;
  font: var(--weight-normal) var(--text-label)/1.45 var(--font-sans); font-feature-settings: "cv11", "ss01";
  transition: background-color var(--motion-quick), color var(--motion-quick);
}
.lv-page .lv-tabs a:hover { color: var(--on-dark); background: var(--dark-line); }
.lv-page .lv-tabs a[aria-current="page"] { color: var(--color-nav-active); background: var(--color-accent-soft); font-weight: var(--weight-emphasis); }
.lv-page .lv-tabs a:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 3px; border-radius: var(--radius-control); }

/* ---------- Controls (site pill buttons and fields) ---------- */
.lv-page .pill-btn { white-space: nowrap; }
.lv-page .pill-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.lv-page .pill-btn.ghost { background: transparent; color: var(--brand); border: 1px solid var(--line); box-shadow: none; }
.lv-page .pill-btn.ghost:hover { background: var(--card); border-color: var(--brand); }
.lv-page .text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 600; font-size: 14px; }
.lv-page .text-link svg { width: 15px; height: 15px; }
/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control-h); padding: 0 var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-base); font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
a.btn-primary, .btn-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
a.btn-primary:hover, .btn-primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--on-accent); }
.btn-primary:disabled:hover { background: var(--accent-fill); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--link); padding: 0 var(--s-3); }
.btn-ghost:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent-hover); }

.control {
  height: var(--control-h); width: 100%; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--t-base);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.control::placeholder { color: var(--ink-3); opacity: 1; }
.control:hover { border-color: var(--ink-3); }
.control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select.control {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.search-box { position: relative; }
.search-box > .i { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; }
.search-box .control { padding-left: 38px; padding-right: 36px; }
.search-box kbd {
  position: absolute; right: 10px; top: 50%; translate: 0 -50%;
  font: 500 var(--t-xs)/1 var(--font-sans); color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 6px; background: var(--surface-2);
}
.search-box .control:focus ~ kbd { display: none; }

/* ---------- Chips, swatches, tags, monograms ---------- */
.hs-0 { --hc: var(--h0); } .hs-1 { --hc: var(--h1); } .hs-2 { --hc: var(--h2); }
.hs-3 { --hc: var(--h3); } .hs-4 { --hc: var(--h4); } .hs-5 { --hc: var(--h5); }
.hs-6 { --hc: var(--h6); } .hs-7 { --hc: var(--h7); } .hs-8 { --hc: var(--h8); }

.sw { width: 8px; height: 8px; border-radius: 50%; background: var(--hc, var(--h0)); flex: none; display: inline-block; }
.sw-lg { width: 0.26em; height: 0.26em; vertical-align: 0.3em; margin-right: 0.3em; }

.chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); line-height: 1;
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); text-decoration: none;
}
a.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip-btn { font: inherit; font-size: var(--t-sm); font-weight: 500; cursor: pointer; height: 32px; padding: 0 12px; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.chip-btn:hover { border-color: var(--line-2); color: var(--ink); background: var(--surface-2); }
.chip-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.chip-n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--t-xs); }
.chip-btn[aria-pressed="true"] .chip-n { color: var(--ink-2); }

.tag {
  display: inline-flex; align-items: center; font-size: var(--t-sm); font-weight: 500; line-height: 1;
  padding: 6px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); text-decoration: none;
}
a.tag:hover { color: var(--ink); background: var(--line); }
.tag-warn { background: var(--warn-bg); color: var(--warn-ink); padding: 4px 8px; font-size: var(--t-xs); margin-left: var(--s-2); }

.lv-mono {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  display: inline-grid; place-items: center;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink);
  background: color-mix(in oklab, var(--hc, var(--h0)) 17%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hc, var(--h0)) 30%, transparent);
}
.lv-mono-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 1.125rem; }

/* ---------- Page heads & sections ---------- */
.hero { padding: var(--s-16) 0 var(--s-12); border-bottom: 1px solid var(--line); background: var(--bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-12); align-items: end; }
.hero h1 { max-width: 17ch; }
.lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 62ch; margin-top: var(--s-5); line-height: 1.6; }
.lede strong { color: var(--ink); }
.ledger { margin: 0; display: grid; }
.ledger > div { padding: var(--s-4) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); align-items: baseline; }
.ledger > div:last-child { border-bottom: 1px solid var(--line); }
.ledger dt { font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; grid-column: 1 / -1; }
.ledger dd { margin: 2px 0 0; font-size: var(--t-3xl); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.ledger dd a { color: var(--ink); text-decoration-color: var(--accent-line); text-decoration-thickness: 2px; }
.ledger dd a:hover { color: var(--accent); }
.ledger p { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; }
.ledger .of { font-size: var(--t-md); color: var(--ink-3); font-weight: 500; letter-spacing: 0; }

.hero-charts { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-12); }
.hero-charts > .chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6) var(--s-4); }

.page-head { padding: var(--s-12) 0 var(--s-10); }
.page-head h1 { max-width: 22ch; }
.section { margin-top: var(--s-20); }
.section-head { margin-bottom: var(--s-6); display: grid; gap: var(--s-2); }
.section-head.row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-2); }
.section-head.row + .section-note { margin-bottom: var(--s-6); }
.section-note { color: var(--ink-2); font-size: var(--t-base); max-width: 68ch; }
.more-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-base); font-weight: 500; text-decoration: none; }
.more-link .i { transition: translate var(--dur) var(--ease-out); }
.more-link:hover .i { translate: 3px 0; }
.crumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-3); padding-top: var(--s-8); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-3); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-8); align-items: start; }
.empty-note { color: var(--ink-3); font-size: var(--t-base); padding: var(--s-6); border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.notice { margin-bottom: var(--s-6); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); font-size: var(--t-base); }
.ai-note { margin-top: var(--s-12); font-size: var(--t-sm); color: var(--ink-3); max-width: 80ch; }

@media (max-width: 900px) {
  .hero { padding-top: var(--s-10); }
  .hero-grid, .hero-charts, .two-col { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: var(--s-8); }
}

/* ---------- Charts ---------- */
.chart { margin: 0; min-width: 0; --chart-ink-2: color-mix(in srgb, var(--ink) 35%, var(--ink-2)); }
.chart figcaption { display: grid; gap: 2px; margin-bottom: var(--s-4); }
.chart-title { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.chart-sub { font-size: var(--t-sm); color: var(--ink-2); max-width: 64ch; }
.chart-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--t-sm); color: var(--chart-ink-2); margin-top: var(--s-3); }
.chart-key > span[aria-hidden] { margin-right: -8px; }
.chart-src { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s-2); }
.chart svg { display: block; overflow: visible; }
.chart text { font-family: var(--font-sans); font-size: 13px; fill: var(--chart-ink-2); font-variant-numeric: tabular-nums; }

.key-ref { width: 1px; height: 12px; background: var(--ink-3); display: inline-block; }
.key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--viz-dot); display: inline-block; }
.key-med { width: 3px; height: 14px; background: var(--ink); display: inline-block; }
.key-hl { width: 12px; height: 12px; border-radius: 50%; background: var(--viz); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--viz); display: inline-block; margin: 0 4px 0 6px; }
.key-small { color: var(--ink-3); }

/* bars */
.bars { list-style: none; margin: 0; padding: 0; }
.bar-row, .pair-row { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) 6.25rem; align-items: center; gap: var(--s-3); }
.bar-label { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.3; padding: 4px 0; }
.bar-label a { color: var(--ink-2); text-decoration: none; }
.bar-label a:hover { color: var(--link); text-decoration: underline; }
.bar-plot .bar { fill: var(--viz); transition: fill var(--dur-fast); }
.bar-plot .bar-b { fill: var(--ink-2); }
.bar-plot .ref { stroke: var(--ink-3); stroke-width: 1; }
.bar-row:hover .bar { fill: var(--accent-hover); }
.bar-row.is-small .bar { fill: var(--viz-muted); }
.bars:has(.is-hl) .bar-row:not(.is-hl) .bar { fill: var(--viz-muted); }
.bar-row.is-hl .bar-label, .bar-row.is-hl .bar-label a { color: var(--ink); font-weight: 600; }
.bar-val { display: flex; align-items: baseline; gap: 6px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-val b { font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.bar-val small { font-size: var(--t-sm); color: var(--chart-ink-2); margin-left: 2px; }
.pair-val { flex-direction: row; gap: var(--s-3); }
.pair-val .b { color: var(--ink-2); font-weight: 500; }
.chart-compact .bar-row { grid-template-columns: minmax(6.5rem, 10rem) minmax(0, 1fr) 5.75rem; gap: var(--s-2); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--t-sm); color: var(--ink-2); margin: calc(var(--s-2) * -1) 0 var(--s-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-a { background: var(--viz); } .lg-b { background: var(--ink-2); }

/* histogram */
.hist .col { fill: var(--viz); transition: fill var(--dur-fast); }
.hist .hit { fill: transparent; }
.hist .hcol:hover .col { fill: var(--accent-hover); }
.hist .base { stroke: var(--line-2); }
.hist .med { stroke: var(--ink); stroke-width: 1.5; }
.hist .med-label { fill: var(--ink); font-weight: 600; font-size: 13px; }

/* strips (beeswarm) */
.strips { list-style: none; margin: 0; padding: 0; }
.strip-row, .strip-axis { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.strip-row + .strip-row { border-top: 1px solid var(--grid); }
.strip-label { font-size: var(--t-sm); color: var(--ink); font-weight: 500; line-height: 1.3; display: grid; }
.strip-label a { color: var(--ink); text-decoration: none; }
.strip-label a:hover { color: var(--link); text-decoration: underline; }
.strip-label small { font-size: var(--t-sm); color: var(--chart-ink-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.strip-plot .grid { stroke: var(--grid); stroke-width: 1; }
.strip-plot .dots circle { fill: var(--viz-dot); fill-opacity: 0.85; stroke: var(--surface); stroke-width: 1.2; transition: fill-opacity var(--dur-fast); }
.strip-plot .dots a:hover circle { fill: var(--accent-hover); fill-opacity: 1; }
.strip-row.is-hl .dots circle { fill: var(--viz); fill-opacity: 0.8; }
.strip-plot .med { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.strip-plot .dot-hl { fill: var(--viz); stroke: var(--surface); stroke-width: 2.5; }
.strip-plot .dot-ring { fill: none; stroke: var(--viz); stroke-width: 1.5; }
.strip-axis { margin-top: 2px; }

/* anatomy */
.anatomy .track { fill: var(--line); }
.anatomy .track-fill { fill: var(--ramp-1); transform-box: fill-box; transform-origin: left center; }
.anatomy .hookwin { fill: color-mix(in oklab, var(--viz) 22%, transparent); stroke: var(--viz); stroke-width: 1.5; }
.anatomy .hook-label { fill: var(--ink-2); font-size: 12px; }
.anatomy .t { fill: var(--ink); font-weight: 600; }
.anatomy .ev line { stroke: var(--line-2); stroke-width: 1; }
.anatomy .ev circle { fill: var(--viz); stroke: var(--surface); stroke-width: 2.5; }
.anatomy .ev text { fill: var(--ink-2); font-size: 12.5px; }
.anatomy .ev:hover circle { fill: var(--accent-hover); }
.ev-legend { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--s-2) var(--s-4); }
.ev-legend li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-2); align-items: center; font-size: var(--t-sm); color: var(--ink-2); }
.ev-legend b { grid-column: 2; font-size: var(--t-base); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--viz); }
.ev-hook .ev-dot { border-radius: 2px; background: color-mix(in oklab, var(--viz) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--viz); }
.ev-missing { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-3); }
.ev-missing .ev-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* gauge */
.gauge-num { font-size: var(--t-sm); color: var(--ink-2); margin: calc(var(--s-2) * -1) 0 var(--s-2); }
.gauge-num b { font-size: var(--t-3xl); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); margin-right: 4px; }
.gauge .band.b0 { fill: var(--ramp-0); } .gauge .band.b1 { fill: var(--ramp-1); }
.gauge .band.b2 { fill: var(--ramp-2); } .gauge .band.b3 { fill: var(--ramp-3); }
.gauge .band-label { font-size: 12.5px; fill: var(--ink-2); }
.gauge .lib { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.gauge .lib-label { font-size: 12.5px; fill: var(--ink-2); }
.gauge .needle-dot { fill: var(--viz); stroke: var(--surface); stroke-width: 3; }
.gauge-note { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s-2); }

/* data-table fallback */
.dt { margin-top: var(--s-3); }
.dt summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  min-height: var(--control-height); font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  padding: 0 var(--s-3) 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface);
}
.dt summary::-webkit-details-marker { display: none; }
.dt summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; transition: rotate var(--dur-fast); margin-right: 2px; }
.dt[open] summary::before { rotate: 45deg; }
.dt summary:hover { background: var(--surface-2); color: var(--ink); }
.dt .table { margin-top: var(--s-2); }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.table caption { text-align: left; font-size: var(--t-md); font-weight: 600; color: var(--ink); padding-bottom: var(--s-3); }
.table th, .table td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table thead th { font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; border-bottom-color: var(--line-2); }
.table tbody th { font-weight: 500; color: var(--ink); }
.table td { color: var(--ink-2); }
.share { display: inline-block; width: 48px; height: 6px; border-radius: 3px; background: var(--line); margin-right: 8px; vertical-align: 1px; overflow: hidden; }
.share span { display: block; height: 100%; background: var(--viz); border-radius: 3px; }

@media (max-width: 640px) {
  .bar-row, .pair-row, .chart-compact .bar-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .bar-row .bar-label, .pair-row .bar-label { grid-column: 1; padding-bottom: 0; }
  .bar-row .bar-val, .pair-row .bar-val { grid-column: 2; grid-row: 1; flex-direction: row; gap: 6px; align-items: baseline; }
  .bar-row .bar-plot, .pair-row .bar-plot { grid-column: 1 / -1; }
  .strip-row, .strip-axis { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .strip-row { padding-top: var(--s-2); }
  .strip-axis > span { display: none; }
}

/* ---------- Library: toolbar, chips, results ---------- */
.library { padding-top: var(--s-12); }
.toolbar {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  display: grid; grid-template-columns: minmax(14rem, 1fr) repeat(3, minmax(8.5rem, 11rem)) auto; gap: var(--s-2);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.toolbar .chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--s-1); }
.lv-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--line); height: var(--control-h); }
.lv-seg button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--t-sm); font-weight: 500; padding: 0 10px; border-radius: 7px; cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.lv-seg button:hover { color: var(--ink); }
.lv-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-hair); }
.resultbar { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: var(--t-base); color: var(--ink-2); }
.resultbar strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.empty { text-align: center; padding: var(--s-16) var(--s-6); border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink-2); display: grid; justify-items: center; gap: var(--s-2); }
.empty-title { font-size: var(--t-lg); font-weight: 600; color: var(--ink); }
.empty .btn { margin-top: var(--s-3); }
.more { display: flex; justify-content: center; margin-top: var(--s-8); }

@media (max-width: 960px) {
  .toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .toolbar .lv-field-search { grid-column: 1 / -1; }
  .toolbar .lv-seg { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .toolbar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar .lv-seg { grid-column: auto; justify-self: stretch; }
  .toolbar .lv-seg button { flex: 1; justify-content: center; }
  .toolbar .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: var(--s-1) var(--gutter) var(--s-2); scrollbar-width: none; }
}

/* ---------- Launch items: grid (cards) and table ---------- */
.lv-list { list-style: none; margin: 0; padding: 0; }
.lv-a { color: inherit; text-decoration: none; }
.lv-co { font-weight: 600; color: var(--ink); font-size: var(--t-base); letter-spacing: -0.01em; }
.lv-cat { font-size: var(--t-xs); color: var(--ink-3); }
.lv-id { display: grid; min-width: 0; line-height: 1.3; }
.lv-id > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.lv-title { color: var(--ink-2); }
.lv-hook { color: var(--ink); }
.lv-hook.is-none { color: var(--ink-3); font-style: normal; }
.lv-views b { font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.lv-unit { color: var(--ink-3); font-size: var(--t-sm); }
.lv-dur, .lv-date { font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lv-dur { display: inline-flex; align-items: center; gap: var(--s-2); }
.durbar { width: 56px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; display: inline-block; }
.durbar span { display: block; height: 100%; background: var(--ink-3); border-radius: 2px; }
.lv-thead { display: none; }

/* grid view */
[data-view="grid"] .lv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--s-3); }
[data-view="grid"] .lv { display: flex; }
[data-view="grid"] .lv-a {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "head date" "text text" "views dur" "style style";
  gap: var(--s-4) var(--s-3); padding: var(--s-5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
[data-view="grid"] .lv-a:hover { border-color: var(--accent-line); background: var(--accent-softer); }
[data-view="grid"] .lv-a:focus-visible { outline-offset: 2px; border-radius: var(--r-lg); }
[data-view="grid"] .lv-head { grid-area: head; }
[data-view="grid"] .lv-text { grid-area: text; }
[data-view="grid"] .lv-title { display: none; }
[data-view="grid"] .lv-text:has(.is-none) .lv-title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-base); }
[data-view="grid"] .lv-text:has(.is-none) .lv-hook { display: block; font-size: var(--t-xs); margin-top: var(--s-2); }
[data-view="grid"] .lv-hook { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.0625rem; font-weight: 500; line-height: 1.42; letter-spacing: -0.008em; text-wrap: pretty; }
[data-view="grid"] .lv-views { grid-area: views; white-space: nowrap; padding-top: var(--s-2); }
[data-view="grid"] .lv-views b { font-size: var(--t-2xl); line-height: 1; }
[data-view="grid"] .lv-style { grid-area: style; min-width: 0; }
[data-view="grid"] .lv-style .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
[data-view="grid"] .lv-dur { grid-area: dur; justify-self: end; align-self: end; padding-bottom: 2px; }
[data-view="grid"] .lv-date { grid-area: date; font-size: var(--t-xs); color: var(--ink-3); align-self: start; padding-top: 2px; }
[data-view="grid"] .durbar { width: 44px; }

/* table view */
[data-view="table"] .lv-thead, [data-view="table"] .lv-a {
  display: grid; grid-template-columns: minmax(0, 1fr) 11.5rem 6rem 7.5rem 4.5rem; column-gap: var(--s-4);
}
[data-view="table"] .lv-thead { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); padding: 0 var(--s-3) var(--s-2); border-bottom: 1px solid var(--line-2); }
[data-view="table"] .lv-thead span:nth-child(n+3) { text-align: right; }
[data-view="table"] .lv-thead span:nth-child(4) { text-align: left; }
[data-view="table"] .lv { border-bottom: 1px solid var(--line); }
[data-view="table"] .lv-a {
  grid-template-areas: "head style views dur date" "text style views dur date";
  padding: var(--s-4) var(--s-3); row-gap: var(--s-2); align-items: start; border-radius: var(--r-sm);
  transition: background-color var(--dur-fast);
}
[data-view="table"] .lv-a:hover { background: var(--surface-2); }
[data-view="table"] .lv-head { grid-area: head; }
[data-view="table"] .lv-mono { width: 28px; height: 28px; border-radius: 7px; font-size: 0.6875rem; }
[data-view="table"] .lv-id { display: flex; gap: var(--s-2); align-items: baseline; }
[data-view="table"] .lv-text { grid-area: text; display: grid; gap: 2px; padding-left: 40px; font-size: var(--t-base); }
[data-view="table"] .lv-hook { font-size: var(--t-sm); color: var(--ink-2); }
[data-view="table"] .lv-style { grid-area: style; padding-top: 2px; }
[data-view="table"] .lv-views { grid-area: views; text-align: right; padding-top: 4px; }
[data-view="table"] .lv-views b { font-size: var(--t-lg); }
[data-view="table"] .lv-unit { display: none; }
[data-view="table"] .lv-dur { grid-area: dur; padding-top: 6px; }
[data-view="table"] .lv-date { grid-area: date; text-align: right; padding-top: 6px; }

@media (max-width: 760px) {
  [data-view="table"] .lv-thead { display: none; }
  [data-view="table"] .lv-a {
    grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3);
    grid-template-areas: "head views" "text text" "style dur";
  }
  [data-view="table"] .lv-text { padding-left: 0; }
  [data-view="table"] .lv-dur { justify-self: end; }
  [data-view="table"] .lv-date { display: none; }
  [data-view="grid"] .lv-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Video page ---------- */
.v-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: var(--s-12); padding: var(--s-8) 0 var(--s-12); align-items: start; }
.v-id { display: flex; gap: var(--s-4); align-items: center; }
.v-id h1 { font-size: var(--t-3xl); letter-spacing: -0.028em; line-height: 1.1; }
.v-tags { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.hero-quote { margin: var(--s-10) 0 0; position: relative; }
.hero-quote p {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); font-weight: 600; letter-spacing: -0.026em;
  line-height: 1.3; color: var(--ink); text-wrap: balance; max-width: 28ch;
}
.hero-quote p::before { content: "“"; position: absolute; translate: -0.55em 0; color: var(--accent); }
.hero-quote p::after { content: "”"; color: var(--accent); }
.hero-quote.is-post p { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 500; color: var(--ink-2); }
.hero-quote.is-post p::before, .hero-quote.is-post p::after { content: none; }
.quote-note { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s-3); max-width: 60ch; }
.v-numbers { margin-top: var(--s-10); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); align-items: start; }
.big { font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.big span { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-3); }
.v-pct { margin-top: var(--s-3); font-size: var(--t-base); color: var(--ink-2); }
.v-pct b { color: var(--ink); }
.pct { margin-top: var(--s-3); max-width: 340px; }
.pct-track { position: relative; display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ramp-0), var(--ramp-2)); }
.pct-mark { position: absolute; top: 50%; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: var(--viz); box-shadow: 0 0 0 3px var(--bg); }
.pct-med { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; }
.pct-scale { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-3); margin-top: 6px; }
.facts { margin: 0; display: grid; gap: var(--s-3); }
.facts div { display: flex; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid var(--line); padding-bottom: var(--s-2); }
.facts dt { color: var(--ink-3); font-size: var(--t-sm); }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-base); }

.player { position: sticky; top: var(--nav-clear); }
.facade {
  aspect-ratio: 1 / 1; max-height: 500px; width: 100%; border-radius: 18px; padding: var(--s-6);
  background: var(--deep); color: var(--deep-ink); border: 1px solid var(--deep-line);
  display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--s-4);
  position: relative; overflow: hidden; isolation: isolate;
}
.facade::before {
  content: ""; position: absolute; inset: auto -20% -35% -20%; height: 75%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--hc, var(--h7)) 45%, transparent), transparent);
  opacity: 0.55;
}
.facade-top { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); font-weight: 500; color: var(--deep-ink-2); }
.facade .lv-mono { color: var(--deep-ink); background: var(--deep-2); box-shadow: inset 0 0 0 1px var(--dark-line); }
.facade-title { align-self: center; font-size: var(--t-xl); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--deep-ink); text-wrap: balance; }
.facade-load {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s-3);
  height: 48px; padding: 0 var(--s-5) 0 6px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--card); color: var(--brand-deep); font: inherit; font-weight: 600; font-size: var(--t-base);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur-fast);
}
.facade-load:hover { background: var(--soft-3); }
.facade-load:active { transform: scale(0.98); }
.facade-load:focus-visible { outline: 2px solid var(--card); outline-offset: 3px; }
.play { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: var(--card); display: grid; place-items: center; }
.play .i { width: 13px; height: 13px; margin-left: 2px; }
.facade-meta { font-size: var(--t-sm); color: var(--deep-ink-2); font-variant-numeric: tabular-nums; }
.embed-slot { min-height: 240px; border-radius: 18px; }
.embed-slot[aria-busy="true"] { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.embed-fallback { padding: var(--s-6); border: 1px solid var(--line-2); border-radius: var(--r-lg); font-size: var(--t-base); }
.player-note { font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s-3); line-height: 1.5; }
.player-note a { display: inline-flex; gap: 4px; align-items: center; font-weight: 500; }

.callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4);
  padding: var(--s-6); border-radius: var(--r-lg); background: var(--accent-softer); border: 1px solid var(--accent-line);
}
.callout-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.callout-icon .i { width: 18px; height: 18px; }
.callout-icon img { width: 36px; height: 36px; }
.callout-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-4) var(--s-10); }
.callout h2 { font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; margin-bottom: var(--s-1); letter-spacing: 0; }
.callout p { font-size: var(--t-lg); line-height: 1.5; color: var(--ink); }

.anatomy-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--s-4); }
.anatomy-grid > .chart, .compare-grid > .chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.compare-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); gap: var(--s-8); align-items: start; }
.compare-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.compare-lines li { font-size: var(--t-base); color: var(--ink-2); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.compare-lines b { display: block; font-size: var(--t-2xl); color: var(--ink); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }

@media (max-width: 1000px) {
  .v-hero, .anatomy-grid, .compare-grid { grid-template-columns: minmax(0, 1fr); }
  .player { position: static; max-width: 520px; }
  .facade { aspect-ratio: 16 / 11; }
}
@media (max-width: 560px) {
  .v-numbers { grid-template-columns: minmax(0, 1fr); }
  .facade { aspect-ratio: auto; min-height: 320px; }
  .hero-quote p::before { position: static; translate: none; }
  .anatomy-grid > .chart, .compare-grid > .chart { padding: var(--s-4); }
}

/* ---------- Patterns ---------- */
.patterns-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s-4); align-items: start; }
.patterns-charts > .chart, .p-top > .chart, .two-col > .chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.pattern-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-10); }
.pi { border-top: 1px solid var(--line); }
.pi-a { display: grid; gap: var(--s-2); padding: var(--s-5) var(--s-3) var(--s-6); margin: 0 calc(var(--s-3) * -1); color: inherit; text-decoration: none; border-radius: var(--r-md); transition: background-color var(--dur-fast); }
.pi-a:hover { background: var(--surface-2); }
.pi-name { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pi-name .sw { width: 10px; height: 10px; }
.pi-def { color: var(--ink-2); font-size: var(--t-base); max-width: 56ch; }
.pi-stats { display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s-1); }
.pi-stats b { color: var(--ink); font-size: var(--t-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.pi-top { font-size: var(--t-sm); color: var(--ink-3); }

.p-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-10); align-items: end; padding-top: var(--s-6); }
.ledger-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
.ledger-row > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.ledger-row dd { font-size: var(--t-2xl); }
.p-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--s-4); align-items: start; }
.template-box { background: var(--accent-softer); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: var(--s-6); }
.template-box h2 { font-size: var(--t-xl); }
.template-box .section-note { font-size: var(--t-sm); margin-top: var(--s-1); }
.tpl { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.tpl li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--line); }
.tpl-t { font-size: var(--t-xs); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 3px; }
.tpl-l { font-size: var(--t-base); line-height: 1.45; }
.tpl-dd { display: grid; gap: var(--s-3); margin-top: var(--s-5); font-size: var(--t-sm); color: var(--ink-2); }
.tpl-dd b { display: block; color: var(--ink); font-size: var(--t-xs); font-weight: 600; margin-bottom: 2px; }
.cite-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); max-width: 82ch; }
.cite-list li { padding-left: var(--s-5); position: relative; color: var(--ink-2); }
.cite-list li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.cite-list strong { color: var(--ink); }
.src { color: var(--ink-3); font-size: var(--t-xs); }
.src code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* Stacked up to 1100px: side by side, a tablet in landscape leaves the
   median chart's bars as slivers beside its labels. */
@media (max-width: 1100px) {
  .patterns-charts, .p-head, .p-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pattern-index { grid-template-columns: minmax(0, 1fr); }
  .patterns-charts > .chart, .p-top > .chart, .two-col > .chart, .template-box { padding: var(--s-4); }
}

/* ---------- What works ---------- */
.script { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: var(--s-8); }
.timeline { display: grid; gap: var(--s-4); }
.tl-track { display: flex; gap: 2px; min-height: 44px; }
.tl-seg { min-width: 3.25rem; display: flex; align-items: center; padding: var(--s-3); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-seg:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.tl-seg:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.tl-seg.tl-s0, .tl-step.tl-s0 { --sc: var(--ramp-3); --si: var(--ramp-ink-3); }
.tl-seg.tl-s1, .tl-step.tl-s1 { --sc: var(--ramp-2); --si: var(--ramp-ink-0); }
.tl-seg.tl-s2, .tl-step.tl-s2 { --sc: var(--ramp-1); --si: var(--ramp-ink-0); }
.tl-seg.tl-s3, .tl-step.tl-s3 { --sc: var(--ramp-0); --si: var(--ramp-ink-0); }
.tl-seg { background: var(--sc); color: var(--si); }
.tl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.tl-step { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-4); position: relative; }
.tl-step::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 4px; border-radius: 2px; background: var(--sc); }
.tl-t { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl-step h3 { font-size: var(--t-lg); }
.tl-step p { font-size: var(--t-base); color: var(--ink-2); }

.tips { list-style: none; margin: var(--s-16) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.tip {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-10);
  padding: var(--s-8); background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
}
.tip-body { display: grid; align-content: start; gap: var(--s-3); }
.tip-rank { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: var(--s-1); }
.tip h2 { font-size: var(--t-xl); letter-spacing: -0.02em; line-height: 1.25; }
.tip-body > p { color: var(--ink-2); }
.tip-caveat { font-size: var(--t-sm); color: var(--ink-2); padding: var(--s-3) var(--s-4); background: var(--surface-2); border-radius: var(--r-md); }
.tip-caveat b { color: var(--ink); }
.tip .more-link { margin-top: var(--s-1); }
.tip-chart { align-self: center; }
.quart { max-width: 760px; }

@media (max-width: 1100px) {
  .tip { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .tip-chart { align-self: stretch; }
}
@media (max-width: 900px) {
  .tip { padding: var(--s-5); }
  .tl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .script { padding: var(--s-5); }
}
@media (max-width: 520px) {
  .tl-steps { grid-template-columns: minmax(0, 1fr); }
  .tl-seg { padding: var(--s-3) var(--s-2); font-size: var(--t-xs); }
}

/* ---------- Sign-up ---------- */
.band-signup { margin-top: var(--s-20); }
.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 26rem); gap: var(--s-6) var(--s-10); align-items: center; padding: var(--s-8); border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.signup-title { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; }
.signup-desc { color: var(--ink-2); margin-top: var(--s-1); }
.signup-row { display: flex; gap: var(--s-2); }
.signup-status { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s-2); min-height: 1.4em; }
.signup-status.is-error { color: var(--flagged); }
@media (max-width: 720px) { .signup { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); } }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-12); }
.toc { position: sticky; top: var(--nav-clear); align-self: start; font-size: var(--t-sm); }
.toc p { color: var(--ink-3); font-weight: 500; margin-bottom: var(--s-2); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 4px var(--s-3); color: var(--ink-2); text-decoration: none; margin-left: -1px; border-left: 1px solid transparent; }
.toc a:hover { color: var(--ink); border-left-color: var(--ink-3); }
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--t-xl); margin: var(--s-12) 0 var(--s-3); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: var(--s-3); }
.prose ul { padding-left: 1.2em; margin: var(--s-2) 0 0; display: grid; gap: var(--s-2); }
.prose li::marker { color: var(--ink-3); }
.about-head { padding-bottom: var(--s-8); }
.about-head .lede { max-width: 66ch; }
/* The serif's descenders ("Why") hang below a 1.04 line box; give them room
   so the heading never touches the paragraph under it. */
.lv-page .about-head h1 { line-height: 1.12; margin-bottom: var(--s-4); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); counter-reset: none; }
.flow-step { position: relative; display: grid; align-content: start; gap: var(--s-2); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--s-6) / -2 - 5px); width: 10px; height: 10px; z-index: 1;
  border-top: 2px solid var(--accent-line); border-right: 2px solid var(--accent-line); rotate: 45deg; translate: 0 -50%;
}
.flow-n { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 600; font-size: var(--t-md); background: var(--accent-soft); color: var(--accent); margin-bottom: var(--s-2); }
.flow-step:nth-child(2) .flow-n { background: var(--ramp-2); color: var(--ramp-ink-0); }
.flow-step:nth-child(3) .flow-n { background: var(--accent-fill); color: var(--on-accent); }
.flow-step h3 { font-size: var(--t-lg); }
.flow-step p { font-size: var(--t-base); color: var(--ink-2); }
.stat-tiles { margin: var(--s-6) 0 var(--s-16); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
.stat-tile { padding: var(--s-5) var(--s-6); background: var(--accent-softer); border: 1px solid var(--accent-line); border-radius: var(--r-lg); display: grid; align-content: start; gap: 2px; }
.stat-tile dt { font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; }
.stat-tile dd { margin: 2px 0 0; font-size: var(--t-3xl); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-tile p { font-size: var(--t-sm); color: var(--ink-3); }
.built-by { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.built-by-mark img { width: 32px; height: 32px; display: block; }
.prose .built-by p { color: var(--ink); font-size: var(--t-md); font-weight: 600; }
@media (max-width: 1000px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .flow-step:not(:last-child)::after { top: auto; bottom: calc(var(--s-5) / -2 - 5px); right: auto; left: var(--s-8); rotate: 135deg; translate: 0 0; }
}
@media (max-width: 480px) { .stat-tiles { grid-template-columns: minmax(0, 1fr); } .stat-tile dd { font-size: var(--t-2xl); } }
.pub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); align-items: start; }
.pub { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.pub h3 { font-size: var(--t-md); margin-bottom: var(--s-1); }
.pub li { font-size: var(--t-base); }
.pub-not { background: var(--surface-2); }
.prose .callout { margin-top: var(--s-12); }
.prose .callout p { font-size: var(--t-md); color: var(--ink); margin-bottom: var(--s-2); }
.prose .callout-body { display: block; }
.prose .callout-icon { background: none; }
/* Up to 900px (a phone in landscape included) the contents list moves
   above the article, in two columns while there is room, and the two
   publication lists stack. */
@media (max-width: 900px) {
  .about { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .toc { position: static; }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); border-left: 0; }
  .toc a { border-left: 1px solid var(--line); margin-left: 0; }
  .pub-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .toc ol { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Motion ----------
   One authored moment per surface: the library histogram rises from its
   baseline on the home page; on a video page the runtime track draws and each
   detected beat lands in order. Everything is visible without the animation. */
@keyframes rise { from { transform: scaleY(0); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes land { from { opacity: 0; transform: translateY(-6px); } }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: no-preference) {
  .hist.is-anim .col { transform-box: fill-box; transform-origin: 50% 100%; animation: rise 720ms var(--ease-out) both; animation-delay: calc(var(--i) * 24ms); }
  .anatomy .track-fill { animation: draw 900ms var(--ease-out) both; }
  .anatomy .ev { animation: land 420ms var(--ease-out) both; animation-delay: calc(240ms + var(--x) * 7ms); }
  [data-view] .lv { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .more-link:hover .i { translate: none; }
}

@media (forced-colors: active) {
  .bar-plot .bar, .hist .col, .strip-plot .dots circle, .anatomy .ev circle { fill: CanvasText; }
  .chip-btn[aria-pressed="true"] { outline: 2px solid Highlight; }
}

@media print {
  .nav-shell, footer, .foot-stripes, .toolbar, .player, .band-signup, .dt summary { display: none; }
  .dt { display: block; }
}
@media (max-width: 560px) { .callout { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); } }
/* ---------- Pages under the fixed site nav ---------- */
.lv-page .crumbs { padding-top: var(--s-6); }
.lv-page .page-head { padding: var(--s-10) 0 var(--s-10); }
.lv-page .page-head .lede, .lv-page .lede { font-size: 18px; color: var(--muted); }
.lv-page .section-head h2 { font-size: clamp(30px, 3.4vw, 42px); }
.lv-page .section-note { color: var(--muted); }
.lv-page .callout h2 { font: 500 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--s-2); }
.lv-page .v-id h1 { font-size: clamp(40px, 4.4vw, 58px); }
.lv-page .hero-quote p { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.18; }
.lv-page .hero-quote.is-post p { font-family: var(--font-sans); font-weight: 500; }
.lv-page .ledger dd { font-size: 2.6rem; }
.lv-page .stat-tile dd { font-size: 2.4rem; }
.lv-page .chart-title { font-weight: 600; }
.lv-page .tip-rank, .lv-page .flow-n { font-family: var(--font-mono); font-weight: 500; }
.lv-page .script, .lv-page .tip, .lv-page .flow-step, .lv-page .pub, .lv-page .built-by,
.lv-page .anatomy-grid > .chart, .lv-page .compare-grid > .chart, .lv-page .patterns-charts > .chart,
.lv-page .p-top > .chart, .lv-page .two-col > .chart { border-color: var(--line-soft); border-radius: var(--r-lg); }
.lv-page .facade { border-radius: 22px; }
.built-by-mark img { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); }

/* ---------- Home: the dark grid ----------
   The ~/Code/lab/launch-videos/ui layout, kept (VIDEO_PLATFORM_PLAN.md §9):
   an all-black canvas with the title, live count, search and filters on top
   and a clean grid of every launch below, six columns at full width. The
   canvas is --ink, the near-black of the palette, and runs edge to edge; its
   content sits in the site's .wrap, so it lines up with the nav and footer.
   Cards and controls use the dark variant above (the footer's and
   .trust-card's white-on-dark steps); type, buttons and radii are the
   site's. */
/* The dark header starts right under the fixed site header: there is no
   strip between them. */
.lv-page { padding-top: var(--header-offset); }
.lv-home { padding-bottom: 0; }
.lv-dark {
  --bg: var(--night);
  --surface: var(--dark-fill);
  --surface-2: var(--dark-fill);
  --line: var(--dark-line);
  --line-2: var(--dark-line-2);
  --ink-2: var(--on-dark-2);
  --ink-3: var(--on-dark-3);
  --link: var(--soft);
  background: var(--night); color: var(--on-dark); color-scheme: dark;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
.lv-dark :focus-visible { outline-color: var(--soft); }
.lv-dark .chip { background: var(--dark-fill); border-color: var(--dark-line); color: var(--on-dark-2); }
.lv-dark .chip-k { color: var(--on-dark); border-color: var(--dark-line-2); background: var(--dark-fill); }
.lv-dark .sw { box-shadow: 0 0 0 1px var(--dark-line-2); }
.lv-dark .lv-mono { color: var(--on-dark); background: var(--dark-fill); box-shadow: inset 0 0 0 1px var(--dark-line); }

/* The library hero follows the apps' RecordPageHeader: one 52px row with
   the 18px page heading, the count badge beside it and the action at the
   end, then a compact row for the intro line and the library tabs. It
   scrolls away; only the search and filter row (.lv-controls) sticks, at
   the one shared --header-offset under the fixed site header. */
/* The hero sits under the header panel with RecordPageHeader's 18px inset
   from that panel's edges (the same 8px shell inset, the same max width),
   on the black canvas that still runs edge to edge. */
.lv-top { border-bottom: 1px solid var(--dark-line); padding: 0 var(--shell-inset) var(--space-3); }
.lv-page .lv-top .wrap { padding: 0 var(--header-inset); }
.lv-top ::selection, .lv-controls ::selection { background: var(--color-accent-soft); color: var(--color-text); }
.lv-top :focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 3px; }
/* The title row is exactly the header height and never wraps: the heading
   gives way (truncates) before the count or the action move. */
.lv-top-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; height: var(--header-height); }
/* Library pages other than the library: the same header, title and tabs
   only; the page's own heading follows on the paper below. */
.lv-pagehead .lv-top { border-bottom: 0; padding-bottom: var(--space-2); }
.lv-top h1, .lv-top .lv-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--weight-semibold) var(--text-h1)/1.2 var(--font-sans); font-feature-settings: "cv11", "ss01"; letter-spacing: -0.45px; color: var(--on-dark); }
.lv-count {
  flex: none;
  font: var(--weight-normal) var(--text-xs)/18px var(--font-sans); font-feature-settings: "cv11", "ss01"; padding: 2px 6px; border-radius: var(--radius-badge);
  background: var(--dark-fill); color: var(--on-dark-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lv-top-end { flex: none; margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.lv-sub { font-size: var(--text-sm); line-height: 1.5; color: var(--on-dark-2); max-width: 90ch; }
.lv-sub b { color: var(--on-dark); font-weight: var(--weight-semibold); }
/* Second row: the intro line. */
.lv-top-mid { justify-content: space-between; gap: var(--space-2) var(--space-6); flex-wrap: wrap; height: auto; }
.lv-top-mid .lv-sub { margin: 0; flex: 1 1 480px; }
.lv-controls { position: sticky; top: var(--header-offset); z-index: 30; background: var(--night); border-bottom: 1px solid var(--dark-line); padding: var(--space-3) 0; }
.lv-controls:has(form[hidden]) { display: none; }

/* ---------- Search and filters: the apps' RecordToolbar ----------
   Search is .records-search (records.css), Filter opens the shared filter
   panel (components/filters/talent-filters.css), Sort is the Popover
   (global.css) and Reset the Button. White app
   controls on the black canvas; focus is the apps' 2px accent outline. */
.lv-bar {
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center;
  font: var(--weight-normal) var(--text-body)/1.45 var(--font-sans); font-feature-settings: "cv11", "ss01";
}
.lv-bar :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.lv-search {
  height: var(--control-height); flex: 1 1 var(--search-width); max-width: calc(var(--search-width) * 1.6); min-width: 150px;
  display: flex; align-items: center; gap: var(--space-2); padding: 0 10px;
  border: 1px solid var(--color-search-border); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-search-icon); font-size: var(--text-body); cursor: text;
}
.lv-search:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lv-search input {
  flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none;
  font: inherit; color: var(--color-text);
}
.lv-search input::placeholder { color: var(--color-muted); opacity: 1; }
.lv-search input:focus-visible, .lv-fp-osearch input:focus-visible { outline: 0; } /* the field's frame shows focus */
.lv-search input::-webkit-search-cancel-button { cursor: pointer; }
.lv-search kbd {
  font: var(--text-detail) var(--font-sans); border: 1px solid var(--color-kbd-border);
  border-radius: var(--radius-check); padding: 0 4px; color: var(--color-muted);
}
.lv-bar .lv-tool { position: relative; }
.lv-bar .lv-tool .icon { width: var(--icon-size); height: var(--icon-size); }
.filter-count { color: var(--color-accent); font-size: var(--text-detail); }
.lv-tool[aria-expanded="true"] { background: var(--color-accent-soft); }
.lv-spacer { flex: 1; }

/* Popover: the apps' native disclosure. */
.popover { position: relative; }
.popover summary { list-style: none; }
.popover summary::-webkit-details-marker { display: none; }
.popover[open] > summary { background: var(--color-accent-soft); }
.popover__content {
  position: absolute; top: 39px; left: 0; z-index: 10; width: 260px; padding: 16px;
  display: grid; gap: var(--space-3); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-popover);
  background: var(--color-surface); box-shadow: var(--shadow-popover);
}
.popover__content h2 { margin: 0; font: var(--weight-semibold) var(--text-h2)/1.45 var(--font-sans); letter-spacing: 0; color: var(--color-text); }
.popover__content label { display: grid; gap: 5px; font-size: var(--text-sm); }
.popover__content select {
  height: var(--control-height); min-width: 0; width: 100%; padding: 0 6px;
  border: 1px solid var(--color-border); border-radius: var(--radius-field);
  background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer;
}

/* Checkbox: the apps' .checkbox, with the whole label as its target. */
.checkbox {
  appearance: none; width: 13px; height: 13px; margin: 0; flex: none;
  border: 1px solid var(--color-checkbox-border); border-radius: var(--radius-check);
  background: var(--color-surface); display: inline-grid; place-content: center; cursor: pointer;
}
.checkbox:checked { background: var(--color-accent); border-color: var(--color-accent); }
.checkbox:checked::after {
  content: ""; width: 6px; height: 3px;
  border-left: 1.5px solid var(--color-surface); border-bottom: 1.5px solid var(--color-surface);
  transform: rotate(-45deg) translateY(-1px);
}
.checkbox:disabled { cursor: not-allowed; opacity: 0.5; }
/* A single-choice field (Speech) takes the same control, round: the apps'
   .checkbox geometry and colours with a dot for the check. */
.checkbox[type="radio"] { border-radius: 50%; }
.checkbox[type="radio"]:checked::after { width: 5px; height: 5px; border: 0; border-radius: 50%; background: var(--color-surface); transform: none; }

/* Applied filters: the apps' TalentFilterChips. */
.lv-applied { flex: 1 1 100%; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: var(--text-xs); color: var(--on-dark-2); }
.lv-applied[hidden] { display: none; }
.lv-achip {
  display: inline-flex; align-items: center; max-width: 320px;
  border: 1px solid var(--color-border); border-radius: var(--radius-field); background: var(--color-hover);
}
.lv-achip button {
  border: 0; background: none; color: var(--color-accent); padding: 5px 7px; font: inherit; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lv-achip button:last-child { flex: none; border-left: 1px solid var(--color-border); }
.lv-applied .button { height: 25px; font-size: var(--text-xs); }
/* The ghost button keeps the apps' geometry; its ink is the canvas's. */
.lv-applied .button--ghost { border: 0; background: transparent; box-shadow: none; color: var(--on-dark-2); }
.lv-applied .button--ghost:hover { background: var(--dark-fill); color: var(--on-dark); }

/* Filter panel: the apps' .talent-filter-panel, placed by lv.js under its
   trigger and inside the viewport. */
.lv-fpanel {
  position: fixed; z-index: 40; display: flex; flex-direction: column;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-filter-panel);
  box-shadow: var(--shadow-filter-panel); overflow: hidden; font-size: var(--text-body);
}
.lv-fpanel[hidden] { display: none; }
.lv-fpanel h2 { margin: 0; font: var(--weight-semibold) var(--text-label)/1.45 var(--font-sans); letter-spacing: 0; color: var(--color-text); }
.lv-fp-head {
  height: 40px; flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: 0 14px; border-bottom: 1px solid var(--color-border);
}
.lv-fp-head > span { color: var(--color-secondary); font-size: var(--text-xs); }
.lv-fp-body { display: grid; grid-template-columns: var(--lv-filter-fields-width) minmax(0, 1fr); min-height: 0; overflow: auto; }
.lv-fp-fields { padding: 12px 8px; border-right: 1px solid var(--color-border); background: var(--color-filter-tint); }
.lv-fp-fields h3 {
  margin: 12px 9px 5px; font-size: var(--text-detail); font-weight: var(--weight-medium);
  font-family: var(--font-sans); color: var(--color-filter-group); text-transform: uppercase; letter-spacing: 0;
}
.lv-fp-fields section:first-child h3 { margin-top: 0; }
.lv-fp-field {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 26px; padding: 0 9px;
  border: 0; border-radius: var(--radius-field); background: none; text-align: left;
  font: inherit; font-size: var(--text-body); color: var(--color-filter-field); cursor: pointer;
}
.lv-fp-field > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-fp-field:hover { background: var(--color-accent-soft); }
.lv-fp-field[aria-pressed="true"] { background: var(--color-accent-soft); color: var(--color-accent); font-weight: var(--weight-medium); }
.lv-fp-arrow { margin-left: auto; visibility: hidden; }
.lv-fp-field[aria-pressed="true"] .lv-fp-arrow { visibility: visible; }
.lv-fp-editor { min-width: 0; padding: 16px; }
.lv-fp-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 15px; }
.lv-fp-selected {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; padding: 6px;
  border: 1px solid var(--color-filter-selected); border-radius: var(--radius-field);
}
.lv-fp-selected[hidden] { display: none; }
.lv-value-chip {
  display: inline-flex; gap: 7px; align-items: center; max-width: 100%; padding: 3px 6px;
  background: var(--color-accent-soft); border-radius: var(--radius-badge);
  color: var(--color-accent); font-size: var(--text-xs); overflow-wrap: anywhere;
}
.lv-value-chip button { border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.lv-fp-options { border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; }
.lv-fp-osearch {
  display: flex; align-items: center; gap: 7px; height: 31px; padding: 0 10px;
  border-bottom: 1px solid var(--color-border); color: var(--color-search-icon);
}
.lv-fp-osearch:focus-within { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.lv-fp-osearch .icon { width: 12px; height: 12px; }
.lv-fp-osearch input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--text-xs); color: var(--color-text); }
.lv-fp-osearch input::placeholder { color: var(--color-muted); opacity: 1; }
.lv-fp-list { max-height: 180px; min-height: 70px; overflow: auto; }
.lv-fp-option { min-height: 33px; display: flex; align-items: center; gap: 9px; padding: 0 10px; font-size: var(--text-body); cursor: pointer; }
.lv-fp-option:has(:checked), .lv-fp-option:hover { background: var(--color-hover); }
.lv-fp-option:has(:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.lv-fp-option .checkbox:focus-visible { outline: 0; }
.lv-fp-olabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-fp-ocount { margin-left: auto; color: var(--color-secondary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.lv-fp-hint { margin: 10px 0 0; font-size: var(--text-xs); line-height: 15px; color: var(--color-secondary); }
.lv-fp-list > .lv-fp-hint { padding: 0 10px 10px; }
/* Date posted: the presets as radios, then From and To day fields. */
.lv-fp-list.is-date { max-height: none; }
.lv-fp-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: 10px; border-top: 1px solid var(--color-border); }
.lv-fp-range label { display: grid; gap: 4px; min-width: 0; font-size: var(--text-xs); color: var(--color-secondary); }
.lv-fp-date {
  width: 100%; min-width: 0; height: 33px; padding: 0 8px; border: 1px solid var(--color-search-border);
  border-radius: var(--radius-field); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-body);
}
.lv-fp-date:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
@media (max-width: 639px), (pointer: coarse) {
  .lv-fp-date { height: var(--tap-target); font-size: 16px; }
}
@media (max-width: 479px) {
  .lv-fp-range { grid-template-columns: minmax(0, 1fr); }
}
.lv-fp-foot {
  flex: none; display: flex; align-items: center; gap: var(--space-2); padding: 10px 14px;
  border-top: 1px solid var(--color-border); background: var(--color-filter-tint);
}
.lv-fp-foot > span { flex: 1; min-width: 0; color: var(--color-accent); font-size: var(--text-xs); }

@media (max-width: 680px) {
  /* records.css at 680px: the shortcut hint goes. */
  .lv-search kbd { display: none; }
}
@media (max-width: 639px) {
  /* Phone, as the apps' records toolbar: search on its own full-width
     44px row, then the compact Filter and Sort triggers at tap size. Their
     menus open inside the viewport. */
  .lv-search { flex: 1 1 100%; max-width: none; min-width: 0; height: var(--tap-target); }
  /* 16px text in every field, so iPhone Safari does not zoom on focus. */
  .lv-search input, .popover__content select, .lv-fp-osearch input { font-size: 16px; }
  .lv-bar .button { height: var(--tap-target); }
  /* Filter, Sort and Reset, each an equal third of the second row; Filter
     and Sort keep icon and text label. */
  .lv-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lv-bar .lv-search, .lv-bar .lv-applied { grid-column: 1 / -1; }
  .lv-bar .lv-spacer { display: none; }
  .lv-bar .lv-tool, .lv-bar .lv-reset { min-width: var(--tap-target); width: 100%; padding: 0 var(--space-3); }
  .lv-sort { display: block; }
  .lv-applied .button { height: var(--tap-target); }
  .lv-achip button { min-height: var(--tap-target); padding: 0 var(--space-3); }
  .lv-achip { max-width: 100%; }
  .lv-sort .popover__content {
    position: fixed; top: auto; left: var(--space-3); right: var(--space-3); width: auto;
    max-height: calc(100dvh - var(--header-offset) - var(--tap-target) * 2 - env(safe-area-inset-bottom, 0px) - var(--space-6));
    overflow: auto;
  }
  .lv-sort .popover__content select { height: var(--tap-target); }
  .lv-fp-body { grid-template-columns: 128px minmax(0, 1fr); }
  .lv-fp-fields { padding: 10px 4px; }
  .lv-fp-field { height: var(--tap-target); padding: 0 5px; gap: 5px; }
  .lv-fp-editor { padding: 12px; }
  .lv-fp-head > span { display: none; }
  .lv-fp-option { min-height: var(--tap-target); }
  .lv-fp-osearch { height: var(--tap-target); }
  .lv-fp-foot { padding: 8px; }
  .lv-fp-foot .button { height: var(--tap-target); }
}

.lv-dark .lv-main { padding-top: 32px; padding-bottom: 104px; }
.lv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
.lv-card { display: flex; min-width: 0; }
.lv-card-a {
  flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none;
  background: var(--dark-fill); border: 1px solid var(--dark-line); border-radius: var(--board-card-radius); overflow: hidden;
  transition: border-color var(--dur-fast);
}
.lv-card-a:hover { border-color: color-mix(in srgb, var(--soft) 40%, transparent); }
.lv-card-a:focus-visible { outline: 2px solid var(--soft); outline-offset: 3px; border-radius: var(--board-card-radius); }
.lv-th { position: relative; aspect-ratio: 16 / 9; background: var(--dark-fill); display: block; overflow: hidden; }
.lv-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-th .lv-mono { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 14px; font-size: 1rem; }
.lv-th-dur { position: absolute; right: 8px; bottom: 8px; background: var(--scrim); color: var(--on-dark); font: var(--weight-medium) var(--text-xs)/1.45 var(--font-sans); padding: 1px 6px; border-radius: var(--radius-badge); font-variant-numeric: tabular-nums; }
.lv-cb { display: flex; flex-direction: column; gap: var(--board-card-gap); padding: var(--board-card-padding); flex: 1; }
.lv-cb .lv-co { font-weight: var(--weight-semibold); font-size: var(--text-label); line-height: 1.45; color: var(--on-dark); }
.lv-cb .lv-meta { font-size: var(--text-xs); line-height: 1.45; color: color-mix(in srgb, var(--on-dark) 82%, transparent); font-variant-numeric: tabular-nums; }
.lv-cb .lv-meta span { white-space: nowrap; }
.lv-cb .lv-meta b { color: var(--on-dark); font-weight: 500; }
.lv-cb .lv-hook { font: var(--weight-normal) var(--text-body)/1.45 var(--font-sans); color: var(--on-dark); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lv-cb .lv-hook.is-none, .lv-cb .lv-hook.is-take { color: var(--on-dark-3); }
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.lv-chips .chip { display: block; font-size: var(--text-xs); line-height: 1.45; padding: 3px 6px; border-radius: var(--radius-badge); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lv-dark mark, .lv-dialog mark { background: var(--soft); color: var(--ink); border-radius: 3px; padding: 0 2px; }

.lv-empty { text-align: center; padding: 80px 24px; color: var(--on-dark-2); display: grid; gap: 6px; }
.lv-empty p:first-child { font-family: var(--font-serif); font-size: 30px; color: var(--on-dark); }
.lv-link { background: none; border: 0; padding: 0; font: inherit; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lv-more { display: flex; justify-content: center; margin-top: 40px; }
.lv-dark .pill-btn.light:hover { background: var(--soft-3); }
.lv-dark .lv-note { color: var(--on-dark-2); font-size: 14.5px; margin: 0 0 24px; }
.lv-dark .lv-note a, .lv-sub a { color: var(--soft); }

/* ---------- Sign-up (contact-shell + the homepage .grab field) ---------- */
.lv-signup { padding: 96px 0 0; }
.lv-signup .contact-intro h2 { color: var(--on-dark); font-size: clamp(36px, 4vw, 52px); }
.lv-signup .contact-form { display: grid; align-content: center; }
.lv-signup .contact-form h3 { font-size: 30px; margin: 12px 0 10px; }
.lv-signup .contact-form > p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.grab { display: flex; gap: 9px; align-items: stretch; width: 100%; flex-wrap: wrap; }
.grab input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 15px 22px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.grab input::placeholder { color: var(--ink-soft); }
.grab input:focus { border-color: var(--brand); box-shadow: var(--ring); }
.grab input[aria-invalid="true"] { border-color: var(--flagged); }
.grab .pill-btn { flex: none; }
.grab-status { flex-basis: 100%; font-size: 13.5px; color: var(--muted); margin: 4px 0 0; min-height: 1.4em; }
.grab-status.is-error { color: var(--flagged); }
.grab-ok { display: none; font-size: 15px; color: var(--verified); font-weight: 500; }
.grab.done .grab-ok { display: block; }
.grab.done input, .grab.done .pill-btn, .grab.done .grab-status { display: none; }
.grab-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }

/* ---------- Pattern-page call to action ---------- */
.lv-cta { margin-top: var(--s-20); }

@media (max-width: 900px) {
  .lv-page { --gutter: 20px; }
  .lv-dark .lv-main { padding-top: 24px; padding-bottom: 72px; }
}
/* Library columns: as many 190px cards as fit on a desktop (six at the full
   page width), three on a tablet in landscape, two on a tablet in portrait,
   one on a phone. */
@media (max-width: 1100px) { .lv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .lv-controls { position: static; }
  .lv-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .grab input { font-size: 16px; }
  .grab { flex-direction: column; }
  .grab .pill-btn { justify-content: center; }
}

/* Tabs are navigation, not body links. */
.lv-page .lv-tabs a { text-decoration: none; }
.lv-page .ai-note { margin: 28px 0 0; }
@media (max-width: 680px) {
  .lv-page .lv-top .wrap { padding: 0 var(--header-inset-narrow); }
  .lv-top .lv-cta-btn { padding: 0 8px; } /* records.css .records-header > .button */
}
@media (max-width: 639px) {
  /* As the apps' phone header: the frame meets the screen edge, and title,
     count and action share the one row. The action is the 44px compact
     primary: a short visible label, the full sentence kept (visually
     hidden) as its accessible name and text. */
  .lv-top { padding-left: 0; padding-right: 0; }
  .lv-top .lv-cta-btn { position: relative; height: var(--tap-target); }
  .lv-cta-btn .lv-cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .lv-cta-btn::before { content: "Get insights"; content: "Get insights" / ""; }
}
@media (max-width: 380px) { .lv-top .lv-cta-btn .icon { display: none; } }

/* ---------- Responsive pass ----------
   Phones (notch, home indicator, Safari's toolbar), tablets and every desktop
   width. Geometry stays on the app tokens above; this block only changes
   what touch, small screens and the fixed bars need. */

/* Whatever the browser scrolls into view (focus, find, scrollIntoView)
   clears the fixed header, the sticky search row on the library and, on a
   phone, the home indicator. lv.js keeps --lv-controls-h
   at the sticky row's real height (0 when it does not stick). */
html {
  scroll-padding-top: calc(var(--header-offset) + var(--lv-controls-h, 0px) + var(--space-3));
  scroll-padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
/* Landscape phones: every row respects the notch side. */
.lv-page .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* Touch (1024px and under, or any screen driven by a finger): every control
   is the apps' --tap-target (44px). The tabs, toolbar and buttons take it
   through the shared geometry tokens; the rest are listed. */
@media (max-width: 1024px), (pointer: coarse) {
  :root { --control-height: var(--tap-target); --nav-item-height: var(--tap-target); }
  .lv-page .bar-label a, .lv-page .strip-label a { display: flex; align-items: center; min-height: var(--tap-target); min-width: var(--tap-target); }
  .lv-page .dt summary { min-height: var(--tap-target); }
  .lv-page .more-link { min-height: var(--tap-target); }
  .lv-page .toc a { display: flex; align-items: center; min-height: var(--tap-target); }
  .lv-page .built-by a { display: inline-flex; align-items: center; min-height: var(--tap-target); }
  .lv-x { width: var(--tap-target); height: var(--tap-target); }
  .lv-applied .button { height: var(--tap-target); }
  .lv-achip button { min-height: var(--tap-target); padding: 0 var(--space-3); }
  .lv-fp-field { height: var(--tap-target); }
  .lv-fp-option { min-height: var(--tap-target); }
  .lv-fp-osearch { height: var(--tap-target); }
  /* Chart dots are mouse marks; on touch the "Show the data" table under
     each chart is the way in, with a full-size link per launch. */
  .strip-plot .dots a { pointer-events: none; }
}

/* Type: one fluid scale, from the apps' display size on a phone to their
   hero size on a desktop (tokens.css --text-display 25.2px, --text-auth-
   heading 38.4px, --text-auth-hero 52.8px, at --font-size-base 12px). */
.lv-page {
  --t-display: clamp(calc(var(--font-size-base) * 2.4), 1.1rem + 2.6vw, calc(var(--font-size-base) * 4.4));
}
.lv-page .section-head h2 { font-size: clamp(calc(var(--font-size-base) * 1.9), 1rem + 1.5vw, calc(var(--font-size-base) * 3.2)); }
.lv-page .page-head .lede, .lv-page .lede { font-size: clamp(15px, 0.85rem + 0.35vw, 18px); line-height: 1.55; }
.lv-page .ledger dd { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); }
.lv-page .stat-tile dd { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.4rem); }
@media (max-width: 640px) {
  .lv-page .page-head { padding: var(--s-6) 0 var(--s-6); }
  .lv-page .page-head h1, .lv-page .about-head h1 { margin-bottom: var(--s-3); }
  .lv-page .section { margin-top: var(--s-12); }
  .lv-page .section-head { margin-bottom: var(--s-4); }
}

/* Charts on a phone: each row is its label and value on one line, then the
   bar at full width, with room between rows and values at body size. */
@media (max-width: 640px) {
  .bars .bar-row, .bars .pair-row { padding: var(--s-1) 0 var(--s-2); }
  .bars .bar-row + .bar-row { border-top: 1px solid var(--grid); }
  .bar-row .bar-label, .pair-row .bar-label { font-size: var(--t-base); }
  .bar-row .bar-val b { font-size: var(--t-md); }
  .strip-row { padding: var(--s-2) 0 var(--s-1); }
  .strip-label { font-size: var(--t-base); }
}

/* The library header on a phone: the title and its action on the 52px row,
   the live count under the title, the tabs, then the intro, all on the
   grid's own 20px gutter (or the notch side's safe area). The tab scroller
   runs edge to edge, its padding putting the track back on the gutter, so a
   tab scrolls in from the screen edge rather than being cut at the gutter;
   labels never wrap or clip, they scroll. */
@media (max-width: 639px) {
  .lv-top {
    --inset-l: max(var(--gutter), env(safe-area-inset-left, 0px));
    --inset-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  }
  .lv-page .lv-top .wrap { padding: 0 var(--inset-r) 0 var(--inset-l); }
  .lv-tabs { margin: var(--space-1) calc(var(--inset-r) * -1) var(--space-1) calc(var(--inset-l) * -1); padding: 5px var(--inset-r) 5px var(--inset-l); }
  .lv-page .lv-tabs a { padding: 0 var(--space-2); font-size: var(--text-body); }
  .lv-top { padding-bottom: var(--space-4, 16px); }
  .lv-top-row:first-child { flex-wrap: wrap; height: auto; row-gap: 0; }
  .lv-top-row:first-child::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
  .lv-top h1, .lv-top .lv-title { order: 0; flex: 1 1 0; line-height: var(--header-height); }
  .lv-top-end { order: 1; }
  .lv-count { order: 3; margin-top: calc(var(--space-2) * -1); }
  .lv-top-mid { margin-top: var(--space-3); }
  .lv-top-mid .lv-sub { flex-basis: 100%; font-size: 13px; line-height: 1.55; }
  .lv-controls { padding: var(--space-3) 0 var(--space-4, 16px); }
  .lv-dark .lv-main { padding-top: var(--space-6); }
}

/* Thumbnails: shown as they are, no filter or overlay; the duration badge is
   the only thing laid over them. Near-black stills are replaced with a
   better-lit frame of the same video when exported
   (scripts/launch-videos/thumbs.py), so bright frames are not blown out. */

/* =====================================================================
   Light and dark
   The head script sets <html data-theme> from a saved choice, else the
   system setting, before this file paints. Light is the look above. Dark
   swaps the site and app tokens for their dark steps; the library's black
   canvas (--night) and the white on it (--day) never change, so the dark
   header and grid read the same in both. New values, flagged to the
   design system: the dark steps below.
   ===================================================================== */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  /* site-pages.css */
  --paper: #131119; --paper-warm: #1b1824; --card: #1c1926;
  --ink: #f2f0f7; --ink-soft: #a6a1b6; --muted: #bdb8cb;
  --line: #34304a; --line-soft: #2a2639;
  --brand: #c3b7f6; --brand-lift: #a796ef;
  --soft: #4d4472; --soft-2: #3a3358; --soft-3: #2b2641;
  --verified: #66c69c; --flagged: #e8a060; --cited: #a394f7; --neutral: #86b1e5;
  /* the apps' tokens */
  --color-text: #ecebf2; --color-secondary: #b1acbe; --color-muted: #aaa5b7;
  --color-background: #131119; --color-surface: #1c1926; --color-border: #34304a;
  --color-accent: #6b59ba; --color-accent-hover: #7b69ca; --color-accent-soft: #312a52;
  --color-button-hover: #262233; --color-hover: #231f30;
  --color-nav-ink: #b8b3c5; --color-nav-hover: #262233; --color-nav-active: #d3c9fb;
  --color-nav-icon: #908b9f; --color-nav-icon-active: #bcaef4;
  --color-panel-border: #2e2a3e; --color-search-border: #3a3650; --color-search-icon: #938ea3;
  --color-kbd-border: #3c3852; --color-checkbox-border: #4d4863; --color-filter-tint: #191622;
  --color-filter-field: #c6c1d3; --color-filter-group: #a39daf; --color-filter-selected: #6f6390;
  --shadow-control: 0 1px 2px #00000040; --shadow-panel: 0 2px 3px #00000030;
  --shadow-popover: 0 10px 30px #00000066; --shadow-filter-panel: 0 14px 40px #00000073;
}
[data-theme="dark"] .lv-page {
  --field-line: #4a4560;
  --shadow-hair: 0 1px 2px #00000059;
  --shadow-float: 0 1px 2px #00000040, 0 14px 34px -18px #000000b3;
  --shadow-lift: 0 30px 70px -30px #000000d9;
  --ring: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
}
/* site-pages.css literals on library pages */
[data-theme="dark"] .pill-btn:not(.light):not(.ghost) { background: var(--color-accent); color: var(--day); box-shadow: none; }
[data-theme="dark"] .pill-btn:not(.light):not(.ghost):hover { background: var(--color-accent-hover); }
[data-theme="dark"] .pill-btn.light { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .contact-shell { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .skip { color: var(--day); }
/* The site header in the dark theme (its white pill is a site-pages.css literal). */
[data-theme="dark"] .nav-shell.floating .nav { background: var(--card); box-shadow: 0 0 0 1px var(--line-soft); }
[data-theme="dark"] .seg a:hover { background: var(--card); }
[data-theme="dark"] .play { color: var(--night); }
/* The play control sits on the thumbnail, so it keeps its light chip. */
[data-theme="dark"] .facade-load { background: var(--day); color: var(--night); }
[data-theme="dark"] .facade-load .play { background: var(--night); color: var(--day); }

/* The toggle: an app Button, icon only, in the dark header's end slot.
   It shows the moon in light (press for dark) and the sun in dark. */
.lv-theme { width: var(--control-height); padding: 0; color: var(--on-dark-2); background: var(--dark-fill); border-color: var(--dark-line-2); box-shadow: none; }
.lv-theme:hover { color: var(--on-dark); background: var(--dark-line); }
.lv-theme:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 3px; }
.lv-theme .lv-theme-sun, [data-theme="dark"] .lv-theme .lv-theme-moon { display: none; }
[data-theme="dark"] .lv-theme .lv-theme-sun { display: block; }

/* =====================================================================
   Launch dialog
   The apps' record preview (modal.css .form-dialog--wide, records.css
   .record-identity): a 10px surface panel with a bordered header row that
   carries the company's identity (logo tile, name, domain, X handle,
   category) and its badges, then the player and the evidence on the left
   and label/value rows on the right. Rows that would say "not detected"
   are not drawn.
   ===================================================================== */
.lv-dialog {
  border: 0; padding: 0; background: transparent; color: var(--color-text);
  width: min(1120px, calc(100vw - var(--dialog-inset, 48px))); max-width: none; max-height: calc(100dvh - var(--dialog-inset, 48px));
  font: var(--weight-normal) var(--text-body)/1.45 var(--font-sans); font-feature-settings: "cv11", "ss01";
}
.lv-dialog::backdrop { background: color-mix(in srgb, var(--night) 55%, transparent); backdrop-filter: blur(2px); }
.lv-dl {
  display: flex; flex-direction: column; overflow: hidden; max-height: inherit;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel);
  box-shadow: 0 20px 65px #25202f40;
}
.lv-dh {
  display: flex; align-items: center; gap: var(--space-3); flex: none;
  min-height: calc(var(--header-height) + var(--space-6)); padding: var(--space-3) var(--space-3) var(--space-3) 18px;
  border-bottom: 1px solid var(--color-border); background: var(--color-surface);
}
.lv-did { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1 1 auto; }
.lv-dlogo {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: var(--radius-control); overflow: hidden;
  background: var(--color-background); box-shadow: inset 0 0 0 1px var(--color-border); display: grid; place-items: center;
}
.lv-dlogo .lv-mono { position: static; width: 100%; height: 100%; display: grid; place-items: center; font: var(--weight-semibold) var(--text-label)/1 var(--font-sans); color: var(--color-nav-active); background: var(--color-accent-soft); box-shadow: none; border-radius: 0; aspect-ratio: auto; }
.lv-dlogo img { position: absolute; inset: 8px; width: 28px; height: 28px; object-fit: contain; opacity: 0; }
.lv-dlogo.has-img { background: var(--day); }
.lv-dlogo.has-img img { opacity: 1; }
.lv-dlogo.has-img .lv-mono { visibility: hidden; }
.lv-dlogo.is-avatar img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv-did-copy { min-width: 0; display: grid; gap: 1px; }
.lv-dialog .lv-dh h2 {
  font: var(--weight-semibold) var(--text-h1)/1.25 var(--font-sans); letter-spacing: -0.45px; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-did-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--text-sm); color: var(--color-secondary); min-width: 0; }
.lv-dot { color: var(--color-border); }
.lv-dialog .lv-did-link { display: inline-flex; align-items: center; gap: 4px; color: var(--color-secondary); text-decoration: none; border-radius: var(--radius-badge); }
.lv-dialog .lv-did-link:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .lv-dialog .lv-did-link:hover { color: var(--color-nav-active); }
.lv-did-link .i { width: 11px; height: 11px; opacity: .7; }
.lv-dbadges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); flex: 0 1 auto; }
.lv-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-badge);
  font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
  background: var(--color-background); color: var(--color-secondary); box-shadow: inset 0 0 0 1px var(--color-border);
}
.lv-badge--accent { background: var(--color-accent-soft); color: var(--color-nav-active); box-shadow: none; }
.lv-x {
  flex: none; display: grid; place-items: center; width: var(--control-height); height: var(--control-height);
  border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-control); cursor: pointer; transition: background-color var(--motion-quick);
}
.lv-x:hover { background: var(--color-button-hover); }
.lv-x .i { width: 14px; height: 14px; }
.lv-dc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: auto; overscroll-behavior: contain; }
.lv-lc, .lv-rc { padding: 18px; display: flex; flex-direction: column; gap: var(--space-4, 16px); min-width: 0; }
.lv-rc { border-left: 1px solid var(--color-border); background: var(--color-filter-tint); gap: 18px; }
.lv-dialog .player { position: static; }
.lv-dialog .facade { aspect-ratio: 16 / 9; max-height: none; background-size: cover; background-position: center; border-radius: var(--radius-panel); }
.lv-dialog .facade.has-thumb::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--night) 82%, transparent)); }
.lv-dialog .facade-title { font-size: 17px; }
.lv-dialog .embed-slot { min-height: 320px; }
.lv-dialog .player-note { font-size: var(--text-xs); color: var(--color-secondary); }
/* Stats: the apps' metric row, one bordered strip split by hairlines. */
.lv-facts {
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-panel); overflow: hidden;
}
.lv-facts div { padding: 10px 14px; min-width: 0; }
.lv-facts div + div { border-left: 1px solid var(--color-border); }
.lv-facts dt { font-size: var(--text-xs); color: var(--color-secondary); }
.lv-facts dd { margin: 2px 0 0; font: var(--weight-semibold) 20px/1.2 var(--font-sans); letter-spacing: -0.4px; font-variant-numeric: tabular-nums; color: var(--color-text); }
.lv-fact h3, .lv-rc-h {
  font: var(--weight-semibold) var(--text-xs)/1.45 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none;
  color: var(--color-secondary) !important; margin: 0 0 6px;
}
.lv-fact p { color: var(--color-text); font-size: var(--text-label); line-height: 1.55; }
.lv-dialog .lv-fact blockquote {
  margin: 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--color-accent);
  font: 400 21px/1.3 var(--font-serif); color: var(--color-text);
}
[data-theme="dark"] .lv-dialog .lv-fact blockquote { border-left-color: var(--cited); }
.lv-dsec { display: grid; }
.lv-rows { margin: 0; display: grid; border-top: 1px solid var(--color-border); }
.lv-rows > div {
  display: grid; grid-template-columns: var(--lv-row-label, 9.5rem) minmax(0, 1fr); gap: var(--space-3); align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--color-border);
}
.lv-rows dt { font-size: var(--text-sm); color: var(--color-secondary); }
.lv-rows dd { margin: 0; font-size: var(--text-label); color: var(--color-text); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.lv-rows dd b { font-weight: var(--weight-semibold); }
.lv-rows .lv-rows-sub { color: var(--color-secondary); font-size: var(--text-sm); }
.lv-rows .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.lv-rows .is-wide { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.lv-rc-note { font-size: var(--text-xs); color: var(--color-secondary); margin-top: var(--space-2); }
/* The beat timeline: the video's length as a track, a mark per beat. */
.lv-tl { position: relative; height: 26px; margin: 2px 0 6px; }
.lv-tl:empty { display: none; }
.lv-tl-track { position: absolute; left: 0; right: 3rem; top: 11px; height: 4px; border-radius: 2px; background: var(--color-accent-soft); }
.lv-tl-mark { position: absolute; top: -4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-filter-tint); }
[data-theme="dark"] .lv-tl-mark { background: var(--cited); }
.lv-tl-end { position: absolute; right: 0; top: 5px; font-size: var(--text-xs); color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.lv-dialog .lv-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.lv-dialog .lv-chips .chip { background: var(--color-surface); }
.lv-dlinks { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
@media (max-width: 900px) {
  .lv-dc { grid-template-columns: minmax(0, 1fr); }
  .lv-rc { border-left: 0; border-top: 1px solid var(--color-border); }
}
/* Phone: the dialog fills the screen, as the apps' shared dialogs do; the
   header stays put while the body scrolls under it. */
@media (max-width: 639px) {
  .lv-dialog { width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; }
  .lv-dl { height: 100%; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .lv-dh { flex-wrap: wrap; padding: max(var(--space-3), env(safe-area-inset-top, 0px)) var(--space-3) var(--space-3) var(--space-3); }
  .lv-did { flex: 1 1 0; }
  .lv-dbadges { order: 3; flex: 1 1 100%; justify-content: flex-start; }
  .lv-lc, .lv-rc { padding: var(--space-4, 16px) var(--space-3); }
  .lv-facts dd { font-size: 17px; }
  .lv-dialog .lv-fact blockquote { font-size: 19px; }
  .lv-rows { --lv-row-label: 7.5rem; }
}

/* =====================================================================
   Hook patterns: the charts sit on the page, not in white cards; a
   hairline above and between them does the separating.
   ===================================================================== */
.lv-page .patterns-charts, .lv-page .p-top { gap: 0; border-top: 1px solid var(--line); margin-top: var(--s-6); }
.lv-page .patterns-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.lv-page .patterns-charts > .chart, .lv-page .p-top > .chart { background: none; border: 0; border-radius: 0; box-shadow: none; padding: var(--s-6) var(--s-6) var(--s-6) 0; }
.lv-page .patterns-charts > .chart + .chart, .lv-page .p-top > .chart + * { border-left: 1px solid var(--line); }
.lv-page .patterns-charts > .chart + .chart { padding: var(--s-6) 0 var(--s-6) var(--s-6); }
.lv-page .p-top > .template-box { margin: var(--s-6) 0 var(--s-6) var(--s-6); }
@media (max-width: 1100px) {
  .lv-page .patterns-charts > .chart, .lv-page .p-top > .chart, .lv-page .patterns-charts > .chart + .chart { padding: var(--s-6) 0; }
  .lv-page .patterns-charts > .chart + .chart, .lv-page .p-top > .chart + * { border-left: 0; border-top: 1px solid var(--line); }
  .lv-page .p-top > .template-box { margin: var(--s-6) 0 0; }
}

/* =====================================================================
   Chart legibility (both themes): annotations at the apps' secondary-text
   contrast and body size, low-sample bars outlined rather than just pale,
   medians heavier.
   ===================================================================== */
.lv-page .chart { --chart-ink-2: color-mix(in srgb, var(--ink) 55%, var(--ink-2)); --viz-muted: color-mix(in srgb, var(--viz) 34%, var(--paper)); }
.lv-page .chart-src, .lv-page .chart-sub { color: var(--chart-ink-2); }
.lv-page .chart-src code { font-size: 1em; }
.lv-page .bar-val small, .lv-page .strip-label small { font-size: var(--t-sm); color: var(--chart-ink-2); }
.lv-page .bar-label, .lv-page .bar-label a { color: color-mix(in srgb, var(--ink) 70%, var(--ink-2)); }
.lv-page .bar-row.is-small .bar, .lv-page .bars:has(.is-hl) .bar-row:not(.is-hl) .bar { fill: var(--viz-muted); }
.lv-page .bar-row.is-small .bar { stroke: var(--viz); stroke-width: 1.25; stroke-dasharray: 3 2; }
.lv-page .strip-plot .med { stroke-width: 4; }
.lv-page .strip-plot .dots circle { fill-opacity: 0.92; }
.lv-page .strip-axis-top { margin: 0 0 2px; }
.lv-page .strip-axis-mid { display: none; }
@media (max-width: 640px) {
  .lv-page .strip-axis-mid { display: grid; padding: 2px 0; border-top: 1px solid var(--grid); }
  .lv-page .strip-axis .tk-minor { display: none; }
}

/* =====================================================================
   Responsive, round 4
   ===================================================================== */
/* Library card text: the takeaway and metadata at the stronger secondary. */
.lv-cb .lv-hook.is-none, .lv-cb .lv-hook.is-take { color: var(--on-dark-2); }
.lv-cb .lv-meta { color: var(--on-dark-2); }
/* Tabs: never shrink, keep their padding, 44px on touch. */
.lv-page .lv-tabs a { flex: none; padding: 0 14px; }
@media (max-width: 639px) { .lv-page .lv-tabs a { padding: 0 var(--space-3); } }
/* Under 385px the four tabs are a two-by-two grid: every label readable,
   nothing scrolled out of view. From 385px they fit one row. */
@media (max-width: 384px) {
  .lv-tabs { overflow: visible; mask-image: none !important; }
  .lv-tabs-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; flex: 1 1 auto; }
  .lv-page .lv-tabs a { padding: 0 var(--space-2); }
}
/* Library intro: tighter, so the first row of launches shows sooner. */
@media (max-width: 639px) {
  .lv-top { padding-bottom: var(--space-3); }
  .lv-top-mid { margin-top: var(--space-2); }
  .lv-top-mid .lv-sub { font-size: var(--text-body); line-height: 1.5; }
  .lv-controls { padding: var(--space-2) 0 var(--space-3); }
  .lv-dark .lv-main { padding-top: var(--space-4, 16px); }
}
/* Short landscape screens: compact headings so the first chart or row of
   launches is on the first screen. */
@media (max-height: 520px) and (orientation: landscape) {
  .lv-top-mid { display: none; }
  .lv-top { padding-bottom: var(--space-2); }
  .lv-page .page-head { padding: var(--s-4) 0; }
  .lv-page .page-head h1, .lv-page .about-head h1 { font-size: clamp(1.75rem, 1rem + 2vw, 2.25rem); margin-bottom: var(--s-2); }
  .lv-page .page-head .lede, .lv-page .lede { font-size: 15px; }
  .lv-controls { padding: var(--space-2) 0; }
}
/* Library metadata at 12px on tablets and phones. */
@media (max-width: 1024px) {
  .lv-cb .lv-meta, .lv-chips .chip { font-size: var(--text-body); }
  .lv-cb .lv-meta { margin-bottom: 2px; }
}
/* Touch: chart rows a full tap tall and spaced; About contents links
   centred in 44px rows. */
@media (max-width: 1024px), (pointer: coarse) {
  .lv-page .bars .bar-row { min-height: var(--tap-target); }
  .lv-page .toc a { min-height: var(--tap-target); }
  .lv-page .dt summary { padding: 0 var(--s-4) 0 var(--s-3); }
  .lv-theme { width: var(--tap-target); }
}
@media (min-width: 1025px) and (pointer: fine) {
  .lv-page .toc a { display: flex; align-items: center; min-height: var(--control-height); }
  .lv-page .dt summary { min-height: var(--control-height); padding: 0 var(--s-4) 0 var(--s-3); }
}

/* =====================================================================
   Responsive, round 5 (phones)
   ===================================================================== */
/* Hook patterns: one column wherever the generic layout stacks; the
   two-column rule above would otherwise win on specificity. */
@media (max-width: 1100px) {
  .lv-page .patterns-charts { grid-template-columns: minmax(0, 1fr); }
}
/* Bar charts: label and value share a line above a full-width bar whenever
   the chart itself is narrow, not just the screen. */
.lv-page .bars { container-type: inline-size; }
@container (max-width: 560px) {
  .lv-page .bar-row, .lv-page .pair-row, .lv-page .chart-compact .bar-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .lv-page .bar-row .bar-label, .lv-page .pair-row .bar-label { grid-column: 1; padding-bottom: 0; }
  .lv-page .bar-row .bar-val, .lv-page .pair-row .bar-val { grid-column: 2; grid-row: 1; flex-direction: row; gap: 6px; align-items: baseline; }
  .lv-page .bar-row .bar-plot, .lv-page .pair-row .bar-plot { grid-column: 1 / -1; }
}
/* Distribution axes: the phone tick set on short landscape screens too. */
@media (max-height: 520px) and (orientation: landscape) {
  .lv-page .strip-axis .tk-minor { display: none; }
}
/* Library header on phones: tabs and intro closer together. */
@media (max-width: 639px) {
  .lv-tabs { margin-top: 0; margin-bottom: 0; }
  .lv-count { margin-bottom: var(--space-1); }
}
/* 385–429px: the four tabs share one full-width row, each as wide as its
   label needs. */
@media (min-width: 385px) and (max-width: 429px) {
  .lv-tabs-track { display: flex; width: 100%; flex: 1 1 auto; }
  .lv-page .lv-tabs a { flex: 1 1 auto; padding: 0 6px; }
}