/* The site is dark by design and offers no light theme, so say so rather than
   leaving the browser to guess. Undeclared, `color-scheme` is `normal`, the
   browser assumes light, and it paints every piece of native UI in light on a
   dark page: scrollbars, the select popup, number spinners, the caret, form
   autofill. The `option` rule below was a symptom of exactly this. */
:root { color-scheme: dark; }

:root {
  /* Neutral greys, not navy. The blue cast of the previous palette was half of
     what made the page read as generated; a forensic instrument has no hue in
     its chrome, so every surface here is achromatic and colour is reserved for
     things that mean something. */
  --bg: #0a0a0b;
  --panel: #121214;
  /* A second surface, one step up from --panel, for table heads and strip
     headers. Without it those were drawn with a border alone and disappeared. */
  --panel-2: #171719;
  --border: #26262a;
  --fg: #e9e9ec;
  --muted: #a8a8b0;
  /* One signal colour. --accent marks a finding: links, focus, codepoint
     badges, chips, the kicker. --accent-2 is its opposite and means the check
     came back clean. Nothing else is coloured, so colour always carries a claim.
     Both measured against every surface they sit on -- see the table below. */
  --accent: #ffb020;
  --accent-2: #5ad18a;
  /* Text drawn on top of a filled --accent or --accent-2. Near-black and
     slightly warm so it does not vibrate against the amber. */
  --on-accent: #12100a;
  /* An input has to look like an input. Fields were drawn with --panel on a
     --panel container, which is a contrast ratio of exactly 1.0: no edge at all.
     --field is darker than the surface it sits on, and --field-border clears the
     3:1 WCAG wants for the boundary of a control. Measured, not guessed. */
  --field: #050506;
  --field-border: #6a6a74;
  /* A readout is not a field. It gets an edge you can see, but a quieter one, so
     "where can I type" is answerable without reading any labels. Deliberately
     below the 3:1 control floor: a read-only region is not a control. */
  --readout-border: #3c3c44;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Measured with scripts/check-contrast.py. Floors are WCAG 2.1: 4.5:1 for
     text, 3:1 for the boundary of a control.
       --fg on --bg .............. 16.33:1     --accent on --bg ....... 10.82:1
       --fg on --panel ........... 15.44:1     --accent on --panel .... 10.23:1
       --fg on --field ........... 16.81:1     --accent-2 on --panel ... 9.73:1
       --muted on --bg ............ 8.38:1     --on-accent on --accent  10.40:1
       --muted on --panel ......... 7.92:1     --field-border/--field .. 3.81:1
       --muted on --panel-2 ....... 7.58:1     --field-border/--panel .. 3.50:1 */
}
* { box-sizing: border-box; }

/* Form controls do not inherit the page's palette the way other elements do.
   A button, input or select with no background of its own is painted with the
   browser's, which is near white — and every foreground colour here is chosen
   for a dark ground. That pairing has produced the same contrast bug twice:
   button.btn, fixed at the time with a one-line override, and then button.chip,
   which shipped at 1.34:1 against a WCAG AA floor of 4.5. Fixing it per class
   means the next control is broken until someone notices, so the default is set
   once here and components override it where they want something else. */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
}
/* Options are drawn by the platform, and a transparent one is unreadable on
   the systems that honour the page's colours. `color-scheme: dark` above now
   covers the common case; this stays because the platforms differ in whether
   they honour author styles here at all, and it cannot be tested away from one
   machine. */
option { background-color: var(--panel); color: var(--fg); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
/* The canvas the browser paints outside the body — the overscroll area — is
   white unless the root element carries a colour. */
html { background-color: var(--bg); }
html { scroll-behavior: smooth; }
/* Smooth scrolling can trigger nausea in people with vestibular disorders, so
   it is opt-out for anyone who has asked their OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* No gradient. The centred radial glow was the third of the five things that
   made this page read as machine-generated, and an instrument does not glow. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(1000px, 92vw); margin-inline: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links carry no underline until hover, so keyboard focus needs a visible ring
   of its own; the browser default is easy to lose against this background. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Available to screen readers, removed from the visual layout. Used for the
   section headings that keep the document outline from skipping a level. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Chrome is monospaced and lowercase: nav, labels, keys, counts. Prose stays in
   the sans, because a page of long-measure monospace is a page nobody reads. */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; gap: 16px; border-bottom: 1px solid var(--border);
}
.brand {
  font-family: var(--mono); font-weight: 600; font-size: 1rem;
  color: var(--fg); letter-spacing: .02em;
}
.brand::before { content: "\25A0"; color: var(--accent); margin-right: .5em; }
nav { display: flex; gap: 20px; flex-wrap: wrap; }
nav a { color: var(--muted); font-family: var(--mono); font-size: .78rem; }
nav a:hover { color: var(--fg); text-decoration: none; }

/* Hero. Left-aligned: the centre-axis stack of centred headline, centred lede,
   centred button pair and centred pill row is the generated-landing-page
   skeleton, and nothing here needs to sit on an axis. */
.hero { padding: 44px 0 30px; }
.hero h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.24;
  margin: 0 0 10px; letter-spacing: -.01em; font-weight: 600;
}
.lede { font-size: .96rem; color: var(--muted); max-width: 74ch; margin: 0 0 26px; }
.lede em { color: var(--fg); font-style: normal; }

/* The readout. The page opens as the tool's own output rather than as a
   description of it: input, canonical form, and the per-codepoint table. */
.readout { border: 1px solid var(--border); background: var(--panel); border-radius: 3px; }
.readout > .head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: var(--panel-2); font-family: var(--mono);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.readout .io { display: grid; grid-template-columns: 1fr 1fr; }
.readout .io > div { padding: 14px; }
.readout .io > div + div { border-left: 1px solid var(--border); }
.readout .lbl {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px;
}
.readout .val { font-family: var(--mono); font-size: 1.3rem; margin: 0; word-break: break-all; }
.readout .val .hit { color: var(--accent); }
.readout .meta { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin: 7px 0 0; }
.readout .meta .ref { color: var(--accent); }
.readout .body { padding: 12px 14px; overflow-x: auto; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .readout .io { grid-template-columns: 1fr; }
  .readout .io > div + div { border-left: 0; border-top: 1px solid var(--border); }
}

table.scan { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: .8rem; white-space: nowrap; }
table.scan th {
  text-align: left; font-weight: 400; color: var(--muted); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; padding: 0 18px 8px 0;
}
table.scan td { padding: 4px 18px 4px 0; color: var(--muted); }
table.scan td.g { color: var(--fg); }
table.scan td.cp { color: var(--accent); }
.tag {
  display: inline-block; padding: 0 6px; border-radius: 2px;
  font-size: .7rem; letter-spacing: .06em; border: 1px solid currentColor;
}
.t-fold { color: var(--accent); }
.t-pass { color: var(--accent-2); }

/* Install commands. A line of shell, not a row of pills. */
.install {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.install li { display: flex; }
.install a {
  display: flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--border); background: var(--panel);
  padding: 6px 11px; border-radius: 3px;
  font-family: var(--mono); font-size: .78rem; color: var(--fg);
}
.install a:hover { border-color: var(--accent); text-decoration: none; }
.install .lang { color: var(--muted); }

.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn {
  display: inline-block; padding: 8px 15px; border-radius: 3px;
  border: 1px solid var(--border); color: var(--fg);
  font-family: var(--mono); font-weight: 500; font-size: .8rem;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { background: #ffc247; }

/* Capabilities as ranked rows. Twenty cards of equal weight ranked nothing; a
   row list has an order and a left column that says what kind of thing each is. */
.rows { padding: 34px 0 6px; }
.rows h2, .tools h2 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0 0 14px;
}
.row {
  display: grid; grid-template-columns: 132px 1fr auto; gap: 18px;
  align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--border);
}
.row .k {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.row .d strong { display: block; font-weight: 600; font-size: .98rem; margin-bottom: 2px; }
.row .d span { color: var(--muted); font-size: .9rem; }
.row .go { font-family: var(--mono); font-size: .74rem; color: var(--muted); white-space: nowrap; }
.row a { color: inherit; }
.row a:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 700px) { .row { grid-template-columns: 1fr; gap: 3px; } }

/* Tools index. A two-column list, not thirteen more cards. */
.tools { padding: 30px 0 6px; }
.tools-lede { color: var(--muted); max-width: 74ch; margin: 0 0 18px; font-size: .92rem; }
.tool-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.tool-list li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tool-list a { display: flex; gap: 12px; align-items: baseline; color: var(--fg); }
.tool-list a:hover { color: var(--accent); text-decoration: none; }
.tool-list .n { font-family: var(--mono); font-size: .72rem; color: var(--muted); min-width: 2.1em; }
.tools-more { margin: 16px 0 0; font-family: var(--mono); font-size: .78rem; }
@media (max-width: 720px) { .tool-list { columns: 1; } }

/* Scope. Kept as a quotation, but drawn as a note rather than a card. */
.quote { padding: 30px 0 6px; }
.quote blockquote {
  margin: 0; padding: 14px 16px; border-left: 2px solid var(--accent-2);
  background: var(--panel); border-radius: 0 3px 3px 0;
  color: var(--muted); font-size: .93rem;
}
.quote p { margin: 0; }

footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 26px 0 44px; margin-top: 28px; border-top: 1px solid var(--border);
  color: var(--muted); font-family: var(--mono); font-size: .76rem;
}
footer .links { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--muted); }
footer a:hover { color: var(--fg); }
@media (max-width: 560px) { header { flex-direction: column; align-items: flex-start; } }

/* The absent cookie banner is a position, not an oversight, and a reader can
   only tell the difference if it is said. Sits in the footer of every page and
   links to the reasoning. */
footer .no-banner { flex-basis: 100%; font-size: .72rem; }
footer .no-banner a { color: var(--muted); border-bottom: 1px dotted var(--border); }
footer .no-banner a:hover { color: var(--fg); text-decoration: none; }