@charset "utf-8";
/* ==========================================================================
   الک — Alak
   An instrument console that opens case files. Persian, RTL, dark.
   Nothing is fetched from the network: the site works offline and where
   CDNs are blocked. Vazirmatn arrives via the generated fonts.css.
   ========================================================================== */

@layer reset, base, meter, layout, hero, console, dossier, prose, lab, util;

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;

  --graphite-900: oklch(12.5% 0.014 262);
  --graphite-850: oklch(15%   0.015 262);
  --graphite-800: oklch(17.5% 0.016 262);
  --graphite-700: oklch(21%   0.018 262);
  --graphite-600: oklch(26%   0.020 262);
  --graphite-500: oklch(33%   0.022 262);
  --graphite-300: oklch(64%   0.018 262);
  --graphite-200: oklch(76%   0.012 258);
  --graphite-100: oklch(94%   0.008 252);

  --signal-false: oklch(64% 0.212  27);
  --signal-weak:  oklch(74% 0.170  58);
  --signal-mixed: oklch(84% 0.155  92);
  --signal-true:  oklch(76% 0.180 149);
  --accent:       oklch(82% 0.125 188);
  --accent-deep:  oklch(62% 0.130 195);

  --dist-0:  oklch(52% .200  25);  --dist-1:  oklch(58% .215  30);
  --dist-2:  oklch(63% .215  40);  --dist-3:  oklch(68% .195  52);
  --dist-4:  oklch(72% .175  62);  --dist-5:  oklch(77% .165  76);
  --dist-6:  oklch(82% .155  92);  --dist-7:  oklch(85% .150 104);
  --dist-8:  oklch(84% .160 122);  --dist-9:  oklch(80% .175 134);
  --dist-10: oklch(78% .180 142);  --dist-11: oklch(75% .185 150);

  --ground:      var(--graphite-900);
  --panel:       var(--graphite-800);
  --panel-raise: var(--graphite-700);
  --rule:        color-mix(in oklab, var(--graphite-500) 62%, transparent);
  --rule-strong: var(--graphite-500);
  --text:        var(--graphite-100);
  --text-dim:    var(--graphite-200);
  --text-faint:  var(--graphite-300);

  --lab-bg:    oklch(14% 0.013 262);
  --lab-panel: oklch(19% 0.016 262);
  --lab-ink:   oklch(92% 0.010 252);
  --lab-faint: oklch(66% 0.016 262);
  --lab-grid:  oklch(26% 0.018 262);
  --lab-rule:  oklch(38% 0.020 262);
  --lab-a: oklch(72% 0.150 232);
  --lab-b: oklch(76% 0.165 62);
  --lab-c: oklch(74% 0.160 150);
  --lab-d: oklch(70% 0.180 350);
  --lab-e: oklch(80% 0.140 100);

  --measure: 40rem;
  --gutter: clamp(1rem, 4vw, 2.75rem);
  --radius: 4px;
  --radius-lg: 8px;
  --tap: 2.75rem;

  --font-fa: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --font-num: 'Vazirmatn', ui-monospace, Consolas, monospace;

  --step--1: clamp(.79rem, .75rem + .18vw, .87rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.28rem + 1.05vw, 2.15rem);
  --step-3:  clamp(2.1rem, 1.5rem + 2.7vw, 4rem);

  --ease: cubic-bezier(.2, .7, .3, 1);
  --sweep: cubic-bezier(.16, .84, .28, 1);
  --spring: linear(0,.36 5%,.72 10%,.97 14%,1.08 17%,1.11 20%,1.09 24%,1.01 33%,.99 38%,1 50%,1);

  --mx: 0; --my: 0;                      /* pointer, for the lensed field */
}

/* ------------------------------------------------------------------ reset */
@layer reset {
  html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
  *, *::before, *::after { box-sizing: inherit; }
  body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg, video { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; }
}

/* ------------------------------------------------------------------ base */
@layer base {
  html { block-size: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    min-block-size: 100%;
    background: var(--ground);
    color: var(--text);
    font-family: var(--font-fa);
    font-size: var(--step-0);
    line-height: 1.95;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 { line-height: 1.32; font-weight: 800; text-wrap: balance; }
  h1 { font-size: var(--step-3); letter-spacing: -.02em; }
  h2 { font-size: var(--step-2); letter-spacing: -.01em; }
  h3 { font-size: var(--step-1); }
  p { text-wrap: pretty; }

  a:where(:any-link) { text-decoration-thickness: 1px; text-underline-offset: .25em; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
  ::selection { background: color-mix(in oklab, var(--accent) 32%, transparent); }
  * { scrollbar-color: var(--graphite-500) transparent; scrollbar-width: thin; }

  .skip {
    position: absolute; inset-block-start: -100%; inset-inline-start: 1rem; z-index: 100;
    padding: .6rem 1rem; background: var(--panel-raise);
    border: 1px solid var(--rule-strong); border-radius: var(--radius);
  }
  .skip:focus { inset-block-start: 1rem; }

  /* cross-page transitions where the browser offers them */
  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
}

/* ==========================================================================
   THE METER — twelve segments, 0 to 11, four verdict zones.
   Colour is never the only carrier: the number is always printed beside it.
   ========================================================================== */
@layer meter {
  .meter { --n: 12; --score: 0; --lit: var(--signal-false); display: grid; gap: .5rem; inline-size: 100%; }

  .meter__scale {
    display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px;
    block-size: var(--h, .95rem); direction: ltr; border-radius: 2px; overflow: hidden;
  }
  .meter__seg {
    background: color-mix(in oklab, var(--seg) 13%, var(--graphite-600));
    transition: background .5s var(--ease) calc(var(--i) * 42ms),
                box-shadow .5s var(--ease) calc(var(--i) * 42ms);
  }
  .meter__seg[data-on] {
    background: var(--seg);
    box-shadow: 0 0 12px -2px color-mix(in oklab, var(--seg) 70%, transparent);
  }
  .meter__seg:nth-child(1)  { --seg: var(--dist-0);  --i: 0; }
  .meter__seg:nth-child(2)  { --seg: var(--dist-1);  --i: 1; }
  .meter__seg:nth-child(3)  { --seg: var(--dist-2);  --i: 2; }
  .meter__seg:nth-child(4)  { --seg: var(--dist-3);  --i: 3; }
  .meter__seg:nth-child(5)  { --seg: var(--dist-4);  --i: 4; }
  .meter__seg:nth-child(6)  { --seg: var(--dist-5);  --i: 5; }
  .meter__seg:nth-child(7)  { --seg: var(--dist-6);  --i: 6; }
  .meter__seg:nth-child(8)  { --seg: var(--dist-7);  --i: 7; }
  .meter__seg:nth-child(9)  { --seg: var(--dist-8);  --i: 8; }
  .meter__seg:nth-child(10) { --seg: var(--dist-9);  --i: 9; }
  .meter__seg:nth-child(11) { --seg: var(--dist-10); --i: 10; }
  .meter__seg:nth-child(12) { --seg: var(--dist-11); --i: 11; }

  .meter__track { position: relative; block-size: .6rem; direction: ltr; }
  .meter__needle {
    position: absolute; inset-block-start: 0;
    inset-inline-start: calc((var(--score) + .5) / var(--n) * 100%);
    translate: -50% 0;
    inline-size: 0; block-size: 0;
    border-inline: .38rem solid transparent;
    border-block-end: .5rem solid var(--text);
    filter: drop-shadow(0 0 7px color-mix(in oklab, var(--lit) 85%, transparent));
    transition: inset-inline-start 1.2s var(--sweep);
  }
  .meter__ticks {
    display: grid; grid-template-columns: repeat(var(--n), 1fr); direction: ltr;
    font-size: .6rem; color: var(--text-faint);
  }
  .meter__ticks span { text-align: center; }

  .readout { display: inline-flex; align-items: baseline; gap: .35rem;
    font-family: var(--font-num); font-weight: 800; color: var(--lit); }
  .readout__big { font-size: 2.6em; line-height: .9; letter-spacing: -.03em; }
  .readout__of { font-size: .85em; color: var(--text-faint); font-weight: 500; }

  .verdict {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .22em .8em; border: 1px solid currentColor; border-radius: 999px;
    font-size: var(--step--1); font-weight: 700; color: var(--lit); white-space: nowrap;
  }
  .verdict::before { content: ''; inline-size: .5em; block-size: .5em; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 8px currentColor; }

  [data-band='false'] { --lit: var(--signal-false); }
  [data-band='weak']  { --lit: var(--signal-weak); }
  [data-band='mixed'] { --lit: var(--signal-mixed); }
  [data-band='true']  { --lit: var(--signal-true); }
  [data-band='none']  { --lit: var(--text-faint); }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .wrap { inline-size: min(100% - var(--gutter) * 2, 80rem); margin-inline: auto; }
  .wrap--read { inline-size: min(100% - var(--gutter) * 2, var(--measure)); margin-inline: auto; }

  .masthead {
    position: sticky; inset-block-start: 0; z-index: 40;
    background: color-mix(in oklab, var(--ground) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    border-block-end: 1px solid var(--rule);
  }
  @supports not (backdrop-filter: blur(1px)) { .masthead { background: var(--ground); } }
  .masthead__in { display: flex; align-items: center; gap: .6rem; min-block-size: 3.7rem; }

  .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
  .brand svg { inline-size: 2.1rem; block-size: 2.1rem; color: var(--accent);
    transition: rotate .8s var(--ease); }
  .brand:hover svg { rotate: 40deg; }
  .brand__w { display: grid; gap: .1rem; line-height: 1; }
  .brand b { font-size: 1.2rem; letter-spacing: .05em; font-weight: 800; }
  .brand small { color: var(--text-faint); font-size: .58rem; letter-spacing: .28em; }
  @media (max-width: 40rem) { .brand small { display: none; } .brand b { font-size: 1.05rem; } }

  .nav { margin-inline-start: auto; display: flex; gap: .15rem;
    max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    padding: .4rem .75rem; border-radius: 999px; font-size: var(--step--1);
    color: var(--text-faint); text-decoration: none; white-space: nowrap;
    min-block-size: var(--tap); display: inline-flex; align-items: center;
    transition: color .18s var(--ease), background .18s var(--ease);
  }
  .nav a:hover { color: var(--text); background: var(--panel); }
  .nav a[aria-current='page'] { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }

  .foot { margin-block-start: 6rem; border-block-start: 1px solid var(--rule);
    padding-block: 2.5rem 4rem; color: var(--text-faint); font-size: var(--step--1); }
  .foot a { color: var(--text-dim); }

  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.4rem; min-block-size: var(--tap);
    border-radius: 999px; text-decoration: none; font-weight: 700;
    background: var(--accent); color: oklch(18% .02 250);
    transition: translate .2s var(--ease), box-shadow .2s var(--ease);
    box-shadow: 0 6px 22px -10px var(--accent);
  }
  .btn svg { inline-size: 1em; block-size: 1em; }
  .btn:hover { translate: 0 -2px; box-shadow: 0 12px 28px -12px var(--accent); }
  .btn--ghost { background: none; color: var(--text-dim); border: 1px solid var(--rule-strong);
    box-shadow: none; }
  .btn--ghost:hover { color: var(--text); border-color: var(--graphite-300); }
}

/* ------------------------------------------------------------------ hero */
@layer hero {
  /* the lensed mesh from the mark, in two layers that drift with the pointer */
  /* The mesh is drawn with `slice`, so it paints past its own box. Clip it,
     or the document grows sideways and every centred wrapper shifts. */
  .field { position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
    color: var(--accent-deep); overflow: clip; }
  .field > div { position: absolute; inset: 0; overflow: clip; }
  .field svg { inline-size: 100%; block-size: 100%; overflow: hidden; }
  .field__a { opacity: .30;
    translate: calc(var(--mx) * 26px) calc(var(--my) * 18px); }
  .field__b { opacity: .13; scale: 1.35;
    translate: calc(var(--mx) * -46px) calc(var(--my) * -30px);
    color: var(--signal-mixed); }
  .field > div { transition: translate .9s cubic-bezier(.2,.8,.2,1); }
  .field { -webkit-mask-image: radial-gradient(ellipse 78% 72% at 62% 34%, #000 22%, transparent 76%);
           mask-image: radial-gradient(ellipse 78% 72% at 62% 34%, #000 22%, transparent 76%); }

  .hero { position: relative; isolation: isolate; overflow: clip;
    padding-block: clamp(2.5rem, 6vw, 5.5rem) 1rem; }
  .hero__in { position: relative; }

  .hero__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .7rem; letter-spacing: .22em; color: var(--text-faint);
    padding: .3rem .85rem .3rem .6rem; border: 1px solid var(--rule);
    border-radius: 999px; background: color-mix(in oklab, var(--panel) 60%, transparent);
  }
  .dot { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent);
    animation: ping 2.6s var(--ease) infinite; }
  @keyframes ping {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 .7rem transparent; }
  }

  .hero__title { margin-block-start: 1.1rem; max-inline-size: 18ch; }
  .hero__title span { display: block; }
  .hero__title .l2 { color: var(--text-dim); }
  .hero__title em {
    font-style: normal; color: var(--accent); position: relative;
    text-shadow: 0 0 34px color-mix(in oklab, var(--accent) 45%, transparent);
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero__title .l1 { animation: rise .8s var(--spring) both; }
    .hero__title .l2 { animation: rise .8s var(--spring) .1s both; }
    .hero__lede     { animation: rise .8s var(--spring) .2s both; }
    .hero__cta      { animation: rise .8s var(--spring) .3s both; }
    @keyframes rise { from { opacity: 0; translate: 0 18px; } }
  }

  .hero__lede { margin-block-start: 1.3rem; max-inline-size: 44ch;
    color: var(--text-dim); font-size: var(--step-1); line-height: 1.8; }
  .hero__lede b { color: var(--text); font-weight: 800; }
  .hero__cta { margin-block-start: 2rem; display: flex; gap: .7rem; flex-wrap: wrap; }

  /* the distribution instrument */
  .dist {
    margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
    padding: 1.4rem 1.5rem 1.2rem;
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--panel) 82%, transparent),
      color-mix(in oklab, var(--graphite-850) 82%, transparent));
    border: 1px solid var(--rule); border-radius: var(--radius-lg);
  }
  .dist__head { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: baseline;
    font-size: var(--step--1); color: var(--text-faint); }
  .dist__head strong { color: var(--text); font-size: 1rem; }
  .dist__bars { margin-block-start: 1.1rem; display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 4px; block-size: 8rem; direction: ltr; align-items: end; }
  .dist__bar {
    background: linear-gradient(180deg, var(--seg), color-mix(in oklab, var(--seg) 55%, transparent));
    border-radius: 2px 2px 0 0; block-size: calc(var(--pct) * 1%); min-block-size: 3px;
    opacity: var(--o, 1); position: relative; transform-origin: bottom;
    box-shadow: 0 0 18px -6px var(--seg);
  }
  @media (prefers-reduced-motion: no-preference) {
    .dist__bar { animation: grow .8s var(--sweep) both; animation-delay: calc(var(--i) * 55ms); }
    @keyframes grow { from { scale: 1 0; } }
  }
  .dist__bar > span { position: absolute; inset-block-end: calc(100% + .3rem); inset-inline: 0;
    text-align: center; font-size: .66rem; color: var(--text-dim); }
  .dist__axis { margin-block-start: .45rem; display: grid; grid-template-columns: repeat(12, 1fr);
    direction: ltr; font-size: .62rem; color: var(--text-faint); text-align: center; }
  .dist__note { margin-block-start: .9rem; padding-block-start: .8rem;
    border-block-start: 1px solid var(--rule); font-size: var(--step--1); color: var(--text-faint); }
}

/* ------------------------------------------------------------------ console */
@layer console {
  .filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    margin-block: clamp(2.5rem, 6vw, 4rem) 1.25rem;
    padding-block-end: 1.1rem; border-block-end: 1px solid var(--rule); }
  .filters__label { font-size: var(--step--1); color: var(--text-faint);
    letter-spacing: .05em; margin-inline-end: .3rem; }
  .chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .85rem; min-block-size: 2.2rem;
    border: 1px solid var(--rule-strong); border-radius: 999px;
    font-size: var(--step--1); color: var(--text-dim); text-decoration: none;
    transition: background .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), translate .18s var(--ease);
  }
  .chip b { font-weight: 600; color: var(--text-faint); font-size: .85em; }
  .chip:hover:not([aria-pressed='true']) { color: var(--text); border-color: var(--graphite-300);
    translate: 0 -1px; }
  .chip[aria-pressed='true'] { color: oklch(18% .02 250); background: var(--accent);
    border-color: transparent; font-weight: 700; }
  .chip[aria-pressed='true'] b { color: inherit; opacity: .65; }

  .search { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem;
    padding: .35rem .9rem; background: var(--panel); border: 1px solid var(--rule-strong);
    border-radius: 999px; transition: border-color .18s var(--ease); }
  .search:focus-within { border-color: var(--accent); }
  .search__i { inline-size: 1rem; block-size: 1rem; color: var(--text-faint); flex: none; }
  .search input { background: none; border: 0; outline: 0; inline-size: 11rem; font-size: var(--step--1); }
  .search input::placeholder { color: var(--text-faint); }

  .count { font-size: var(--step--1); color: var(--text-faint); margin-block-end: 1.25rem; }

  .cases { display: grid; gap: .85rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); }

  .case {
    --edge: var(--accent);
    position: relative; display: flex; flex-direction: column; gap: .5rem;
    padding: 1.35rem 1.3rem 1.15rem;
    background: linear-gradient(180deg, var(--graphite-850), var(--graphite-900));
    border: 1px solid var(--rule); border-radius: var(--radius-lg);
    text-decoration: none; overflow: hidden; isolation: isolate;
    transition: translate .28s var(--ease), border-color .28s var(--ease),
                box-shadow .28s var(--ease);
  }
  .case::before {                       /* a wash that answers the pointer */
    content: ''; position: absolute; inset: -1px; z-index: -1; opacity: 0;
    background: radial-gradient(22rem 16rem at var(--px, 50%) var(--py, 0%),
      color-mix(in oklab, var(--edge) 20%, transparent), transparent 70%);
    transition: opacity .3s var(--ease);
  }
  .case:hover, .case:focus-visible { translate: 0 -3px; border-color: color-mix(in oklab, var(--edge) 55%, var(--rule));
    box-shadow: 0 18px 40px -26px #000, 0 0 0 1px color-mix(in oklab, var(--edge) 18%, transparent); }
  .case:hover::before, .case:focus-visible::before { opacity: 1; }

  /* ---- the drawn thumbnail ----
     It rides the card's top edge rather than sitting inside the padding: the
     inline margin cancels the card's own, and the card's overflow:hidden gives
     the paper the card's rounded corner. The glyph is NOT replaced by it --
     the icon is what the map, the pager and the concept index are keyed to,
     and it is the only mark a case without a drawing has. */
  .case--pic { padding-block-start: 0; }
  .case__pic { display: block; margin-inline: -1.3rem; margin-block-end: .15rem;
    overflow: hidden; background: var(--graphite-800);
    border-block-end: 1px solid var(--rule); }
  .case__pic img { display: block; inline-size: 100%; block-size: auto;
    aspect-ratio: 3 / 2; object-fit: cover;
    transition: scale .5s var(--ease); }
  .case:hover .case__pic img, .case:focus-visible .case__pic img { scale: 1.035; }

  .case__glyph { color: var(--text-faint); transition: color .28s var(--ease), scale .35s var(--spring); }
  .case__glyph svg { inline-size: 3.1rem; block-size: 3.1rem; }
  .case__glyph .ac { color: var(--edge); }
  .case:hover .case__glyph { color: var(--text); scale: 1.07; }

  .case__no { font-family: var(--font-num); font-size: .7rem; color: var(--text-faint);
    letter-spacing: .16em; margin-block-start: .35rem; }
  .case__title { font-size: 1.12rem; font-weight: 800; line-height: 1.45; color: var(--text);
    text-wrap: balance; }
  .case__claim { font-size: var(--step--1); color: var(--text-faint); line-height: 1.75;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .case__tags { display: flex; flex-wrap: wrap; gap: .3rem;
    margin-block-start: auto; padding-block-start: .6rem; }
  .case__tags i { font-style: normal; font-size: .66rem; letter-spacing: .02em;
    padding: .12rem .5rem; border-radius: 999px; color: var(--text-faint);
    background: color-mix(in oklab, var(--graphite-600) 55%, transparent); }
  .case__cta { display: flex; align-items: center; gap: .35rem; margin-block-start: .55rem;
    font-size: var(--step--1); font-weight: 700; color: var(--edge);
    opacity: .0; translate: 6px 0; transition: opacity .25s var(--ease), translate .25s var(--ease); }
  .case__cta svg { inline-size: .85em; block-size: .85em; }
  .case:hover .case__cta, .case:focus-visible .case__cta { opacity: 1; translate: 0 0; }
  @media (hover: none) { .case__cta { opacity: 1; translate: 0; } }
  .case[hidden] { display: none; }

  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      .cases > .case { animation: card-in linear both; animation-timeline: view();
        animation-range: entry 0% entry 34%; }
      @keyframes card-in { from { opacity: 0; translate: 0 26px; scale: .97; } }
    }
  }

  .empty { padding: 3.5rem 1rem; text-align: center; color: var(--text-faint); }
}

/* ------------------------------------------------------------------ dossier */
@layer dossier {
  .file { position: relative; isolation: isolate; overflow: clip; --tint: var(--accent-deep); }
  /* The band colour is a verdict. It arrives with the verdict, not with the
     reader's answer -- `data-answered` deliberately does not touch --tint. */
  .file[data-revealed] { --tint: var(--lit); }
  .file[data-revealed] :is(.file__bg, .file__glyph) { transition: color 1.1s var(--ease); }
  .file__bg { position: absolute; inset-block-start: -6rem; inset-inline: -5%; block-size: 46rem;
    z-index: -1; opacity: .5; pointer-events: none; overflow: clip;
    color: var(--tint);
    -webkit-mask-image: linear-gradient(#000, transparent 72%);
            mask-image: linear-gradient(#000, transparent 72%); }
  .file__bg svg { inline-size: 100%; block-size: 100%; overflow: hidden; }

  .file__in { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
  .file__head { position: relative; max-inline-size: 46rem; }
  .file__meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
  .file__no { display: inline-flex; align-items: baseline; gap: .4rem;
    font-family: var(--font-num); color: var(--text-faint); }
  .file__no i { font-style: normal; font-size: .7rem; letter-spacing: .18em; }
  .file__no b { font-size: 1.6rem; color: var(--text); letter-spacing: -.02em; }
  .file__tags { display: flex; gap: .35rem; flex-wrap: wrap; }
  .file__tags .chip { padding: .2rem .7rem; min-block-size: auto; font-size: .72rem; }

  .file__glyph { display: block; margin-block: 1.4rem .2rem; color: var(--tint); }
  .file__glyph svg { inline-size: 4.4rem; block-size: 4.4rem; }
  .file__glyph .ac { opacity: .75; }
  @media (prefers-reduced-motion: no-preference) {
    .file__glyph { animation: rise .7s var(--spring) both; }
  }

  .file__title { margin-block-start: .5rem; font-size: var(--step-2); max-inline-size: 20ch; }

  .claim { margin-block-start: 1.6rem; max-inline-size: 46rem;
    padding: 1.1rem 1.25rem; background: color-mix(in oklab, var(--panel) 70%, transparent);
    border: 1px solid var(--rule); border-inline-start: 3px solid var(--signal-weak);
    border-radius: var(--radius); }
  .claim__k { display: block; font-size: .66rem; letter-spacing: .2em; color: var(--text-faint);
    margin-block-end: .4rem; }
  .claim__t { font-size: 1.1rem; line-height: 1.85; }

  /* ---- the drawn plate: the case as the drawing tells it ----
     A cream sheet laid on the dark console, under the claim it illustrates and
     above the real document. It keeps its own paper edge -- a fade into the
     page would only muddy the gouache -- and takes a hairline and a deep
     shadow so it reads as placed in the file rather than printed on it.
     Never tinted: --tint is a verdict, and this sits before the gate. */
  .drawn { margin-block-start: 1.9rem; max-inline-size: 52rem; }
  .drawn img { display: block; inline-size: 100%; block-size: auto;
    border-radius: var(--radius); border: 1px solid var(--rule-strong);
    box-shadow: 0 28px 64px -36px #000; }
  @media (prefers-reduced-motion: no-preference) {
    .drawn { animation: rise .8s var(--spring) both .08s; }
  }

  .exhibit { margin-block-start: 1.75rem; max-inline-size: 52rem; }
  .exhibit__k { font-size: .66rem; letter-spacing: .2em; color: var(--text-faint);
    display: flex; align-items: center; gap: .7rem; margin-block-end: .55rem; }
  .exhibit__k::after { content: ''; flex: 1; block-size: 1px; background: var(--rule); }
  .exhibit :is(video, img) {
    inline-size: auto; max-inline-size: 100%;
    max-block-size: min(64vh, 32rem);
    margin-inline: auto;
    border-radius: var(--radius);
    border: 1px solid var(--rule-strong); background: #000;
  }
}

/* ---- the gate: nothing about the verdict is visible until you commit ---- */
@layer dossier {
  .gate { margin-block-start: 2rem; max-inline-size: 52rem;
    padding: clamp(1.4rem, 4vw, 2.2rem);
    background: linear-gradient(180deg, var(--graphite-850), var(--graphite-900));
    border: 1px solid var(--rule); border-radius: var(--radius-lg); }
  .gate__ask { text-align: center; }
  .gate__q { font-size: var(--step-1); font-weight: 800; }
  .gate__hint { color: var(--text-faint); font-size: var(--step--1); margin-block-start: .3rem; }
  .gate__btns { display: flex; gap: .9rem; justify-content: center;
    margin-block-start: 1.4rem; flex-wrap: wrap; }
  .guess {
    display: grid; gap: .1rem; min-inline-size: 11rem; min-block-size: var(--tap);
    padding: .8rem 1.5rem; border: 1px solid color-mix(in oklab, var(--c) 55%, transparent);
    border-radius: var(--radius); color: var(--c);
    background: color-mix(in oklab, var(--c) 7%, transparent);
    transition: background .2s var(--ease), translate .2s var(--ease), box-shadow .2s var(--ease);
  }
  .guess b { font-size: 1.05rem; font-weight: 800; }
  .guess span { font-size: .72rem; color: var(--text-faint); font-weight: 500; }
  .guess:hover { translate: 0 -2px; background: color-mix(in oklab, var(--c) 16%, transparent);
    box-shadow: 0 12px 28px -18px var(--c); }
  .guess--real { --c: var(--signal-true); }
  .guess--fake { --c: var(--signal-false); }

  /* ---- what the channel's readers guessed; shown the moment you commit ----
     This panel is deliberately silent about who was right. It reports the split
     and nothing else -- the verdict is at the foot of the page. */
  .crowd { display: grid; gap: .55rem; }
  .crowd:focus { outline: none; }
  .crowd__k { font-size: .66rem; letter-spacing: .2em; color: var(--text-faint);
    margin-block-start: .35rem; }
  .crowd__lead { font-size: var(--step--1); color: var(--text-dim); }
  .crowd__lead b, .crowd__k2 b { color: var(--text); font-weight: 700; }
  .crowd__bar { block-size: .55rem; border-radius: 999px; overflow: hidden;
    display: flex; direction: ltr; background: var(--graphite-600);
    margin-block-start: .25rem; }
  .crowd__bar i { display: block; block-size: 100%; }
  /* Neither half may be tinted with the true/false signals -- that would hand
     over the verdict a whole page early. The two shades are drawn from the
     graphite ramp instead, far enough apart to read at a glance and carrying
     no meaning of their own. */
  .crowd__f { background: var(--graphite-200); }
  .crowd__r { background: var(--graphite-500); }
  .crowd__k2 { display: flex; justify-content: space-between; gap: 1rem;
    font-size: var(--step--1); color: var(--text-dim); }
  .crowd__end { font-size: .72rem; color: var(--text-faint);
    padding-block-start: .7rem; border-block-start: 1px solid var(--rule); }
  @media (prefers-reduced-motion: no-preference) {
    [data-answered] .crowd { animation: rise .5s var(--spring) both; }
    .crowd__bar i { animation: grow .7s .15s var(--ease) both; }
  }
  @keyframes grow { from { inline-size: 0 } }

  .yousaid { font-size: var(--step--1); color: var(--text-dim);
    padding: .65rem 1rem; border-radius: var(--radius);
    background: color-mix(in oklab, var(--panel) 70%, transparent); border: 1px solid var(--rule); }
  .yousaid b { color: var(--text); }

  /* ---- the verdict, at the foot of the page and nowhere else ---- */
  .final { display: grid; gap: 1.4rem; margin-block-start: 2.6rem;
    padding: clamp(1.4rem, 4vw, 2.2rem);
    background: linear-gradient(180deg, var(--graphite-850), var(--graphite-900));
    border: 1px solid var(--rule); border-radius: var(--radius-lg); }
  .final__k { font-size: .66rem; letter-spacing: .2em; color: var(--text-faint); }
  .final__row { display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 1.2rem 2rem; }
  .final__meter { flex: 1 1 20rem; min-inline-size: 0; }
  .final__num { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
  @media (prefers-reduced-motion: no-preference) {
    [data-revealed] .final { animation: rise .55s var(--spring) both; }
  }
  .scored { font-size: var(--step--1); color: var(--text-dim);
    padding: .65rem 1rem; border-radius: var(--radius);
    background: color-mix(in oklab, var(--panel) 70%, transparent); border: 1px solid var(--rule); }
  .scored b { color: var(--text); }
  .scored[data-right='yes'] { border-color: color-mix(in oklab, var(--signal-true) 45%, transparent); }
  .scored[data-right='no']  { border-color: color-mix(in oklab, var(--signal-false) 45%, transparent); }

  /* Progressive disclosure, in two stages. Everything is in the HTML either
     way; it is only concealed once app.js has taken over, so the page still
     works without JS. Answering opens the body of the case; the band colour
     waits for the verdict itself. */
  .gate-on .locked { display: none; }
  .gate-on [data-answered] .locked { display: revert; }
  [data-answered] .gate__ask { display: none; }

  .sources { margin-block-start: 3.5rem; font-size: var(--step--1); color: var(--text-faint); }
  .sources h2 { font-size: .95rem; color: var(--text-dim); margin-block-end: .7rem; }
  .meta li { display: flex; gap: .8rem; padding-block: .35rem;
    border-block-start: 1px solid var(--rule); }
  .meta li span { color: var(--text-faint); min-inline-size: 6rem; }

  .pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: .85rem; margin-block-start: 3.5rem; }
  .pager__x { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; align-items: center;
    padding: 1rem 1.2rem; border: 1px solid var(--rule); border-radius: var(--radius-lg);
    text-decoration: none; background: var(--graphite-850);
    transition: border-color .25s var(--ease), translate .25s var(--ease); }
  .pager__x:hover { border-color: var(--accent); translate: 0 -2px; }
  .pager__g { grid-row: 1 / 3; color: var(--text-faint); }
  .pager__g svg { inline-size: 2.4rem; block-size: 2.4rem; }
  .pager__x:hover .pager__g { color: var(--accent); }
  .pager__k { font-size: .66rem; letter-spacing: .16em; color: var(--text-faint); }
  .pager__t { font-weight: 700; color: var(--text); }
  .pager__x--next { text-align: end; }
  .pager__x--next .pager__g { grid-column: 2; grid-row: 1 / 3; justify-self: end; }
  .pager__x--next :is(.pager__k, .pager__t) { grid-column: 1; }
}

/* ------------------------------------------------------------------ prose */
@layer prose {
  .prose { margin-block-start: 3rem; }
  .prose > * + * { margin-block-start: 1.35em; }
  .prose p { line-height: 2.05; }
  .prose h2 { margin-block-start: 2.4em; font-size: var(--step-1); }
  .prose h3 { margin-block-start: 2em; }
  .prose strong { font-weight: 700; color: #fff; }
  .prose__k { font-size: .66rem !important; letter-spacing: .2em; color: var(--text-faint);
    font-weight: 500; margin-block-start: 0 !important; }

  .plate { margin-block: 2.2rem; margin-inline: auto; background: oklch(97% 0 0);
    border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: .8rem;
    box-shadow: 0 1px 0 color-mix(in oklab, #fff 12%, transparent) inset,
                0 10px 30px -16px oklch(0% 0 0 / .85); }
  .plate img { inline-size: 100%; max-block-size: min(72vh, 42rem); object-fit: contain;
    border-radius: 2px; }
  .plate figcaption { margin-block-start: .6rem; padding-inline: .25rem;
    font-size: .72rem; color: oklch(40% 0 0); line-height: 1.6; }
  .plate--dark { background: var(--graphite-800);
    box-shadow: 0 1px 0 color-mix(in oklab, #fff 6%, transparent) inset,
                0 10px 30px -18px oklch(0% 0 0 / .9); }
  .plate--dark figcaption { color: var(--text-faint); }

  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      .prose .plate { animation: plate-in linear both; animation-timeline: view();
        animation-range: entry 0% entry 40%; }
      @keyframes plate-in { from { opacity: 0; translate: 0 16px; } }
    }
  }

  math { font-size: 1.06em; }
  .eq { display: block; margin-block: 1.7em; padding: 1rem 1.1rem;
    background: color-mix(in oklab, var(--panel) 75%, transparent);
    border-inline-start: 2px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    overflow-x: auto; direction: ltr; text-align: center; }
  .eq math { font-size: 1.25em; }
  .note { font-size: var(--step--1); color: var(--text-faint);
    border-inline-start: 2px solid var(--rule-strong); padding-inline-start: .9rem; }
}

/* ------------------------------------------------------------------ util */
@layer util {
  .vh { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lede { color: var(--text-dim); font-size: var(--step-1); line-height: 1.8; max-inline-size: 48ch; }
  .kicker { font-size: .68rem; letter-spacing: .2em; color: var(--text-faint);
    display: block; margin-block-end: .5rem; }
  .num { unicode-bidi: isolate; }
}

@media (prefers-reduced-motion: reduce) {
  .meter__needle, .meter__seg { transition-duration: 1ms; transition-delay: 0ms; }
  .dist__bar, .dot { animation: none; }
  .field > div { transition: none; translate: none; }
}

@media (forced-colors: active) {
  .meter__seg { forced-color-adjust: none; }
  .case, .gate, .dist, .pager__x, .final { border: 1px solid CanvasText; }
  .chip[aria-pressed='true'], .btn { background: Highlight; color: HighlightText; }
}

@media print {
  .masthead, .filters, .gate__ask, .pager, .foot, .field, .file__bg { display: none; }
  body { background: #fff; color: #000; }
  .locked { display: revert !important; }
  .crowd__end { display: none; }
}

/* ==========================================================================
   THE MAP — cases and the subjects they teach.
   Identity is the icon plus the name on every node. Colour marks state, and
   only one subject is ever lit at a time: fourteen hues are not separable
   (checked with the palette validator), so hue never has to be decoded.
   The eight slot colours below pass CVD, chroma and contrast on this ground.
   ========================================================================== */
@layer graph {
  .slot-0 { --slot: #3987e5; } .slot-1 { --slot: #d95926; }
  .slot-2 { --slot: #199e70; } .slot-3 { --slot: #c98500; }
  .slot-4 { --slot: #d55181; } .slot-5 { --slot: #2f9e2f; }
  .slot-6 { --slot: #9085e9; } .slot-7 { --slot: #e66767; }
  [data-slot='0'] { --slot: #3987e5; } [data-slot='1'] { --slot: #d95926; }
  [data-slot='2'] { --slot: #199e70; } [data-slot='3'] { --slot: #c98500; }
  [data-slot='4'] { --slot: #d55181; } [data-slot='5'] { --slot: #2f9e2f; }
  [data-slot='6'] { --slot: #9085e9; } [data-slot='7'] { --slot: #e66767; }

  .gwrap { padding-block: clamp(1.5rem, 4vw, 2.75rem) 0; }
  .ghead { display: grid; gap: 1.25rem 2rem; align-items: end;
    grid-template-columns: minmax(0, 1fr); margin-block-end: 1.1rem; }
  @media (min-width: 62rem) { .ghead { grid-template-columns: minmax(0, 1fr) auto; } }
  .ghead__t { font-size: var(--step-2); max-inline-size: 22ch; }
  .ghead__l { margin-block-start: .8rem; color: var(--text-dim);
    max-inline-size: 56ch; font-size: var(--step--1); line-height: 1.85; }
  .gtools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
  .gtools .search { margin-inline-start: 0; }

  .graph {
    position: relative; --k: 1;
    block-size: clamp(30rem, 78vh, 56rem);
    border: 1px solid var(--rule); border-radius: var(--radius-lg);
    background:
      radial-gradient(70% 60% at 50% 40%, color-mix(in oklab, var(--accent) 5%, transparent), transparent 70%),
      linear-gradient(180deg, var(--graphite-850), var(--graphite-900));
    overflow: hidden; touch-action: none; cursor: grab; contain: layout paint;
  }
  .graph.is-panning { cursor: grabbing; }
  .graph.is-dragging { cursor: grabbing; }
  .graph svg { inline-size: 100%; block-size: 100%; display: block; }
  .graph__hint { position: absolute; inset-block-end: .6rem; inset-inline-start: .9rem;
    font-size: .66rem; color: var(--text-faint); pointer-events: none; }

  .lk { stroke: color-mix(in oklab, var(--accent) 26%, transparent); stroke-width: 1;
    transition: stroke .25s var(--ease), stroke-width .25s var(--ease); }
  .lk[data-state='on'] { stroke: color-mix(in oklab, var(--accent) 85%, transparent);
    stroke-width: 1.8; }
  .lk[data-state='off'] { stroke: color-mix(in oklab, var(--graphite-500) 30%, transparent); }

  .nd { cursor: pointer; transition: opacity .25s var(--ease); }
  .nd:focus { outline: none; }
  .nd__halo { fill: none; stroke: none; }
  .nd__disc { fill: var(--graphite-800); stroke: var(--rule-strong); stroke-width: 1.2;
    transition: fill .25s var(--ease), stroke .25s var(--ease); }
  .nd__ic { color: var(--text-faint); transition: color .25s var(--ease); }
  .nd__t {
    fill: var(--text-dim); font-family: var(--font-fa); font-weight: 600;
    font-size: calc(11px / clamp(.34, var(--k), 1));
    paint-order: stroke fill; stroke: var(--ground); stroke-width: 3.5px;
    stroke-linejoin: round; pointer-events: none;
  }
  .nd__n {
    fill: var(--text-faint); font-family: var(--font-num);
    font-size: calc(8.5px / clamp(.34, var(--k), 1));
    paint-order: stroke fill; stroke: var(--ground); stroke-width: 3px;
    stroke-linejoin: round; pointer-events: none;
  }

  .nd--subject .nd__disc { fill: color-mix(in oklab, var(--slot, var(--accent)) 16%, var(--graphite-850));
    stroke: color-mix(in oklab, var(--slot, var(--accent)) 70%, transparent); stroke-width: 1.8; }
  .nd--subject .nd__ic { color: var(--slot, var(--accent)); }
  .nd--subject .nd__t { fill: var(--text); font-weight: 800;
    font-size: calc(13.5px / clamp(.34, var(--k), 1)); }

  .nd:is(:hover, :focus-visible) .nd__disc,
  .nd[data-state='on'] .nd__disc {
    fill: color-mix(in oklab, var(--slot, var(--accent)) 26%, var(--graphite-800));
    stroke: var(--slot, var(--accent)); stroke-width: 2.2; }
  .nd:is(:hover, :focus-visible) .nd__ic,
  .nd[data-state='on'] .nd__ic { color: var(--slot, var(--accent)); }
  .nd[data-state='on'] .nd__halo { fill: color-mix(in oklab, var(--slot, var(--accent)) 14%, transparent); }
  .nd:focus-visible .nd__halo { stroke: var(--accent); stroke-width: 2; }

  .nd[data-state='near'] .nd__disc { stroke: color-mix(in oklab, var(--slot, var(--accent)) 60%, transparent); }
  .nd[data-state='near'] .nd__ic { color: var(--text); }
  .nd[data-state='near'] .nd__t { fill: var(--text); }
  .nd[data-state='off'] { opacity: .13; }
  .graph[data-search] .nd[data-hit='n'] { opacity: .1; }
  .graph[data-search] .nd[data-hit='y'] .nd__disc { stroke: var(--accent); stroke-width: 2.2; }

  /* a subject cluster inherits the subject's slot colour while it is lit */
  .graph[data-focus='0'] { --slot: #3987e5; } .graph[data-focus='1'] { --slot: #d95926; }
  .graph[data-focus='2'] { --slot: #199e70; } .graph[data-focus='3'] { --slot: #c98500; }
  .graph[data-focus='4'] { --slot: #d55181; } .graph[data-focus='5'] { --slot: #2f9e2f; }
  .graph[data-focus='6'] { --slot: #9085e9; } .graph[data-focus='7'] { --slot: #e66767; }

  .legend { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: 1.1rem; }
  .legend button {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .8rem .35rem .55rem; min-block-size: 2.3rem;
    border: 1px solid var(--rule-strong); border-radius: 999px;
    font-size: var(--step--1); color: var(--text-dim);
    transition: border-color .18s var(--ease), color .18s var(--ease),
                background .18s var(--ease), translate .18s var(--ease);
  }
  .legend__ic { display: inline-flex; color: var(--slot); }
  .legend__ic svg { inline-size: 1.35rem; block-size: 1.35rem; }
  .legend button b { font-weight: 600; color: var(--text-faint); font-size: .85em; }
  .legend button:hover { color: var(--text); translate: 0 -1px;
    border-color: color-mix(in oklab, var(--slot) 70%, transparent); }
  .legend button[aria-pressed='true'] {
    color: var(--text); border-color: var(--slot);
    background: color-mix(in oklab, var(--slot) 16%, transparent); }

  .galt { margin-block-start: 2rem; font-size: var(--step--1); color: var(--text-faint); }
  .galt summary { cursor: pointer; color: var(--text-dim); padding-block: .5rem; }
  .galt ul { margin-block-start: .8rem; display: grid; gap: .7rem; }
  .galt li { line-height: 1.9; }
  .galt b { color: var(--text-dim); }
  .galt a { color: var(--text-faint); }
  .galt a:hover { color: var(--accent); }

  @media (prefers-reduced-motion: reduce) {
    .nd, .lk, .nd__disc, .nd__ic { transition-duration: 1ms; }
  }
  @media (forced-colors: active) {
    .nd__disc { fill: Canvas; stroke: CanvasText; }
    .lk { stroke: CanvasText; }
  }
}

@layer graph {
  /* the subject index wears the same glyphs as the map */
  .cn-ic { display: inline-flex; vertical-align: -.22em; margin-inline-end: .5rem;
    color: var(--accent); }
  .cn-ic svg { inline-size: 1.6rem; block-size: 1.6rem; }
}

@layer graph {
  /* the force panel — the simulation's own constants, exposed */
  .forces { margin-block-start: 2rem; border: 1px solid var(--rule);
    border-radius: var(--radius-lg); padding: 1rem 1.2rem;
    background: color-mix(in oklab, var(--panel) 55%, transparent); }
  .forces summary { cursor: pointer; font-weight: 700; color: var(--text-dim);
    padding-block: .25rem; }
  .forces[open] summary { color: var(--text); margin-block-end: .6rem; }
  .forces__p { font-size: var(--step--1); color: var(--text-faint);
    line-height: 1.95; max-inline-size: 62ch; }
  .fgrid { display: grid; gap: .5rem 1.4rem; margin-block: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .fslider { display: grid; grid-template-columns: 8.4rem 1fr 3rem; gap: .6rem;
    align-items: center; font-size: var(--step--1); color: var(--text-dim); }
  .fslider b { font-family: var(--font-num); color: var(--accent); font-weight: 600;
    text-align: end; font-size: .82em; }
  .fslider input[type='range'] { inline-size: 100%; accent-color: var(--accent);
    block-size: 1.4rem; }
}

@layer lab {
  /* The case lab: one interactive demonstration per case, sitting inside the
     explanation. Reads as a bench instrument bolted into the dossier. */
  .lab {
    --pad: clamp(.9rem, 3vw, 1.4rem);
    margin-block: 2.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    background: var(--lab-panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: clip;
    /* skip the simulation entirely while it is far off screen */
    content-visibility: auto;
    contain-intrinsic-size: auto none auto 32rem;
  }
  .lab__head { padding: var(--pad) var(--pad) .7rem; }
  .lab__title {
    margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: .01em;
    color: var(--text);
    display: flex; align-items: center; gap: .5rem;
  }
  .lab__title::before {
    content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%;
    background: var(--accent); flex: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
  }
  .lab__intro {
    margin: .55rem 0 0; font-size: .82rem; line-height: 1.85;
    color: var(--text-dim); max-inline-size: 46rem;
  }
  .lab__stage { padding-inline: var(--pad); }
  .lab__canvas {
    inline-size: 100%; display: block; border-radius: var(--radius);
    background: var(--lab-bg);
    border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  }

  /* Controls first, readings underneath and full width. Persian sentences in a
     narrow side column wrapped into tall thin blocks; across the full measure
     they read as sentences. */
  .lab__side {
    padding: .9rem var(--pad) 0;
    display: grid; gap: .85rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .lab__controls {
    display: grid; gap: .7rem 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
  .lab__ctl { display: grid; gap: .3rem; align-content: start; }
  .lab__ctlhead { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
  .lab__k { font-size: .74rem; color: var(--text-faint); }
  .lab__v {
    font-size: .78rem; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
  .lab input[type="range"] {
    inline-size: 100%; accent-color: var(--accent);
    block-size: 1.1rem; cursor: pointer; margin: 0;
  }
  .lab input[type="range"]:focus-visible,
  .lab__btn:focus-visible, .lab__segb:focus-visible, .lab__toggle input:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  .lab__toggle {
    display: flex; align-items: center; gap: .45rem;
    font-size: .78rem; color: var(--text-dim); cursor: pointer;
  }
  .lab__toggle input { accent-color: var(--accent); inline-size: .95rem; block-size: .95rem; }
  .lab__seg {
    display: flex; flex-wrap: wrap; gap: 2px; padding: 2px;
    background: var(--graphite-900); border-radius: var(--radius);
    border: 1px solid var(--rule);
  }
  .lab__segb {
    flex: 1 1 auto; padding: .3rem .55rem; font: inherit; font-size: .74rem;
    background: none; border: 0; border-radius: 2px; color: var(--text-faint);
    cursor: pointer; white-space: nowrap;
  }
  .lab__segb[aria-checked="true"] {
    background: color-mix(in oklab, var(--accent) 20%, transparent); color: var(--text);
  }
  .lab__btn {
    padding: .38rem .9rem; font: inherit; font-size: .78rem; font-weight: 600;
    color: var(--text); background: var(--graphite-700);
    border: 1px solid var(--rule-strong); border-radius: var(--radius);
    cursor: pointer;
  }
  .lab__btn:hover { background: var(--graphite-600); }
  .lab__btn--play { min-inline-size: 4.2rem; }

  /* Readings sit in labelled cells that flow across the full width; a reading
     that is a sentence takes its own row. */
  .lab__reads {
    margin: 0; display: grid; gap: .6rem .9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    align-content: start;
    padding: .75rem .9rem; border-radius: var(--radius);
    background: color-mix(in oklab, var(--graphite-900) 70%, transparent);
    border: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
  }
  .lab__read { display: grid; gap: .12rem; align-content: start; min-inline-size: 0; }
  .lab__reads dt { font-size: .71rem; color: var(--text-faint); line-height: 1.55; }
  .lab__reads dd {
    margin: 0; font-size: .82rem; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .lab__read--wide {
    grid-column: 1 / -1;
    padding-block-start: .55rem;
    border-block-start: 1px solid color-mix(in oklab, var(--rule) 45%, transparent);
  }
  .lab__read--wide dd {
    font-weight: 400; font-size: .79rem; color: var(--text-dim); line-height: 1.95;
  }

  .lab__transport { display: flex; gap: .5rem; padding: .85rem var(--pad) 0; }
  .lab__note {
    margin: 0; padding: .85rem var(--pad) var(--pad);
    font-size: .78rem; line-height: 1.9; color: var(--text-faint);
    border-block-start: 1px solid color-mix(in oklab, var(--rule) 50%, transparent);
    margin-block-start: .9rem;
  }
  .lab__note::before { content: "◂ "; color: var(--accent); }

  @media (prefers-reduced-motion: reduce) {
    .lab__transport .lab__btn--play::after { content: " (دستی)"; font-weight: 400; }
  }
}