/* ==========================================================================
   Probant Protocol
   Shared stylesheet. Dark chrome, signal red. Oswald headings, Roboto
   Condensed copy and chrome, JetBrains Mono for data and code only.
   Fonts are self hosted so the site previews offline from file:// with no
   network at all. Nothing here loads from a third party.
   House rules: no em dashes anywhere in content. US English.
   ========================================================================== */

@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/oswald-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/oswald-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/oswald-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/oswald-latin-700-normal.woff2") format("woff2"); }

@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/roboto-condensed-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/roboto-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/roboto-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/roboto-condensed-latin-700-normal.woff2") format("woff2"); }

@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root {
  /* ground */
  --abyss:      #0B0F1A;
  --deep:       #070A12;
  --panel:      #141B2A;
  --panel-hi:   #1C2436;
  --line:       #2B3449;
  --line-soft:  #1A2130;

  /* signal */
  --red:        #C01F27;
  --red-hot:    #E8323B;
  --red-text:   #FF6B73;
  --verify:     #4ADE80;
  --warn:       #F5B942;
  --violet:     #8B7BF7;
  --cyan:       #4CC9E8;

  /* type */
  --ice:        #F5F7FA;
  --steel:      #A2ACBD;
  /* Raised from #6E798D, which measured 3.53:1 on --panel-hi and 3.92:1 on
     --panel. It is the color of form labels, captions and small print, which
     is exactly the copy a person with low vision most needs to read. This
     value clears 4.5:1 on every one of the four backgrounds above. Do not
     darken it back: contrast.mjs fails the build if you do. */
  --dim:        #808CA4;

  /* Three roles, three faces, and the split is by job rather than by taste.

     --display  Oswald. Headings only. Condensed, all caps, light weight.
     --sans     Roboto Condensed. Body copy, navigation, buttons, form labels
                and every small caps label. Narrow enough to sit under Oswald
                without arguing with it, neutral enough to read at length.
     --mono     JetBrains Mono. Only where character cells actually matter:
                contract addresses, hashes, the sublicense tree, code blocks,
                and any column of figures that has to align. Using a mono face
                for body copy was the old arrangement; using one for a wallet
                address is not decoration, it is a legibility requirement.

     If you are adding a rule and it is a label, reach for --sans. Reach for
     --mono only when a proportional face would let two characters that must
     be distinguishable render at different widths. */
  --display: "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --sans: "Roboto Condensed", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 64ch;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.25rem;
  --s5: 3.5rem; --s6: 5.5rem; --s7: 8rem; --s8: 11rem;
}

* { box-sizing: border-box; }

/* Root is 18px, not the browser default 16.
   Roboto Condensed sets about a third narrower than JetBrains Mono did, so
   every size on the page needs to come up to hold the same reading weight.
   Doing it at the root scales the rem sizes written in this file AND the ones
   written inline in the markup, including the generated language pages, which
   a stylesheet only edit could never reach. The heading sizes below are
   divided by the same 1.125 so they render at exactly the pixel sizes they
   were tuned to; only their rem numbers changed, not their output. */
html { font-size: 112.5%; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--steel);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: none; }

/* ---------- type scale ---------- */
/* Headings are Oswald, a condensed face. It carries far more size for the
   same width than the mono does, and it needs almost none of the negative
   tracking a wide face wants. Body stays JetBrains Mono. */
/* All caps Oswald at light weights.

   Three things change together and none of them is optional. Weight comes
   down, because capitals carry far more ink per line than mixed case and the
   same 700 that read as confident in sentence case reads as shouting in
   caps. Tracking goes positive, because caps have no ascender and descender
   variation to separate them and set tight they close up into a wall.
   Size comes down slightly, because a capital fills the full cap height
   where a lowercase letter uses about two thirds of it, so caps at the old
   size are optically larger even though the number is smaller.

   Line height can stay tight in exchange: there are no descenders to collide
   with the line below. */
h1,h2,h3,h4,h5 {
  color: var(--ice); margin: 0; font-family: var(--display);
  font-weight: 400; text-transform: uppercase; text-wrap: balance;
}
h1 { font-size: clamp(2.222rem, 7.1vw, 4.8rem); line-height: 1.06; letter-spacing: .008em; font-weight: 400; }
h2 { font-size: clamp(1.556rem, 4.5vw, 2.933rem); line-height: 1.1;  letter-spacing: .012em; font-weight: 400; }
h3 { font-size: clamp(1.022rem, 2.3vw, 1.333rem); line-height: 1.28; letter-spacing: .03em;  font-weight: 500; }
h4 { font-size: .907rem; line-height: 1.4;  font-weight: 500; letter-spacing: .045em; }
h5 { font-size: .782rem;  line-height: 1.4;  font-weight: 500; letter-spacing: .06em; }
p { margin: 0 0 1.05rem; }
strong, b { color: var(--ice); font-weight: 600; }
a { color: var(--red-text); text-decoration-color: rgba(255,107,115,.3); text-underline-offset: 3px; transition: color .18s; }
a:hover { color: var(--red-hot); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; border-radius: 3px; }
button, input, select, textarea { font-family: inherit; }

.lead { font-size: clamp(.98rem, 1.8vw, 1.14rem); line-height: 1.7; color: var(--steel); }
.lead b { color: var(--ice); font-weight: 500; }

.eyebrow {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--red-text);
  display: block; margin-bottom: var(--s3);
}
.eyebrow.mute { color: var(--dim); }
.eyebrow.green { color: var(--verify); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- brand mark ---------- */
.brandmark {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; color: inherit;
}
/* Monogram mark. A P whose bowl is detached from the stem, as though pressed
   into the surface rather than drawn on it. Swapping marks means swapping
   this one URI. All five marks live in assets/logos/. */
.brandmark .glyph {
  width: 32px; height: 32px; flex: none;
  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2064%2064%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%3E%20%3Crect%20x%3D%2212%22%20y%3D%228%22%20width%3D%2211%22%20height%3D%2248%22%20rx%3D%221.5%22%20fill%3D%22%23F5F7FA%22%2F%3E%20%3Cpath%20d%3D%22M28%208%20h11%20a14%2014%200%200%201%200%2028%20H28%20Z%22%20fill%3D%22%23F5F7FA%22%2F%3E%20%3Crect%20x%3D%2228%22%20y%3D%2245%22%20width%3D%2217%22%20height%3D%2211%22%20rx%3D%221.5%22%20fill%3D%22%23C01F27%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.brandmark .word {
  font-family: var(--display); font-size: 1.62rem; font-weight: 700;
  color: var(--ice); letter-spacing: .045em; line-height: 1;
}
.brandmark .sfx {
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); align-self: center;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,15,26,.78);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
/* header and footer run edge to edge; only the reading content is contained */
.nav-in {
  max-width: none; margin: 0; padding: .85rem var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.nav-links { display: flex; align-items: center; gap: 1.35rem; }
/* Nav is JetBrains Mono, not Oswald. Oswald is a condensed display face and
   the menu set in it read as a second headline competing with the real one.
   Mono is wider per character, so the size comes down and the tracking goes
   up to hold the same visual weight without pushing the row into the CTA.
   Headings stay Oswald. */
.nav-links a {
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--steel);
  text-decoration: none;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ice); }
.nav-cta {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; text-decoration: none;
  padding: .55rem .95rem; border: 1px solid var(--red);
  color: var(--ice) !important; border-radius: 2px; transition: background .18s;
}
.nav-cta:hover { background: var(--red); }
.nav-cta { padding: .68rem 1.1rem; }
/* menu toggle. Hidden on desktop, the only way to reach the nav below 900px.
   Links used to simply disappear at that width, which left the whole site
   unreachable from a phone. */
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--line);
  border-radius: 2px; padding: .55rem .6rem; cursor: pointer;
  flex-direction: column; gap: 4px; align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 17px; height: 1.5px; background: var(--steel);
  transition: transform .22s, opacity .22s;
}
.nav-toggle:hover span { background: var(--ice); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-in { flex-wrap: wrap; }
  .nav-links {
    display: none; order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--line-soft);
    margin-top: .85rem; padding-top: .5rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a, .nav-links button {
    padding: .85rem .2rem; font-size: .84rem;
    border-bottom: 1px solid var(--line-soft); text-align: left;
  }
  .nav-links .nav-cta {
    border: 1px solid var(--red); text-align: center;
    margin-top: .85rem; padding: .85rem; border-bottom: 1px solid var(--red);
  }
  .nav-links [data-wallet-btn] { width: 100%; justify-content: flex-start; border: 0; padding-left: .2rem; }
}

/* between 900 and 1140 the full set plus wallet plus CTA gets tight */
@media (min-width: 901px) and (max-width: 1240px) {
  .nav-links { gap: .95rem; }
  .nav-links a { font-size: .76rem; letter-spacing: .09em; }
  .brandmark .word { font-size: 1.38rem; }
  .langsel .lcode { display: none; }
}

#rail {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--red), var(--red-hot), var(--warn));
  z-index: 100;
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
/* the chain sits above the wash so the blue reads as its own layer */
.hero canvas#field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .9; pointer-events: none; z-index: 1;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 640px at 18% -10%, rgba(0,82,255,.30), transparent 60%),
    radial-gradient(820px 480px at 88% 4%, rgba(192,31,39,.20), transparent 56%),
    radial-gradient(700px 460px at 60% 100%, rgba(0,82,255,.10), transparent 60%);
}
/* vignette over the chain so headline type never fights the blocks.
   Kept light: the copy sits at z-index 3, above this, so it stays full
   strength while the blocks behind it recede. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(760px 460px at 20% 46%, rgba(11,15,26,.72), transparent 70%),
    linear-gradient(180deg, rgba(11,15,26,.30) 0%, transparent 26%, var(--abyss) 100%);
}
.hero-in { position: relative; z-index: 3; max-width: 1240px; margin: 0 auto; padding: var(--s8) var(--gut) var(--s7); }
.hero h1 .hot {
  /* inline-block plus a hair of bottom padding keeps background-clip:text from
     shearing the descender off a p or g at this line height */
  display: inline-block;
  padding-bottom: .06em;
  margin-bottom: -.06em;
  background: linear-gradient(150deg, var(--red-hot) 10%, var(--red) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.tagstrip {
  display: flex; flex-wrap: wrap; gap: .55rem; margin-top: var(--s4);
}
.tagstrip span {
  font-family: var(--sans); font-size: 0.64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--steel);
  padding: .4rem .75rem; border: 1px solid var(--line);
  border-radius: 2px; background: rgba(20,27,42,.6);
  display: inline-flex; align-items: center; gap: .45rem;
}
.tagstrip span i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--verify); flex: none;
}
.tagstrip span.v i { background: var(--violet); }
.tagstrip span.c i { background: var(--cyan); }
.tagstrip span.w i { background: var(--warn); }

.btnrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  padding: .95rem 1.6rem; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; transition: background .18s, border-color .18s, transform .1s;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hot); color: #fff; }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { border-color: var(--line); color: var(--ice); background: transparent; }
.btn-ghost:hover { border-color: var(--steel); color: var(--ice); }

/* ---------- sections ---------- */
section { padding: var(--s7) 0; }
section.tight { padding: var(--s6) 0; }
/* the last section before the footer does not need a full stride of air
   under it, the footer's own top padding already supplies the break */
section:has(+ footer.site) { padding-bottom: var(--s5); }
.band { background: var(--deep); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.band-glow {
  background:
    radial-gradient(900px 460px at 80% 0%, rgba(192,31,39,.13), transparent 60%),
    var(--deep);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}

/* Section head. Single column by design: the red bordered side notes that
   used to sit beside it were removed site wide, and leaving the grid at two
   columns would just orphan the heading in the left half. */
/* headings span the full canvas. No max-width: constraining them left a
   wrapped three line heading against an empty right half. */
.shead { margin-bottom: var(--s5); }
.shead h2 { margin: 0; }
.shead > div > .eyebrow { margin-bottom: var(--s2); }
.leadwrap { margin-top: var(--s4); }
.leadwrap p:last-child { margin-bottom: 0; }

/* Copy rolls out horizontally.

   Do NOT reintroduce clip-path here. A clipped element reports zero
   intersection area to IntersectionObserver, so the observer never
   fires, .in is never added, and the element never un-clips. That
   deadlock blanks every page below the hero. Opacity and translateX
   give the same horizontal arrival with no such coupling. */
.reveal {
  opacity: 0;
  transform: translateX(-26px);
  transition:
    opacity .55s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal:not(.in) { pointer-events: none; }
.reveal.in { opacity: 1; transform: none; pointer-events: auto; }

/* stagger only real card grids, so a row unrolls rather than snapping.
   Scoped deliberately: applied to every reveal child it put animations
   on form controls, which made them unclickable while settling. */
.reveal.in.g2 > *, .reveal.in.g3 > *, .reveal.in.g4 > *,
.reveal.in .layers > *, .reveal.in .dura > *, .reveal.in .money > * {
  animation: rollin .7s cubic-bezier(.16,1,.3,1) both;
}
.reveal.in.g2 > *:nth-child(2), .reveal.in.g3 > *:nth-child(2), .reveal.in.g4 > *:nth-child(2),
.reveal.in .layers > *:nth-child(2), .reveal.in .dura > *:nth-child(2) { animation-delay: .07s; }
.reveal.in.g3 > *:nth-child(3), .reveal.in.g4 > *:nth-child(3),
.reveal.in .layers > *:nth-child(3), .reveal.in .dura > *:nth-child(3) { animation-delay: .14s; }
.reveal.in.g4 > *:nth-child(4), .reveal.in .dura > *:nth-child(4) { animation-delay: .21s; }
.reveal.in .dura > *:nth-child(5) { animation-delay: .28s; }
.reveal.in .dura > *:nth-child(6) { animation-delay: .35s; }
@keyframes rollin {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

/* character level decode used on headings and eyebrows.
   display:inline is load bearing. inline-block makes every character its
   own box, which lets the browser break lines between any two letters and
   shatters words mid-word. */
.dc { display: inline; }
.dc.pending { opacity: .18; }
.dc.armed { color: var(--red-hot); opacity: 1; }

/* ---------- grids ---------- */
.g2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s3); }
.g3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s3); }
.g4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--s2); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ---------- cards ---------- */
.card {
  position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: 3px;
  padding: var(--s4) var(--s3);
  display: flex; flex-direction: column; gap: .7rem;
  transition: border-color .25s, background .25s, transform .25s;
}
.card:hover { border-color: var(--steel); transform: translateY(-3px); }
.card .num {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red-text);
}
.card p { font-size: .94rem; margin: 0; }
.card ul { margin: 0; padding-left: 1.05rem; font-size: .9rem; }
.card li { margin-bottom: .3rem; }
.card li::marker { color: var(--dim); }
.card .foot {
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ice);
}
.card.accent-red { border-top: 2px solid var(--red); }
.card.accent-green { border-top: 2px solid var(--verify); }
.card.accent-violet { border-top: 2px solid var(--violet); }
.card.accent-cyan { border-top: 2px solid var(--cyan); }
.card.accent-warn { border-top: 2px solid var(--warn); }

/* big figure tiles */
.figtile { background: var(--deep); border: 1px solid var(--line); padding: var(--s4) var(--s3); border-radius: 3px; }
.figtile .fig {
  font-family: var(--mono); font-weight: 700; line-height: .9;
  font-size: clamp(2.2rem, 5.2vw, 3.4rem); letter-spacing: -.04em;
  color: var(--ice); font-variant-numeric: tabular-nums;
}
.figtile .fig em { font-style: normal; color: var(--red-text); }
.figtile .fig.green { color: var(--verify); }
.figtile .cap {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-top: var(--s2);
}
.figtile p { font-size: .88rem; margin: .55rem 0 0; line-height: 1.5; }

/* ---------- tables ---------- */
.tscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; }
table { border-collapse: collapse; width: 100%; min-width: 660px; font-size: .92rem; }
th, td { text-align: left; padding: .85rem var(--s3); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--dim); font-weight: 500; background: var(--deep); white-space: nowrap;
}
td strong { color: var(--ice); }
td.n { font-family: var(--mono); color: var(--ice); font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(28,36,54,.5); }
tfoot td { background: var(--deep); font-weight: 600; color: var(--ice); border-top: 1px solid var(--line); }

/* ---------- allocation bar ---------- */
.allocbar { display: flex; height: 46px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.allocbar div { position: relative; transition: filter .2s; }
.allocbar div:hover { filter: brightness(1.35); }
.alloclegend { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: .7rem var(--s3); margin-top: var(--s3); }
.alloclegend .li { display: flex; align-items: baseline; gap: .6rem; font-size: .88rem; }
.alloclegend .sw { width: 10px; height: 10px; border-radius: 2px; flex: none; transform: translateY(1px); }
.alloclegend .lb { color: var(--steel); flex: 1; }
.alloclegend .pc { font-family: var(--mono); color: var(--ice); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- forms ---------- */
.formcard { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: var(--s4); }
.fld { margin-bottom: var(--s3); }
.fld label {
  display: block; font-family: var(--sans); font-size: 0.62rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-bottom: .5rem;
}
.fld input, .fld select, .fld textarea {
  width: 100%; background: var(--deep); border: 1px solid var(--line); color: var(--ice);
  padding: .78rem .9rem; font-size: .95rem; border-radius: 2px; transition: border-color .18s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--red); outline: none; }
.fld textarea { min-height: 110px; resize: vertical; }
.fldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 640px) { .fldrow { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ---------- sliders ---------- */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 3px; background: var(--line); border-radius: 2px; outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--red-hot); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--red-hot); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; border: 3px solid var(--panel);
  background: var(--red-hot); box-shadow: 0 0 0 1px var(--red-hot); cursor: pointer;
}
.ctrl { margin-bottom: var(--s4); }
.ctrl:last-child { margin-bottom: 0; }
.ctrl-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: .65rem; }
.ctrl-top .lab { font-family: var(--sans); font-size: 0.62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ctrl-top .out { font-family: var(--mono); font-size: .95rem; font-weight: 700; color: var(--ice); font-variant-numeric: tabular-nums; }

/* ---------- prose (whitepaper) ---------- */
/* Copy spans the full canvas. Nothing here gets a max-width: a narrow
   column against an empty right half is the one thing this design must
   not do. Type is opened up so the wider measure still reads. */
.prose { max-width: none; font-size: .96rem; line-height: 1.85; }
.prose h2 { font-size: clamp(1.5rem,3vw,2.1rem); margin: var(--s6) 0 var(--s3); }
.prose h3 { margin: var(--s4) 0 var(--s2); }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.05rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--dim); }
.prose code {
  font-family: var(--mono); font-size: .86em; background: var(--panel);
  border: 1px solid var(--line-soft); padding: .12em .38em; border-radius: 2px; color: var(--ice);
}
.prose pre {
  background: var(--deep); border: 1px solid var(--line); border-radius: 3px;
  padding: var(--s3); overflow-x: auto; font-family: var(--mono); font-size: .82rem;
  line-height: 1.65; color: var(--steel);
}
.prose pre code { background: none; border: 0; padding: 0; }
.prose blockquote {
  margin: var(--s3) 0; padding: var(--s3); border-left: 3px solid var(--red);
  background: var(--panel); font-size: .97rem;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.toc {
  position: sticky; top: 5.5rem; align-self: start;
  border-left: 1px solid var(--line-soft); padding-left: var(--s3);
}
.toc a {
  display: block; font-size: .84rem; color: var(--dim);
  text-decoration: none; padding: .3rem 0; line-height: 1.35;
}
.toc a:hover, .toc a.active { color: var(--ice); }
.paper { display: grid; grid-template-columns: minmax(0,1fr) 15rem; gap: var(--s5); align-items: start; }
@media (max-width: 1000px) { .paper { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }

/* ---------- callouts ---------- */
.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--red);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  padding: var(--s3) var(--s4); border-radius: 3px;
}
.callout.good { border-left-color: var(--verify); }
.callout.warn { border-left-color: var(--warn); }
.callout p:last-child { margin-bottom: 0; }
.callout .tag {
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red-text); display: block; margin-bottom: .5rem;
}
.callout.good .tag { color: var(--verify); }
.callout.warn .tag { color: var(--warn); }

/* ---------- footer ---------- */
footer.site {
  background: var(--deep); border-top: 1px solid var(--line-soft);
  padding: var(--s5) 0 var(--s3);
}
footer.site > .wrap { max-width: none; }
/* Five equal columns. The first held a description paragraph and was given
   1.5fr to carry it; with the paragraph gone that extra width was just a gap
   between the wordmark and the first link column. */
.foot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4); align-items: start; }
.foot-grid .brandmark { margin-bottom: 0; }
@media (max-width: 1080px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h5 {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-bottom: var(--s2); font-weight: 500;
}
.foot-grid a { display: block; font-size: .89rem; color: var(--steel); text-decoration: none; padding: .22rem 0; }
/* The line above outranks .brandmark { display: inline-flex } on specificity,
   one class plus one type beating one class. That flattened the mark into a
   plain inline element, and an inline box ignores width and height, so the
   monogram collapsed to zero width in every footer on the site. The wordmark
   still rendered beside it, which is why it read as a design choice rather
   than a broken asset. Restore the flex box explicitly. */
.foot-grid .brandmark { display: inline-flex; padding: 0; }

/* Footer shows the monogram alone, at scale. The wordmark is hidden visually
   but kept in the accessibility tree rather than display:none'd, because it is
   the only text inside this link and removing it would leave a link with no
   accessible name for a screen reader. */
.foot-grid .brandmark .word {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.foot-grid .brandmark .glyph { width: 60px; height: 60px; }
@media (max-width: 860px) { .foot-grid .brandmark .glyph { width: 46px; height: 46px; } }
.foot-grid a:hover { color: var(--ice); }
.foot-grid p { font-size: .88rem; }
/* Country line carries the flag. Sized down from the switcher's 21x14 because
   it sits beside .64rem uppercase text rather than a menu row, and a flag that
   out-measures its own label reads as an icon with a caption. */
.foot-base .fb-loc { display: inline-flex; align-items: center; gap: .5rem; }
.foot-base .fb-loc .flag { width: 17px; height: 11px; }

.foot-base {
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between;
  font-family: var(--sans); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
/* fine print runs the full width as one column. Two columns broke sentences
   across the gutter, which reads worse than the dead space it was fixing. */
.legal {
  font-size: .76rem; color: var(--dim); line-height: 1.65;
  margin: var(--s4) 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  /* Centered, and deliberately WITHOUT a max-width. Constraining the measure
     would read better as typography, but it would put a ~500px column in the
     middle of a 1240px footer, which is the narrow column treatment this
     design rejects everywhere else. Centered full width is the right call for
     three lines of boilerplate: the short final line signals fine print, and
     nobody reads a disclaimer linearly anyway. */
  text-align: center;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal.in > * { opacity: 1; transform: none; pointer-events: auto; }
  .dc, .dc.pending, .dc.armed { opacity: 1; color: inherit; }
}

/* ==========================================================================
   Tabs. Used for whitepaper navigation and any long segmented document.
   Deep linkable: the hash selects the panel on load.
   ========================================================================== */
.tabs { margin: 0; }
.tabbar {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 3.4rem; z-index: 40;
  background: rgba(11,15,26,.92); backdrop-filter: blur(14px);
  padding-top: .35rem;
}
.tabbar::-webkit-scrollbar { height: 3px; }
.tabbar::-webkit-scrollbar-thumb { background: var(--line); }
.tabbar button {
  flex: none; background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
  padding: .85rem 1.1rem; border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s, background .18s; white-space: nowrap;
}
.tabbar button:hover { color: var(--steel); background: rgba(28,35,51,.5); }
.tabbar button[aria-selected="true"] { color: var(--ice); border-bottom-color: var(--red); }
.tabbar button .tnum { color: var(--red-text); margin-right: .45rem; }
.tabbar button[aria-selected="true"] .tnum { color: var(--red-hot); }
.tabpanel { padding-top: var(--s5); }
.tabpanel[hidden] { display: none; }
.tabfoot {
  display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line-soft);
}
.tabfoot button {
  background: transparent; border: 1px solid var(--line); color: var(--steel);
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .7rem 1.1rem; border-radius: 2px; cursor: pointer; transition: all .18s;
}
.tabfoot button:hover:not([disabled]) { border-color: var(--steel); color: var(--ice); }
.tabfoot button[disabled] { opacity: .3; cursor: default; }

/* ==========================================================================
   Comparison matrix
   ========================================================================== */
.matrix td.yes { color: var(--verify); font-weight: 600; }
.matrix td.no  { color: var(--dim); }
.matrix td.part { color: var(--warn); }
.matrix th:first-child, .matrix td:first-child { position: sticky; left: 0; background: var(--abyss); }
.matrix thead th:first-child { background: var(--deep); }
.matrix .us { background: rgba(192,31,39,.10); }
.matrix thead th.us { background: rgba(192,31,39,.18); color: var(--ice); }

/* claim block: a big assertion with its evidence underneath */
.claim {
  border: 1px solid var(--line); border-left: 3px solid var(--red);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border-radius: 3px; padding: var(--s4);
}
.claim h3 { margin-bottom: var(--s2); }
.claim .ev {
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-soft);
  font-size: .89rem; color: var(--dim);
}
.claim .ev b { color: var(--steel); font-weight: 500; }
.claim.green { border-left-color: var(--verify); }

/* ==========================================================================
   Wallet connection
   ========================================================================== */
[data-wallet-btn] {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: .13em;
  text-transform: uppercase; cursor: pointer;
  padding: .55rem .95rem; border: 1px solid var(--line);
  background: transparent; color: var(--steel); border-radius: 2px;
  transition: border-color .18s, color .18s, background .18s;
}
[data-wallet-btn]:hover { border-color: var(--steel); color: var(--ice); }
[data-wallet-btn][data-connected="true"] { border-color: var(--line); color: var(--ice); background: var(--panel); }
.wdot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.wdot.ok { background: var(--verify); box-shadow: 0 0 0 3px rgba(74,222,128,.16); }
.wdot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,185,66,.16); }

.wmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--s3); }
.wbackdrop { position: absolute; inset: 0; background: rgba(7,10,18,.82); backdrop-filter: blur(6px); }
.wsheet {
  position: relative; width: min(420px, 100%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); overflow: hidden;
}
.whead {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3); border-bottom: 1px solid var(--line-soft); background: var(--deep);
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--steel);
}
.wclose {
  background: transparent; border: 0; color: var(--dim); font-size: 1.35rem;
  line-height: 1; cursor: pointer; padding: 0 .25rem;
}
.wclose:hover { color: var(--ice); }
.wbody { padding: var(--s2); display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; }
.wrow {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  padding: .8rem .9rem; cursor: pointer; text-align: left;
  transition: background .16s, border-color .16s;
}
.wrow:hover { background: var(--panel-hi); border-color: var(--line); }
.wrow img { border-radius: 5px; flex: none; }
.wph {
  width: 26px; height: 26px; flex: none; border-radius: 5px; background: var(--line);
  display: grid; place-items: center; color: var(--ice); font-weight: 700; font-size: .82rem;
}
.wname { flex: 1; color: var(--ice); font-size: .95rem; font-weight: 500; }
.wgo {
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
.wrow:hover .wgo { color: var(--red-text); }
.wempty { padding: var(--s3); font-size: .89rem; }
.wempty p { margin-bottom: .6rem; }
.wempty p:last-child { margin-bottom: 0; color: var(--dim); }
.wfoot {
  padding: var(--s3); border-top: 1px solid var(--line-soft); background: var(--deep);
  font-size: .76rem; color: var(--dim); line-height: 1.6;
}

[data-wallet-network].ok { color: var(--verify); }
[data-wallet-network].warn { color: var(--warn); }
[data-wallet-status] {
  font-size: .84rem; color: var(--warn); margin-top: var(--s2);
  border-left: 2px solid var(--warn); padding-left: .7rem;
}
.wallet-card { border: 1px solid var(--line); background: var(--panel); border-radius: 3px; padding: var(--s3); }
.wallet-row {
  display: flex; justify-content: space-between; gap: var(--s2);
  padding: .5rem 0; border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .8rem;
}
.wallet-row:last-of-type { border-bottom: 0; }
.wallet-row .k { color: var(--dim); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; align-self: center; }
.wallet-row .v { color: var(--ice); }


/* diagnostics disclosure */
details summary::-webkit-details-marker { color: var(--dim); }
details summary:hover { color: var(--steel); }

/* ==========================================================================
   Scam warning bar. Sits above the nav on every page, not dismissible.
   Impersonation tokens launched under a project's name before the real one
   exists are among the most common attacks in this category.
   ========================================================================== */
.alertbar {
  position: relative; z-index: 70;
  background: linear-gradient(90deg, rgba(192,31,39,.22), rgba(245,185,66,.14));
  border-bottom: 1px solid rgba(245,185,66,.28);
}
.alertbar-in {
  max-width: none; margin: 0; padding: .55rem var(--gut);
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; flex-wrap: wrap; text-align: center;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ice);
}
.alertbar-in i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none;
  box-shadow: 0 0 0 3px rgba(245,185,66,.16);
}
.alertbar-in b { color: var(--warn); font-weight: 700; }
.alertbar-in a { color: var(--ice); text-decoration-color: rgba(245,247,250,.4); }
.alertbar-in a:hover { color: var(--warn); }
@media (max-width: 720px) { .alertbar-in { font-size: .6rem; letter-spacing: .07em; } }

/* red flag list */
.flags { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.flagrow {
  background: var(--abyss); padding: var(--s3);
  display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--s3); align-items: start;
}
.flagrow .x { color: var(--red-hot); font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
.flagrow .y { color: var(--verify); font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
.flagrow h4 { margin-bottom: .3rem; }
.flagrow p { font-size: .9rem; margin: 0; }


/* ==========================================================================
   X link and language switcher
   ========================================================================== */
.xlink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; color: var(--dim);
  border: 1px solid var(--line); border-radius: 2px; transition: all .18s;
}
.xlink svg { width: 15px; height: 15px; }
.xlink:hover { color: var(--ice); border-color: var(--steel); }

.langsel { position: relative; flex: none; }
.langbtn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  padding: .5rem .7rem; cursor: pointer; color: var(--steel);
  font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; transition: all .18s;
}
.langbtn:hover { border-color: var(--steel); color: var(--ice); }
.langbtn .caret { width: 9px; height: 6px; opacity: .7; }
.langbtn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.flag {
  width: 21px; height: 14px; flex: none; display: block;
  border-radius: 1.5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(245,247,250,.14);
}
.flag svg { width: 100%; height: 100%; display: block; }

.langmenu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 80;
  min-width: 200px; margin: 0; padding: .35rem; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.9);
}
.langmenu[hidden] { display: none; }
.langmenu li { margin: 0; }
/* Options are anchors, not buttons. A real href means the switcher works with
   JavaScript off, is crawlable, and opens in a new tab on middle click. The
   button element it replaced could do none of those. */
.langmenu a {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  background: transparent; border: 0; border-radius: 2px; cursor: pointer;
  padding: .6rem .6rem; text-align: left; color: var(--steel); text-decoration: none;
  font-family: var(--sans); font-size: 0.84rem; font-weight: 500; transition: background .16s, color .16s;
}
.langmenu a:hover { background: var(--panel-hi); color: var(--ice); }
.langmenu a[aria-current="true"] { color: var(--ice); background: var(--panel-hi); }
.langmenu a[aria-current="true"] .lcheck { opacity: 1; }
.langmenu .lname { flex: 1; }
.langmenu .lcheck { width: 12px; height: 12px; opacity: 0; color: var(--verify); flex: none; }
.langmenu .lcheck svg { width: 100%; height: 100%; display: block; }

/* No script fallback. site.js puts .js on the root element before it does
   anything else, so these rules are live only when scripting is off. Without
   them the menu carries the hidden attribute forever and the seven translated
   pages are unreachable from the nav. */
html:not(.js) .langsel:hover .langmenu[hidden],
html:not(.js) .langsel:focus-within .langmenu[hidden] { display: block; }
html:not(.js) .nav-toggle { display: none !important; }

/* Translation notice. Only the overview is translated, and saying so up front
   is cheaper than a reader discovering it on the third click. */
.notebar {
  border-bottom: 1px solid var(--line-soft); background: var(--deep);
  font-size: .82rem; color: var(--dim); line-height: 1.6;
}
.notebar-in { padding: .7rem var(--gut); display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.notebar b { color: var(--ice); font-weight: 600; }
.notebar a { color: var(--verify); text-decoration: none; border-bottom: 1px solid rgba(63,174,94,.4); }
.notebar a:hover { border-bottom-color: var(--verify); }

@media (max-width: 900px) {
  .nav-links .xlink, .nav-links .langsel { align-self: flex-start; margin-top: .85rem; }
  .nav-links .langsel { width: 100%; }
  .nav-links .langbtn { width: 100%; justify-content: flex-start; }
  .langmenu { right: auto; left: 0; width: 100%; }
}


/* ==========================================================================
   Sublicense tree. It sizes to its content instead of stretching to match a
   taller sibling column, and the rows shrink rather than getting clipped.
   ========================================================================== */
/* min-width: 0 is load bearing on every one of these.

   A grid item's automatic minimum size is its min-content width. The tree
   rows are white-space: nowrap, so the treebox reports a min-content of
   roughly 460px, the track grows to match, and at 390px wide the whole page
   scrolls sideways. The overflow-x: auto on .treescroll cannot help while an
   ancestor refuses to shrink below its content. Setting min-width: 0 on the
   grid children lets the track shrink and hands the overflow to the one
   element that is set up to scroll it.

   The rule is applied to every grid container rather than only the tree,
   because any future nowrap or long-token child would reintroduce exactly
   this bug somewhere else on the site. */
.g2 > *, .g3 > *, .g4 > * { min-width: 0; }

.treebox {
  background: var(--deep); border: 1px solid var(--line); border-radius: 3px;
  padding: var(--s4) var(--s3); align-self: start; min-width: 0;
}
.treebox .treescroll { overflow-x: auto; min-width: 0; }
.treebox .mono {
  /* Raised from a .8rem ceiling now that the box owns the full row. The
     longest line is about 70 characters of JetBrains Mono, which at .95rem
     measures roughly 720px inside a 1240px container, so nothing clips at
     desktop and the scroll container only earns its keep on small screens. */
  font-size: clamp(.62rem, 1.05vw, .95rem);
  line-height: 2.15; white-space: nowrap;
}
.treebox .treescroll::-webkit-scrollbar { height: 6px; }
.treebox .treescroll::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 3px; }
.treebox .treescroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.treebox .treescroll::-webkit-scrollbar-thumb:hover { background: var(--dim); }
@media (max-width: 980px) { .treebox .mono { font-size: .6rem; } }


/* ==========================================================================
   CJK language pages. Oswald and JetBrains Mono ship latin subsets only, so
   Japanese, Korean and Chinese glyphs fall through to a system face. Naming
   Oswald first keeps the wordmark, tickers and numerals in the brand face and
   lets only the CJK glyphs fall through, which is the behavior we want.
   ========================================================================== */
html[lang="ja"], html[lang="ko"], html[lang="zh-Hans"] {
  --display: "Oswald", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
             "Noto Sans KR", "Noto Sans SC", "Yu Gothic", "Malgun Gothic",
             "Microsoft YaHei", sans-serif;
  --sans: "Roboto Condensed", "Hiragino Sans", "Noto Sans JP", "Noto Sans KR",
          "Noto Sans SC", "Yu Gothic", "Malgun Gothic", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", "Hiragino Sans", "Noto Sans JP", "Noto Sans KR",
          "Noto Sans SC", "Yu Gothic", "Malgun Gothic", "Microsoft YaHei", monospace;
}
/* The Latin type scale is wrong for CJK and has to come down, not just get
   more leading. Oswald is a condensed face, so a Latin headline at 6.4rem
   occupies maybe half the width its character count suggests. CJK glyphs are
   full width squares in whatever face renders them, so the same 6.4rem runs
   roughly twice as wide, wraps four times, and walks out of the hero. These
   sizes are tuned so a translated headline holds the same number of lines as
   the English one. */
html[lang="ja"] h1, html[lang="ko"] h1, html[lang="zh-Hans"] h1 {
  font-size: clamp(1.6rem, 4.2vw, 2.844rem); line-height: 1.36; letter-spacing: .005em;
}
html[lang="ja"] h2, html[lang="ko"] h2, html[lang="zh-Hans"] h2 {
  font-size: clamp(1.244rem, 2.9vw, 1.956rem); line-height: 1.42; letter-spacing: .005em;
}
html[lang="ja"] h3, html[lang="ko"] h3, html[lang="zh-Hans"] h3 {
  font-size: clamp(.978rem, 1.9vw, 1.2rem); line-height: 1.5;
}
html[lang="ja"] h4, html[lang="ko"] h4, html[lang="zh-Hans"] h4 { font-size: .907rem; line-height: 1.55; }
html[lang="ja"] body, html[lang="ko"] body, html[lang="zh-Hans"] body { line-height: 1.9; }
/* .22em of tracking on Latin small caps reads as precision. On CJK it reads
   as a rendering fault, because the glyphs are already full width. */
html[lang="ja"] .eyebrow, html[lang="ko"] .eyebrow, html[lang="zh-Hans"] .eyebrow { letter-spacing: .08em; }
html[lang="ja"] .nav-links a, html[lang="ko"] .nav-links a, html[lang="zh-Hans"] .nav-links a,
html[lang="ja"] .nav-cta, html[lang="ko"] .nav-cta, html[lang="zh-Hans"] .nav-cta {
  letter-spacing: .02em; text-transform: none;
}
html[lang="ja"] .foot-grid h5, html[lang="ko"] .foot-grid h5, html[lang="zh-Hans"] .foot-grid h5,
html[lang="ja"] .callout .tag, html[lang="ko"] .callout .tag, html[lang="zh-Hans"] .callout .tag,
html[lang="ja"] .card .num, html[lang="ko"] .card .num, html[lang="zh-Hans"] .card .num {
  letter-spacing: .06em;
}


/* ==========================================================================
   Answer blocks.

   These exist to be quoted. Language models answering a question about onchain
   brand rights lift a self contained paragraph, not a page. So every answer
   here opens with a complete declarative sentence that survives being pulled
   out of context, names the entity rather than saying "we" or "it", and stops
   before it needs the sentence after it. The visible copy and the FAQPage
   JSON-LD on each page are the same text on purpose. If they drift, the page
   is claiming one thing to a reader and another to a crawler.
   ========================================================================== */
.qa { border-top: 1px solid var(--line-soft); }
.qa-item { border-bottom: 1px solid var(--line-soft); padding: var(--s4) 0; }
.qa-item h3 {
  font-size: clamp(.933rem, 2vw, 1.2rem); font-weight: 500;
  line-height: 1.36; letter-spacing: .03em; margin-bottom: var(--s2); color: var(--ice);
}
.qa-item h3 .qmark {
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red-text); display: block; margin-bottom: .5rem;
}
.qa-item p { font-size: .98rem; line-height: 1.8; margin: 0 0 .9rem; color: var(--steel); }
.qa-item p:last-child { margin-bottom: 0; }
.qa-item p strong, .qa-item p b { color: var(--ice); font-weight: 600; }
.qa-item .lede { color: var(--ice); }

/* Fact table. Short, literal, unhedged rows. The same reason as above: a
   crawler can lift one row and be correct, which a paragraph rarely allows. */
.facts { border: 1px solid var(--line); border-radius: 3px; background: var(--panel); overflow: hidden; }
.facts dl { margin: 0; display: grid; grid-template-columns: minmax(11rem, 22%) 1fr; }
.facts dt, .facts dd {
  margin: 0; padding: .8rem var(--s3); border-top: 1px solid var(--line-soft);
  font-size: .88rem; line-height: 1.65;
}
.facts dt {
  font-family: var(--sans); font-size: 0.64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); background: var(--deep); display: flex; align-items: center;
}
.facts dd { color: var(--steel); }
.facts dd b { color: var(--ice); font-weight: 600; }
.facts dt:first-of-type, .facts dl > dt:first-child + dd { border-top: 0; }
@media (max-width: 700px) {
  .facts dl { grid-template-columns: 1fr; }
  .facts dd { padding-top: .2rem; border-top: 0; }
  .facts dt { border-top: 1px solid var(--line-soft); }
}

/* =============================================================
   THE APP: anchor, verify, record
   -------------------------------------------------------------
   Built from the tokens already above rather than a new palette.
   The one new idea here is the verdict list, which has to make a
   pass and a failure distinguishable at a glance and without
   relying on color alone, because that is the whole output of
   the verify page.
   ============================================================= */

.app-status { background: var(--panel); border-bottom: 1px solid var(--line-soft); font-size: .86rem; color: var(--steel); }
.app-status .wrap { padding-top: .8rem; padding-bottom: .8rem; }
.app-status b { color: var(--ice); font-weight: 600; }
.app-status a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(76,201,232,.35); }
.app-status.warn { background: rgba(245,185,66,.08); border-bottom-color: rgba(245,185,66,.35); }
.app-status.warn b { color: var(--warn); }

/* ---------- step rail ---------- */
.steps { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0 0 var(--s4); }
.steps li {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--dim);
}
.steps li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid var(--line); font-size: .68rem;
}
.steps li.on { color: var(--ice); }
.steps li.on span { border-color: var(--red); color: var(--ice); }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: var(--s4); }
.panel + .panel { margin-top: var(--s3); }
.panel h2 { margin-top: 0; }
.panel > p { color: var(--steel); }

/* ---------- drop zone ---------- */
.drop {
  border: 1px dashed var(--line); border-radius: 3px; background: var(--deep);
  padding: var(--s5) var(--s3); text-align: center; cursor: pointer;
  transition: border-color .18s, background .18s; margin: var(--s3) 0;
}
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--red); background: var(--panel-hi); outline: none; }
.drop.small { padding: var(--s4) var(--s2); }
.drop strong { display: block; font-family: var(--sans); color: var(--ice); font-size: 1rem; margin-bottom: .4rem; }
.drop .mono, .drop span { display: block; font-size: .78rem; color: var(--dim); }
.drop .bar { height: 3px; background: var(--line); border-radius: 2px; margin-top: .9rem; overflow: hidden; }
.drop .bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .12s linear; }

/* ---------- key/value readouts ---------- */
.kv { border-top: 1px solid var(--line-soft); margin: var(--s3) 0 0; }
.kv > div {
  display: flex; gap: var(--s2); justify-content: space-between; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.kv .k {
  font-family: var(--sans); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--dim); flex: none;
}
.kv .v { color: var(--ice); font-size: .92rem; text-align: right; }
/* A digest has no spaces in it, so without this it forces the page wider than
   the phone. Same failure the sublicense tree had. */
.wrap-any { overflow-wrap: anywhere; word-break: break-all; }

/* ---------- forms ---------- */
.form label { display: block; margin-bottom: var(--s2); }
.form label > span {
  display: block; font-family: var(--sans); font-size: .62rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-bottom: .5rem;
}
.form input, .form select {
  width: 100%; background: var(--deep); border: 1px solid var(--line); color: var(--ice);
  padding: .78rem .9rem; font-size: .95rem; border-radius: 2px; transition: border-color .18s;
}
.form input:focus, .form select:focus { border-color: var(--red); outline: none; }

/* ---------- code, notes, errors ---------- */
.codebox {
  background: var(--deep); border: 1px solid var(--line); border-radius: 2px;
  padding: var(--s3); overflow-x: auto; font-family: var(--mono);
  font-size: .74rem; line-height: 1.75; color: var(--steel);
  white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--s3) 0;
}
.note { font-size: .86rem; color: var(--dim); margin: var(--s2) 0 0; }
.note.ok { color: var(--verify); }
.err {
  margin: var(--s3) 0 0; padding: .8rem 1rem; font-size: .9rem;
  background: rgba(192,31,39,.10); border-left: 2px solid var(--red); color: var(--red-text);
}
.row-btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--red); }
.btn-ghost:disabled:hover { background: transparent; }

/* ---------- keep the claim file ---------- */
.keepit {
  margin-top: var(--s4); padding: var(--s3);
  background: rgba(245,185,66,.07); border-left: 2px solid var(--warn);
}
.keepit h3 { margin: 0 0 .5rem; color: var(--warn); }
.keepit p { margin: 0 0 var(--s3); font-size: .92rem; color: var(--steel); }

/* ---------- results and verdicts ---------- */
.result, .verdict { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.verdict.good h3 { color: var(--verify); }
.verdict.bad h3 { color: var(--red-text); }
.checks { list-style: none; padding: 0; margin: var(--s3) 0 0; }
.checks li {
  padding: .75rem 0 .75rem 2rem; border-bottom: 1px solid var(--line-soft); position: relative;
}
.checks li b { display: block; color: var(--ice); font-weight: 600; font-size: .95rem; }
.checks li span { display: block; font-size: .84rem; color: var(--dim); margin-top: .2rem; }
/* Shape as well as color. A red dot and a green dot are the same dot to about
   one man in twelve, and this list is the entire answer the page gives. */
.checks li::before {
  position: absolute; left: 0; top: .8rem; font-family: var(--mono);
  font-size: .95rem; line-height: 1;
}
.checks li.yes::before { content: "\2713"; color: var(--verify); }
.checks li.no::before { content: "\2717"; color: var(--red-text); }

/* ---------- record lookup ---------- */
.lookup { display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap; }
.lookup .grow { flex: 1 1 22rem; }
.lookup label > span {
  display: block; font-family: var(--sans); font-size: .62rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-bottom: .5rem;
}
.lookup input {
  width: 100%; background: var(--deep); border: 1px solid var(--line); color: var(--ice);
  padding: .78rem .9rem; font-size: .92rem; border-radius: 2px; font-family: var(--mono);
}
.lookup input:focus { border-color: var(--red); outline: none; }

@media (max-width: 720px) {
  .steps li { font-size: .6rem; }
  .kv > div { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .kv .v { text-align: left; }
}

/* The tool pages carry a status bar between the hero and the work, so the
   standard marketing stride underneath it reads as a gap rather than as air.
   A page whose whole purpose is a form should start the form near the top. */
.app-status + section { padding-top: var(--s4); padding-bottom: var(--s5); }
.app-band h2 { margin-bottom: var(--s4); }