/* Dyadic. One palette and interaction language for every surface. */
/* Type: Geist for the interface and Geist Mono for code (self-hosted, OFL; assets/fonts), Georgia kept for the
   website's editorial headings. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-mono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Dark (the default): the deep navy Dyadic is known by. The names on the left are the semantic tokens every
   surface uses; Light and OLED (below) redefine them, so a component never names a color of its own.
     canvas   --paper          raised  --panel        elevated --panel-strong   sunken --sunken
     text     --ink, --muted (secondary), --dim (tertiary, metadata)
     borders  --line, --line-soft (dividers inside a surface), --line-strong (fields)
     accent   --accent, --accent-hover, --accent-ink (text on it), --accent-surface (selected, tinted)
     status   --ok, --warn, --danger, --info          code --code-*, --syn-*, --diff-*
     depth    --shadow-1..3, --overlay (behind dialogs)   focus --focus   motion --dur-*, --ease-*   shape --r-* */
:root {
  color-scheme: dark;
  --font-ui: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-display: Georgia, "Times New Roman", serif;
  --paper: #0b101b;
  --panel: #111827;
  --panel-strong: #192236;
  --sunken: #080c15;
  --ink: #f5f1e9;
  --muted: #b7bdc9;
  --dim: #8590a5;
  --line: #2d384f;
  --line-soft: #222b3e;
  --line-strong: #3e4b67;
  --signal: #b8a7e9;
  --signal-dark: #4d456b;
  --accent: #b8a7e9;
  --accent-hover: #c9bdf0;
  --accent-muted: #c9bdf0;
  --accent-surface: #171d33;
  --accent-ink: #0b101b;
  --accent-gradient: linear-gradient(90deg, #8dd5da, #b8a7e9 45%, #e8a397 78%, #edc58b);
  --violet: #b8a7e9;
  --indigo: #889fe3;
  --cyan: #8dd5da;
  --amber: #edc58b;
  --orange: var(--amber);
  --green: #94d0af;
  --coral: #e8a397;
  --pink: #dcb0cc;
  --red: #e47778;
  --ok: var(--green);
  --warn: var(--amber);
  --danger: var(--red);
  --info: var(--cyan);
  --focus: var(--cyan);
  --selection: #b8a7e95c;
  --overlay: #03060ec2;
  --scrim: #03060e8c;
  --shadow-1: 0 1px 2px #02050c59;
  --shadow-2: 0 10px 28px #02050c80;
  --shadow-3: 0 22px 65px #03071570;
  --shadow: var(--shadow-3);
  --scroll-thumb: #f5f1e924;
  /* A switch's knob: white and lifted in every theme. */
  --knob: #ffffff;
  --knob-shadow: 0 1px 3px #00000040;
  /* Code: a well a step deeper than the canvas, and syntax in Dyadic's colors. */
  --code-bg: #090e18;
  --code-head: #0e1522;
  --code-line: #212a3d;
  --code-ink: #dfe3ea;
  --code-dim: #8a94a8;
  --syn-keyword: #ef9a8c;
  --syn-string: #8dd5da;
  --syn-function: #c7b8f5;
  --syn-number: #edc58b;
  --syn-type: #9db4f0;
  --syn-attr: #9fd8c4;
  --syn-comment: #7a859a;
  --syn-tag: #ef9a8c;
  --syn-regexp: #dcb0cc;
  --diff-add: #5fca8d;
  --diff-del: #f07a76;
  --diff-mod: #e8b85c;
  --diff-add-bg: #5fca8d1f;
  --diff-del-bg: #f07a761f;
  /* Charts: series in order, then the grid and labels. */
  --chart-1: #b8a7e9; --chart-2: #8dd5da; --chart-3: #edc58b; --chart-4: #e8a397; --chart-5: #94d0af; --chart-6: #889fe3; --chart-7: #dcb0cc;
  --chart-grid: #ffffff12;
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px;
  --dur-micro: 120ms; --dur-fast: 160ms; --dur-pop: 190ms; --dur-drawer: 260ms; --dur-major: 300ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --max: 1280px;
  --gutter: clamp(1.15rem, 4.3vw, 4.4rem);
  --header-h: 4.75rem;
}
html { background: var(--paper); scroll-padding-top: calc(var(--header-h) + 1rem); }
body { background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-feature-settings: "ss01" 0; text-rendering: optimizeLegibility; }
body::before { height: 2px; background: var(--accent-gradient); }
body::after { position: fixed; z-index: -1; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 80% 5%, #8376bc13, transparent 29rem), radial-gradient(circle at 8% 55%, #4f9daa0c, transparent 40rem); }
::selection { background: var(--selection); color: var(--ink); }
:is(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Scrollbars: thin and quiet, in every theme. */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
code, kbd, samp, pre { font-family: var(--font-mono); }
button { cursor: pointer; }
.shell { width: min(100%, calc(var(--max) + 2 * var(--gutter))); }
.site-header { min-height: var(--header-h); gap: clamp(.75rem, 2vw, 2rem); border-color: #8996b533; background: #0b101bde; }
.brand { gap: .72rem; color: var(--ink); font-size: .76rem; letter-spacing: .115em; }
.brand__mark { width: 2.2rem; height: 2.2rem; border-radius: 0; filter: drop-shadow(0 0 10px #e6797844); }
.brand:hover .brand__mark { transform: rotate(45deg) scale(1.04); }
.site-nav { gap: clamp(.7rem, 1.8vw, 1.7rem); color: var(--muted); font-size: .7rem; }
.site-nav a { padding-block: .4rem; }
.site-nav a::after { bottom: 0; height: 2px; background: var(--cyan); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.header-join, .header-actions .header-join { min-height: 42px; padding: .68rem .85rem; border: 1px solid #b8a7e980; border-radius: 2px; background: #b8a7e916; color: var(--ink); font-size: .68rem; }
.header-join span { color: var(--cyan); }
.header-join:hover, .header-actions .header-join:hover { border-color: var(--cyan); background: #8dd5da1c; color: var(--ink); }
.header-actions .header-join span { color: var(--cyan); }
.kicker, .eyebrow, .wn-kicker { color: var(--dim); font-size: .67rem; font-weight: 790; letter-spacing: .16em; text-transform: uppercase; }
.kicker span { background: var(--coral); }
.section-rule { border-color: var(--line); }
.section-heading h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.055em; line-height: 1.03; }
.button, .outline-button, .confirm-button, .quiet-button { border-radius: 2px; transition: transform 250ms var(--ease-out), border-color 250ms, background-color 250ms, box-shadow 250ms; }
.button:hover, .outline-button:hover, .confirm-button:hover { transform: translateY(-3px); }
.button--signal, .confirm-button { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.button--signal:hover, .confirm-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--accent-ink); box-shadow: var(--shadow-2); }
.button--line:hover { border-color: var(--cyan); color: var(--cyan); }
.text-link { border-color: var(--cyan); color: var(--cyan); }
.text-link:hover { color: var(--ink); }
.site-footer { border-color: var(--line); }
.site-footer a:hover { color: var(--cyan); }
.community-status { border-bottom: 1px solid var(--line); background: var(--panel); }
.community-section button, .account-page button, .community-section textarea { border-color: var(--line); background: var(--panel); }
.community-section button:hover, .account-page button:hover { border-color: var(--cyan); }
.account-page { max-width: 960px; padding-top: clamp(2rem, 5vw, 5rem); }
.account-page h1 { font-family: var(--font-display); font-weight: 500; }
.account-page h2 { color: var(--cyan); }
.topic-preferences fieldset { background: var(--panel); }
.topic-preferences input { accent-color: var(--violet); }
.saved-list { border-top: 1px solid var(--line); }
.saved-list > * { border-bottom: 1px solid var(--line); }
.weekly { border-top-color: var(--violet); background: #b8a7e909; box-shadow: inset 2px 0 0 var(--violet); }
.search-form button:hover, .filter-grid button.is-active { background: var(--accent); color: var(--accent-ink); }
.news-head .kicker { color: var(--cyan); }
.story-analysis .unclear { border-color: var(--coral); background: #e8a3970d; }
.staff-page .site-header { border-color: var(--line); }
.wn .button, .wn button { border-radius: 2px; }
.menu-toggle { border-color: var(--line); }
.mobile-menu { border-color: var(--line); background: var(--paper); }
.mobile-menu a:hover { color: var(--cyan); }
/* Shared motion is quiet by default and scales up only for deliberate interactions. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 200ms ease both; }
::view-transition-new(root) { animation: page-in 420ms var(--ease-out) both; }
@keyframes page-out { to { opacity: .4; transform: translateY(-5px); } }
@keyframes page-in { from { opacity: .45; transform: translateY(12px); } }
.motion-enabled [data-reveal] { transition: opacity 700ms var(--ease-out) var(--reveal-delay, 0ms), transform 700ms var(--ease-out) var(--reveal-delay, 0ms); }
.latest-placeholder, .feed-state { position: relative; overflow: hidden; }
.latest-placeholder::after, .feed-state::after { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, #b8a7e90f 50%, transparent 65%); content: ""; animation: loading-sheen 2s ease-in-out infinite; pointer-events: none; }
.latest-list li:not(.latest-placeholder) { animation: row-enter 500ms var(--ease-out) both; }
.latest-list li:nth-child(2) { animation-delay: 80ms; }.latest-list li:nth-child(3) { animation-delay: 160ms; }
@keyframes loading-sheen { from { transform: translateX(-90%); } to { transform: translateX(90%); } }
@keyframes row-enter { from { opacity: 0; transform: translateY(12px); } }
:root[data-theme="light"] {
  /* Light: a calm warm-neutral canvas, layered whites, deep readable ink, Dyadic's hues deepened for contrast. */
  color-scheme: light;
  --paper: #f5f3ee; --panel: #fdfcf9; --panel-strong: #ece9e2; --sunken: #efece5;
  --ink: #1f2433; --muted: #4f5769; --dim: #5f6779;
  --line: #dbd6cc; --line-soft: #e8e4dc; --line-strong: #c2bcb0;
  --signal: #6a568f; --signal-dark: #d5cae5;
  --accent: #6a568f; --accent-hover: #59477d; --accent-muted: #6a568f; --accent-surface: #ece7f6; --accent-ink: #ffffff;
  --violet: #69568f; --indigo: #4c62a4; --cyan: #1f6c78; --amber: #85570f; --green: #2b7150; --coral: #a85450; --pink: #8f557c; --red: #b23c48;
  --accent-gradient: linear-gradient(90deg, #1f6c78, #69568f 50%, #a85450);
  --focus: #1f6c78; --selection: #6a568f33;
  --overlay: #1b1d2647; --scrim: #1b1d262e;
  --shadow-1: 0 1px 2px #2a26201a; --shadow-2: 0 10px 28px #2a262017, 0 2px 6px #2a26200d; --shadow-3: 0 22px 60px #2a26201f;
  --scroll-thumb: #1f243329;
  --code-bg: #f3f0e9; --code-head: #ece8df; --code-line: #ded8cd; --code-ink: #262c3b; --code-dim: #5e6576;
  --syn-keyword: #a8323e; --syn-string: #1b6672; --syn-function: #6a4fb0; --syn-number: #85570f; --syn-type: #2f5aa8;
  --syn-attr: #1d6f5d; --syn-comment: #5e6576; --syn-tag: #a8323e; --syn-regexp: #8a3f73;
  --diff-add: #1a7f37; --diff-del: #c22f3b; --diff-mod: #8a5a00; --diff-add-bg: #1a7f371a; --diff-del-bg: #c22f3b17;
  --chart-1: #6a568f; --chart-2: #1f6c78; --chart-3: #b07a1c; --chart-4: #b5605a; --chart-5: #2b7150; --chart-6: #4c62a4; --chart-7: #8f557c;
  --chart-grid: #1f24331a;
}
:root[data-theme="oled"] {
  /* OLED: true black, near-black surfaces only where hierarchy needs them, no glow; borders carry the structure. */
  color-scheme: dark;
  --paper: #000000; --panel: #0a0a0d; --panel-strong: #141419; --sunken: #000000;
  --ink: #f2efe8; --muted: #a9aeb9; --dim: #7d8392;
  --line: #22232b; --line-soft: #18191f; --line-strong: #33353f;
  --accent-surface: #15121f; --signal-dark: #3a3352;
  --overlay: #000000d1; --scrim: #00000099;
  --shadow-1: none; --shadow-2: 0 0 0 1px #22232b; --shadow-3: 0 0 0 1px #2a2b33; --shadow: var(--shadow-3);
  --scroll-thumb: #ffffff26;
  --code-bg: #050506; --code-head: #0c0c10; --code-line: #1d1e24;
  --chart-grid: #ffffff14;
}
:root[data-theme="light"] body::after { opacity: .3; }
:root[data-theme="oled"] body::after, :root[data-theme="oled"] body::before { display: none; }
:root[data-theme="light"] .site-header { background: #f5f3eeeb; }
:root[data-theme="oled"] .site-header { background: #000000e6; }
:root[data-theme="light"] .mobile-menu { background: var(--paper); }
:root[data-theme="light"] .header-join, :root[data-theme="light"] .header-actions .header-join { color: var(--ink); }
/* A theme change crossfades (theme.js), without the page-to-page motion. */
:root.is-retheming::view-transition-old(root), :root.is-retheming::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: ease; }
:root.is-retheming::view-transition-old(root) { animation-name: retheme-out; }
:root.is-retheming::view-transition-new(root) { animation-name: retheme-in; }
@keyframes retheme-out { to { opacity: 0; } }
@keyframes retheme-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Icons and words are centered by their boxes (align-items: center) with the font's full line, never trimmed to the
   capitals: a trimmed line clipped the tops and tails of letters wherever it was also cut short with an ellipsis
   (2026-10-15), and the trim measures differently from font to font and WebView to WebView. Checked by
   tests/browser/checks.py shot(). */