/* apps/stocks-web/style.css, Proof of Stock as a terminal window. Black with blue, after Base: the solid blue
   (#0052FF) fills buttons and labels with white text on it; a lighter blue carries accent text on black, where the solid
   one is too dark to read. Green / red / amber only for verdicts. */
:root {
  --i-check-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
  --ink: #050608;          /* page background */
  --glass: #0b0d12;        /* the window */
  --glass-2: #121620;      /* prompt line, buttons, folded blocks */
  --line: #1d2433;
  --text: #f2f4f8;
  --dim: #8b94a8;
  --faint: #727b8e;
  --accent: #0052ff;       /* fills, with white text */
  --accent-hi: #4d8bff;    /* accent text and strokes on black */
  --on-accent: #ffffff;
  --ok: #4fd18b;
  --bad: #ff6b6b;
  --warn: #f5b544;
  --base: #4d8bff;
  --rh: #4fd18b;
  --mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ink); color: var(--text); font: 14px/1.6 var(--mono); min-height: 100vh; padding: 0 16px 24px; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Icons: vector masks painted in the text colour, so they stay sharp at any size and pixel density. A font glyph
   (×, ❯, ↗, ▸) rasterises soft at small sizes and depends on which font has it. data: images are allowed by img-src. */
.i { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: -0.15em; flex: none;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-chev { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5'/%3E%3C/svg%3E"); }
.i-ext { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h6v6M12.5 3.5l-9 9'/%3E%3C/svg%3E"); width: .85em; height: .85em; margin-left: .3em; vertical-align: -0.08em; }
.i-arrow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5L13.5 8 9 12.5'/%3E%3C/svg%3E"); margin-left: .35em; }
.i-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1.6'/%3E%3Cpath d='M10.5 5.5V4.1A1.6 1.6 0 0 0 8.9 2.5H4.1A1.6 1.6 0 0 0 2.5 4.1v4.8a1.6 1.6 0 0 0 1.6 1.6h1.4'/%3E%3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E"); }
.i-cross { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E"); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button { font: inherit; cursor: pointer; color: inherit; }
kbd { font: inherit; background: var(--glass-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }

/* the window */
/* Scrollbars in the theme: thin, dark, blue on hover. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid var(--glass); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-hi); }
::-webkit-scrollbar-corner { background: transparent; }
.term { position: relative; max-width: 980px; margin: 0 auto; background: color-mix(in srgb, var(--glass) 96%, #06080c); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(0, 82, 255, .18), 0 0 80px rgba(0, 82, 255, .08), 0 40px 120px rgba(0, 0, 0, .7); display: flex; flex-direction: column; height: min(640px, 78vh); min-height: 480px; overflow: hidden; scroll-margin-top: 60px; }
.titlebar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(#10141c, var(--glass)); }
/* The window controls work like a desktop window's: red clears the screen, yellow returns the window to its normal
   size, green makes it larger. Their signs show on hover, as on a Mac. */
.dots { display: inline-flex; gap: 7px; }
.dot { width: 13px; height: 13px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .28); }
.dot svg { width: 8px; height: 8px; fill: none; stroke: rgba(0, 0, 0, .62); stroke-width: 1.7; stroke-linecap: round; opacity: 0; transition: opacity .12s; }
.dot-r { background: #ff5f57; } .dot-y { background: #febc2e; } .dot-g { background: #28c840; }
.dots:hover .dot svg, .dot:focus-visible svg { opacity: 1; }
.dot:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.linkish { background: none; border: 0; padding: 0; color: var(--dim); text-decoration: underline dotted; text-underline-offset: 3px; font: inherit; }
.linkish:hover { color: var(--accent-hi); }
/* The larger window: about 40% wider and taller than the normal one, within the screen. */
.term { transition: max-width .25s ease, height .25s ease; }
.term.large { max-width: min(1372px, calc(100vw - 32px)); height: min(896px, 90vh); }
.titlebar h2 { font-size: 12.5px; font-weight: 400; color: var(--dim); margin: 0; flex: 1; letter-spacing: .02em; }
.tabs { display: flex; gap: 4px; }
.tab { background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 3px 10px; font-size: 12.5px; color: var(--dim); }
.tab:hover { color: var(--text); }
.tab[aria-pressed="true"] { background: var(--glass-2); border-color: var(--line); color: var(--text); }
.tab[data-chain="base"][aria-pressed="true"] { color: var(--base); }
.tab[data-chain="robinhood"][aria-pressed="true"] { color: var(--rh); }

/* the feed */
.log { flex: 1; overflow-y: auto; padding: 16px 18px 8px; scroll-behavior: smooth; position: relative; }
.block { margin: 0 0 18px; animation: rise .18s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.echo { color: var(--dim); word-break: break-all; }
.echo b { color: var(--accent-hi); font-weight: 400; }
.echo span { color: var(--text); }
.out { margin-top: 6px; }
.line { white-space: pre-wrap; word-break: break-word; }
.muted { color: var(--dim); }
.faint { color: var(--faint); }
.err { color: var(--bad); }
.typing::after { content: ''; display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: -0.2em; background: var(--accent-hi); border-radius: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chainmark { font-size: 11.5px; padding: 0 6px; border-radius: 4px; border: 1px solid currentColor; margin-right: 6px; }
.chainmark.base { color: var(--base); } .chainmark.robinhood { color: var(--rh); }

/* lists to choose from */
.pick { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.pick button { width: 100%; text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 4px 8px; display: grid; grid-template-columns: 2.4em 7.5em 1fr auto; gap: 10px; align-items: baseline; }
.pick button:hover, .pick button:focus-visible { background: var(--glass-2); outline: none; }
.pick .n { color: var(--accent-hi); }
.pick .sym { font-weight: 600; }
.pick .addr { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.btn { background: var(--glass-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 10px; font-size: 12.5px; }
.btn:hover { border-color: var(--accent-hi); color: var(--accent-hi); }
a.btn { text-decoration: none; display: inline-block; }
.btn.link { color: var(--text); }
.btn.danger { border-color: rgba(255, 107, 107, .45); color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); background: rgba(255, 107, 107, .08); }
.warnbox { border: 1px solid rgba(255, 107, 107, .5); background: rgba(255, 107, 107, .07); border-radius: 8px; padding: 10px 12px; font: 13.5px/1.5 var(--sans); width: 100%; }
.warnbox b { color: var(--bad); }

/* the passport */
.card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 12px; margin-top: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent); }
.cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cardhead h2 { font: 600 18px/1.3 var(--sans); margin: 0; }
.cardhead .sub { color: var(--dim); font-size: 12px; word-break: break-all; }
/* The contract address: a button that copies it. Quiet at rest, a hint on hover, a confirmation that settles back. */
.addr-copy { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 1px 6px; margin-left: -6px; color: var(--dim); font: inherit; cursor: copy; text-align: left; transition: color .15s, background .15s, border-color .15s; }
.addr-copy .addr-text { word-break: break-all; }
.addr-copy .i-copy { opacity: 0; width: .95em; height: .95em; transition: opacity .15s; }
.addr-copy .addr-tip { font-size: 10.5px; letter-spacing: .04em; color: var(--faint); opacity: 0; transform: translateX(-3px); transition: opacity .15s, transform .15s; white-space: nowrap; }
.addr-copy:hover, .addr-copy:focus-visible { color: var(--text); background: var(--glass-2); border-color: var(--line); outline: none; }
.addr-copy:hover .i-copy, .addr-copy:focus-visible .i-copy, .addr-copy:hover .addr-tip, .addr-copy:focus-visible .addr-tip { opacity: 1; transform: none; }
.addr-copy.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 9%, transparent); }
.addr-copy.done .i-copy { --i: var(--i-check-src); opacity: 1; }
.addr-copy.done .addr-tip { color: var(--ok); opacity: 1; transform: none; }
.addr-copy.unlisted.done { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.addr-copy.unlisted.done .addr-tip { color: var(--warn); }
.addr-copy.done .addr-text { animation: addr-pop .28s ease-out; }
@keyframes addr-pop { 40% { letter-spacing: .015em; } }
/* The verdict as a status, not a rubber stamp: a dot and plain words by the token's name, and the card's left edge in
   the same colour. Straight, sentence case, no frame. */
.state { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.2 var(--sans); white-space: nowrap; padding-top: 4px; }
.state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.state.ok { color: var(--ok); } .state.bad { color: var(--bad); } .state.warn { color: var(--warn); }
.card.is-ok { border-left: 3px solid var(--ok); } .card.is-bad { border-left: 3px solid var(--bad); } .card.is-warn { border-left: 3px solid var(--warn); }
.state.bad { font-weight: 600; font-size: 14px; }
.fields { margin: 12px 0 4px; display: grid; gap: 3px; }
.field { display: flex; align-items: baseline; gap: 8px; }
.field .k { color: var(--dim); white-space: nowrap; }
.field .dots-fill { flex: 1; border-bottom: 1px dotted var(--faint); transform: translateY(-4px); min-width: 16px; }
.field .v { text-align: right; white-space: nowrap; }
.field .v small { color: var(--faint); margin-left: 6px; font-size: 11.5px; }
.pos { color: var(--ok); } .neg { color: var(--bad); }
.up { color: var(--ok); } .down { color: var(--bad); } .up.wide, .down.wide { font-weight: 600; }
.plain { font: 500 15.5px/1.5 var(--sans); margin: 12px 0 4px; padding: 10px 12px; border-left: 3px solid var(--accent-hi); background: var(--glass-2); border-radius: 0 8px 8px 0; }
.plain.ok { border-left-color: var(--ok); } .plain.bad { border-left-color: var(--bad); } .plain.warn { border-left-color: var(--warn); }
.plain { border-left-color: var(--faint); }
.plain.ok { border-left-color: var(--ok); }
.notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font: 13.5px/1.5 var(--sans); }
.notes li { display: flex; gap: .55em; align-items: baseline; }
.notes li::before { content: ''; flex: none; width: .9em; height: .9em; transform: translateY(.12em); background: var(--faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.notes li.warn::before { background: var(--warn); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.8v3.9M8 11.2v.1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.8v3.9M8 11.2v.1'/%3E%3C/svg%3E"); }
.notes li.bad::before { background: var(--bad); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M5.8 5.8l4.4 4.4M10.2 5.8l-4.4 4.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M5.8 5.8l4.4 4.4M10.2 5.8l-4.4 4.4'/%3E%3C/svg%3E"); }
.more { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--glass-2); }
.more summary { cursor: pointer; padding: 6px 10px; color: var(--dim); font-size: 12.5px; list-style: none; }
.more summary::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .5em; vertical-align: -0.1em; background: var(--accent-hi); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s; }
.more[open] summary::before { transform: rotate(90deg); }
.more .inner { padding: 4px 10px 10px; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th, .tbl td { padding: 4px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl th { color: var(--faint); font-weight: 400; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { color: var(--accent-hi); }
.chart { width: 100%; height: auto; display: block; }
.pool-link { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--faint); }
.pool-link:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }
.chart .band-c { fill: #000; opacity: .45; } .chart .band-e { fill: #000; opacity: .2; }
.chart .gap { fill: none; stroke: var(--accent-hi); stroke-width: 1.4; stroke-dasharray: 1.5 3.5; opacity: .6; }
.chart .zero-l { fill: var(--dim); }
/* The chart's legend: one compact line of swatches. */
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11.5px; color: var(--faint); }
.legend .key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; border: 1px solid var(--line); }
.legend .sw-line { height: 0; border: 0; border-top: 2px solid var(--accent-hi); border-radius: 0; }
.legend .sw-open { background: var(--glass); }
.legend .sw-ext { background: color-mix(in srgb, #000 20%, var(--glass)); }
.legend .sw-closed { background: color-mix(in srgb, #000 45%, var(--glass)); }
.legend .sw-gap { height: 0; border: 0; border-top: 2px dotted var(--accent-hi); border-radius: 0; opacity: .7; }
.chart .zero { stroke: var(--faint); stroke-dasharray: 3 4; } .chart .ln { fill: none; stroke: var(--accent-hi); stroke-width: 1.8; }
.chart text { fill: var(--faint); font: 10.5px var(--mono); }

/* the prompt */
.prompt { display: flex; align-items: center; gap: 10px; margin: 0 12px 10px; padding: 8px 8px 8px 14px; background: var(--glass-2); border: 1px solid var(--line); border-radius: 10px; }
.prompt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 82, 255, .18); }
.ps1 { color: var(--accent-hi); white-space: nowrap; display: inline-flex; align-items: center; gap: .3em; }
.ps1 .chain-ps1 { color: var(--dim); margin-right: 4px; }
.prompt input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: 15px var(--mono); caret-color: var(--accent-hi); padding: 4px 0; }
.prompt input::placeholder { color: var(--faint); }
/* A real prompt waits with a cursor (owner, 12.11): the same block as the typed greeting, quieter and slower, at the start
   of an empty, unfocused line. Focus brings the browser's own caret; typing hides the block. Still under reduced motion. */
.cmd-wrap { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.cmd-cursor { position: absolute; left: 0; top: 50%; width: .55em; height: 1.1em; margin-top: -.55em; font-size: 15px; background: var(--accent-hi); opacity: .5; border-radius: 1px; pointer-events: none; animation: blink 1.2s steps(1) infinite; }
.cmd-wrap:focus-within .cmd-cursor, .cmd-wrap input:not(:placeholder-shown) + .cmd-cursor { display: none; }
.cmd-wrap:not(:focus-within) input:placeholder-shown { text-indent: 1em; }
@media (prefers-reduced-motion: reduce) { .cmd-cursor { animation: none; } }
.go { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 7px; padding: 6px 14px; font-weight: 600; }
.go:hover { filter: brightness(1.08); }
/* The status bar reads like a terminal footer: the chains on the left, the keys on the right. Each part is whole (no wrap
   inside it); when the bar is too narrow the key group moves under the status as one piece, and on a phone the chains
   stack one per line. */
.statusbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; padding: 6px 14px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 20px; color: var(--faint); }
.status { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.status .live { color: var(--ok); }
.status .segs { display: flex; flex-wrap: wrap; column-gap: 18px; min-width: 0; }
.status .seg { white-space: nowrap; }
.status .ch { color: var(--dim); }
.statusbar .hint { display: flex; gap: 14px; margin-left: auto; white-space: nowrap; }
.hint .key { display: inline-flex; align-items: baseline; gap: 6px; }
.hint .key kbd { color: var(--dim); line-height: 16px; }
.hint button.key { background: none; border: 0; padding: 0; color: inherit; }
.hint button.key:hover, .hint button.key:hover kbd { color: var(--accent-hi); }
.hint button.key:hover kbd { border-color: var(--accent-hi); }
.hint button.key:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 4px; }
.disclaimer { max-width: 980px; margin: 14px auto 0; color: var(--faint); font: 12.5px/1.5 var(--sans); text-align: center; }
.disclaimer strong { color: var(--dim); font-weight: 500; }

@media (max-width: 700px) {
  body { padding: 0; font-size: 13px; }
  .term { border-radius: 0; border-left: 0; border-right: 0; height: 100vh; height: 100dvh; min-height: 0; }
  .titlebar { flex-wrap: wrap; gap: 8px; }
  .titlebar h2 { flex-basis: calc(100% - 60px); }
  .tabs { width: 100%; }
  .tab { flex: 1; }
  .log { padding: 12px; }
  .pick button { grid-template-columns: 2em 1fr; }
  .pick .addr, .pick .nm { grid-column: 2; }
  .field { flex-wrap: wrap; }
  .field .dots-fill { display: none; }
  .field .v { margin-left: auto; }
  .prompt { margin: 0 8px 8px; }
  .statusbar { padding: 6px 12px; }
  .status { align-items: flex-start; }
  .status .segs { flex-direction: column; }
  .statusbar .hint { display: none; }
  .out > .tbl, .more .tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .disclaimer { padding: 10px 14px 14px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .term { transition: none; }
  .addr-copy.done .addr-text { animation: none; }
  .block { animation: none; }
  .typing::after { animation: none; }
  .log { scroll-behavior: auto; }
}


/* ---------- landing ---------- */
/* The background: a dot grid, two slow blue glows on black and a faint horizontal scan. Fixed, behind everything,
   no images. */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.bg-grid { position: absolute; inset: -40px; background-image: radial-gradient(rgba(77, 139, 255, .14) 1px, transparent 1.2px), linear-gradient(rgba(77, 139, 255, .035) 1px, transparent 1px);
  background-size: 22px 22px, 22px 110px; mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 40%, transparent 100%); }
.bg-glow { position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; background: radial-gradient(closest-side, var(--glow, var(--accent)), transparent); opacity: .22; animation: drift 38s ease-in-out infinite alternate; will-change: transform; }
.bg-glow.a { --glow: var(--accent); left: -32vmax; top: -36vmax; }
.bg-glow.b { --glow: #1a3fd6; right: -36vmax; bottom: -40vmax; opacity: .16; animation-duration: 46s; }
@keyframes drift { to { transform: translate3d(6vmax, 4vmax, 0); } }
.bg-scan { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .012) 0 1px, transparent 1px 4px); }

/* the live tape */
.tape { position: sticky; top: 0; z-index: 5; margin: 0 -16px; display: flex; align-items: center; height: 34px; border-bottom: 1px solid var(--line); background: #06080c; font-size: 12px; }
.tape-label { padding: 0 12px; color: var(--on-accent); background: var(--accent); align-self: stretch; display: flex; align-items: center; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
.tape-track { overflow: hidden; flex: 1; position: relative; contain: layout paint; }
/* The edge fades are overlays on a still layer, not a mask on the moving one: a mask over a moving layer is repainted every frame. */
.tape-track::before, .tape-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 1; pointer-events: none; }
.tape-track::before { left: 0; background: linear-gradient(90deg, #06080c, transparent); }
.tape-track::after { right: 0; background: linear-gradient(270deg, #06080c, transparent); }
.tape-run { display: inline-flex; white-space: nowrap; animation: tape 60s linear infinite; will-change: transform; backface-visibility: hidden; }
/* Each group ends with the same gap that separates its items, so two groups side by side are one seamless period. */
.tape-group { display: inline-flex; gap: 28px; padding-right: 28px; flex: none; }
.tape-item .v { transition: color .3s; }
.tape-item .v.tick { animation: tape-tick .9s ease-out; }
@keyframes tape-tick { 0% { background: color-mix(in srgb, var(--accent-hi) 28%, transparent); border-radius: 3px; } 100% { background: transparent; } }
.tape:hover .tape-run { animation-play-state: paused; }
@keyframes tape { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.tape-item { background: transparent; border: 0; padding: 0; color: var(--dim); font: inherit; }
.tape-item b { color: var(--text); font-weight: 600; margin-right: 6px; }
.tape-item:hover b { color: var(--accent-hi); }

/* hero */
.hero { position: relative; max-width: 980px; margin: 0 auto; padding: 64px 0 34px; }
.kicker-also { color: var(--faint); }
.kicker { color: var(--accent-hi); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.headline { font: 700 clamp(30px, 5.2vw, 56px)/1.05 var(--sans); letter-spacing: -.02em; margin: 0 0 18px; max-width: 16ch; }
.headline em { font-style: normal; color: var(--accent-hi); }
.lede { font: 400 17px/1.6 var(--sans); color: var(--dim); max-width: 60ch; margin: 0 0 22px; }
.hero-try { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.chip { background: var(--glass-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 12.5px; }
.chip:hover { border-color: var(--accent-hi); color: var(--accent-hi); }

/* sections */
.checks { max-width: 980px; margin: 64px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.check { background: color-mix(in srgb, var(--glass) 94%, transparent); padding: 22px 20px 20px; }
.check .num { color: var(--accent-hi); font-size: 12px; letter-spacing: .1em; }
.check h3 { font: 600 19px/1.3 var(--sans); margin: 8px 0 10px; }
.check p { font: 14px/1.6 var(--sans); color: var(--dim); margin: 0 0 14px; }
.mini { font-size: 12px; background: var(--glass-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.mini-id { flex-direction: column; gap: 2px; }
.mini .i { margin: 0 .25em; }
.mini .ok { color: var(--ok); } .mini .bad { color: var(--bad); }
.t-bad { color: var(--bad); } .t-warn { color: var(--warn); } .t-ok { color: var(--ok); }
.why { max-width: 980px; margin: 64px auto 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: center; }
.why h3, .agents h3 { font: 700 26px/1.2 var(--sans); margin: 0 0 12px; }
.why p, .agents p { font: 15px/1.65 var(--sans); color: var(--dim); margin: 0 0 10px; }
.why-art { width: 100%; height: auto; }
.art-closed { fill: rgba(77, 139, 255, .06); stroke: var(--line); stroke-dasharray: 3 4; }
.art-zero { stroke: var(--faint); stroke-dasharray: 3 4; }
.art-line { fill: none; stroke: var(--accent-hi); stroke-width: 2.2; }
.art-label { fill: var(--faint); font: 10.5px var(--mono); }
.agents { max-width: 980px; margin: 64px auto 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; }
.agents code { color: var(--accent-hi); font-size: 13px; }
.code { background: var(--glass); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.code .code-head:not(:first-child) { border-top: 1px solid var(--line); }
.code pre { margin: 0; padding: 12px 14px; font: 12.5px/1.6 var(--mono); color: var(--text); overflow-x: auto; }
/* The footer: brand and navigation on one row, the note, then rights, legal and the release. Links are quiet chips in
   the page's own style, not underlined text. */
/* The wall of findings: the cases of the week, in the site's table style. */
.board { max-width: 980px; margin: 56px auto 0; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 18px; flex-wrap: wrap; }
.board-head h3 { font: 700 26px/1.2 var(--sans); margin: 0; }
.board-counts { margin: 0; color: var(--dim); font: 12.5px/1.5 var(--mono); }
.board-wrap { margin-top: 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--glass-2); }
.board-table { width: 100%; min-width: 620px; border-collapse: collapse; font: 13px/1.4 var(--mono); }
.board-table code { font: inherit; color: var(--text); }
.board-table td:nth-child(4) { white-space: nowrap; }
.board-table th { text-align: left; color: var(--faint); font-weight: 400; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.board-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--dim); }
.board-table tr:last-child td { border-bottom: 0; }
.board-table tr.click { cursor: pointer; }
.board-table tr.click:hover td, .board-table tr.click:focus-visible td { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.board-table tr.click:focus-visible { outline: 1px solid var(--accent-hi); }
.board-table td.warn { color: var(--warn); }
.board-empty { margin: 12px 0 0; color: var(--dim); }
.board-note { margin: 10px 0 0; color: var(--faint); font-size: 12px; }
.board-note a { color: var(--dim); border-bottom: 1px dotted currentColor; text-decoration: none; }
.foot { max-width: 980px; margin: 56px auto 0; padding: 20px 0 14px; border-top: 1px solid var(--line); color: var(--faint); font: 12.5px/1.6 var(--sans); }
.foot a { color: inherit; text-decoration: none; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.foot-mark { width: 28px; height: 28px; flex: none; border-radius: 8px; display: block; background: #070C18 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%0A  %3Crect width='16' height='16' fill='%23070C18'%3E%3C/rect%3E%0A  %3Ccircle cx='8' cy='8' r='7' fill='%234B87FF'%3E%3C/circle%3E%0A  %3Cpath d='M0 8h6V6h4v2h6v1H9V7H7v2H0z' fill='%23070C18'%3E%3C/path%3E%0A%3C/svg%3E") center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 6px 24px rgba(0, 82, 255, .25); }
.foot-name { color: var(--text); font: 600 14px/1.2 var(--sans); }
.foot-tag { color: var(--dim); font-size: 12.5px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.foot-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass-2); color: var(--dim); font: 500 12px/1.2 var(--mono); transition: color .15s, border-color .15s, background .15s; }
.foot-link:hover, .foot-link:focus-visible { color: var(--text); border-color: var(--accent-hi); background: color-mix(in srgb, var(--accent) 12%, var(--glass-2)); outline: none; }
.foot-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.foot-note { margin: 12px 0 0; max-width: 92ch; font-size: 12px; line-height: 1.55; color: var(--faint); }
.foot-note a { color: var(--dim); border-bottom: 1px dotted currentColor; } .foot-note a:hover { color: var(--accent-hi); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--faint); font: 11.5px/1.4 var(--mono); }
.foot-meta { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.beta-tag { display: inline-block; margin-right: 8px; padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); border-radius: 999px; color: var(--warn); font: 600 10px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
/* X and Telegram: square keys in the footer's own glass and line, the icon in the site's stroke; the accent on hover. */
.i-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 2.6h3.1l7.7 10.8h-3.1z'/%3E%3Cpath d='M13.2 2.6L8.9 7.5M7.1 9.6l-4.3 3.8'/%3E%3C/svg%3E"); } .i-tg { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.1 2.3L1.9 7.2l4.5 1.7 1.7 4.6 2.4-3 3.1 2.3z'/%3E%3Cpath d='M6.4 8.9l7.7-6.6'/%3E%3C/svg%3E"); }
.foot-social { display: inline-flex; gap: 6px; padding-left: 14px; border-left: 1px solid var(--line); }
.foot-ic { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--glass-2); color: var(--dim); font-size: 13px; transition: color .15s, border-color .15s, background .15s, transform .15s; }
.foot-ic:hover, .foot-ic:focus-visible { color: var(--accent-hi); border-color: var(--accent-hi); background: color-mix(in srgb, var(--accent) 12%, var(--glass-2)); transform: translateY(-1px); outline: none; }
@media (prefers-reduced-motion: reduce) { .foot-ic { transition: none; } .foot-ic:hover { transform: none; } }
.foot-legal { color: var(--dim); border-bottom: 1px dotted transparent; transition: color .15s, border-color .15s; }
.foot-legal:hover, .foot-legal:focus-visible { color: var(--accent-hi); border-bottom-color: var(--accent-hi); outline: none; }

/* Questions: plain rows that open, the same window glass and line as the rest; no cards, no icons. */
.faq { max-width: 980px; margin: 64px auto 0; }
.faq h3 { font: 700 26px/1.2 var(--sans); margin: 0 0 14px; }
.qa { border-top: 1px solid var(--line); }
.qa:last-of-type { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 4px; font: 600 16px/1.4 var(--sans); color: var(--text); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 1.6px solid var(--dim); border-bottom: 1.6px solid var(--dim); transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.qa[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.qa summary:hover, .qa summary:focus-visible { color: var(--accent-hi); outline: none; }
.qa p { font: 15px/1.65 var(--sans); color: var(--dim); margin: 0; padding: 0 4px 18px; max-width: 76ch; }
.faq-more { font: 14px/1.6 var(--sans); color: var(--faint); margin: 16px 4px 0; }
@media (prefers-reduced-motion: reduce) { .qa summary::after { transition: none; } }

@media (max-width: 860px) {
  .checks { grid-template-columns: 1fr; }
  .why, .agents { grid-template-columns: 1fr; gap: 18px; }
  }
@media (max-width: 700px) {
  body { padding: 0 12px 16px; }
  .tape { margin: 0 -12px; }
  .hero { padding: 36px 2px 22px; }
  .lede { font-size: 15.5px; }
  .term { height: 78vh; height: 78dvh; border-radius: 10px; border: 1px solid var(--line); min-height: 420px; }
  .term.large { max-width: none; height: 94vh; height: 94dvh; }
  .checks, .why, .agents { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-glow { animation: none; }
  .tape-run { animation: none; }
  .tape-track { overflow-x: auto; }
}
.inline-link { color: var(--accent-hi); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-hi) 40%, transparent); }
.inline-link:hover { border-bottom-color: var(--accent-hi); }
@media (max-width: 700px) { .foot { padding: 22px 2px 14px; } .foot-top { flex-direction: column; align-items: flex-start; } .foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } .foot-social { padding-left: 0; border-left: 0; } }

.foot-dot.late { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.foot-dot.down { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }

/* The GitHub mark, shown once the repository is public. */
.i-gh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 .2a8 8 0 0 0-2.5 15.6c.4 0 .5-.2.5-.4v-1.5c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.4.7 0-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8a7.6 7.6 0 0 1 4 0c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.8-3.6 4 .3.3.6.8.6 1.5v2.2c0 .2.1.5.6.4A8 8 0 0 0 8 .2z'/%3E%3C/svg%3E"); }