:root {
  --paper: #ece9e1;
  --paper-2: #f6f4ee;
  --ink: #17160f;
  --mute: #5f5c53;
  --stamp: #b8312a;
  --display: "DotGothic16", monospace;
  --body: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
svg { shape-rendering: crispEdges; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
code, pre { font-family: var(--body); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-50%, -24px);
  opacity: 0;
  animation: nav-in .6s steps(4) .25s forwards;
}
@keyframes nav-in { to { opacity: 1; transform: translate(-50%, 0); } }

.brand {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 18px;
  margin-right: 12px;
}
.brand svg { width: 16px; height: 16px; fill: currentColor; }

.links { display: flex; gap: 2px; }
.links a {
  white-space: nowrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 12px;
  transition: background .15s steps(2), color .15s steps(2);
}
.links a:hover, .links a[aria-current] { background: var(--ink); color: var(--paper); }

.menu { display: none; width: 44px; height: 44px; position: relative; }
.menu span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 2px;
  background: var(--ink);
  transition: transform .15s steps(2);
}
.menu span:first-child { top: 18px; }
.menu span:last-child { top: 25px; }
.nav.open .menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav.open .menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .1s steps(2), box-shadow .1s steps(2);
}
.btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 var(--ink); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-ghost { border: none; box-shadow: none; padding: 12px 4px; }
.btn-ghost:hover, .btn-ghost:active { transform: none; box-shadow: none; text-decoration: underline; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 128px 0 96px 24px;
  display: grid;
  align-items: center;
  isolation: isolate;
}
.hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 48px;
  align-items: center;
  padding-left: max(0px, calc((100vw - 1120px) / 2 - 24px));
}

.rv {
  opacity: 0;
  transform: translateY(14px);
  animation: rv .4s steps(4) var(--d, 0s) forwards;
}
@keyframes rv { to { opacity: 1; transform: translateY(0); } }

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.05;
  text-wrap: balance;
}
h1 .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .12em .06em .26em;
  margin: -.12em -.06em -.26em;
}
h1 .w span {
  display: inline-block;
  transform: translateY(140%);
  animation: rise .5s steps(5) var(--d, 0s) forwards;
}
@keyframes rise { to { transform: translateY(0); } }

.lede {
  font-size: 18px;
  max-width: 44ch;
  margin: 24px 0 32px;
}
.cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.meta { font-size: 13px; color: var(--mute); margin-top: 24px; max-width: 44ch; }
.meta a { text-decoration: underline; }

/* ---------- hero art ---------- */
.hero-art { display: grid; justify-items: end; }
/* The still is the default. Motion-tolerant viewers get a 24-frame sheet stepped through
   with background-position; alternate direction makes the loop seamless. */
.hero-art .counter {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 872 / 1168;
  background: url(/assets/counter.png) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art .counter {
    background-image: url(/assets/counter-sheet.png);
    background-size: 2400% 100%;
    animation: counter 5s steps(24, jump-none) infinite alternate;
  }
}
@keyframes counter { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* ---------- sections ---------- */
.section { padding: 128px 24px; }
.section-alt { position: relative; }
.section-alt::before, .section-alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background: repeating-conic-gradient(var(--ink) 0 25%, var(--paper) 0 50%) 0 0 / 4px 4px;
}
.section-alt::before { top: 0; }
.section-alt::after { bottom: 0; }
.wrap { max-width: 1120px; margin: 0 auto; }

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
}
.sub { margin-top: 16px; max-width: 48ch; color: var(--mute); }
.center-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.center-head .sub { margin-left: auto; margin-right: auto; }

.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.split-head { position: sticky; top: 120px; }

.feature-list { border-top: 2px solid var(--ink); }
.feature {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 2px solid var(--ink);
}
.feature svg { width: 28px; height: 28px; stroke: var(--ink); fill: none; stroke-width: 2; margin-top: 2px; }
.feature h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.feature p { max-width: 50ch; color: var(--mute); }

.cases { border-top: 2px solid var(--ink); }
.cases li {
  display: grid;
  grid-template-columns: 48px 1fr 2fr;
  align-items: baseline;
  gap: 24px;
  padding: 24px 8px;
  border-bottom: 2px solid var(--ink);
  transition: background .15s steps(3), color .15s steps(3);
}
.cases li:hover { background: var(--ink); color: var(--paper); }
.cases .n, .cases .t, .cases .d { transition: transform .15s steps(3); }
.cases li:hover .n, .cases li:hover .t, .cases li:hover .d { transform: translateX(8px); }
.cases .n { font-size: 12px; letter-spacing: .08em; }
.cases .t { font-family: var(--display); font-size: 22px; }
.cases .d { max-width: 60ch; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card {
  position: relative;
  min-width: 0;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 24px 0 0;
}
.titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(var(--ink) 0 2px, var(--paper-2) 2px 4px);
  display: flex;
  align-items: center;
}
.titlebar span:first-child { width: 12px; height: 12px; margin-left: 8px; border: 2px solid var(--ink); background: var(--paper-2); }
.titlebar span:last-child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper-2);
  padding: 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.card pre { padding: 24px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
.card p { padding: 0 24px 24px; color: var(--mute); font-size: 14px; }

.facts { width: 100%; table-layout: fixed; border-collapse: collapse; border-top: 2px solid var(--ink); }
.facts td { overflow-wrap: anywhere; }
.facts th, .facts td { padding: 16px 8px; border-bottom: 2px solid var(--ink); text-align: left; vertical-align: top; }
.facts th { width: 200px; font-weight: 400; color: var(--mute); }
.facts td a { text-decoration: underline; }

.footer { border-top: 2px solid var(--ink); padding: 32px 24px; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.footer-links a:hover { text-decoration: underline; }
.footer .copy { font-size: 12px; color: var(--mute); }

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s ease-out var(--d, 0s), transform .3s steps(3) var(--d, 0s);
}
[data-reveal].in { opacity: 1; transform: none; }


/* ---------- depth sections ---------- */
.prose p { max-width: 62ch; }
.prose p + p { margin-top: 16px; }

.seq-wrap { overflow-x: auto; border: 2px solid var(--ink); background: var(--paper); padding: 16px 0 8px; }
.seq { display: block; min-width: 880px; width: 100%; height: auto; }

.demo { border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 4px 4px 0 var(--ink); display: grid; grid-template-columns: 200px 1fr; }
.demo-steps { border-right: 2px solid var(--ink); display: flex; flex-direction: column; }
.demo-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: baseline;
  text-align: left;
  padding: 16px;
  border-bottom: 2px solid var(--ink);
  font-size: 14px;
  transition: background .15s steps(2), color .15s steps(2);
}
.demo-step span { font-size: 12px; letter-spacing: .08em; }
.demo-step[aria-current] { background: var(--ink); color: var(--paper); }
.demo-step:hover:not([aria-current]) { background: var(--paper); }
.demo-body { padding: 24px; min-width: 0; }
.demo-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.demo-head span { font-size: 16px; max-width: 48ch; }
.demo-body pre { border: 2px solid var(--ink); background: var(--paper); padding: 16px; overflow-x: auto; font-size: 13px; line-height: 1.6; min-height: 240px; white-space: pre-wrap; word-break: break-all; }
.demo-body pre .sim { color: var(--stamp); }
.demo-body pre .ok { font-weight: 600; }

.calc { margin-top: 32px; border: 2px solid var(--ink); background: var(--paper-2); padding: 24px; display: grid; gap: 12px; }
.calc-head { font-family: var(--display); font-size: 20px; margin-bottom: 4px; }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-fields label:last-child { grid-column: 1 / -1; }
.calc-out { border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 12px; display: grid; gap: 8px; }
.calc-out div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.calc-out dt { color: var(--mute); }
.calc-out dd { font-weight: 600; white-space: nowrap; }
.calc-out div:nth-last-child(-n+2) dd { color: var(--stamp); }

.tablewrap { overflow-x: auto; }
.wrong, .compare { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: 15px; min-width: 720px; }
.wrong th, .wrong td, .compare th, .compare td { text-align: left; padding: 16px 12px; border-bottom: 2px solid var(--ink); vertical-align: top; }
.wrong thead th, .compare thead th { font-weight: 400; color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding-top: 8px; }
.wrong td:first-child { font-weight: 600; width: 22%; }
.wrong td:nth-child(2) { width: 42%; }
.compare tbody th { font-weight: 400; color: var(--mute); width: 24%; }
.compare td:last-child { font-weight: 600; }

.qa { margin-top: 32px; border-top: 2px solid var(--ink); }
.qa div { padding: 24px 0; border-bottom: 2px solid var(--ink); display: grid; grid-template-columns: 5fr 7fr; gap: 24px; }
.qa dt { font-weight: 600; }
.qa dd { color: var(--ink); max-width: 56ch; }

/* ---------- docs ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: 160px 24px 128px; }
.doc h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 16px; }
.doc > p, .doc li { max-width: 65ch; }
.doc h2 { font-size: 20px; margin: 64px 0 16px; padding-top: 24px; border-top: 2px solid var(--ink); }
.doc h3 { font-size: 16px; font-weight: 600; margin: 32px 0 8px; }
.doc p + p { margin-top: 16px; }
.doc pre {
  margin: 16px 0;
  padding: 16px 20px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
}
.doc code { background: var(--paper-2); padding: 0 4px; border: 1px solid var(--ink); font-size: 14px; }
.doc pre code { border: 0; padding: 0; background: none; }
.doc ul { margin: 12px 0; }
.doc ul li { padding-left: 16px; position: relative; margin-top: 8px; }
.doc ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--ink); }
.doc .tablewrap { overflow-x: auto; margin: 16px 0; }
.doc table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.doc th, .doc td { text-align: left; padding: 8px; border-bottom: 2px solid var(--ink); vertical-align: top; }
.doc th { font-weight: 600; }
.doc .toc { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; margin: 24px 0 0; }
.doc .toc a { text-decoration: underline; }

/* ---------- app ---------- */
.app { max-width: 1120px; margin: 0 auto; padding: 128px 24px 96px; min-height: calc(100svh - 96px); }
.app-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.app-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.app-head p { color: var(--mute); margin-top: 8px; max-width: 48ch; }
.state { border: 2px solid var(--ink); padding: 32px; max-width: 560px; background: var(--paper-2); }
.state h2 { font-size: 20px; margin-bottom: 12px; }
.state p { color: var(--mute); max-width: 48ch; }
.state .btn { margin-top: 24px; }
.state code { border: 1px solid var(--ink); padding: 0 4px; font-size: 14px; }
[hidden] { display: none !important; }

.panel { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; }
.tab-balance { border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 4px 4px 0 var(--ink); padding: 24px; }
.tab-balance .num { font-family: var(--display); font-size: 48px; line-height: 1; margin: 8px 0 4px; }
.tab-balance .num small { font-family: var(--body); font-size: 14px; }
.tab-balance .row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--mute); }
.tab-balance form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 16px; }
.tab-balance form + form { margin-top: 8px; }
.field { display: grid; gap: 4px; font-size: 13px; }
.field span { color: var(--mute); }
input[type=text], input[type=number], input[type=datetime-local] {
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  background: var(--paper);
  width: 100%;
}
input:disabled { color: var(--mute); }
.note { font-size: 13px; color: var(--mute); margin-top: 8px; min-height: 20px; }
.note.err { color: var(--stamp); }

.keys h2, .ledger h2, .spend h2 { font-size: 20px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.h2-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--body); font-size: 13px; }
.table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: 14px; }
.table th, .table td { text-align: left; padding: 12px 8px; border-bottom: 2px solid var(--ink); vertical-align: top; }
.table th { font-weight: 400; color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.table td.r, .table th.r { text-align: right; }
.table .btn { min-height: 32px; padding: 4px 8px; font-size: 11px; box-shadow: 2px 2px 0 var(--ink); }
.empty { padding: 32px 0; color: var(--mute); }
.newkey { border: 2px solid var(--ink); background: var(--paper-2); padding: 24px; margin-top: 24px; display: grid; gap: 16px; }
.newkey .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.newkey .secret { border: 2px solid var(--stamp); padding: 16px; font-size: 13px; word-break: break-all; }
.newkey .secret b { display: block; color: var(--stamp); margin-bottom: 8px; }
.ledger, .keys { margin-top: 48px; }

/* status line and the get-started list */
.status-line { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--mute); margin: -24px 0 32px; }
.status-line .btn-ghost { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; min-height: 0; padding: 0; color: var(--ink); }
.start { border-top: 2px solid var(--ink); margin-bottom: 48px; }
.start li { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: baseline; padding: 12px 8px; border-bottom: 2px solid var(--ink); font-size: 15px; }
.start .n { font-size: 12px; letter-spacing: .08em; }
.start .s { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.start li.done .t { color: var(--mute); text-decoration: line-through; }
.start li.done .s { color: var(--ink); }

/* ruled key-value lists */
.kv { display: grid; margin: 16px 0; border-top: 1px solid var(--ink); }
.kv div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--ink); font-size: 13px; }
.kv dt { color: var(--mute); flex-shrink: 0; }
.kv dd { text-align: right; min-width: 0; }
.kv dd.mono { font-size: 12px; overflow-wrap: anywhere; }
.kv .btn-ghost { min-height: 0; padding: 0 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.tab-balance .kv { margin: 16px 0 8px; }
.field span .max { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; text-decoration: underline; margin-left: 8px; }

/* meters: ink fill on a paper track */
.meter { display: inline-block; vertical-align: middle; width: 72px; height: 8px; border: 1px solid var(--ink); background: var(--paper); }
.meter span { display: block; height: 100%; background: var(--ink); }
.today { display: block; font-size: 12px; color: var(--mute); margin-bottom: 4px; white-space: nowrap; }
.status { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.status.expired, .status.revoked { color: var(--mute); }
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; border: 1px solid var(--ink); margin-right: 6px; vertical-align: 1px; background: var(--ink); }
.status.expired::before { background: repeating-linear-gradient(45deg, var(--ink) 0 1px, var(--paper) 1px 3px); }
.status.revoked::before { background: var(--paper); }

/* keys table rows open into a drawer */
.keyrow { cursor: pointer; }
.keyrow:hover td, .keyrow.open td { background: var(--paper-2); }
.keyrow.revoked td, .keyrow.expired td { color: var(--mute); }
.keyname { display: block; font-weight: 600; }
.keyaddr { display: block; font-size: 12px; color: var(--mute); }
.drawer > td { padding: 0 0 24px; background: var(--paper-2); border-bottom: 2px solid var(--ink); }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; padding: 24px 16px 0; }
.drawer-grid h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 400; color: var(--mute); margin: 0 0 4px; }
.drawer-grid h4 + form, .drawer-grid form + h4 { margin-top: 16px; }
.drawer-grid form.editform { display: grid; gap: 12px; }
.drawer-grid form.editform .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.drawer-grid .labelform, .drawer-grid .payeeform { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.drawer-wide { grid-column: 1 / -1; }
.payeelist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.payeelist .btn-ghost { min-height: 0; padding: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; flex-shrink: 0; }
.hint { font-size: 13px; color: var(--mute); max-width: 60ch; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.toggle input { width: 16px; height: 16px; accent-color: var(--ink); }
.choice { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.choice label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.choice input { accent-color: var(--ink); }
.newkey-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.newkey h3, .handoff h3, .payees h3 { font-size: 16px; font-weight: 600; }
.newkey .secret .btn-ghost { display: block; margin-top: 8px; padding: 0; min-height: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.handoff { border: 2px solid var(--ink); background: var(--paper-2); padding: 24px; margin-top: 24px; display: grid; gap: 12px; }
.handoff .sub { margin-top: 0; }
.tabs { display: flex; border-bottom: 2px solid var(--ink); }
.tabs button { padding: 8px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.handoff pre, .handoff-inline { border: 2px solid var(--ink); background: var(--paper); padding: 16px; overflow-x: auto; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.small { font-size: 13px; }
.mono { font-size: 12px; overflow-wrap: anywhere; }
.keylink { text-decoration: underline; padding: 0; text-align: left; }

/* spend: one ink series on paper, tooltip on hover, the table below is the data view */
.spend { min-width: 0; }
.filters { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--mute); margin-bottom: 12px; }
.filters select, #a-key { min-height: 32px; padding: 4px 8px; border: 2px solid var(--ink); background: var(--paper); font-size: 12px; }
.filters button { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px; border: 2px solid var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.filters button + button { margin-left: -2px; }
.chart { position: relative; border: 2px solid var(--ink); background: var(--paper-2); padding: 8px 8px 4px; }
.chart svg { width: 100%; height: 180px; display: block; }
.chart .axis { stroke: var(--ink); stroke-width: 2; }
.chart .fill { fill: var(--ink); }
.chart .hit { fill: transparent; }
.chart .bar:hover .fill { fill: var(--mute); }
.chart .lbl { font-family: var(--body); font-size: 11px; fill: var(--mute); }
.chart .lbl.empty { font-size: 13px; }
.chart figcaption { font-size: 12px; color: var(--mute); padding: 4px 0 0; }
.chart-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font-size: 12px; padding: 4px 8px; white-space: nowrap; z-index: 2; }
.spend-grid { display: grid; gap: 24px; margin-top: 16px; }
.spend-grid .kv { margin: 0; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.spend-grid .kv div:nth-child(-n+2) { border-top: 0; }
.spend-grid .kv { border-top: 0; }
.spend-grid .kv div:nth-child(1), .spend-grid .kv div:nth-child(2) { border-top: 1px solid var(--ink); }
.table.small td:first-child, .table.small td.r, .table.small td:last-child { white-space: nowrap; }
.payees h3 { margin-bottom: 8px; }
.table.small { font-size: 13px; }
.table.small th, .table.small td { padding: 8px 4px; }
.empty.small { padding: 16px 0; }
.ledger .detail { max-width: 36ch; overflow-wrap: anywhere; }
.ledger tr.refused .ev { color: var(--stamp); }
.ledger .ev { white-space: nowrap; }
#more { margin-top: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hero { padding-right: 24px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; padding-left: 0; }
  .hero-art { justify-items: end; margin-right: -24px; }
  .hero-art .counter { max-width: 420px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-head { position: static; }
  .cases li { grid-template-columns: 40px 1fr; }
  .cases .d { grid-column: 2; }
  .cards { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr; }
  .drawer-grid { grid-template-columns: 1fr; }
  .spend-grid .kv { grid-template-columns: 1fr; }
  .spend-grid .kv div:nth-child(2) { border-top: 0; }
  .demo { grid-template-columns: 1fr; }
  .demo-steps { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 2px solid var(--ink); }
  .demo-step { border-bottom: 0; border-right: 2px solid var(--ink); white-space: nowrap; grid-template-columns: 24px 1fr; padding: 12px; }
  .qa div { grid-template-columns: 1fr; gap: 8px; }
  .section { padding: 96px 20px; }
  .app { padding-top: 112px; }
  .facts th { width: 140px; }
}
@media (max-width: 680px) {
  .nav { left: 16px; right: 16px; transform: translate(0, -24px); padding-left: 12px; }
  @keyframes nav-in { to { opacity: 1; transform: translate(0, 0); } }
  .brand { margin-right: auto; }
  .links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    padding: 8px;
  }
  .links a { font-size: 13px; padding: 12px 16px; }
  .nav.open .links { display: flex; }
  .menu { display: block; }
  .nav .btn { display: none; }
  .hero { padding: 112px 20px 64px; }
  .hero-art { margin-right: -20px; }
  .hero-art .counter { max-width: 320px; }
  .tab-balance form { grid-template-columns: 1fr; }
  .table thead { display: none; }
  .table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 0; border-bottom: 2px solid var(--ink); }
  .table td { border: 0; padding: 0; }
  .table td.r { text-align: left; }
  .drawer > td, .table tr.drawer { display: block; grid-template-columns: 1fr; padding: 0 0 16px; }
  .drawer-grid { padding: 16px 8px 0; }
  .start li { grid-template-columns: 32px 1fr; }
  .start .s { grid-column: 2; }
  .status-line { margin-top: -8px; }
  .doc { padding-top: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav, .rv, h1 .w span { animation: none; opacity: 1; transform: none; }
  .nav { transform: translateX(-50%); }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 680px) {
  .nav { transform: none; }
}