/* Dendra site stylesheet: the night and sand art direction, shared by every page.
   Served from this site only: the Content-Security-Policy allows styles and fonts from 'self', so
   nothing here may point at another host. Page-specific rules stay in the page.
   Markup to copy (header, footer, components): design/brand/SITE-COMPONENTS.md in the repository. */

/* Fonts. Each family is one variable file per script subset; the browser fetches latin-ext only
   when a page uses one of its characters. Their licences sit beside them in /fonts/. The Instrument
   files are named without a dash before the family's last word: the repository's French detector
   reads that word, alone between dashes, as French. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrumentsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrumentsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens. The first block is the palette of the brand kit, one name per role. The second block holds
   the few shades the chosen home page mockup derives from it (surfaces, lines) and the darker branch
   and live colours that keep small text above a 4.5 contrast ratio on sand. */
:root {
  --night: #0b1110;
  --sand: #efe8da;
  --shoot: #8bc34a;
  --deep: #4e7a1e;
  --deep-text: #3d6418;
  --live: #3fe3d7;
  --power: #5aa9f2;
  --privacy: #a98bf5;
  --ecosystem: #7fe8c0;
  --night-head: #ecf3e6;
  --night-text: #c2d0bb;
  --night-muted: #9fb19a;
  --ink-head: #1d1a16;
  --ink-text: #3d3831;
  --ink-muted: #5e574d;

  --night-raised: #111a16;
  --night-sunken: #0e1614;
  --night-line: #1f2c26;
  --night-line-strong: #2c4433;
  --night-root: #5f7a63;
  --live-line: #1e4a47;
  --shoot-light: #b6e07a;
  --code-command: #d4f0a8;
  --sand-raised: #f6f2e9;
  --sand-line: #d8cfbd;
  --sand-line-strong: #a59b8a;
  --live-ink: #0b6f6a;
  --power-ink: #24649f;
  --privacy-ink: #6a4cc8;
  --ecosystem-ink: #156b52;
  --power-rule: #2f7fd0;
  --privacy-rule: #7656d6;
  --ecosystem-rule: #1e8f6c;
  --grid-line: rgba(139, 195, 74, 0.05);

  --font-display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-h1: clamp(38px, 4.2vw + 16px, 62px);
  --fs-h2: clamp(30px, 2.2vw + 20px, 42px);
  --fs-h3: 20px;
  --fs-lead: clamp(17px, 0.6vw + 15px, 19px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-mono: 13px;
  --fs-label: 12px;
  --fs-stat: 28px;

  --container: 1140px;
  --gutter: max(16px, 4vw);
  --band-pad: clamp(56px, 4vw + 40px, 80px);
  --header-h: 72px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 12px;
}

/* Context colours. Components read these, so the same markup works on a night band and on a sand
   band. A terminal or a code panel stays night wherever it sits, as in the mockup. */
:root,
.band--night,
.band--plain,
.on-night,
.terminal {
  --c-bg: var(--night);
  --c-head: var(--night-head);
  --c-text: var(--night-text);
  --c-muted: var(--night-muted);
  --c-accent: var(--shoot);
  --c-link: var(--shoot);
  --c-link-hover: var(--shoot-light);
  --c-line: var(--night-line);
  --c-line-strong: var(--night-line-strong);
  --c-raised: var(--night-raised);
  --c-live: var(--live);
  --c-live-line: var(--live-line);
  --c-code: var(--shoot-light);
  --c-focus: var(--shoot);
  --btn-bg: var(--shoot);
  --btn-fg: var(--night);
  --btn-hover: var(--shoot-light);
  --c-warn: #e0b24a;
  --c-bad: #f08a78;
}
.band--sand,
.on-sand {
  --c-bg: var(--sand);
  --c-head: var(--ink-head);
  --c-text: var(--ink-text);
  --c-muted: var(--ink-muted);
  --c-accent: var(--deep);
  --c-link: var(--deep-text);
  --c-link-hover: var(--ink-head);
  --c-line: var(--sand-line);
  --c-line-strong: var(--sand-line-strong);
  --c-raised: var(--sand-raised);
  --c-live: var(--live-ink);
  --c-live-line: var(--live-ink);
  --c-code: var(--deep-text);
  --c-focus: var(--deep-text);
  --btn-bg: var(--night);
  --btn-fg: var(--sand);
  --btn-hover: var(--night-line-strong);
  --c-warn: #8a5a00;
  --c-bad: #a63a2b;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
/* No overflow-x: hidden here. It would hide a page that overflows instead of showing the fault, and
   the render bench reads overflow on the body as the defect itself. */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(139, 195, 74, 0.3); color: var(--night-head); }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--c-head);
  font-family: var(--font-display);
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.025em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; }
h4 { font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
p { margin: 0; }
p + p { margin-top: 1em; }
b, strong { font-weight: 600; color: var(--c-head); }
a {
  color: var(--c-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--c-link-hover); }
a, button, summary { touch-action: manipulation; }
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
img, video { max-width: 100%; height: auto; }
svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 32px 0; }
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--c-code);
  overflow-wrap: break-word;
}
pre {
  margin: 0;
  font-family: var(--font-mono);
  overflow-x: auto;
}
pre code { color: inherit; font-size: inherit; }
.mono { font-family: var(--font-mono); }
/* A command-line flag in running text stays on one line, so "--judge" never breaks after its hyphens. */
code.flag { white-space: nowrap; }
/* The mono font draws programming ligatures: a double hyphen would read as one dash, and a flag
   copied by eye would be wrong. */
code, kbd, samp, pre, .mono, .label, .live, .stat__value, .table--data, .terminal {
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
}
.nowrap { white-space: nowrap; }
.muted { color: var(--c-muted); }
.accent { color: var(--c-accent); }
.lead { font-size: var(--fs-lead); color: var(--c-text); max-width: 34em; }
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--c-muted);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--shoot);
  color: var(--night);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* Layout */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band { background: var(--c-bg); color: var(--c-text); }
/* The fine 40 px grid of the night bands: two 1 px lines, drawn, never a colour wash. */
.band--night {
  background-color: var(--night);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
.band--plain { background: var(--night); }
.band--sand { background: var(--sand); }
.section { padding-block: var(--band-pad); }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 28px;
}
/* A live badge in the row keeps its own colours: cyan when read, muted while reading or failed. */
.section-head > p:not(.live) { color: var(--c-muted); max-width: 40em; }
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 48px;
}
.split > * { flex: 1 1 320px; min-width: 0; }
.split > .split__main { flex: 999 1 480px; }
.split--top { align-items: flex-start; }
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 260px), 100%), 1fr));
}
.grid > * { min-width: 0; }
.stack > * + * { margin-top: var(--stack, 16px); }
/* The short text that opens a band, under or beside its title. */
.band-intro { max-width: 40em; }
.band-intro > * + * { margin-top: 14px; }
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--night);
  border-bottom: 1px solid var(--night-line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  flex: none;
  color: var(--night-head);
  text-decoration: none;
}
.brand:hover { color: var(--night-head); }
.brand__mark { width: 32px; height: 32px; flex: none; color: var(--shoot); }
.brand__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.brand--small .brand__mark { width: 24px; height: 24px; }
.brand--small .brand__name { font-size: 19px; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 0 22px;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--night-muted);
  font-size: 15px;
  text-decoration: none;
}
.site-nav__link:hover { color: var(--night-head); }
.site-nav__link svg, .menu__panel svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.site-nav .btn { margin-left: 4px; }

/* Mobile menu: a details element, so it opens and closes with no script and works under the strict
   policy of the wallet page. The panel keeps the class "wrap": the render bench measures the drawer
   links against it. The open panel sits in the flow of the header, under the bar, and pushes the page
   down: an overlay would hide the page's first links from a keyboard user who tabs past the menu.
   The toggle is pinned to the bar's top right, so it stays in place when the open menu wraps below. */
.menu { display: none; }
.navtoggle {
  position: absolute;
  top: calc((var(--header-h) - 44px) / 2);
  right: calc(var(--gutter) - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--night-head);
  cursor: pointer;
  list-style: none;
}
.navtoggle::-webkit-details-marker { display: none; }
.navtoggle::marker { content: ""; }
.navtoggle svg { width: 24px; height: 24px; }
.navtoggle .navtoggle__close { display: none; }
.menu[open] .navtoggle .navtoggle__open { display: none; }
.menu[open] .navtoggle .navtoggle__close { display: block; }
.menu__panel {
  display: grid;
  gap: 0;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 4px 0 20px;
  border-top: 1px solid var(--night-line);
}
.menu__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--night-text);
  font-size: 17px;
  text-decoration: none;
  border-bottom: 1px solid var(--night-line);
}
.menu__panel a:hover { color: var(--night-head); }
.menu__panel a.btn {
  justify-content: center;
  margin-top: 16px;
  border-bottom: 0;
  color: var(--btn-fg);
}
.menu__panel a.btn:hover { color: var(--btn-fg); }
@media (max-width: 1239px) {
  .site-nav__word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
/* The drawer takes over below 1140 px: with the Start link, the full bar no longer fits its box at 1024 px. */
@media (max-width: 1139px) {
  .site-nav { display: none; }
  .site-header__bar { position: relative; flex-wrap: wrap; gap: 0 16px; }
  .site-header .brand { min-height: var(--header-h); }
  .menu { display: block; }
  .menu[open] { flex: 0 0 100%; }
  :root { --header-h: 64px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__name { font-size: 22px; }
}

/* Footer */
.site-footer {
  background: var(--night);
  color: var(--night-muted);
  border-top: 1px solid var(--night-line);
  padding-block: 40px 48px;
  font-size: var(--fs-small);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: 20px;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--night-muted);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--night-head); }
.site-footer__note {
  max-width: 90ch;
  padding: 18px 20px;
  border: 1px solid var(--night-line);
  border-radius: var(--radius-lg);
  background: var(--night-raised);
  font-size: 13px;
  line-height: 1.7;
}
.site-footer__note b { color: var(--night-text); }
.site-footer__legal { margin-top: 20px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: var(--btn-hover); color: var(--btn-fg); }
.btn--secondary {
  background: transparent;
  border-color: var(--c-line-strong);
  color: var(--c-head);
}
.btn--secondary:hover { border-color: var(--c-accent); color: var(--c-head); }
.btn--small { min-height: 40px; padding: 8px 18px; font-size: 15px; }
button.btn { appearance: none; -webkit-appearance: none; }

/* Choice rows: a large link that names an action and its condition (the mockup's "Plant your node"). */
.choices { display: grid; gap: 12px; }
.choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 20px 24px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-lg);
  color: var(--c-head);
  text-decoration: none;
}
.choice:hover { border-color: var(--c-accent); color: var(--c-head); }
.choice__title { font-weight: 600; }
.choice__hint { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--c-muted); }
.choice--primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.choice--primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-fg); }
.choice--primary .choice__hint { color: var(--btn-fg); }

/* Cards */
.card {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-raised);
}
.card > * + * { margin-top: 8px; }
.card p { color: var(--c-text); }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--c-line-strong); }

/* Live figures. A value read at load time sits in .stat__value; when the read fails the page writes
   that it is unavailable and adds .is-unavailable, never a number from an earlier visit. */
.stats {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.stat {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-raised);
}
.stat__value {
  margin: 0;
  color: var(--c-head);
  font-family: var(--font-mono);
  font-size: var(--fs-stat);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat__value--live { color: var(--c-live); }
.stat__value--accent { color: var(--c-accent); }
.stat__label { margin: 0; color: var(--c-muted); font-size: var(--fs-small); }
.stat__value.is-unavailable,
.is-unavailable {
  color: var(--c-muted);
}
.stat__value.is-unavailable {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  padding-block: 4px;
}

/* Live badge: cyan means read live, and nothing else. While reading, or when the read failed, the
   badge turns muted and its text says so. */
.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  color: var(--c-live);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
}
.live::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.live--pill {
  padding: 5px 12px;
  border: 1px solid var(--c-live-line);
  border-radius: 999px;
}
.live.is-reading,
.live.is-unavailable {
  color: var(--c-muted);
  border-color: var(--c-line-strong);
}
.live.is-reading::before,
.live.is-unavailable::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Tables. .table-wrap scrolls sideways inside itself, so a wide table never widens the page. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-raised);
}
.table {
  width: 100%;
  border-collapse: collapse;
  color: var(--c-text);
  font-size: 15px;
}
.table th,
.table td {
  padding: 11px 20px;
  text-align: left;
  vertical-align: top;
}
.table th {
  color: var(--c-muted);
  font-weight: 400;
  font-size: var(--fs-small);
}
.table td,
.table th[scope="row"] { border-top: 1px solid var(--c-line); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table--data { font-family: var(--font-mono); font-size: var(--fs-mono); }
.table--data th { font-size: var(--fs-mono); }
.table--data td, .table--data th { white-space: nowrap; }
.table .is-live { color: var(--c-live); }

/* Code and terminal blocks. Always night, with JetBrains Mono for the code only. */
.terminal {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  background: var(--night-sunken);
  color: var(--night-text);
}
.terminal__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--night-line);
  color: var(--night-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}
.terminal pre {
  padding: 14px 16px;
  color: var(--code-command);
  font-size: var(--fs-mono);
  line-height: 1.7;
}
.terminal--output pre { color: var(--night-text); }
.terminal__bar { align-items: center; }
/* Copy button in a terminal bar. The page script adds it, so without a script a command stays plain
   text to select; the script marks a done copy with .done or .is-done. :where() keeps the
   specificity of a single class, so a page can still place the button in its own bar layout. */
:where(.terminal) .copy {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  min-height: 32px;
  padding: 3px 12px;
  border: 1px solid var(--night-line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--night-muted);
  font: 600 12px/1.4 var(--font-text);
  cursor: pointer;
}
:where(.terminal) .copy:hover { border-color: var(--shoot); color: var(--night-head); }
:where(.terminal) .copy.done,
:where(.terminal) .copy.is-done { border-color: var(--shoot); color: var(--shoot); }
.terminal .prompt { color: var(--night-muted); user-select: none; -webkit-user-select: none; }
.tok-key { color: var(--night-head); }
.tok-str { color: var(--shoot-light); }
.tok-com { color: var(--night-muted); }
@media (max-width: 480px) {
  .terminal pre { padding: 12px; font-size: var(--fs-label); }
}

/* Numbered steps: 01, 02, 03 in mono, the accent of the band. */
.steps {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps > li {
  display: flex;
  gap: 18px;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  min-width: 36px;
  color: var(--c-accent);
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1.2;
}
.steps__title {
  margin: 0 0 4px;
  color: var(--c-head);
  font-family: var(--font-text);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
}
.steps > li > div { flex: 1 1 0%; min-width: 0; }
.steps p { color: var(--c-muted); }
.steps .terminal { margin-top: 12px; }

/* Questions: a details element per question. The plus and minus are two drawn bars, no glyph. */
.faq { display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-raised);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 16px 20px;
  color: var(--c-head);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--c-accent);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
}
.faq details[open] summary::after {
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
}
.faq__body { padding: 0 20px 18px; color: var(--c-text); }

/* Long text (docs, litepaper). */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose .table-wrap, .prose .terminal { margin-top: 1.4em; }
.note {
  padding: 14px 18px;
  border-left: 2px solid var(--c-accent);
  background: var(--c-raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--c-text);
}

/* Two-way switch (Simple and Advanced views). Buttons carry aria-pressed. */
.segmented {
  display: inline-flex;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.segmented button {
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: var(--c-muted);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--c-line-strong); }
.segmented button[aria-pressed="true"] { background: var(--c-raised); color: var(--c-head); }

/* Branch colours of the tree and of the roadmap. A .branch-* class sets --branch; the helpers read
   it. On sand the darker ink keeps small text readable and the rule keeps the brand hue. */
.branch-power { --branch: var(--power); --branch-rule: var(--power); }
.branch-privacy { --branch: var(--privacy); --branch-rule: var(--privacy); }
.branch-ecosystem { --branch: var(--ecosystem); --branch-rule: var(--ecosystem); }
.branch-network { --branch: var(--shoot); --branch-rule: var(--shoot); }
.band--sand .branch-power, .on-sand .branch-power { --branch: var(--power-ink); --branch-rule: var(--power-rule); }
.band--sand .branch-privacy, .on-sand .branch-privacy { --branch: var(--privacy-ink); --branch-rule: var(--privacy-rule); }
.band--sand .branch-ecosystem, .on-sand .branch-ecosystem { --branch: var(--ecosystem-ink); --branch-rule: var(--ecosystem-rule); }
.band--sand .branch-network, .on-sand .branch-network { --branch: var(--deep-text); --branch-rule: var(--deep); }
.branch-text { color: var(--branch, var(--c-muted)); }
.branch-rule { border-top: 2px solid var(--branch-rule, var(--c-line-strong)); padding-top: 16px; }
.branch-fill { fill: var(--branch, currentColor); }
.branch-stroke { stroke: var(--branch, currentColor); }

/* Drawings */
.tree { display: block; width: 100%; max-width: 500px; height: auto; margin-inline: auto; }
.figure { display: block; width: 100%; height: auto; }
/* Explanatory diagrams (inline SVG): boxes on the raised surface, titles and notes in the text font,
   accent lines in the band's accent. Accent text takes the link colour, deep green text on sand,
   because the deep green of lines falls under 4.5:1 at 12 px. Warning and failure strokes stay with
   each page, which says what they mean. */
.dg { display: block; width: 100%; height: auto; }
.dg .dg-box { fill: var(--c-raised); stroke: var(--c-line-strong); stroke-width: 1.2; }
.dg .dg-t { fill: var(--c-head); font: 600 13px var(--font-text); }
.dg .dg-m { fill: var(--c-muted); font: 400 12px var(--font-text); }
.dg .dg-mono { font-family: var(--font-mono); }
.dg .dg-acc { stroke: var(--c-accent); fill: none; stroke-width: 1.6; }
.dg .dg-accf { fill: var(--c-accent); }
.dg text.dg-accf { fill: var(--c-link); }
.dg .dg-dash { stroke-dasharray: 4 4; }

@media (max-width: 640px) {
  .section-head { margin-bottom: 22px; }
  .card, .stat { padding: 16px 18px; }
  .choice { padding: 18px 20px; }
  .table th, .table td { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}