/* ==========================================================================
   Theme system — a skin layer, not a second website.

   SIGNAL is the original design. Its rules live in each page's own <style>
   block and are NOT touched here: this file adds no `signal` declaration that
   changes an existing value, so SIGNAL renders through exactly the cascade it
   always did.

   NEO re-skins the same DOM. It works in two passes:
     1. token overrides on :root[data-theme="neo"] — everything that already
        consumes --bg / --ink / --accent / --muted / --faint / --line reskins
        for free;
     2. component rules prefixed with [data-theme="neo"], which always carry
        one more class-level of specificity than the SIGNAL rule they answer,
        so they win regardless of source order.

   Nothing here changes a box model value that affects layout: no width,
   height, padding, margin, font-size, grid or flex property is altered.
   Borders and shadows are drawn inside existing boxes or with box-shadow
   spread, which does not participate in layout.
   ========================================================================== */

/* -------------------------------------------------------------- tokens */

/* Shared, theme-independent. */
:root {
  --theme-switch-ms: 260ms;
}

/* SIGNAL: the page owns --bg/--ink/--accent/--muted/--faint/--line.
   Only tokens the original design never had are declared here. */
:root[data-theme="signal"] {
  --surface: transparent;
  --border-w: 1px;
  --radius: 18px;
  --shadow-o: 0px;
  --shadow: none;
}

:root[data-theme="neo"] {
  /* Ground and type */
  --bg:      #f4f1e8;   /* warm off-white */
  --ink:     #121212;   /* near-black */
  --charcoal:#2a2a2a;
  --surface: #ffffff;   /* raised card */
  --accent:  #e8e23d;   /* soft electric yellow — a fill, never body text */

  --muted:   rgba(18,18,18,0.74);
  --faint:   rgba(18,18,18,0.54);
  --line:    #121212;   /* solid rules, not translucent hairlines */

  /* Structure */
  --border-w: 2px;
  --radius:   2px;
  --shadow-o: 5px;
  --shadow:   var(--shadow-o) var(--shadow-o) 0 var(--ink);

  --font: "Space Grotesk", "Bricolage Grotesque", system-ui, -apple-system, sans-serif;

  /* Static fallback texture for the dither host */
  --dither-dot: rgba(18,18,18,0.14);

  color-scheme: light;
}

@media (max-width: 640px) {
  :root[data-theme="neo"] { --shadow-o: 3px; }
}

/* Cross-fade only while switching, so neither theme carries a permanent
   transition the other did not have. */
:root.theme-switching,
:root.theme-switching body,
:root.theme-switching .nav,
:root.theme-switching .section,
:root.theme-switching .foot,
:root.theme-switching .card,
:root.theme-switching .card__disc,
:root.theme-switching .card__status,
:root.theme-switching .card__tags em {
  transition:
    background-color var(--theme-switch-ms) ease,
    color var(--theme-switch-ms) ease,
    border-color var(--theme-switch-ms) ease !important;
}

/* ======================================================================
   NEO
   ====================================================================== */

[data-theme="neo"] body { background: var(--bg); color: var(--ink); }
[data-theme="neo"] ::selection { background: var(--accent); color: var(--ink); }

/* Typography — a grotesk with more editorial bite. Sizes are untouched. */
[data-theme="neo"] .hero h1 { font-weight: 700; letter-spacing: -0.035em; }
[data-theme="neo"] .section__head h2 { font-weight: 700; letter-spacing: -0.03em; }
[data-theme="neo"] .card__title { font-weight: 700; letter-spacing: -0.03em; }
[data-theme="neo"] .eyebrow,
[data-theme="neo"] .card__label,
[data-theme="neo"] .card__status,
[data-theme="neo"] .card__no,
[data-theme="neo"] .tally,
[data-theme="neo"] .scrollcue {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
}

/* Line-box parity.
   Bricolage Grotesque resolves `line-height: normal` to 1.2; Space Grotesk
   resolves it to 1.275. Every element in the original design that leaned on
   `normal` therefore grew ~6% taller under NEO, and those fractions summed
   into a 12px document-height drift. Pinning the ratio Bricolage produces
   keeps every one of those boxes on the pixel SIGNAL puts it on, and being
   unitless it still scales with the responsive font sizes. */
[data-theme="neo"] .nav__mark,
[data-theme="neo"] .nav__links a,
[data-theme="neo"] .eyebrow,
[data-theme="neo"] .tally,
[data-theme="neo"] .scrollcue,
[data-theme="neo"] .strip__track span,
[data-theme="neo"] .card__no,
[data-theme="neo"] .card__status,
[data-theme="neo"] .card__label,
[data-theme="neo"] .card__tags em,
[data-theme="neo"] .about__grid li,
[data-theme="neo"] .grid li,
[data-theme="neo"] .about__more,
[data-theme="neo"] .foot,
[data-theme="neo"] .worklist .go,
[data-theme="neo"] .links a,
[data-theme="neo"] .themeswitch__btn {
  line-height: 1.2;
}

/* Full stops stay black. A yellow one reads as a bullet, not punctuation —
   the accent earns its place on labels and fills instead. */
[data-theme="neo"] .hero h1 i,
[data-theme="neo"] .section__head h2 i,
[data-theme="neo"] .nav__mark i,
[data-theme="neo"] h1 i { color: var(--ink); }

/* ------------------------------------------------------------ background */

/* The hero scrim is a red wash in SIGNAL; here it is the same gradient in the
   NEO ground so type keeps a flat surface while the field stays visible. */
[data-theme="neo"] .hero::after {
  background:
    linear-gradient(90deg, #f4f1e8 0%, rgba(244,241,232,0.86) 34%, rgba(244,241,232,0) 74%),
    linear-gradient(0deg, #f4f1e8 0%, rgba(244,241,232,0) 26%);
}
@media (max-width: 768px) {
  [data-theme="neo"] .hero::after {
    background:
      linear-gradient(90deg, #f4f1e8 0%, rgba(244,241,232,0.9) 40%, rgba(244,241,232,0.2) 100%),
      linear-gradient(0deg, #f4f1e8 0%, rgba(244,241,232,0) 22%);
  }
}

/* Only the active background layer is displayed; the inactive one is also
   unmounted in JS, so this is belt-and-braces, not the mechanism. */
[data-theme="neo"] #pixelblast { display: none; }
[data-theme="signal"] #neobg { display: none; }
#neobg { position: fixed; inset: 0; z-index: 0; }

/* ------------------------------------------------------------------- nav */

[data-theme="neo"] .nav__mark { font-weight: 700; letter-spacing: -0.01em; }
[data-theme="neo"] .nav.is-stuck {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
[data-theme="neo"] .nav__links a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}
[data-theme="neo"] .nav__links a::after { background: var(--ink); height: 2px; }
[data-theme="neo"] .nav__links a:hover { color: var(--ink); }
/* Rectangular selected indicator, drawn with spread so it costs no layout. */
[data-theme="neo"] .nav__links a[aria-current="page"] {
  color: var(--ink);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent);
}
[data-theme="neo"] .nav__links a[aria-current="page"]::after { transform: scaleX(0); }

/* ----------------------------------------------------------------- hero */

[data-theme="neo"] .scrollcue:hover { color: var(--ink); }
[data-theme="neo"] .scrollcue b { background: linear-gradient(var(--ink), transparent); }
[data-theme="neo"] .strip {
  border-top-color: var(--ink);
  box-shadow: inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink);
  background: var(--bg);
}
[data-theme="neo"] .strip__track span { color: var(--ink); font-weight: 500; }
[data-theme="neo"] .strip__track span::after { color: var(--accent); }

/* ------------------------------------------------------------- sections */

[data-theme="neo"] .section { background: rgba(244,241,232,0.88); }
[data-theme="neo"] .section__head {
  border-bottom-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
[data-theme="neo"] .section + .section { box-shadow: inset 0 2px 0 var(--ink); }
[data-theme="neo"] .tally b { color: var(--ink); }
[data-theme="neo"] .tally s { background: var(--ink); width: 2px; }

/* Space Grotesk sets wider than Bricolage, so a `ch`-based measure buys fewer
   characters per line and this lead rewrapped from two lines to three, pushing
   everything below it down 50px. These widths are re-tuned per theme so the
   line count — and therefore every scroll position after it — is preserved.
   Measured, not guessed: 24ch is the first value that restores two lines. */
[data-theme="neo"] .about__lead { max-width: 25ch; }
[data-theme="neo"] .lead { max-width: 27ch; }

/* Same cause, no max-width to tune: these paragraphs fill a fixed grid column,
   so the only lever is tracking. A hair of negative letter-spacing — which also
   suits the more condensed, editorial voice of this theme — puts two About-page
   paragraphs back on the line count SIGNAL gives them, worth 55px of document
   height. Verified against every paragraph in the grid, not just those two. */
/* The amount of tracking needed depends on the measure, and the measure
   changes at the grid's own breakpoint: two narrow columns above 780px, one
   wide column below. A single value cannot serve both — -0.02em is right for
   the wide single column but over-tightens the narrow ones, which cost the
   About page 49px of height at 1440. Split at the same 780px the grid uses. */
[data-theme="neo"] .grid p,
[data-theme="neo"] .worklist p,
[data-theme="neo"] .hero__sub { letter-spacing: -0.01em; }

@media (max-width: 780px) {
  [data-theme="neo"] .grid p,
  [data-theme="neo"] .worklist p,
  [data-theme="neo"] .hero__sub { letter-spacing: -0.02em; }
}

/* Editorial highlight, padded with spread so the line box never moves. */
[data-theme="neo"] .about__lead b,
[data-theme="neo"] .lead b {
  color: var(--ink);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent);
}

[data-theme="neo"] .about__grid li,
[data-theme="neo"] .grid li {
  border-bottom-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

/* ---------------------------------------------------------------- cards */

/* Physical: a real surface, a real outline, a hard shadow. Box metrics are
   untouched — the border is drawn inside via box-shadow inset so even the
   2px outline costs no layout. */
[data-theme="neo"] .card--live {
  background: var(--surface);
  border-radius: var(--radius) !important;   /* beats the glass inline style */
  box-shadow:
    inset 0 0 0 var(--border-w) var(--ink),
    var(--shadow-o) var(--shadow-o) 0 var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
[data-theme="neo"] .card__fill { display: none; }

[data-theme="neo"] .card__no {
  color: var(--ink);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent);
  font-weight: 700;
}
[data-theme="neo"] .card__status {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: var(--bg);
}
[data-theme="neo"] .card__status i { background: var(--accent); box-shadow: 0 0 0 1px var(--ink); }
[data-theme="neo"] .card__desc { color: var(--muted); }

/* Pills become rectangular labels. */
[data-theme="neo"] .card__tags em {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-weight: 600;
  /* At this size Space Grotesk sets ~1.5% tighter than Bricolage, which was
     just enough to un-wrap the tag row at 375px and pull everything below it
     up 29px. The extra tracking restores the row's total width so the flex
     wrap breaks in the same place. Measured across 375 / 768 / 1440. */
  letter-spacing: 0.135em;
}
[data-theme="neo"] .card__label { color: var(--ink); }
[data-theme="neo"] .card__disc {
  background: var(--accent);
  color: var(--ink);
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--border-w) var(--ink);
}

/* Tactile hover: the card lifts toward the pointer and its shadow deepens. */
@media (hover: hover) {
  [data-theme="neo"] .card--live:hover {
    transform: translate(-3px, -3px);
    box-shadow:
      inset 0 0 0 var(--border-w) var(--ink),
      calc(var(--shadow-o) + 3px) calc(var(--shadow-o) + 3px) 0 var(--ink);
  }
  [data-theme="neo"] .card--live:hover .card__disc {
    background: var(--ink); color: var(--accent); transform: translateX(4px);
  }
  [data-theme="neo"] .card--live:hover .card__no,
  [data-theme="neo"] .card--live:hover .card__label { color: var(--ink); }
  [data-theme="neo"] .card--live:hover .card__status,
  [data-theme="neo"] .card--live:hover .card__tags em { border-color: var(--ink); }
  [data-theme="neo"] .card--live:hover .card__status i { background: var(--accent); }
}
/* Press: the card sits down into its own shadow. */
[data-theme="neo"] .card--live:active {
  transform: translate(2px, 2px);
  box-shadow:
    inset 0 0 0 var(--border-w) var(--ink),
    calc(var(--shadow-o) - 3px) calc(var(--shadow-o) - 3px) 0 var(--ink);
}
[data-theme="neo"] .card--live:focus-visible {
  outline: var(--border-w) solid var(--ink);
  outline-offset: 3px;
}

[data-theme="neo"] .card--soon {
  border-color: var(--ink);
  border-style: dashed;
  border-radius: var(--radius);
  opacity: 0.72;
}
[data-theme="neo"] .card--soon .card__no { background: none; box-shadow: none; color: var(--faint); }
[data-theme="neo"] .card--soon .card__status i { background: transparent; border: 2px solid var(--ink); box-shadow: none; }

/* --------------------------------------------------------------- footer */

[data-theme="neo"] .foot {
  background: var(--bg);
  border-top-color: var(--ink);
  box-shadow: inset 0 2px 0 var(--ink);
  color: var(--muted);
}
[data-theme="neo"] .foot__mail,
[data-theme="neo"] .foot__nav a,
[data-theme="neo"] .about__more { color: var(--ink); font-weight: 600; }
[data-theme="neo"] .foot__mail::after,
[data-theme="neo"] .foot__nav a::after,
[data-theme="neo"] .about__more::after,
[data-theme="neo"] .nav__links a::after { background: var(--ink); }
[data-theme="neo"] .foot__mail:hover,
[data-theme="neo"] .foot__nav a:hover,
[data-theme="neo"] .about__more:hover { color: var(--ink); }
[data-theme="neo"] .about__more { box-shadow: 0 0 0 0 var(--accent); }
[data-theme="neo"] .about__more:hover { background: var(--accent); box-shadow: 0 0 0 4px var(--accent); }

/* ---------------------------------------------- about page specifics */

[data-theme="neo"] .worklist li {
  border-bottom-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
[data-theme="neo"] .worklist h3 { font-weight: 700; }
[data-theme="neo"] .worklist .go { color: var(--ink); font-weight: 600; }
@media (hover: hover) {
  [data-theme="neo"] .worklist a:hover h3,
  [data-theme="neo"] .worklist a:hover .go { color: var(--ink); }
  [data-theme="neo"] .worklist a:hover h3 { background: var(--accent); box-shadow: 0 0 0 4px var(--accent); }
}
[data-theme="neo"] .inline {
  border-bottom: var(--border-w) solid var(--ink);
  color: var(--ink); font-weight: 500;
}
[data-theme="neo"] .inline:hover { color: var(--ink); background: var(--accent); }

/* ------------------------------------------------------ 404 specifics */

[data-theme="neo"] .links a {
  border-bottom: var(--border-w) solid var(--ink);
  color: var(--ink); font-weight: 600;
}
[data-theme="neo"] .links a:hover { color: var(--ink); background: var(--accent); border-bottom-color: var(--ink); }
[data-theme="neo"] .sub { color: var(--muted); }

/* Glass is a SIGNAL device; NEO surfaces are flat. The instances are also
   destroyed in JS — this neutralises anything left on the element. */
[data-theme="neo"] .glass-surface--svg,
[data-theme="neo"] .glass-surface--fallback {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--surface) !important;
}

/* ======================================================================
   Theme switcher — same markup and position in every theme.
   ====================================================================== */

.themeswitch { position: relative; display: flex; align-items: center; }

.themeswitch__btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: inherit; font-size: 0.85rem; color: #000;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.themeswitch__dots { display: inline-flex; gap: 2px; }
.themeswitch__dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.themeswitch__btn span.themeswitch__text { position: relative; }
.themeswitch__btn span.themeswitch__text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(.2,.8,.3,1);
}
.themeswitch__btn:hover span.themeswitch__text { color: var(--accent); }
.themeswitch__btn:hover span.themeswitch__text::after { transform: scaleX(1); }
.themeswitch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.themeswitch__menu {
  position: absolute; top: calc(100% + 0.85rem); right: 0; z-index: 80;
  min-width: 15.5rem; padding: 0.4rem;
  background: rgba(255,0,0,0.94);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.themeswitch__menu[hidden] { display: none; }

.themeswitch__opt {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  gap: 0.6rem; width: 100%; text-align: left;
  font: inherit; font-size: 0.78rem; color: #000;
  background: none; border: 0; padding: 0.62rem 0.6rem; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.themeswitch__opt:hover { background: rgba(255,255,255,0.22); }
.themeswitch__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.themeswitch__sw { display: inline-flex; }
.themeswitch__sw i {
  width: 11px; height: 11px; display: block;
  border: 1px solid rgba(0,0,0,0.35); margin-left: -3px;
}
.themeswitch__sw i:first-child { margin-left: 0; }
.themeswitch__num { font-size: 0.66rem; letter-spacing: 0.14em; opacity: 0.62; font-weight: 600; }
.themeswitch__name { letter-spacing: 0.12em; font-weight: 600; text-transform: uppercase; }
.themeswitch__note { display: none; }
.themeswitch__tick { width: 12px; text-align: center; opacity: 0; font-size: 0.7rem; }
.themeswitch__opt[aria-selected="true"] .themeswitch__tick { opacity: 1; }
.themeswitch__opt[aria-selected="true"] { background: rgba(255,255,255,0.3); }

/* NEO: the control becomes a bordered, shadowed object like everything else. */
[data-theme="neo"] .themeswitch__btn {
  color: var(--ink); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 600;
}
[data-theme="neo"] .themeswitch__dots i { border-radius: 0; box-shadow: 0 0 0 1px var(--ink); }
[data-theme="neo"] .themeswitch__btn span.themeswitch__text::after { background: var(--ink); height: 2px; }
[data-theme="neo"] .themeswitch__btn:hover span.themeswitch__text { color: var(--ink); }
[data-theme="neo"] .themeswitch__btn[aria-expanded="true"] span.themeswitch__text {
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent);
}
[data-theme="neo"] .themeswitch__menu {
  background: var(--surface);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-o) var(--shadow-o) 0 var(--ink);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
[data-theme="neo"] .themeswitch__opt { color: var(--ink); border-radius: 0; }
[data-theme="neo"] .themeswitch__opt:hover { background: var(--accent); }
[data-theme="neo"] .themeswitch__opt[aria-selected="true"] { background: var(--accent); }
[data-theme="neo"] .themeswitch__sw i { border: 1px solid var(--ink); }
[data-theme="neo"] .themeswitch__btn:focus-visible,
[data-theme="neo"] .themeswitch__opt:focus-visible { outline-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .themeswitch__btn span.themeswitch__text::after { transition: none; }
  :root.theme-switching, :root.theme-switching * { transition: none !important; }
  [data-theme="neo"] .card--live { transition: none; }
}

/* ======================================================================
   First-visit theme prompt

   Shown once, before any theme has been chosen. It sits above the page on a
   fixed layer, so it adds nothing to the document flow and cannot move a
   single element of either theme.
   ====================================================================== */

.themeprompt {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vw, 2rem);
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.24s ease;
  -webkit-tap-highlight-color: transparent;
}
.themeprompt.is-open { opacity: 1; }

.themeprompt__panel {
  width: min(46rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: #fff;
  color: #000;
  padding: clamp(1.6rem, 4.5vw, 2.6rem);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.28s cubic-bezier(.19,1,.22,1);
}
.themeprompt.is-open .themeprompt__panel { transform: none; }

.themeprompt__eyebrow {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600; color: rgba(0,0,0,0.55); margin: 0;
}
.themeprompt__title {
  margin: 0.5rem 0 0;
  font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1;
}
.themeprompt__title i { color: #ff0000; font-style: normal; }
.themeprompt__sub {
  margin: 0.85rem 0 0; max-width: 44ch;
  font-size: 0.92rem; line-height: 1.65; color: rgba(0,0,0,0.7);
}

.themeprompt__opts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem;
  margin-top: clamp(1.4rem, 4vw, 2rem);
}
@media (max-width: 620px) { .themeprompt__opts { grid-template-columns: 1fr; } }

.themeprompt__card {
  display: block; width: 100%; text-align: left;
  font: inherit; cursor: pointer;
  background: #fff; border: 1px solid rgba(0,0,0,0.22);
  padding: 0.75rem 0.75rem 0.95rem;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.themeprompt__card:hover { border-color: #000; transform: translateY(-2px); }
.themeprompt__card:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Miniature of the hero, drawn from each theme's own three colours. */
.themeprompt__preview {
  display: block; position: relative; height: 108px; overflow: hidden;
  padding: 1.1rem 0.9rem;
}
.themeprompt__bar { display: block; height: 13px; border-radius: 1px; }
.themeprompt__bar--a { width: 46%; }
.themeprompt__bar--b { width: 68%; margin-top: 9px; }
.themeprompt__dot {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  left: calc(0.9rem + 68% + 5px); top: calc(1.1rem + 22px + 9px);
}
.themeprompt__preview[data-preview="signal"] { background: #ff0000; }
.themeprompt__preview[data-preview="signal"] .themeprompt__bar { background: #000; }
.themeprompt__preview[data-preview="signal"] .themeprompt__dot { background: #fff; }
.themeprompt__preview[data-preview="neo"] { background: #f4f1e8; box-shadow: inset 0 0 0 2px #121212; }
.themeprompt__preview[data-preview="neo"] .themeprompt__bar { background: #121212; border-radius: 0; }
.themeprompt__preview[data-preview="neo"] .themeprompt__dot { background: #e8e23d; border-radius: 0; box-shadow: 0 0 0 1px #121212; }

.themeprompt__meta { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.8rem; }
.themeprompt__num { font-size: 0.66rem; letter-spacing: 0.16em; font-weight: 700; color: rgba(0,0,0,0.45); }
.themeprompt__name { font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.themeprompt__note { display: block; margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.5; color: rgba(0,0,0,0.62); }

/* NEO: the prompt takes the same tactile treatment as everything else. */
[data-theme="neo"] .themeprompt__panel {
  background: var(--surface);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-o) var(--shadow-o) 0 var(--ink);
}
[data-theme="neo"] .themeprompt__title i { color: var(--ink); }
[data-theme="neo"] .themeprompt__card { border: var(--border-w) solid var(--ink); }
[data-theme="neo"] .themeprompt__card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .themeprompt, .themeprompt__panel, .themeprompt__card { transition: none !important; }
  .themeprompt__panel { transform: none !important; }
}