/* ============================================================================
   Dotzul "Neon Foundry" theme -- a futuristic 8-bit throwback.

   Self-contained replacement for theme.css: a page adopts the whole system by
   swapping its one <link>. Nothing here depends on a page's own markup beyond
   the shared class names theme.css already defined (.nav, .card, .btn, ...).

   THE ONE RULE THAT MAKES IT LOOK PREMIUM: there is a single light source,
   upper-left, ~135deg. Every raised surface therefore gets a lit top/left
   edge, a dark bottom/right edge, and a cast shadow down-and-right. Every
   recessed surface gets the inverse. Nothing in this file lights a surface
   from a direction that contradicts that, which is what separates "3D" from
   "a pile of shadows".

   Flat 8-bit DNA that is deliberately KEPT: Press Start 2P everywhere it was,
   hard-edged geometry (radii stay 2-7px, never pill), solid extruded button
   walls rather than soft drop shadows alone, and the green/blue/pink triad.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  /* --- Hue ramps. Each accent is four values, not one: the lit edge, the
     core fill, the shadowed side, and the ambient bloom it throws onto
     whatever is behind it. Flat single-value accents are the main reason the
     old theme read as a template. --- */
  --blue-lt: #9ad8ff;
  --blue: #29adff;
  --blue-mid: #1782c7;
  --blue-dk: #0a4c78;
  --blue-ink: #04141f;
  --blue-glow: rgba(41, 173, 255, 0.45);

  --green-lt: #8dffb2;
  --green: #00e436;
  --green-mid: #06b02d;
  --green-dk: #046b23;
  --green-ink: #04200d;
  --green-glow: rgba(0, 228, 54, 0.45);

  --pink-lt: #ff8fae;
  --pink: #ff004d;
  --pink-mid: #c4003b;
  --pink-dk: #7d0027;
  --pink-glow: rgba(255, 0, 77, 0.45);

  --violet: #c58aff;
  --amber: #ffb066;

  /* --- Ink ladder. Surfaces get darker as they recede, so stacking two
     panels reads as depth before any shadow is applied. --- */
  --ink-900: #05070b;
  --ink-800: #090d13;
  --ink-700: #0e141c;
  --ink-600: #141c26;
  --ink-500: #1d2733;
  --ink-400: #2a3742;

  /* Back-compat aliases so markup written against theme.css keeps working. */
  --bg: var(--ink-900);
  --bg-elevated: var(--ink-700);
  --card: var(--ink-600);
  --border: var(--ink-400);
  --text: #e9f1f7;
  --text-dim: #8796a3;
  --text-faint: #5c6975;
  --link: var(--blue-lt);
  --radius: 0px;
  --glow-green: var(--green-glow);
  --glow-pink: var(--pink-glow);
  --glow-blue: var(--blue-glow);

  /* --- Edges: the two colors every bevel is built from. --- */
  --edge-hi: rgba(255, 255, 255, 0.22);
  --edge-hi-soft: rgba(255, 255, 255, 0.09);
  --edge-lo: rgba(0, 0, 0, 0.62);
  --edge-lo-soft: rgba(0, 0, 0, 0.32);

  /* --- Elevation ladder. Two shadows each: a tight contact shadow that says
     "this object touches that surface", and a wide soft one that says "and it
     is this far above it". One shadow alone never reads as real. --- */
  --el-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 8px -2px rgba(0, 0, 0, 0.4);
  --el-2: 0 2px 4px rgba(0, 0, 0, 0.55), 0 10px 24px -8px rgba(0, 0, 0, 0.6);
  --el-3: 0 3px 7px rgba(0, 0, 0, 0.55), 0 22px 50px -18px rgba(0, 0, 0, 0.8);
  --el-4: 0 6px 14px rgba(0, 0, 0, 0.6), 0 40px 90px -30px rgba(0, 0, 0, 0.9);

  /* --- Bevels. --up for surfaces standing proud of the page, --in for wells
     cut into it (inputs, tracks, screens). --- */
  --bevel-up:
    inset 0 1px 0 var(--edge-hi),
    inset 1px 0 0 var(--edge-hi-soft),
    inset -1px 0 0 var(--edge-lo-soft),
    inset 0 -1px 0 var(--edge-lo);
  --bevel-in:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(0, 0, 0, 0.9),
    inset 0 -1px 0 var(--edge-hi-soft);

  /* --- Gradient border stock. Used as the border-box layer of a two-layer
     background so a border can be lit on one side and dark on the other --
     something border-color alone cannot express. --- */
  --frame-bright: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05) 42%, rgba(0, 0, 0, 0.55));
  --frame-quiet: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.5));

  /* --- Glass plate fill, paired with backdrop-filter. --- */
  --glass: linear-gradient(170deg, rgba(45, 61, 79, 0.62), rgba(11, 16, 23, 0.86));
  --glass-quiet: linear-gradient(170deg, rgba(30, 41, 54, 0.55), rgba(9, 13, 19, 0.82));
  --blur-plate: blur(16px) saturate(1.25);

  /* Surface grain. Without it, large gradient fills look like dead vinyl at
     any size; at ~3% it is invisible as texture but kills the flatness. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22140%22 height=%22140%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 7px;

  --font-display: 'Press Start 2P', monospace;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Type scale. The old page mixed 12.5/14/15/16/17px with no system; these
     are the only body sizes anything should use. */
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;

  /* Press Start 2P is a single weight with no hinting to speak of. A hard 1px
     dark offset under it reads as cut lettering rather than as a font that
     happens to be blocky. */
  --emboss: 0 1px 0 rgba(0, 0, 0, 0.9), 0 2px 0 rgba(0, 0, 0, 0.45);

  --ease-out: cubic-bezier(0.22, 0.8, 0.3, 1);
  --t-fast: 0.12s;
  --t-med: 0.2s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* Unchanged from theme.css on purpose -- the single faint green wash over
     near-black is the site's existing background and stays as it is. The only
     addition is a bottom vignette, so the lit surfaces above it have
     something to sit against. */
  background:
    radial-gradient(ellipse 1000px 600px at 50% -10%, rgba(0, 228, 54, 0.06), transparent 60%),
    radial-gradient(ellipse 1200px 500px at 50% 108%, rgba(0, 0, 0, 0.85), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

::selection { background: var(--blue); color: var(--blue-ink); }

/* Scrollbars. The browser default is a light slab that lands right on top of
   the darkest surfaces on the page -- the prompt terminal, the canvas, the
   activity list. Same treatment as everything else: a recessed track with a
   beveled thumb riding in it. Firefox only offers the two-colour form. */
* { scrollbar-width: thin; scrollbar-color: #33424f #05080c; }

::-webkit-scrollbar { width: 12px; height: 12px; }

::-webkit-scrollbar-track {
  background: #05080c;
  box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.9);
}

::-webkit-scrollbar-thumb {
  border: 2px solid #05080c;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #3a4a58, #222e3a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4a6376, #2a3a49);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 10px var(--blue-glow);
}

::-webkit-scrollbar-corner { background: #05080c; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-shadow: var(--emboss);
}

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

.nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-height: 68px;
  padding: 13px 26px;
  border: 0;
  background: linear-gradient(180deg, rgba(24, 33, 44, 0.88), rgba(8, 12, 17, 0.92));
  backdrop-filter: var(--blur-plate);
  -webkit-backdrop-filter: var(--blur-plate);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 10px 30px -12px rgba(0, 0, 0, 0.9);
}

/* The lit underline: a 1px rule that brightens toward the middle, like a
   strip light under a shelf. A flat 3px border cannot express this. */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41, 173, 255, 0.55) 25%, rgba(0, 228, 54, 0.5) 55%, transparent);
}

.nav a.wordmark {
  position: relative;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.06em;
  text-decoration: none;
  /* Extruded lettering: a stack of solid offsets builds a side wall going
     down-right, the pink sits at the bottom of that wall as reflected bounce
     light, then a soft bloom. The old single flat pink offset was the whole
     effect; this is the same idea built properly. */
  color: var(--blue-lt);
  text-shadow:
    1px 1px 0 var(--blue-mid),
    2px 2px 0 var(--blue-dk),
    3px 3px 0 var(--pink-mid),
    4px 4px 0 var(--pink-dk),
    5px 6px 12px rgba(0, 0, 0, 0.8),
    0 0 22px rgba(41, 173, 255, 0.5);
  transition: transform var(--t-med) var(--ease-out), text-shadow var(--t-med) var(--ease-out);
}

.nav a.wordmark:hover {
  text-decoration: none;
  transform: translate(-1px, -1px);
  text-shadow:
    1px 1px 0 var(--blue-mid),
    2px 2px 0 var(--blue-dk),
    3px 3px 0 var(--pink),
    4px 4px 0 var(--pink-dk),
    6px 7px 14px rgba(0, 0, 0, 0.85),
    0 0 34px rgba(41, 173, 255, 0.8);
}

.nav a.nav-link {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-shadow: var(--emboss);
  transition: color var(--t-med) var(--ease-out), text-shadow var(--t-med) var(--ease-out);
}

.nav a.nav-link:hover {
  color: var(--blue-lt);
  text-shadow: var(--emboss), 0 0 16px var(--blue-glow);
}

/* ------------------------------------------------------------ buttons ---- */

/* Anatomy, top to bottom:
     ::before      top-half glass highlight (the sheen on a molded plastic key)
     ::after       specular sweep, parked off-screen, driven across on hover
     inset 0 1px   lit top edge
     inset 0 -2px  shadowed bottom lip
     0 Npx 0 <dk>  SOLID extruded side wall -- this is the 8-bit hard shadow,
                   reinterpreted as actual geometry rather than a black offset
     0 Npx Npx     cast shadow onto the page
     0 0 Npx glow  ambient bloom the lit face throws
   Pressing collapses the wall and drops the cap into it, so the travel is
   physical rather than a color change. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  -webkit-appearance: none;
  appearance: none;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    filter var(--t-med) var(--ease-out);
}

.btn:hover { text-decoration: none; }

/* Press Start 2P ships a single weight whose strokes are one pixel wide. At
   button sizes that goes mushy -- worst as dark text on a saturated fill,
   where there is no room for the eye to recover the stroke. Stroking each
   glyph in its own colour is the only way to get a heavier weight out of a
   font that has none; paint-order keeps the stroke behind the fill so it
   grows outward instead of closing up the counters of e, a and s. */
.btn,
.nav-link-pop,
.sort-btn {
  -webkit-text-stroke: 0.6px currentColor;
  paint-order: stroke fill;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0 0 52% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}

.btn::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
  z-index: 2;
}

.btn:hover::after {
  transform: translateX(320%) skewX(-18deg);
  transition: transform 0.62s var(--ease-out);
}

.btn > * { position: relative; z-index: 3; }

.btn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 2px var(--ink-900),
    0 0 0 4px var(--blue-lt),
    0 4px 0 rgba(0, 0, 0, 0.6),
    0 10px 22px -6px rgba(0, 0, 0, 0.7);
}

/* The gloss break sits at 38%, above the cap height, not at 50% where it used
   to cut straight through the lettering. That put the darkest band of the fill
   directly behind dark ink -- about 4.3:1, which is why the label read as
   mushy however heavy the glyphs were. With the break raised and the lower
   band lightened, the text field is a uniform ~7:1. */
.btn-primary {
  background:
    linear-gradient(180deg, #d2ecff 0%, #7ccdff 38%, #3fb4fb 39%, #1e8fd4 100%) padding-box,
    var(--frame-bright) border-box;
  color: var(--blue-ink);
  /* No light shadow under the glyph: on a one-pixel-stroke font it lands
     directly against the stroke and erodes it rather than embossing it. */
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 2px 0 var(--blue-dk),
    0 4px 0 #042f4d,
    0 6px 16px -2px rgba(0, 0, 0, 0.6),
    0 0 30px -4px var(--blue-glow);
}

.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 2px 0 var(--blue-dk),
    0 4px 0 #042f4d,
    0 8px 20px -2px rgba(0, 0, 0, 0.65),
    0 0 44px -4px var(--blue-glow);
}

.btn-accent {
  background:
    linear-gradient(180deg, var(--green-lt) 0%, var(--green) 46%, var(--green-mid) 54%, #04862a 100%) padding-box,
    var(--frame-bright) border-box;
  color: var(--green-ink);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 2px 0 var(--green-dk),
    0 4px 0 #023c14,
    0 6px 16px -2px rgba(0, 0, 0, 0.6),
    0 0 30px -4px var(--green-glow);
}

.btn-accent:hover { filter: brightness(1.08); }

/* Ghost: a machined metal key rather than a lit one. Same geometry, no
   emitted light -- which is what keeps the primary button reading as the lit
   one on the page instead of everything competing. */
.btn-ghost {
  background:
    linear-gradient(180deg, var(--ink-500) 0%, var(--ink-600) 48%, var(--ink-700) 100%) padding-box,
    var(--frame-quiet) border-box;
  color: var(--text);
  text-shadow: var(--emboss);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 2px 0 #0b1017,
    0 3px 0 #05080c,
    0 5px 14px -3px rgba(0, 0, 0, 0.7);
}

.btn-ghost:hover {
  color: var(--blue-lt);
  background:
    linear-gradient(180deg, #26333f 0%, var(--ink-500) 48%, var(--ink-600) 100%) padding-box,
    linear-gradient(145deg, rgba(154, 216, 255, 0.5), rgba(255, 255, 255, 0.04) 45%, rgba(0, 0, 0, 0.5)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 2px 0 #0b1017,
    0 3px 0 #05080c,
    0 6px 16px -3px rgba(0, 0, 0, 0.7),
    0 0 22px -6px var(--blue-glow);
}

/* The press. Travel equals the wall height, so the cap lands exactly where
   the base of the extrusion was. */
.btn:active,
.btn-primary:active,
.btn-accent:active,
.btn-ghost:active {
  transform: translateY(4px);
  filter: brightness(0.96);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 0 22px -8px var(--blue-glow);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.5);
  transform: none;
}

.btn:disabled::after,
.btn[disabled]::after { display: none; }

.btn-lg { padding: 15px 30px; font-size: 13px; letter-spacing: 0.09em; }
.btn-sm { padding: 8px 14px; font-size: var(--fs-2xs); }

/* Nav call-to-action: same build as .btn-primary, kept as its own class
   because the existing pages' markup uses it. */
.nav-link-pop {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  /* Same raised gloss break as .btn-primary, for the same legibility reason. */
  background:
    linear-gradient(180deg, #d2ecff 0%, #7ccdff 38%, #3fb4fb 39%, #1e8fd4 100%) padding-box,
    var(--frame-bright) border-box;
  color: var(--blue-ink);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 0 var(--blue-dk),
    0 4px 0 #042f4d,
    0 6px 14px -3px rgba(0, 0, 0, 0.6),
    0 0 26px -6px var(--blue-glow);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-med) var(--ease-out);
}

.nav-link-pop::before {
  content: "";
  position: absolute;
  inset: 0 0 52% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
  pointer-events: none;
}

.nav-link-pop:hover { text-decoration: none; filter: brightness(1.08); }

.nav-link-pop:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------ surfaces --- */

/* A card is four layers: gradient frame (lit top-left / dark bottom-right),
   glass plate, a specular line riding the top edge, and grain. */
.card {
  position: relative;
  padding: 22px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--glass) padding-box, var(--frame-quiet) border-box;
  backdrop-filter: var(--blur-plate);
  -webkit-backdrop-filter: var(--blur-plate);
  box-shadow: var(--el-3), var(--bevel-up);
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  pointer-events: none;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--noise);
  opacity: 0.028;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Opt-outs: --plain for cards whose own content needs the pseudo-elements,
   --solid for the canvas panel, where a blurred backdrop over a repainting
   canvas is the one place the cost actually shows. */
.card.card-plain::before,
.card.card-plain::after { display: none; }

.card.card-solid {
  background: linear-gradient(170deg, var(--ink-600), var(--ink-800)) padding-box, var(--frame-quiet) border-box;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ------------------------------------------------------- form controls --- */

/* A field has to announce itself before it can be used. The first version of
   this was near-black in a near-black page and simply disappeared: the well
   is still recessed, but the fill is lifted well clear of the page colour and
   a bright inner rim draws the edge, so the box reads as a control at a
   glance rather than only once you look for it. */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #000;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #131c26, #0b1119);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
}

input[type="text"]:hover,
input[type="search"]:hover {
  /* background-image, never the `background` shorthand: the shorthand resets
     every background-* longhand it does not mention, so on a field carrying a
     layered background (the search icon below) it would wipe the icon's
     no-repeat, position and size and tile it across the whole box. */
  background-image: linear-gradient(180deg, #182330, #0d141d);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.17),
    0 0 16px -6px var(--blue-glow);
}

/* The placeholder is the only label these fields have, so it is a readable
   dim, not the faint used for de-emphasised furniture. */
input::placeholder, textarea::placeholder { color: var(--text-dim); }

/* A search field says so: magnifier set into the left of the well, with the
   text indented clear of it. Qualified with `input` deliberately -- a bare
   class is specificity 0-1-0 and loses both the padding and the background to
   the 0-1-1 `input[type="text"]` rule above, which silently drops the icon. */
input.search-field {
  padding-left: 40px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%238796a3%22 stroke-width=%222.2%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22M20.5 20.5L16 16%22/%3E%3C/svg%3E"),
    linear-gradient(180deg, #131c26, #0b1119);
  background-repeat: no-repeat, no-repeat;
  background-position: 13px 50%, 0 0;
  background-size: 16px 16px, auto;
}

input.search-field:hover,
input.search-field:focus {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239ad8ff%22 stroke-width=%222.2%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22M20.5 20.5L16 16%22/%3E%3C/svg%3E"),
    linear-gradient(180deg, #182330, #0d141d);
  /* Restated rather than inherited from the base rule: any higher-specificity
     state rule that touches the background can reset these, and the failure
     mode is a silently tiled icon rather than an obvious break. */
  background-repeat: no-repeat, no-repeat;
  background-position: 13px 50%, 0 0;
  background-size: 16px 16px, auto;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow:
    var(--bevel-in),
    0 0 0 1px var(--blue),
    0 0 22px -2px var(--blue-glow);
}

/* Checkbox: a real switch cap in a recessed socket, instead of accent-color
   on the browser's own box. Unchecked it is dark machined plastic; checked it
   is a lit green cap with the tick cut into it. */
input[type="checkbox"] {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid #000;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--ink-500), var(--ink-700));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 2px 0 #05080c,
    0 3px 7px -1px rgba(0, 0, 0, 0.7);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

input[type="checkbox"]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 2px 0 #05080c,
    0 3px 10px -1px rgba(0, 0, 0, 0.7),
    0 0 16px -4px var(--blue-glow);
}

input[type="checkbox"]:checked {
  background: linear-gradient(180deg, var(--green-lt), var(--green) 45%, var(--green-mid));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 2px 0 var(--green-dk),
    0 4px 10px -2px rgba(0, 0, 0, 0.6),
    0 0 24px -4px var(--green-glow);
}

/* The tick, drawn as two borders of a rotated box -- crisp at any DPI and
   needs no glyph or SVG. */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid var(--green-ink);
  border-width: 0 3px 3px 0;
  transform: rotate(43deg);
}

input[type="checkbox"]:active { transform: translateY(2px); }

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--blue-lt), 0 0 20px -2px var(--blue-glow);
}

/* Range: a recessed machined track with a lit fill behind the thumb and a
   beveled cap on top. No standard cross-browser hook exists, so the -webkit-
   and -moz- blocks are duplicated rather than grouped (grouping them makes
   both engines drop the whole rule). WebKit has no progress pseudo-element,
   so the fill is painted onto the track from a --fill percentage the page's
   JS can set; with no --fill the track simply stays unlit, so it degrades
   cleanly. Firefox uses its native ::-moz-range-progress instead. */
input[type="range"] {
  width: 100%;
  height: 30px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 16px;
  border: 1px solid #000;
  border-radius: var(--r-sm);
  background:
    linear-gradient(180deg, rgba(141, 255, 178, 0.85), rgba(4, 107, 35, 0.9)) no-repeat left center / var(--fill, 0%) 100%,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, #05080c, #0d141d);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.05);
}

input[type="range"]::-moz-range-track {
  height: 16px;
  border: 1px solid #000;
  border-radius: var(--r-sm);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, #05080c, #0d141d);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

input[type="range"]::-moz-range-progress {
  height: 16px;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: linear-gradient(180deg, var(--green-lt), var(--green-dk));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 28px;
  margin-top: -7px;
  border: 1px solid #000;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #cfe4f5 0 14%, var(--blue-lt) 15% 46%, var(--blue) 47% 62%, var(--blue-mid) 63% 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 2px 0 var(--blue-dk),
    0 4px 9px -1px rgba(0, 0, 0, 0.75),
    0 0 20px -4px var(--blue-glow);
  cursor: grab;
  transition: box-shadow var(--t-med) var(--ease-out);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 28px;
  border: 1px solid #000;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #cfe4f5 0 14%, var(--blue-lt) 15% 46%, var(--blue) 47% 62%, var(--blue-mid) 63% 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 2px 0 var(--blue-dk),
    0 4px 9px -1px rgba(0, 0, 0, 0.75),
    0 0 20px -4px var(--blue-glow);
  cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
  background: linear-gradient(180deg, #d8f7e2 0 14%, var(--green-lt) 15% 46%, var(--green) 47% 62%, var(--green-mid) 63% 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 1px 0 var(--green-dk),
    0 2px 6px -1px rgba(0, 0, 0, 0.75),
    0 0 26px -3px var(--green-glow);
  cursor: grabbing;
}

input[type="range"]:active::-moz-range-thumb {
  background: linear-gradient(180deg, #d8f7e2 0 14%, var(--green-lt) 15% 46%, var(--green) 47% 62%, var(--green-mid) 63% 100%);
}

input[type="range"]:focus { outline: none; }

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--blue-lt), 0 4px 9px -1px rgba(0, 0, 0, 0.75);
}

/* --------------------------------------------------------- containers ---- */

table { border-collapse: separate; border-spacing: 0; width: 100%; }

/* Defensive: a header row written without a <thead> wrapper falls into an
   implicit <tbody>, misses the rule below, and silently reverts to the
   browser's centred bold default. This keeps the alignment right either way. */
th { text-align: left; font-weight: 700; }

thead th {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-align: left;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}

tbody td {
  padding: 9px 12px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}

details {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--glass-quiet) padding-box, var(--frame-quiet) border-box;
  box-shadow: var(--bevel-up), var(--el-1);
  padding: 2px 16px;
}

details > summary {
  cursor: pointer;
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue-lt);
  text-shadow: var(--emboss);
  list-style: none;
  transition: color var(--t-med) var(--ease-out);
}

details > summary::-webkit-details-marker { display: none; }

/* Drawn from borders rather than set as a glyph: summaries render in Press
   Start 2P, which has no triangle in its character set and falls back to a
   stray comma-like mark from the monospace fallback. */
details > summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 10px;
  vertical-align: middle;
  border-left: 7px solid var(--blue);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  filter: drop-shadow(0 0 5px var(--blue-glow));
  transition: transform var(--t-med) var(--ease-out);
}

details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { color: #fff; }

code, pre { font-family: var(--font-mono); }

/* ------------------------------------------------------------ shared ----- */

.gradient-text {
  color: var(--green-lt);
  text-shadow:
    0 1px 0 var(--green-dk),
    0 2px 0 rgba(0, 0, 0, 0.7),
    0 0 26px var(--green-glow);
}

.coord-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  font-size: var(--fs-xs);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--ink-500), var(--ink-700)) padding-box, var(--frame-quiet) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.thread-row { display: block; }
.thread-row .thread-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.thread-row .thread-meta { font-size: var(--fs-sm); color: var(--text-dim); }

/* A raised element's reflection in the surface below it. Apply to a
   duplicated, aria-hidden copy: it flips, fades and blurs so it reads as a
   reflection in a semi-gloss floor rather than as a second object. */
.reflect {
  transform: scaleY(-1);
  opacity: 0.26;
  filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(to top, transparent 8%, rgba(0, 0, 0, 0.85) 92%);
  mask-image: linear-gradient(to top, transparent 8%, rgba(0, 0, 0, 0.85) 92%);
  pointer-events: none;
}

/* ----------------------------------------------------- page furniture --- */

/* The homepage has a live grid wash with mascot faces popping into it, driven
   by bgFaces.ts. The secondary pages have no such script, so they opt into a
   static CSS-only version of the same grid by putting `page-grid` on <body>:
   same cell size, same muted colour, same fade-out, no faces and no timer.
   It is a body pseudo-element rather than an element so no page needs extra
   markup for it. */
body.page-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 620px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

/* Anything that must sit above that wash. */
body.page-grid main { position: relative; z-index: 1; }

.subtitle {
  color: var(--text-dim);
  font-size: var(--fs-md);
  line-height: 1.7;
  margin: 0 0 28px;
}

/* A block that needs to be read before the reader moves on: same lit left
   rail as the homepage's terms gate. */
.callout {
  position: relative;
  margin: 12px 0;
  padding: 15px 17px 15px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: linear-gradient(170deg, rgba(24, 34, 46, 0.9), rgba(9, 13, 19, 0.9)) padding-box, var(--frame-quiet) border-box;
  box-shadow: var(--bevel-up), var(--el-1);
}

.callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: linear-gradient(180deg, var(--blue-lt), var(--blue-dk));
  box-shadow: 0 0 14px var(--blue-glow);
}

/* Instrument readout, shared by the homepage stats strip and the leaderboard
   summary: a display well cut into a panel with the number lit inside it. */
.stat-readout {
  position: relative;
  padding: 13px 10px 11px;
  border: 1px solid #000;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #03050a, #070b11);
  box-shadow: var(--bevel-in);
  overflow: hidden;
}

.stat-readout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.stat-readout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(116deg, rgba(255, 255, 255, 0.07) 0 24%, transparent 24.4%);
  pointer-events: none;
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--green-lt);
  text-shadow: 0 0 6px var(--green), 0 0 20px var(--green-glow), 0 0 40px rgba(0, 228, 54, 0.28);
}

.stat-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* A scrolling list of rows reads as data on a screen, not as text on the
   page, so it gets the same recessed well the readouts use. */
.table-well {
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: var(--r-sm);
  background: rgba(3, 5, 10, 0.5);
  box-shadow: var(--bevel-in);
  overflow: auto;
}

.table-well tbody tr { transition: background var(--t-med) var(--ease-out); }
.table-well tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.022); }
.table-well tbody tr:hover { background: rgba(41, 173, 255, 0.09); }
.table-well tbody tr:hover td { color: var(--text); }
.table-well tbody tr:last-child td { border-bottom: 0; }

.table-well thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #1b2531, #121923);
}

.agent-link { color: var(--blue-lt); text-decoration: none; cursor: pointer; transition: text-shadow var(--t-med) var(--ease-out); }
.agent-link:hover { text-decoration: none; text-shadow: 0 0 14px var(--blue-glow); }

.agent-avatar {
  vertical-align: middle;
  margin-right: 8px;
  image-rendering: pixelated;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* A segmented toggle -- the pressed segment stays pressed, so the current
   sort reads as a latched switch rather than as coloured text. */
.sort-btn {
  position: relative;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-shadow: var(--emboss);
  cursor: pointer;
  background: linear-gradient(180deg, var(--ink-500) 0%, var(--ink-600) 48%, var(--ink-700) 100%) padding-box, var(--frame-quiet) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 0 #0b1017,
    0 3px 0 #05080c,
    0 5px 12px -3px rgba(0, 0, 0, 0.7);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), color var(--t-med) var(--ease-out);
}

.sort-btn:hover { color: var(--text); }

.sort-btn:active,
.sort-btn.active {
  transform: translateY(3px);
  color: var(--blue-lt);
  background: linear-gradient(180deg, #0a0f16, #121a24) padding-box, var(--frame-quiet) border-box;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(41, 173, 255, 0.25),
    0 0 20px -6px var(--blue-glow);
}

/* Long-form document pages -- terms, privacy, refund policy -- which are all
   the same shape: a title, a dated subtitle, then numbered sections. Put
   `doc` on <main> and the page needs no type rules of its own. Measure is
   capped near 80ch: these are read end to end, not scanned. */
.doc { max-width: 780px; margin: 0 auto; padding: 36px 24px 64px; }
.doc h1 { font-size: 19px; margin: 0 0 12px; }

.doc h2 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.7;
  margin: 36px 0 12px;
  color: #f2f8ff;
}

/* Section marker. flex-start plus a nudge rather than centring, so the tick
   stays level with the first line when a heading wraps to two. */
.doc h2::before {
  content: "";
  flex: none;
  width: 3px;
  height: 14px;
  margin-top: 5px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--blue-lt), var(--blue-dk));
  box-shadow: 0 0 12px var(--blue-glow);
}

.doc p, .doc li { font-size: var(--fs-md); line-height: 1.75; color: var(--text); }
.doc ul { padding-left: 22px; margin: 10px 0; }
.doc li { margin-bottom: 7px; }
.doc li::marker { color: var(--blue); }
.doc p.fine-print { font-size: var(--fs-sm); color: var(--text-faint); }

.doc table {
  margin: 14px 0;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: var(--r-sm);
  background: rgba(3, 5, 10, 0.5);
  box-shadow: var(--bevel-in);
  overflow: hidden;
}

.doc td { vertical-align: top; color: var(--text); }
.doc tbody tr:last-child td { border-bottom: 0; }

/* A block of machine-readable text: the same CRT the homepage's agent prompt
   uses, minus the bezel, since these sit inline in a card. */
.terminal {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #000;
  border-radius: var(--r-sm);
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 90% at 50% 0%, #0a1410, #03060a 75%);
  color: var(--green-lt);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  text-shadow: 0 0 7px rgba(0, 228, 54, 0.55), 0 0 18px rgba(0, 228, 54, 0.25);
  box-shadow: var(--bevel-in);
  overflow-x: auto;
}

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

#site-footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  max-width: 1320px;
  margin: 40px auto 0;
  padding: 30px 24px 48px;
  border: 0;
}

#site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41, 173, 255, 0.35), rgba(0, 228, 54, 0.3), transparent);
}

#site-footer a {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-shadow: var(--emboss);
  transition: color var(--t-med) var(--ease-out), text-shadow var(--t-med) var(--ease-out);
}

#site-footer a:hover {
  color: var(--blue-lt);
  text-decoration: none;
  text-shadow: var(--emboss), 0 0 14px var(--blue-glow);
}

/* ---------------------------------------------------- reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover::after { transform: translateX(-180%) skewX(-18deg); }
}