:root {
  /* Faceplate v2.0.0 (vendored, dist/) — project semantics aliased onto --fp-* */
  --bg:var(--fp-surface); --surface:var(--fp-bg); --border:var(--fp-border);
  --text:var(--fp-body); --text-bright:var(--fp-ink); --muted:var(--fp-muted); --accent:var(--fp-sage-deep);
}
/* Scoped reset. A universal `* { margin:0; padding:0 }` reaches into
   @layer fp.components and silently zeroes .fp-btn / .fp-chip / .fp-seg
   padding -- unlayered CSS beats layered CSS regardless of specificity, which
   is how a real project shipped a segmented control reading "anyyesno".
   See dist/docs/using-faceplate.md#a-note-on-resets

   The exclusion is wrapped in :where() on purpose. Bare
   :not([class*="fp-"]):not([class*="fp-"] *) carries the specificity of its
   arguments -- two attribute selectors, (0,2,0) -- which outranks every
   single-class rule in this file and quietly flattens .container's
   `margin:0 auto`. :where() is always (0,0,0), so this keeps the reach of the
   old universal reset and none of its weight. */
* { box-sizing:border-box; }
*:where(:not([class*="fp-"]):not([class*="fp-"] *)) { margin:0; padding:0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--fp-font-sans);
  font-size: var(--fp-text-sm); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.container { max-width: 480px; margin:0 auto; padding:var(--fp-space-4) var(--fp-space-3) var(--fp-space-5); }
h1 { color: var(--text-bright); font-size: var(--fp-text-h3); margin-bottom:var(--fp-space-3); }
h2 { color: var(--text-bright); font-size: var(--fp-text-base); margin:var(--fp-space-4) 0 var(--fp-space-2); }
p, li { margin-bottom:var(--fp-space-2); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -- Header - structural (intensity 02) ------------------------------------
   Faceplate unbranded: no band, no monogram plate, no wordmark. Identity is
   the product glyph plus an ink keyline; colour coverage stays inside 02. */
.header { display:flex; align-items:center; gap:var(--fp-space-3) var(--fp-space-4); flex-wrap:wrap;
  padding:0 0 var(--fp-space-3); margin:var(--fp-space-3) 0 var(--fp-space-4);
  border-bottom:var(--fp-keyline) solid var(--fp-ink); }
.brand { display:flex; align-items:center; gap:var(--fp-space-3); }
.brand-mark { width:var(--fp-space-5); height:var(--fp-space-5); flex-shrink:0;
  display:inline-grid; place-items:center; color:var(--fp-sage); }
.brand-mark svg { width:100%; height:100%; display:block; }
.header h1 { font-family:var(--fp-font-sans); font-size:var(--fp-text-h3); font-weight:800;
  letter-spacing:var(--fp-track-tight); color:var(--fp-ink); text-transform:uppercase;
  line-height:var(--fp-leading-tight); margin-bottom:0; }
.header h1 span { color:var(--fp-sage); }
.model { font-family:var(--fp-font-mono); font-size:var(--fp-text-xxs); letter-spacing:var(--fp-track-label);
  color:var(--fp-muted); text-transform:uppercase; margin-top:var(--fp-space-1); }
.nav { display:flex; gap:var(--fp-space-3); flex-wrap:wrap; margin-left:auto; }
.nav a, .nav-link { font-family:var(--fp-font-sans); font-size:var(--fp-text-xs); font-weight:500;
  letter-spacing:var(--fp-track-label); text-transform:uppercase; color:var(--fp-body); text-decoration:none;
  padding:var(--fp-space-1) 0; border-bottom:var(--fp-keyline) solid transparent;
  transition:color .14s, border-color .14s; }
.nav a:hover, .nav-link:hover { color:var(--fp-sage-deep); border-bottom-color:var(--fp-sage); text-decoration:none; }
.updated { font-family:var(--fp-font-mono); font-size:var(--fp-text-xxs); color:var(--fp-muted); }