/* tech-ai / terminal
   A shell session on a phosphor CRT: black glass, scanlines, a slow roll bar and a
   curved vignette; boot output, a typed command, the name as an ANSI-shadow masthead;
   every section is the output of a command (its kicker IS the command line); a tmux
   status line at the bottom carries the section windows. Mono throughout, green
   phosphor, amber when the brand accent is warm; the brand shows in the prompt. */

:root {
  /* phosphor: green; amber when the brand accent's hue is warm (15..65) */
  --ta-warm: calc(clamp(0, (65 - var(--wl-accent-h, 190)) * 999, 1) * clamp(0, (var(--wl-accent-h, 190) - 15) * 999, 1));
  --ta-ph-h: calc(var(--ta-warm) * 38 + (1 - var(--ta-warm)) * 134);
  --ta-ph-l: calc(var(--ta-warm) * 57% + (1 - var(--ta-warm)) * 62%);
  --ta-ph: hsl(var(--ta-ph-h) 100% var(--ta-ph-l));
  --ta-ink: color-mix(in oklab, var(--ta-ph) 78%, #ffffff);
  --ta-dim: color-mix(in oklab, var(--ta-ph) 66%, #000000);
  --ta-faint: color-mix(in oklab, var(--ta-ph) 50%, #000000);
  --ta-glass: color-mix(in oklab, var(--ta-ph) 4%, #010302);
  --ta-hi: var(--wl-accent-on-dark);
  --ta-hi-2: var(--wl-secondary-on-dark);
  --ta-glow: 0 0 1px color-mix(in srgb, var(--ta-ph) 60%, transparent), 0 0 9px color-mix(in srgb, var(--ta-ph) 34%, transparent);
  --ta-glow-hot: 0 0 2px color-mix(in srgb, var(--ta-ph) 80%, transparent), 0 0 18px color-mix(in srgb, var(--ta-ph) 55%, transparent), 0 0 42px color-mix(in srgb, var(--ta-ph) 25%, transparent);

  --v-bg: var(--ta-glass);
  --v-fg: var(--ta-ph);
  --v-soft: var(--ta-dim);
  --v-faint: var(--ta-faint);
  --v-accent: var(--ta-ph);
  --v-accent-text: var(--ta-ph);
  --v-on-accent: #010302;
  --v-secondary: var(--ta-hi-2);
  --v-surface: color-mix(in oklab, var(--ta-ph) 7%, #010302);
  --v-surface-2: color-mix(in oklab, var(--ta-ph) 16%, #010302);
  --v-card-bg: transparent;
  --v-line: color-mix(in srgb, var(--ta-ph) 26%, transparent);
  --v-line-strong: color-mix(in srgb, var(--ta-ph) 58%, transparent);
  --v-border: 1px dashed var(--v-line-strong);
  --v-seg-1: var(--ta-ph);
  --v-seg-2: var(--ta-hi);
  --v-seg-3: var(--ta-dim);
  --v-seg-4: var(--ta-hi-2);
  --v-seg-5: var(--ta-faint);
  --v-seg-6: var(--ta-ink);
  --v-font-mono: "Cascadia Mono", "SF Mono", ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
  --v-font-body: var(--v-font-mono);
  --v-font-display: var(--v-font-mono);
  --v-display-weight: 700;
  --v-display-tracking: -0.01em;
  --v-display-case: none;
  --v-display-lh: 1.1;
  --v-title-size: clamp(1.6rem, 3.2vw, 2.6rem);
  --v-body-size: clamp(0.94rem, 0.2vw + 0.9rem, 1.04rem);
  --v-radius: 0px;
  --v-radius-sm: 0px;
  --v-radius-lg: 0px;
  --v-shadow: none;
  --v-card-pad: clamp(16px, 2vw, 22px);
  --v-maxw: 1180px;
  --v-pad-x: clamp(16px, 4.5vw, 56px);
  --v-sec-gap: clamp(64px, 8vw, 110px);

  /* the skin's voice: every section is a command */
  --wl-label-lore: "cat lore.md";
  --wl-label-features: "ls --long ./capabilities";
  --wl-label-supply: "cat tokenomics.json";
  --wl-label-flow: "trace --steps";
  --wl-label-timeline: "git log --reverse";
  --wl-label-comparison: "plot --bars compare.csv";
  --wl-label-stats: "stat ./figures";
  --wl-label-tweet: "cat quoted-post.txt";
  --wl-label-gallery: "ls ./art";
  --wl-label-facts: "verify --all";
  --wl-label-quotes: "tail mentions.log";
  --wl-label-faq: "man faq";
  --wl-label-access: "./connect";

  --ta-hero-cols: minmax(0, 1.22fr) minmax(0, 0.78fr);
  --ta-hero-areas: "boot boot" "cmd cmd" "mast fig" "kicker fig" "title fig" "abstract fig" "cta fig" "live live";
  --ta-hero-rows: auto auto auto auto auto auto 1fr auto;
  --ta-hero-areas-phone: "boot" "cmd" "mast" "kicker" "title" "abstract" "cta" "fig" "live";
  --ta-hero-align: center;
  --ta-hero-maxw: 1180px;
  --ta-mast-max: 34px;
  --ta-mast-h: 196px;
  --ta-mast-ch: 0.6;
  --ta-fig-ratio: 4 / 3;
  --ta-bar-nav-narrow: flex;
  --ta-features-cols: repeat(3, minmax(0, 1fr));
}

html { background: #000; color-scheme: dark; }
body {
  background:
    radial-gradient(ellipse 120% 85% at 50% 38%, color-mix(in oklab, var(--ta-ph) 8%, #020403) 0%, #010201 72%, #000 100%) fixed;
  color: var(--ta-ph);
  font-family: var(--v-font-mono);
  text-shadow: var(--ta-glow);
  -webkit-font-smoothing: auto;
}
::selection { background: var(--ta-ph); color: #010302; text-shadow: none; }

/* the glass: scanlines, a curved vignette, a slow roll bar */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.3) 0 1px, transparent 1px 3px);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 71; pointer-events: none;
  background: radial-gradient(ellipse 115% 105% at 50% 50%, transparent 64%, rgb(0 0 0 / 0.5) 88%, rgb(0 0 0 / 0.85) 100%);
  box-shadow: inset 0 0 90px rgb(0 0 0 / 0.75), inset 0 0 3px 1px rgb(0 0 0 / 0.9);
}
.ta-app::after {
  content: ""; position: fixed; left: 0; right: 0; top: -34vh; height: 34vh; z-index: 69; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ta-ph) 6%, transparent) 55%, color-mix(in srgb, var(--ta-ph) 11%, transparent) 60%, transparent);
  animation: ta-roll 9s linear infinite;
}
@keyframes ta-roll { to { transform: translateY(170vh); } }
/* the bar is a 30px status line at the bottom; the page keeps clear of it */
.ta-app { --ta-bar-h: 30px; padding-bottom: var(--ta-bar-h); animation: ta-flicker 7s steps(1, end) infinite; }
@keyframes ta-flicker { 0%, 100% { opacity: 1; } 41% { opacity: 0.96; } 42% { opacity: 1; } 77% { opacity: 0.98; } 78% { opacity: 1; } }

/* ---- tmux status line (the chrome bar, pinned to the bottom) */
.ta-bar {
  position: fixed; top: auto; bottom: 0; left: 0; right: 0;
  gap: 0; padding: 0;
  background: var(--ta-ph); color: #010302; text-shadow: none;
  font-size: 0.8rem; line-height: 1;
  box-shadow: 0 0 22px color-mix(in srgb, var(--ta-ph) 45%, transparent);
}
.ta-brand { gap: 0; height: 100%; padding: 0 1.2ch; background: color-mix(in oklab, var(--ta-ph) 70%, #000); color: #010302; font-weight: 700; }
.ta-brand__mark { display: none; }
.ta-brand__name::before { content: "["; }
.ta-brand__name::after { content: "]"; }
.ta-brand__tick { display: none; }
.ta-bar__nav { gap: 0; padding-left: 1ch; counter-reset: ta-win; }
.ta-bar__nav .wl-nav__link { padding: 0 1ch; color: #010302; line-height: var(--ta-bar-h); }
.ta-bar__nav .wl-nav__link::before { counter-increment: ta-win; content: counter(ta-win) ":"; }
.ta-bar__nav .wl-nav__link::after { content: " "; white-space: pre; }
.ta-bar__nav .wl-nav__link.is-active::after { content: "*"; }
.ta-bar__nav .wl-nav__link:hover, .ta-bar__nav .wl-nav__link.is-active { background: #010302; color: var(--ta-ph); }
.ta-bar__net { display: flex; align-items: center; height: 100%; padding: 0 1.2ch; background: color-mix(in oklab, var(--ta-ph) 70%, #000); font-weight: 700; }
.ta-bar__net::before { content: "\""; }
.ta-bar__net::after { content: "\""; }

/* ---- hero: the session */
.ta-stamp, .ta-byline, .ta-toc, .ta-notes { display: none; }
.ta-hero { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(24px, 3vw, 40px); }

.ta-boot { margin-bottom: 14px; font-size: 0.8rem; line-height: 1.55; color: var(--ta-dim); }
.ta-boot__line::before { content: "[  OK  ]"; margin-right: 1.2ch; color: var(--ta-ink); white-space: pre; }

.ta-ps1::before { content: var(--ta-ps1, "~$"); color: var(--ta-hi); text-shadow: 0 0 10px color-mix(in srgb, var(--ta-hi) 45%, transparent); }
.ta-ps1 { margin-right: 1ch; }
.ta-cmd { font-size: 0.98rem; color: var(--ta-ink); }
.ta-cmd__text { display: inline-block; vertical-align: top; }

.ta-mast-wrap { margin: 20px 0 24px; }
.ta-mast {
  position: relative;
  font-family: var(--v-font-mono);
  font-weight: 400;
  color: var(--ta-ink);
  text-shadow: var(--ta-glow-hot);
}
.ta-mast--plain { overflow: visible; padding-top: 0.14em; font-size: clamp(3rem, 8vw, 7rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; }
/* two offset copies of the masthead, cut into slices, for the glitch */
.ta-mast::before, .ta-mast::after {
  content: attr(data-ta-art);
  position: absolute; inset: 0;
  white-space: inherit;
  pointer-events: none;
  opacity: 0;
}
.ta-mast::before { color: var(--ta-hi); text-shadow: none; clip-path: inset(var(--ta-g1, 20%) 0 calc(100% - var(--ta-g1, 20%) - 14%) 0); }
.ta-mast::after { color: var(--ta-hi-2); text-shadow: none; clip-path: inset(var(--ta-g2, 60%) 0 calc(100% - var(--ta-g2, 60%) - 12%) 0); }
.wl-motion-glitch .ta-mast::before, .wl-motion-wild .ta-mast::before { animation: ta-slice-a 5.5s steps(1, end) infinite 2s; }
.wl-motion-glitch .ta-mast::after, .wl-motion-wild .ta-mast::after { animation: ta-slice-b 5.5s steps(1, end) infinite 2.06s; }
@keyframes ta-slice-a { 0%, 100% { opacity: 0; transform: none; } 90% { opacity: 0.9; transform: translateX(-1.4%); } 93% { opacity: 0.9; transform: translateX(2.2%); } 96% { opacity: 0; } }
@keyframes ta-slice-b { 0%, 100% { opacity: 0; transform: none; } 91% { opacity: 0.85; transform: translateX(1.8%); } 94% { opacity: 0.85; transform: translateX(-1%); } 97% { opacity: 0; } }

.ta-kicker { margin-bottom: 14px; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ta-dim); }
.ta-kicker::before { content: "# "; color: var(--ta-faint); }
.ta-title {
  margin-bottom: 18px;
  max-width: 22ch;
  font-size: clamp(2rem, 3.9vw, 3.35rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ta-ink);
  text-shadow: var(--ta-glow-hot);
  text-wrap: balance;
}
[data-ta-len="s"] .ta-title { font-size: clamp(2.2rem, 4.6vw, 3.9rem); }
[data-ta-len="l"] .ta-title { max-width: 32ch; font-size: clamp(1.6rem, 2.8vw, 2.45rem); }
.ta-title__name, .ta-title__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ta-title .wl-w:last-child { background: var(--ta-ph); color: #010302; text-shadow: none; padding: 0 0.12em; box-shadow: 0 0 24px color-mix(in srgb, var(--ta-ph) 55%, transparent); }
.ta-abstract { margin-bottom: 26px; }
.ta-subhead { max-width: 56ch; color: var(--ta-dim); font-size: clamp(0.98rem, 1.15vw, 1.1rem); line-height: 1.62; }
.ta-subhead::before { content: "> "; color: var(--ta-faint); }

.ta-cta { gap: 10px 12px; counter-reset: ta-cmd; }
.ta-cta .wl-btn {
  gap: 0.7ch; padding: 0.7em 1.1em;
  border: 1px solid var(--v-line-strong); border-radius: 0;
  background: transparent; color: var(--ta-ink);
  font-family: var(--v-font-mono); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  text-shadow: var(--ta-glow);
}
.ta-cta .wl-btn::before { counter-increment: ta-cmd; content: "[" counter(ta-cmd) "]"; color: var(--ta-hi); }
.ta-cta .wl-btn .wl-glyph { display: none; }
.ta-cta .wl-btn:hover, .ta-cta .wl-btn:focus-visible { transform: none; background: var(--ta-ph); border-color: var(--ta-ph); color: #010302; text-shadow: none; box-shadow: 0 0 26px color-mix(in srgb, var(--ta-ph) 50%, transparent); }
.ta-cta .wl-btn:hover::before, .ta-cta .wl-btn:focus-visible::before { color: #010302; }
.ta-cta .wl-btn--primary { background: color-mix(in srgb, var(--ta-ph) 14%, transparent); border-color: var(--ta-ph); }
.ta-cta .wl-btn__ca { opacity: 0.8; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* the image, shown inline like a terminal image protocol would */
.ta-fig { align-self: center; padding-top: 10px; }
.ta-fig__frame { padding: 8px; border: 1px solid var(--v-line-strong); box-shadow: 0 0 34px -8px color-mix(in srgb, var(--ta-ph) 45%, transparent), inset 0 0 22px -10px color-mix(in srgb, var(--ta-ph) 50%, transparent); }
.ta-fig__frame::before {
  content: " image "; position: absolute; top: -0.72em; left: 14px; z-index: 2;
  padding: 0 0.5ch; background: #020403; color: var(--ta-dim); font-size: 0.78rem; line-height: 1.4;
}
.ta-fig__media { background: var(--v-surface); }
.ta-fig__media .wl-hero-img { filter: saturate(0.92) contrast(1.06) brightness(0.96); }
.ta-fig__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.26) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.45)),
    linear-gradient(color-mix(in srgb, var(--ta-ph) 12%, transparent), color-mix(in srgb, var(--ta-ph) 4%, transparent));
}
/* now and then the picture tears: two tinted copies, sliced and offset */
.wl-motion-glitch .ta-ghost, .wl-motion-wild .ta-ghost { display: block; opacity: 0; mix-blend-mode: screen; }
.wl-motion-glitch .ta-ghost--a, .wl-motion-wild .ta-ghost--a { filter: sepia(1) saturate(6) hue-rotate(300deg); animation: ta-tear-a 6.5s steps(1, end) 3.2s infinite; }
.wl-motion-glitch .ta-ghost--b, .wl-motion-wild .ta-ghost--b { filter: sepia(1) saturate(6) hue-rotate(130deg); animation: ta-tear-b 6.5s steps(1, end) 3.26s infinite; }
@keyframes ta-tear-a { 0%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } 91% { opacity: 0.75; transform: translateX(-3.5%); clip-path: inset(18% 0 60% 0); } 93% { opacity: 0.75; transform: translateX(2.5%); clip-path: inset(58% 0 22% 0); } 95% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } }
@keyframes ta-tear-b { 0%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } 92% { opacity: 0.7; transform: translateX(3%); clip-path: inset(34% 0 44% 0); } 94% { opacity: 0.7; transform: translateX(-2%); clip-path: inset(70% 0 8% 0); } 96% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } }
.ta-fig__cap { margin-top: 10px; font-size: 0.8rem; line-height: 1.5; color: var(--ta-dim); }
.ta-fig__cap:has(.ta-fig__alt:empty) { display: none; }
.ta-fig__label::before { content: "# "; color: var(--ta-faint); }

.ta-live { margin-top: 30px; font-size: 0.98rem; }
.ta-cursor { display: inline-block; width: 0.62em; height: 1.15em; vertical-align: -0.2em; background: var(--ta-ph); box-shadow: 0 0 12px color-mix(in srgb, var(--ta-ph) 70%, transparent); animation: ta-blink 1.06s steps(1, end) 1.6s infinite; }
@keyframes ta-blink { 50% { opacity: 0; } }

/* boot playback (only under .ta-play: app.js sets it when motion is allowed) */
.ta-play .ta-boot__line { animation: ta-show 1ms linear backwards; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
.ta-play .ta-cmd { animation: ta-show 1ms linear 0.42s backwards; }
.ta-play .ta-cmd__text { animation: ta-type calc(var(--n, 16) * 22ms) steps(var(--n, 16), end) 0.48s backwards; }
.ta-play .ta-mast { animation: ta-print 0.36s steps(var(--ta-mast-rows, 6), end) 0.9s backwards; }
.ta-play .ta-kicker, .ta-play .ta-title, .ta-play .ta-abstract, .ta-play .ta-cta, .ta-play .ta-fig, .ta-play .ta-live { animation: ta-glitch-in 0.32s steps(4, end) 1.18s backwards; }
.ta-play .ta-fig { animation-delay: 1.24s; }
.ta-play .ta-live { animation-delay: 1.32s; }
@keyframes ta-show { from { visibility: hidden; } }
@keyframes ta-type { from { clip-path: inset(0 100% 0 0); } }
@keyframes ta-print { from { clip-path: inset(0 0 100% 0); } }
@keyframes ta-glitch-in {
  0% { opacity: 0; transform: translateX(-6px); clip-path: inset(0 0 70% 0); }
  50% { opacity: 1; transform: translateX(4px); clip-path: inset(40% 0 0 0); }
  75% { transform: translateX(-2px); clip-path: inset(0 0 20% 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }
}

/* ---- the facts tape */
.ta-tape { padding: 11px 0; border-block: 1px dashed var(--v-line); font-size: 0.82rem; color: var(--ta-dim); }
.ta-tape .wl-marquee__item::before { content: "[  OK  ] "; color: var(--ta-ink); white-space: pre; }

/* ---- sections: each one is a command and its output */
.wl-sec__inner { max-width: var(--v-maxw); }
.wl-sec__head { margin-bottom: clamp(22px, 3vw, 34px); max-width: none; }
.wl-kicker {
  display: block;
  margin: 0 0 18px;
  font-size: 0.98rem; letter-spacing: 0; text-transform: none;
  color: var(--ta-ink);
}
.wl-sec__head { position: relative; }
.wl-sec__head > * { position: relative; z-index: 1; }
.wl-sec__head[data-ta-ord]::after {
  content: attr(data-ta-ord);
  position: absolute; right: 0; top: -26px; z-index: 0;
  white-space: pre; line-height: normal; font-size: clamp(12px, 1.6vw, 20px);
  color: var(--ta-ph); opacity: 0.1; text-shadow: none; pointer-events: none;
}
.wl-kicker::before { content: var(--ta-ps1, "~$"); margin-right: 1ch; color: var(--ta-hi); text-shadow: 0 0 10px color-mix(in srgb, var(--ta-hi) 45%, transparent); }
.wl-kicker .wl-ord { display: none; }
.wl-kicker__label { display: inline-block; vertical-align: top; }
.ta-play .wl-in .wl-kicker__label { animation: ta-type 0.5s steps(18, end) 0.12s backwards; }
.wl-sec__title {
  display: inline-block;
  padding-bottom: 0.22em;
  border-bottom: 3px double var(--v-line-strong);
  color: var(--ta-ink);
  text-shadow: var(--ta-glow-hot);
}

/* lore */
.wl-lore { max-width: 74ch; }
.wl-lore__lead { font-size: clamp(1.12rem, 1.6vw, 1.36rem); line-height: 1.55; font-weight: 400; color: var(--ta-ink); }
.wl-lore__p { color: var(--ta-dim); max-width: 74ch; }

/* capabilities: an ls --long listing with the icons inline */
.wl-features { gap: clamp(18px, 2.4vw, 32px); counter-reset: ta-cap; }
.wl-feature { padding: 18px 0 0; border: 0; border-top: 1px dashed var(--v-line-strong); background: none; }
.wl-feature::before { content: "-r-xr-xr-x"; display: block; margin-bottom: 12px; font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ta-faint); }
.wl-feature:hover { transform: none; }
.wl-feature .wl-ord { top: 20px; right: 0; color: var(--ta-faint); font-size: 0.78rem; }
.wl-feature .wl-ord::before { content: "#"; }
.wl-feature__icon { position: relative; width: 104px; height: 104px; margin-bottom: 18px; border-radius: 0; border: 1px solid var(--v-line-strong); background: var(--v-surface); color: var(--ta-ph); box-shadow: 0 0 22px -6px color-mix(in srgb, var(--ta-ph) 40%, transparent); }
.wl-feature__icon--img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 3px), linear-gradient(color-mix(in srgb, var(--ta-ph) 16%, transparent), transparent); }
.wl-feature__icon img { filter: saturate(0.85) contrast(1.05); }
.wl-feature__title { font-size: 1.08rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ta-ink); }
.wl-feature__title::before { content: "> "; color: var(--ta-hi); }
.wl-feature__text { color: var(--ta-dim); font-size: 0.94rem; }
.wl-in .wl-feature { animation-timing-function: steps(5, end); }

/* infographics: plots in block characters */
.wl-infographic { gap: clamp(26px, 3.4vw, 40px); }
.wl-caption { color: var(--ta-dim); font-size: 0.86rem; }
.wl-caption::before { content: "# "; color: var(--ta-faint); }
.wl-bars { gap: 14px; }
.wl-bar { gap: 6px 2ch; }
.wl-bar__label { font-weight: 400; color: var(--ta-ink); }
.wl-bar__track {
  height: 18px; border-radius: 0; overflow: visible;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 11px);
  mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 11px);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ta-ph) 55%, transparent));
}
.wl-bar .wl-bar__bg { fill: color-mix(in srgb, var(--ta-ph) 14%, transparent); }
.wl-bar .wl-bar__fill { fill: var(--ta-ph); stroke: none; }
.wl-in .wl-bar__fill { animation-timing-function: steps(22, end); }
.wl-bar__value { font-family: var(--v-font-mono); font-size: 1.1rem; font-weight: 700; color: var(--ta-ink); }
.wl-bar[data-ta-src]::after { content: "# " attr(data-ta-src); grid-column: 1 / -1; font-size: 0.74rem; color: var(--ta-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 761px) {
  .wl-bar { grid-template-columns: minmax(120px, 18ch) minmax(0, 1fr) 9ch minmax(0, 25ch); }
  .wl-bar[data-ta-src]::after { grid-column: auto; }
  .wl-bar__value { text-align: right; }
}
.wl-table-wrap { border: 1px solid var(--v-line-strong); border-radius: 0; }
.wl-table th, .wl-table td { padding: 12px 18px; border-bottom: 1px dashed var(--v-line); }
.wl-table th + th, .wl-table td, .wl-table tbody th + td { border-left: 1px dashed var(--v-line); }
.wl-table thead th { color: var(--ta-ink); font-size: 0.78rem; letter-spacing: 0.08em; background: color-mix(in srgb, var(--ta-ph) 8%, transparent); }
.wl-table tbody th { font-weight: 400; color: var(--ta-ink); }
.wl-cell-bool .wl-glyph { display: none; }
.wl-cell-yes::before { content: "[x]"; color: var(--ta-ink); }
.wl-cell-no::before { content: "[ ]"; color: var(--ta-faint); }
.wl-stats { gap: 0; background: none; border: 1px dashed var(--v-line-strong); border-radius: 0; }
.wl-stat { display: grid; grid-template-rows: auto auto auto; align-content: start; gap: 6px; padding: 18px 20px; background: none; border-right: 1px dashed var(--v-line); }
.wl-stat__label { order: 1; color: var(--ta-dim); letter-spacing: 0.1em; }
.wl-stat__value { order: 2; font-family: var(--v-font-mono); font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ta-ink); text-shadow: var(--ta-glow-hot); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.wl-stat[data-ta-src]::after { order: 3; content: "# " attr(data-ta-src); font-size: 0.72rem; color: var(--ta-faint); overflow-wrap: anywhere; }
.wl-donut__track { stroke: color-mix(in srgb, var(--ta-ph) 10%, transparent); }
.wl-donut__svg { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ta-ph) 40%, transparent)); }
.wl-donut__ticks line { stroke: var(--v-line-strong); }
.wl-donut__value, .wl-ring__value { color: var(--ta-ink); text-shadow: var(--ta-glow-hot); font-family: var(--v-font-mono); }
.wl-legend__item { border-bottom: 1px dashed var(--v-line); }
.wl-legend__swatch { border-radius: 0; }
.wl-legend__item[data-ta-src]::after { content: "# " attr(data-ta-src); grid-column: 2 / -1; font-size: 0.72rem; color: var(--ta-faint); }
.wl-ring__track { stroke: color-mix(in srgb, var(--ta-ph) 12%, transparent); }
.wl-ring__fill { stroke-linecap: butt; filter: drop-shadow(0 0 6px var(--ta-ph)); }
.wl-ring[data-ta-src]::after { content: "# " attr(data-ta-src); position: absolute; left: 0; right: 0; bottom: -1.7em; text-align: center; font-size: 0.72rem; color: var(--ta-faint); }
.wl-donut__center[data-ta-src]::after { content: "# " attr(data-ta-src); margin-top: 0.4em; font-size: 0.68rem; color: var(--ta-faint); text-shadow: none; }

/* flow: a pipeline of dashed boxes */
.wl-node__card { padding: 18px 18px 20px; border: 1px solid var(--v-line-strong); background: color-mix(in srgb, var(--ta-ph) 4%, transparent); }
.wl-node__card .wl-ord { display: inline-block; width: auto; height: auto; padding: 1px 0.7ch; margin-bottom: 14px; border-radius: 0; background: var(--ta-ph); color: #010302; text-shadow: none; font-size: 0.78rem; }
.wl-node__card .wl-ord::before { content: "step "; }
.wl-node__title { font-family: var(--v-font-mono); font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ta-ink); }
.wl-node__text { color: var(--ta-dim); font-size: 0.9rem; }
.wl-edge__line, .wl-edge__head { stroke: var(--ta-ph); filter: drop-shadow(0 0 4px var(--ta-ph)); }

/* timeline: git log */
.wl-milestones { gap: 24px; }
.wl-milestones::before { left: 0.45ch; width: 0; border-left: 2px dotted var(--v-line-strong); background: none; }
.wl-ms { grid-template-columns: 2ch 1fr; gap: 2ch; }
.wl-ms__dot { display: none; }
.wl-ms::before { content: "*"; position: relative; z-index: 1; font-weight: 700; line-height: 1.35; color: var(--ta-ink); background: #020403; text-align: center; }
.wl-ms__when { color: var(--ta-hi-2); text-shadow: 0 0 8px color-mix(in srgb, var(--ta-hi-2) 35%, transparent); letter-spacing: 0.04em; text-transform: none; font-size: 0.82rem; }
.wl-ms__title { font-family: var(--v-font-mono); font-size: 1.12rem; color: var(--ta-ink); }
.wl-ms__text { color: var(--ta-dim); }

/* facts: a verification run */
.wl-facts { gap: 6px; }
.wl-fact { grid-template-columns: auto 1fr; gap: 1.4ch; padding: 6px 0; border: 0; background: none; font-size: 1rem; }
.wl-fact__mark { width: auto; height: auto; border-radius: 0; background: none; color: var(--ta-ink); }
.wl-fact__mark .wl-glyph { display: none; }
.wl-fact__mark::before { content: "[  OK  ]"; white-space: pre; }
.wl-fact__text { color: var(--ta-ph); }

/* faq: a man page */
.wl-faq { gap: 0; border-top: 1px dashed var(--v-line); }
.wl-qa { border: 0; border-bottom: 1px dashed var(--v-line); border-radius: 0; background: none; }
.wl-qa__q { padding: 16px 0; font-size: 1.02rem; font-weight: 700; color: var(--ta-ink); }
.wl-qa__q > span:first-child::before { content: "? "; color: var(--ta-hi); }
.wl-qa__sign { width: auto; height: auto; color: var(--ta-dim); font-weight: 400; }
.wl-qa__sign::before { content: "[+]"; position: static; height: auto; margin: 0; background: none; }
.wl-qa__sign::after { display: none; }
.wl-qa[open] .wl-qa__sign::before { content: "[-]"; }
.wl-qa__a { padding: 0 0 18px 2ch; color: var(--ta-dim); max-width: 80ch; }

/* quotes, the post, the gallery */
.wl-quote { padding: 16px 0 0 3ch; border: 0; border-top: 1px dashed var(--v-line); background: none; }
.wl-quote::before { content: ">"; top: 16px; left: 0.4ch; font-family: var(--v-font-mono); font-size: 1.04rem; line-height: 1.45; color: var(--ta-hi); }
.wl-quote__text { font-size: 1.04rem; color: var(--ta-ink); }
.wl-quote__who { color: var(--ta-dim); }
.wl-quote__who::before { content: "-- "; }
.wl-post { border: 1px solid var(--v-line-strong); border-radius: 0; background: color-mix(in srgb, var(--ta-ph) 4%, transparent); box-shadow: 0 0 34px -12px color-mix(in srgb, var(--ta-ph) 45%, transparent); }
.wl-post__avatar { border-radius: 0; filter: saturate(0.85); }
.wl-post__avatar--initial { background: var(--ta-ph); color: #010302; text-shadow: none; }
.wl-post__text { color: var(--ta-ink); font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.wl-post__meta { border-top: 1px dashed var(--v-line); color: var(--ta-dim); }
.wl-post__link { color: var(--ta-hi); }
.wl-post__media { border-radius: 0; }
.wl-shot { border: 1px solid var(--v-line-strong); border-radius: 0; background: var(--v-surface); }
.wl-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.24) 0 1px, transparent 1px 3px); }
.wl-shot__caption { z-index: 1; border-radius: 0; background: rgb(1 3 2 / 0.86); color: var(--ta-ph); font-size: 0.8rem; backdrop-filter: none; }
.wl-shot__caption::before { content: "# "; color: var(--ta-faint); }

/* access: connect */
.wl-access__net { color: var(--ta-dim); letter-spacing: 0.06em; }
.wl-access__net::before { content: "# "; color: var(--ta-faint); }
.wl-ca { gap: 2ch; padding: 10px 10px 10px 18px; border: 1px solid var(--v-line-strong); border-radius: 0; background: color-mix(in srgb, var(--ta-ph) 5%, transparent); box-shadow: 0 0 30px -12px color-mix(in srgb, var(--ta-ph) 50%, transparent); }
.wl-ca__label { color: var(--ta-dim); }
.wl-ca__label::after { content: "="; margin-left: 0.4ch; color: var(--ta-faint); }
.wl-ca__value { color: var(--ta-ink); font-size: clamp(0.8rem, 1.4vw, 1rem); }
.wl-copy { gap: 1ch; padding: 10px 16px; border-radius: 0; background: var(--ta-ph); color: #010302; text-shadow: none; font-family: var(--v-font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }
.wl-copy:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--ta-ph) 60%, transparent); }
.wl-copy .wl-glyph { display: none; }
.wl-copy__label::before { content: "[ "; }
.wl-copy__label::after { content: " ]"; }
.wl-links { gap: 10px; }
.wl-link { gap: 1ch; padding: 11px 16px; border: 1px solid var(--v-line-strong); border-radius: 0; background: none; color: var(--ta-ink); font-size: 0.88rem; font-weight: 400; text-transform: lowercase; }
.wl-link::after { content: "\2197"; color: var(--ta-dim); }
.wl-link .wl-glyph { display: none; }
.wl-link::before { content: "open"; color: var(--ta-hi); }
.wl-link:hover { transform: none; border-color: var(--ta-ph); background: var(--ta-ph); color: #010302; text-shadow: none; }
.wl-link:hover::before, .wl-link:hover::after { color: #010302; }

/* ---- CITATION.bib and exit */
.ta-cite__head { margin-bottom: 14px; font-size: 0.98rem; color: var(--ta-ink); }
.ta-cite__head::before { content: var(--ta-ps1, "~$"); margin-right: 1ch; color: var(--ta-hi); }
.ta-cite__label { display: none; }
.ta-cite__head::after { content: "cat CITATION.bib"; }
.ta-cite__bib { margin-bottom: 0; padding: 0; font-family: var(--v-font-mono); font-size: 0.9rem; line-height: 1.6; color: var(--ta-dim); }
.ta-foot { padding-top: 8px; border-top: 1px dashed var(--v-line); color: var(--ta-dim); font-size: 0.84rem; }
.ta-foot::before { content: var(--ta-ps1, "~$") " exit"; display: block; max-width: var(--v-maxw); margin: 18px auto 14px; color: var(--ta-ink); }
.wl-foot { max-width: var(--v-maxw); margin: 0 auto; }
.wl-foot__name { font-family: var(--v-font-mono); font-size: 0.95rem; color: var(--ta-ink); }
.wl-foot__net, .wl-foot__nfa { color: var(--ta-faint); }
.wl-foot .wl-link { padding: 6px 10px; font-size: 0.78rem; }

@media (max-width: 760px) {
  .ta-hero { padding-top: 22px; }
  .ta-mast-wrap { margin: 16px 0 18px; }
  .ta-title { font-size: clamp(1.7rem, 8.4vw, 2.3rem); }
  .ta-fig { margin-top: 26px; }
  .ta-bar { font-size: 0.74rem; }
  .ta-bar__net { display: none; }
  .wl-stat { border-right: 0; border-bottom: 1px dashed var(--v-line); }
  .wl-node__card { padding: 16px; }
  .wl-sec__head[data-ta-ord]::after { display: none; }
  .wl-feature { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-content: start; }
  .wl-feature::before { display: none; }
  .wl-feature__icon { grid-row: 1 / span 2; width: 76px; height: 76px; margin: 0; }
  .wl-feature .wl-ord { top: 18px; }
}