/* Docs page, on top of the app's tokens (app.css). */
html{scroll-behavior:smooth;scroll-padding-top:84px}
body.docs{height:auto;min-height:100%}
.docs a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
.docs a.btn{text-decoration:none}
.docs a.btn-primary{color:var(--on-ink)}
.docs a.btn-primary:hover{color:#fff}
.docs a.brand{text-decoration:none}
.docs code{font:400 12px var(--mono);background:var(--surface-2);padding:2px 6px;border-radius:6px}
.docs pre code{background:none;padding:0;border-radius:0}

/* ---------- top bar ---------- */
.d-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;height:64px;padding:0 clamp(16px,3vw,32px);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.d-top .brand{text-decoration:none}
.d-tag{font:400 10.5px var(--mono);color:var(--muted);margin-left:4px;padding:3px 7px;border:1px solid var(--line);border-radius:6px}
.d-links{display:flex;gap:22px;margin:0 auto}
.d-links a{font-size:14px;color:var(--ink-2);text-decoration:none}
.d-links a:hover{color:var(--ink)}
.d-actions{display:flex;align-items:center;gap:8px}
.d-actions .btn{height:36px;text-decoration:none}

/* ---------- layout ---------- */
.d-shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,5vw,72px);max-width:1180px;margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.d-toc{position:sticky;top:64px;align-self:start;height:calc(100vh - 64px);overflow-y:auto;padding:28px 0;display:flex;flex-direction:column;gap:14px}
.d-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted)}
.d-search svg{width:15px;height:15px}
.d-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:13.5px;color:var(--ink)}
.d-toc nav{display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--line)}
.d-toc nav a{font-size:13.5px;color:var(--ink-2);text-decoration:none;padding:6px 0 6px 14px;margin-left:-1px;border-left:1px solid transparent;transition:color .15s,border-color .15s}
.d-toc nav a:hover{color:var(--ink)}
.d-toc nav a.is-active{color:var(--ink);border-left-color:var(--accent);font-weight:500}
.d-toc-foot{margin:auto 0 0;font-size:12.5px;color:var(--muted)}
.d-main{min-width:0;max-width:780px;padding:40px 0 96px}
.d-main section{padding:44px 0;border-top:1px solid var(--line)}
.d-main section.d-hero{border-top:0;padding-top:28px}
.d-main h2{margin:10px 0 14px;font:500 clamp(30px,3.6vw,44px)/1.05 var(--display);letter-spacing:-.04em;text-wrap:balance}
.d-main h3{margin:30px 0 12px;font:600 19px var(--display);letter-spacing:-.02em}
.d-main h4{margin:0 0 6px;font:600 16px var(--display);letter-spacing:-.02em}
.d-main p{margin:0 0 14px;color:var(--ink-2);line-height:1.65}
.d-main p b,.d-main li b{color:var(--ink);font-weight:500}

/* ---------- hero ---------- */
.d-hero h1{margin:14px 0 18px;font:500 clamp(44px,6.4vw,84px)/.98 var(--display);letter-spacing:-.05em;text-wrap:balance}
.d-hero h1 em{font-style:normal;color:var(--accent)}
.d-lead{font-size:18px!important;max-width:60ch}
.d-live{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:30px 0 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.d-live-item{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-left:1px solid var(--line)}
.d-live-item:first-child{border-left:0}
.d-live-k{font:400 10.5px var(--mono);color:var(--muted)}
.d-live-v{font:500 30px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.d-note{display:flex;align-items:center;gap:8px;font:400 11px var(--mono)!important;color:var(--muted)!important}
.d-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0}
.d-dot.on{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent);animation:beat 2s ease-in-out infinite}
@keyframes beat{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--good) 0%,transparent)}}

/* ---------- tables, pills ---------- */
.d-table{overflow-x:auto;margin:6px 0 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.d-table table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.d-table th{text-align:left;font:400 10.5px var(--mono);color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line)}
.d-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.d-table tr:last-child td{border-bottom:0}
.pill{display:inline-flex;align-items:center;gap:6px;font:400 10.5px var(--mono);padding:4px 9px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--good)}
.pill.wip{background:var(--accent-soft);color:var(--accent)}
.pill.no{background:var(--surface-2);color:var(--ink-2)}

/* ---------- steps and code ---------- */
.d-steps{margin:0 0 18px;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:12px}
.d-steps li{counter-increment:s;position:relative;padding-left:40px;color:var(--ink-2);line-height:1.6}
.d-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:4px;font:400 11px var(--mono);color:var(--accent)}
.d-code{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;margin:6px 0 18px}
.d-code-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 12px;border-bottom:1px solid var(--line)}
.d-tabs{display:flex;gap:2px}
.d-tabs button{border:0;background:transparent;border-radius:8px;padding:5px 10px;font:400 11px var(--mono);color:var(--muted);cursor:pointer}
.d-tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--ink)}
.d-lang{font:400 11px var(--mono);color:var(--muted)}
.d-copy{display:flex;align-items:center;gap:6px;border:0;background:transparent;border-radius:8px;padding:5px 9px;font:500 12px var(--sans);color:var(--ink-2);cursor:pointer}
.d-copy svg{width:13px;height:13px}
.d-copy:hover{background:var(--hover);color:var(--ink)}
.d-code pre{margin:0;padding:16px 18px;overflow-x:auto;font:400 12.5px/1.7 var(--mono);color:var(--ink)}

/* ---------- architecture diagram ---------- */
.d-flow{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px;margin:6px 0 18px;overflow-x:auto}
.d-flow svg{display:block;width:100%;min-width:560px;height:auto}
.f-node{cursor:pointer;outline:none}
.f-node rect{fill:var(--surface);stroke:var(--line-2);stroke-width:1.2;transition:stroke .2s,fill .2s}
.f-node:hover rect,.f-node:focus-visible rect{stroke:var(--ink)}
.f-node.is-on rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
.f-t{font:600 17px var(--display);fill:var(--ink);text-anchor:middle}
.f-s{font:400 10.5px var(--mono);fill:var(--muted);text-anchor:middle}
.f-l{font:400 10.5px var(--mono);fill:var(--muted);text-anchor:middle}
.f-line{fill:none;stroke:var(--line-2);stroke-width:1.4}
.f-back{stroke-dasharray:4 4}
.f-arrow{fill:var(--ink-2)}
.d-flow-card{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--surface-2)}
.d-flow-card h4{margin:6px 0 4px}
.d-flow-card p{margin:0!important}
.d-timeline{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;color:var(--ink-2);line-height:1.6}
.d-timeline li::marker{font:400 11px var(--mono);color:var(--accent)}

/* ---------- playground ---------- */
.d-play{border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.d-play-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.d-play-key code{font:400 11.5px var(--mono)}
.d-play-key input{flex:1;min-width:200px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);font:400 12px var(--mono);outline:none}
.d-play-key input:focus{border-color:var(--ink)}
.d-play textarea{width:100%;resize:vertical;min-height:70px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font:15px/1.5 var(--sans);color:var(--ink);outline:none}
.d-play textarea:focus{border-color:var(--line-2)}
.d-play-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.d-play-conns{display:flex;gap:6px;flex-wrap:wrap}
.d-chip{display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.d-chip input{accent-color:var(--accent);margin:0}
.d-chip:has(input:checked){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.d-play-out{margin:0;min-height:90px;max-height:360px;overflow:auto;padding:14px;border-radius:12px;background:var(--surface-2);font:400 12.5px/1.7 var(--mono);white-space:pre-wrap;color:var(--ink)}
.d-play-meta{margin:0!important;font:400 10.5px var(--mono)!important;color:var(--muted)!important;min-height:1em}

/* ---------- endpoints, faq ---------- */
.d-endpoints,.d-faq{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;margin-bottom:16px}
.d-endpoints details,.d-faq details{border-top:1px solid var(--line)}
.d-endpoints details:first-child,.d-faq details:first-child{border-top:0}
.d-endpoints summary,.d-faq summary{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;list-style:none;font-size:14.5px}
.d-endpoints summary::-webkit-details-marker,.d-faq summary::-webkit-details-marker{display:none}
.d-endpoints summary::after,.d-faq summary::after{content:"+";margin-left:auto;font:400 16px var(--mono);color:var(--muted);transition:transform .2s}
.d-endpoints details[open] summary::after,.d-faq details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.d-endpoints summary span:not(.m){color:var(--muted);font-size:13px}
.d-endpoints details p,.d-faq details p{margin:0!important;padding:0 16px 14px}
.d-faq summary{font:500 16px var(--display);letter-spacing:-.01em}
.m{font:500 10px var(--mono);padding:3px 7px;border-radius:6px;min-width:42px;text-align:center}
.m.get{background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--good)}
.m.post{background:var(--accent-soft);color:var(--accent)}

/* ---------- cards ---------- */
.d-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 16px}
.d-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.d-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px;display:flex;flex-direction:column;gap:4px;transition:border-color .2s,transform .2s var(--ease)}
.d-card p{margin:0!important;font-size:14px}
.d-card-icon{width:34px;height:34px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;margin-bottom:10px}
.d-card-icon svg{width:17px;height:17px}
.d-link{text-decoration:none!important}
.d-link:hover{border-color:var(--ink);transform:translateY(-2px)}
.d-link:hover .d-card-icon{background:var(--accent);color:#fff}

/* ---------- calculators, report ---------- */
.d-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;margin:6px 0 18px}
.d-calc-in{display:flex;flex-direction:column;gap:12px;padding:18px;border-right:1px solid var(--line)}
.d-calc-in label{display:flex;flex-direction:column;gap:6px;font:400 10.5px var(--mono);color:var(--muted)}
.d-calc-in input{height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font:500 15px var(--sans);color:var(--ink);outline:none}
.d-calc-in input:focus{border-color:var(--ink)}
.d-calc-out{display:flex;flex-direction:column;gap:0;background:var(--surface-2)}
.d-calc-out div{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-top:1px solid var(--line)}
.d-calc-out div:first-child{border-top:0}
.d-calc-out b{font:500 22px/1.15 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.d-report{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 14px}
.d-report div{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.d-report b{font:500 28px/1.1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.d-report small{font-size:12.5px;color:var(--muted)}
.d-ratio{margin-bottom:16px}
.d-ratio-bar{height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin-bottom:8px}
.d-ratio-bar span{display:block;height:100%;width:0;background:var(--good);transition:width .6s var(--ease)}
.d-ratio-bar span.bad{background:var(--bad)}

/* ---------- wallets, privacy ---------- */
.d-siws{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;margin:6px 0 16px}
.d-siws-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.d-siws pre{margin:0;padding:16px 18px;overflow-x:auto;font:400 12px/1.75 var(--mono);white-space:pre-wrap;word-break:break-word}
.d-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 16px}
.d-box{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px}
.d-box ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2);font-size:14px;line-height:1.55}
.d-box li::marker{color:var(--accent)}
.d-keys{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);margin:6px 0 16px;overflow:hidden}
.d-keystep{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:14px 18px;border-top:1px solid var(--line);color:var(--ink-2);line-height:1.6}
.d-keystep:first-child{border-top:0}
.d-num{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font:500 11px var(--mono)}
.d-callout{padding:14px 16px;border-radius:14px;background:var(--accent-soft);color:var(--ink)!important}

/* ---------- footer ---------- */
.d-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--line)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .d-shell{grid-template-columns:1fr}
  .d-toc{display:none}
  .d-links{display:none}
  .d-top{justify-content:space-between}
}
@media (max-width:680px){
  .d-live,.d-report,.d-grid2,.d-cards,.d-cards-3{grid-template-columns:1fr 1fr}
  .d-live{grid-template-columns:1fr 1fr}
  .d-live-item:nth-child(3){border-left:0}
  .d-live-item:nth-child(n+3){border-top:1px solid var(--line)}
  .d-calc{grid-template-columns:1fr}
  .d-calc-in{border-right:0;border-bottom:1px solid var(--line)}
  .d-cards,.d-cards-3,.d-grid2{grid-template-columns:1fr}
}

/* ---------- phones: no sideways scrolling ---------- */
.d-flow svg.f-vertical{display:none}
@media (max-width:680px){
  .d-flow{overflow:visible;padding:14px}
  .d-flow svg.f-horizontal{display:none}
  .d-flow svg.f-vertical{display:block;min-width:0;max-width:300px;margin:0 auto}
  .d-table{overflow:visible}
  .d-table table{min-width:0}
  .d-table thead{display:none}
  .d-table tr{display:block;padding:12px 14px;border-bottom:1px solid var(--line)}
  .d-table tr:last-child{border-bottom:0}
  .d-table td{display:block;padding:3px 0;border:0;overflow-wrap:anywhere}
  .d-table td::before{content:attr(data-label);display:block;font:400 9.5px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
}