/* conflict — components stylesheet (bundle.css)
   Loads after the generated tokens.css. Every colour, length and timing here is a token
   (var(--…)) except the type roles below, which mirror tokens.json type styles under their
   Tailwind v4 names so the same block can sit in an @theme.
   Motion rule: animate only transform, opacity, clip-path and filter. */

:root {
  --mask-focus-lines: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M66.4 51.7L129.7 57.2L129.5 58.9ZM68.9 54.0L128.5 65.5L128.1 67.4ZM66.1 55.3L126.3 74.0L125.7 76.0ZM66.1 56.1L125.0 77.8L124.5 79.0ZM65.4 56.7L123.6 81.3L122.9 82.9ZM64.5 58.4L119.7 89.2L118.9 90.6ZM65.2 60.5L116.4 94.7L115.3 96.2ZM69.0 66.1L111.4 101.3L110.6 102.3ZM64.9 64.2L108.4 104.7L107.4 105.7ZM66.3 67.6L104.7 108.4L103.8 109.2ZM62.4 65.0L101.8 111.0L100.0 112.5ZM60.1 64.1L97.4 114.4L95.8 115.6ZM62.2 71.5L89.8 119.4L89.0 119.8ZM57.4 67.4L82.2 123.2L80.4 124.0ZM57.8 72.1L77.5 125.1L75.5 125.8ZM54.7 69.2L69.9 127.5L68.0 128.0ZM52.4 68.7L60.8 129.3L59.3 129.5ZM51.1 65.2L56.3 129.8L55.2 129.8ZM49.8 71.5L50.3 130.0L48.0 130.0ZM47.1 74.6L41.2 129.5L39.9 129.4ZM46.4 68.0L34.7 128.5L33.6 128.3ZM44.1 72.7L30.5 127.6L29.5 127.3ZM42.1 72.7L24.4 125.8L23.2 125.4ZM42.1 67.5L17.9 123.3L15.8 122.3ZM38.4 69.3L9.4 118.9L8.3 118.3ZM41.3 62.7L5.5 116.5L3.8 115.3ZM35.8 68.8L2.6 114.4L1.0 113.2ZM40.1 61.3L-1.8 111.0L-3.6 109.4ZM37.4 62.5L-6.4 106.8L-7.3 105.8ZM37.7 60.5L-10.1 102.8L-11.6 101.0ZM36.3 59.5L-15.1 96.5L-16.0 95.2ZM31.0 60.4L-19.7 89.3L-20.7 87.4ZM35.7 56.2L-23.0 82.7L-23.7 81.0ZM29.9 56.3L-26.1 74.7L-26.5 73.6ZM28.3 54.8L-28.0 67.9L-28.3 66.3ZM26.6 52.7L-29.4 60.2L-29.6 58.0ZM26.3 50.2L-30.0 51.8L-30.0 49.3ZM27.7 47.9L-29.7 43.3L-29.6 42.0ZM31.6 46.3L-28.6 35.2L-28.2 33.2ZM26.0 43.4L-27.4 29.8L-26.8 27.7ZM35.0 44.2L-24.9 22.0L-24.3 20.4ZM33.2 41.4L-21.7 14.5L-20.9 13.0ZM37.1 41.6L-17.6 7.1L-16.7 5.8ZM36.3 39.5L-14.1 2.2L-12.8 0.4ZM36.6 37.7L-9.7 -3.2L-8.5 -4.5ZM39.8 38.9L-4.5 -8.5L-3.3 -9.7ZM40.2 37.8L-0.7 -11.9L0.5 -12.8ZM40.8 36.0L5.2 -16.3L7.3 -17.6ZM38.3 28.4L11.6 -20.2L12.3 -20.5ZM40.5 27.9L17.3 -23.0L19.6 -24.0ZM44.9 34.4L25.0 -26.0L25.6 -26.2ZM45.8 32.9L30.2 -27.5L31.3 -27.8ZM47.0 33.3L34.8 -28.5L36.7 -28.9ZM47.5 30.3L38.9 -29.2L41.3 -29.5ZM48.7 33.3L43.6 -29.7L44.3 -29.8ZM50.2 25.4L49.5 -30.0L51.7 -30.0ZM51.9 26.5L56.2 -29.8L56.9 -29.7ZM52.6 29.9L59.1 -29.5L61.3 -29.2ZM53.8 34.2L67.7 -28.0L69.9 -27.5ZM55.8 33.2L75.5 -25.8L77.1 -25.3ZM58.4 31.9L83.2 -22.8L84.5 -22.2ZM60.5 30.3L87.0 -20.9L88.1 -20.4ZM61.5 30.7L90.4 -19.0L91.5 -18.4ZM62.7 31.8L95.2 -16.0L96.5 -15.1ZM61.6 36.5L101.5 -11.2L103.0 -9.9ZM61.9 38.5L107.3 -5.8L107.8 -5.3ZM68.0 34.0L109.4 -3.6L110.3 -2.5ZM69.7 35.7L114.1 2.1L115.4 3.9ZM67.7 39.6L118.3 8.3L119.4 10.2ZM65.0 42.8L122.0 15.0L122.3 15.7ZM69.5 41.5L123.2 17.6L123.6 18.7ZM72.7 41.9L124.9 22.0L125.8 24.3ZM68.8 44.7L126.9 28.0L127.2 28.8ZM68.5 46.5L128.4 34.1L128.8 36.3ZM67.4 47.7L129.2 38.8L129.4 40.0ZM65.1 48.9L129.7 43.5L129.8 44.6ZM66.4 50.3L130.0 51.1L130.0 52.1Z%22/%3E%3C/svg%3E");
  --mask-speed-lines: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M58.5 1.28L100 1.00L100 1.57ZM37.8 3.44L100 3.24L100 3.64ZM36.2 6.94L100 6.62L100 7.25ZM30.7 9.34L100 8.99L100 9.69ZM43.8 13.22L100 12.82L100 13.63ZM36.3 16.01L100 15.57L100 16.45ZM22.8 19.87L100 19.57L100 20.17ZM55.0 23.80L100 23.58L100 24.02ZM9.2 27.00L100 26.84L100 27.15ZM13.9 30.32L100 30.14L100 30.50ZM46.6 32.85L100 32.57L100 33.14ZM31.6 36.88L100 36.70L100 37.07ZM60.5 39.62L100 39.48L100 39.77ZM73.8 43.01L100 42.76L100 43.27ZM47.4 46.59L100 46.26L100 46.92ZM40.5 48.88L100 48.69L100 49.06ZM9.2 51.13L100 50.98L100 51.27ZM75.0 54.90L100 54.73L100 55.08ZM39.2 58.07L100 57.93L100 58.21ZM43.9 60.97L100 60.56L100 61.38ZM50.3 64.78L100 64.57L100 64.98ZM21.6 67.26L100 67.00L100 67.53ZM12.1 70.02L100 69.84L100 70.19ZM74.6 71.86L100 71.71L100 72.00ZM50.6 76.02L100 75.84L100 76.20ZM35.6 77.94L100 77.59L100 78.29ZM41.0 80.29L100 80.13L100 80.44ZM19.5 82.18L100 81.87L100 82.50ZM30.7 86.16L100 86.03L100 86.29ZM7.4 88.93L100 88.68L100 89.17ZM19.2 91.89L100 91.50L100 92.28ZM29.5 94.38L100 94.22L100 94.54ZM27.3 96.78L100 96.47L100 97.08Z%22/%3E%3C/svg%3E");
  --mask-brush: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 8%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 4.6C14 3.1 38 2.4 64 2.5S106 2.2 120 1.4L120 4.2C104 5.6 82 5.9 60 6.1S16 6.9 1 7.6Z%22/%3E%3C/svg%3E");
  --mask-burst: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M94.4 57.2L102.1 56.4L101.4 60.6ZM88.5 63.0L100.2 65.5L99.3 68.1ZM84.6 68.2L97.0 73.3L95.9 75.5ZM81.2 79.0L89.3 84.8L87.6 86.6ZM75.9 83.2L84.0 90.0L80.5 92.8ZM70.6 88.6L76.1 95.6L73.2 97.1ZM60.0 88.2L65.4 100.2L61.1 101.3ZM50.2 94.4L52.1 102.5L48.4 102.5ZM42.0 88.3L40.9 101.7L37.5 101.0ZM35.8 86.7L32.7 99.6L29.4 98.3ZM27.7 84.1L23.1 95.1L19.5 92.7ZM19.2 76.8L11.5 85.7L9.4 83.3ZM13.0 68.0L3.4 74.2L2.2 71.8ZM7.3 57.0L-1.4 60.5L-2.1 56.5ZM9.4 48.4L-2.5 50.0L-2.3 45.9ZM7.9 36.8L-0.6 36.1L0.5 32.5ZM13.3 27.4L4.6 23.6L6.0 21.3ZM22.1 19.0L13.8 12.0L16.1 10.0ZM29.0 15.9L20.7 6.4L24.2 4.3ZM37.1 12.7L31.6 0.8L34.2 -0.1ZM44.9 6.2L42.2 -1.9L45.8 -2.3ZM53.3 10.9L52.2 -2.5L56.7 -2.1ZM65.1 11.5L67.4 0.5L70.9 1.8ZM72.2 14.4L76.5 4.7L79.1 6.3ZM79.2 19.9L85.2 11.0L87.8 13.6ZM84.1 24.5L91.2 17.4L93.0 19.8ZM89.5 34.2L98.3 29.4L99.2 31.7ZM94.5 43.6L101.8 41.4L102.1 43.6ZM93.7 51.1L102.5 49.6L102.4 53.0Z%22/%3E%3C/svg%3E");
  --mask-mottle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E%3Cellipse cx=%2285.4%22 cy=%2252.1%22 rx=%2211.0%22 ry=%227.2%22/%3E%3Cellipse cx=%2291.0%22 cy=%2260.9%22 rx=%228.7%22 ry=%227.9%22/%3E%3Cellipse cx=%2276.8%22 cy=%2247.6%22 rx=%228.6%22 ry=%226.8%22/%3E%3Cellipse cx=%2281.0%22 cy=%2248.1%22 rx=%224.4%22 ry=%223.2%22/%3E%3Cellipse cx=%2287.3%22 cy=%2251.8%22 rx=%226.6%22 ry=%226.6%22/%3E%3Cellipse cx=%2287.0%22 cy=%2258.9%22 rx=%2211.8%22 ry=%227.5%22/%3E%3Cellipse cx=%2282.1%22 cy=%2250.9%22 rx=%225.9%22 ry=%225.3%22/%3E%3Cellipse cx=%2287.4%22 cy=%2255.4%22 rx=%226.7%22 ry=%223.8%22/%3E%3Cellipse cx=%2282.6%22 cy=%2245.8%22 rx=%2212.4%22 ry=%227.8%22/%3E%3Cellipse cx=%2270.6%22 cy=%2274.3%22 rx=%228.0%22 ry=%224.6%22/%3E%3Cellipse cx=%2265.7%22 cy=%2283.3%22 rx=%227.5%22 ry=%227.3%22/%3E%3Cellipse cx=%2278.3%22 cy=%2277.3%22 rx=%227.3%22 ry=%225.1%22/%3E%3Cellipse cx=%2282.0%22 cy=%2280.8%22 rx=%224.2%22 ry=%223.6%22/%3E%3Cellipse cx=%2284.7%22 cy=%2289.5%22 rx=%2210.6%22 ry=%226.2%22/%3E%3Cellipse cx=%2273.0%22 cy=%2268.4%22 rx=%223.5%22 ry=%222.8%22/%3E%3Cellipse cx=%2293.9%22 cy=%2275.0%22 rx=%227.1%22 ry=%227.1%22/%3E%3Cellipse cx=%2283.4%22 cy=%2282.2%22 rx=%225.7%22 ry=%224.7%22/%3E%3Cellipse cx=%2214.3%22 cy=%2217.7%22 rx=%2213.0%22 ry=%227.4%22/%3E%3Cellipse cx=%22-0.2%22 cy=%2222.7%22 rx=%2210.1%22 ry=%226.2%22/%3E%3Cellipse cx=%22-2.3%22 cy=%2219.2%22 rx=%223.2%22 ry=%222.5%22/%3E%3Cellipse cx=%228.3%22 cy=%2210.6%22 rx=%224.3%22 ry=%224.2%22/%3E%3Cellipse cx=%2213.0%22 cy=%2217.9%22 rx=%227.0%22 ry=%225.6%22/%3E%3Cellipse cx=%22-0.9%22 cy=%2229.3%22 rx=%224.6%22 ry=%222.6%22/%3E%3Cellipse cx=%2215.9%22 cy=%2219.9%22 rx=%229.6%22 ry=%225.9%22/%3E%3Cellipse cx=%223.6%22 cy=%2218.1%22 rx=%226.5%22 ry=%224.0%22/%3E%3Cellipse cx=%22-2.7%22 cy=%2213.1%22 rx=%228.3%22 ry=%226.9%22/%3E%3Cellipse cx=%2246.2%22 cy=%2241.2%22 rx=%2212.6%22 ry=%227.4%22/%3E%3Cellipse cx=%2275.9%22 cy=%2253.5%22 rx=%227.8%22 ry=%224.4%22/%3E%3Cellipse cx=%2262.2%22 cy=%2249.4%22 rx=%226.8%22 ry=%226.7%22/%3E%3Cellipse cx=%2254.3%22 cy=%2254.0%22 rx=%226.6%22 ry=%225.5%22/%3E%3Cellipse cx=%2253.2%22 cy=%2250.1%22 rx=%224.5%22 ry=%224.3%22/%3E%3Cellipse cx=%2259.8%22 cy=%2241.7%22 rx=%229.1%22 ry=%227.3%22/%3E%3Cellipse cx=%2251.3%22 cy=%2254.0%22 rx=%228.8%22 ry=%225.3%22/%3E%3Cellipse cx=%2263.5%22 cy=%2248.3%22 rx=%228.2%22 ry=%227.6%22/%3E%3Cellipse cx=%2281.6%22 cy=%2226.1%22 rx=%228.0%22 ry=%226.1%22/%3E%3Cellipse cx=%2262.3%22 cy=%2228.6%22 rx=%225.2%22 ry=%224.0%22/%3E%3Cellipse cx=%22100.6%22 cy=%2230.3%22 rx=%224.5%22 ry=%222.9%22/%3E%3Cellipse cx=%2290.9%22 cy=%2229.4%22 rx=%227.3%22 ry=%224.4%22/%3E%3Cellipse cx=%2283.1%22 cy=%2231.6%22 rx=%227.2%22 ry=%225.1%22/%3E%3Cellipse cx=%2281.2%22 cy=%2232.3%22 rx=%2211.4%22 ry=%227.5%22/%3E%3Cellipse cx=%2282.5%22 cy=%2236.6%22 rx=%224.1%22 ry=%224.0%22/%3E%3Cellipse cx=%2259.6%22 cy=%2235.9%22 rx=%224.1%22 ry=%222.5%22/%3E%3Cellipse cx=%2256.9%22 cy=%2235.8%22 rx=%225.0%22 ry=%224.6%22/%3E%3Cellipse cx=%2252.4%22 cy=%2236.4%22 rx=%224.9%22 ry=%224.8%22/%3E%3Cellipse cx=%2244.4%22 cy=%2233.2%22 rx=%228.6%22 ry=%227.8%22/%3E%3Cellipse cx=%2245.1%22 cy=%2232.7%22 rx=%224.8%22 ry=%224.4%22/%3E%3Cellipse cx=%2213.8%22 cy=%2262.7%22 rx=%226.1%22 ry=%225.5%22/%3E%3Cellipse cx=%2213.3%22 cy=%2263.5%22 rx=%2212.1%22 ry=%227.7%22/%3E%3Cellipse cx=%220.1%22 cy=%2261.1%22 rx=%227.3%22 ry=%224.8%22/%3E%3Cellipse cx=%229.5%22 cy=%2252.9%22 rx=%229.0%22 ry=%227.9%22/%3E%3Cellipse cx=%225.1%22 cy=%2247.7%22 rx=%2210.5%22 ry=%227.3%22/%3E%3Cellipse cx=%2210.4%22 cy=%2250.1%22 rx=%227.3%22 ry=%225.3%22/%3E%3Cellipse cx=%22-4.6%22 cy=%2256.1%22 rx=%225.2%22 ry=%223.4%22/%3E%3Cellipse cx=%2215.8%22 cy=%2252.3%22 rx=%225.1%22 ry=%223.3%22/%3E%3Cellipse cx=%2211.2%22 cy=%2255.2%22 rx=%229.5%22 ry=%226.0%22/%3E%3Cellipse cx=%228.6%22 cy=%2255.1%22 rx=%228.5%22 ry=%227.7%22/%3E%3Cellipse cx=%2218.1%22 cy=%2260.2%22 rx=%225.0%22 ry=%223.7%22/%3E%3Cellipse cx=%2221.8%22 cy=%2259.7%22 rx=%223.9%22 ry=%222.8%22/%3E%3Cellipse cx=%2221.2%22 cy=%2260.1%22 rx=%226.9%22 ry=%225.4%22/%3E%3Cellipse cx=%2251.2%22 cy=%2225.7%22 rx=%224.0%22 ry=%222.7%22/%3E%3Cellipse cx=%2260.0%22 cy=%2232.8%22 rx=%225.4%22 ry=%224.0%22/%3E%3Cellipse cx=%2264.7%22 cy=%229.3%22 rx=%2211.7%22 ry=%227.6%22/%3E%3Cellipse cx=%2264.4%22 cy=%2212.6%22 rx=%229.5%22 ry=%226.0%22/%3E%3Cellipse cx=%2269.2%22 cy=%2218.1%22 rx=%2210.7%22 ry=%227.5%22/%3E%3C/svg%3E");
}

:root {
  /* type roles — mirror of tokens.json "type" (Tailwind v4 --text-* names) */
  --text-display-xxl: 176px; --text-display-xxl--line-height: .82;
  --text-display-xl: 84px;   --text-display-xl--line-height: .9;
  --text-display-l: 64px;    --text-display-l--line-height: .94;
  --text-display-m: 36px;    --text-display-m--line-height: 1;
  --text-display-s: 28px;    --text-display-s--line-height: 1.05;
  --text-display-xs: 22px;   --text-display-xs--line-height: 1.1;
  --text-body-article: 18px; --text-body-article--line-height: 1.72;

  /* derived colours — follow the accent tokens automatically */
  --term-prompt: color-mix(in oklab, var(--red) 70%, #fff);
  --scrim: color-mix(in oklab, var(--paper) 88%, transparent);

  --gutter: var(--space-4);
  --page-x: var(--space-8);
}
[data-theme="dark"] { --term-prompt: var(--red); }
@media (max-width: 640px) {
  :root {
    --text-display-xxl: 112px; --text-display-xl: 48px; --text-display-l: 40px;
    --text-display-m: 30px; --text-display-s: 24px; --text-display-xs: 20px;
    --text-body-article: 17px; --page-x: var(--space-4); --gutter: var(--space-3);
  }
}

/* ───────────────────────── screentone ─────────────────────────
   45° dot screen: two offset radial-gradient layers. Set --tone-c (dot ink), --tone-p (pitch),
   --tone-r (dot radius as % of half-pitch). Only `ink` text may sit directly on tone-2 dots;
   muted, red or blue text over tone goes in a .knockout box. */
.tone, .tone-sweep::before {
  --tone-c: var(--tone-2); --tone-p: var(--tone-pitch); --tone-r: 40%;
  background-image:
    radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)),
    radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p);
  background-position: 0 0, calc(var(--tone-p) / 2) calc(var(--tone-p) / 2);
}
.tone--light { --tone-c: var(--tone-1); --tone-r: 56%; }
.tone--fine  { --tone-p: var(--tone-pitch-fine); }
.tone--coarse{ --tone-p: var(--tone-pitch-coarse); --tone-r: 34%; }
.tone--dense { --tone-p: var(--tone-pitch-fine); --tone-r: 52%; }
.tone--ink   { --tone-c: var(--ink); --tone-r: 26%; }
.knockout { background: var(--paper); border: var(--stroke-thin) solid var(--ink); }

/* ───────────────────────── base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--paper); color: var(--ink);
  scroll-padding-top: calc(var(--size-header) + var(--space-6));
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
  font-feature-settings: "cv11", "ss01"; /* Inter: single-storey a off, open digits */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: var(--stroke-thin) solid var(--focus); outline-offset: 2px; }
img, svg { display: block; max-width: 100%; }
img { height: auto; } /* width/height attrs then only reserve the aspect ratio */
button { font: inherit; color: inherit; }
a { color: inherit; }
/* ───────────────────────── cursors ─────────────────────────
   Native CSS cursors (no JS follower): drawn SVGs, 2x for retina, hotspot in CSS px.
   Minimal: solid ink arrow, hand on clickables, I-beam on text; 1px paper outline reads on both themes.
   Inlined as data URIs so a freshly navigated page has them with the CSS (no fallback-arrow flash).
   Each rule is declared three times so every engine keeps the best one it parses.
   :where() keeps them at zero specificity, so component rules (zoom-in, grab, not-allowed) still win. */
:where(html) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M2 1.5v14l4.2-3.7H12z' fill='%23121212' stroke='%23fafaf7' stroke-width='2' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 2 2, default;
  cursor: -webkit-image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M2 1.5v14l4.2-3.7H12z' fill='%23121212' stroke='%23fafaf7' stroke-width='2' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 20 20'%3E%3Cpath d='M2 1.5v14l4.2-3.7H12z' fill='%23121212' stroke='%23fafaf7' stroke-width='2' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 2x) 2 2, default;
  cursor: image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M2 1.5v14l4.2-3.7H12z' fill='%23121212' stroke='%23fafaf7' stroke-width='2' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 20 20'%3E%3Cpath d='M2 1.5v14l4.2-3.7H12z' fill='%23121212' stroke='%23fafaf7' stroke-width='2' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 2x) 2 2, default;
}
:where(.article :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, pre, code, figcaption),
       textarea, [contenteditable="true"], input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"], [type="file"])) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M7.5 3h5M10 3v14M7.5 17h5' stroke='%23fafaf7' stroke-width='3.6'/%3E%3Cpath d='M7.5 3h5M10 3v14M7.5 17h5' stroke='%23121212' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 10 10, text;
  cursor: -webkit-image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M7.5 3h5M10 3v14M7.5 17h5' stroke='%23fafaf7' stroke-width='3.6'/%3E%3Cpath d='M7.5 3h5M10 3v14M7.5 17h5' stroke='%23121212' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M7.5 3h5M10 3v14M7.5 17h5' stroke='%23fafaf7' stroke-width='3.6'/%3E%3Cpath d='M7.5 3h5M10 3v14M7.5 17h5' stroke='%23121212' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 2x) 10 10, text;
  cursor: image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M7.5 3h5M10 3v14M7.5 17h5' stroke='%23fafaf7' stroke-width='3.6'/%3E%3Cpath d='M7.5 3h5M10 3v14M7.5 17h5' stroke='%23121212' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M7.5 3h5M10 3v14M7.5 17h5' stroke='%23fafaf7' stroke-width='3.6'/%3E%3Cpath d='M7.5 3h5M10 3v14M7.5 17h5' stroke='%23121212' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 2x) 10 10, text;
}
:where(a[href], button, summary, label, select, [role="button"], [role="option"], [role="tab"], [data-toggle],
       input:is([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"]),
       .nav__link, .btn, .filter, .result, .toc-mobile > summary,
       :is(a[href], button, summary, [role="button"], [role="option"]) *) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cg id='h'%3E%3Crect x='6.4' y='1' width='3.3' height='11' rx='1.65'/%3E%3Crect x='9.4' y='6.6' width='3' height='6' rx='1.5'/%3E%3Crect x='12.1' y='7.6' width='3' height='5.4' rx='1.5'/%3E%3Crect x='14.8' y='8.8' width='2.8' height='4.6' rx='1.4'/%3E%3Cpath d='M6.4 10.2h11.2v3.6c0 3.2-2 5.2-5 5.2h-2c-1.6 0-2.7-.7-3.6-1.9L3.6 12.8c-.5-.7-.4-1.5.3-1.8.6-.3 1.3-.1 1.8.5l.7.9z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23h' fill='none' stroke='%23fafaf7' stroke-width='2' stroke-linejoin='round'/%3E%3Cuse href='%23h' fill='%23121212'/%3E%3C/svg%3E") 8 1, pointer;
  cursor: -webkit-image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cg id='h'%3E%3Crect x='6.4' y='1' width='3.3' height='11' rx='1.65'/%3E%3Crect x='9.4' y='6.6' width='3' height='6' rx='1.5'/%3E%3Crect x='12.1' y='7.6' width='3' height='5.4' rx='1.5'/%3E%3Crect x='14.8' y='8.8' width='2.8' height='4.6' rx='1.4'/%3E%3Cpath d='M6.4 10.2h11.2v3.6c0 3.2-2 5.2-5 5.2h-2c-1.6 0-2.7-.7-3.6-1.9L3.6 12.8c-.5-.7-.4-1.5.3-1.8.6-.3 1.3-.1 1.8.5l.7.9z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23h' fill='none' stroke='%23fafaf7' stroke-width='2' stroke-linejoin='round'/%3E%3Cuse href='%23h' fill='%23121212'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cg id='h'%3E%3Crect x='6.4' y='1' width='3.3' height='11' rx='1.65'/%3E%3Crect x='9.4' y='6.6' width='3' height='6' rx='1.5'/%3E%3Crect x='12.1' y='7.6' width='3' height='5.4' rx='1.5'/%3E%3Crect x='14.8' y='8.8' width='2.8' height='4.6' rx='1.4'/%3E%3Cpath d='M6.4 10.2h11.2v3.6c0 3.2-2 5.2-5 5.2h-2c-1.6 0-2.7-.7-3.6-1.9L3.6 12.8c-.5-.7-.4-1.5.3-1.8.6-.3 1.3-.1 1.8.5l.7.9z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23h' fill='none' stroke='%23fafaf7' stroke-width='2' stroke-linejoin='round'/%3E%3Cuse href='%23h' fill='%23121212'/%3E%3C/svg%3E") 2x) 8 1, pointer;
  cursor: image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cg id='h'%3E%3Crect x='6.4' y='1' width='3.3' height='11' rx='1.65'/%3E%3Crect x='9.4' y='6.6' width='3' height='6' rx='1.5'/%3E%3Crect x='12.1' y='7.6' width='3' height='5.4' rx='1.5'/%3E%3Crect x='14.8' y='8.8' width='2.8' height='4.6' rx='1.4'/%3E%3Cpath d='M6.4 10.2h11.2v3.6c0 3.2-2 5.2-5 5.2h-2c-1.6 0-2.7-.7-3.6-1.9L3.6 12.8c-.5-.7-.4-1.5.3-1.8.6-.3 1.3-.1 1.8.5l.7.9z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23h' fill='none' stroke='%23fafaf7' stroke-width='2' stroke-linejoin='round'/%3E%3Cuse href='%23h' fill='%23121212'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cg id='h'%3E%3Crect x='6.4' y='1' width='3.3' height='11' rx='1.65'/%3E%3Crect x='9.4' y='6.6' width='3' height='6' rx='1.5'/%3E%3Crect x='12.1' y='7.6' width='3' height='5.4' rx='1.5'/%3E%3Crect x='14.8' y='8.8' width='2.8' height='4.6' rx='1.4'/%3E%3Cpath d='M6.4 10.2h11.2v3.6c0 3.2-2 5.2-5 5.2h-2c-1.6 0-2.7-.7-3.6-1.9L3.6 12.8c-.5-.7-.4-1.5.3-1.8.6-.3 1.3-.1 1.8.5l.7.9z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23h' fill='none' stroke='%23fafaf7' stroke-width='2' stroke-linejoin='round'/%3E%3Cuse href='%23h' fill='%23121212'/%3E%3C/svg%3E") 2x) 8 1, pointer;
}
:where(:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link {
  position: fixed; top: var(--space-2); left: var(--space-2); z-index: var(--z-menu); transform: translateY(-200%);
  padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--paper); border-radius: var(--radius-0);
  font: 800 14px/1 var(--font-display); text-decoration: none;
}
.skip-link:focus { transform: none; }
main:focus { outline: none; } /* tabindex=-1 skip target, not interactive */
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: square; }
kbd {
  font: 500 11px/1 var(--font-mono); letter-spacing: .02em; color: var(--ink-muted);
  border: var(--stroke-hair) solid var(--tone-3); border-radius: var(--radius-xs);
  padding: 3px 5px; background: var(--paper-2);
}
.eyebrow {
  font: 800 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0;
}
.mono { font-family: var(--font-mono); font-variant-ligatures: none; }
.muted { color: var(--ink-muted); }

/* ───────────────────────── layout ───────────────────────── */
.wrap { max-width: calc(var(--size-page) + 2 * var(--page-x)); margin-inline: auto; padding-inline: var(--page-x); }
.page { padding-block: var(--space-16) var(--space-24); min-height: 60vh; }
.section { margin-top: var(--space-16); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.section-title { font: 800 var(--text-display-m)/var(--text-display-m--line-height) var(--font-display); margin: 0; }
.page-title {
  font: 900 var(--text-display-l)/var(--text-display-l--line-height) var(--font-display);
  letter-spacing: -.005em; margin: 0; text-wrap: balance;
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-8); }
.count {
  display: inline-flex; align-items: center; height: 26px; padding: 0 8px; margin-left: var(--space-3);
  font: 600 13px/1 var(--font-mono); background: var(--ink); color: var(--paper); vertical-align: 0.6em;
}

/* panel: the basic manga frame */
.panel { position: relative; background: var(--paper); border: var(--stroke-panel) solid var(--ink); }
.panel__tab {
  position: absolute; top: 0; left: var(--space-4); transform: translateY(-50%);
  font: 800 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 5px 8px 4px;
}
/* screentone "drop": panels cast tone, never shadows */
.tone-drop { isolation: isolate; }
.tone-drop::after {
  content: ""; position: absolute; inset: calc(var(--stroke-panel) * -1); z-index: -1;
  transform: translate(8px, 8px); pointer-events: none;
  --tone-c: var(--tone-2); --tone-p: var(--tone-pitch-fine); --tone-r: 44%;
  background-image:
    radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)),
    radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p);
  background-position: 0 0, calc(var(--tone-p) / 2) calc(var(--tone-p) / 2);
}

/* ───────────────────────── brush underline (UI links) ───────────────────────── */
.brush { position: relative; text-decoration: none; }
.brush::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -4px; height: 6px;
  background: currentColor; pointer-events: none;
  -webkit-mask: var(--mask-brush) center / 100% 100% no-repeat; mask: var(--mask-brush) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-base) var(--ease-ink);
}
.brush:hover::after, .brush:focus-visible::after { clip-path: inset(0 0 0 0); }
.brush[aria-current]::after, .brush.is-active::after { clip-path: inset(0 0 0 0); background: var(--red); }
.link-arrow { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.2 var(--font-sans); color: var(--ink); }
.link-arrow .arr { display: inline-block; transition: transform var(--dur-fast) var(--ease-ink); }
.link-arrow:hover .arr { transform: translateX(4px); }

/* ───────────────────────── header ───────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--paper); border-bottom: var(--stroke-panel) solid var(--ink);
  view-transition-name: site-header;
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-8); height: var(--size-header);
}
.logo {
  font: 900 28px/1 var(--font-display); letter-spacing: -.01em; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px;
}
.logo__tag { font: 600 11px/1 var(--font-mono); color: var(--ink-muted); letter-spacing: 0; transform: translateY(1px); }
.nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.nav__link {
  font: 600 14px/1 var(--font-sans); color: var(--ink); background: none; border: 0; padding: 8px 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.nav__chev { width: 10px; height: 10px; transition: transform var(--dur-fast) var(--ease-ink); }
[aria-expanded="true"] > .nav__chev { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.search-trigger { gap: 10px; }
.btn > kbd { mix-blend-mode: normal; color: var(--ink-muted); }
.header-actions .menu-toggle { display: none; }
@media (max-width: 760px) {
  .site-header__inner { height: 52px; gap: var(--space-3); }
  .nav { display: none; }
  .header-actions { margin-left: auto; }
  .header-actions .menu-toggle { display: inline-flex; }
  .search-trigger kbd, .search-trigger .search-trigger__label { display: none; }
}

/* dropdown (cves ▾) */
.dropdown { position: relative; }
.dropdown__menu {
  position: absolute; top: calc(100% + 14px); left: -16px; z-index: var(--z-menu);
  min-width: 240px; margin: 0; padding: 6px 0; list-style: none;
  background: var(--paper); border: var(--stroke-panel) solid var(--ink);
}
.dropdown__menu[hidden] { display: none; }
.dropdown__menu.is-opening { animation: panel-drop var(--dur-base) var(--ease-ink) both; }
.dropdown__menu.is-closing { animation: panel-lift var(--dur-fast) var(--ease-exit) both; }
.menu-item {
  position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: 9px 16px; text-decoration: none; isolation: isolate; background: var(--paper);
  font: 600 13px/1.2 var(--font-mono); font-variant-ligatures: none;
}
.menu-item small { font: 500 11px/1 var(--font-mono); }
.menu-item > * { color: #fff; mix-blend-mode: difference; }
.menu-item::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-fast) var(--ease-ink);
}
.menu-item:hover::before, .menu-item:focus-visible::before, .menu-item[aria-selected="true"]::before { clip-path: inset(0); }
.menu-item:focus-visible { outline-offset: -4px; }

/* phone menu panel */
.mobile-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-menu);
  background: var(--paper); border-bottom: var(--stroke-panel) solid var(--ink);
  padding: var(--space-2) var(--page-x) var(--space-6);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-opening { animation: panel-drop var(--dur-base) var(--ease-ink) both; }
.mobile-menu a {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 0;
  border-bottom: var(--stroke-hair) solid var(--tone-2); text-decoration: none;
  font: 800 var(--text-display-s)/1 var(--font-display);
}
.mobile-menu a[aria-current] { color: var(--red); }
.mobile-menu a .arr { font: 500 14px/1 var(--font-mono); color: var(--ink-muted); }

/* ───────────────────────── footer ───────────────────────── */
.site-footer { border-top: var(--stroke-panel) solid var(--ink); }
.site-footer__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8);
  flex-wrap: wrap; padding-block: var(--space-8);
}
.site-footer__brand { font: 900 20px/1 var(--font-display); display: flex; align-items: baseline; gap: 8px; }
.site-footer__brand small { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
.site-footer__links { display: flex; gap: var(--space-6); font: 600 14px/1 var(--font-sans); }
.site-footer__egg {
  flex-basis: 100%; margin: 0; font: italic 500 12px/1 var(--font-mono); color: var(--ink-muted);
  display: flex; align-items: center; gap: 10px;
}
.site-footer__egg::before { content: ""; width: 24px; height: 8px; flex: none; }
.site-footer__egg::before {
  --tone-c: var(--tone-2); --tone-p: 4px; --tone-r: 50%;
  background-image: radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)), radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p); background-position: 0 0, 2px 2px;
}

/* ───────────────────────── buttons ─────────────────────────
   Hover: an ink fill sweeps in from the left (clip-path). The label is white with
   mix-blend-mode: difference, so it reads ink on paper and paper on ink at every frame. */
.btn {
  --btn-h: 36px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); height: var(--btn-h); padding: 0 var(--space-4);
  background: var(--paper); border: var(--stroke-thin) solid var(--ink); border-radius: var(--radius-0);
  font: 600 14px/1 var(--font-sans); text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-instant) var(--ease-ink);
  -webkit-tap-highlight-color: transparent;
}
.btn > *, .btn > .btn__label { color: #fff; mix-blend-mode: difference; }
.btn > .impact-burst { mix-blend-mode: normal; }
.btn:not(:has(> *))::before { display: none; } /* bare text label: no sweep, wrap it in .btn__label */
.btn::before {
  content: ""; position: absolute; inset: calc(var(--stroke-thin) * -1); z-index: -1; background: var(--ink);
  clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-base) var(--ease-ink);
}
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0 0 0 0); }
.btn[aria-pressed="true"]::before, .btn--solid::before, .btn[data-state="copied"]::before { clip-path: inset(0 0 0 0); }
.btn--solid:hover::before { clip-path: inset(0 0 0 0); }
.btn--solid { padding-right: var(--space-6); }
.btn--solid .arr { transition: transform var(--dur-fast) var(--ease-ink); }
.btn--solid:hover .arr { transform: translateX(5px); }
.btn--sm { --btn-h: 28px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn--icon { width: var(--btn-h); padding: 0; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; border-color: var(--tone-2); }
.btn:disabled > *, .btn[aria-disabled="true"] > * { mix-blend-mode: normal; color: var(--ink-muted); }
.btn:disabled::before, .btn[aria-disabled="true"]::before { display: none; }
.btn .icon { width: 15px; height: 15px; }
/* impact frame on press: a short burst + squash, < 150ms */
.btn::after { pointer-events: none; }
.impact-burst {
  position: absolute; inset: -18px -22px; pointer-events: none; z-index: 2; background: var(--ink);
  -webkit-mask: var(--mask-burst) center / 100% 100% no-repeat; mask: var(--mask-burst) center / 100% 100% no-repeat;
  animation: burst calc(var(--dur-instant) * 1.6) var(--ease-ink) both;
}
.is-impact { animation: squash var(--dur-instant) var(--ease-ink); }
@keyframes squash { 40% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes burst { from { opacity: 1; transform: scale(.82); } to { opacity: 0; transform: scale(1.12); } }

/* copy / share: "copy" → "copied" stamp */
.btn[data-state="copied"] .btn__label { animation: stamp var(--dur-slow) var(--ease-ink) both; }
@keyframes stamp {
  0% { transform: scale(1.6) rotate(-10deg); opacity: 0; }
  35% { transform: scale(.92) rotate(-3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ───────────────────────── filters (All / CTF / Box / Post) ───────────────────────── */
.filters { position: relative; isolation: isolate; background: var(--paper); display: inline-flex; width: max-content; max-width: 100%; border: var(--stroke-thin) solid var(--ink); }
.filters__ink {
  position: absolute; top: 0; left: 0; height: 100%; width: 100px; z-index: -1; background: var(--ink);
  transform-origin: left; transition: transform var(--dur-base) var(--ease-ink);
}
.filter {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  background: none; border: 0; border-left: var(--stroke-thin) solid var(--ink);
  font: 600 14px/1 var(--font-sans);
}
.filter:first-of-type { border-left: 0; }
.filter > * { color: #fff; mix-blend-mode: difference; }
.filter small { font: 500 11px/1 var(--font-mono); }
.filter:hover:not([aria-pressed="true"]) .filter__label { text-decoration: underline 2px; text-underline-offset: 5px; }
.filter:focus-visible { outline-offset: -6px; }
.no-js .filter[aria-pressed="true"], .filters:not(.is-ready) .filter[aria-pressed="true"] { background: var(--ink); }

/* pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-12); }
.pager__pos { font: 600 14px/1 var(--font-mono); }
.pager__pos b { font: 900 22px/1 var(--font-display); }

/* ───────────────────────── labels ───────────────────────── */
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px;
  font: 800 11px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  border: var(--stroke-thin) solid var(--ink); color: var(--ink); background: var(--paper); white-space: nowrap;
}
.badge--ctf { background: var(--ink); color: var(--paper); }
.badge--box { box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink); padding: 0 9px; }
.badge--post { background: var(--tone-1); }

.lang {
  display: inline-flex; align-items: center; height: 18px; padding: 0 4px; vertical-align: .25em;
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink);
  border: var(--stroke-hair) solid var(--ink);
}

.diff {
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px;
  font: 600 12px/1 var(--font-sans); letter-spacing: .01em; border: var(--stroke-hair) solid var(--ink);
  color: var(--ink); background: var(--paper); white-space: nowrap;
}
.diff__pips { display: inline-flex; gap: 2px; }
.diff__pips i { width: 4px; height: 11px; background: var(--tone-1); box-shadow: inset 0 0 0 1px var(--tone-3); }
.diff[data-level="easy"] .diff__pips i:nth-child(-n+1),
.diff[data-level="medium"] .diff__pips i:nth-child(-n+2),
.diff[data-level="hard"] .diff__pips i:nth-child(-n+3),
.diff[data-level="insane"] .diff__pips i { background: currentColor; box-shadow: none; }
.diff[data-level="medium"] { border-width: var(--stroke-thin); }
.diff[data-level="hard"] { border-width: var(--stroke-thin); background: var(--ink); color: var(--paper); }
.diff[data-level="hard"] .diff__pips i { background: var(--ink); box-shadow: inset 0 0 0 1px var(--paper); }
.diff[data-level="hard"] .diff__pips i:nth-child(-n+3) { background: var(--paper); }
.diff[data-level="insane"] { border: var(--stroke-thin) solid var(--red); background: var(--red); color: var(--on-red); }

.stars { display: inline-flex; gap: 2px; vertical-align: -2px; }
.stars i {
  width: 14px; height: 14px; background: var(--ink);
  clip-path: polygon(50% 0, 61.8% 35.4%, 100% 35.4%, 69.1% 57.3%, 80.9% 92.7%, 50% 70.8%, 19.1% 92.7%, 30.9% 57.3%, 0 35.4%, 38.2% 35.4%);
}
.stars i.off { background: var(--tone-2); }
.stars--lg i { width: 20px; height: 20px; }

.score { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.score b { font: 900 34px/0.9 var(--font-display); letter-spacing: -.01em; }
.score span { font: 600 13px/1 var(--font-mono); color: var(--ink-muted); }

.os { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--font-sans); }
.os .icon { width: 18px; height: 18px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  font: 500 13px/1 var(--font-sans); color: var(--ink); border: var(--stroke-hair) solid var(--tone-3); background: var(--paper);
}
.pill .icon { width: 14px; height: 14px; stroke-width: 2; }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tag {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 9px;
  font: 500 13px/1 var(--font-mono); font-variant-ligatures: none; color: var(--ink); text-decoration: none;
  border: var(--stroke-thin) solid var(--ink); background: var(--paper); white-space: nowrap;
}
.tag::before {
  content: ""; position: absolute; inset: 0; z-index: -1; clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-base) var(--ease-ink);
  --tone-c: var(--tone-2); --tone-p: var(--tone-pitch-fine); --tone-r: 46%;
  background-image: radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)), radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p); background-position: 0 0, calc(var(--tone-p) / 2) calc(var(--tone-p) / 2);
}
a.tag:hover::before, a.tag:focus-visible::before { clip-path: inset(0); }
.tag__count { color: var(--ink-muted); border-left: var(--stroke-hair) solid var(--tone-3); padding-left: 8px; height: 100%; display: inline-flex; align-items: center; background: var(--paper); margin-right: -9px; padding-right: 8px; }
.tag[aria-current] { background: var(--ink); color: var(--paper); }
.tag[aria-current] .tag__count { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.tags--sm .tag { height: 24px; font-size: 12px; padding: 0 7px; border-width: var(--stroke-hair); }
.tag[hidden] { display: none; }

/* ───────────────────────── fields ───────────────────────── */
.field { position: relative; display: flex; align-items: center; }
.field .icon { position: absolute; left: 14px; color: var(--ink-muted); pointer-events: none; }
.field input {
  width: 100%; height: 44px; padding: 0 14px 0 40px; border-radius: 0;
  font: 500 15px/1 var(--font-mono); font-variant-ligatures: none; color: var(--ink);
  background: var(--paper-2); border: var(--stroke-thin) solid var(--ink); outline: none;
}
.field input::placeholder { color: var(--ink-muted); }
.field input:focus-visible { outline: var(--stroke-thin) solid var(--focus); outline-offset: 2px; }
.field kbd { position: absolute; right: 12px; }
.empty {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6);
  border: var(--stroke-thin) dashed var(--ink); color: var(--ink-muted); font: 500 15px/1.4 var(--font-sans);
}
.empty b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }
.empty__mark { width: 40px; height: 40px; flex: none; border: var(--stroke-thin) solid var(--ink); }
.empty[hidden] { display: none; }

/* ───────────────────────── cards ─────────────────────────
   Hover: a light screentone sweeps in from the left behind the content; arrows nudge. */
.card {
  position: relative; isolation: isolate; display: block; color: var(--ink); text-decoration: none;
  background: var(--paper); border: var(--stroke-thin) solid var(--ink);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-base) var(--ease-ink);
  --tone-c: var(--tone-1); --tone-p: var(--tone-pitch); --tone-r: 62%;
  background-image: radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)), radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p); background-position: 0 0, calc(var(--tone-p) / 2) calc(var(--tone-p) / 2);
}
.card:hover::before, .card:focus-within::before { clip-path: inset(0); }
.card:has(.card__link:focus-visible) { outline: var(--stroke-thin) solid var(--focus); outline-offset: 3px; }
.card__link { text-decoration: none; color: inherit; outline: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__arrow { display: inline-block; font: 500 16px/1 var(--font-mono); transition: transform var(--dur-fast) var(--ease-ink); }
.card:hover .card__arrow { transform: translate(4px, 0); }
.card__title { font: 800 var(--text-display-xs)/var(--text-display-xs--line-height) var(--font-display); margin: 0; text-wrap: balance; }
.card__meta { font: 400 14px/1.5 var(--font-sans); color: var(--ink-muted); margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.card__meta .sep { color: var(--tone-3); }

/* post row (posts list, tag page, event page) */
.post-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.post-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-6); padding: var(--space-6); }
.post-row__main { display: grid; gap: 10px; min-width: 0; }
.post-row__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.post-row__date { font: 500 12px/1.3 var(--font-mono); color: var(--ink-muted); white-space: nowrap; padding-top: 3px; text-align: right; display: grid; gap: 14px; justify-items: end; align-content: space-between; }
@media (max-width: 640px) {
  .post-row { grid-template-columns: 1fr; padding: var(--space-4); }
  .post-row__date { grid-row: 1; justify-items: start; text-align: left; padding: 0; display: flex; justify-content: space-between; }
}

/* pinned grid (home): a manga page — one tall panel, one wide, two small */
.pinned { display: grid; gap: var(--gutter); grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; }
.pinned > :nth-child(1) { grid-row: span 2; }
.pinned > :nth-child(2) { grid-column: span 2; }
.post-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); min-height: 200px; }
.post-card .card__title { font-size: 26px; }
.pinned > :nth-child(1) .card__title { font-size: 40px; line-height: .98; }
.post-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--ink); }
.post-card__foot time { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
.post-card__art { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2); height: 140px; border-bottom: var(--stroke-thin) solid var(--ink); overflow: hidden; position: relative; }
@media (max-width: 900px) {
  .pinned { grid-template-columns: 1fr 1fr; }
  .pinned > :nth-child(1) { grid-row: auto; grid-column: span 2; }
  .pinned > :nth-child(2) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .pinned { grid-template-columns: 1fr; }
  .pinned > * { grid-column: auto !important; }
  .pinned > :nth-child(1) .card__title { font-size: 32px; }
}

/* event card */
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--gutter); }
.event-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-6); }
.event-card__count { text-align: right; display: grid; align-content: start; justify-items: end; }
.event-card__count b { font: 900 48px/.85 var(--font-display); }
.event-card__count span { font: 600 11px/1.2 var(--font-mono); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.event-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: var(--space-3) 0 0; font: 400 14px/1.4 var(--font-sans); }
.event-card dt { font: 500 12px/1.4 var(--font-mono); color: var(--ink-muted); }
.event-card dd { margin: 0; }
@media (max-width: 420px) { .event-grid { grid-template-columns: 1fr; } }

/* CVE card */
.cve-list { display: grid; gap: var(--gutter); }
.cve-card { padding: var(--space-6); display: grid; gap: 10px; }
.cve-card__id { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.cve-card__id code { font: 700 16px/1 var(--font-mono); letter-spacing: -.01em; }
.cve-card__id time { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
.cve-card p { margin: 0; color: var(--ink-muted); font-size: 15px; max-width: 72ch; }

/* link card (related articles) */
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.link-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; }
.link-card__fav { width: 36px; height: 36px; display: grid; place-items: center; border: var(--stroke-hair) solid var(--ink); background: var(--paper); }
.link-card__fav img, .link-card__fav svg { width: 18px; height: 18px; filter: grayscale(1) contrast(1.2); }
.link-card__title { font: 600 15px/1.3 var(--font-sans); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-card__host { font: 500 12px/1.3 var(--font-mono); color: var(--ink-muted); margin: 3px 0 0; }

/* file rows */
.files { border: var(--stroke-thin) solid var(--ink); margin: 0; padding: 0; list-style: none; }
.file-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: center; padding: 12px 16px; border-top: var(--stroke-hair) solid var(--ink); }
.file-row:first-child { border-top: 0; }
.file-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-2); clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-base) var(--ease-ink); }
.file-row:hover::before { clip-path: inset(0); }
.file-ext {
  width: 34px; height: 40px; display: grid; place-items: end center; padding-bottom: 6px;
  font: 700 9.5px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  background: var(--paper); border: var(--stroke-thin) solid var(--ink);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  position: relative;
}
.file-ext::after { content: ""; position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; background: var(--ink); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.file-row__name { font: 600 14px/1.3 var(--font-mono); font-variant-ligatures: none; overflow-wrap: anywhere; text-decoration: none; }
.file-row__name::after { content: ""; position: absolute; inset: 0; }
.file-row__kind { font: 400 12px/1.3 var(--font-sans); color: var(--ink-muted); display: block; margin-top: 2px; }
.file-row__size { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); white-space: nowrap; }
.file-row .btn { position: relative; z-index: 1; }

/* post nav (newer / older): same screentone hover as other cards */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.post-nav__item { padding: var(--space-6); display: grid; gap: 10px; overflow: hidden; }
.post-nav__item--next { text-align: right; }
.post-nav__dir { font: 600 13px/1 var(--font-mono); color: var(--ink-muted); }
.post-nav__item:hover .post-nav__dir { color: var(--ink); }
.post-nav__item--prev:hover .card__arrow { transform: translateX(-4px); }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } }

/* info card */
.info-card { padding: 0; margin: 0; }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stroke-hair); background: var(--ink); margin: 0; }
.info-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.info-grid > div { background: var(--paper); padding: 22px var(--space-6) var(--space-4); display: grid; gap: 8px; align-content: start; }
.info-grid dt { font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.info-grid dd { margin: 0; font: 700 17px/1.25 var(--font-sans); min-height: 34px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.info-grid dd a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.info-grid dd .unknown { font: 700 17px/1 var(--font-mono); color: var(--ink-muted); }
@media (max-width: 640px) { .info-grid, .info-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info-grid > div { padding: 18px var(--space-4) 14px; } }

/* avatar: halftone shifts half a pitch on hover */
.avatar { position: relative; overflow: hidden; border: var(--stroke-panel) solid var(--ink); background: var(--paper); aspect-ratio: 1; }
.avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter var(--dur-base) var(--ease-ink); }
.avatar::after {
  content: ""; position: absolute; inset: -12px; pointer-events: none; mix-blend-mode: multiply; opacity: .28;
  --tone-c: #000; --tone-p: 5px; --tone-r: 34%;
  background-image: radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)), radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p); background-position: 0 0, 2.5px 2.5px;
  transition: transform var(--dur-base) var(--ease-ink), opacity var(--dur-base) var(--ease-ink);
}
[data-theme="dark"] .avatar::after { mix-blend-mode: screen; --tone-c: #fff; opacity: .16; }
.avatar--sm { border-width: var(--stroke-thin); width: 72px; }

/* ───────────────────────── the cut (diagonal panel) ───────────────────────── */
.cut { --cut: 56px; position: relative; background: var(--ink); padding: var(--stroke-panel);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.cut > * { clip-path: polygon(0 0, calc(100% + 0px) 0, calc(100% - var(--cut) + 1px) 100%, 0 100%); }

/* ───────────────────────── search panel ───────────────────────── */
.search { position: fixed; inset: 0; z-index: var(--z-search); display: grid; justify-items: center; align-items: start; padding: 11vh var(--space-4) var(--space-4); }
.search[hidden] { display: none; }
.search__scrim { position: absolute; inset: 0; background: var(--scrim); }
.search__scrim::after { content: ""; position: absolute; inset: 0; opacity: .5;
  --tone-c: var(--tone-1); --tone-p: var(--tone-pitch); --tone-r: 50%;
  background-image: radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)), radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p); background-position: 0 0, 3px 3px; }
.search__panel {
  position: relative; width: min(640px, 100%); background: var(--paper); border: var(--stroke-panel) solid var(--ink);
  box-shadow: 0 0 0 10px var(--paper);
}
.search.is-opening .search__scrim { animation: fade-in var(--dur-base) linear both; }
.search.is-opening .search__panel { animation: panel-drop var(--dur-base) var(--ease-ink) both; }
.search.is-closing .search__scrim { animation: fade-out var(--dur-fast) linear both; }
.search.is-closing .search__panel { animation: panel-lift var(--dur-fast) var(--ease-exit) both; }
.search__bar { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: var(--stroke-thin) solid var(--ink); }
.search__bar .icon { width: 20px; height: 20px; color: var(--ink); }
.search__input { flex: 1; min-width: 0; height: 60px; border: 0; background: none; outline: none; font: 500 19px/1 var(--font-sans); color: var(--ink); }
.search__input::placeholder { color: var(--ink-muted); }
.search__results { list-style: none; margin: 0; padding: 8px 0; max-height: min(420px, 55vh); overflow: auto; }
.search__label { font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 10px 16px 6px; margin: 0; }
.result {
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 10px 16px; text-decoration: none; color: var(--ink);
}
.result::before { content: ""; position: absolute; inset: 0 8px; z-index: -1; background: var(--ink); clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-fast) var(--ease-ink); }
.result[aria-selected="true"]::before { clip-path: inset(0); }
.result[aria-selected="true"] { color: var(--paper); }
.result[aria-selected="true"] .muted, .result[aria-selected="true"] .result__meta { color: var(--paper); opacity: .8; }
.result[aria-selected="true"] .badge { border-color: var(--paper); }
.result__title { font: 600 15px/1.3 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result__meta { grid-column: 2; font: 400 12.5px/1.3 var(--font-mono); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result__enter { grid-row: 1 / span 2; grid-column: 3; font: 500 12px/1 var(--font-mono); opacity: 0; }
.result[aria-selected="true"] .result__enter { opacity: 1; }
.result mark { background: none; color: inherit; text-decoration: underline var(--stroke-thin) var(--red); text-underline-offset: 3px; text-decoration-skip-ink: none; }
.result[aria-selected="true"] mark { text-decoration-color: var(--term-prompt); }
.search.is-results .result { animation: rise-in var(--dur-base) var(--ease-ink) both; animation-delay: calc(min(var(--i, 0), 8) * var(--dur-stagger)); }
.search__empty { padding: 28px 16px 30px; display: grid; gap: 6px; }
.search__empty p { margin: 0; }
.search__empty b { font-family: var(--font-mono); }
.search__foot { display: flex; gap: 16px; padding: 10px 16px; border-top: var(--stroke-hair) solid var(--ink); font: 500 11.5px/1 var(--font-mono); color: var(--ink-muted); flex-wrap: wrap; }
.search__foot span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) { .search { padding-top: 64px; } .search__foot { display: none; } }

/* ───────────────────────── writeup ───────────────────────── */
.writeup-head { display: grid; gap: var(--space-6); }
.writeup-head__eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; font: 700 14px/1 var(--font-sans); }
.writeup-head__eyebrow a { color: var(--ink); text-decoration: none; }
.writeup-title { font: 900 var(--text-display-l)/var(--text-display-l--line-height) var(--font-display); letter-spacing: -.005em; margin: 0; text-wrap: pretty; }
.writeup-title .lang { vertical-align: .9em; margin-left: 6px; }
.writeup-head__meta { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; font: 500 14px/1.2 var(--font-sans); color: var(--ink-muted); }
.writeup-head__meta strong { color: var(--ink); font-weight: 700; }
.writeup-head__meta .sep { width: 4px; height: 4px; background: var(--ink); }
.writeup-head__meta .btn { margin-left: auto; }
.writeup-cover { margin: var(--space-12) 0 0; border: var(--stroke-panel) solid var(--ink); width: fit-content; max-width: 100%; }
.writeup-cover img { width: auto; max-width: 100%; max-height: 320px; height: auto; }
.writeup-layout { display: grid; grid-template-columns: minmax(0, var(--size-article)) var(--size-toc); justify-content: space-between; gap: var(--space-16); margin-top: var(--space-16); }
.writeup-aside { position: relative; }
.writeup-aside .toc { position: sticky; top: calc(var(--size-header) + var(--space-8)); }
.writeup-end { display: grid; gap: var(--space-16); margin-top: var(--space-24); }
@media (max-width: 1100px) {
  .writeup-layout { grid-template-columns: minmax(0, 1fr); }
  .writeup-aside { display: none; }
  .writeup-layout > * { max-width: var(--size-article); }
}
@media (max-width: 640px) { .writeup-head__meta .btn { margin-left: 0; } }

/* TOC — an ink marker slides to the active section */
.toc { font: 400 14px/1.35 var(--font-sans); }
.toc__title { margin: 0 0 14px; }
.toc__rail { position: relative; border-left: var(--stroke-thin) solid var(--tone-2); }
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__list ol { list-style: none; margin: 0; padding: 0 0 0 14px; }
.toc__link { display: block; padding: 6px 0 6px 16px; color: var(--ink-muted); text-decoration: none; }
.toc__link:hover { color: var(--ink); }
.toc__link[aria-current="true"] { color: var(--ink); font-weight: 700; }
.toc__marker {
  position: absolute; left: calc(var(--stroke-thin) * -1 - 1px); top: 0; width: 4px; height: 100px; background: var(--ink);
  transform-origin: top; transform: translateY(var(--y, 0)) scaleY(var(--s, .3));
  transition: transform var(--dur-base) var(--ease-ink);
}
.toc__top { display: inline-flex; gap: 6px; margin-top: var(--space-6); font: 600 13px/1 var(--font-sans); color: var(--ink); }
.toc-mobile { display: none; border: var(--stroke-thin) solid var(--ink); margin-bottom: var(--space-8); }
.toc-mobile > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
  font: 800 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile > summary .icon { transition: transform var(--dur-fast) var(--ease-ink); }
.toc-mobile[open] > summary { border-bottom: var(--stroke-hair) solid var(--ink); }
.toc-mobile[open] > summary .icon { transform: rotate(180deg); }
.toc-mobile[open] .toc { animation: panel-drop var(--dur-base) var(--ease-ink) both; padding: 12px 16px 16px; }
@media (max-width: 1100px) { .toc-mobile { display: block; } }

/* article body — nothing in here animates */
.article { font: 400 var(--text-body-article)/var(--text-body-article--line-height) var(--font-sans); color: var(--ink); overflow-wrap: break-word; }
.article > * { margin: 0 0 1.15em; }
.article h1, .article h2, .article h3, .article h4 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; position: relative; }
.article h1 { font-weight: 800; font-size: var(--text-display-m); line-height: 1; margin: 2.2em 0 .6em; }
.article h2 { font-weight: 800; font-size: var(--text-display-s); line-height: 1.05; margin: 2em 0 .55em; }
.article h3, .article h4 { font-weight: 800; font-size: var(--text-display-xs); line-height: 1.1; margin: 1.7em 0 .5em; }
.article h1:first-child, .article h2:first-child { margin-top: 0; }
.article :is(h1, h2, h3, h4) .anchor { margin-left: .3em; color: var(--blue); text-decoration: none; opacity: 0; font-family: var(--font-mono); font-size: .7em; }
.article :is(h1, h2, h3, h4):hover .anchor, .article .anchor:focus-visible { opacity: 1; }
.article h2::before {
  content: ""; display: block; width: 28px; height: 8px; margin-bottom: 14px;
  --tone-c: var(--ink); --tone-p: 4px; --tone-r: 46%;
  background-image: radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)), radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p); background-position: 0 0, 2px 2px;
}
.article p { max-width: 68ch; }
.article a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.article a:hover { text-decoration-thickness: 2px; }
.article strong { font-weight: 700; }
.article :not(pre) > code {
  font: 500 .86em/1 var(--font-mono); font-variant-ligatures: none; padding: .14em .36em; border-radius: var(--radius-xs);
  background: var(--paper-2); border: var(--stroke-hair) solid var(--tone-2); white-space: break-spaces; overflow-wrap: anywhere;
}
.article ul, .article ol { padding-left: 1.4em; }
.article li { margin: .3em 0; padding-left: .2em; }
.article ul > li::marker { content: "■  "; font-size: .62em; color: var(--ink); }
.article ol > li::marker { font: 600 .85em var(--font-mono); color: var(--ink-muted); }
.article blockquote {
  position: relative; margin: 1.6em 8px 1.6em 0; padding: 18px 22px; background: var(--paper);
  border: var(--stroke-thin) solid var(--ink); font-size: .95em;
}
.article blockquote::before {
  content: "“"; position: absolute; top: -18px; left: 14px; padding: 0 6px; background: var(--paper);
  font: 900 44px/1 var(--font-display); color: var(--ink);
}
.article blockquote > :last-child { margin-bottom: 0; }
.article hr { border: 0; height: 10px; margin: 2.4em 0; max-width: 120px;
  --tone-c: var(--ink); --tone-p: 5px; --tone-r: 40%;
  background-image: radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)), radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p); background-position: 0 0, 2.5px 2.5px; }
.article figure { margin: 1.8em 0; }
.article figure img, .article p > img { border: var(--stroke-thin) solid var(--ink); cursor: zoom-in; width: 100%; height: auto; }
.article figure:not(.codeblock):not(.terminal) > figcaption { font: 500 12.5px/1.4 var(--font-sans); color: var(--ink-muted); margin-top: 10px; display: flex; gap: 8px; }
.article figure:not(.codeblock):not(.terminal) > figcaption::before { content: "▲"; font-size: 8px; line-height: 16px; color: var(--ink); }
.table-wrap { overflow-x: auto; border: var(--stroke-thin) solid var(--ink); margin: 1.6em 0; }
.article table { width: 100%; border-collapse: collapse; font: 400 15px/1.45 var(--font-sans); }
.article th { text-align: left; background: var(--paper-2); font: 600 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding: 12px 14px; border-bottom: var(--stroke-thin) solid var(--ink); white-space: nowrap; }
.article td { padding: 11px 14px; border-top: var(--stroke-hair) solid var(--tone-2); vertical-align: top; }
.article td code { font-size: .86em; white-space: nowrap; }
@media (max-width: 640px) { .highlight pre, .codeblock pre, .terminal pre { font-size: 13px; padding: 14px 16px; } }
.callout { position: relative; border: var(--stroke-thin) solid var(--ink); padding: 22px 22px 18px; margin: 1.8em 0; font-size: .95em; }
.callout > :last-child { margin-bottom: 0; }

/* ───────────────────────── code blocks + Pygments theme ─────────────────────────
   Ink + grays + two spot inks. Structure is carried by WEIGHT (keywords bold) and
   strings by BLUE, so a payload never hides; numbers/constants/escapes in RED. */
.codeblock { margin: 1.8em 0; border: var(--stroke-thin) solid var(--ink); background: var(--paper); font-size: 14px; }
.codeblock__bar { display: flex; align-items: center; gap: 12px; height: 38px; padding-right: 6px; border-bottom: var(--stroke-thin) solid var(--ink); background: var(--paper-2); }
.codeblock__lang { align-self: stretch; display: inline-flex; align-items: center; padding: 0 12px; background: var(--ink); color: var(--paper); font: 800 11px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.codeblock__file { font: 500 12.5px/1 var(--font-mono); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codeblock__bar .btn { margin-left: auto; }
.highlight { margin: 0; }
.highlight pre, .codeblock pre {
  margin: 0; padding: 18px 22px; overflow-x: auto; background: var(--paper);
  font: 400 14px/1.7 var(--font-mono); font-variant-ligatures: none; tab-size: 4; color: var(--ink);
  scrollbar-width: thin; scrollbar-color: var(--ink) var(--paper-2);
}
.highlight .hll { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--red); display: inline-block; min-width: 100%; margin: 0 -22px; padding: 0 22px; }
.highlight .c, .highlight .ch, .highlight .cm, .highlight .c1, .highlight .cs, .highlight .cpf { color: var(--ink-muted); font-style: italic; }
.highlight .cp { color: var(--ink-muted); font-weight: 700; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .ow { color: var(--ink); font-weight: 700; }
.highlight .kt { color: var(--ink); font-weight: 600; }
.highlight .kc, .highlight .no, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: var(--red); }
.highlight .s, .highlight .sa, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .s1, .highlight .sr, .highlight .ss, .highlight .sx { color: var(--blue); }
.highlight .se, .highlight .si { color: var(--red); font-weight: 600; }
.highlight .sd { font-style: italic; }
.highlight .nf, .highlight .fm { color: var(--green); font-weight: 600; }
.highlight .nb, .highlight .bp { color: var(--green); }
.highlight .nc, .highlight .nn { color: var(--ink); font-weight: 700; }
.highlight .nt { color: var(--green); font-weight: 700; }
.highlight .nd, .highlight .ne { color: var(--red); font-weight: 600; }
.highlight .na, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { color: var(--green); }
.highlight .n, .highlight .nx, .highlight .py { color: var(--ink); }
.highlight .o { color: var(--ink); }
.highlight .p { color: var(--ink-muted); }
.highlight .err { color: var(--red); text-decoration: underline wavy var(--red); text-underline-offset: 3px; }
.highlight .gd { color: var(--red); }
.highlight .gi { color: var(--blue); }
.highlight .gh, .highlight .gu, .highlight .gs { font-weight: 700; }
.highlight .ge { font-style: italic; }
.highlight .gp { color: var(--red); font-weight: 700; user-select: none; }
.highlight .go { color: var(--ink-muted); }
.highlight .gt { color: var(--red); }
.highlight .linenos, .highlight .lineno, .linenodiv pre { color: var(--ink-muted); user-select: none; }
.highlight .linenos { display: inline-block; min-width: 2.6em; padding-right: 1.2em; margin-right: 1em; text-align: right; border-right: var(--stroke-hair) solid var(--tone-2); }

/* terminal — an inverted panel: shell sessions never read as source */
.terminal { margin: 1.8em 0; background: var(--term-bg); color: var(--term-ink); border: var(--stroke-thin) solid var(--ink); font-size: 14px; }
[data-theme="dark"] .terminal { border-color: var(--tone-2); }
[data-theme="dark"] .terminal__bar { background: var(--term-ink); border-bottom: 0; }
[data-theme="dark"] .terminal__title { color: var(--term-bg); }
[data-theme="dark"] .terminal__title::before { --tone-c: var(--term-bg); }
[data-theme="dark"] .terminal__bar .btn { --paper: var(--term-ink); --ink: var(--term-bg); }
.terminal__bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 6px 0 14px; border-bottom: var(--stroke-hair) solid color-mix(in oklab, var(--term-ink) 22%, var(--term-bg)); }
.terminal__title { font: 600 12px/1 var(--font-mono); color: var(--term-muted); display: inline-flex; align-items: center; gap: 8px; }
.terminal__title::before { content: ""; width: 18px; height: 8px;
  --tone-c: var(--term-muted); --tone-p: 4px; --tone-r: 50%;
  background-image: radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)), radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p); background-position: 0 0, 2px 2px; }
.terminal__bar .btn { margin-left: auto; --paper: var(--term-bg); --ink: var(--term-ink); }
.terminal pre { margin: 0; padding: 16px 20px 18px; overflow-x: auto; background: none; font: 400 14px/1.7 var(--font-mono); font-variant-ligatures: none; color: var(--term-ink); scrollbar-width: thin; scrollbar-color: var(--term-muted) var(--term-bg); }
.terminal pre { font-weight: 500; }
.terminal .go { font-weight: 400; }
.terminal .gp { color: var(--term-prompt); font-weight: 700; user-select: none; }
.terminal .go { color: var(--term-muted); }
.terminal .c, .terminal .c1 { color: var(--term-muted); font-style: italic; }
.terminal .s, .terminal .s1, .terminal .s2 { color: color-mix(in oklab, var(--blue) 55%, #fff); }
.terminal .hl { color: var(--term-ink); font-weight: 700; background: color-mix(in oklab, var(--term-ink) 14%, var(--term-bg)); }

/* flag — the climax panel */
.flag-panel {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  padding: var(--space-16) var(--space-4); border: var(--stroke-heavy) solid var(--ink); background: var(--paper);
}
.flag-panel__lines { position: absolute; inset: -10%; z-index: -1; background: var(--ink); opacity: .9;
  -webkit-mask: var(--mask-focus-lines) center / 100% 100% no-repeat; mask: var(--mask-focus-lines) center / 100% 100% no-repeat; }
.flag-panel__box { position: relative; background: var(--paper); border: var(--stroke-panel) solid var(--ink); padding: 26px 28px 22px; max-width: min(100%, 640px); display: grid; gap: 14px; justify-items: center; text-align: center; box-shadow: 0 0 0 10px var(--paper); }
.flag-panel__stamp {
  position: absolute; top: -16px; left: -14px; margin: 0; padding: 6px 10px 5px; transform: rotate(-6deg);
  background: var(--red); color: var(--on-red); font: 900 14px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
}
.flag-panel__label { margin: 0; font: 600 12px/1 var(--font-mono); color: var(--ink-muted); letter-spacing: .06em; }
.flag-panel__value { font: 700 20px/1.45 var(--font-mono); font-variant-ligatures: none; overflow-wrap: anywhere; word-break: break-all; color: var(--ink); user-select: all; }
.flag-panel__value .brace { color: var(--red); }
@media (max-width: 640px) { .flag-panel__value { font-size: 16px; } .flag-panel { padding: var(--space-12) var(--space-3); } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: grid; place-items: center; padding: 56px 24px 64px; overflow: hidden; }
.lightbox[hidden] { display: none; }
.lightbox__scrim { position: absolute; inset: 0; background: color-mix(in oklab, var(--paper) 94%, transparent); }
.lightbox__frame { position: relative; border: var(--stroke-panel) solid var(--ink); background: var(--paper); box-shadow: 0 0 0 12px var(--paper), 0 0 0 15px var(--ink); max-width: min(1100px, 100%); max-height: 100%; overflow: hidden; touch-action: none; cursor: grab; }
.lightbox__frame:active { cursor: grabbing; }
.lightbox__frame img { display: block; max-width: 100%; max-height: calc(100vh - 160px); transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; }
.lightbox__bar { position: absolute; left: 24px; right: 24px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
.lightbox__close { position: absolute; top: 14px; right: 18px; }
.lightbox.is-opening .lightbox__scrim { animation: fade-in var(--dur-base) linear both; }
.lightbox.is-opening .lightbox__frame { animation: frame-in var(--dur-slow) var(--ease-cut) both; }
.lightbox.is-closing .lightbox__scrim { animation: fade-out var(--dur-fast) linear both; }
.lightbox.is-closing .lightbox__frame { animation: frame-out var(--dur-fast) var(--ease-exit) both; }
@keyframes frame-in {
  from { transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fs, .9)); clip-path: inset(0 0 0 0); }
  to { transform: none; clip-path: inset(-20px); }
}
@keyframes frame-out { to { transform: scale(.96); opacity: 0; } }

/* source-file viewer */
.source-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-6); border-bottom: var(--stroke-panel) solid var(--ink); margin-bottom: var(--space-8); }
.source-head__name { display: flex; align-items: center; gap: 14px; margin: 0; font: 700 26px/1.1 var(--font-mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
.source-head__from { margin: 10px 0 0; font: 500 14px/1.4 var(--font-sans); color: var(--ink-muted); }
.source-head__from a { color: var(--blue); }
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* tags index */
.letter-group { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) 0; border-top: var(--stroke-hair) solid var(--ink); }
.letter-group__letter { font: 900 48px/.8 var(--font-display); margin: 0; padding-top: 2px; }
.letter-group[hidden] { display: none; }
@media (max-width: 560px) { .letter-group { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); } .letter-group__letter { font-size: 36px; } }

/* home hero */
.hero { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--space-12); align-items: end; padding-top: var(--space-12); }
.hero__art { position: relative; }
.hero__art .cut { --cut: 64px; }
.hero__art .avatar { border: 0; }
.hero__art::after { content: ""; position: absolute; inset: 0; transform: translate(12px, 12px); z-index: -1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%);
  --tone-c: var(--tone-2); --tone-p: var(--tone-pitch-fine); --tone-r: 46%;
  background-image: radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)), radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p); background-position: 0 0, 2px 2px; }
.hero__art { isolation: isolate; }
.hero__text { display: grid; gap: var(--space-6); padding-bottom: var(--space-2); }
.hero__handle { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 13px/1 var(--font-mono); }
.hero__handle::before { content: ""; width: 10px; height: 10px; background: var(--red); }
.hero__title { font: 900 var(--text-display-xl)/var(--text-display-xl--line-height) var(--font-display); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.hero__tagline { margin: 0; font: 400 18px/1.5 var(--font-sans); color: var(--ink-muted); max-width: 46ch; }
.hero__sep { margin: 0 .65em; color: var(--tone-3); font-weight: 400; }
.hero__tagline b { color: var(--ink); font-weight: 600; }
.hero__actions { display: flex; align-items: center; gap: var(--space-6) var(--space-8); flex-wrap: wrap; }
.socials { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font: 600 14px/1 var(--font-sans); }
.socials a { display: inline-flex; gap: 4px; padding: 6px 0; }
.socials a .arr { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-8); padding-top: 0; }
  .hero__art { max-width: 260px; }
}

/* about */
.about { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-16); align-items: start; }
.about__id { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-8); align-items: end; margin-bottom: var(--space-12); }
.about__facts { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; font: 500 15px/1.3 var(--font-sans); }
.about__facts li { display: flex; gap: 10px; align-items: center; }
.about__facts .icon { color: var(--ink); }
.connect { position: sticky; top: calc(var(--size-header) + var(--space-8)); padding: 0; }
.connect ul { list-style: none; margin: 0; padding: 18px 0 6px; }
.connect a { position: relative; isolation: isolate; background: var(--paper); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 11px 18px; text-decoration: none; }
.connect a > * { color: #fff; mix-blend-mode: difference; }
.connect a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-base) var(--ease-ink); }
.connect a:hover::before, .connect a:focus-visible::before { clip-path: inset(0); }
.connect a:focus-visible { outline-offset: -5px; }
.connect b { font: 700 15px/1.2 var(--font-sans); }
.connect span { grid-column: 1; font: 500 12px/1.2 var(--font-mono); }
.connect i { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: normal 500 14px/1 var(--font-mono); }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: var(--space-12); } .connect { position: static; } }
@media (max-width: 560px) { .about__id { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); } }

/* 404 impact panel */
.impact-404 { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 440px; border: var(--stroke-heavy) solid var(--ink); padding: var(--space-12) var(--space-4); }
.impact-404__lines { position: absolute; inset: -12%; z-index: -1; background: var(--ink);
  -webkit-mask: var(--mask-focus-lines) center / 100% 100% no-repeat; mask: var(--mask-focus-lines) center / 100% 100% no-repeat; }
.impact-404__box { background: var(--paper); border: var(--stroke-panel) solid var(--ink); box-shadow: 0 0 0 12px var(--paper); padding: 20px 34px 26px; text-align: center; display: grid; gap: 16px; justify-items: center; max-width: 100%; }
.impact-404__num { margin: 0; font: 900 var(--text-display-xxl)/var(--text-display-xxl--line-height) var(--font-display); letter-spacing: -.02em; display: flex; }
.impact-404__num span:nth-child(2) { color: var(--red); transform: rotate(-4deg) translateY(4px); display: inline-block; }
.impact-404__msg { margin: 0; font: 500 17px/1.4 var(--font-sans); }
.impact-404 .btn-row { justify-content: center; }

/* summary grid (event page) */
.summary { margin: 0 0 var(--space-12); }

/* ───────────────────────── keyframes ───────────────────────── */
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes panel-drop {
  from { transform: translateY(-14px); clip-path: inset(-12px -12px 100% -12px); }
  to { transform: none; clip-path: inset(-12px -12px -12px -12px); }
}
@keyframes panel-lift { to { transform: translateY(-8px); opacity: 0; } }
@keyframes rise-in { from { transform: translateY(6px); opacity: 0; } }
@keyframes ink-in {
  from { clip-path: inset(-.25em 100% -.25em -.1em); filter: blur(5px); transform: translateX(-6px); }
  60% { filter: blur(0); }
  to { clip-path: inset(-.25em -.1em -.25em -.1em); transform: none; }
}
@keyframes cut-in {
  from { clip-path: polygon(-2% -2%, -2% -2%, -24% 102%, -2% 102%); transform: translateY(10px); }
  to { clip-path: polygon(-2% -2%, 124% -2%, 102% 102%, -2% 102%); transform: none; }
}
@keyframes lines-in { from { transform: scale(1.5) rotate(4deg); opacity: 0; } to { transform: none; } }
@keyframes box-in { from { clip-path: inset(-20px 100% -20px -20px); } to { clip-path: inset(-20px -20px -20px -20px); } }
@keyframes stamp-in { from { transform: scale(2.2) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-6deg); opacity: 1; } }

/* ───────────────────────── entrances (only with JS, only with motion) ─────────────────────────
   [data-reveal="ink"]  headings: ink bleeds in left→right
   [data-reveal="cut"]  panels/cards: a diagonal panel cut wipes them in; siblings stagger via --i
   [data-reveal="flag"] the flag climax: impact flash → focus lines slam → box draws → stamp hits */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal="ink"]:not(.is-in), .js [data-reveal="cut"]:not(.is-in) { clip-path: inset(0 100% 0 0); }
  .js [data-reveal="ink"].is-in { animation: ink-in var(--dur-slow) var(--ease-ink) backwards; animation-delay: calc(var(--i, 0) * var(--dur-stagger)); }
  .js [data-reveal="cut"].is-in { animation: cut-in var(--dur-slow) var(--ease-ink) backwards; animation-delay: calc(min(var(--i, 0), 8) * var(--dur-stagger)); }
  .js [data-reveal="flag"]:not(.is-in) .flag-panel__lines { opacity: 0; }
  .js [data-reveal="flag"]:not(.is-in) .flag-panel__box { clip-path: inset(0 100% 0 0); }
  .js [data-reveal="flag"]:not(.is-in) .flag-panel__stamp { opacity: 0; }
  .js [data-reveal="flag"].is-in .flag-panel__lines { animation: lines-in var(--dur-slow) var(--ease-ink) backwards; animation-delay: var(--dur-instant); }
  .js [data-reveal="flag"].is-in .flag-panel__box { animation: box-in var(--dur-base) var(--ease-cut) backwards; animation-delay: calc(var(--dur-instant) + var(--dur-fast)); }
  .js [data-reveal="flag"].is-in .flag-panel__stamp { animation: stamp-in var(--dur-base) var(--ease-ink) backwards; animation-delay: calc(var(--dur-instant) + var(--dur-base) + var(--dur-fast)); }
  .js .impact-404[data-reveal].is-in .impact-404__lines { animation: lines-in var(--dur-slow) var(--ease-ink) backwards; }
  .js .impact-404[data-reveal].is-in .impact-404__box { animation: stamp-404 var(--dur-base) var(--ease-ink) backwards; animation-delay: var(--dur-fast); }
  .js .impact-404[data-reveal]:not(.is-in) > * { opacity: 0; }
}
@keyframes stamp-404 { from { transform: scale(1.25); filter: blur(6px); opacity: 0; } to { transform: none; filter: none; opacity: 1; } }

/* ───────────────────────── page transitions (cross-document) ─────────────────────────
   A panel cut: the next page wipes in behind a diagonal edge; the old page slides back
   and an ink gutter (the ::view-transition background) shows in the gap. The header is
   its own group and stays put. Unsupported browsers simply navigate. */
@view-transition { navigation: auto; }
::view-transition { background: var(--ink); }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
::view-transition-old(root) { animation: vt-cut-out var(--dur-page) var(--ease-cut) both; }
::view-transition-new(root) { animation: vt-cut-in var(--dur-page) var(--ease-cut) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-cut-out-back; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-cut-in-back; }
@keyframes vt-cut-in {
  from { clip-path: polygon(146% 0, 160% 0, 160% 100%, 131% 100%); }
  to   { clip-path: polygon(0 0, 160% 0, 160% 100%, -15% 100%); }
}
@keyframes vt-cut-out {
  from { clip-path: polygon(-20% 0, 144.6% 0, 129.6% 100%, -20% 100%); transform: none; }
  to   { clip-path: polygon(-20% 0, -1.4% 0, -16.4% 100%, -20% 100%); transform: translateX(-3%); }
}
@keyframes vt-cut-in-back {
  from { clip-path: polygon(-60% 0, -2% 0, -17% 100%, -60% 100%); }
  to   { clip-path: polygon(-60% 0, 115% 0, 100% 100%, -60% 100%); }
}
@keyframes vt-cut-out-back {
  from { clip-path: polygon(-0.6% 0, 120% 0, 120% 100%, -15.6% 100%); transform: none; }
  to   { clip-path: polygon(116.4% 0, 120% 0, 120% 100%, 101.4% 100%); transform: translateX(3%); }
}

/* ───────────────────────── reduced motion ─────────────────────────
   Everything collapses to short crossfades or nothing; no transforms, no wipes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
  .brush::after, .btn::before, .card::before, .tag::before, .menu-item::before, .result::before, .connect a::before, .file-row::before { transition: none !important; }
  .is-impact, .impact-burst { animation: none !important; display: none; }
  .is-impact { display: inline-flex; }
  .search.is-opening .search__panel, .search.is-opening .search__scrim, .dropdown__menu.is-opening, .mobile-menu.is-opening, .toc-mobile[open] .toc, .lightbox.is-opening .lightbox__frame, .lightbox.is-opening .lightbox__scrim { animation: fade-in var(--dur-fast) linear both !important; }
  .search.is-closing .search__panel, .search.is-closing .search__scrim, .dropdown__menu.is-closing, .lightbox.is-closing .lightbox__frame, .lightbox.is-closing .lightbox__scrim { animation: fade-out var(--dur-fast) linear both !important; }
  .search.is-results .result, .btn[data-state="copied"] .btn__label { animation: none !important; }
  .toc__marker, .filters__ink { transition: none !important; }
  .avatar::after { display: none; }
  ::view-transition { background: none; }
  ::view-transition-old(root) { animation: fade-out var(--dur-fast) linear both !important; }
  ::view-transition-new(root) { animation: fade-in var(--dur-fast) linear both !important; }
}

/* ───────────────────────── motion specimens (design-system page only) ───────────────────────── */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gutter); }
.spec { border: var(--stroke-thin) solid var(--ink); display: grid; grid-template-rows: 150px auto; }
.spec__stage { position: relative; overflow: hidden; display: grid; place-items: center; border-bottom: var(--stroke-hair) solid var(--ink); background: var(--paper); }
.spec__info { padding: 12px 14px 14px; display: grid; gap: 6px; }
.spec__name { margin: 0; font: 800 17px/1.1 var(--font-display); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.spec__tokens { margin: 0; font: 500 11.5px/1.5 var(--font-mono); color: var(--ink-muted); }
.spec__tokens b { color: var(--ink); font-weight: 600; }

/* ───────────────────────── mottled tone & balloon (from the reference panel) ───────────────────────── */
.mottle { position: absolute; pointer-events: none; z-index: -1;
  --tone-c: var(--tone-2); --tone-p: var(--tone-pitch-fine); --tone-r: 48%;
  background-image: radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%)), radial-gradient(circle closest-side, var(--tone-c) var(--tone-r), #0000 calc(var(--tone-r) + 16%));
  background-size: var(--tone-p) var(--tone-p); background-position: 0 0, 2px 2px;
  -webkit-mask: var(--mask-mottle) center / 100% 100% no-repeat; mask: var(--mask-mottle) center / 100% 100% no-repeat; }
.balloon { position: relative; display: inline-block; padding: 14px 26px; background: var(--paper); border: var(--stroke-panel) solid var(--ink); border-radius: 50%; text-align: center; }
.balloon::after { content: ""; position: absolute; left: 28%; bottom: -18px; width: 22px; height: 20px; background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 10% 100%); }
.balloon::before { content: ""; position: absolute; left: calc(28% + 4px); bottom: -11px; width: 14px; height: 13px; background: var(--paper); z-index: 1;
  clip-path: polygon(0 0, 100% 0, 10% 100%); }

/* theme toggle: moon on Paper, sun on Ink */
.theme-toggle .theme-toggle__light { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle__dark { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle__light { display: block; }
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* ───────────────────────── about: the cursed word ─────────────────────────
   "i use macOS btw": blood-red scrawl with horns, standing in a small fire, that won't hold still.
   Horns and flames are pseudo-elements, so the scratch filter roughens them with the letters.
   Reduced motion: static scratch, still flames. */
.cursed {
  --blood: #8e0710; --blood-dry: #3a0105; --flame-core: #ffd23a; --flame: #ff6a00; --flame-edge: #c81400;
  position: relative; isolation: isolate; display: inline-block; padding: 0 0.14em;
  font-family: var(--font-display); font-style: normal; font-weight: 900; font-size: 1.55em;
  line-height: 1; letter-spacing: 0.02em; color: var(--blood);
  -webkit-text-stroke: 0.025em var(--blood-dry);
  transform: rotate(-4deg) skewX(-10deg); filter: url(#f-cursed);
}
/* horns, one at each end of the word */
.cursed::after {
  content: ""; position: absolute; left: 0.02em; right: 0.02em; top: -0.32em; height: 0.42em;
  background: var(--blood);
  clip-path: polygon(3% 100%, 1% 55%, 2% 20%, 6% 0, 6% 30%, 9% 60%, 14% 100%, 86% 100%, 91% 60%, 94% 30%, 94% 0, 98% 20%, 99% 55%, 97% 100%);
}
/* flames licking up from under the baseline */
.cursed::before {
  --tongue: var(--flame-core) 0 12%, var(--flame) 38%, var(--flame-edge) 62%, transparent 75%;
  content: ""; position: absolute; z-index: -1; left: -0.06em; right: -0.06em; bottom: -0.22em; height: 1em;
  background:
    radial-gradient(8% 70% at 6% 92%, var(--tongue)),
    radial-gradient(7% 95% at 20% 92%, var(--tongue)),
    radial-gradient(8% 60% at 34% 92%, var(--tongue)),
    radial-gradient(7% 100% at 49% 92%, var(--tongue)),
    radial-gradient(8% 72% at 63% 92%, var(--tongue)),
    radial-gradient(7% 98% at 78% 92%, var(--tongue)),
    radial-gradient(8% 66% at 93% 92%, var(--tongue)),
    radial-gradient(60% 22% at 50% 92%, var(--flame) 0 30%, var(--flame-edge) 60%, transparent 80%);
  -webkit-mask: linear-gradient(to top, transparent, #000 12%, #000 50%, transparent);
  mask: linear-gradient(to top, transparent, #000 12%, #000 50%, transparent);
  transform-origin: 50% 100%;
}
.cursed::selection { background: var(--blood); color: var(--paper); }
[data-theme="dark"] .cursed {
  --blood: #e0141f; --blood-dry: #2a0003;
  text-shadow: 0 -0.06em 0.22em color-mix(in oklab, var(--flame) 60%, transparent); /* firelight from below */
}
@media (prefers-reduced-motion: no-preference) {
  .cursed { filter: url(#f-cursed-live); animation: cursed-tremble 0.36s steps(1) infinite; }
  .cursed::before { animation: cursed-burn 0.7s ease-in-out infinite alternate; }
}
@keyframes cursed-burn {
  0%   { transform: scaleY(0.85) skewX(3deg); opacity: 0.85; }
  40%  { transform: scaleY(1.08) skewX(-4deg); opacity: 1; }
  70%  { transform: scaleY(0.95) skewX(2deg); opacity: 0.9; }
  100% { transform: scaleY(1.12) skewX(-2deg); opacity: 1; }
}
@keyframes cursed-tremble {
  0%   { transform: rotate(-4deg) skewX(-10deg) translate(0, 0); }
  25%  { transform: rotate(-3deg) skewX(-12deg) translate(0.6px, -0.8px); }
  50%  { transform: rotate(-5deg) skewX(-9deg) translate(-0.7px, 0.5px); }
  75%  { transform: rotate(-3.5deg) skewX(-11deg) translate(0.4px, 0.9px); }
}