/* Rootpad: site styles. "Above & Below" (docs/SITE-DESIGN.md). Palette and type from brand/BRAND-KIT.md.
   Above the soil line is the market (parchment); below it is the Root vault (dark soil, gold roots).
   Mobile first. Every colour is a brand hue or an exact mix of two brand hues. */

/* ------------------------------------------------------------ tokens: light theme (the default) */
:root {
  /* brand hues (BRAND-KIT §1) */
  --terra-funda: #1c130e;
  --casca: #4a2f1e;
  --terra: #6b4428;
  --musgo: #4d6a35;
  --musgo-claro: #a3b391;
  --ouro: #d4a23a;
  --ouro-escuro: #7a5512;
  --pergaminho: #f4ecdd;
  --fungo: #a93f27;
  --fungo-claro: #ee8d6b;

  --bg: var(--pergaminho);
  --band: #e9dfcf;
  --card: #fbf6ec;
  --card-2: #efe4d0;
  --line: #dccdb3;
  --line-strong: #94765e;
  --track: #dbcebc;
  --fg: var(--terra-funda);
  --muted: var(--casca);
  --soft: var(--terra);
  --accent: var(--musgo);
  --gold-text: var(--ouro-escuro);
  --danger: var(--fungo);
  --wash-gold: #eedfc0;
  --wash-risk: #eddbcb;
  --wash-moss: #e0dcc9;
  --btn-bg: var(--musgo);
  --btn-fg: var(--pergaminho);
  --btn-hover: #41542b;
  --btn-edge: #394725;
  --btn2-bg: var(--terra);
  --btn2-fg: var(--pergaminho);
  --btn2-hover: var(--casca);
  --focus: var(--ouro-escuro);
  --bar-curve: var(--musgo);
  --bar-root: var(--ouro-escuro);
  --moss-edge: var(--musgo);
  --band-rim: transparent;
  --grain: rgba(107, 68, 40, 0.06);
  --hl-top: 0 0 #0000;
  --shadow-1: 0 1px 0 rgba(28, 19, 14, 0.04), 0 2px 6px -2px rgba(74, 47, 30, 0.14);
  --shadow-2: 0 2px 0 rgba(28, 19, 14, 0.04), 0 12px 24px -12px rgba(74, 47, 30, 0.32);
  --shadow-3: 0 24px 48px -16px rgba(28, 19, 14, 0.4);
  --input-bg: var(--card);
  --raised: var(--card);
  /* the living ground (§16): the hero's sky and hills, spores, tufts, the line art of the backgrounds */
  /* the hills have real form (QA 19 Oct 2026: #ebe2d2 / #e4d8c6 on the page were about 1.05:1, so they vanished):
     tints of terra on parchment, the near one with a thin moss rim along its crest */
  --hill-far: #e3d3b8;
  --hill-near: #d8c4a6;
  --hill-rim: rgba(77, 106, 53, 0.38);
  --sky-top: transparent;
  --sky-low: transparent;
  --dusk: transparent;
  --sky-glow: rgba(212, 162, 58, 0.24);
  --sky-moss: rgba(163, 179, 145, 0.22);
  --vignette: rgba(107, 68, 40, 0.08);
  --spore: var(--musgo);
  --spore-2: var(--ouro-escuro);
  --tuft: var(--musgo);
  --art: var(--musgo);
  --art-o: 0.11;
  --card-glow: rgba(212, 162, 58, 0.22);
  --page-glow: rgba(212, 162, 58, 0.14);

  /* soil: always dark, in both themes */
  --soil: var(--terra-funda);
  --soil-2: #24180f;
  --soil-fg: var(--pergaminho);
  --soil-gold: var(--ouro);
  --soil-muted: #d9cdb8;
  --soil-accent: var(--musgo-claro);
  --soil-danger: var(--fungo-claro);
  --soil-line: var(--casca);
  --soil-gold-line: #443218;
  --soil-strata: rgba(74, 47, 30, 0.22);
  --soil-rule: rgba(244, 236, 221, 0.12);

  /* type */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Atkinson Hyperlegible', Verdana, Arial, sans-serif;
  --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;

  /* space, shape, motion */
  --s0: 4px;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;
  --r-xs: 6px;
  --r-sm: 10px;
  --radius: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 240ms;
  --dur-4: 420ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --dur-5: 700ms;
  --gutter: clamp(16px, 4vw, 32px);
  --section-pad: clamp(56px, 7vw, 112px);
  --banner-h: 40px;
  --header-h: 64px;
  color-scheme: light;
}

/* ------------------------------------------------------------ tokens: dark theme (the same values twice) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: var(--terra-funda);
    --band: #271a12; /* a step above --bg, so the field line under the hero shows */
    --card: #2a1b13;
    --card-2: #332116;
    --line: #3f281a;
    --line-strong: #8d6e55;
    --track: #3a2518;
    --fg: var(--pergaminho);
    --muted: #d9cdb8;
    --soft: #c9b89d;
    --accent: var(--musgo-claro);
    --gold-text: var(--ouro);
    --danger: var(--fungo-claro);
    --wash-gold: #322413;
    --wash-risk: #352219;
    --wash-moss: #2a231b;
    --btn-bg: var(--ouro);
    --btn-fg: var(--terra-funda);
    --btn-hover: #dab15b;
    --btn-edge: var(--ouro-escuro);
    --btn2-bg: var(--casca);
    --btn2-fg: var(--pergaminho);
    --btn2-hover: #573722;
    --focus: var(--ouro);
    --bar-curve: var(--musgo-claro);
    --bar-root: var(--ouro);
    --moss-edge: #6f875a;
    --band-rim: #6f875a;
    --grain: rgba(244, 236, 221, 0.025);
    --hl-top: inset 0 1px 0 rgba(244, 236, 221, 0.04);
    --shadow-1: 0 1px 0 rgba(18, 12, 8, 0.55), 0 2px 6px -2px rgba(18, 12, 8, 0.55);
    --shadow-2: 0 2px 0 rgba(18, 12, 8, 0.55), 0 12px 24px -12px rgba(18, 12, 8, 0.65);
    --shadow-3: 0 24px 48px -16px rgba(18, 12, 8, 0.75);
    --input-bg: var(--card-2);
    --raised: var(--card-2);
    /* a dusk sky over darker hills with a moss crest, and a deeper soil: the soil line reads at once in the dark */
    --hill-far: #3a291d;
    --hill-near: #46321f;
    --hill-rim: #6f875a;
    --sky-top: #2b1d14;
    --sky-low: #22170f;
    --dusk: rgba(43, 29, 20, 0.9);
    --sky-glow: rgba(212, 162, 58, 0.18);
    --sky-moss: rgba(111, 135, 90, 0.14);
    --vignette: rgba(8, 5, 3, 0.45);
    --spore: var(--ouro);
    --spore-2: var(--musgo-claro);
    --tuft: #6f875a;
    --art: var(--musgo-claro);
    --art-o: 0.09;
    --card-glow: rgba(212, 162, 58, 0.16);
    --page-glow: rgba(212, 162, 58, 0.07);
    --soil: #0e0906;
    --soil-strata: rgba(74, 47, 30, 0.38);
    --soil-line: #3a281c;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: var(--terra-funda);
  --band: #271a12; /* a step above --bg, so the field line under the hero shows */
  --card: #2a1b13;
  --card-2: #332116;
  --line: #3f281a;
  --line-strong: #8d6e55;
  --track: #3a2518;
  --fg: var(--pergaminho);
  --muted: #d9cdb8;
  --soft: #c9b89d;
  --accent: var(--musgo-claro);
  --gold-text: var(--ouro);
  --danger: var(--fungo-claro);
  --wash-gold: #322413;
  --wash-risk: #352219;
  --wash-moss: #2a231b;
  --btn-bg: var(--ouro);
  --btn-fg: var(--terra-funda);
  --btn-hover: #dab15b;
  --btn-edge: var(--ouro-escuro);
  --btn2-bg: var(--casca);
  --btn2-fg: var(--pergaminho);
  --btn2-hover: #573722;
  --focus: var(--ouro);
  --bar-curve: var(--musgo-claro);
  --bar-root: var(--ouro);
  --moss-edge: #6f875a;
  --band-rim: #6f875a;
  --grain: rgba(244, 236, 221, 0.025);
  --hl-top: inset 0 1px 0 rgba(244, 236, 221, 0.04);
  --shadow-1: 0 1px 0 rgba(18, 12, 8, 0.55), 0 2px 6px -2px rgba(18, 12, 8, 0.55);
  --shadow-2: 0 2px 0 rgba(18, 12, 8, 0.55), 0 12px 24px -12px rgba(18, 12, 8, 0.65);
  --shadow-3: 0 24px 48px -16px rgba(18, 12, 8, 0.75);
  --input-bg: var(--card-2);
  --raised: var(--card-2);
  /* a dusk sky over darker hills with a moss crest, and a deeper soil: the soil line reads at once in the dark */
  --hill-far: #3a291d;
  --hill-near: #46321f;
  --hill-rim: #6f875a;
  --sky-top: #2b1d14;
  --sky-low: #22170f;
  --dusk: rgba(43, 29, 20, 0.9);
  --sky-glow: rgba(212, 162, 58, 0.18);
  --sky-moss: rgba(111, 135, 90, 0.14);
  --vignette: rgba(8, 5, 3, 0.45);
  --spore: var(--ouro);
  --spore-2: var(--musgo-claro);
  --tuft: #6f875a;
  --art: var(--musgo-claro);
  --art-o: 0.09;
  --card-glow: rgba(212, 162, 58, 0.16);
  --page-glow: rgba(212, 162, 58, 0.07);
  --soil: #0e0906;
  --soil-strata: rgba(74, 47, 30, 0.38);
  --soil-line: #3a281c;
  color-scheme: dark;
}

/* ------------------------------------------------------------ soil zones: the same components, dark underground */
.soil,
.meter,
.coin-row .raiz,
.cs-soil,
.site-footer,
.net-banner,
.short-version {
  --fg: var(--soil-fg);
  --muted: var(--soil-muted);
  --soft: var(--soil-muted);
  --accent: var(--soil-accent);
  --gold-text: var(--soil-gold);
  --danger: var(--soil-danger);
  --focus: var(--ouro);
  --line: var(--soil-line);
  --line-strong: #8d6e55;
  --card: var(--soil-2);
  --card-2: var(--soil-2);
  --raised: var(--soil-2);
  --input-bg: var(--soil-2);
  --track: var(--soil-2);
  --wash-gold: #322413;
  --wash-risk: #352219;
  --wash-moss: #2a231b;
  --bar-root: var(--ouro);
  --bar-curve: var(--musgo-claro);
  --btn-bg: var(--ouro);
  --btn-fg: var(--terra-funda);
  --btn-hover: #dab15b;
  --btn-edge: var(--ouro-escuro);
  --btn2-bg: var(--casca);
  --btn2-fg: var(--pergaminho);
  --btn2-hover: #573722;
  color: var(--fg);
  background-color: var(--soil);
}

/* the soil body: roots, gold glints, clay grit and strata (decoration only, never text) */
.band-soil,
.site-footer,
.meter,
.short-version {
  background-image:
    url('/img/decor/roots-band.svg'),
    radial-gradient(circle, rgba(212, 162, 58, 0.1) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(185, 130, 90, 0.16) 0 1.4px, transparent 2px),
    radial-gradient(ellipse 70% 45% at 15% 20%, rgba(74, 47, 30, 0.55), transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 75%, rgba(107, 68, 40, 0.35), transparent 70%),
    repeating-linear-gradient(176deg, transparent 0 38px, var(--soil-strata) 38px 40px, transparent 40px 86px);
  background-size: 1200px auto, 23px 23px, 41px 37px, auto, auto, auto;
  background-position: right bottom, 0 0, 9px 13px, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
}
/* narrower screens: the Root ring of the roots art (270px from the right, 50px from the bottom of the art) moves into
   the bottom corner, under the last line of text, never on it */
@media (max-width: 1079px) {
  .band-soil,
  .site-footer {
    background-position: right -190px bottom -36px, 0 0, 9px 13px, 0 0, 0 0, 0 0;
  }
}

/* the soil line: an undulating horizon with a thin moss rim, on top of every full-width soil band */
.soil {
  position: relative;
}
.soil::before,
.soil::after,
.soil + section::before,
.soil + section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: none;
  -webkit-mask: url('/img/decor/soil-line.svg') 0 0 / 1440px 16px repeat-x;
  mask: url('/img/decor/soil-line.svg') 0 0 / 1440px 16px repeat-x;
}
.soil::before {
  top: -17px;
  background: var(--moss-edge);
}
.soil::after {
  top: -14px;
  background: var(--soil);
}
/* the way back up: the section after a soil band rises into it with the same line */
.soil + section {
  position: relative;
}
.soil + section::before {
  top: -17px;
  background: var(--moss-edge);
}
.soil + section::after {
  top: -14px;
  background: var(--bg);
}
.soil + section.band::after {
  background: var(--band);
}
@supports not ((mask-image: url('/img/decor/soil-line.svg')) or (-webkit-mask-image: url('/img/decor/soil-line.svg'))) {
  .soil::before,
  .soil::after,
  .soil + section::before,
  .soil + section::after {
    display: none;
  }
}

/* ------------------------------------------------------------ base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* anchors and keyboard focus land below the sticky testnet banner (and the sticky header from 900px) */
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: var(--bg);
  /* a soft light at the top of every page, then the paper grain */
  background-image:
    radial-gradient(ellipse 70% 560px at 86% 0, var(--page-glow), transparent 72%),
    radial-gradient(var(--grain) 0.8px, transparent 1.2px),
    radial-gradient(var(--grain) 0.8px, transparent 1.2px);
  background-size: 100% 900px, 19px 19px, 31px 31px;
  background-position: 0 0, 0 0, 9px 13px;
  background-repeat: no-repeat, repeat, repeat;
  color: var(--fg);
  font: 400 17px/1.6 var(--sans);
  font-optical-sizing: auto;
}
main {
  flex: 1 0 auto;
  padding-bottom: var(--s5);
}
main.home {
  padding-bottom: 0;
}
img {
  max-width: 100%;
  height: auto;
}
svg {
  max-width: 100%;
}
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
h1 {
  font-size: clamp(36px, 3vw + 26px, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
}
h2 {
  font-size: clamp(28px, 1.6vw + 22px, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
h3 {
  font-size: clamp(20px, 0.5vw + 18px, 24px);
  line-height: 1.2;
}
p,
ul,
ol,
dl {
  margin: 0 0 1em;
}
ul,
ol {
  padding-left: 1.25em;
}
:where(p, ul, ol, dl, table):last-child {
  margin-bottom: 0;
}
strong {
  font-weight: 700;
}
small,
.small {
  font-size: 16px;
}
.muted {
  color: var(--muted);
}
.note {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.mono,
code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
}
.num {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}
/* the zero count keeps the 14px mono floor (D7); a deeper drop still reads as a subscript */
.num.tiny sub {
  font-size: max(14px, 0.66em);
  line-height: 0;
  vertical-align: -0.36em;
}
.gold {
  color: var(--gold-text);
}
.danger {
  color: var(--danger);
}
/* a value and its unit (or a placeholder and its brackets) never split across lines */
.nowrap {
  white-space: nowrap;
}
.addr {
  font: 400 15px/1.5 var(--mono);
  overflow-wrap: anywhere;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 50;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus,
.skip:focus-visible {
  transform: none;
}
.kicker {
  margin: 0 0 var(--s1);
  font: italic 500 18px/1.3 var(--serif);
  font-variation-settings: 'SOFT' 100;
  color: var(--soft);
}
.lead {
  font-size: clamp(19px, 0.4vw + 17.5px, 22px);
  line-height: 1.5;
  max-width: 58ch;
  color: var(--muted);
}
/* standalone text links ("How the Root vault works →", "Read the risks →"): a comfortable tap target (≥ 40px) */
.text-link {
  display: inline-block;
  padding-block: 9px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.text-link:hover {
  text-decoration-thickness: 2px;
}
.spacer {
  flex: 1 1 auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  align-items: center;
}
.stack > * + * {
  margin-top: var(--s1);
}

/* theme art: only the copy that matches the theme is shown (logos, icons) */
:root[data-theme='light'] .on-dark,
:root[data-theme='dark'] .on-light {
  display: none !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .on-light {
    display: none !important;
  }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .on-dark {
    display: none !important;
  }
}

/* ------------------------------------------------------------ testnet banner (sticky, every page) */
.net-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--banner-h);
  padding: 8px 16px;
  border-bottom: 2px solid var(--soil-danger);
  font: 700 16px/1.35 var(--sans);
  text-align: center;
}
.net-banner::before {
  content: '';
  flex: 0 0 18px;
  height: 18px;
  background: var(--soil-danger);
  -webkit-mask: url('/img/ui/mushroom.svg') center / 18px 18px no-repeat;
  mask: url('/img/ui/mushroom.svg') center / 18px 18px no-repeat;
}

/* ------------------------------------------------------------ header (2 rows on phones, 1 sticky row from 900px) */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'brand actions' 'nav nav';
  align-items: center;
  column-gap: 12px;
}
.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding-block: 8px;
  text-decoration: none;
  border-radius: 8px;
}
.brand img {
  display: block;
}
.brand .logo-sym {
  width: 36px;
  height: 36px;
}
.brand .logo-full {
  display: none;
  width: 127px;
  height: 30px;
}
@media (min-width: 400px) {
  .brand .logo-sym {
    display: none;
  }
  .brand .logo-full {
    display: block;
  }
}
.header-actions {
  grid-area: actions;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.main-nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  border-top: 1px solid var(--line);
}
.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 0 4px;
  color: var(--muted);
  font: 700 16px/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
}
.main-nav a:hover {
  color: var(--fg);
}
.main-nav a[aria-current] {
  color: var(--fg);
}
.main-nav a[aria-current]::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
@media (min-width: 900px) {
  html {
    scroll-padding-top: 124px;
  }
  .site-header {
    position: sticky;
    top: var(--banner-h);
  }
  @supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) and (background: color-mix(in srgb, red 50%, transparent)) {
    .site-header {
      background: color-mix(in srgb, var(--bg) 92%, transparent);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
  }
  .header-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'brand nav actions';
    min-height: var(--header-h);
    column-gap: 24px;
  }
  .brand .logo-full {
    width: 136px;
    height: 32px;
  }
  .main-nav {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .main-nav a {
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--r-pill);
  }
  .main-nav a:hover {
    background: var(--card-2);
  }
  .main-nav a[aria-current]::after {
    left: 14px;
    right: 14px;
    bottom: 3px;
  }
}

/* ------------------------------------------------------------ buttons */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 22px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: 0 2px 0 var(--btn-edge);
  font: 700 17px/1.15 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background: var(--btn-hover);
}
.btn:active {
  box-shadow: none;
}
.btn.lg {
  min-height: 56px;
  padding: 10px 28px;
  font-size: 18px;
}
.btn.block {
  width: 100%;
}
.btn.block + .btn.block {
  margin-top: var(--s1);
}
.btn.secondary {
  background: var(--btn2-bg);
  color: var(--btn2-fg);
  box-shadow: none;
}
.btn.secondary:hover {
  background: var(--btn2-hover);
}
.btn.ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--card-2);
}
.soil .btn.ghost,
.meter .btn.ghost {
  border-color: var(--pergaminho);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  background: var(--card-2);
  color: var(--soft);
  border: 2px dashed var(--line-strong);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.btn[aria-busy='true'][disabled] {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid transparent;
  box-shadow: none;
  cursor: progress;
}
.btn.secondary[aria-busy='true'][disabled] {
  background: var(--btn2-bg);
  color: var(--btn2-fg);
}
.btn[aria-busy='true']::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
}
.btn img {
  width: 28px;
  height: 28px;
}
.btn-wallet {
  min-height: 40px;
  padding: 6px 16px;
  font-size: 16px;
  line-height: 1.15;
}
.btn-wallet[data-state='connected'] {
  background: var(--card-2);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  font: 400 15px/1.15 var(--mono);
}
.btn-wallet[data-state='connected']::before {
  content: '';
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.btn-wallet[data-state='connected']:hover {
  background: var(--card);
}
.btn-wallet[data-state='wrong'] {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid var(--danger);
  box-shadow: none;
}
.btn-wallet[data-state='wrong']:hover {
  background: var(--wash-risk);
}

/* ------------------------------------------------------------ chips and tags */
.chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--fg);
  font: 700 16px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.chip:hover {
  background: var(--card-2);
}
.chip[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.chip[aria-pressed='true']::before,
.chip.copy::before,
.icon-refresh::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url('/img/ui/check.svg') center / 16px 16px no-repeat;
  mask: url('/img/ui/check.svg') center / 16px 16px no-repeat;
}
.icon-refresh::before {
  -webkit-mask-image: url('/img/ui/refresh.svg');
  mask-image: url('/img/ui/refresh.svg');
}
.chip.copy {
  min-height: 32px;
  padding: 0 10px;
  margin-left: 6px;
  font-size: 16px;
  vertical-align: middle;
}
.chip.copy::before {
  flex-basis: 14px;
  width: 14px;
  height: 14px;
  -webkit-mask-image: url('/img/ui/copy.svg');
  mask-image: url('/img/ui/copy.svg');
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}
.theme-toggle {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--fg);
  font: 700 16px/1.2 var(--sans);
  vertical-align: middle;
}
.tag.curve::before,
.tag.grad::before,
.tag.risk::before {
  content: '';
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.tag.grad {
  background: var(--wash-moss);
}
.tag.root {
  background: var(--wash-gold);
  color: var(--gold-text);
}
.tag.risk {
  background: var(--wash-risk);
}
.tag.risk::before {
  background: var(--danger);
}
.tag.dormant {
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  color: var(--muted);
  font-weight: 400;
}
.tag.ai {
  min-height: 24px;
  padding: 1px 9px;
  background: var(--terra-funda);
  border-color: var(--line-strong);
  color: var(--pergaminho);
  font-family: var(--sans);
  letter-spacing: 0.02em;
}
p.tag.placeholder {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px;
  border: 1.5px dashed var(--danger);
  border-radius: 12px;
  background: transparent;
  color: var(--fg);
  line-height: 1.4;
}
span.placeholder {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 1px 10px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--muted);
  font: 400 16px/1.2 var(--sans);
  vertical-align: middle;
}

/* ------------------------------------------------------------ forms */
label {
  display: block;
  margin-bottom: 6px;
  color: var(--fg);
  font: 700 16px/1.3 var(--sans);
}
.field {
  margin-bottom: 20px;
}
input[type='text'],
input[type='url'],
input[type='number'],
input:not([type]),
textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--input-bg);
  color: var(--fg);
  font: 400 18px/1.4 var(--sans);
}
input::placeholder,
textarea::placeholder {
  color: var(--soft);
  opacity: 1;
}
input:focus-visible,
textarea:focus-visible {
  border-color: var(--accent);
}
textarea {
  min-height: 120px;
  resize: vertical;
}
[aria-invalid='true'] {
  border: 2px solid var(--danger) !important;
}
.field .help,
.help {
  margin-top: 6px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}
.field .err,
.err {
  margin-top: 6px;
  color: var(--danger);
  font: 700 16px/1.45 var(--sans);
}
.err:not(:empty) {
  display: flex;
  gap: 8px;
}
.err:not(:empty)::before {
  content: '';
  flex: 0 0 16px;
  height: 16px;
  margin-top: 3px;
  background: currentColor;
  -webkit-mask: url('/img/ui/caution.svg') center / 16px 16px no-repeat;
  mask: url('/img/ui/caution.svg') center / 16px 16px no-repeat;
}
.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card-2);
}
.input-row:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.input-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}
.input-row input:focus-visible {
  outline: none;
}
input.amount {
  font: 600 26px/1.1 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
}
.field .input-row + .help {
  text-align: right;
}
.slip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s2);
}
.slip input {
  width: 6.5em;
  min-height: 40px;
  padding: 6px 10px;
  font-size: 16px;
}
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  padding: 10px 0;
  font-weight: 400;
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--line-strong);
  border-radius: 6px;
  background: var(--input-bg);
  cursor: pointer;
}
.checkbox input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox input:checked::before {
  content: '';
  width: 16px;
  height: 16px;
  background: var(--bg);
  -webkit-mask: url('/img/ui/check.svg') center / 16px 16px no-repeat;
  mask: url('/img/ui/check.svg') center / 16px 16px no-repeat;
}
details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  list-style: none;
  font: 700 16px/1.3 var(--sans);
  cursor: pointer;
  border-radius: 8px;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::after {
  content: '';
  flex: 0 0 20px;
  height: 20px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: url('/img/ui/chevron.svg') center / 20px 20px no-repeat;
  mask: url('/img/ui/chevron.svg') center / 20px 20px no-repeat;
}
details[open] > summary::after {
  transform: rotate(180deg);
}
details > :not(summary) {
  margin-left: var(--s2);
}

/* the Buy / Sell tabs: both look the same (never green / red) */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--s2);
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--card-2);
}
.tabs button {
  appearance: none;
  flex: 1;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--soft);
  font: 700 16px/1.1 var(--sans);
  cursor: pointer;
}
.tabs button[aria-selected='true'] {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--fg);
  box-shadow: var(--shadow-1);
}

/* the segmented control (home sort): native radios, one pill track */
.seg {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--card-2);
  min-inline-size: 0;
}
.seg label {
  position: relative;
  display: inline-flex;
  margin: 0;
}
.seg input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.seg span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  color: var(--soft);
  font: 700 16px/1.1 var(--sans);
  white-space: nowrap;
}
.seg input:checked + span {
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-strong);
}
.seg input:checked + span::before {
  content: '';
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: url('/img/ui/check.svg') center / 14px 14px no-repeat;
  mask: url('/img/ui/check.svg') center / 14px 14px no-repeat;
}
.seg input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ cards, ledgers, callouts */
.card {
  margin-bottom: var(--s3);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-1), var(--hl-top);
}
@media (min-width: 600px) {
  .card {
    padding: 24px;
  }
}
.card > h2,
.card > h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font: 600 22px/1.2 var(--serif);
}
.card h2 img,
.card h3 img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}
.card.empty,
.empty {
  text-align: center;
}
.card.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
}
.card.empty img {
  width: 160px;
}
.card.empty .empty-title {
  margin: 0;
  font: 600 22px/1.3 var(--serif);
}
.dig-stand {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.dig-stand::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 6.5%;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}
.kv {
  display: grid;
  grid-template-columns: minmax(40%, 1fr) minmax(0, auto);
  margin: 0 0 var(--s2);
}
.kv dt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 8px 0;
  color: var(--muted);
  font-size: 16px;
}
.kv dt::after {
  content: '';
  flex: 1 1 16px;
  min-width: 16px;
  border-bottom: 1px dotted var(--line-strong);
}
.kv dd {
  margin: 0;
  padding: 8px 0 8px 8px;
  text-align: right;
  font: 600 16px/1.5 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}
table.calc {
  width: 100%;
  margin: var(--s1) 0 var(--s2);
  border-collapse: collapse;
  font-size: 16px;
}
table.calc td {
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.calc td:last-child {
  text-align: right;
  font: 600 16px/1.5 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
}
table.calc tr.total td {
  font-weight: 700;
  border-top: 2px solid var(--fg);
  border-bottom: 0;
}
table.calc tr.total td:last-child {
  color: var(--gold-text);
}
table.calc tr.aside td {
  border-bottom: 0;
  color: var(--muted);
  font-style: italic;
  font-weight: 400;
}
table.calc tr.aside td:last-child {
  font-style: normal;
}

/* callouts, 3 tiers: risk (mushroom), caution, info. One message each, normal weight, always visible. */
.alert {
  position: relative;
  margin: 12px 0;
  padding: 14px 16px 14px 48px;
  border-inline-start: 4px solid var(--danger);
  border-radius: 12px;
  background: var(--wash-risk);
  color: var(--fg);
  font: 400 16px/1.55 var(--sans);
}
.alert::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 15px;
  width: 22px;
  height: 22px;
  background: var(--danger);
  -webkit-mask: url('/img/ui/mushroom.svg') center / 22px 22px no-repeat;
  mask: url('/img/ui/mushroom.svg') center / 22px 22px no-repeat;
}
.alert.info {
  border-inline-start-color: var(--accent);
  background: var(--wash-moss);
}
.alert.info::before {
  background: var(--accent);
  -webkit-mask-image: url('/img/ui/info.svg');
  mask-image: url('/img/ui/info.svg');
}
.alert.caution,
#prefill-note .alert {
  border-inline-start-color: var(--soft);
  background: var(--card-2);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .alert.caution,
  #prefill-note .alert {
    border-inline-start-color: color-mix(in srgb, var(--danger) 60%, var(--card-2));
  }
}
.alert.caution::before,
#prefill-note .alert::before {
  background: var(--danger);
  -webkit-mask-image: url('/img/ui/caution.svg');
  mask-image: url('/img/ui/caution.svg');
}
.alert a {
  font-weight: 700;
}
.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.45;
}
.status:empty {
  margin-top: 0;
}
.status[data-state='busy']::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
}
.status[data-state='done']::before {
  content: '';
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  -webkit-mask: url('/img/ui/check.svg') center / 18px 18px no-repeat;
  mask: url('/img/ui/check.svg') center / 18px 18px no-repeat;
}
/* an error line (a failed transaction, or "Check the fields marked above." on the create form) */
.status[data-state='error']::before {
  content: '';
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: var(--danger);
  -webkit-mask: url('/img/ui/caution.svg') center / 18px 18px no-repeat;
  mask: url('/img/ui/caution.svg') center / 18px 18px no-repeat;
}
.status a {
  font-weight: 700;
}
.third-party {
  position: relative;
  margin-top: var(--s2);
  padding-left: 28px;
  color: var(--fg);
  font-size: 16px;
}
.third-party::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: var(--danger);
  -webkit-mask: url('/img/ui/mushroom.svg') center / 18px 18px no-repeat;
  mask: url('/img/ui/mushroom.svg') center / 18px 18px no-repeat;
}
.toast {
  position: fixed;
  z-index: 40;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  margin: 0 auto;
  max-width: 560px;
  background: var(--raised);
  box-shadow: var(--shadow-3);
  border-radius: 14px;
}
@media (min-width: 600px) {
  .toast {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 400px;
  }
}

/* progress bars: the text always carries the value */
.bar {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--track);
}
.bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 2px;
  border-radius: var(--r-pill);
  background: var(--bar-curve);
}
.bar.gold > span {
  background: var(--bar-root);
}

/* lists produced by the data panels (lib/panels.js) */
.fungos-reasons,
.creator-facts,
.creator-coins {
  margin: var(--s1) 0 var(--s2);
  padding: 0;
  list-style: none;
}
.fungos-reasons li,
.creator-facts li,
.creator-coins li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.fungos-reasons li:last-child,
.creator-facts li:last-child,
.creator-coins li:last-child {
  border-bottom: 0;
}
.fungos-reasons li::before,
.creator-facts li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}
.creator-facts li::before {
  background: var(--line-strong);
}
.creator-coins li {
  padding-left: 0;
}
/* creator history: the wallet as a mono chip; "(this coin)" as a neutral tag */
#ch-body > p.small:first-child a,
#ch-body > p.small:first-child .addr {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-xs);
  background: var(--card-2);
  font: 400 15px/1.5 var(--mono);
  overflow-wrap: anywhere;
}
.creator-coins .tag {
  min-height: 24px;
  padding: 1px 8px;
  font-weight: 400;
}
#ch-body h3 {
  margin: var(--s3) 0 4px;
  font-size: 18px;
}
.fungos-reasons a,
.creator-facts a {
  font: 400 15px/1.5 var(--mono);
}

/* ------------------------------------------------------------ dialogs (consent, wallets, account, confirm) */
dialog {
  width: calc(100% - 32px);
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--raised);
  color: var(--fg);
  box-shadow: var(--shadow-3);
}
dialog::backdrop {
  background: rgba(18, 12, 8, 0.7);
}
dialog h2 {
  margin-bottom: 12px;
  font: 600 26px/1.2 var(--serif);
}
@media (max-width: 599px) {
  dialog {
    width: 100%;
    max-width: none;
    max-height: 90vh;
    margin: auto 0 0;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
  }
}
.dialog-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  margin-top: 20px;
}
.dialog-actions .btn {
  width: 100%;
}
@media (min-width: 480px) {
  .dialog-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .dialog-actions .btn {
    width: auto;
  }
}
.wallet-list {
  display: grid;
  gap: 8px;
  margin: var(--s2) 0;
  padding: 0;
  list-style: none;
}
.wallet-list .btn {
  width: 100%;
  min-height: 56px;
  justify-content: flex-start;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  font-size: 16px;
}
.wallet-list .btn:hover {
  background: var(--card-2);
}
.wallet-list .btn::after {
  content: '';
  width: 18px;
  height: 18px;
  margin-left: auto;
  background: currentColor;
  transform: rotate(-90deg);
  -webkit-mask: url('/img/ui/chevron.svg') center / 18px 18px no-repeat;
  mask: url('/img/ui/chevron.svg') center / 18px 18px no-repeat;
}
.wallet-list img {
  width: 28px;
  height: 28px;
}

/* ------------------------------------------------------------ coin pictures */
.thumb {
  display: block;
  width: 56px;
  height: 56px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card-2);
  object-fit: cover;
}
.thumb.lg {
  width: 64px;
  height: 64px;
}
@media (min-width: 600px) {
  .thumb.lg {
    width: 88px;
    height: 88px;
  }
}
.thumb.monogram {
  display: grid;
  place-items: center;
  color: var(--pergaminho);
  font: 700 26px/1 var(--serif);
  user-select: none;
}
.thumb.monogram.lg {
  font-size: 32px;
}
/* the creator's picture lies over its monogram and shows once it has loaded (lib/thumb.js) */
.thumb.monogram {
  position: relative;
  overflow: hidden;
}
.thumb-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
}
.has-img > .thumb-img {
  opacity: 1;
}
@media (min-width: 600px) {
  .thumb.monogram.lg {
    font-size: 42px;
  }
}
.thumb.tone-0 {
  background: var(--musgo);
}
.thumb.tone-1 {
  background: var(--terra);
}
.thumb.tone-2 {
  background: var(--casca);
}

/* ------------------------------------------------------------ coin cards (home list; the whole card is one link) */
.coins {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .coins {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .coins {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.coins > li {
  display: flex;
  min-width: 0;
}
a.coin-row,
.coin-row.preview {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas: 'img name' 'prog prog' 'raiz raiz';
  grid-template-rows: auto auto 1fr;
  gap: 12px 14px;
  min-width: 0;
  padding: 18px 18px 0;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-1), var(--hl-top);
  color: var(--fg);
  text-decoration: none;
}
a.coin-row:visited {
  color: var(--fg);
}
a.coin-row:focus-visible {
  outline-offset: 3px;
  border-radius: 16px;
}
@media (hover: hover) {
  a.coin-row:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-2), var(--hl-top);
  }
}
.coin-row .img {
  grid-area: img;
}
.coin-row .name {
  grid-area: name;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
a.coin-row .name strong,
a.coin-row .name .sym {
  padding-right: 52px;
}
/* the name is how people recognise a coin: up to two lines (a full 31-byte name fits), cut only beyond that */
.coin-row .name strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-wrap: balance;
  font: 600 21px/1.25 var(--serif);
}
@media (max-width: 599px) {
  .coin-row .name strong {
    font-size: 20px;
  }
}
.coin-row .name .sym {
  color: var(--muted);
  font: 400 15px/1.35 var(--mono);
  overflow-wrap: anywhere;
}
.coin-row .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.coin-row .tags:empty {
  display: none;
}
.coin-row .dormant-row {
  display: inline-flex;
}
.coin-row .warn {
  display: block;
  position: relative;
  width: 100%;
  padding: 6px 10px 6px 26px;
  border-radius: 10px;
  background: var(--wash-risk);
  color: var(--fg);
  font: 400 16px/1.4 var(--sans);
}
.coin-row .warn::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}
.coin-row .rank {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--card-2);
  color: var(--muted);
  font: 600 15px/1 var(--mono);
}
.coin-row .prog {
  grid-area: prog;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.4;
}
.coin-row .prog .tag {
  justify-self: start;
}
.coin-row .raiz {
  grid-area: raiz;
  align-self: end;
  position: relative;
  margin: 8px -18px 0;
  /* the bottom padding holds the root strip, so it never runs under the redemption line */
  padding: 20px 18px 26px;
  background-image: url('/img/decor/roots-strip.svg');
  background-repeat: no-repeat;
  background-position: right 6px bottom 2px;
  background-size: 240px auto;
}
/* the small soil line on top of the band (::after), with a 2px moss rim under it in the dark theme (::before, in
   --band-rim: transparent in the light theme, where the dark band already stands out) */
.coin-row .raiz::before,
.coin-row .raiz::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 10px;
  background: var(--soil);
  -webkit-mask: url('/img/decor/soil-line.svg') 0 0 / 720px 10px repeat-x;
  mask: url('/img/decor/soil-line.svg') 0 0 / 720px 10px repeat-x;
}
.coin-row .raiz::before {
  top: -11px;
  background: var(--band-rim);
}
.coin-row .raiz-label {
  color: var(--muted);
  font-size: 16px;
}
.coin-row .raiz .num {
  color: var(--gold-text);
  font-size: 24px;
  line-height: 1.3;
  white-space: nowrap;
}
.coin-row .raiz-sub {
  color: var(--muted);
  font-size: 16px;
}
.coin-row .raiz-sub .num {
  font-size: 16px;
  color: var(--fg);
}
/* loading: blocks shaped like the real cards */
.coins > li.skeleton {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 10px 14px;
  min-height: 236px;
  padding: 18px 18px 0;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.sk {
  display: block;
  border-radius: 8px;
  background-color: var(--card-2);
}
.sk-thumb {
  grid-row: span 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.sk-line {
  align-self: end;
  width: 70%;
  height: 18px;
}
.sk-line.short {
  align-self: start;
  width: 40%;
}
.sk-band {
  grid-column: 1 / -1;
  align-self: end;
  height: 96px;
  margin: 16px -18px 0;
  border-radius: 0;
}
.sk-stat {
  width: 4.5ch;
  height: 0.9em;
}

/* ------------------------------------------------------------ home */
.section {
  position: relative;
  padding-block: var(--section-pad);
}
.band {
  background-color: var(--band);
}
.section-head {
  max-width: 760px;
  margin-bottom: var(--s5);
}
.section-head h2 {
  margin-bottom: 12px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.cta-row.center {
  justify-content: center;
  margin-top: var(--s5);
}

/* hero: above and below in one scene (docs/SITE-DESIGN.md §16.2). Tight on purpose (Commander, 18 Oct 2026): the
   coin list starts within about 1.2 phone screens and inside the first 900px of a desktop window. Back to front: the
   sky (a warm light, a vignette, drifting spores), two hills (they move slower than the page: parallax), the copy and
   Dig's burrow, then the ground (the soil line, tufts and sprouts, gold roots and the live line). Every layer is drawn
   in full without motion; the motion block only adds the entrance and the slow life. */
.hero {
  /* Keystone KV-3: on phones the live line ("… test ETH in the Root vaults … · block …") can take 3 lines beside the
     round switch, one more than the sentence it replaces; 90px holds 3 lines (3 × 22.4px + 22px), so the coin list
     below never moves when the read arrives (80px grew the hero by 9px at 320-390px) */
  --ground-h: 90px;
  --bw: 132px; /* the burrow's width: everything in it scales with it */
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: clamp(20px, 3.4vw, 48px);
}
.hero-sky,
.hero-hills,
.ground-life {
  position: absolute;
  pointer-events: none;
}
.hero-sky {
  inset: 0 0 var(--ground-h);
  z-index: -2;
  /* the scene's edges a shade deeper (a vignette), so the light falls on the copy and on Dig; in the dark theme a
     dusk sky (lighter than the soil, so the horizon reads at once) */
  background:
    radial-gradient(ellipse 60% 70% at 8% 100%, var(--sky-moss), transparent 70%),
    radial-gradient(ellipse 130% 100% at 50% 35%, transparent 58%, var(--vignette)),
    linear-gradient(180deg, var(--sky-top), var(--sky-low));
}
.sky-glow {
  position: absolute;
  top: -360px;
  right: -280px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sky-glow) 0, transparent 64%);
}
.spores {
  position: absolute;
  inset: 0;
}
.spores i {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--spore);
  opacity: 0.4;
}
.spores i:nth-child(1) { left: 58%; top: 30%; width: 4px; height: 4px; }
.spores i:nth-child(2) { left: 66%; top: 62%; width: 6px; height: 6px; background: var(--spore-2); }
.spores i:nth-child(3) { left: 75%; top: 20%; width: 3px; height: 3px; }
.spores i:nth-child(4) { left: 83%; top: 46%; background: var(--spore-2); }
.spores i:nth-child(5) { left: 91%; top: 70%; width: 4px; height: 4px; }
.spores i:nth-child(6) { left: 52%; top: 78%; width: 3px; height: 3px; background: var(--spore-2); }
.spores i:nth-child(7) { left: 95%; top: 16%; }
.spores i:nth-child(8) { left: 71%; top: 86%; width: 4px; height: 4px; }
.spores i:nth-child(9) { left: 44%; top: 10%; width: 3px; height: 3px; background: var(--spore-2); }
.spores i:nth-child(10) { left: 30%; top: 88%; width: 4px; height: 4px; }
/* QA 19 Oct 2026: spores over the copy read as dust (one sat inside "Explore coins"). They drift only where Dig is:
   from 1080px in his column, right of the copy's measure; below 1080px around his burrow (.burrow-spores) */
.hero-sky .spores {
  display: none;
}
@media (min-width: 1080px) {
  .hero-sky .spores {
    display: block;
    left: 66%;
  }
  .burrow-spores {
    display: none;
  }
}
/* around the burrow and behind Dig: they rise from the mound to his shoulders (not as high as the sky's spores) */
.burrow-spores {
  top: calc(var(--bw) * 0.14);
  bottom: auto;
  left: -8%;
  right: -8%;
  height: calc(var(--bw) * 0.62);
  pointer-events: none;
}
.burrow-spores i:nth-child(1) { left: 4%; top: 62%; }
.burrow-spores i:nth-child(2) { left: 12%; top: 30%; }
.burrow-spores i:nth-child(3) { left: 88%; top: 40%; }
.burrow-spores i:nth-child(4) { left: 97%; top: 74%; }
.burrow-spores i:nth-child(5) { left: 80%; top: 92%; }
.hero-hills {
  left: 0;
  right: 0;
  bottom: calc(var(--ground-h) - 4px);
  height: clamp(96px, 12vw, 170px);
  z-index: -1;
}
.hero-hills svg {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
}
.hill-far {
  height: 100%;
  color: var(--hill-far);
}
.hill-near {
  height: 50%;
  color: var(--hill-near);
  overflow: visible;
}
/* the near hill's crest: a thin moss line (1.5px at any width: the stroke does not scale with the hill) */
.hill-rim {
  stroke: var(--hill-rim);
  stroke-width: 1.5px;
}
/* phones: lower hills, so the crest stays under the last line of the copy */
@media (max-width: 599px) {
  .hero-hills {
    height: 72px;
  }
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.hero-copy > * {
  margin: 0;
}
.hero-copy .kicker {
  margin-bottom: -4px;
}
.hero .lead {
  font-size: 18px;
  text-wrap: balance;
}
@media (min-width: 600px) {
  .hero-grid {
    gap: 24px;
  }
  .hero-copy {
    gap: 18px;
  }
  .hero-copy .kicker {
    margin-bottom: -6px;
  }
  .hero .lead {
    font-size: clamp(19px, 0.4vw + 17.5px, 22px);
  }
}
.display {
  font-size: clamp(44px, 5.2vw + 26px, 96px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
/* each word is its own box, so the entrance can lift them one by one (the line still wraps between words) */
.display .w {
  display: inline-block;
}
.root-word {
  position: relative;
  font-style: italic;
  font-weight: 600;
  color: var(--gold-text);
}
/* a root grows under "roots.": the brand's gold, a hand-drawn line with two hair roots */
.root-under {
  position: absolute;
  left: 2%;
  bottom: -0.2em;
  width: 92%;
  height: 0.28em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.root-under .twig {
  stroke-width: 1.6;
}
.hero .core {
  position: relative;
  max-width: 52ch;
  padding-left: 30px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
/* tablets and desktops: the two sentences on one line where they fit */
@media (min-width: 600px) {
  .hero .core {
    max-width: 76ch;
  }
}
.hero .core::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background: var(--danger);
  -webkit-mask: url('/img/ui/mushroom.svg') center / 20px 20px no-repeat;
  mask: url('/img/ui/mushroom.svg') center / 20px 20px no-repeat;
}
.hero .core [data-i18n='home.core1'] {
  color: var(--fg);
  font-weight: 700;
}
/* compact enough for the four chips to share one line from 768px (and from 1280px beside Dig) */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 9px 4px 8px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--fg);
  font: 700 16px/1.2 var(--sans);
}
.trust-strip li::before {
  content: '';
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--soft);
  border-radius: 50%;
}
/* phones: the four facts read as one quiet line that wraps (pills would need three rows at 360-414px) */
@media (max-width: 599px) {
  .trust-strip {
    display: block;
    max-width: 44ch;
  }
  .trust-strip li {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    line-height: 1.55;
    /* each fact stays whole: the line only wraps between facts */
    white-space: nowrap;
  }
  .trust-strip li:not(:last-child) {
    margin-right: 10px;
  }
  .trust-strip li::before {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    vertical-align: 1px;
  }
}
/* phones: every button of a home call-to-action row is full width (never some full and some not). The hero is the
   exception: its two buttons share one row from 360px (they fit: 2 × about 155px), and wrap to full width if not */
@media (max-width: 599px) {
  .home .cta-row,
  .home .ug-cta,
  .home .not-live-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .home .cta-row .btn,
  .home .ug-cta .btn,
  .home .not-live-links .btn {
    width: 100%;
  }
  .home .hero .cta-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .home .hero .cta-row .btn {
    flex: 1 1 auto;
    width: auto;
    min-height: 52px;
    padding-inline: 16px;
    white-space: nowrap;
  }
  .hero .cta-row .text-link {
    align-self: flex-start;
    padding-block: 8px 2px;
  }
}

/* Dig says: his own lines only, signed "Dig" (we wrote them; the "(AI)" marker belongs only where the Telegram bot
   or its answers are described, §16.6) */
.dig-say {
  position: relative;
  z-index: 2;
  margin: 0;
}
.dig-say blockquote {
  position: relative;
  max-width: 30ch;
  margin: 0;
  padding: 14px 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-2), var(--hl-top);
  color: var(--fg);
  font: italic 500 19px/1.4 var(--serif);
  font-variation-settings: 'SOFT' 100;
  hanging-punctuation: first;
}
.dig-say blockquote p {
  margin: 0;
}
/* the tail points at Dig: down on wide screens, to the right where he sits beside his bubble */
.dig-say blockquote::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 16px;
  height: 16px;
  border-right: 1.5px solid var(--line-strong);
  border-bottom: 1.5px solid var(--line-strong);
  background: var(--card);
  transform: translateX(-50%) rotate(45deg);
}
.dig-say figcaption {
  margin-top: 6px;
  color: var(--muted);
  font: italic 500 16px/1.3 var(--serif);
  font-variation-settings: 'SOFT' 100;
}
.dig-say figcaption::before {
  content: '— ';
}

/* Dig's burrow: the back of the hole, the mascot slot, the front lip; a taproot runs from it down to a Root ring in
   the soil. The slot (#hero-mascot) is 200 × 180 art units (§16.4): the art's bottom tenth sits behind the lip */
.hero-burrow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bw);
  align-items: end;
  column-gap: 12px;
  /* the mound sits on the soil line, a little into it */
  margin-bottom: calc(var(--bw) * -0.07);
}
.hero-dig {
  align-self: center;
  justify-self: end;
  /* level with Dig's face */
  margin-bottom: calc(var(--bw) * 0.18);
}
.hero-dig blockquote {
  max-width: 24ch;
  padding: 10px 14px;
  font-size: 17px;
}
.hero-dig blockquote::after {
  left: auto;
  right: -9px;
  bottom: auto;
  top: 50%;
  border-right: 1.5px solid var(--line-strong);
  border-bottom: 0;
  border-top: 1.5px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
}
.hero-dig figcaption {
  text-align: right;
  margin-right: 12px;
}
.burrow-wrap {
  --tap-h: min(calc(var(--bw) * 0.42), calc(var(--ground-h) - 40px));
  position: relative;
  width: var(--bw);
}
/* the box holds the mound and the lower part of the slot; the slot's top may rise above it (headroom for ears or a
   hat), and only the bottom edge clips: there the mascot waits, hidden in the hole, before it peeks out */
.burrow {
  position: relative;
  width: var(--bw);
  height: calc(var(--bw) * 0.8);
  -webkit-clip-path: inset(-80% -30% 0 -30%);
  clip-path: inset(-80% -30% 0 -30%);
}
.burrow-back,
.burrow-front {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: calc(var(--bw) * 0.375);
}
.mascot-slot {
  position: absolute;
  left: calc(var(--bw) * 0.0833);
  bottom: calc(var(--bw) * 0.1667);
  width: calc(var(--bw) * 0.8333);
  height: calc(var(--bw) * 0.75);
}
.mascot-peek,
.mascot-peek img,
.mascot-peek .mascot-art {
  display: block;
  width: 100%;
  height: 100%;
}
.mascot-peek {
  transform-origin: 50% 100%;
}
/* the mascot parts that move (§17): each hook is a wrapper group with no transform attribute, so a CSS transform
   never undoes the drawing's own; its box is its own (twins in the rim layer share it) */
:is(.mascot-art, .feature-art, .lost-art, .page-art) :is(.m-eyes, .m-brows, .m-sprout, .m-wave, .m-tip, .m-crumbs, .m-nodes circle),
.burrow-paws .paw {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
:is(.mascot-art, .feature-art, .lost-art, .page-art) .m-sprout {
  transform-origin: 50% 100%;
}
.feature-art .m-wave {
  transform-origin: 100% 100%;
}
:is(.feature-art, .page-art) .m-tip {
  transform-origin: 27% 76%;
}
.burrow-paws .paw {
  transform-origin: 50% 0;
}
/* the soil Dig throws up as he breaks through: irregular clods, no outline (they fly once; hidden at rest) */
.burrow-dirt {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.burrow-dirt i {
  position: absolute;
  bottom: calc(var(--bw) * 0.2);
  width: calc(var(--bw) * 0.034);
  height: calc(var(--bw) * 0.026);
  border-radius: 58% 42% 50% 46% / 52% 60% 40% 48%;
  background: var(--terra);
  opacity: 0;
}
.burrow-dirt i:nth-child(1) { left: 24%; --dx: calc(var(--bw) * -0.16); --up: calc(var(--bw) * -0.42); --r: -40deg; }
.burrow-dirt i:nth-child(2) { left: 30%; width: calc(var(--bw) * 0.024); height: calc(var(--bw) * 0.02); background: var(--casca); --dx: calc(var(--bw) * -0.1); --up: calc(var(--bw) * -0.56); --r: 70deg; }
.burrow-dirt i:nth-child(3) { left: 36%; width: calc(var(--bw) * 0.02); height: calc(var(--bw) * 0.017); --dx: calc(var(--bw) * -0.05); --up: calc(var(--bw) * -0.34); --r: -90deg; }
.burrow-dirt i:nth-child(4) { left: 52%; width: calc(var(--bw) * 0.018); height: calc(var(--bw) * 0.016); background: var(--casca); --dx: calc(var(--bw) * 0.02); --up: calc(var(--bw) * -0.62); --r: 120deg; }
.burrow-dirt i:nth-child(5) { left: 64%; --dx: calc(var(--bw) * 0.07); --up: calc(var(--bw) * -0.38); --r: 50deg; }
.burrow-dirt i:nth-child(6) { left: 70%; width: calc(var(--bw) * 0.026); height: calc(var(--bw) * 0.021); background: var(--casca); --dx: calc(var(--bw) * 0.13); --up: calc(var(--bw) * -0.5); --r: -60deg; }
.burrow-dirt i:nth-child(7) { left: 75%; width: calc(var(--bw) * 0.02); height: calc(var(--bw) * 0.017); --dx: calc(var(--bw) * 0.18); --up: calc(var(--bw) * -0.3); --r: 100deg; }
.burrow-root {
  position: absolute;
  left: 50%;
  top: calc(100% - 3px);
  width: calc(var(--bw) * 0.8);
  height: var(--tap-h);
  overflow: visible;
  transform: translateX(-50%);
  fill: none;
  stroke: var(--ouro);
  stroke-opacity: 0.55;
  stroke-linecap: round;
}
/* the Root ring at the end of the taproot: the coin's vault (the ring of the symbol), big and glowing so the idea
   reads at a glance: a gold ring, a gold seed in its middle, a soft light around it */
.root-node {
  --rn: 26px;
  position: absolute;
  left: 50%;
  top: calc(100% - 3px + var(--tap-h) * 0.86 - var(--rn) / 2);
  width: var(--rn);
  height: var(--rn);
  margin-left: calc(var(--rn) / -2);
  border: 3px solid var(--ouro);
  border-radius: 50%;
  background: radial-gradient(circle, #eac772 0 3px, var(--ouro) 3.5px 5.5px, var(--soil) 6px);
  box-shadow: 0 0 0 5px rgba(212, 162, 58, 0.14), 0 0 26px 4px rgba(212, 162, 58, 0.38);
}
.root-node::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1.5px solid var(--ouro);
  border-radius: 50%;
  opacity: 0;
}

/* Fungi lives next door: a small cap at the left foot of Dig's mound, growing out of the ground, so both mascots are
   on the first screen. An <img> of the head (the footer loads the same file); it sways as a whole, a transform the
   browser composites, so nothing inside the drawing is redrawn */
.hero-fungi {
  --fs: clamp(40px, calc(var(--bw) * 0.2), 68px);
  position: absolute;
  z-index: 1;
  left: calc(var(--bw) * 0.03 - var(--fs) / 2);
  /* the cap's collar (94% down the image) sits just inside the soil line */
  top: calc(var(--bw) * 0.73 - var(--fs) * 0.9);
  width: var(--fs);
  height: var(--fs);
  transform-origin: 50% 94%;
  pointer-events: none;
}
.hero-fungi img {
  display: block;
  width: 100%;
  height: 100%;
}

/* phones (QA 19 Oct 2026: the first screen of a phone had no mascot): Dig comes up right under the headline, beside
   his bubble, on a cut-away clod of soil with the taproot and the Root ring inside it. The copy's parts become rows
   of the hero's own grid (display: contents) so the burrow can sit between the headline and the lead; the reading
   order stays the page's (headline, lead, buttons, the risk line, the facts, then Dig's line) */
.burrow-clod {
  display: none;
}
@media (max-width: 599px) {
  .hero {
    --clod-h: calc(var(--bw) * 0.3);
  }
  .hero-grid {
    gap: 14px;
    /* the last line of copy stays clear of the soil line and of the hills' crest */
    padding-bottom: 24px;
  }
  .hero-copy {
    display: contents;
  }
  .hero-copy > .kicker {
    order: 1;
  }
  .hero-copy > .display {
    order: 2;
  }
  .hero-burrow {
    order: 3;
    /* room for Dig's sprout under the root drawn below "roots." */
    margin: 6px 0 0;
  }
  .hero-copy > .lead {
    order: 4;
  }
  .hero-copy > .cta-row {
    order: 5;
  }
  .hero-copy > .core {
    order: 6;
  }
  .hero-copy > .trust-strip {
    order: 7;
  }
  .hero-dig {
    align-self: start;
    margin: calc(var(--bw) * 0.14) 0 0;
  }
  .burrow-wrap {
    --tap-h: calc(var(--clod-h) * 0.6);
    padding-bottom: calc(var(--clod-h) - 4px);
  }
  .burrow-clod {
    display: block;
    position: absolute;
    left: -5%;
    top: calc(var(--bw) * 0.8 - 5px);
    width: 110%;
    height: var(--clod-h);
    overflow: visible;
  }
  .clod-rim {
    stroke: var(--moss-edge);
  }
  /* on the clod, Fungi stands on its top edge */
  .hero-fungi {
    left: calc(var(--fs) * -0.3);
    top: calc(var(--bw) * 0.8 - var(--fs) * 0.92);
  }
  .burrow-root {
    top: calc(var(--bw) * 0.8 - 3px);
    stroke-opacity: 0.7;
  }
  .root-node {
    --rn: 18px;
    top: calc(var(--bw) * 0.8 - 3px + var(--tap-h) * 0.86 - var(--rn) / 2);
    border-width: 2.5px;
    background: radial-gradient(circle, #eac772 0 2px, var(--ouro) 2.5px 3.5px, var(--soil) 4px);
  }
}

/* the ground under the hero: the same soil as the bands, with its own roots and the live line */
.hero-ground {
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: var(--ground-h);
  background-image:
    radial-gradient(circle, rgba(212, 162, 58, 0.1) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(185, 130, 90, 0.16) 0 1.4px, transparent 2px),
    radial-gradient(ellipse 60% 120% at 80% 0, rgba(107, 68, 40, 0.4), transparent 70%),
    repeating-linear-gradient(177deg, transparent 0 22px, var(--soil-strata) 22px 24px, transparent 24px 52px);
  background-size: 23px 23px, 41px 37px, auto, auto;
  background-position: 0 0, 9px 13px, 0 0, 0 0;
}
/* the soil line runs a little past both edges, so it can sway without showing an end */
.hero-ground::before,
.hero-ground::after {
  left: -48px;
  right: -48px;
}
.ground-life {
  inset: 0;
}
.ground-life .tuft {
  position: absolute;
  top: -20px;
  width: 34px;
  height: 20px;
  margin-left: -17px;
  background: var(--tuft);
  -webkit-mask: url('/img/decor/tuft.svg') center bottom / contain no-repeat;
  mask: url('/img/decor/tuft.svg') center bottom / contain no-repeat;
  transform-origin: 50% 100%;
}
.tuft.t1 { left: 4%; }
.tuft.t2 { left: 25%; top: -16px; width: 26px; height: 16px; margin-left: -13px; }
.tuft.t3 { left: 46%; }
.tuft.t4 { left: 67%; top: -17px; width: 28px; height: 17px; margin-left: -14px; }
.tuft.t5 { left: 96%; }
.ground-life .sprout {
  position: absolute;
  top: -27px;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  background: var(--tuft);
  -webkit-mask: url('/img/decor/sprout.svg') center / contain no-repeat;
  mask: url('/img/decor/sprout.svg') center / contain no-repeat;
  transform-origin: 50% 100%;
}
.ground-life .root {
  position: absolute;
  top: 1px;
  width: 104px;
  height: calc(var(--ground-h) * 0.55);
  margin-left: -52px;
  overflow: visible;
  fill: none;
  stroke: var(--ouro);
  stroke-opacity: 0.42;
  stroke-linecap: round;
}
.ground-life .g1 { left: 9%; }
.ground-life .g2 { left: 32%; }
.ground-life .g3 { left: 55%; }
/* phones: one sprout on the soil line and no roots in this strip (the taproot and its Root ring are in Dig's own
   clod, under the headline), so the live line has the width of the screen and no line runs behind it or behind the
   round "Pause animations" switch */
@media (max-width: 599px) {
  .ground-life .g2,
  .ground-life .g3,
  .ground-life .root,
  .tuft.t3 {
    display: none;
  }
  .hero .hero-live {
    max-width: none;
  }
  .ground-life .g1 {
    left: 62%;
  }
}
.glints i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ouro);
  opacity: 0.5;
}
.hero .glints i:nth-child(1) { left: 6%; top: 62%; }
.hero .glints i:nth-child(2) { left: 19%; top: 38%; }
.hero .glints i:nth-child(3) { left: 41%; top: 70%; width: 2px; height: 2px; }
.hero .glints i:nth-child(4) { left: 49%; top: 30%; }
.hero .glints i:nth-child(5) { left: 61%; top: 58%; width: 2px; height: 2px; }
.hero .glints i:nth-child(6) { left: 87%; top: 46%; }
.hero .glints i:nth-child(7) { left: 98%; top: 72%; width: 2px; height: 2px; }
.ground-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px 16px;
  padding-block: 10px 12px;
}
.hero-live {
  flex: 0 1 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  max-width: calc(100% - var(--bw) - 8px);
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.4;
  text-wrap: balance;
}
.live-dot {
  position: relative;
  top: -1px;
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--soil-gold);
  border-radius: 50%;
}
.hero-live.is-live .live-dot {
  background: var(--soil-gold);
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1.5px solid var(--soil-gold);
  border-radius: 50%;
  opacity: 0;
}
.hero-live .num,
.hero-live [data-c] {
  color: var(--gold-text);
  font: 600 1.08em/1 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
}
.live-block {
  color: var(--soil-muted);
  white-space: nowrap;
}

/* "Pause animations": in the hero's soil on wide screens, and in every footer. Hidden when the viewer's system
   already asks for less motion (nothing moves then, so there is nothing to pause) */
.motion-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--soil-line);
  border-radius: var(--r-pill);
  background: rgba(36, 24, 15, 0.86);
  color: var(--soil-muted);
  font: 700 16px/1 var(--sans);
  cursor: pointer;
}
.motion-toggle:hover {
  border-color: var(--line-strong);
  color: var(--soil-fg);
}
.mt-icon {
  position: relative;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  /* pause: two bars */
  background:
    linear-gradient(currentColor, currentColor) 1px 0 / 3.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 7.5px 0 / 3.5px 100% no-repeat;
}
/* paused: a play triangle (the switch stays "Pause animations", pressed) */
.motion-toggle[aria-pressed='true'] .mt-icon {
  background: currentColor;
  -webkit-clip-path: polygon(10% 0, 100% 50%, 10% 100%);
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}
.motion-toggle[aria-pressed='true'] {
  border-color: var(--soil-gold);
  color: var(--soil-fg);
}
@media (prefers-reduced-motion: reduce) {
  .motion-toggle {
    display: none;
  }
}
/* below 1080px the hero's switch is a round icon before the live line (its name stays for screen readers) */
@media (max-width: 1079px) {
  .hero .motion-toggle {
    order: -1;
    flex: 0 0 36px;
    width: 36px;
    padding: 0;
    justify-content: center;
  }
  .hero .mt-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* most phones (from 380px) have room for a bigger Dig beside his bubble; below that the bubble would wrap once more */
@media (min-width: 380px) {
  .hero {
    --bw: 144px;
  }
}
/* tablets: a bigger burrow beside the bubble */
@media (min-width: 600px) {
  .hero {
    --ground-h: 92px;
    --bw: 212px;
  }
  .hero-burrow {
    justify-self: end;
    width: min(100%, 620px);
    column-gap: 16px;
    /* room for Dig's sprout under the trust chips */
    margin-top: 14px;
  }
  .hero-dig blockquote {
    max-width: 30ch;
    padding: 12px 16px;
    font-size: 19px;
  }
}
@media (min-width: 1080px) {
  .hero {
    --ground-h: 104px;
    /* QA 19 Oct 2026: Dig was a sticker in an empty corner; now he fills his column (300px, 340px from 1280px) */
    --bw: 300px;
  }
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
  }
  /* 8 columns of copy: the four trust chips fit on one line; under them a strip of landscape (the hills and their
     crest) before the soil line */
  .hero-copy {
    grid-column: 1 / span 8;
    padding-bottom: 62px;
  }
  .hero-burrow {
    grid-column: 9 / span 4;
    justify-self: stretch;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .hero-dig {
    align-self: center;
    justify-self: auto;
    margin-bottom: 4px;
  }
  /* the bubble sits above Dig here: keep it clear of his sprout, which rises above the burrow's box (§16.4) */
  .hero-burrow .burrow-wrap {
    margin-top: calc(var(--bw) * 0.13);
  }
  .hero-dig blockquote {
    max-width: 28ch;
    padding: 14px 18px;
  }
  .hero-dig blockquote::after {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -9px;
    border-top: 0;
    border-bottom: 1.5px solid var(--line-strong);
    transform: translateX(-50%) rotate(45deg);
  }
  .hero-dig figcaption {
    text-align: center;
    margin-right: 0;
  }
  .hero-live {
    max-width: 60%;
  }
  .hero .motion-toggle {
    margin-left: 12px;
  }
}
@media (min-width: 1280px) {
  .hero {
    --bw: 340px;
  }
}

/* the soil bands: below ground */
.band-soil {
  padding-block: var(--section-pad);
}
.band-soil h2 {
  max-width: 22ch;
}
.rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}
.rules li {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid var(--soil-rule);
}
.rules li:first-child {
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 600px) {
  .rules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rules li,
  .rules li:first-child {
    padding: 4px 24px;
    border-top: 0;
    border-left: 1px solid var(--soil-rule);
  }
  .rules li:first-child {
    padding-left: 0;
    border-left: 0;
  }
}
.rule-v {
  color: var(--gold-text);
  font: 600 40px/1 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
}
.rule-t {
  color: var(--fg);
  font-size: 17px;
  line-height: 1.45;
}
.rules-extra {
  margin: var(--s4) 0 6px;
  color: var(--muted);
  font-size: 16px;
}
#rules-note {
  margin: 0;
}
.stats {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--soil-rule);
}
.stats h3 {
  margin-bottom: var(--s2);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
@media (min-width: 900px) {
  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--soil-gold-line);
  border-radius: 14px;
  background: var(--soil-2);
}
.stat dt {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.35;
}
.stat dd {
  margin: 0;
}
.stat-v {
  color: var(--fg);
  font: 600 clamp(26px, 1.5vw + 20px, 34px)/1.15 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}
.stat-v .mono {
  font-size: 0.7em;
}
.stat.root .stat-v {
  color: var(--gold-text);
}
.stat.root {
  background-image: radial-gradient(ellipse 90% 80% at 100% 0, rgba(212, 162, 58, 0.14), transparent 70%);
  border-color: #533e1b; /* terra funda → ouro 30% */
}
.stat-sub {
  color: var(--muted);
  font-size: 16px;
}
/* phones: each rule is one ledger row (the value, then its sentence) and the tiles are compact, so the coins come
   sooner */
@media (max-width: 599px) {
  .rules {
    margin-top: var(--s3);
  }
  .rules li {
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 14px;
    padding: 14px 0;
  }
  .rule-v {
    font-size: 28px;
  }
  .rule-t {
    font-size: 16px;
  }
  .rules-extra {
    margin-top: var(--s3);
  }
  .stats {
    margin-top: var(--s4);
    padding-top: var(--s3);
  }
  .stat-grid {
    gap: 10px;
  }
  .stat {
    gap: 4px;
    padding: 12px 14px;
  }
  .stat-v {
    font-size: 22px;
  }
}
/* wide screens with live numbers: the rules on the left, "Underground right now" on the right */
@media (min-width: 1080px) {
  .below-grid:has(> .stats:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 64px;
    align-items: center;
  }
  .below-grid:has(> .stats:not([hidden])) .rules {
    grid-template-columns: minmax(0, 1fr);
  }
  .below-grid:has(> .stats:not([hidden])) .rules li,
  .below-grid:has(> .stats:not([hidden])) .rules li:first-child {
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--soil-rule);
    border-left: 0;
  }
  .below-grid:has(> .stats:not([hidden])) .rules li:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .below-grid:has(> .stats:not([hidden])) .rule-v {
    font-size: 36px;
  }
  .below-grid:has(> .stats:not([hidden])) > .stats {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .below-grid:has(> .stats:not([hidden])) .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* "3.4929 ETH" and "block 138254922" stay on one line in the half-width tiles */
  .below-grid:has(> .stats:not([hidden])) .stat-v {
    font-size: clamp(24px, 1vw + 16px, 30px);
  }
}

/* coins: the market, right under the hero's soil. A slightly deeper parchment rises out of the soil with the same
   undulating line and its moss rim (back above ground); a soft light falls on it from the hero, and faint growth rings
   sit in its corner. The soil band follows under the cards */
.coins-section {
  position: relative;
  padding-top: clamp(40px, 4.4vw, 60px);
  padding-bottom: clamp(56px, 6vw, 88px);
  background-color: var(--band);
  background-image: radial-gradient(ellipse 70% 260px at 50% 0, var(--page-glow), transparent 75%);
}
.coins-section::before,
.coins-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: none;
  -webkit-mask: url('/img/decor/soil-line.svg') 0 0 / 1440px 16px repeat-x;
  mask: url('/img/decor/soil-line.svg') 0 0 / 1440px 16px repeat-x;
  transform: scaleX(-1);
}
.coins-section::before {
  top: -17px;
  background: var(--moss-edge);
}
.coins-section::after {
  top: -14px;
  background: var(--band);
}
@supports not ((mask-image: url('/img/decor/soil-line.svg')) or (-webkit-mask-image: url('/img/decor/soil-line.svg'))) {
  .coins-section::before,
  .coins-section::after {
    display: none;
  }
}
.coins-section .kicker {
  margin-bottom: 4px;
}
.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: var(--s2);
}
.list-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.coins-section .note {
  margin: 0 0 4px;
}
/* "{count} coins in total. Read at … · block …": the list's footer line, so the first cards start right under the
   sort control */
.coins-section #list-meta {
  margin: var(--s3) 0 0;
  text-align: center;
  text-wrap: balance;
}
.coins-section #list-meta:empty {
  margin: 0;
}
.coins-section .seg {
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* phones: the sort control takes the row, with Refresh as a round icon button beside it (its name stays for screen
   readers); if the two do not fit (360px), Refresh wraps under it */
@media (max-width: 599px) {
  .list-tools {
    flex: 1 1 100%;
    gap: 8px;
  }
  .list-tools .seg {
    flex: 1 1 auto;
  }
  .list-tools .seg label {
    flex: 1 1 auto;
  }
  .list-tools .seg span {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
  }
  .list-tools #refresh {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
  }
  .list-tools #refresh::before {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
  }
  .list-tools #refresh span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
/* 360px: a little less room inside the pills, so Refresh still fits beside them */
@media (max-width: 399px) {
  .list-tools {
    gap: 6px;
  }
  .list-tools .seg span {
    min-height: 40px;
    padding: 0 10px;
  }
  .list-tools #refresh {
    width: 48px;
    height: 48px;
  }
}
#list-state:not(:empty) {
  margin-top: var(--s2);
}
#list-state > .muted {
  margin: 0;
}
#coins {
  margin-top: var(--s3);
}
#coins:empty {
  margin-top: 0;
}
.state-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.state-row .alert {
  flex: 1 1 280px;
  margin: 0;
}
.show-more {
  display: flex;
  justify-content: center;
  margin-top: var(--s4);
}
/* a short list (or none yet) ends right under the cards: no empty row for a hidden button */
.show-more:not(:has(> :not([hidden]))) {
  display: none;
}
/* "Not live on testnet yet": a parchment card above ground (on the home page the soil band follows right under it) */
.not-live {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-1), var(--hl-top);
}
.not-live .dig-stand {
  justify-self: center;
}
.not-live img {
  width: 120px;
}
.not-live h3 {
  margin-bottom: 8px;
  font-size: 24px;
}
.not-live p {
  color: var(--muted);
}
.not-live-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--s2);
}
@media (min-width: 600px) {
  .not-live {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 28px;
    padding: 32px 36px;
  }
}

/* how a coin grows */
.how {
  position: relative;
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.how > li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-1), var(--hl-top);
}
.how > li > * {
  margin: 0;
}
.step-num {
  color: var(--soft);
  font: italic 500 40px/1 var(--serif);
  font-variation-settings: 'SOFT' 100;
}
.step-icon {
  display: block;
  width: 48px;
  height: 48px;
}
/* one family of four line drawings (QA 19 Oct 2026: a sprout, a chart glyph, two rings and an older icon did not
   match): the same soil line and 2px stroke in each, moss above the soil, gold below it. Plant: a seed and a sprout;
   grow: a stem with leaves and its first roots; graduate: the plant over its Root ring; return to the soil: a leaf
   goes back down and the roots run from the ring */
.step-icon svg {
  display: block;
  width: 48px;
  height: 48px;
  overflow: visible;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-icon .i-soil {
  stroke: var(--line-strong);
}
.step-icon .i-moss {
  stroke: var(--accent);
}
.step-icon .i-gold {
  stroke: var(--gold-text);
}
.step-icon .i-dot {
  fill: var(--gold-text);
}
.how h3 {
  font-size: 22px;
}
.how p {
  color: var(--muted);
  font-size: 16px;
}
.how .root-strip {
  margin-top: auto;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--wash-gold);
  color: var(--gold-text);
  font: 700 16px/1.4 var(--sans);
  text-wrap: balance;
}
/* the contract values read in the strip's own bold face (a lighter mono looked faded next to it) */
.how .root-strip [data-c] {
  font: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 599px) {
  .how {
    padding-left: 30px;
  }
  .how::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 30px;
    bottom: 30px;
    width: 2px;
    border-radius: 2px;
    background: var(--line-strong);
  }
  .how > li::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 34px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg);
  }
}
@media (min-width: 600px) {
  .how {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .how {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .how::before {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    top: 44px;
    border-top: 2px dashed var(--line-strong);
  }
}
.center-link {
  margin: var(--s4) 0 0;
  text-align: center;
}

/* underground: what the Root vault is, and what it isn't */
.ug-grid {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 1080px) {
  .ug-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: start;
  }
}
.ug-story {
  max-width: 56ch;
  margin: var(--s2) 0 var(--s4);
  color: var(--fg);
  font-size: clamp(18px, 0.4vw + 16.5px, 20px);
}
.is-isnt {
  display: grid;
  gap: var(--s3);
}
@media (min-width: 600px) {
  .is-isnt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.is-isnt h3 {
  margin-bottom: 12px;
  font-size: 22px;
}
.ring-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ring-list li {
  position: relative;
  padding-left: 24px;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.5;
}
.ring-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 12px;
  height: 12px;
  border: 2.5px solid var(--soil-gold);
  border-radius: 50%;
}
.ring-list.risk li::before {
  border-color: var(--soil-danger);
}
.ring-list [data-c],
.root-flows [data-c] {
  color: var(--gold-text);
  font-family: var(--mono);
  font-weight: 600;
  white-space: nowrap;
}
.flow-panel {
  padding: 24px;
  border: 1px solid var(--soil-rule);
  border-radius: var(--r-lg);
  background-color: var(--soil-2);
}
.flow-label {
  margin: 0 0 var(--s2);
  color: var(--muted);
  font: italic 500 18px/1.3 var(--serif);
  font-variation-settings: 'SOFT' 100;
}
.flows {
  display: grid;
  gap: 16px;
}
.root-flows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* one inline flow in every box (one span): the number stays with its words ("2% left by everyone who burns") */
.root-flows li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 11px 14px 11px 36px;
  border: 1px solid var(--soil-rule);
  border-radius: 12px;
  background: rgba(244, 236, 221, 0.04);
  font-size: 16px;
  line-height: 1.4;
}
.root-flows li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2.5px solid var(--soil-gold);
  border-radius: 50%;
}
.flows-out li::before {
  border-color: var(--soil-accent);
}
/* phones and tablets (QA 19 Oct 2026: the one picture of the idea was hidden there): the Root ring sits between
   "Into the vault" and "Out of the vault", fed from above and paying out below; the sap moves down through it */
.root-ring {
  position: relative;
  justify-self: center;
  width: 56px;
  height: 56px;
  margin: 22px 0 18px;
  border: 3.5px solid var(--ouro);
  border-radius: 50%;
  background: radial-gradient(circle, var(--ouro) 0 6px, var(--terra-funda) 7px);
  box-shadow: 0 0 0 5px rgba(212, 162, 58, 0.12), 0 0 28px rgba(212, 162, 58, 0.2);
}
.root-ring::before,
.root-ring::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  height: 20px;
  margin-left: -1px;
  background: var(--ouro);
}
.root-ring::before {
  bottom: 100%;
  margin-bottom: 3px;
}
.root-ring::after {
  top: 100%;
  margin-top: 3px;
}
.flow-out-label {
  margin: var(--s1) 0 0;
}
@media (min-width: 900px) {
  .flows {
    grid-template-columns: minmax(0, 1fr) 100px minmax(150px, 0.8fr);
    align-items: center;
    gap: 0;
  }
  .flow-out-label {
    display: none;
  }
  .flows-in li {
    padding-left: 14px;
  }
  .flows-in li::before {
    display: none;
  }
  .flows-in {
    position: relative;
    grid-auto-rows: 1fr;
    gap: 12px;
    padding-right: 26px;
  }
  .flows-in::after {
    content: '';
    position: absolute;
    right: 0;
    top: calc((100% - 36px) / 8);
    bottom: calc((100% - 36px) / 8);
    width: 2px;
    border-radius: 2px;
    background: var(--ouro);
  }
  .flows-in li::after {
    content: '';
    position: absolute;
    right: -27px;
    top: 50%;
    width: 26px;
    height: 2px;
    background: var(--ouro);
  }
  .root-ring {
    display: block;
    position: relative;
    justify-self: center;
    width: 72px;
    height: 72px;
    border: 4px solid var(--ouro);
    border-radius: 50%;
    background: radial-gradient(circle, var(--ouro) 0 7px, var(--terra-funda) 8px);
    box-shadow: 0 0 0 6px rgba(212, 162, 58, 0.12), 0 0 32px rgba(212, 162, 58, 0.18);
    margin: 0;
  }
  .root-ring::before,
  .root-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    bottom: auto;
    width: 16px;
    height: 2px;
    margin: -1px 0 0;
    background: var(--ouro);
  }
  .root-ring::before {
    left: auto;
    right: 100%;
    margin-right: 4px;
  }
  .root-ring::after {
    left: 100%;
    margin-left: 4px;
  }
  .flows-out {
    padding-left: 20px;
    position: relative;
  }
  .flows-out li::after {
    content: '';
    position: absolute;
    left: -21px;
    top: 50%;
    width: 20px;
    height: 2px;
    background: var(--ouro);
  }
}
.formula {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid var(--soil-gold-line);
  border-radius: 16px;
  background-color: var(--soil-2);
  background-image: repeating-linear-gradient(176deg, transparent 0 38px, var(--soil-strata) 38px 40px, transparent 40px 86px);
}
.formula > * {
  margin: 0;
}
.formula > * + * {
  margin-top: 10px;
}
.formula-label {
  color: var(--muted);
  font-size: 16px;
}
.formula code {
  color: var(--gold-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ug-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--s5);
}

/* who else lives down here */
.trio-grid {
  display: grid;
  gap: var(--s3);
}
@media (min-width: 900px) {
  .trio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.card.feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 28px;
}
.card.feature > * {
  margin: 0;
}
.feature .dig-stand {
  align-self: flex-start;
}
.feature-art {
  width: 120px;
}
.card.feature h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
}
.strong-line {
  font-weight: 700;
}
.quote-line {
  margin: 4px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--line-strong);
}
.quote-line blockquote {
  margin: 0;
  font: italic 500 19px/1.4 var(--serif);
  font-variation-settings: 'SOFT' 100;
}
.quote-line blockquote p {
  margin: 0;
}
.quote-line figcaption {
  margin-top: 4px;
  color: var(--muted);
  font-size: 16px;
}
.cfg-button a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 4px;
  padding: 6px 18px;
  border-radius: var(--r-pill);
  background: var(--btn2-bg);
  color: var(--btn2-fg);
  font-weight: 700;
  text-decoration: none;
}
.cfg-button a:hover {
  background: var(--btn2-hover);
}

/* before you dig in: the field note */
.honest .wrap {
  max-width: calc(880px + 2 * var(--gutter));
}
.field-note {
  position: relative;
  padding: 28px 24px;
  border-inline-start: 4px solid var(--danger);
  border-radius: var(--r-lg);
  background: var(--wash-risk);
}
.field-note::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 30px;
  width: 36px;
  height: 36px;
  background: var(--danger);
  -webkit-mask: url('/img/ui/mushroom.svg') center / 36px 36px no-repeat;
  mask: url('/img/ui/mushroom.svg') center / 36px 36px no-repeat;
}
.field-note h2 {
  padding-left: 52px;
  font-size: clamp(28px, 1.4vw + 22px, 38px);
}
.honest-list {
  display: grid;
  gap: 12px 32px;
  margin: var(--s3) 0 var(--s4);
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .field-note {
    padding: 32px;
  }
  .field-note::before {
    left: 32px;
    top: 34px;
    width: 40px;
    height: 40px;
    -webkit-mask-size: 40px 40px;
    mask-size: 40px 40px;
  }
  .field-note h2 {
    padding-left: 58px;
  }
}
@media (min-width: 900px) {
  .honest-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.honest-list li {
  position: relative;
  padding-left: 24px;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.5;
}
.honest-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 11px;
  height: 11px;
  border: 2px solid var(--danger);
  border-radius: 50%;
}

/* questions people ask */
.faq-cards {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .faq-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.faq-cards li {
  display: flex;
}
.faq-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-1), var(--hl-top);
  color: var(--fg);
  text-decoration: none;
}
@media (hover: hover) {
  .faq-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-2), var(--hl-top);
  }
}
.faq-card .q {
  font: 600 20px/1.25 var(--serif);
}
.faq-card .more {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}

/* ------------------------------------------------------------ coin page */
.coin-page {
  padding-top: var(--s3);
}
@media (min-width: 600px) {
  .coin-page {
    padding-top: var(--s4);
  }
}
/* before the coin is on screen: the skeleton, a message, or the page of a coin hidden by hand */
.state-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.state-wrap[data-mode] {
  align-items: center;
  max-width: 640px;
  margin: var(--s4) auto var(--s3);
}
.state-wrap[data-mode] > #coin-state {
  width: 100%;
}
#coin-state > .alert {
  margin: 0 0 var(--s2);
}
.state-art img {
  display: block;
  width: 120px;
  height: auto;
}
.state-title {
  margin-bottom: var(--s2);
  font-size: clamp(30px, 2vw + 22px, 40px);
  text-align: center;
}
.hidden-card {
  margin: 0;
}
.hidden-card p:last-child {
  margin-bottom: 0;
}
.state-back {
  margin: 0;
}
.coin-skeleton {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px 20px;
  margin-bottom: var(--s2);
}
.coin-skeleton .sk-thumb {
  width: 64px;
  height: 64px;
}
.sk-meter {
  grid-column: 1 / -1;
  height: 340px;
  margin-top: var(--s3);
  border-radius: var(--r-lg);
}
@media (min-width: 600px) {
  .coin-skeleton {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .coin-skeleton .sk-thumb {
    width: 88px;
    height: 88px;
  }
}

/* the head: picture, name, symbol and status, then the addresses */
.coin-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
  margin-bottom: var(--s3);
}
.coin-pic {
  position: relative;
  isolation: isolate;
  display: block;
  line-height: 0;
}
/* a soft halo behind the coin's picture (gold: the coin has a Root vault) */
.coin-pic::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-glow), transparent 68%);
  pointer-events: none;
}
.coin-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 4px;
}
.coin-head h1 {
  overflow-wrap: anywhere;
}
.coin-head .sym {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sym-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--card-2);
  color: var(--fg);
  font: 600 15px/1.2 var(--mono);
  overflow-wrap: anywhere;
}
.coin-status:empty,
#coin-dormant:empty {
  display: none;
}
.coin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.4;
}
.meta-item {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
.meta-item .addr {
  color: var(--fg);
}
/* below 400px the addresses take the full width under the picture, so "Creator 0x…  Copy" stays on one row */
@media (max-width: 399px) {
  .coin-head {
    row-gap: 10px;
  }
  .coin-title {
    display: contents;
  }
  .coin-pic {
    grid-row: span 2;
  }
  .coin-head h1,
  .coin-head .sym {
    grid-column: 2;
  }
  .coin-head h1 {
    align-self: end;
  }
  .coin-head .coin-meta {
    grid-column: 1 / -1;
  }
}
.meta-item .chip.copy {
  margin-left: 0;
}
.meta-uri .addr {
  font-size: 14px;
}
.coin-warnings:empty {
  display: none;
}
.coin-warnings .alert {
  margin: 0 0 12px;
}
.coin-warnings {
  margin-bottom: var(--s2);
}
/* the creator's description: four lines, then "Show more" (coin.js shows the button only for a longer text) */
.coin-about {
  margin: 0 0 var(--s3);
}
.coin-about:has(> .coin-desc:empty) {
  display: none;
}
.coin-desc {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  overflow-wrap: anywhere;
}
.coin-desc.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.coin-desc:empty {
  display: none;
}
.link-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 700 16px/1.2 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.link-btn:hover {
  text-decoration-thickness: 2px;
}

/* price and Root vault at a glance (phones and tablets; from 1080px the Root Meter is beside the trade card). The same
   language as a coin card: the market above, the Root vault in a soil band below its own soil line */
.coin-summary {
  margin: 0 0 var(--s3);
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-1), var(--hl-top);
}
.cs-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.cs-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 14px 16px 16px;
}
.cs-item + .cs-item {
  border-left: 1px solid var(--line);
}
.cs-item dt {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.3;
}
.cs-item dd {
  margin: 0;
}
.cs-v {
  color: var(--fg);
  font: 600 20px/1.3 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}
.cs-v .num {
  font-size: inherit;
  white-space: nowrap;
}
/* "Graduated": a word, not a number */
.cs-v.word {
  font: 700 18px/1.35 var(--sans);
}
.cs-sub {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.35;
}
.cs-bar {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.cs-soil {
  position: relative;
  /* the bottom padding holds the root strip, so it never runs under the note */
  padding: 4px 0 30px;
  background-image: url('/img/decor/roots-strip.svg');
  background-repeat: no-repeat;
  background-position: right 6px bottom 2px;
  background-size: 240px auto;
}
.cs-soil::before,
.cs-soil::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 10px;
  background: var(--soil);
  -webkit-mask: url('/img/decor/soil-line.svg') 0 0 / 720px 10px repeat-x;
  mask: url('/img/decor/soil-line.svg') 0 0 / 720px 10px repeat-x;
}
.cs-soil::before {
  top: -11px;
  background: var(--band-rim);
}
.cs-soil .cs-item + .cs-item {
  border-left-color: var(--soil-rule);
}
.cs-below .cs-item:first-child .cs-v {
  color: var(--gold-text);
}
.cs-note {
  margin: 0 16px;
  padding: 0 0 0 12px;
  border-left: 4px solid var(--soil-danger);
  color: var(--fg);
  font: 700 16px/1.4 var(--sans);
}
/* 360-399px: a little less padding and a slightly smaller value, so "0.0₈6933 ETH" fits its half on one line */
@media (max-width: 399px) {
  .cs-item {
    padding: 12px 12px 14px;
  }
  .cs-v {
    font-size: 18px;
  }
  .cs-note {
    margin: 0 12px;
  }
  .cs-soil {
    padding-bottom: 26px;
  }
}
@media (min-width: 600px) {
  .cs-item {
    padding: 18px 24px 20px;
  }
  .cs-v {
    font-size: 24px;
  }
  .cs-note {
    margin: 0 24px;
  }
}
@media (min-width: 1080px) {
  .coin-summary {
    display: none;
  }
}
/* jump links (phones and tablets): chips that wrap, never a sideways scroller */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--s3);
}
.jump a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--fg);
  font: 700 16px/1.1 var(--sans);
  text-decoration: none;
}
/* a plain arrow down (a jump on this page), never a chevron (that would read as a menu) */
.jump a::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  -webkit-mask: url('/img/ui/arrow-down.svg') center / 16px 16px no-repeat;
  mask: url('/img/ui/arrow-down.svg') center / 16px 16px no-repeat;
}
.jump a:hover {
  background: var(--card-2);
}
/* phones: coin.js puts the links right after Buy and sell, inside the actions column (its gap does the spacing) */
.side > .jump {
  margin: 0;
}
@media (min-width: 600px) {
  .coin-head {
    gap: 16px 28px;
  }
}

/* the grid: meter, then the actions, then the details. From 1080px: meter + details | actions (never sticky) */
.coin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.coin-grid > *,
.side,
.details {
  min-width: 0;
}
.side,
.details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-content: start;
}
.coin-grid .card,
.coin-grid .meter {
  margin: 0;
}
@media (min-width: 1080px) {
  .jump {
    display: none;
  }
  .coin-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: 'meter side' 'details side';
    grid-template-rows: auto 1fr;
    gap: 24px 32px;
  }
  .coin-grid > .meter {
    grid-area: meter;
  }
  .coin-grid > .side {
    grid-area: side;
  }
  .coin-grid > .details {
    grid-area: details;
  }
}

/* bigger cards (trade, return to the soil, the create form): more room, rounder corners */
.card.roomy {
  border-radius: var(--r-lg);
}
@media (min-width: 600px) {
  .card.roomy {
    padding: 32px;
  }
}
.card.compact {
  font-size: 16px;
}
.card.compact > div > p:not([class]) {
  margin-bottom: 14px;
}

/* the Root Meter: always underground, in both themes */
.meter {
  position: relative;
  padding: 24px;
  border: 1px solid var(--soil-gold-line);
  border-radius: var(--r-lg);
}
/* the Root ring of the roots art sits in the bottom corner, clear of the text */
.meter,
.short-version {
  background-position: right -24px bottom -34px, 0 0, 9px 13px, 0 0, 0 0, 0 0;
}
/* narrower panels: the ring goes to the bottom-right corner, under the last line (never on "Read at …") */
@media (max-width: 1079px) {
  .meter,
  .short-version {
    background-position: right -196px bottom -38px, 0 0, 9px 13px, 0 0, 0 0, 0 0;
  }
  .meter {
    padding-bottom: 34px;
  }
}
@media (min-width: 600px) {
  .meter {
    padding: 32px;
  }
}
@media (min-width: 600px) and (max-width: 1079px) {
  .meter {
    padding-bottom: 38px;
  }
}
.meter-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s3);
}
.meter-head img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}
.meter-head h2 {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--fg);
  font: 600 22px/1.2 var(--serif);
}
.btn.meter-refresh {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 4px 14px;
  font-size: 16px;
}
@media (max-width: 599px) {
  .btn.meter-refresh {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }
  .meter-refresh .btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
.meter .label {
  color: var(--muted);
  font-size: 16px;
}
.meter .big {
  position: relative;
  margin: 6px 0 4px;
  padding-left: 30px;
  color: var(--gold-text);
  font: 600 clamp(36px, 3.5vw + 24px, 64px)/1.05 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-height: 1.05em;
}
.meter .big::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 3px solid var(--ouro);
  border-radius: 50%;
  background: radial-gradient(circle, var(--ouro) 0 1.6px, transparent 2.2px);
  box-shadow: 0 0 0 6px rgba(212, 162, 58, 0.12), 0 0 32px rgba(212, 162, 58, 0.18);
}
/* two columns at every width: the two values are short, and on a phone the trade card comes sooner */
.meter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px var(--s2);
  margin: var(--s3) 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--soil-rule);
}
.meter-grid > div + div {
  padding-left: var(--s2);
  border-left: 1px solid var(--soil-rule);
}
@media (max-width: 559px) {
  .meter-grid {
    gap: 10px 12px;
    margin: 20px 0;
  }
  .meter-grid > div + div {
    padding-left: 12px;
  }
  .meter-grid .label {
    line-height: 1.35;
  }
}
.meter-grid .v {
  min-height: 1.3em;
  margin-top: 2px;
  color: var(--fg);
  font: 600 20px/1.3 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}
.meter-grid .sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 16px;
}
.meter-grid .sub .num {
  font-weight: 400;
}
/* the gauge: price above the soil line, redemption value below it, on one scale */
.gauge {
  margin: var(--s3) 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--soil-rule);
  border-radius: 16px;
  background-color: rgba(244, 236, 221, 0.03);
}
.g-row {
  display: grid;
  gap: 8px;
}
/* every row the same: the label on the left (it may wrap), the value on the right, on one line */
.g-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.g-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.35;
}
.g-val {
  flex: none;
  color: var(--fg);
  font-size: 15px;
  white-space: nowrap;
}
.below .g-val {
  color: var(--gold-text);
}
.gauge .bar {
  background: var(--soil-2);
  box-shadow: inset 0 0 0 1px var(--soil-rule);
}
.g-horizon {
  margin: 14px 0;
  border-top: 1px dashed var(--line-strong);
}
.meter p.g-caption {
  margin: 14px 0 0;
}
@media (max-width: 559px) {
  .gauge {
    margin: 20px 0;
    padding: 14px 14px 12px;
  }
  .g-horizon {
    margin: 10px 0;
  }
  .meter p.g-caption {
    margin-top: 10px;
    line-height: 1.45;
  }
}
.meter .must {
  max-width: none;
  margin: var(--s3) 0;
  padding: 4px 0 4px 14px;
  border-left: 4px solid var(--soil-danger);
  color: var(--fg);
  font: 700 17px/1.4 var(--sans);
}
.meter p {
  max-width: 60ch;
  color: var(--muted);
  font-size: 16px;
}
.meter .num {
  color: var(--fg);
}
.lock-line {
  position: relative;
  padding-left: 26px;
}
.lock-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  background: var(--accent);
  -webkit-mask: url('/img/ui/lock.svg') center / 17px 17px no-repeat;
  mask: url('/img/ui/lock.svg') center / 17px 17px no-repeat;
}
.meter .readat {
  margin-top: var(--s2);
  color: var(--muted);
  font-size: 16px;
  text-align: right;
}
.readat .mono {
  font-size: 15px;
}

/* buy fee now (the first card of the actions while the anti-sniper fee runs) */
.sniper-now {
  margin: 4px 0 6px;
  color: var(--fg);
  font: 600 40px/1 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
}
.sniper-card #sniper-text {
  margin-bottom: 6px;
  font-size: 16px;
}
/* the anti-sniper window is over: one line, "Buy fee now 1%" (coin.js adds .settled), joined to the top of Buy and sell
   as its header strip (the column gap is taken back, so the trade card comes up on a phone's first screen) */
.sniper-card.settled {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: -24px;
  padding: 12px 20px;
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--card-2);
  box-shadow: var(--hl-top);
}
.sniper-card.settled:not([hidden]) + .trade-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.sniper-card.settled h2 {
  margin: 0;
  color: var(--muted);
  font: 700 16px/1.3 var(--sans);
}
.sniper-card.settled .sniper-now {
  margin: 0;
  font-size: 20px;
}
@media (min-width: 600px) {
  .sniper-card.settled {
    padding-inline: 32px;
  }
}
.sniper-card.settled #sniper-text,
.sniper-card.settled .note {
  display: none;
}

/* trade: tabs, amount, price tolerance, quote, button, status */
.trade-card .field,
.redeem-card .field,
.card.compact .field {
  margin-bottom: 16px;
}
.slip-field {
  margin-bottom: 16px;
}
.slip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.slip-label {
  color: var(--fg);
  font: 700 16px/1.3 var(--sans);
}
.slip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.slip .chip {
  min-width: 56px;
  padding: 0 12px;
}
.slip-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
}
.slip-custom input {
  width: 6.5em;
  min-height: 40px;
  padding: 6px 10px;
  font: 600 16px/1.2 var(--mono);
}
.slip-warn:empty {
  display: none;
}
.slip-warn .alert {
  margin: 12px 0 0;
}
/* phones below 400px: the label above, then the three presets and "Other %" on one row */
@media (max-width: 399px) {
  .slip-row {
    flex-direction: column;
    align-items: stretch;
  }
  .slip {
    flex-wrap: nowrap;
  }
  .slip .chip {
    flex: 0 0 auto;
    min-width: 44px;
    padding: 0 10px;
  }
  .slip-custom {
    flex: 1 1 72px;
    min-width: 0;
  }
  .slip-custom input {
    width: 100%;
    min-width: 0;
  }
}
.quote {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 14px;
  background: var(--card-2);
}
.q-label {
  color: var(--muted);
  font-size: 16px;
}
.quote .out {
  color: var(--fg);
  font: 600 24px/1.3 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}
.q-line {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}
.q-line .num {
  color: var(--fg);
  font-weight: 600;
}
.quote .alert {
  margin: 8px 0 0;
}
.quote .err {
  margin: 0;
}
.trade-notes:empty {
  display: none;
}
.trade-notes .note {
  margin: 0 0 12px;
}
.chain-warn {
  margin-bottom: 16px;
}
.chain-warn .alert {
  margin: 0 0 10px;
}
.trade-card .tabs {
  margin-bottom: 20px;
}
.trade-card .third-party,
.card.compact .third-party {
  margin-bottom: 0;
}

/* return to the soil: gold, because this is the Root vault */
.card.redeem-card {
  border-color: var(--line);
  background: var(--wash-gold);
}
.redeem-card .input-row,
.redeem-card .quote {
  background: var(--card);
}
.hold-line {
  color: var(--fg);
  font-size: 16px;
}
.r-out {
  color: var(--fg);
  font-size: 17px;
}
.r-out .num {
  color: var(--gold-text);
  font-size: 22px;
}
.redeem-card .btn.block {
  margin-top: 4px;
}

/* buy and burn: two steps on a rail; step 2 waits for step 1 */
.bb-out:empty {
  display: none;
}
.bb-out .alert {
  margin: 4px 0 12px;
}
.kv dt.total,
.kv dd.total {
  border-top: 2px solid var(--fg);
  font-weight: 700;
}
.kv dt.total {
  color: var(--fg);
}
.steps {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 16px 0 4px;
  padding-left: 22px;
}
.steps::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.steps > .btn {
  position: relative;
  margin: 0;
}
.steps > .btn::after {
  content: '';
  position: absolute;
  left: -21px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--line-strong);
}
.steps > .btn:not([disabled])::after {
  background: var(--accent);
}

/* creator fees */
.claim-line .num {
  color: var(--fg);
}

/* curve: the progress to graduation, with its end tick */
.curve-pct {
  margin-bottom: 10px;
  color: var(--muted);
}
.curve-pct .num {
  color: var(--fg);
  font-size: 22px;
}
.bar.lg {
  height: 14px;
}
.curve-track {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 30px;
}
.curve-track::after {
  content: '';
  position: absolute;
  right: 0;
  top: -4px;
  width: 2px;
  height: 22px;
  border-radius: 1px;
  background: var(--fg);
}
.curve-track .tick {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.3;
}
#curve-body .num {
  color: var(--fg);
}
.pool-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pool-id code {
  font-size: 14px;
}

/* fees for this coin: a ledger */
.fee-list {
  margin: 0 0 var(--s2);
  padding: 0;
  list-style: none;
}
.fee-list li {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.fee-list li:first-child {
  border-top: 1px solid var(--line);
}
.fee-list .num {
  color: var(--fg);
}
#fees-body p {
  font-size: 16px;
}

/* the confirm dialog of "Return to the soil" */
.dlg-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dlg-title img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

/* ------------------------------------------------------------ create page */
.create-page {
  padding-top: var(--s4);
}
.create-head {
  max-width: 760px;
  margin-bottom: var(--s4);
}
.create-head > * {
  margin: 0;
}
.create-head h1 {
  margin: 4px 0 12px;
}
/* the planting ground (QA 19 Oct 2026: the page had no living ground at the top): a strip of soil with its moss rim and
   a few tufts under the title; from 768px Dig stands on it at the right, digging, beside "Create a coin". Decoration
   only; the form below is unchanged */
.create-head {
  position: relative;
}
.create-ground {
  position: relative;
  display: block;
  height: 14px;
  margin-top: 26px;
  border-radius: 0 0 10px 10px;
  background-color: var(--soil);
  background-image:
    radial-gradient(circle, rgba(212, 162, 58, 0.22) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(185, 130, 90, 0.3) 0 1.2px, transparent 1.8px);
  background-size: 23px 14px, 37px 14px;
  background-position: 0 4px, 11px 8px;
}
.create-ground::before,
.create-ground::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  -webkit-mask: url('/img/decor/soil-line.svg') 0 0 / 1440px 16px repeat-x;
  mask: url('/img/decor/soil-line.svg') 0 0 / 1440px 16px repeat-x;
}
.create-ground::before {
  top: -9px;
  background: var(--moss-edge);
}
.create-ground::after {
  top: -6px;
  background: var(--soil);
}
.create-ground i {
  position: absolute;
  z-index: 1;
  top: -22px;
  width: 30px;
  height: 18px;
  background: var(--tuft);
  -webkit-mask: url('/img/decor/tuft.svg') center bottom / contain no-repeat;
  mask: url('/img/decor/tuft.svg') center bottom / contain no-repeat;
  transform-origin: 50% 100%;
}
.create-ground i:nth-child(1) { left: 3%; }
.create-ground i:nth-child(2) { left: 31%; top: -18px; width: 22px; height: 14px; }
.create-ground i:nth-child(3) { left: 58%; }
.create-ground i:nth-child(4) { left: 92%; top: -19px; width: 24px; height: 15px; }
.create-dig {
  display: none;
}
@media (min-width: 768px) {
  .create-head {
    max-width: none;
  }
  .create-head > :not(.create-ground) {
    max-width: calc(100% - 180px);
  }
  .create-dig {
    display: block;
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 4px;
    width: 132px;
    height: 132px;
    transform-origin: 50% 100%;
  }
  .create-dig img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .create-ground i:nth-child(4) {
    left: 72%;
  }
}
@media (min-width: 1080px) {
  .create-head > :not(.create-ground) {
    max-width: 760px;
  }
  .create-dig {
    right: 8%;
  }
}
.sprout-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sprout-kicker::before {
  content: '';
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url('/img/decor/sprout.svg') center / 20px 20px no-repeat;
}
.create-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
}
.create-grid > *,
.create-side {
  min-width: 0;
}
.create-side {
  display: grid;
  gap: var(--s3);
}
.create-side .card,
.create-main .card {
  margin: 0;
}
@media (min-width: 900px) {
  .create-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
  }
}
#create-form .field {
  margin-bottom: 22px;
}
#create-form > .alert,
#prefill-note .alert {
  margin: 0 0 14px;
}
#prefill-note:not([hidden]) {
  margin-bottom: 22px;
}
input.mono-input {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
}
#f-dup:empty {
  display: none;
}
#f-dup .alert {
  margin: -6px 0 22px;
}
/* the two folded technical parts sit between hairlines */
#create-form details.field {
  margin: 0;
  border-top: 1px solid var(--line);
}
#create-form details.field + details.field {
  margin-bottom: 0;
}
#create-form details.tech {
  border-bottom: 1px solid var(--line);
}
#create-form details.field[open] {
  padding-bottom: 16px;
}
#create-form details textarea {
  width: calc(100% - var(--s2));
}
.uri-preview {
  display: block;
  max-height: 160px;
  margin: 8px 0 12px;
  padding: 12px 14px;
  overflow: auto;
  border-radius: 10px;
  background: var(--card-2);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.uri-preview:empty {
  display: none;
}
#uri-err:empty {
  display: none;
}
#create-btn {
  margin-top: 24px;
}
#create-status:not(:empty) {
  margin-top: 14px;
}
/* success: the form card becomes the success card (Dig on a mound of soil, the line, the way to the coin) */
#create-done:not([hidden]) {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 8px;
  text-align: center;
}
#create-done:not([hidden])::before {
  content: '';
  width: 200px;
  height: 128px;
  background:
    url('/img/dig-digging.svg') center top / 120px 120px no-repeat,
    radial-gradient(ellipse closest-side, var(--soil) 0 92%, transparent 100%) center 108px / 180px 16px no-repeat;
}
#create-done .alert {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 18px/1.5 var(--sans);
}
#create-done .alert::before {
  display: none;
}
@supports selector(:has(*)) {
  #create-form:has(> #create-done:not([hidden])) > :not(#create-done):not(#create-status) {
    display: none;
  }
  #create-form:has(> #create-done:not([hidden])) {
    display: flex;
    flex-direction: column;
    padding-block: 40px;
  }
  #create-form:has(> #create-done:not([hidden])) > #create-status {
    order: 2;
    justify-content: center;
    margin: 16px 0 0;
  }
}

/* the live preview: the same coin card as the list */
.preview-card .kicker {
  margin-bottom: 14px;
}
.coin-row.preview {
  margin-bottom: 14px;
}
.preview-card .note {
  margin: 0;
}
.coin-row .blank {
  color: var(--soft);
}

/* before you create */
.before-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.before-head h2 {
  font: 600 22px/1.2 var(--serif);
}
.dig-well {
  flex: 0 0 72px;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--card-2);
}
.dig-well img {
  width: 64px;
  height: 64px;
}
.checklist {
  display: grid;
  gap: 12px;
  margin: 0 0 var(--s2);
  padding: 0;
  list-style: none;
}
.checklist li {
  position: relative;
  padding-left: 32px;
  color: var(--fg);
  font-size: 16px;
  line-height: 1.5;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  background: var(--accent);
  -webkit-mask: url('/img/ui/check.svg') center / 20px 20px no-repeat;
  mask: url('/img/ui/check.svg') center / 20px 20px no-repeat;
}
.before-card .third-party {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ text pages (risks, terms, FAQ, official, metrics, 404) */
.prose {
  max-width: 68ch;
  margin-inline: auto;
  padding: var(--s5) 0;
  font-size: 17px;
  line-height: 1.65;
}
.prose h1 {
  margin-bottom: var(--s3);
}
.prose h2 {
  margin: var(--s5) 0 var(--s2);
  font-size: clamp(24px, 1vw + 20px, 30px);
}
.prose h3 {
  margin: var(--s4) 0 var(--s1);
}
.prose h1 + h2 {
  margin-top: var(--s3);
}
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 var(--s2);
}
.prose li {
  margin-bottom: 6px;
}
.prose li::marker {
  color: var(--soft);
}
.prose > .kicker,
.page-head .kicker {
  margin: 0 0 6px;
}
/* the FAQ kicker sits above the article, on the same column */
.page-head {
  max-width: 68ch;
  margin-inline: auto;
  padding-top: var(--s5);
  font-size: 17px;
}
.page-head + .prose {
  padding-top: 0;
}
/* contract values in the text ([data-c], filled from the contracts): small mono chips */
.prose [data-c] {
  padding: 1px 4px;
  border-radius: var(--r-xs);
  background: var(--card-2);
  color: var(--fg);
  font: 600 0.9em/1.3 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.prose td,
.prose th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prose thead th,
.prose thead td {
  border-bottom: 2px solid var(--line-strong);
}
.prose th {
  color: var(--muted);
  font-weight: 700;
}
.table-scroll {
  overflow-x: auto;
}
/* old links with the Portuguese ids land here (span.alias right before the English section) */
.alias {
  display: block;
  height: 0;
}
.prose .table-scroll {
  margin: var(--s1) 0 var(--s2);
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.prose .table-scroll tr:last-child > * {
  border-bottom: 0;
}
.prose pre {
  margin: 0 0 var(--s2);
  padding: var(--s2);
  overflow-x: auto;
  border-radius: 10px;
  background: var(--card-2);
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.prose code {
  font-size: 0.92em;
}
.prose pre code,
.prose .addr {
  font-size: 15px;
}
.prose blockquote {
  margin: 0 0 var(--s2);
  padding: 14px 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--card);
  font: italic 500 19px/1.45 var(--serif);
  font-variation-settings: 'SOFT' 100;
}
.prose blockquote p {
  margin: 0;
}
.prose.empty {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}
.prose.empty img {
  display: block;
  width: 180px;
  margin: 0 auto var(--s3);
}
/* "On this page" chips (FAQ below 1080px, terms): they wrap, never a sideways scroller */
.faq-toc,
.page-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--s4);
}
.faq-toc a,
.page-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--fg);
  font: 700 16px/1.1 var(--sans);
  text-decoration: none;
}
.faq-toc a:hover,
.page-toc a:hover {
  background: var(--card-2);
}
/* a soil line above each part (FAQ sections, the parts of the terms page): a thin wavy rule, never a filled band */
.faq h2[id]::before,
.terms h1 ~ h1::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 8px;
  background: var(--line-strong);
  opacity: 0.6;
  -webkit-mask: url('/img/decor/soil-rule.svg') 0 0 / 720px 8px repeat-x;
  mask: url('/img/decor/soil-rule.svg') 0 0 / 720px 8px repeat-x;
}

/* FAQ: the English text is frozen (marketing/02-FAQ.md); only the layout changes */
/* the answers keep one rhythm: top margins only (inside the 1080px grid, margins do not collapse) */
.faq > [data-lang='en'] > * {
  margin-top: 16px;
  margin-bottom: 0;
}
.faq > [data-lang='en'] > h1 {
  margin-top: 0;
}
.faq > [data-lang='en'] > .faq-toc {
  margin-top: var(--s3);
}
.faq h2[id] {
  position: relative;
  padding-top: 36px;
}
.faq > [data-lang='en'] > h2[id] {
  margin-top: var(--s6);
}
.faq h3 {
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 22px;
  line-height: 1.25;
}
.faq > [data-lang='en'] > h3 {
  margin-top: 40px;
}
.faq > [data-lang='en'] > h2 + h3 {
  margin-top: var(--s3);
  padding-top: 0;
  border-top: 0;
}
.faq > [data-lang='en'] > h3 + * {
  margin-top: 10px;
}
.faq blockquote {
  position: relative;
  min-height: 92px;
  padding-left: 90px;
}
.faq blockquote::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 14px;
  width: 56px;
  height: 56px;
  background: url('/img/dig-head.svg') center / 56px 56px no-repeat;
}
.faq > [data-lang='en'] > .third-party {
  margin-top: var(--s5);
}
@media (min-width: 1080px) {
  .prose.faq {
    max-width: none;
  }
  .faq-head {
    max-width: calc(276px + 68ch);
    padding-left: 276px;
  }
  .faq > [data-lang='en'] {
    display: grid;
    grid-template-columns: 220px minmax(0, 68ch);
    column-gap: 56px;
    row-gap: 0;
    justify-content: center;
  }
  .faq > [data-lang='en'] > * {
    grid-column: 2;
  }
  .faq > [data-lang='en'] > .faq-toc {
    position: sticky;
    top: 124px;
    grid-column: 1;
    grid-row: 1 / span 400;
    align-self: start;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 12px 0 0;
    border-top: 2px solid var(--line-strong);
  }
  .faq-toc a {
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--muted);
  }
  .faq-toc a:hover {
    background: var(--card-2);
    color: var(--fg);
  }
}

/* risks: the short version (underground), then the twelve risks on one root line */
.short-version {
  margin: var(--s4) 0 var(--s3);
  /* the bottom padding holds the Root ring of the roots art, under the last line */
  padding: 24px 24px 34px;
  border: 1px solid var(--soil-gold-line);
  border-radius: var(--r-lg);
}
.prose .short-version h2 {
  margin: 0 0 14px;
  color: var(--soil-gold);
  font: italic 500 22px/1.3 var(--serif);
  font-variation-settings: 'SOFT' 100;
}
.prose .short-version ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prose .short-version li {
  position: relative;
  margin: 0;
  padding-left: 26px;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.5;
}
.short-version li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 12px;
  height: 12px;
  border: 2.5px solid var(--soil-danger);
  border-radius: 50%;
}
.short-version li:first-child {
  font-weight: 700;
}
@media (min-width: 600px) {
  .short-version {
    padding: 28px 32px 26px;
  }
  .risks [data-lang='en'] > h2,
  .risks [data-lang='en'] > h2 ~ * {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 7px;
    padding-left: 32px;
    border-left: 2px solid var(--line-strong);
  }
  .risks [data-lang='en'] > h2 {
    position: relative;
    padding-top: 40px;
    padding-bottom: 12px;
  }
  .risks [data-lang='en'] > h2:first-of-type {
    padding-top: 6px;
  }
  .risks [data-lang='en'] > h2::before {
    content: '';
    position: absolute;
    left: -7px;
    top: calc(40px + 0.55em - 6px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 4px var(--bg);
  }
  .risks [data-lang='en'] > h2:first-of-type::before {
    top: calc(6px + 0.55em - 6px);
  }
  .risks [data-lang='en'] > h2 ~ p,
  .risks [data-lang='en'] > h2 ~ ul {
    padding-bottom: var(--s2);
  }
  .risks [data-lang='en'] > h2 ~ ul {
    padding-left: calc(32px + 1.25em);
  }
  .risks [data-lang='en'] > :last-child {
    padding-bottom: 6px;
  }
}
.risks #values-note {
  margin-top: var(--s4);
}

/* terms: the in-document parts are titled like chapters */
.terms h2 {
  margin-top: 40px;
  font-size: clamp(22px, 0.6vw + 19px, 26px);
}
.terms h1 ~ h1 {
  position: relative;
  margin-top: var(--s6);
  padding-top: 40px;
  font-size: clamp(30px, 1.5vw + 24px, 36px);
}

/* official links: the verified intro, the addresses as rows, the report box, the rules */
.official [data-lang='en'] > p:nth-of-type(1),
.official [data-lang='en'] > p:nth-of-type(2) {
  position: relative;
  margin: 0;
  padding: 18px 20px 6px 56px;
  border-inline-start: 4px solid var(--accent);
  border-radius: 16px 16px 0 0;
  background: var(--wash-moss);
}
.official [data-lang='en'] > p:nth-of-type(2) {
  margin-bottom: var(--s4);
  padding: 6px 20px 18px 56px;
  border-radius: 0 0 16px 16px;
}
.official [data-lang='en'] > p:nth-of-type(1)::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 21px;
  width: 24px;
  height: 24px;
  background: var(--accent);
  -webkit-mask: url('/img/ui/check.svg') center / 24px 24px no-repeat;
  mask: url('/img/ui/check.svg') center / 24px 24px no-repeat;
}
.official [data-lang='en'] > ul:not(:last-of-type) {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.official [data-lang='en'] > ul:not(:last-of-type) > li {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-1), var(--hl-top);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.official li > a,
.official li > .placeholder,
.official li [data-official] {
  font-weight: 400;
}
.official [data-official] {
  display: block;
  margin-top: 4px;
  font: 400 15px/1.5 var(--mono);
  overflow-wrap: anywhere;
}
.official [data-official] .placeholder {
  font-family: var(--sans);
}
/* every row the same: the label on line 1, the value on line 2 (the Telegram and X links and their "not published
   yet" pill too, like the addresses above them) */
.official [data-lang='en'] > ul:not(:last-of-type) > li > a {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  font: 400 15px/1.5 var(--mono);
}
.official [data-lang='en'] > ul:not(:last-of-type) > li > span.placeholder {
  display: flex;
  width: fit-content;
  margin-top: 4px;
}
.official #report + p {
  position: relative;
  padding: 14px 16px 14px 48px;
  border-inline-start: 4px solid var(--soft);
  border-radius: 12px;
  background: var(--card-2);
  font-size: 16px;
  line-height: 1.6;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .official #report + p {
    border-inline-start-color: color-mix(in srgb, var(--danger) 60%, var(--card-2));
  }
}
.official #report + p::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 16px;
  width: 22px;
  height: 22px;
  background: var(--danger);
  -webkit-mask: url('/img/ui/caution.svg') center / 22px 22px no-repeat;
  mask: url('/img/ui/caution.svg') center / 22px 22px no-repeat;
}
.official [data-lang='en'] > ul:last-of-type {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}
.official [data-lang='en'] > ul:last-of-type > li {
  position: relative;
  margin: 0;
  padding-left: 32px;
}
.official [data-lang='en'] > ul:last-of-type > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: var(--accent);
  -webkit-mask: url('/img/ui/check.svg') center / 20px 20px no-repeat;
  mask: url('/img/ui/check.svg') center / 20px 20px no-repeat;
}

/* metrics: the text at reading width, the numbers wider, one card per group */
.prose.metrics {
  max-width: none;
}
/* Fungi beside the title: the numbers come from the Fungi indexer (§17). Small and to the right of the text on
   narrow screens; on wide ones it stands in the empty space right of the reading measure */
.mx-intro {
  position: relative;
}
.page-mascot {
  float: right;
  width: 96px;
  height: 96px;
  margin: -6px 0 8px 12px;
}
.page-mascot .page-art {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 1000px) {
  .metrics > .mx-intro > .page-mascot {
    position: absolute;
    top: -40px;
    right: 40px;
    float: none;
    width: 188px;
    height: 188px;
    max-width: none;
    margin: 0;
  }
}
/* one column, 1080px wide, for everything on the page, so the text and the tiles share one left edge. The text
   itself keeps the 750px reading measure of the other text pages (68ch, in px) */
.metrics > .kicker,
.metrics > [data-lang] {
  max-width: 1080px;
  margin-inline: auto;
}
.metrics > [data-lang] > * {
  max-width: 750px;
}
#metrics-body {
  display: grid;
  gap: 24px;
  max-width: 1080px;
  margin: var(--s4) auto var(--s5);
}
#metrics-body > * {
  margin: 0;
}
#metrics-body > :not(.mx-group) {
  width: 100%;
  max-width: 750px;
  justify-self: start;
}
#metrics-body > p.tag.placeholder {
  width: fit-content;
}
@media (min-width: 900px) {
  #metrics-body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #metrics-body > :not(.mx-group) {
    grid-column: 1 / -1;
  }
}
.mx-group h2 {
  margin: 0 0 10px;
  font: 600 22px/1.2 var(--serif);
}
/* "From the contracts, right now": the home page tiles, above ground (cards on parchment; gold only for the vault) */
.mx-chain {
  margin-top: var(--s4);
}
.mx-chain > h2 {
  max-width: 1080px;
  margin: 0 auto var(--s2);
}
#metrics-chain {
  max-width: 1080px;
  margin-inline: auto;
}
#metrics-chain > p {
  max-width: 750px;
  margin: 0;
}
#metrics-chain .stat {
  border-color: var(--line);
  background: var(--card);
  box-shadow: var(--shadow-1), var(--hl-top);
}
#metrics-chain .stat-v {
  font-size: clamp(24px, 1.2vw + 18px, 32px);
}
@media (max-width: 599px) {
  #metrics-chain .stat-v {
    font-size: 21px;
  }
}
#metrics-chain .not-live {
  max-width: 750px;
  margin-inline: 0;
}
#metrics-chain .not-live h3 {
  margin-top: 0;
}
.mx-group .kv {
  margin: 0;
}
#metrics-body > .kv {
  padding: 8px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
details.defs {
  margin: 0 0 var(--s3);
  padding-block: 4px;
}
details.defs > summary {
  font: 600 20px/1.3 var(--serif);
}
details.defs > ul {
  margin: 4px 0 8px;
  font-size: 16px;
}

/* 404: Dig on a short strip of soil */
.lost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s6) 0 var(--s5);
  text-align: center;
}
.lost > * {
  margin: 0;
}
.lost-ground {
  position: relative;
  isolation: isolate;
  display: inline-block;
  width: 320px;
  max-width: 100%;
  line-height: 0;
}
.lost-ground .lost-art {
  display: block;
  width: 220px;
  height: 220px;
  margin-inline: auto;
}
.lost-ground::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 16px;
  background: var(--soil);
  -webkit-mask: url('/img/decor/soil-line.svg') 0 0 / 640px 16px repeat-x;
  mask: url('/img/decor/soil-line.svg') 0 0 / 640px 16px repeat-x;
}
/* a little soil thrown up around the hole (it flies once when the page opens) */
.lost-ground .dirt i {
  position: absolute;
  bottom: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terra);
}
.lost-ground .dirt i:nth-child(1) { left: 16%; --dx: 30px; }
.lost-ground .dirt i:nth-child(2) { left: 22%; bottom: 22px; width: 5px; height: 5px; background: var(--casca); --dx: 22px; }
.lost-ground .dirt i:nth-child(3) { left: 28%; width: 4px; height: 4px; --dx: 14px; }
.lost-ground .dirt i:nth-child(4) { left: 72%; width: 5px; height: 5px; background: var(--casca); --dx: -14px; }
.lost-ground .dirt i:nth-child(5) { left: 79%; bottom: 21px; --dx: -24px; }
.lost-ground .dirt i:nth-child(6) { left: 86%; width: 4px; height: 4px; --dx: -32px; }
.lost h1 {
  font-size: clamp(32px, 2.4vw + 24px, 48px);
}
.lost .cta-row.center {
  margin-top: var(--s1);
}

/* ------------------------------------------------------------ footer: underground, every page */
.site-footer {
  padding: 72px 0 40px;
  font-size: 16px;
  line-height: 1.6;
}
/* a small Fungi grows out of the footer's soil line (§17): the box ends on the line, so the soil band paints over the
   cut and the moss rim runs behind the stem */
.foot-fungi {
  position: absolute;
  top: -70px;
  right: max(20px, 7%);
  width: 84px;
  height: 70px;
  overflow: hidden;
  pointer-events: none;
}
.foot-fungi img {
  display: block;
  width: 72px;
  height: 72px;
  margin-inline: auto;
  transform-origin: 50% 100%;
}
.foot-grid {
  display: grid;
  gap: var(--s4);
}
@media (min-width: 600px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1080px) {
  .foot-grid {
    grid-template-columns: 5fr 3fr 4fr;
  }
  .foot-brand {
    grid-column: auto;
  }
}
.foot-logo {
  display: block;
  width: 136px;
  height: auto;
  margin-bottom: var(--s3);
}
.lemma {
  margin: 0 0 6px;
  color: var(--soil-gold);
  font: italic 500 clamp(24px, 2vw + 18px, 36px)/1.25 var(--serif);
  font-variation-settings: 'SOFT' 100;
}
.risk-line {
  margin: 0;
  color: var(--soil-danger);
  font: 700 17px/1.4 var(--sans);
}
.foot-title {
  margin-bottom: 12px;
  color: var(--fg);
  font: 600 20px/1.2 var(--serif);
}
.foot-col ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-col a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.foot-col a:hover,
.foot-col a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.foot-legal {
  display: grid;
  gap: 12px;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--soil-line);
}
.foot-legal > * {
  max-width: 80ch;
  margin: 0;
}
.anti-fake {
  color: var(--fg);
  font-weight: 700;
}
.site-footer .legal p {
  margin: 0;
  color: var(--muted);
}
.site-footer .legal strong {
  color: var(--fg);
}
.site-footer .fine {
  color: var(--muted);
}

/* ------------------------------------------------------------ living ground: backgrounds and details (§16.3) */
/* Each section has its own background, so the page has a rhythm: growth rings on the parchment, glints and fireflies
   in the soil, a mycelium network behind Fungi and Dig. Line art only, in the section's own tokens; never behind a
   number, a price or a button's text at a contrast that matters (it stays at 7–14% opacity). */
.bg-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-art ~ .wrap {
  position: relative;
  z-index: 1;
}
.bg-art.rings-r::before,
.bg-art.rings-l::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  background: var(--art);
  opacity: var(--art-o);
  -webkit-mask: url('/img/decor/rings.svg') center / contain no-repeat;
  mask: url('/img/decor/rings.svg') center / contain no-repeat;
}
.bg-art.rings-r::before {
  top: -170px;
  right: -190px;
}
.bg-art.rings-l::before {
  bottom: -250px;
  left: -230px;
  width: 620px;
  height: 620px;
}
/* gold glints in the soil (the band "What feeds the Root vault") */
.bg-art.glints i,
.bg-art.fireflies i {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ouro);
  opacity: 0.45;
}
.bg-art.glints i:nth-child(1) { left: 7%; top: 18%; }
.bg-art.glints i:nth-child(2) { left: 23%; top: 64%; width: 2px; height: 2px; }
.bg-art.glints i:nth-child(3) { left: 38%; top: 30%; }
.bg-art.glints i:nth-child(4) { left: 52%; top: 82%; width: 4px; height: 4px; }
.bg-art.glints i:nth-child(5) { left: 64%; top: 14%; width: 2px; height: 2px; }
.bg-art.glints i:nth-child(6) { left: 77%; top: 52%; }
.bg-art.glints i:nth-child(7) { left: 88%; top: 26%; width: 4px; height: 4px; }
.bg-art.glints i:nth-child(8) { left: 95%; top: 74%; width: 2px; height: 2px; }
/* fireflies: a few warm lights that drift in the deep soil and under the footer's roots */
.bg-art.fireflies i {
  width: 4px;
  height: 4px;
  opacity: 0.55;
  box-shadow: 0 0 10px 2px rgba(212, 162, 58, 0.45);
}
.bg-art.fireflies i:nth-child(1) { left: 12%; top: 22%; }
.bg-art.fireflies i:nth-child(2) { left: 34%; top: 72%; }
.bg-art.fireflies i:nth-child(3) { left: 58%; top: 16%; width: 3px; height: 3px; }
.bg-art.fireflies i:nth-child(4) { left: 71%; top: 64%; }
.bg-art.fireflies i:nth-child(5) { left: 86%; top: 34%; width: 3px; height: 3px; }
.bg-art.fireflies i:nth-child(6) { left: 46%; top: 44%; width: 3px; height: 3px; }
/* the mycelium behind Fungi and Dig: fungi live on roots and pass signals between trees */
.bg-art.myc::before,
.bg-art.myc::after,
.myc-net {
  position: absolute;
  left: -60px;
  bottom: -50px;
  width: 560px;
  height: 360px;
}
.bg-art.myc::before,
.bg-art.myc::after {
  content: '';
  background: var(--art);
  opacity: calc(var(--art-o) + 0.03);
  -webkit-mask: url('/img/decor/mycelium.svg') 0 0 / 560px 360px no-repeat;
  mask: url('/img/decor/mycelium.svg') 0 0 / 560px 360px no-repeat;
}
.bg-art.myc::after {
  left: auto;
  bottom: auto;
  right: -90px;
  top: -40px;
  opacity: var(--art-o);
  transform: scale(-1, -1);
}
.myc-net i {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--art);
  border-radius: 50%;
  opacity: 0;
}
.myc-net i:nth-child(1) { left: 130px; top: 250px; }
.myc-net i:nth-child(2) { left: 250px; top: 190px; }
.myc-net i:nth-child(3) { left: 380px; top: 130px; }
.myc-net i:nth-child(4) { left: 520px; top: 80px; }
.myc-net i:nth-child(5) { left: 340px; top: 230px; }
.myc-net i:nth-child(6) { left: 210px; top: 290px; }
@media (max-width: 899px) {
  .bg-art.myc::after {
    display: none;
  }
}
/* phones: the cards stack and cover the network, so its signal rings would show half hidden behind a card corner */
@media (max-width: 599px) {
  .myc-net {
    display: none;
  }
}

/* Fungi and Dig: each in a round frame (their art is swapped in a later stage; the frame stays) */
.mascot-frame {
  position: relative;
  isolation: isolate;
  align-self: flex-start;
  display: grid;
  place-items: end center;
  width: 152px;
  height: 152px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--card), var(--card-2) 72%);
  box-shadow: var(--shadow-1), inset 0 -14px 28px -18px rgba(28, 19, 14, 0.4);
}
.mascot-frame::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.5;
}
.fungi-frame {
  background: radial-gradient(circle at 50% 30%, var(--card), var(--wash-moss) 74%);
}
.fungi-frame::before {
  background: var(--art);
  opacity: 0.22;
  -webkit-mask: url('/img/decor/mycelium.svg') -150px -40px / 420px 270px no-repeat;
  mask: url('/img/decor/mycelium.svg') -150px -40px / 420px 270px no-repeat;
}
.dig-frame {
  background: radial-gradient(circle at 50% 30%, var(--card), var(--wash-gold) 74%);
}
/* Dig's frame: a mound of soil he stands on */
.dig-frame::before {
  inset: auto -12% -46% -12%;
  height: 66%;
  border-radius: 50%;
  background: var(--soil);
  opacity: 1;
}
/* QA 19 Oct 2026: at 128px Dig's spade and paw touched the circle and Fungi's soil was cut flat; at 116px, a little
   below the middle, both stand inside it with room around them */
.mascot-frame .feature-art {
  width: 116px;
  height: 116px;
  margin-bottom: 12px;
}
.card.feature {
  position: relative;
  overflow: hidden;
}
/* a thin moss (Fungi) or gold (Dig) light along the top edge of each card */
.card.feature::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.55;
}
.card.dig-card::before {
  background: linear-gradient(90deg, transparent, var(--gold-text) 30%, var(--gold-text) 70%, transparent);
}

/* the field note: a large, faint mushroom in its corner */
.field-note {
  overflow: hidden;
}
.field-note::after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 168px;
  height: 168px;
  background: var(--danger);
  opacity: 0.07;
  -webkit-mask: url('/img/ui/mushroom.svg') center / contain no-repeat;
  mask: url('/img/ui/mushroom.svg') center / contain no-repeat;
  transform: rotate(-12deg);
  pointer-events: none;
}
.field-note > * {
  position: relative;
}

/* "How a coin grows": numbered stages on a dashed root line */
.step-num {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
/* faint growth rings in each card's corner (the mask is larger than the box, so only a quarter shows) */
.how > li::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 112px;
  height: 112px;
  border-top-right-radius: var(--radius);
  background: var(--art);
  opacity: calc(var(--art-o) * 0.8);
  -webkit-mask: url('/img/decor/rings.svg') 28px -28px / 140px 140px no-repeat;
  mask: url('/img/decor/rings.svg') 28px -28px / 140px 140px no-repeat;
  pointer-events: none;
}

/* coin cards: a gold light rises from the Root band on hover and focus */
a.coin-row::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -40px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, var(--card-glow), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.coin-row .img .thumb {
  box-shadow: 0 0 0 0 transparent;
}
@media (hover: hover) {
  a.coin-row:hover::after {
    opacity: 1;
  }
  a.coin-row:hover .img .thumb {
    box-shadow: 0 0 0 4px var(--wash-gold);
  }
}
a.coin-row:focus-visible::after {
  opacity: 1;
}

/* "Not live on testnet yet" and the empty list: a ground line under Dig and faint rings */
.not-live,
.card.empty {
  position: relative;
  overflow: hidden;
}
.not-live::after,
.card.empty::after {
  content: '';
  position: absolute;
  right: -110px;
  top: -120px;
  width: 340px;
  height: 340px;
  background: var(--art);
  opacity: var(--art-o);
  -webkit-mask: url('/img/decor/rings.svg') center / contain no-repeat;
  mask: url('/img/decor/rings.svg') center / contain no-repeat;
  pointer-events: none;
}
.not-live > *,
.card.empty > * {
  position: relative;
  z-index: 1;
}

/* skeletons: a soft light passes over them while the network is read (gold in the soil) */
.sk {
  position: relative;
  overflow: hidden;
  --sk-light: rgba(255, 255, 255, 0.55);
}
.soil .sk,
.meter .sk {
  --sk-light: rgba(212, 162, 58, 0.12);
}

/* a value that changed after a fresh read glows once (lib/motion.js flashOnChange) */
.flash {
  border-radius: 6px;
}

/* the footer's last row: back to the top, and the motion switch */
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--soil-line);
}
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.to-top::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url('/img/ui/arrow-down.svg') center / 16px 16px no-repeat;
  mask: url('/img/ui/arrow-down.svg') center / 16px 16px no-repeat;
  transform: rotate(180deg);
}
.to-top:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* the sticky header gets a soft edge once the page moves under it */
@media (min-width: 900px) {
  .site-header.is-stuck {
    box-shadow: 0 12px 28px -22px rgba(28, 19, 14, 0.55);
  }
}

/* the contents: "you are here" (lib/motion.js sets aria-current="location") */
.faq-toc a[aria-current],
.page-toc a[aria-current] {
  border-color: var(--accent);
  background: var(--wash-moss);
  color: var(--fg);
}
@media (min-width: 1080px) {
  .faq-toc a {
    position: relative;
  }
  .faq-toc a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleY(0);
  }
  .faq-toc a[aria-current] {
    background: none;
    color: var(--fg);
  }
  .faq-toc a[aria-current]::before {
    transform: none;
  }
}

/* every other page: a soft light and faint growth rings at the top, behind the page title */
main#main:not(.home) {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
main#main:not(.home)::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -170px;
  right: -190px;
  width: 460px;
  height: 460px;
  background: var(--art);
  opacity: var(--art-o);
  -webkit-mask: url('/img/decor/rings.svg') center / contain no-repeat;
  mask: url('/img/decor/rings.svg') center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 599px) {
  main#main:not(.home)::before {
    width: 300px;
    height: 300px;
    right: -120px;
    top: -40px;
  }
}

/* typography: kerning everywhere, hanging quotes where the browser has them, no orphans in prose */
body {
  font-kerning: normal;
}
.prose p,
.prose li,
.lead,
.card p {
  text-wrap: pretty;
}
blockquote,
.lemma {
  hanging-punctuation: first last;
}
h2,
h3 {
  font-variation-settings: 'SOFT' 30;
}

/* links with an arrow: the arrow is its own box, so it can lean forward on hover */
.text-link span[aria-hidden='true'],
.faq-card .more span[aria-hidden='true'] {
  display: inline-block;
}
.btn.lg:not(.ghost):not(.secondary) {
  position: relative;
  overflow: hidden;
}
/* a light passes over the main buttons on hover (above it, the label stays readable: it is only 22% white) */
.btn.lg:not(.ghost):not(.secondary)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

/* ------------------------------------------------------------ motion (only when the viewer has not asked for less) */
/* Where things rest when nothing moves (these are not motion: the transforms below start from them) */
.hero-ground::before,
.hero-ground::after,
.step-icon {
  transform-origin: 50% 100%;
}
.hero-dig blockquote {
  transform-origin: 100% 50%;
}
@media (min-width: 1080px) {
  .hero-dig blockquote {
    transform-origin: 50% 100%;
  }
}
.how::before {
  transform-origin: 0 0;
}
.root-ring .sap {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 0 8px 1px rgba(212, 162, 58, 0.6);
  opacity: 0;
  pointer-events: none;
}
.root-ring .s1,
.root-ring .s2 {
  right: calc(100% + 16px);
}
.root-ring .s3,
.root-ring .s4 {
  left: calc(100% - 2px);
}
@media (max-width: 899px) {
  .root-ring .sap {
    top: auto;
    right: auto;
    left: 50%;
    margin: 0 0 0 -3px;
  }
  .root-ring .s1,
  .root-ring .s2 {
    bottom: calc(100% + 12px);
  }
  .root-ring .s3,
  .root-ring .s4 {
    top: calc(100% + 1px);
  }
}

/* Everything that moves is in this one block (docs/SITE-DESIGN.md §16.5). With prefers-reduced-motion: reduce none of
   it applies: states change at once and every drawing is complete. "Pause animations" (html[data-motion='off']) stops
   it all too. Only transform and opacity move (a few SVG strokes draw in once). The slow loops rest while their scene
   is off screen (lib/motion.js sets [data-inview]). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* ---- controls: quick and tactile */
  .bar > span {
    transition: width var(--dur-4) var(--ease);
  }
  .btn {
    transition: background-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  @media (hover: hover) {
    .btn:not([disabled]):not([aria-disabled='true']):hover {
      transform: translateY(-1px);
    }
    .btn:not(.ghost):not(.secondary):not(.btn-wallet):not([disabled]):not([aria-disabled='true']):hover {
      box-shadow: 0 3px 0 var(--btn-edge), 0 12px 22px -14px rgba(28, 19, 14, 0.5);
    }
    .btn.lg:not(.ghost):not(.secondary):hover::after {
      transform: translateX(120%);
    }
  }
  .btn:active:not([disabled]):not([aria-disabled='true']) {
    transform: translateY(2px);
  }
  .btn:not(.ghost):not(.secondary):active:not([disabled]):not([aria-disabled='true']) {
    box-shadow: 0 0 0 var(--btn-edge);
  }
  .btn.lg:not(.ghost):not(.secondary)::after {
    transition: transform 800ms var(--ease-out);
  }
  .chip,
  .motion-toggle,
  .seg span {
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
  }
  .chip:active,
  .motion-toggle:active {
    transform: scale(0.94);
  }
  .main-nav a,
  .foot-col a,
  .to-top,
  .faq-toc a,
  .page-toc a,
  .text-link,
  .link-btn {
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .text-link span[aria-hidden='true'],
  .faq-card .more span[aria-hidden='true'],
  .to-top::before {
    transition: transform var(--dur-3) var(--ease-out);
  }
  .text-link:hover span[aria-hidden='true'],
  .faq-card:hover .more span[aria-hidden='true'],
  .faq-card:focus-visible .more span[aria-hidden='true'] {
    transform: translateX(4px);
  }
  .to-top:hover::before {
    transform: rotate(180deg) translateY(3px);
  }
  .theme-toggle svg {
    transition: transform 520ms var(--ease-spring);
  }
  :root[data-theme='dark'] .theme-toggle svg {
    transform: rotate(180deg);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle svg {
      transform: rotate(180deg);
    }
  }
  input,
  textarea,
  select {
    transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  }
  .site-header {
    transition: box-shadow var(--dur-3) var(--ease);
  }
  .faq-toc a::before {
    transition: transform var(--dur-3) var(--ease-out);
  }
  details > summary::after {
    transition: transform var(--dur-2) var(--ease);
  }
  details[open] > :not(summary) {
    animation: rp-unfold var(--dur-3) var(--ease-out) both;
  }

  /* ---- cards that are links lift; the coin card's Root band glows */
  a.coin-row,
  .faq-card {
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease);
  }
  a.coin-row::after {
    transition: opacity var(--dur-4) var(--ease);
  }
  .coin-row .img .thumb {
    transition: box-shadow var(--dur-3) var(--ease);
  }
  .thumb-img {
    transition: opacity var(--dur-3) var(--ease);
  }
  @media (hover: hover) {
    a.coin-row:hover,
    .faq-card:hover {
      transform: translateY(-3px);
    }
  }
  a.coin-row:focus-visible,
  .faq-card:focus-visible {
    transform: translateY(-3px);
  }

  /* ---- loading, toasts, dialogs, busy */
  .sk::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--sk-light), transparent);
    transform: translateX(-100%);
    animation: rp-sweep 1.6s var(--ease) infinite;
  }
  .toast:not([hidden]) {
    animation: rp-toast-in var(--dur-3) var(--ease);
  }
  dialog[open] {
    animation: rp-dialog-in 220ms var(--ease-out);
  }
  dialog[open]::backdrop {
    animation: rp-fade 220ms var(--ease);
  }
  .btn[aria-busy='true']::before,
  .status[data-state='busy']::before {
    animation: rp-spin 0.8s linear infinite;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 380ms;
    animation-timing-function: var(--ease);
  }

  /* ---- the hero's entrance (once): words rise, the roots grow, Dig peeks out, then he speaks */
  .hero-sky,
  .hero-hills {
    animation: rp-fade 1200ms var(--ease) both;
  }
  .hero .kicker {
    animation: rp-rise var(--dur-5) var(--ease-out) 60ms both;
  }
  .display .w {
    animation: rp-word 860ms var(--ease-out) both;
  }
  .display .w:nth-child(1) {
    animation-delay: 120ms;
  }
  .display .w:nth-child(2) {
    animation-delay: 200ms;
  }
  .display .w:nth-child(3) {
    animation-delay: 280ms;
  }
  .display .w:nth-child(4) {
    animation-delay: 380ms;
  }
  .root-under path {
    stroke-dasharray: 1 2;
    animation: rp-draw 900ms var(--ease-out) 950ms both;
  }
  .root-under .twig {
    animation-duration: 600ms;
    animation-delay: 1550ms;
  }
  .hero .lead {
    animation: rp-rise var(--dur-5) var(--ease-out) 440ms both;
  }
  .hero .cta-row {
    animation: rp-rise var(--dur-5) var(--ease-out) 540ms both;
  }
  .hero .core {
    animation: rp-rise var(--dur-5) var(--ease-out) 640ms both;
  }
  .hero .trust-strip {
    animation: rp-rise var(--dur-5) var(--ease-out) 720ms both;
  }
  .burrow {
    animation: rp-rise 800ms var(--ease-out) 500ms both;
  }
  .mascot-peek {
    animation: rp-peek 1150ms var(--ease-out) 1250ms both, rp-bob 7s ease-in-out 3.4s infinite;
  }
  .hero-dig blockquote {
    animation: rp-pop 720ms var(--ease-out) 2050ms both;
  }
  .hero-dig figcaption {
    animation: rp-fade 500ms var(--ease) 2400ms both;
  }
  .ground-life .sprout {
    animation: rp-sprout 900ms var(--ease-spring) 300ms both;
  }
  .ground-life .sprout.g2 {
    animation-delay: 420ms;
  }
  .ground-life .sprout.g3 {
    animation-delay: 540ms;
  }
  .ground-life .root,
  .burrow-root {
    --d: 600ms;
    animation: rp-glow 7s ease-in-out 3s infinite;
  }
  .ground-life .root.g2 {
    --d: 740ms;
    animation-delay: 4.2s;
  }
  .ground-life .root.g3 {
    --d: 880ms;
    animation-delay: 5.1s;
  }
  .burrow-root {
    --d: 1300ms;
    animation-delay: 3.6s;
  }
  .ground-life .root path,
  .burrow-root path {
    stroke-dasharray: 1 2;
    animation: rp-draw 1500ms var(--ease-out) both;
    animation-delay: var(--d);
  }
  .ground-life .root path:nth-child(n + 2),
  .burrow-root path:nth-child(n + 2) {
    animation-delay: calc(var(--d) + 260ms);
  }
  .ground-life .root path:nth-child(n + 4),
  .burrow-root path:nth-child(n + 4) {
    animation-delay: calc(var(--d) + 520ms);
  }
  .root-node {
    animation: rp-pop 600ms var(--ease-spring) 2300ms both;
  }
  .root-node::after {
    animation: rp-ripple 3.4s var(--ease-out) 3s infinite;
  }
  .hero-live {
    animation: rp-fade 700ms var(--ease) 1500ms both;
  }
  .hero-live.is-live .live-text {
    animation: rp-fade 600ms var(--ease) both;
  }
  .hero-live.is-live .live-dot::after {
    animation: rp-ripple 2.6s var(--ease-out) infinite;
  }
  .hero .motion-toggle {
    animation: rp-fade 700ms var(--ease) 1700ms both;
  }

  /* ---- the hero's slow life: the light breathes, spores drift, the soil line sways, tufts move in the wind */
  .sky-glow {
    animation: rp-breathe 9s ease-in-out infinite;
  }
  .spores i {
    animation: rp-drift 15s linear infinite;
  }
  .spores i:nth-child(2n) {
    animation-duration: 19s;
  }
  .spores i:nth-child(3n) {
    animation-duration: 12s;
  }
  .spores i:nth-child(1) { animation-delay: -1s; }
  .spores i:nth-child(2) { animation-delay: -7s; }
  .spores i:nth-child(3) { animation-delay: -4s; }
  .spores i:nth-child(4) { animation-delay: -11s; }
  .spores i:nth-child(5) { animation-delay: -2.5s; }
  .spores i:nth-child(6) { animation-delay: -9s; }
  .spores i:nth-child(7) { animation-delay: -5.5s; }
  .spores i:nth-child(8) { animation-delay: -13s; }
  .spores i:nth-child(9) { animation-delay: -3s; }
  .spores i:nth-child(10) { animation-delay: -8s; }
  /* around Dig the spores only rise from the mound to his shoulders */
  .burrow-spores i {
    animation-name: rp-mote;
  }
  .hero-ground::before,
  .hero-ground::after {
    animation: rp-sway 12s ease-in-out infinite;
  }
  .ground-life .tuft {
    animation: rp-tuft 5.6s ease-in-out infinite;
  }
  .tuft.t2 { animation-delay: -1.3s; }
  .tuft.t3 { animation-delay: -2.4s; }
  .tuft.t4 { animation-delay: -3.1s; }
  .tuft.t5 { animation-delay: -4.2s; }
  .glints i,
  .bg-art.glints i {
    animation: rp-twinkle 4.2s ease-in-out infinite;
  }
  .glints i:nth-child(2n) {
    animation-duration: 5.4s;
  }
  .glints i:nth-child(1) { animation-delay: -0.6s; }
  .glints i:nth-child(2) { animation-delay: -2.2s; }
  .glints i:nth-child(3) { animation-delay: -1.4s; }
  .glints i:nth-child(4) { animation-delay: -3.6s; }
  .glints i:nth-child(5) { animation-delay: -0.2s; }
  .glints i:nth-child(6) { animation-delay: -2.9s; }
  .glints i:nth-child(7) { animation-delay: -1.9s; }
  .glints i:nth-child(8) { animation-delay: -4.4s; }

  /* ---- the soil bands and the footer: fireflies, the Root ring breathes, ETH flows in and out of it */
  .bg-art.fireflies i {
    animation: rp-firefly 14s ease-in-out infinite;
  }
  .bg-art.fireflies i:nth-child(2) { animation-duration: 17s; animation-delay: -5s; }
  .bg-art.fireflies i:nth-child(3) { animation-duration: 12s; animation-delay: -3s; }
  .bg-art.fireflies i:nth-child(4) { animation-duration: 19s; animation-delay: -9s; }
  .bg-art.fireflies i:nth-child(5) { animation-duration: 15s; animation-delay: -12s; }
  .bg-art.fireflies i:nth-child(6) { animation-duration: 21s; animation-delay: -7s; }
  .root-ring,
  .meter .big::before {
    animation: rp-pulse 3.8s ease-in-out infinite;
  }
  .coin-pic::before {
    animation: rp-breathe 6s ease-in-out infinite;
  }
  .root-ring .s1,
  .root-ring .s2 {
    animation: rp-sap-in 3.2s var(--ease) infinite;
  }
  .root-ring .s2 {
    animation-delay: 1.6s;
  }
  .root-ring .s3,
  .root-ring .s4 {
    animation: rp-sap-out 3.2s var(--ease) 0.8s infinite;
  }
  .root-ring .s4 {
    animation-delay: 2.4s;
  }
  @media (max-width: 899px) {
    .root-ring .s1,
    .root-ring .s2 {
      animation-name: rp-sap-down-in;
    }
    .root-ring .s3,
    .root-ring .s4 {
      animation-name: rp-sap-down-out;
    }
  }
  .myc-net i {
    animation: rp-signal 7.2s var(--ease-out) infinite;
  }
  .myc-net i:nth-child(2) { animation-delay: 1.2s; }
  .myc-net i:nth-child(3) { animation-delay: 2.4s; }
  .myc-net i:nth-child(4) { animation-delay: 3.6s; }
  .myc-net i:nth-child(5) { animation-delay: 4.8s; }
  .myc-net i:nth-child(6) { animation-delay: 6s; }
  .how::before {
    animation: rp-grow-y 1400ms var(--ease-out) 200ms both;
  }
  @media (min-width: 1080px) {
    .how::before {
      animation-name: rp-grow-x;
    }
  }
  .how > li.is-in .step-icon {
    animation: rp-sprout 760ms var(--ease-spring) 260ms both;
  }
  .lost-ground .dirt i {
    animation: rp-dirt 900ms var(--ease-out) 300ms both;
  }
  .create-ground i {
    animation: rp-tuft 5.6s ease-in-out infinite;
  }
  .create-ground i:nth-child(2n) {
    animation-delay: -2.2s;
  }
  .create-dig {
    animation: rp-rise 700ms var(--ease-out) 200ms both, rp-dig 4.2s ease-in-out 1.6s infinite;
  }
  .lost-ground .dirt i:nth-child(2n) {
    animation-delay: 420ms;
  }
  .lost-ground .dirt i:nth-child(3n) {
    animation-delay: 520ms;
  }

  /* ---- the mascots (§17): small, slow and alive. Dig breaks through, throws a little soil, grips the lip, then
     blinks, lifts his brows now and then, and his sprout sways; on the cards he waves and Fungi reads the threads
     (its cap tip sways, a signal runs from node to node); on the 404 he keeps digging */
  .burrow-dirt i {
    animation: rp-clod 1000ms var(--ease-out) 1380ms both;
  }
  .burrow-dirt i:nth-child(2n) {
    animation-delay: 1460ms;
  }
  .burrow-dirt i:nth-child(3n) {
    animation-delay: 1540ms;
  }
  .burrow-paws .paw {
    animation: rp-paw 460ms var(--ease-spring) 1820ms both;
  }
  .burrow-paws .p2 {
    animation-delay: 1960ms;
  }
  /* Fungi, next door, pops up out of the ground once Dig is out, then sways now and then (the whole image moves) */
  .hero-fungi {
    animation: rp-sprout 820ms var(--ease-spring) 2500ms both, rp-cap 9s ease-in-out 4.2s infinite;
  }
  :is(.mascot-art, .feature-art, .lost-art, .page-art) .m-eyes {
    animation: rp-blink 5.8s ease-in-out 3.3s infinite;
  }
  .feature-art .m-eyes {
    animation-delay: 1.4s;
  }
  .fungi-frame .feature-art .m-eyes {
    animation-duration: 6.6s;
    animation-delay: 2.6s;
  }
  .lost-art .m-eyes {
    animation-delay: 1.8s;
  }
  .mascot-art .m-brows {
    animation: rp-brow 9.4s ease-in-out 5.2s infinite;
  }
  :is(.mascot-art, .feature-art, .lost-art, .page-art) .m-sprout {
    animation: rp-leaf 8.4s ease-in-out 2.4s infinite;
  }
  .feature-art .m-wave {
    animation: rp-wave 7.2s ease-in-out 1.2s infinite;
  }
  :is(.feature-art, .page-art) .m-tip {
    animation: rp-tip 8.8s ease-in-out 1.6s infinite;
  }
  :is(.feature-art, .page-art) .m-nodes circle:nth-child(3n + 1) {
    animation: rp-node 4.8s var(--ease-out) infinite;
  }
  :is(.feature-art, .page-art) .m-nodes circle:nth-child(4) {
    animation-delay: 1.2s;
  }
  :is(.feature-art, .page-art) .m-nodes circle:nth-child(7) {
    animation-delay: 2.4s;
  }
  :is(.feature-art, .page-art) .m-nodes circle:nth-child(10) {
    animation-delay: 3.6s;
  }
  .lost-art .m-crumbs {
    animation: rp-crumbs 1.6s ease-in-out 1.2s infinite;
  }
  .foot-fungi img {
    animation: rp-sprout 900ms var(--ease-spring) 300ms both, rp-tuft 7.6s ease-in-out 1.4s infinite;
  }

  /* ---- reveals (lib/motion.js): below the first screen, sections and cards rise into place once */
  .rv-ready .rv {
    transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
    transition-delay: calc(var(--rv-i, 0) * 80ms);
  }
  .rv-ready .rv:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  /* Keystone KV-2: printed (or saved as PDF) before it was scrolled, a page kept these parts at opacity 0: the Terms,
     Risks and FAQ lost their headings ("1. You can lose money, even all of it." among them). On paper everything is
     in its final place */
  @media print {
    .rv-ready .rv,
    .rv-ready .rv:not(.is-in) {
      opacity: 1 !important;
      transform: none !important;
    }
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
  }

  /* ---- the coin list: cards rise in after a read or a new order, their bars grow; bars elsewhere fill on view */
  #coins[data-deal] > li {
    animation: rp-rise 640ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  #coins[data-deal] .bar > span,
  [data-fill]:not([data-filled]) .bar > span {
    transform-origin: 0 50%;
    animation: rp-fill 1100ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms + 260ms);
  }
  .rv-ready [data-fill]:not(.is-in) .bar > span {
    animation-play-state: paused;
  }
  .flash {
    position: relative;
  }
  .flash::after {
    content: '';
    position: absolute;
    inset: -2px -6px;
    border-radius: 8px;
    background: rgba(212, 162, 58, 0.24);
    pointer-events: none;
    animation: rp-flash 1200ms var(--ease) both;
  }

  /* ---- scenes off screen rest (and the entrances wait until they are seen) */
  .rv-ready [data-scene]:not([data-inview]) :is(.sky-glow, .spores i, .tuft, .glints i, .fireflies i, .myc-net i, .root-ring, .sap, .mascot-peek, .root-node, .ground-life .root, .burrow-root, .how, .burrow-dirt i, .burrow-paws .paw, .hero-fungi, .create-ground i, .create-dig, .m-eyes, .m-brows, .m-sprout, .m-wave, .m-tip, .m-nodes circle, .foot-fungi img),
  .rv-ready [data-scene]:not([data-inview]) :is(.hero-ground, .root-node, .live-dot, .how)::before,
  .rv-ready [data-scene]:not([data-inview]) :is(.hero-ground, .root-node, .live-dot)::after {
    animation-play-state: paused;
  }

  /* ---- "Pause animations": everything stops where it ends (the final state of every drawing) */
  :root[data-motion='off'] *,
  :root[data-motion='off'] *::before,
  :root[data-motion='off'] *::after {
    animation: none !important;
    transition: none !important;
  }
  :root[data-motion='off'] {
    scroll-behavior: auto;
  }
}
@keyframes rp-fade {
  from {
    opacity: 0;
  }
}
@keyframes rp-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rp-word {
  from {
    opacity: 0;
    transform: translate3d(0, 0.42em, 0) rotate(3deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rp-draw {
  from {
    stroke-dashoffset: 1.01;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes rp-sprout {
  from {
    transform: scale(0);
  }
  to {
    transform: none;
  }
}
@keyframes rp-peek {
  0% {
    transform: translate3d(0, 108%, 0);
  }
  62% {
    transform: translate3d(0, -6%, 0);
  }
  82% {
    transform: translate3d(0, 2%, 0);
  }
  100% {
    transform: none;
  }
}
@keyframes rp-bob {
  0%,
  100% {
    transform: none;
  }
  35% {
    transform: translate3d(0, -3px, 0) rotate(-1.4deg);
  }
  65% {
    transform: translate3d(0, -1px, 0) rotate(1deg);
  }
}
@keyframes rp-pop {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  60% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rp-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  15% {
    opacity: 0.75;
  }
  80% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    transform: translate3d(18px, -120px, 0);
  }
}
@keyframes rp-mote {
  0% {
    opacity: 0;
    transform: none;
  }
  20% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translate3d(10px, -44px, 0);
  }
}
@keyframes rp-twinkle {
  0%,
  100% {
    opacity: 0.12;
    transform: scale(0.6);
  }
  50% {
    opacity: 0.95;
    transform: none;
  }
}
@keyframes rp-breathe {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}
@keyframes rp-glow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes rp-sway {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translate3d(-30px, 0, 0) scaleY(1.22);
  }
}
@keyframes rp-tuft {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
@keyframes rp-ripple {
  0% {
    opacity: 0.8;
    transform: scale(0.6);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes rp-pulse {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale(1.06);
  }
}
@keyframes rp-sap-in {
  0% {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
  }
  25%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(22px, 0, 0);
  }
}
@keyframes rp-sap-out {
  0% {
    opacity: 0;
    transform: none;
  }
  25%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(34px, 0, 0);
  }
}
@keyframes rp-sap-down-in {
  0% {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
  25%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
}
@keyframes rp-sap-down-out {
  0% {
    opacity: 0;
    transform: none;
  }
  25%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
}
@keyframes rp-signal {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  8% {
    opacity: 0.9;
  }
  32%,
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}
@keyframes rp-firefly {
  0%,
  100% {
    opacity: 0.15;
    transform: none;
  }
  25% {
    opacity: 0.85;
    transform: translate3d(16px, -22px, 0);
  }
  50% {
    opacity: 0.3;
    transform: translate3d(-8px, -40px, 0);
  }
  75% {
    opacity: 0.9;
    transform: translate3d(-20px, -14px, 0);
  }
}
@keyframes rp-dirt {
  0% {
    opacity: 0;
    transform: translate3d(var(--dx, 0), 0, 0) scale(0.4);
  }
  45% {
    opacity: 1;
    transform: translate3d(calc(var(--dx, 0) * 0.5), -34px, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
/* the mascots (§17) */
@keyframes rp-clod {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  12% {
    opacity: 1;
  }
  48% {
    transform: translate3d(calc(var(--dx, 0px) * 0.6), var(--up, -30px), 0) rotate(var(--r, 0deg));
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx, 0px), calc(var(--up, -30px) * -0.15), 0) rotate(calc(var(--r, 0deg) * 2)) scale(0.8);
  }
}
@keyframes rp-paw {
  0% {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scaleY(0.7);
  }
  55% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scaleY(1.06);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rp-blink {
  0%,
  44%,
  49%,
  100% {
    transform: none;
  }
  46.5% {
    transform: scaleY(0.08);
  }
}
@keyframes rp-brow {
  0%,
  58%,
  78%,
  100% {
    transform: none;
  }
  63%,
  72% {
    transform: translate3d(0, -6px, 0);
  }
}
/* the loops inside an inlined drawing are short events with long rests (QA 19 Oct 2026: an SVG part that moves is
   repainted on every frame; resting most of the cycle keeps that to about a second in eight) */
@keyframes rp-leaf {
  0%,
  15%,
  100% {
    transform: none;
  }
  3.5% {
    transform: rotate(-7deg);
  }
  8% {
    transform: rotate(6deg);
  }
  11.5% {
    transform: rotate(-2.5deg);
  }
}
@keyframes rp-cap {
  0%,
  22%,
  100% {
    transform: none;
  }
  6% {
    transform: rotate(-4deg);
  }
  13% {
    transform: rotate(3deg);
  }
  18% {
    transform: rotate(-1deg);
  }
}
@keyframes rp-wave {
  0%,
  58%,
  100% {
    transform: none;
  }
  64% {
    transform: rotate(-14deg);
  }
  71% {
    transform: rotate(7deg);
  }
  78% {
    transform: rotate(-11deg);
  }
  86% {
    transform: rotate(3deg);
  }
  92% {
    transform: none;
  }
}
@keyframes rp-tip {
  0%,
  16%,
  100% {
    transform: none;
  }
  4% {
    transform: rotate(-6deg);
  }
  9% {
    transform: rotate(8deg);
  }
  13% {
    transform: rotate(-2deg);
  }
}
@keyframes rp-node {
  0%,
  34%,
  100% {
    opacity: 0.26;
    transform: none;
  }
  10% {
    opacity: 0.85;
    transform: scale(1.7);
  }
}
@keyframes rp-crumbs {
  0%,
  100% {
    opacity: 1;
    transform: none;
  }
  45% {
    opacity: 0.55;
    transform: translate3d(0, -7px, 0);
  }
}
@keyframes rp-dig {
  0%,
  64%,
  100% {
    transform: none;
  }
  72% {
    transform: rotate(-3deg) translate3d(0, 2px, 0);
  }
  80% {
    transform: rotate(2deg);
  }
  88% {
    transform: rotate(-1deg);
  }
}
@keyframes rp-grow-x {
  from {
    transform: scaleX(0);
  }
}
@keyframes rp-grow-y {
  from {
    transform: scaleY(0);
  }
}
@keyframes rp-fill {
  from {
    transform: scaleX(0);
  }
}
@keyframes rp-flash {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rp-sweep {
  to {
    transform: translateX(100%);
  }
}
@keyframes rp-unfold {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
}
@keyframes rp-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rp-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------ forced colours: no decoration, clear edges */
@media (forced-colors: active) {
  .hero-sky,
  .hero-hills,
  .ground-life,
  .bg-art,
  .root-under,
  .burrow-dirt,
  .burrow-root {
    display: none;
  }
  body,
  .band-soil,
  .site-footer,
  .meter,
  .not-live,
  .short-version,
  .flow-panel,
  .formula,
  .hero,
  .hero-ground,
  .mascot-frame,
  .coin-row .raiz,
  .cs-soil {
    background-image: none;
  }
  .soil::before,
  .soil::after,
  .soil + section::before,
  .soil + section::after,
  .coin-row .raiz::before,
  .coin-row .raiz::after,
  .cs-soil::before,
  .cs-soil::after,
  .coins-section::before,
  .coins-section::after,
  .dig-say blockquote::after,
  .root-node::after,
  .live-dot::after,
  .mascot-frame::before,
  .field-note::after,
  .how > li::after,
  a.coin-row::after,
  .not-live::after,
  .card.empty::after,
  .card.feature::before,
  .coin-pic::before,
  main#main:not(.home)::before,
  .btn.lg::after,
  .faq h2[id]::before,
  .terms h1 ~ h1::before,
  .faq blockquote::before,
  #create-done:not([hidden])::before {
    display: none;
  }
  .card,
  a.coin-row,
  .coin-row.preview,
  .coin-summary,
  .gauge,
  .quote,
  .short-version,
  .stat,
  .faq-card,
  .field-note,
  .not-live,
  .flow-panel,
  .formula,
  .how > li {
    border: 1px solid CanvasText;
  }
  .net-banner::before,
  .alert::before,
  .third-party::before,
  .hero .core::before,
  .field-note::before,
  .err:not(:empty)::before,
  details > summary::after,
  .chip[aria-pressed='true']::before,
  .chip.copy::before,
  .icon-refresh::before,
  .seg input:checked + span::before,
  .checkbox input:checked::before,
  .wallet-list .btn::after,
  .status[data-state='done']::before,
  .status[data-state='error']::before,
  .checklist li::before,
  .lock-line::before,
  .jump a::before,
  .sprout-kicker::before,
  .official [data-lang='en'] > p:nth-of-type(1)::before,
  .official #report + p::before,
  .official [data-lang='en'] > ul:last-of-type > li::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
  /* the stage drawings and the hero's clod are line art: plain text colour, no soil fill */
  .step-icon svg * {
    stroke: CanvasText;
  }
  .step-icon .i-dot {
    fill: CanvasText;
  }
  .burrow-clod,
  .burrow-spores {
    display: none;
  }
}