/* unsmuggle — instrument-panel register, deliberately unlike the purifai site.
   Plex Mono is doing real work here: this page prints a lot of codepoint
   escapes (U+E0000, U+FE0F) that must not be ambiguous. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url('/fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

:root {
  /* Paper is tinted toward the cool anchor, never #fff — a pure-white
     surface reads flat and synthetic next to the dark code slabs. */
  --bg: #fcfdfe;
  --fg: #14181d;
  --muted: #5d6873;
  --rule: #dfe4ea;
  --slab: #f4f6f8;
  --code-bg: #0f1419;
  --code-fg: #d5dde5;

  /* Syntax tokens live here, not inline in the pre rules. */
  --syn-keyword: #b98ae0;
  --syn-string: #7fb086;
  --syn-number: #c9922f;
  --syn-comment: #7a8794;

  --hard: #0f7b52;
  --mid: #9a6100;
  --soft: #6b7682;
  --alarm: #b4341f;
  --link: #1a5fb4;

  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --measure: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #dbe1e8;
    --muted: #8b98a5;
    --rule: #232b34;
    --slab: #161c23;
    --code-bg: #060a0e;
    --code-fg: #cfd8e3;

    --syn-keyword: #c792ea;
    --syn-string: #a5d6a7;
    --syn-number: #ffcb6b;
    --syn-comment: #7a8794;

    --hard: #3fb984;
    --mid: #d99b34;
    --soft: #8b98a5;
    --alarm: #ef6b52;
    --link: #6ba6f5;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: clamp(1.5rem, 4vw, 3rem) 1.5rem 4rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
}

/* ---- sticky bar ----
   Monospace throughout, matching the instrument register. Every anchor
   target gets scroll-margin-top so `#l2` clears the bar. */

:root {
  --bar: 3.25rem;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  margin: calc(-1 * clamp(1.5rem, 4vw, 3rem)) -1.5rem 2.5rem;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
}

@supports not (backdrop-filter: blur(1px)) {
  .topbar {
    background: var(--bg);
  }
}

.wordmark {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-decoration: none;
  flex: none;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar nav::-webkit-scrollbar {
  display: none;
}

/* Path-segment register, not a SaaS link row: the links read as routes
   (/limits, /normalize) which suits an instrument page and is nothing like
   the Features · Pricing · Docs fingerprint. */
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  text-transform: lowercase;
}

.topbar nav a::before {
  content: '/';
  color: var(--rule);
  margin-right: 0.1em;
}

/* External destinations aren't routes — mark them as leaving the site. */
.topbar nav a[href^='http']::before {
  content: '↗';
  margin-right: 0.25em;
}

.topbar nav a:hover {
  color: var(--fg);
}

.topbar nav a:hover::before {
  color: var(--hard);
}

/* Status square, echoing the favicon's revealed-character motif. */
.wordmark::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 1px;
  background: var(--hard);
  vertical-align: baseline;
}

:target,
h2[id] {
  scroll-margin-top: calc(var(--bar) + 1rem);
}

/* ---- masthead ---- */

.masthead {
  margin-bottom: 3rem;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

h1 {
  font-family: var(--mono);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 0.85rem;
}

.lede {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 0.85rem;
  text-wrap: balance;
}

.sub {
  color: var(--muted);
  margin: 0;
}

/* ---- structure ---- */

section {
  margin-bottom: 3rem;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  text-wrap: balance;
}

h3 {
  font-size: 0.8125rem;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2rem 0 0.75rem;
}

p {
  margin: 0 0 0.9rem;
}

strong {
  font-weight: 600;
}

.note {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

/* ---- code ---- */

/* Inline code wraps. This page prints long codepoint runs
   (U+E0068 U+E0065 …) that would otherwise force the whole page to
   scroll sideways on a phone. Non-breaking spaces pin the few short
   tokens that genuinely must stay on one line. */
code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--slab);
  padding: 0.12em 0.35em;
  border-radius: 3px;
  overflow-wrap: break-word;
}

pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.65;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  white-space: pre;
  color: inherit;
}

pre .k {
  color: var(--syn-keyword);
}
pre .s {
  color: var(--syn-string);
}
pre .n {
  color: var(--syn-number);
}
pre .c {
  color: var(--syn-comment);
  font-style: italic;
}

/* ---- the specimen with the real hidden payload ---- */

.demo .specimen {
  font-family: var(--mono);
  font-size: 0.9375rem;
  background: var(--slab);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.25rem;
  user-select: all;
}

/* ---- the honest-limits warning ---- */

.warning {
  border: 1px solid color-mix(in srgb, var(--alarm) 35%, var(--rule));
  border-left-width: 4px;
  border-left-color: var(--alarm);
  border-radius: 6px;
  padding: 0.25rem 1.25rem 1rem;
}

.warning h2 {
  border-top: none;
  padding-top: 1.25rem;
  color: var(--alarm);
}

.warning .big {
  font-size: 1.0625rem;
  font-weight: 600;
}

.callout-line {
  border-left: 3px solid var(--mid);
  padding-left: 0.9rem;
  margin-bottom: 1rem;
}

/* ---- tables ---- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

th,
td {
  text-align: left;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-width: 2px;
}

/* Percentage columns must align on the decimal — the ASR and benchmark
   tables are read down the column, not across the row. Scoped to .nums so
   the prose columns in the layers and encodings tables stay in the sans. */
.nums td + td {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

td code {
  white-space: normal;
}

.tier {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.t-hard {
  color: var(--hard);
}
.t-mid {
  color: var(--mid);
}
.t-soft {
  color: var(--soft);
}

.tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  white-space: nowrap;
}

tr.cal td {
  color: var(--muted);
}

/* ---- links & footer ---- */

a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-color: currentColor;
}

footer {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  color: var(--muted);
  font-size: 0.875rem;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}

footer p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}