@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(inter.woff2) format('woff2'); }
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fira-code.woff2) format('woff2'); }
:root { --bg: #050505; --card: #0a0a0a; --raise: #101011; --hover: #121214; --line: #1f1f1f; --line2: #2e2e31; --ink: #fff; --text: #c8c8c8; --mute: #8a8a8a; --dim: #5e5e62; --purple: #B47FFF; --magenta: #d150ec; --tint: rgba(180,127,255,0.1); --ok: #28c840; --deny: #ff5f57; --warn: #febc2e; --cp: #febc2e; --cm: #28c840; --sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --gutter: clamp(16px, 4vw, 40px); --ease: cubic-bezier(.16,1,.3,1); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { min-height: 100vh; display: flex; flex-direction: column; font: 14px/1.55 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; background-image: linear-gradient(rgba(180,127,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(180,127,255,0.035) 1px, transparent 1px); background-size: 40px 40px; }
::selection { background: rgba(180,127,255,0.35); }
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
a { color: var(--ink); text-decoration: none; transition: color .15s; }
a:hover { color: var(--purple); }
h1, h2 { margin: 0; }
code, pre, .mono { font-family: var(--mono); }
main { flex: 1; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px var(--gutter) 56px; display: flex; flex-direction: column; gap: 24px; animation: rise .4s var(--ease) both; }
#home, #anchors, #view { display: flex; flex-direction: column; gap: 24px; }
.panel { scroll-margin-top: 76px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* bar */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(5,5,5,0.82); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(180,127,255,0.35) 50%, transparent); opacity: 0; transition: opacity .3s; pointer-events: none; }
.bar.lifted { box-shadow: 0 10px 30px -12px rgba(0,0,0,0.9); }
.bar.lifted::after { opacity: 1; }
.bar-in { max-width: 1200px; margin: 0 auto; height: 60px; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; }
.mark { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: -0.025em; white-space: nowrap; }
.mark:hover { color: var(--ink); }
.mark em { display: inline-flex; align-items: center; gap: 11px; margin-left: 2px; font-style: normal; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: rgba(255,255,255,0.58); transition: color .15s; }
.mark em::before { content: ''; width: 1px; height: 16px; background: rgba(255,255,255,0.2); }
.mark:hover em { color: rgba(255,255,255,0.85); }
.logo { display: inline-block; flex-shrink: 0; width: 22px; height: 22px; background: url(logo.png) center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(180,127,255,0.7)); }
.logo.sm { width: 14px; height: 14px; filter: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { position: relative; display: flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid transparent; font: 500 13.5px var(--sans); letter-spacing: -0.005em; color: var(--mute); transition: color .15s, background .15s, border-color .15s; }
.nav a:hover { color: var(--ink); background: rgba(255,255,255,0.04); border-color: var(--line); }
.nav a.on { color: var(--ink); background: var(--tint); border-color: rgba(180,127,255,0.32); box-shadow: 0 0 18px -6px rgba(180,127,255,0.45); }
.netpick { position: relative; margin-left: auto; }
.netbtn { display: inline-flex; align-items: center; gap: 9px; height: 34px; min-width: 182px; padding: 0 12px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); font: 500 13px var(--sans); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.netbtn:hover { border-color: #444; background: var(--raise); }
.netbtn[aria-expanded=true] { border-color: rgba(180,127,255,0.55); box-shadow: 0 0 0 3px rgba(180,127,255,0.12); }
#net-label { flex: 1; text-align: left; white-space: nowrap; }
.cl { flex: none; width: 16px; height: 16px; display: inline-block; object-fit: contain; vertical-align: middle; }
.cl.cardano { padding: 1px; background: #fff; border-radius: 50%; }
.cl.base { border-radius: 3px; }
.cl.xs { width: 12px; height: 12px; }
.cl.cardano.xs { padding: 0.5px; }
.logo-none { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--raise); border: 1px solid var(--line2); }
.cls { display: inline-flex; flex: none; }
.cls .cl + .cl { margin-left: -5px; box-shadow: 0 0 0 2px var(--card); }
.chev { width: 7px; height: 7px; margin: -3px 2px 0 0; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(45deg); transition: transform .2s var(--ease); }
.netbtn[aria-expanded=true] .chev { transform: translateY(3px) rotate(225deg); }
.netmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; margin: 0; padding: 6px; list-style: none; background: #0d0d0f; border: 1px solid var(--line2); box-shadow: 0 24px 60px -12px rgba(0,0,0,0.9); animation: drop .14s var(--ease); }
.netmenu li[role=option] { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 1px solid transparent; color: var(--text); font-size: 13px; cursor: pointer; }
.netmenu li[role=option] > span:not(.cls) { flex: 1; }
.netmenu li[role=option] small { font: 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.netmenu li.hot, .netmenu li[role=option]:hover { background: var(--tint); border-color: rgba(180,127,255,0.28); color: var(--ink); }
.netmenu li[aria-selected=true] { color: var(--ink); }
.netmenu li[aria-selected=true]::after { content: '✓'; color: var(--purple); font-size: 12px; }
.netmenu .grp { padding: 10px 10px 4px; font: 10.5px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--dim); }

/* search */
.search { position: relative; display: flex; align-items: center; height: 48px; border: 1px solid var(--line2); background: var(--card); transition: border-color .15s, box-shadow .15s; }
.search:hover { border-color: #444; }
.search:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(180,127,255,0.16), 0 0 30px -10px rgba(180,127,255,0.5); }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0 16px 0 44px; border: 0; background: transparent; color: var(--ink); font: 13.5px var(--mono); outline: none; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: #666; font-family: var(--sans); font-size: 14px; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.glass { position: absolute; left: 17px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border: 1.5px solid var(--mute); border-radius: 50%; }
.glass::after { content: ''; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 1.5px; background: var(--mute); transform: rotate(45deg); }
kbd { margin-right: 12px; padding: 1px 7px; border: 1px solid var(--line2); border-bottom-width: 2px; background: var(--raise); font: 11px/16px var(--mono); color: var(--mute); transition: opacity .15s; }
.search:focus-within > kbd { opacity: 0; }
.search { z-index: 15; }
.suggest { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #0d0d0f; border: 1px solid var(--line2); box-shadow: 0 24px 60px -12px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.5); max-height: 420px; overflow-y: auto; animation: drop .14s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }
.suggest .grp { padding: 10px 10px 6px; font: 10.5px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--dim); }
.suggest .grp:first-child { padding-top: 4px; }
.suggest [role=option] { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border: 1px solid transparent; color: var(--text); cursor: pointer; }
.suggest [role=option][aria-selected=true] { background: var(--tint); border-color: rgba(180,127,255,0.28); color: var(--ink); }
.suggest .kind { flex: none; width: 70px; font: 600 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.suggest .val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--mono); }
.suggest mark { background: none; color: var(--purple); font-weight: 600; }
.suggest .meta { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); }
.suggest .enter { flex: none; font: 11px var(--mono); color: var(--dim); opacity: 0; }
.suggest [aria-selected=true] .enter { opacity: 1; }
.suggest .hint { padding: 14px 10px; color: var(--mute); font-size: 13px; }
.suggest .hint code { color: var(--text); }
.suggest .foot-k { display: flex; gap: 16px; margin: 6px -6px -6px; padding: 8px 16px; border-top: 1px solid var(--line); font: 11px var(--mono); color: var(--dim); }
.suggest .foot-k kbd { margin: 0 4px 0 0; padding: 0 5px; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; padding: 16px 18px 15px; background: var(--card); }
.tile .k { display: flex; align-items: center; gap: 6px; font: 10.5px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.tile .v { margin-top: 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .s { margin-top: 2px; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile > div { min-width: 0; }
.spark { flex: none; width: 76px; height: 30px; }
.spark rect { fill: rgba(180,127,255,0.35); }
.spark rect.hi { fill: var(--purple); }
.tile.accent .v { background-image: linear-gradient(90deg, #fff 40%, var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.i { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--line2); border-radius: 50%; font: 600 9px/1 var(--sans); letter-spacing: 0; color: var(--mute); cursor: help; text-transform: none; transition: color .15s, border-color .15s; }
.i:hover, .i:focus-visible { color: var(--ink); border-color: var(--purple); }

/* panels and tables */
.panel { background: var(--card); border: 1px solid var(--line); min-width: 0; }
.panel.pad { padding: 20px 22px; }
.panel.pad h2 { margin-bottom: 14px; }
.panel h2 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.panel p { margin: 0 0 12px; color: var(--text); }
.panel-h { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-h .sub { font-size: 12.5px; color: var(--mute); }
.more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 11px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--mute); }
.more::after { content: '→'; transition: transform .2s var(--ease); }
.more:hover::after { transform: translateX(3px); }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(40,200,64,0.15), 0 0 10px var(--ok); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.filters { display: inline-flex; height: 28px; border: 1px solid var(--line2); background: var(--bg); }
.filters button { padding: 0 11px; border: 0; background: transparent; color: var(--mute); font: 500 12px var(--sans); cursor: pointer; transition: color .15s, background .15s; }
.filters button + button { border-left: 1px solid var(--line2); }
.filters button:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.filters button.on { color: var(--ink); background: var(--tint); }
.scroll { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
.grid th { padding: 10px 18px; text-align: left; font: 10.5px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--mute); font-weight: 400; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid td { height: 50px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--text); white-space: nowrap; font-size: 13.5px; }
.grid tbody tr { transition: background .12s; }
.grid tbody tr:hover { background: rgba(180,127,255,0.055); }
.grid tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--purple); }
.grid tbody tr[data-href] { cursor: pointer; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid td.mono { font-size: 12.5px; }
.grid td.mono a { color: var(--purple); }
.grid td.mono a:hover { color: var(--ink); }
.grid .r { text-align: right; }
.panel.pad > .scroll { margin: 0 -22px -20px; }
tr.gap td { color: var(--warn); }
tr.none td, tr.wait td { color: var(--dim); }
.skel { height: 50px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.035), transparent) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { padding: 40px 18px; text-align: center; color: var(--mute); }

/* result, network, verification */
.res { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.res::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.res.denied::before { background: var(--deny); box-shadow: 0 0 8px var(--deny); }
.res.alarm::before { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.res small { font-weight: 400; color: var(--mute); font-size: 12.5px; }
.net { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/18px var(--sans); color: var(--ink); white-space: nowrap; cursor: help; }
.net.plain { font-size: 12px; font-weight: 400; color: var(--mute); }
.net.plain .cl { display: none; }
.where { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rail { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink); cursor: help; }
.rail .ic { color: var(--mute); }
.rail.hydra .ic { color: var(--purple); }
.rail.x402 .ic, .rail.evm .ic { color: #5b8cff; }
.stack { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.stack .sub { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mute); }
.stack .sub a { color: var(--purple); font-size: 11.5px; }
.stack .sub a:hover { color: var(--ink); }
.state { font-weight: 500; color: var(--ink); cursor: help; }
.state.t-live { color: #d9c2ff; }
.state.t-off { font-weight: 400; color: var(--mute); }
.stack .sub .mono { font-size: 11.5px; }
.tile.warn .s { color: var(--warn); }


details.panel.tech { border: 1px solid var(--line); }


.proof { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border: 1px solid var(--line2); border-radius: 4px; font: 500 12px var(--sans); white-space: nowrap; color: var(--mute); cursor: help; }
.proof .ic { width: 14px; height: 14px; }
.proof.anchored { color: #8ff29c; border-color: rgba(40,200,64,0.4); background: rgba(40,200,64,0.08); }
.proof.signed { color: #dcc6ff; border-color: rgba(180,127,255,0.4); background: var(--tint); }
.proof.pending { border-style: dashed; }
.proof.failed { color: var(--deny); border-color: rgba(255,95,87,0.5); background: rgba(255,95,87,0.08); }
.steps { display: flex; align-items: stretch; gap: 0; flex: 1; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.steps li { position: relative; display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 240px; padding-right: 24px; color: var(--mute); }
.steps li + li::before { content: ''; position: absolute; left: -22px; top: 16px; width: 14px; height: 1px; background: var(--line2); }
.steps .dotic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px dashed var(--line2); border-radius: 50%; color: var(--dim); }
.steps .dotic .ic { width: 16px; height: 16px; }
.steps .txt { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.steps b { font-weight: 600; font-size: 13.5px; color: var(--text); }
.steps small { font-size: 12.5px; color: var(--mute); }
.steps li.on.signed .dotic { border-style: solid; border-color: rgba(180,127,255,0.55); background: var(--tint); color: var(--purple); }
.steps li.on.anchored .dotic { border-style: solid; border-color: rgba(40,200,64,0.55); background: rgba(40,200,64,0.08); color: var(--ok); }
.steps li.on b { color: var(--ink); }
.steps li.failed .dotic { border-style: solid; border-color: rgba(255,95,87,0.55); color: var(--deny); }
.v-logo { display: inline-flex; align-items: center; gap: 9px; }
.v-logo .cl { width: 20px; height: 20px; }
.legend-row .asset.keyed { padding-bottom: 3px; border-bottom: 2px solid transparent; }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); counter-reset: step; }
.flow li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 16px 18px; background: var(--card); counter-increment: step; }
.flow li .ic { grid-row: span 2; width: 34px; height: 34px; padding: 8px; border: 1px solid var(--line2); border-radius: 50%; color: var(--mute); }
.flow li[data-icon=signed] .ic { color: var(--purple); border-color: rgba(180,127,255,0.4); background: var(--tint); }
.flow li[data-icon=anchored] .ic { color: var(--ok); border-color: rgba(40,200,64,0.4); background: rgba(40,200,64,0.07); }
.flow li strong { font-weight: 600; font-size: 13.5px; }
.flow li strong::before { content: counter(step) ' · '; font: 11px var(--mono); color: var(--dim); }
.flow li span { font-size: 12.5px; color: var(--mute); }
.flow li + li::before { content: ''; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-top: 1px solid var(--line2); border-right: 1px solid var(--line2); background: var(--card); transform: rotate(45deg); z-index: 1; }
.days { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; padding: 18px 18px 12px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--dim); cursor: help; }
a.day { cursor: pointer; }
.day i { width: 100%; height: 34px; border-radius: 3px; background: var(--raise); border: 1px solid var(--line); transition: transform .15s var(--ease), box-shadow .15s; }
.day small { font: 10px var(--mono); white-space: nowrap; }
.day.ok i { background: linear-gradient(180deg, rgba(40,200,64,0.55), rgba(40,200,64,0.22)); border-color: rgba(40,200,64,0.55); }
.day.miss i { background: rgba(254,188,46,0.12); border-color: rgba(254,188,46,0.45); }
.day.due i { border: 1px dashed rgba(180,127,255,0.6); background: var(--tint); }
.day:hover i { transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(0,0,0,0.9); }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); }
.lg i { width: 10px; height: 10px; border-radius: 2px; background: var(--raise); border: 1px solid var(--line2); }
.lg.ok i { background: rgba(40,200,64,0.5); border-color: rgba(40,200,64,0.6); }
.lg.miss i { background: rgba(254,188,46,0.15); border-color: rgba(254,188,46,0.5); }
.lg.due i { border: 1px dashed rgba(180,127,255,0.6); }
.lg.sig i { background: var(--purple); border-color: var(--purple); }
.lg.held i { background: #3ad6b0; border-color: #3ad6b0; }
.lg b { color: var(--ink); font-weight: 600; }
.panel-f { padding: 10px 18px; border-top: 1px solid var(--line); }
.panel-f:empty { display: none; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.pager .range { font-size: 12.5px; color: var(--mute); }
.pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pg { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; font: 500 12.5px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; transition: color .15s, background .15s, border-color .15s; }
a.pg:hover { color: var(--ink); background: rgba(255,255,255,0.04); border-color: var(--line2); }
.pg.on { color: var(--ink); background: var(--tint); border-color: rgba(180,127,255,0.45); }
.pg.step { padding: 0 12px; border-color: var(--line2); }
.pg.off { color: var(--dim); border-color: var(--line); }
.pg.gap { min-width: 20px; color: var(--dim); }

/* tooltips */
.tip { position: fixed; left: 0; top: 0; z-index: 60; max-width: 300px; padding: 8px 11px; background: #141416; border: 1px solid var(--line2); color: var(--ink); font: 400 12.5px/1.5 var(--sans); letter-spacing: 0; text-transform: none; white-space: normal; text-align: left; pointer-events: none; box-shadow: 0 16px 40px -8px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.4); opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s var(--ease); }
.tip.show { opacity: 1; transform: none; }
.tip.below { transform: translateY(-3px); }
.tip.below.show { transform: none; }
.tip::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: inherit; border: solid var(--line2); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.tip.below::after { bottom: auto; top: -5px; border-width: 1px 0 0 1px; }
.tip b { display: block; margin-bottom: 4px; font: 500 11px var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--mute); }
.tip .row { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.tip .row i { width: 10px; height: 2px; flex: none; background: currentColor; }
.tip .row span { flex: 1; color: var(--text); }
.tip .row em { font: 600 12.5px var(--mono); font-style: normal; color: var(--ink); }

/* detail pages */
.crumbs { font: 11px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--mute); }
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 8px; color: var(--dim); }
.title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.title h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -1px; }
.title .id { font: 13px var(--mono); color: var(--text); overflow-wrap: anywhere; }
.lede { margin: -12px 0 0; color: var(--text); max-width: 680px; }
.proofbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--line2); }
.proofbar.anchored { border-left-color: var(--ok); }
.proofbar.signed { border-left-color: var(--purple); }
.proofbar.failed { border-left-color: var(--deny); }
.proofbar p { margin: 0; flex: 1; min-width: 240px; font-size: 13px; color: var(--mute); }
.proofbar p b { color: var(--text); font-weight: 500; }
.kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 0; }
.kv dt, .kv dd { min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
.kv dt { display: flex; align-items: center; gap: 7px; font: 10.5px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--mute); }
.kv dd { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.panel > .kv { padding: 0 18px; }
.kv dd a { color: var(--purple); }
.kv dd a:hover { color: var(--ink); }
.muted { color: var(--mute); }
.go { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; border: 1px solid var(--line2); color: var(--mute); font-size: 12px; transition: color .15s, border-color .15s, background .15s; }
.go:hover { color: var(--purple); border-color: var(--purple); background: var(--tint); }
.copy { padding: 2px 8px; border: 1px solid var(--line2); background: transparent; color: var(--mute); font: 500 10.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; cursor: pointer; transition: color .15s, border-color .15s; }
.copy:hover { color: var(--ink); border-color: #555; }
.copy.done { color: var(--ok); border-color: rgba(40,200,64,0.5); }
details.tech { border-top: 1px solid var(--line); }
details.tech summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; cursor: pointer; list-style: none; font: 11px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--mute); }
details.tech summary::-webkit-details-marker { display: none; }
details.tech summary::before { content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); }
details.tech[open] summary::before { transform: rotate(45deg); }
details.tech summary:hover { color: var(--ink); }
details.tech .kv { padding: 0 18px; grid-template-columns: 150px minmax(0, 1fr); }
details.tech .kv dd { font: 12px var(--mono); color: var(--text); }
details.tech pre { margin: 6px 18px 18px; }
.notice { padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--warn); color: var(--text); }
pre { margin: 0 0 14px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); overflow-x: auto; font-size: 12.5px; color: var(--text); }
.links { display: flex; gap: 20px; flex-wrap: wrap; font: 12px var(--mono); }
.links a { color: var(--purple); }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px; border: 1px solid var(--line2); font: 11px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mute); }
.badge.on { color: var(--ink); border-color: rgba(40,200,64,0.4); background: rgba(40,200,64,0.06); }
.badge.on::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.badge.dry-run::before { background: var(--warn); }
.badge.net-badge::before { display: none; }
.legend { margin-left: auto; font: 400 12px var(--sans); color: var(--mute); }
.seal-mark { display: inline-block; padding: 1px 7px; margin: 0 4px 0 10px; border: 1px solid var(--line2); font: 10px/16px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); font-style: normal; }
td .seal-mark { margin-left: 0; }
.seal-mark.on { border-color: rgba(40,200,64,0.5); color: var(--ok); }
.anchor-note { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text); }
.anchor-note::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.anchor-note.on::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.anchor-note a { color: var(--purple); }
.button { display: inline-flex; margin-top: 16px; padding: 12px 22px; background: linear-gradient(90deg, var(--purple), var(--magenta)); color: #fff; font: 500 13px var(--mono); box-shadow: 0 0 24px rgba(180,127,255,0.22); }
.button:hover { color: #fff; box-shadow: 0 0 40px rgba(180,127,255,0.45); }

.foot { border-top: 1px solid var(--line); }
.foot-in { max-width: 1200px; margin: 0 auto; padding: 22px var(--gutter) 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; }
.foot a { display: inline-flex; align-items: center; gap: 7px; color: var(--mute); }
.foot a:hover { color: var(--ink); }
.foot nav { display: flex; gap: 20px; }

@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar-in { gap: 18px; }
  .nav a { padding: 0 10px; }
}
@media (max-width: 640px) {
  .bar-in { gap: 14px; }
  .search > kbd, .spark { display: none; }
  .tile .k { letter-spacing: .8px; white-space: normal; }
  .bar-in { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 12px; }
  .mark { height: 32px; }
  .nav { order: 3; width: 100%; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .nav a { flex: none; }
  .netbtn { min-width: 0; }
  .pager { justify-content: center; }
  .pg { min-width: 30px; padding: 0 6px; }
  .pg.step { padding: 0 9px; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li + li::before { display: none; }
  .days { grid-template-columns: repeat(15, minmax(0, 1fr)); row-gap: 10px; }
  .value-viz { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .value-side { width: 100%; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt { min-height: 0; padding-bottom: 0; border-bottom: 0; }
  .legend { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* value and volume dashboards */
a.tile.link { color: var(--ink); cursor: pointer; transition: background .15s, box-shadow .2s; }
a.tile.link:hover { background: linear-gradient(135deg, rgba(180,127,255,0.08), var(--card) 60%); box-shadow: inset 0 0 0 1px rgba(180,127,255,0.45); }
a.tile.link .s { color: var(--purple); }
.chart-box { padding: 6px 18px 12px; }
.chart-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px 0; }
.chart-sum b { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
.chart-sum span { margin-left: 8px; color: var(--mute); font-size: 13px; }
.chart { display: block; width: 100%; height: 280px; overflow: visible; }
.chart .idle { fill: var(--line2); opacity: .6; }
.chart .gl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .ax { fill: var(--mute); font: 11px var(--mono); }
.chart .hit { fill: transparent; }
.chart .day { cursor: crosshair; }
.chart .day rect:not(.hit) { transition: opacity .12s; }
.chart:hover .day:not(:hover) rect:not(.hit) { opacity: .35; }
.chart .day:hover .hit { fill: rgba(180,127,255,0.08); }
.chart .base { stroke: var(--line2); stroke-width: 1; }
.legend-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.panel-h .legend-row { margin-left: auto; }
.asset { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.asset b { font-weight: 600; color: var(--ink); }
.value-viz { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: center; padding: 22px 24px; }
.donut { width: 220px; height: 220px; display: block; }
.donut .track { fill: none; stroke: var(--raise); }
.donut .arc { stroke-linecap: butt; transition: opacity .15s, stroke-width .15s; cursor: crosshair; }
.donut:hover .arc:not(:hover) { opacity: .4; }
.donut .dv { fill: var(--ink); font: 700 24px var(--sans); letter-spacing: -0.5px; }
.donut .dk { fill: var(--mute); font: 10.5px var(--mono); letter-spacing: 1.6px; }
.value-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.shares { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.shares li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px; align-items: center; }
.shares li .asset { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.shares li b { font-weight: 600; text-align: right; }
.shares li .pct { font: 12px var(--mono); color: var(--mute); text-align: right; }
.shares li .share { grid-column: 1 / -1; }
.share { display: block; height: 4px; background: var(--raise); border-radius: 2px; overflow: hidden; }
.share i { display: block; height: 100%; background: var(--purple); border-radius: 2px; }
.with-share { display: inline-flex; flex-direction: column; gap: 6px; min-width: 120px; }
.split { padding-top: 16px; border-top: 1px solid var(--line); }
.split-k { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.split-bar { display: flex; gap: 2px; height: 8px; background: var(--raise); border-radius: 4px; overflow: hidden; }
.split-bar i { display: block; height: 100%; }
.split-bar .sig { background: var(--purple); }
.split-bar .held { background: #3ad6b0; }