/* Layout concept: a central-bank style research publication. Navy masthead band, numbered sections,
   a contents column on the left, footnoted sources, plain tables. Light only, one typeface. */
:root {
  --bg: #FFFFFF;
  --surface: #F2F4F7;
  --ink: #111A24;
  --ink-2: #56606C;
  --rule: #D5DBE2;
  --navy: #0B2A4A;
  --navy-2: #1D4A78;
  --navy-tint: #E8EEF5;
  --risk: #A8261C;
  --risk-tint: #FBF1EF;
  --risk-rule: #E4B9B3;
  --ok: #1E6A47;
  --warn: #8A5F00;
  --f: "Public Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --measure: 42rem;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--f); font-variant-numeric: tabular-nums lining-nums; }
a { color: var(--navy-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
strong, b { font-weight: 600; }
.wrap {
  max-width: 76rem; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Masthead band */
.band { background: var(--navy); color: #FFFFFF; }
.band-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 18px; }
.brand { color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand:hover { color: #FFFFFF; }
.brand-sub { color: #C3D0DF; font-size: 0.875rem; }
.brand-flag { margin-left: auto; color: #C3D0DF; font-size: 0.8125rem; }
@media (max-width: 640px) { .brand-flag { margin-left: 0; width: 100%; } }
.nav { border-bottom: 1px solid var(--rule); background: var(--bg); }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.nav a { display: block; padding: 14px 0 11px; color: var(--ink); text-decoration: none; font-size: 0.9375rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--navy-2); }
.nav a[aria-current="page"] { font-weight: 600; color: var(--navy); border-bottom-color: var(--navy); }
.draft { background: var(--surface); border-bottom: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-2); }
.draft .wrap { padding-block: 9px; }

/* Document layout */
.doc { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 56px; padding-block: 44px 72px; align-items: start; }
.main { min-width: 0; max-width: 50rem; }
.toc { position: sticky; top: 20px; font-size: 0.875rem; }
.toc p { margin: 0 0 10px; font-weight: 600; color: var(--ink); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc a { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); padding: 5px 0 5px 12px; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--navy); }
.toc a span { color: var(--ink-2); }
@media (max-width: 900px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 28px 56px; }
  .toc { position: static; border: 1px solid var(--rule); padding: 14px 16px; margin-bottom: 28px; }
  .toc ol { border-left: 0; }
  .toc a { padding-left: 0; }
}

/* Type */
h1, h2, h3, h4 { text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.625rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }
h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; display: flex; gap: 14px; scroll-margin-top: 16px; }
h2 .num { color: var(--navy-2); font-weight: 400; min-width: 1.2rem; }
h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 600; margin: 24px 0 6px; }
h4 { font-size: 0.9375rem; font-weight: 600; margin: 0 0 8px; }
p { margin: 0 0 14px; max-width: var(--measure); }
.kicker { font-size: 0.875rem; font-weight: 600; color: var(--navy-2); margin: 0 0 10px; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); }
.summary { background: var(--surface); padding: 16px 20px; margin: 24px 0 0; max-width: none; }
.page-head { padding-bottom: 32px; border-bottom: 2px solid var(--navy); margin-bottom: 4px; }
.note { font-size: 0.875rem; color: var(--ink-2); }
.sec { padding-block: 32px 18px; border-bottom: 1px solid var(--rule); }
.sec:last-of-type { border-bottom: 0; }
.sidenote { margin-top: 18px; padding: 14px 18px; border: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-2); max-width: var(--measure); }
.sidenote h4 { color: var(--ink); }
.sidenote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sidenote p { margin: 0; }

/* Status labels and footnotes */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; vertical-align: 1px; margin-left: 2px; }
.st::before { content: ""; width: 8px; height: 8px; flex: none; }
.st-conf::before { background: var(--ok); }
.st-doc::before { background: var(--navy-2); }
.st-ann::before { background: var(--warn); }
.st-view::before { border: 1.5px solid var(--ink-2); width: 5px; height: 5px; }
.st-pend { color: var(--risk); }
.st-pend::before { border: 1.5px dashed var(--risk); width: 5px; height: 5px; }
sup.fn { font-size: 0.7em; line-height: 0; vertical-align: super; margin-left: 1px; }
sup.fn a { text-decoration: none; font-weight: 600; padding: 0 1px; }
sup.fn a:hover { text-decoration: underline; }
.notes { margin-top: 40px; padding-top: 14px; border-top: 2px solid var(--navy); font-size: 0.875rem; color: var(--ink-2); }
.notes h3 { margin: 0 0 8px; font-size: 0.9375rem; }
.notes ol { margin: 0; padding-left: 1.5em; display: grid; gap: 6px; }
.notes li:target { background: var(--navy-tint); }
.notes li a { white-space: nowrap; }

/* Quote and Q&A */
blockquote { margin: 16px 0; padding: 0 0 0 18px; border-left: 2px solid var(--navy); max-width: var(--measure); }
.qa { display: grid; gap: 12px; max-width: var(--measure); margin: 14px 0 18px; padding: 16px 20px; background: var(--surface); }
.qa p { margin: 0; }
.qa .who { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--navy); margin-bottom: 2px; }

/* Tables */
.grid-scroll { overflow-x: auto; margin: 10px 0 14px; }
.grid3x2 { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.55; }
.grid3x2 th, .grid3x2 td { text-align: left; vertical-align: top; padding: 12px 14px; border: 1px solid var(--rule); }
.grid3x2 thead th { background: var(--navy); color: #FFFFFF; font-weight: 600; font-size: 0.875rem; border-color: var(--navy); }
.grid3x2 tbody th { font-weight: 600; width: 28%; min-width: 10rem; background: var(--surface); }
.grid3x2 td { min-width: 13rem; }
.grid3x2 td .ans { display: block; font-weight: 600; margin-bottom: 4px; }

/* Key facts */
.terms { margin: 6px 0 0; border-top: 2px solid var(--navy); }
.terms .row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 4px 20px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.terms dt { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); padding-top: 2px; }
.terms dd { margin: 0; min-width: 0; }
.terms .big { font-weight: 700; font-size: 1.0625rem; }
@media (max-width: 560px) { .terms .row { grid-template-columns: minmax(0, 1fr); } }

/* Page index on the home page */
.index { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.index a { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 4px 24px; padding: 13px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.index a b { color: var(--navy-2); font-weight: 600; }
.index a span { color: var(--ink-2); font-size: 0.9375rem; }
.index a:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .index a { grid-template-columns: minmax(0, 1fr); } }

/* Lists */
.plain { padding-left: 1.2em; max-width: var(--measure); margin: 0 0 14px; }
.plain li { margin-bottom: 8px; }

/* Risk */
.risk { background: var(--risk-tint); border: 1px solid var(--risk-rule); padding: 14px 18px; margin: 20px 0 6px; max-width: var(--measure); font-size: 0.9375rem; }
.risk strong { display: block; color: var(--risk); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.risk p { margin: 0; }
.riskbox { background: var(--risk-tint); border: 1px solid var(--risk-rule); padding: 18px 22px; }
.riskbox h3 { color: var(--risk); margin-top: 0; }
.riskbox ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.risklist { list-style: none; padding: 0; margin: 0; counter-reset: r; border-top: 1px solid var(--rule); }
.risklist li { counter-increment: r; display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--rule); }
.risklist li::before { content: counter(r) "."; color: var(--risk); font-weight: 700; }
.risklist b { display: block; }

/* Address */
.addr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; }
.addr code { font: 500 0.9375rem/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: var(--surface); border: 1px solid var(--rule); padding: 9px 11px; overflow-wrap: anywhere; min-width: 0; }
button { font: 600 0.875rem/1 var(--f); color: var(--navy); background: var(--bg); border: 1px solid var(--navy); padding: 9px 14px; cursor: pointer; }
button:hover { background: var(--navy-tint); }
button[disabled] { opacity: .35; cursor: default; background: var(--bg); }

/* FAQ */
details { border-bottom: 1px solid var(--rule); padding: 14px 0; max-width: var(--measure); }
details:first-child { border-top: 1px solid var(--rule); }
details summary { cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--navy-2); font-weight: 400; font-size: 1.25rem; line-height: 1; }
details[open] summary::after { content: "–"; }
details > div { padding-top: 10px; }

/* Sources page */
.srclist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.srclist li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.srclist li:target { background: var(--navy-tint); }
.srclist .id { font-weight: 700; color: var(--navy-2); }
.srclist p { margin: 4px 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.timeline { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.timeline time { font-weight: 600; color: var(--navy); font-size: 0.9375rem; }
dl.gloss { margin: 0; max-width: var(--measure); }
dl.gloss dt { font-weight: 600; margin-top: 14px; }
dl.gloss dd { margin: 2px 0 0; color: var(--ink-2); }

/* Footer */
.foot { background: var(--surface); border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-2); }
.foot .wrap { padding-block: 24px 36px; display: grid; gap: 10px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot a { color: var(--ink); }
.foot p { margin: 0; max-width: none; }

/* ---------- Figures (step-through) ---------- */
.fig { margin: 22px 0 26px; border: 1px solid var(--rule); }
.fig-title { padding: 12px 18px; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.fig-title span { color: var(--ink-2); font-size: 0.8125rem; margin-left: auto; }
.fig-stage { padding: 22px 18px 18px; overflow-x: auto; background: var(--surface); }
.fig-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 18px; border-top: 1px solid var(--rule); }
.fig-ctrl { display: flex; gap: 8px; }
.fig-count { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.fig-caps { list-style: none; counter-reset: c; margin: 0; padding: 0 18px 12px; display: grid; }
.fig-caps li { counter-increment: c; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: 8px; padding: 9px 0; color: var(--ink-2); font-size: 0.9375rem; border-top: 1px solid var(--rule); cursor: pointer; }
.fig-caps li::before { content: counter(c) "."; font-weight: 600; }
.fig-caps li.on { color: var(--ink); }
.fig-caps li.on::before { color: var(--navy-2); }
.fig * { transition: all .6s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .fig * { transition: none !important; } }

/* Treasury figure */
.tre { display: grid; gap: 16px; min-width: 30rem; }
.tre .lane { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 7.5rem; gap: 12px; align-items: center; }
.tre .lbl { font-size: 0.875rem; color: var(--ink-2); }
.tre .track { height: 28px; background: var(--bg); border: 1px solid var(--rule); position: relative; overflow: hidden; }
.tre .seg { position: absolute; top: 0; bottom: 0; left: 0; width: 0; }
.tre .fiat { background: var(--navy); width: 100%; opacity: .3; }
.tre .locked { background: var(--navy); }
.tre .rel { background: repeating-linear-gradient(135deg, var(--ok) 0 6px, transparent 6px 10px); opacity: 0; }
.tre .buy { background: repeating-linear-gradient(135deg, var(--navy) 0 6px, transparent 6px 10px); opacity: 0; }
.tre .val { font-weight: 700; text-align: right; }
.tre .price { font-size: 0.9375rem; }
.tre .price b { font-weight: 700; }
[data-step="0"] .tre .locked { width: 50%; }
[data-step="1"] .tre .locked { width: 25%; }
[data-step="1"] .tre .rel { left: 25%; width: 25%; opacity: 1; }
[data-step="2"] .tre .locked { width: 100%; }
[data-step="2"] .tre .buy { left: 50%; width: 50%; opacity: 1; }
[data-step="3"] .tre .locked { width: 0%; }
[data-step="3"] .tre .rel { left: 0; width: 50%; opacity: 1; }
[data-step="3"] .tre .fiat { opacity: .08; }
.tre [data-show] { display: none; }
[data-step="0"] .tre [data-show~="0"], [data-step="1"] .tre [data-show~="1"], [data-step="2"] .tre [data-show~="2"], [data-step="3"] .tre [data-show~="3"] { display: inline; }
.tre .key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8125rem; color: var(--ink-2); }
.tre .key i { display: inline-block; width: 14px; height: 10px; margin-right: 6px; }

/* Supply figure */
.sup { display: grid; gap: 14px; min-width: 30rem; }
.sup .lane { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 6px 12px; align-items: center; opacity: .3; }
@media (max-width: 600px) { .sup { min-width: 0; } .sup .lane { grid-template-columns: minmax(0, 1fr); } }
.sup .lbl { font-size: 0.8125rem; color: var(--ink-2); }
.sup .lbl b { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
.sup .track { height: 22px; position: relative; }
.sup .seg { position: absolute; top: 0; bottom: 0; }
.sup .max { left: 0; width: 100%; border: 1px dashed var(--ink-2); }
.sup .sold { left: 0; width: 21.92%; background: var(--navy); }
.sup .co { left: 21.92%; width: 10.22%; background: var(--navy-2); opacity: .6; }
.sup .burn { left: 32.14%; width: 20.99%; background: repeating-linear-gradient(135deg, var(--ink-2) 0 2px, transparent 2px 7px); }
.sup .rep { left: 0; width: 32.14%; background: var(--navy); }
.sup .now { left: 0; width: 32.73%; background: var(--navy); }
.sup .delta { position: absolute; top: -4px; bottom: -4px; left: 32.14%; width: .59%; min-width: 3px; background: var(--ok); }
[data-step="0"] .sup .l0, [data-step="1"] .sup .l0, [data-step="2"] .sup .l0, [data-step="3"] .sup .l0 { opacity: 1; }
[data-step="1"] .sup .l1, [data-step="2"] .sup .l1, [data-step="3"] .sup .l1 { opacity: 1; }
[data-step="2"] .sup .l2, [data-step="3"] .sup .l2 { opacity: 1; }
[data-step="3"] .sup .l3 { opacity: 1; }

/* Fusion tx figure */
.tx { display: grid; grid-template-columns: minmax(12rem, 1fr) 2.2rem minmax(11rem, 1fr) 2.2rem minmax(14rem, 1.2fr); align-items: center; min-width: 44rem; }
.tx .card { background: var(--bg); border: 1px solid var(--rule); padding: 12px 14px; font: 400 0.8125rem/1.65 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.tx .card h5 { margin: 0 0 6px; font: 600 0.8125rem/1.2 var(--f); color: var(--navy); }
.tx .card .k { color: var(--ink-2); }
.tx .card .q { color: var(--navy); font-weight: 700; }
.tx .arrow { text-align: center; color: var(--ink-2); font-size: 1.2rem; opacity: .2; }
.tx .hash, .tx .block { opacity: .2; transform: translateY(6px); }
.tx .sig { opacity: .2; }
.tx .chain { display: flex; gap: 6px; margin-top: 8px; }
.tx .chain span { flex: 1; height: 8px; background: var(--rule); }
.tx .anchors { display: flex; gap: 6px; margin-top: 10px; font: 600 0.6875rem/1 var(--f); color: var(--ink-2); opacity: 0; }
.tx .anchors span { border: 1px dashed var(--ink-2); padding: 4px 6px; }
[data-step="1"] .tx .sig, [data-step="2"] .tx .sig, [data-step="3"] .tx .sig, [data-step="4"] .tx .sig { opacity: 1; }
[data-step="2"] .tx .hash, [data-step="3"] .tx .hash, [data-step="4"] .tx .hash { opacity: 1; transform: none; }
[data-step="2"] .tx .a1, [data-step="3"] .tx .a1, [data-step="4"] .tx .a1 { opacity: 1; }
[data-step="3"] .tx .block, [data-step="4"] .tx .block { opacity: 1; transform: none; }
[data-step="3"] .tx .a2, [data-step="4"] .tx .a2 { opacity: 1; }
[data-step="3"] .tx .chain span.me, [data-step="4"] .tx .chain span { background: var(--navy); }
[data-step="4"] .tx .anchors { opacity: 1; }

/* Nodes figure */
.nodes { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 11rem; gap: 16px; align-items: center; min-width: 36rem; }
.nodes .ledgers { display: grid; gap: 10px; }
.nodes .ledger { border: 1px solid var(--ink-2); background: var(--bg); padding: 8px 10px; font-size: 0.875rem; }
.nodes .ledger b { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.nodes .ring { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nodes .node { aspect-ratio: 1; max-width: 100%; border-radius: 50%; border: 2px solid var(--navy); background: var(--navy-tint); display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; color: var(--navy); position: relative; }
.nodes .out { border: 1px solid var(--rule); background: var(--bg); padding: 10px 12px; font-size: 0.875rem; }
.nodes .out b { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.nodes .out .s { display: none; }
[data-step="0"] .nodes .s0, [data-step="1"] .nodes .s1, [data-step="2"] .nodes .s2 { display: block; }
[data-step="1"] .nodes .n3 { border-color: var(--rule); background: var(--bg); color: var(--ink-2); }
[data-step="2"] .nodes .n2 { border-color: var(--risk); background: var(--risk-tint); color: var(--risk); }

/* Flow map */
.flow { min-width: 40rem; }
.flow svg { width: 100%; height: auto; display: block; }
.flow text { font-family: var(--f); fill: var(--ink); }
.flow .muted { fill: var(--ink-2); }
.flow .box { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1; }
.flow .box.hub { stroke: var(--navy); stroke-width: 2; }
.flow .line { stroke: var(--navy); stroke-width: 1.5; fill: none; }
.flow .line.pend { stroke-dasharray: 5 5; stroke: var(--ink-2); }
.flow .arrowhead { fill: var(--navy); }
.flow .arrowhead.pend { fill: var(--ink-2); }

/* Folded detail: quiet, inline, never a second FAQ */
details.more { border: 0; padding: 0; margin: 12px 0 0; }
details.more:first-child { border-top: 0; }
details.more summary { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--navy-2); }
details.more summary::after { font-size: 1rem; }
details.more > div { padding-top: 8px; }
details.more > div > :first-child { margin-top: 0; }

/* Audit fixes: phone layout */
.flow { min-width: 0; }
.flow svg { min-width: 40rem; }
@media (max-width: 900px) { .toc { display: none; } }
@media (max-width: 640px) {
  .nav ul { flex-wrap: wrap; column-gap: 20px; row-gap: 0; }
  .grid3x2, .grid3x2 tbody, .grid3x2 tr, .grid3x2 th, .grid3x2 td { display: block; width: auto; min-width: 0; }
  .grid3x2 thead { display: none; }
  .grid3x2 tr { border: 1px solid var(--rule); margin-bottom: 12px; }
  .grid3x2 th, .grid3x2 td { border: 0; }
  .grid3x2 tbody th { width: auto; background: var(--navy); color: #FFFFFF; }
  .grid3x2 td + td { border-top: 1px solid var(--rule); }
  .grid3x2 td::before { content: attr(data-l); display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
}

/* Rebalancing example table */
.rb { width: 100%; max-width: var(--measure); border-collapse: collapse; margin: 18px 0 6px; font-size: 0.9375rem; }
.rb caption { caption-side: top; text-align: left; color: var(--ink-2); font-size: 0.875rem; padding-bottom: 8px; }
.rb th, .rb td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
.rb thead th { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid var(--navy); }
.rb tbody th { font-weight: 600; }
.rb td span { display: block; font-size: 0.8125rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- Shared additions */
.menu-btn { display: none; }
.draft .short { display: none; }
details.notes { margin-top: 40px; padding: 14px 0 0; border-top: 2px solid var(--navy); border-bottom: 0; max-width: none; font-size: 0.875rem; color: var(--ink-2); }
details.notes:first-child { border-top: 2px solid var(--navy); }
details.notes summary { font-size: 0.9375rem; color: var(--ink); }
details.notes summary span { font-weight: 400; color: var(--ink-2); }
details.notes > ol { margin: 10px 0 0; padding-left: 1.5em; display: grid; gap: 6px; }
details.notes li:target { background: var(--navy-tint); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.pager a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.pager a:hover { border-color: var(--navy-2); }
.pager a span { font-size: 0.8125rem; color: var(--ink-2); }
.pager a b { color: var(--navy-2); }
.pager .next { text-align: right; grid-column: 2; }
.flow svg.flow-m { display: none; }
details.notes summary { justify-content: flex-start; gap: 6px; }
details.notes summary::after { margin-left: auto; }

/* ---------------------------------------------------------------- Phones */
@media (max-width: 760px) {
  body { font-size: 1.0625rem; line-height: 1.62; }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--navy); z-index: 30; }

  /* Sticky compact header with a Menu button */
  .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
  .band-in { flex-wrap: nowrap; align-items: center; padding-block: 10px; min-height: 56px; }
  .brand { font-size: 1.125rem; }
  .brand-sub { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 40px; padding: 0 14px; background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.45); font: 600 0.9375rem var(--f); cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 0; }
  .menu-btn:hover, .menu-btn:active, .menu-btn:focus { background: rgba(255,255,255,0.12); color: #FFFFFF; }
  .menu-btn::after { content: ""; width: 10px; height: 10px; background: linear-gradient(#FFFFFF, #FFFFFF) 0 1px / 100% 2px no-repeat, linear-gradient(#FFFFFF, #FFFFFF) 0 5px / 100% 2px no-repeat, linear-gradient(#FFFFFF, #FFFFFF) 0 9px / 100% 2px no-repeat; }
  .top.open .menu-btn::after { background: none; content: "×"; width: auto; height: auto; font-size: 1.25rem; line-height: 1; }
  .nav { box-shadow: 0 6px 16px rgba(11, 42, 74, 0.08); }
  .nav ul { flex-direction: column; gap: 0; flex-wrap: nowrap; overflow: visible; padding-block: 4px 10px; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
  .nav li:last-child a { border-bottom: 0; }
  .nav a[aria-current="page"] { border-bottom-color: var(--rule); box-shadow: inset 3px 0 0 var(--navy); padding-left: 12px; }
  .js .nav { display: none; }
  .js .top.open .nav { display: block; }

  .draft .long { display: none; }
  .draft .short { display: inline; }
  .draft .wrap { padding-block: 8px; }

  /* Type and rhythm */
  .doc { padding-block: 22px 40px; }
  h1 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 12px; }
  .lede { font-size: 1.0625rem; line-height: 1.55; }
  .page-head { padding-bottom: 22px; }
  h2 { font-size: 1.3125rem; gap: 10px; margin-bottom: 10px; scroll-margin-top: 72px; }
  .sec { padding-block: 26px 12px; }
  p { margin-bottom: 12px; }

  /* Tap targets */
  sup.fn a { padding: 10px 5px; margin: 0 -2px; }
  details.more summary { min-height: 44px; }
  details summary { padding-block: 4px; }
  .index a { padding: 14px 28px 14px 0; position: relative; }
  .index a::after { content: "›"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.375rem; color: var(--navy-2); }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; grid-row: 1; }
  .pager .prev { text-align: left; }

  /* Notes stay folded until asked for */
  details.notes { margin-top: 28px; }
  details.notes summary { min-height: 44px; align-items: center; }

  /* Flow map: vertical version */
  .flow svg.flow-d { display: none; }
  .flow svg.flow-m { display: block; min-width: 0; width: 100%; max-width: 360px; margin: 0 auto; }
  main p a, details.notes a, .terms a { padding-block: 8px; }

  /* Footer */
  .foot nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .foot nav a { padding: 10px 0; }
  .foot { font-size: 0.875rem; }
}

/* Shareable links: a quiet link icon after each section heading, a text link under each FAQ answer */
h2 .share { align-self: center; margin-left: 2px; width: 28px; height: 28px; flex: none; opacity: 0; transition: opacity .15s; background: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4A78' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
h2:hover .share, h2 .share:focus-visible, h2 .share.done { opacity: 1; }
h2 .share.done::after { content: "Link copied"; position: relative; left: 32px; top: 3px; font-size: 0.75rem; font-weight: 600; color: var(--navy-2); white-space: nowrap; }
@media (hover: none) { h2 .share { opacity: 0.55; } }
.share-line { margin: 10px 0 0; font-size: 0.875rem; }
.share-line .share { color: var(--ink-2); }
.share-line .share.done { color: var(--navy-2); font-weight: 600; }
details:target > summary { color: var(--navy); }
details[id] { scroll-margin-top: 16px; }
@media (max-width: 760px) { details[id] { scroll-margin-top: 72px; } }

/* Executive summary (home) */
.keypoints { background: var(--surface); padding: 18px 22px 6px; margin: 0 0 8px; }
.keypoints .kp-h { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin: 0 0 10px; }
.keypoints ol { margin: 0; padding-left: 1.25rem; }
.keypoints li { margin: 0 0 12px; padding-left: 4px; }
.keypoints li::marker { color: var(--navy-2); font-weight: 600; }
@media (max-width: 760px) { .keypoints { padding: 16px 16px 4px; } }

/* Masthead (desktop): slim band that scrolls away, menu row stays pinned */
@media (min-width: 761px) {
  .top { position: sticky; top: -56px; z-index: 20; }
  .band-in { height: 56px; padding-block: 0; align-items: center; flex-wrap: nowrap; }
  .nav { box-shadow: 0 1px 0 var(--rule); }
  .nav a[aria-current="page"] { background: var(--navy-tint); margin-inline: -10px; padding-inline: 10px; }
  .toc { top: 76px; }
  h2, details[id], [id^="src-"] { scroll-margin-top: 72px; }
}
@media (max-width: 760px) { .brand-flag { display: none; } }

/* Letterhead restyle (26 Oct 2026): white masthead, ruled tables, hanging numbers, ink links */
:root { --ink-3: #8A949F; }

/* Letterhead masthead */
.band { background: var(--bg); color: var(--ink); border-top: 6px solid var(--ink); border-bottom: 1px solid var(--ink); }
.brand, .brand:hover { color: var(--ink); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand-sub, .brand-flag { color: var(--ink-2); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (min-width: 761px) {
  .top { top: -57px; }
  .band-in { height: 50px; }
  .nav a[aria-current="page"] { background: none; margin-inline: 0; padding-inline: 0; border-bottom-width: 2px; }
}
@media (max-width: 760px) {
  body::before { background: var(--bg); }
  .menu-btn, .menu-btn:hover, .menu-btn:active, .menu-btn:focus { color: var(--ink); border-color: var(--ink); background: var(--bg); }
  .menu-btn::after { background: linear-gradient(currentColor, currentColor) 0 1px / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 5px / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 9px / 100% 2px no-repeat; }
  .nav a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--ink); }
}

.page-head { border-bottom: 1px solid var(--ink); }

/* Hanging section numbers */
h2 .num { color: var(--ink-3); font-weight: 400; }
@media (min-width: 901px) {
  h2 { position: relative; }
  h2 .num { position: absolute; right: 100%; margin-right: 18px; text-align: right; }
}

/* Links in ink */
.main p a, .main li a:not(.share), .more summary { color: var(--ink); text-decoration-color: var(--ink-3); }
.main p a:hover, .main li a:hover { color: var(--navy); text-decoration-color: currentColor; }
.index a b { color: var(--ink); font-family: var(--f); font-weight: 600; font-size: 1.0625rem; }

/* Ruled tables, no fills */
.grid3x2 { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.grid3x2 th, .grid3x2 td { border: 0; border-bottom: 1px solid var(--rule); }
.grid3x2 thead th { background: none; color: var(--ink); border-bottom: 1px solid var(--ink); font-size: 0.8125rem; }
.grid3x2 tbody th { background: none; }
.grid3x2 tr:last-child th, .grid3x2 tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) {
  .grid3x2 { border: 0; }
  .grid3x2 tr { border: 0; border-top: 2px solid var(--ink); margin-bottom: 18px; }
  .grid3x2 tbody th { background: none; color: var(--ink); border-bottom: 1px solid var(--ink); padding-inline: 0; }
  .grid3x2 td { padding-inline: 0; }
  .grid3x2 td::before { text-transform: none; letter-spacing: 0.03em; font-variant: all-small-caps; font-size: 0.875rem; }
}
.rb { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.rb thead th { border-bottom: 1px solid var(--ink); color: var(--ink); }
.rb tbody tr:last-child th, .rb tbody tr:last-child td { border-bottom: 0; }
.terms { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.terms .row:last-child { border-bottom: 0; }
.notes { border-top: 1px solid var(--ink); }

/* Executive summary as a ruled panel */
.keypoints { background: none; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 14px 0 4px; margin-top: 4px; }
.keypoints .kp-h { font-family: var(--f); text-transform: none; font-variant: all-small-caps; letter-spacing: 0.05em; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.keypoints li::marker { color: var(--ink-3); font-weight: 400; }
.page-head + .keypoints { border-top: 0; margin-top: 0; padding-top: 22px; }

/* Labels as small caps, not spaced capitals */
.st { text-transform: none; font-variant: all-small-caps; letter-spacing: 0.04em; font-size: 0.875rem; }
.qa { background: none; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding-inline: 0; }

@media (min-width: 761px) { .grid3x2 th:first-child, .grid3x2 td:first-child { padding-left: 0; } }

/* Shareable facts */
.fact { scroll-margin-top: 80px; }
.fact:target { background: var(--navy-tint); box-shadow: 0 0 0 4px var(--navy-tint); }
.fshare { display: inline-block; width: 28px; height: 28px; margin: -6px -4px -6px 0; vertical-align: -8px; opacity: 0.4; background: center / 15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111A24' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.fshare:hover, .fshare:focus-visible { opacity: 1; }
@media (hover: none) { .fshare { opacity: 0.6; } }
.fshare { position: relative; }
.ftip { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: var(--bg); font-size: 0.75rem; padding: 3px 8px; pointer-events: none; }

/* Diagrams on What QNT does (HTML, reflow on phones) */
.dg { margin: 22px 0 26px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 12px 0 18px; }
.dg figcaption { font-size: 0.875rem; font-weight: 600; margin-bottom: 16px; }
.dg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem minmax(0, 1.1fr) 7rem minmax(0, 1fr); grid-template-areas: "l1 l1 l1 l1 l1" "a1 b1 c1 . ." ". . v . ." "l2 l2 l2 l2 l2" "a2 b2 c2 d2 e2"; align-items: center; font-size: 0.875rem; line-height: 1.35; }
.dg-lane { font-variant: all-small-caps; letter-spacing: 0.05em; color: var(--ink-2); font-weight: 600; margin: 2px 0 6px; }
.nd { border: 1px solid var(--ink-2); padding: 10px 12px; background: var(--bg); min-height: 3.25rem; display: flex; flex-direction: column; justify-content: center; }
.nd.hub { border: 2px solid var(--ink); }
.nd small { color: var(--ink-2); font-size: 0.8125rem; }
.ar { position: relative; height: 3.25rem; display: flex; align-items: flex-end; justify-content: center; padding: 0 10px 0 6px; }
.ar span { font-size: 0.75rem; color: var(--ink-2); text-align: center; padding-bottom: calc(1.625rem + 4px); line-height: 1.25; }
.ar::before { content: ""; position: absolute; left: 4px; right: 6px; top: 50%; border-top: 1.5px solid var(--ink); }
.ar::after { content: ""; position: absolute; right: 2px; top: calc(50% - 4.25px); border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.ar-v { position: relative; height: 2.75rem; display: flex; align-items: center; justify-content: center; }
.ar-v::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.5px dashed var(--ink-2); }
.ar-v span { position: relative; background: var(--bg); font-size: 0.75rem; color: var(--ink-2); padding: 2px 6px; }
.loop { list-style: none; counter-reset: lp; margin: 0; padding: 0 0 46px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; position: relative; font-size: 0.875rem; line-height: 1.35; }
.loop li { counter-increment: lp; position: relative; border: 1px solid var(--ink-2); padding: 10px 12px; min-height: 4.75rem; }
.loop li::before { content: counter(lp); display: block; color: var(--ink-3); font-size: 0.8125rem; margin-bottom: 2px; }
.loop li + li::after { content: ""; position: absolute; left: -15px; top: 50%; border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; margin-top: -5px; }
.loop::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 14px; height: 28px; border: 1.5px solid var(--ink); border-top: 0; }
.loop::before { content: ""; position: absolute; left: calc(10% - 5px); bottom: 42px; border: 5px solid transparent; border-bottom: 7px solid var(--ink); border-top: 0; }
.loop-back { margin: -8px auto 0; max-width: none; text-align: center; font-size: 0.8125rem; color: var(--ink-2); }
@media (max-width: 760px) {
  .dg-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l1" "a1" "b1" "c1" "v" "l2" "a2" "b2" "c2" "d2" "e2"; }
  .ar { height: 2.75rem; justify-content: flex-start; align-items: center; padding: 0 0 0 calc(50% + 12px); }
  .ar span { padding: 0; text-align: left; }
  .ar::before { left: 50%; right: auto; top: 4px; bottom: 8px; border-top: 0; border-left: 1.5px solid var(--ink); }
  .ar::after { left: calc(50% - 4.25px); right: auto; top: auto; bottom: 2px; border: 5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
  .ar-v { justify-content: flex-start; padding-left: calc(50% + 6px); }
  .ar-v span { background: none; }
  .nd { min-height: 0; }
  .loop { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 0 40px 0 0; }
  .loop li { min-height: 0; }
  .loop li::before { display: inline; margin: 0 8px 0 0; }
  .loop li + li::after { left: 50%; top: -15px; margin: 0 0 0 -5px; border: 5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
  .loop::after { left: auto; right: 6px; top: 22px; bottom: 22px; width: 24px; height: auto; border: 1.5px solid var(--ink); border-left: 0; }
  .loop::before { left: auto; right: 30px; bottom: auto; top: 17px; border: 5px solid transparent; border-right: 7px solid var(--ink); border-left: 0; }
  .loop-back { margin-top: 10px; text-align: left; }
}

/* Flow rows, outcomes, bars (Treasury and Supply diagrams) */
.dg-row { display: grid; grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1.15fr) 7.5rem minmax(0, 1fr); align-items: center; font-size: 0.875rem; line-height: 1.35; margin-bottom: 10px; }
.dg-end { display: grid; grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1.15fr) 7.5rem minmax(0, 1fr); font-size: 0.875rem; }
.dg-end .ar-v { grid-column: 5; }
.dg-end .ar-v::before { border-left-style: solid; border-color: var(--ink); }
.dg-out { display: grid; grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1.15fr) 7.5rem minmax(0, 1fr); font-size: 0.875rem; line-height: 1.35; }
.dg-out .nd:first-child { grid-column: 3; }
.dg-out .nd:last-child { grid-column: 5; }
.dg-end .ar-v { height: 2rem; }
.dg-fork { grid-column: 3 / 6; grid-row: 2; height: 12px; border: 1.5px solid var(--ink); border-bottom: 0; }
.dg-out small, .dg-row small { display: block; margin-top: 2px; }
.dg-note { margin: 12px 0 0; font-size: 0.8125rem; color: var(--ink-2); max-width: none; }
.bars { display: grid; gap: 12px; font-size: 0.875rem; }
.br { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4px 16px; align-items: center; }
.br-l { line-height: 1.3; }
.br-l b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.br-l small { color: var(--ink-2); font-size: 0.75rem; }
.br-t { position: relative; height: 22px; }
.br-b { position: absolute; top: 0; bottom: 0; background: var(--navy-2); opacity: 0.55; }
.br-b.ghost { background: none; opacity: 1; border: 1px dashed var(--ink-3); }
.br-b.burn { background: repeating-linear-gradient(135deg, var(--risk) 0 2px, transparent 2px 6px); opacity: 1; outline: 1px solid var(--risk); outline-offset: -1px; }
.br-b.now { background: var(--navy); opacity: 1; }
.stack { display: flex; height: 30px; }
.stack span + span { border-left: 2px solid var(--bg); }
.legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.875rem; }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; flex: none; }
.legend b { font-weight: 600; margin-left: 2px; }
.d1 { background: var(--navy); } .d2 { background: var(--navy-2); } .d3 { background: #7F9BBB; } .d4 { background: #C3D0DF; }

/* Navy as the accent: masthead bar, summary rule, diagram hubs and rules */
.band { border-top-color: var(--navy); }
.keypoints { border-top-color: var(--navy); }
.page-head + .keypoints { box-shadow: inset 0 3px 0 var(--navy); }
.dg { border-top-color: var(--navy); }
.nd.hub { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.nd.hub small { color: #C3D0DF; }
.keypoints .kp-h, .dg figcaption { color: var(--navy); }
blockquote { border-left-color: var(--navy); }
sup.fn a { color: var(--navy-2); }

@media (max-width: 760px) {
  .dg-row, .dg-end { grid-template-columns: minmax(0, 1fr); }
  .dg-end .ar-v { grid-column: 1; }
  .dg-out { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dg-out .nd:first-child, .dg-out .nd:last-child { grid-column: 1; }
  .dg-fork { display: none; }
  .br { grid-template-columns: minmax(0, 1fr); }
}
.toc a.on { color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--navy); margin-left: -1px; }

/* Network topology figure */
.nets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nets > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nets svg { width: 100%; max-width: 170px; height: auto; margin: 0 auto 8px; display: block; }
.nets b { font-weight: 600; font-size: 0.875rem; }
.nets small { color: var(--ink-2); font-size: 0.75rem; line-height: 1.35; }
.nets .lk { stroke: var(--ink-3); stroke-width: 1.2; }
.nets .nw { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.nets .hb { fill: var(--ink-2); }
.nets .gw { fill: var(--navy); }
.nets-key { margin-top: 14px; }
.nets-key i { border-radius: 0; }
.nets-key .k-nw { background: var(--bg); border: 1.5px solid var(--ink); border-radius: 50%; }
.nets-key .k-hb { background: var(--ink-2); border-radius: 50%; }
.nets-key .k-gw { background: var(--navy); }
@media (max-width: 480px) { .nets { gap: 10px; } .nets b { font-size: 0.8125rem; } }
.nets.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
.nets .own { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.2; }
.nets .lk.off { stroke-dasharray: 3 3; opacity: .6; }
.nets .nw.off { stroke: var(--ink-3); stroke-dasharray: 3 2; }
.nets .gw.off { fill: var(--ink-3); }
.nets-key .k-off { background: var(--bg); border: 1.5px dashed var(--ink-3); border-radius: 50%; }