/* theme-faces.css — what each theme is besides its colours: type faces,
   UI case, corners, the primary button, the day numeral, the ground and
   one detail. Loaded after app.css. Colours stay in app.css's theme blocks.
   Fonts arrive through base.html's THEME_FONTS link (one per theme).
   Why and the picks: docs/the-face-and-the-ground.md

   Tokens read by app.css:
     --font-display / --font-body / --font-mono (buttons, labels, nav)
     --font-data   times and counts (defaults to --font-mono)
     --ui-case / --ui-caps / --ui-track   the 136 formerly-uppercase rules
     --head-weight / --head-var           h1-h3 (case/track/style set below)
     --radius-sm/md/lg
   The die, check button and seal never read --radius: marks stay square. */

/* Shared: grain tile (Vellum's own, alpha-scaled per theme by opacity). */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 .22 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Rounded themes drop the HUD corner brackets; Arcade and Hacker keep them,
   Forge turns them into rivets. */
:is(html[data-theme="gasp"], html[data-theme="vellum"], html[data-theme="paper"],
    html[data-theme="frost"], html[data-theme="bloom"], html[data-theme="prism"],
    html[data-theme="obsidian"], html[data-theme="tide"], html[data-theme="ember"],
    html[data-theme="noir"], html[data-theme="void"], html[data-theme="synthwave"])
  .habit-card::before,
:is(html[data-theme="gasp"], html[data-theme="vellum"], html[data-theme="paper"],
    html[data-theme="frost"], html[data-theme="bloom"], html[data-theme="prism"],
    html[data-theme="obsidian"], html[data-theme="tide"], html[data-theme="ember"],
    html[data-theme="noir"], html[data-theme="void"], html[data-theme="synthwave"])
  .habit-card::after { content: none; }

/* ======================================================= I · GASP ===== */
/* Option C, editorial (switched from A 2026-10-07): a fashion serif over
   Plus Jakarta Sans, small wide-tracked capitals for labels like a
   magazine kicker. */
html[data-theme="gasp"] {
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "Plus Jakarta Sans", system-ui, sans-serif;
  --ui-track: 1.3;
  --head-weight: 400;
  --radius-sm: 8px; --radius-md: 8px; --radius-lg: 12px;
}
html[data-theme="gasp"] .habit-card { border-radius: 8px; }
html[data-theme="gasp"] .btn-primary,
html[data-theme="gasp"] .btn-primary:hover {
  border-radius: 999px; background: var(--accent-glow); border-color: var(--accent-glow); color: var(--surface);
}
html[data-theme="gasp"] .dn-numeral { font-weight: 400; }
html[data-theme="gasp"] body { background-image: var(--grain); }
/* An emphasised word in a heading turns fuchsia italic. */
:where(html[data-theme="gasp"]) :is(h1, h2, h3) em { font-style: italic; color: var(--accent-glow); }

/* ===================================================== II · VELLUM ===== */
html[data-theme="vellum"] {
  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --ui-case: none; --ui-caps: all-small-caps; --ui-track: .7;
  --head-weight: 500; --head-var: "opsz" 96;
}
html[data-theme="vellum"] .btn-primary,
html[data-theme="vellum"] .btn-primary:hover { background: var(--accent-glow); border-color: var(--accent-glow); color: var(--surface); }
html[data-theme="vellum"] .day-plate { border: 3px double color-mix(in srgb, var(--accent-glow) 55%, transparent); }

/* ====================================================== III · PAPER ===== */
html[data-theme="paper"] {
  --font-display: "Literata", Georgia, serif;
  --font-body: "Literata", Georgia, serif;
  --font-mono: "Literata", Georgia, serif;
  --font-data: "IBM Plex Mono", ui-monospace, monospace;
  --ui-case: none; --ui-caps: all-small-caps; --ui-track: .5;
  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px;
}
html[data-theme="paper"] .habit-card { border-radius: 3px; }
html[data-theme="paper"] .btn-primary {
  border-width: 0 0 3px; border-radius: 0; background: transparent; color: var(--ink);
  padding-inline: 2px; border-color: var(--accent-glow);
}
html[data-theme="paper"] .btn-primary:hover { background: transparent; color: var(--accent-glow); }
html[data-theme="paper"] .dn-out { -webkit-text-stroke-color: color-mix(in srgb, var(--accent-glow) 50%, transparent); }
html[data-theme="paper"] .dn-in { color: var(--accent-glow); }
html[data-theme="paper"] .day-plate { border: 3px double color-mix(in srgb, var(--accent-glow) 45%, transparent); }
html[data-theme="paper"] body { background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 4px); }

/* ====================================================== IV · FROST ===== */
html[data-theme="frost"] {
  --font-display: "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist", system-ui, sans-serif;
  --font-data: "Geist Mono", ui-monospace, monospace;
  --ui-case: none; --ui-track: .1;
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px;
}
:where(html[data-theme="frost"]) :is(h1, h2, h3) { letter-spacing: -.03em; }
html[data-theme="frost"] .habit-card { border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(30,41,59,.06); }
html[data-theme="frost"] .btn-primary {
  background: var(--accent-glow); border-color: var(--accent-glow); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 12px color-mix(in srgb, var(--accent-glow) 25%, transparent);
}
html[data-theme="frost"] .btn-primary:hover { background: var(--accent-glow); color: #fff; }
/* Today's outlined numeral, in indigo (his pick: "the Now number, blue border"). */
html[data-theme="frost"] .dn-out { -webkit-text-stroke: 1.5px var(--accent-glow); }
html[data-theme="frost"] .dn-in { color: var(--accent-glow); }
html[data-theme="frost"] body { background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.3px); background-size: 20px 20px; }

/* ======================================================= V · BLOOM ===== */
html[data-theme="bloom"] {
  --font-display: "Young Serif", Georgia, serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --font-mono: "Nunito Sans", system-ui, sans-serif;
  --ui-case: none; --ui-track: .1;
  --head-weight: 400;
  --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px;
}
html[data-theme="bloom"] .habit-card { border-radius: 16px; }
html[data-theme="bloom"] .btn-primary {
  border-radius: 999px; background: var(--accent-glow); border-color: var(--accent-glow); color: #fff;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent-glow) 55%, #000);
}
html[data-theme="bloom"] .btn-primary:hover { background: var(--accent-glow); color: #fff; }
html[data-theme="bloom"] .btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-glow) 55%, #000); }
html[data-theme="bloom"] .dn-numeral { font-weight: 400; }
html[data-theme="bloom"] .dn-out { -webkit-text-stroke-color: color-mix(in srgb, var(--accent-glow) 45%, transparent); }
html[data-theme="bloom"] .dn-in { color: var(--accent-glow); }
html[data-theme="bloom"] body::after { opacity: 1; background: radial-gradient(75% 45% at 100% 0, #fff1b8, transparent 70%); }

/* ====================================================== VI · PRISM ===== */
html[data-theme="prism"] {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Space Grotesk", system-ui, sans-serif;
  --font-data: "Space Mono", ui-monospace, monospace;
  --ui-case: none; --ui-track: .1;
  --head-weight: 700;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
}
:where(html[data-theme="prism"]) :is(h1, h2, h3) { text-transform: lowercase; letter-spacing: -.03em; }
html[data-theme="prism"] .habit-card { border-radius: 8px; }
html[data-theme="prism"] .btn-primary,
html[data-theme="prism"] .btn-primary:hover {
  background: var(--surface); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--accent-glow);
}
html[data-theme="prism"] .btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--accent-glow); }
html[data-theme="prism"] .dn-out {
  -webkit-text-stroke-color: var(--ink);
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--accent-glow) 38%, transparent) 55% 92%, transparent 92%);
}
html[data-theme="prism"] .dn-in { color: var(--ink); text-shadow: -2px 0 var(--accent-glow-2), 2px 0 var(--accent-glow); }
html[data-theme="prism"] body { background-image: radial-gradient(color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1.3px); background-size: 20px 20px; }

/* =================================================== VII · OBSIDIAN ===== */
html[data-theme="obsidian"] {
  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --ui-case: none; --ui-caps: all-small-caps; --ui-track: .7;
  --head-weight: 500; --head-var: "opsz" 96;
  --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px;
}
html[data-theme="obsidian"] .habit-card { border-radius: 2px; }
html[data-theme="obsidian"] .btn-primary { border-color: color-mix(in srgb, var(--accent-glow) 55%, transparent); color: var(--accent-glow); }
html[data-theme="obsidian"] .btn-primary:hover { background: color-mix(in srgb, var(--accent-glow) 16%, transparent); color: var(--accent-glow); }
html[data-theme="obsidian"] .dn-out { -webkit-text-stroke-color: color-mix(in srgb, var(--accent-glow) 75%, transparent); }
html[data-theme="obsidian"] .dn-in { color: var(--accent-glow); }
html[data-theme="obsidian"] .day-plate { border: 3px double color-mix(in srgb, var(--accent-glow) 50%, transparent); }
html[data-theme="obsidian"] body { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent-glow) 6%, transparent) 0 1px, transparent 1px 6px); }

/* ====================================================== VIII · TIDE ===== */
html[data-theme="tide"] {
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Hanken Grotesk", system-ui, sans-serif;
  --ui-case: none; --ui-track: .15;
  --head-weight: 300; --head-var: "opsz" 72;
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 22px;
}
:where(html[data-theme="tide"]) :is(h1, h2, h3) { font-style: italic; }
html[data-theme="tide"] .habit-card { border-radius: 14px; }
html[data-theme="tide"] .btn-primary { border-radius: 999px; border-color: color-mix(in srgb, var(--accent-glow) 50%, transparent); color: var(--accent-glow); }
html[data-theme="tide"] .btn-primary:hover { background: color-mix(in srgb, var(--accent-glow) 14%, transparent); color: var(--accent-glow); }
html[data-theme="tide"] .dn-numeral { font-weight: 300; font-style: italic; }
html[data-theme="tide"] .dn-in { animation: tide-breathe 6s ease-in-out infinite; }
@keyframes tide-breathe { 50% { opacity: .55; } }
html[data-theme="tide"] body::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0 80 C70 55 130 105 200 80 S330 55 400 80 V160 H0Z' fill='%234dd0c4' fill-opacity='.08'/%3E%3Cpath d='M0 108 C70 88 130 128 200 108 S330 88 400 108 V160 H0Z' fill='%234dd0c4' fill-opacity='.07'/%3E%3C/svg%3E") 0 100% / 100% 160px no-repeat,
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--series-1) 14%, transparent), transparent 60%);
}

/* ======================================================= IX · EMBER ===== */
html[data-theme="ember"] {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Sans", system-ui, sans-serif;
  --font-data: "DM Mono", ui-monospace, monospace;
  --ui-case: none; --ui-track: .1;
  --head-weight: 800; --head-var: "opsz" 96;
  --radius-sm: 12px; --radius-md: 18px; --radius-lg: 28px;
}
:where(html[data-theme="ember"]) :is(h1, h2, h3) { letter-spacing: -.03em; }
html[data-theme="ember"] .habit-card { border-radius: 18px; }
html[data-theme="ember"] .btn-primary,
html[data-theme="ember"] .btn-primary:hover {
  border-radius: 999px; border-color: transparent; color: var(--page);
  background: linear-gradient(90deg, var(--accent-glow), var(--accent-glow-2));
}
html[data-theme="ember"] .dn-numeral { font-weight: 800; }
html[data-theme="ember"] .dn-in { color: var(--accent-glow); }
html[data-theme="ember"] .dn-bar { background: linear-gradient(90deg, #c2410c, var(--accent-glow), var(--accent-glow-2)); border-radius: 99px; }
html[data-theme="ember"] body::after {
  background:
    radial-gradient(120% 50% at 50% 112%, color-mix(in srgb, var(--series-1) 30%, transparent), transparent 62%),
    repeating-conic-gradient(from 270deg at 50% 108%, color-mix(in srgb, var(--series-1) 5%, transparent) 0 3deg, transparent 3deg 9deg);
}

/* ======================================================== X · FORGE ===== */
html[data-theme="forge"] {
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, monospace;
  --ui-track: 1.1;
  --head-weight: 700;
  --radius-sm: 0; --radius-md: 2px; --radius-lg: 2px;
}
:where(html[data-theme="forge"]) :is(h1, h2, h3) { text-transform: uppercase; letter-spacing: .04em; }
html[data-theme="forge"] .habit-card { border-radius: 2px; }
html[data-theme="forge"] .btn-primary,
html[data-theme="forge"] .btn-primary:hover {
  background: var(--accent-glow); border-color: var(--accent-glow); color: var(--page);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
html[data-theme="forge"] .btn-primary:focus-visible { outline-offset: -4px; outline-color: var(--page); }
html[data-theme="forge"] .dn-in { color: var(--accent-glow); }
/* Rivets in two corners, a chamfered corner and one hazard stripe on the day plate. */
html[data-theme="forge"] .habit-card::before,
html[data-theme="forge"] .habit-card::after {
  width: 4px; height: 4px; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}
html[data-theme="forge"] .habit-card::before { top: 7px; left: 7px; }
html[data-theme="forge"] .habit-card::after { bottom: 7px; right: 7px; }
html[data-theme="forge"] .day-plate {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  background-image: repeating-linear-gradient(-45deg, var(--accent-glow) 0 6px, transparent 6px 12px);
  background-size: 100% 4px; background-repeat: no-repeat;
}
html[data-theme="forge"] body { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); }

/* ========================================================= XI · NOIR ===== */
html[data-theme="noir"] {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Inter", system-ui, sans-serif;
  --ui-case: none; --ui-track: .15;
  --head-weight: 600; --head-var: "opsz" 144;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
}
:where(html[data-theme="noir"]) :is(h1, h2, h3) { letter-spacing: -.02em; }
html[data-theme="noir"] .habit-card { border-radius: 6px; }
html[data-theme="noir"] .btn-primary,
html[data-theme="noir"] .btn-primary:hover { background: var(--accent-glow); border-color: var(--accent-glow); color: var(--page); }
html[data-theme="noir"] .dn-numeral { font-weight: 500; font-variation-settings: "opsz" 144; }
html[data-theme="noir"] .dn-in { color: var(--accent-glow); }
/* Letterbox: a teal double rule under the page title. */
:where(html[data-theme="noir"]) h1:where(:not(.widget-header h1)) {
  padding-bottom: 10px;
  background:
    linear-gradient(var(--accent-glow), var(--accent-glow)) 0 100% / 100% 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--accent-glow) 40%, transparent), color-mix(in srgb, var(--accent-glow) 40%, transparent)) 0 calc(100% - 4px) / 100% 1px no-repeat;
}
html[data-theme="noir"] body { background-image: var(--grain), radial-gradient(circle at 12% 0, color-mix(in srgb, var(--accent-glow) 12%, transparent), transparent 52%); background-attachment: fixed; }

/* ======================================================== XII · VOID ===== */
html[data-theme="void"] {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --font-mono: "Source Sans 3", system-ui, sans-serif;
  --ui-case: none; --ui-track: .15;
  --head-weight: 500;
}
/* Cormorant's default figures are old-style; counts and rank digits need lining. */
html[data-theme="void"] body { font-feature-settings: "lnum"; }
html[data-theme="void"] .btn-primary { border-color: color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink); }
html[data-theme="void"] .btn-primary:hover { background: var(--ink); color: var(--page); }
html[data-theme="void"] .dn-numeral { font-weight: 400; }
html[data-theme="void"] body::after { opacity: 0; }
/* A kept habit is struck through, nothing more. */
html[data-theme="void"] .home-habit-row:has(.check-btn.done) .home-habit-row-name { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--ink-muted); }

/* ====================================================== XIII · ARCADE ===== */
html[data-theme="arcade"] {
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --head-weight: 800;
  --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px;
}
:where(html[data-theme="arcade"]) :is(h1, h2, h3) { text-transform: uppercase; letter-spacing: .02em; }
html[data-theme="arcade"] .btn-primary,
html[data-theme="arcade"] .btn-primary:hover {
  background: var(--accent-glow); border-color: var(--accent-glow); color: var(--page);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent-glow) 50%, #000);
}
html[data-theme="arcade"] .btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-glow) 50%, #000); }
html[data-theme="arcade"] .dn-numeral { font-weight: 900; }
/* Unbounded is too wide for habit names in a row ("Banho …"); they take the body face. */
html[data-theme="arcade"] .home-habit-row-name { font-family: var(--font-body); font-weight: 700; }
html[data-theme="arcade"] .dn-in { color: var(--accent-glow); text-shadow: 3px 3px 0 var(--accent-glow-2); }
html[data-theme="arcade"] body { background-image: radial-gradient(color-mix(in srgb, var(--accent-glow-2) 14%, transparent) 1px, transparent 1.3px); background-size: 8px 8px; }

/* ====================================================== XIV · HACKER ===== */
html[data-theme="hacker"] {
  --font-display: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-body: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ui-case: lowercase; --ui-track: 0;
  --head-weight: 700;
}
:where(html[data-theme="hacker"]) :is(h1, h2, h3) { text-transform: lowercase; }
:where(html[data-theme="hacker"]) h1:where(:not(.widget-header h1))::before { content: "$ "; color: var(--accent-glow); }
:where(html[data-theme="hacker"]) h1:where(:not(.widget-header h1))::after {
  content: ""; display: inline-block; width: .5em; height: .85em; margin-left: .12em; vertical-align: -.08em;
  background: var(--accent-glow); animation: hacker-cursor 1.06s steps(1) infinite;
}
@keyframes hacker-cursor { 50% { opacity: 0; } }
html[data-theme="hacker"] .btn-primary { border-color: color-mix(in srgb, var(--accent-glow) 35%, transparent); color: var(--accent-glow); }
html[data-theme="hacker"] .btn-primary::before { content: "[ "; }
html[data-theme="hacker"] .btn-primary::after { content: " ]"; }
html[data-theme="hacker"] .btn-primary:hover { background: var(--accent-glow); color: var(--page); }
html[data-theme="hacker"] .dn-numeral { font-feature-settings: "zero"; }
html[data-theme="hacker"] .dn-in { color: var(--accent-glow); text-shadow: 0 0 10px color-mix(in srgb, var(--accent-glow) 55%, transparent); }
html[data-theme="hacker"] body::after { opacity: 1; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)); }

/* =================================================== XV · SYNTHWAVE ===== */
html[data-theme="synthwave"] {
  --font-display: "Exo 2", system-ui, sans-serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --font-mono: "Exo 2", system-ui, sans-serif;
  --head-weight: 800;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
}
:where(html[data-theme="synthwave"]) :is(h1, h2, h3) { font-style: italic; text-transform: uppercase; letter-spacing: .06em; }
html[data-theme="synthwave"] .habit-card {
  border-radius: 8px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-glow) 30%, transparent), 0 0 18px color-mix(in srgb, var(--accent-glow) 16%, transparent);
}
html[data-theme="synthwave"] .btn-primary,
html[data-theme="synthwave"] .btn-primary:hover {
  border-radius: 999px; border-color: transparent; color: var(--page);
  background: linear-gradient(90deg, var(--accent-glow), var(--accent-glow-2));
}
html[data-theme="synthwave"] .dn-numeral { font-style: italic; font-weight: 800; }
html[data-theme="synthwave"] .dn-in {
  color: transparent; background: linear-gradient(180deg, var(--accent-glow), var(--accent-glow-2));
  -webkit-background-clip: text; background-clip: text;
}
/* The horizon: a perspective grid fading up from the foot of the screen. */
html[data-theme="synthwave"] body::after {
  inset: auto -60% 0; height: 38vh; opacity: .45; mask-image: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent-glow) 45%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent-glow) 45%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: perspective(220px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 85%); mask-image: linear-gradient(to top, #000, transparent 85%);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="tide"] .dn-in, :where(html[data-theme="hacker"]) h1:where(:not(.widget-header h1))::after { animation: none; }
}