/* lintcha-chain, the design of the one page, built against the approved mock (Lintcha Chain4, 2026-09-09) and the two
   briefs it settles (LINTCHA_CHAIN_04, _05). Loaded after the vendored style.css and launch.css; it restyles the shell
   around the tool and the tool's own controls and rows by selector only, the vendored markup and wording are not
   touched. Tokens first, then the shell top to bottom, then the vendored parts, then motion and its off switch. */

/* ---------------------------------------------------------------- tokens: the mock's palette over the vendored one */
:root, [data-theme="dark"] {
  --bg:#08090a; --panel:#101214; --panel-2:#16191b; --field:#0c0e10;
  --line:#22262a; --line-soft:#191c1f;
  --ink:#f4f5f6; --ink-2:#99a1a7; --ink-3:#7a8288;
  --accent:#d4fc50; --accent-ink:#08090a; --accent-line:#6b8a2e;
  --btn-quiet-line:#31363a;
  --st-shared:#c8ced3; --st-look:#7fb3d5; --st-unique:#7a8288;
  --bar-track:#1d2124;
}
[data-theme="light"] {
  --bg:#f3efe8; --panel:#fffdf9; --panel-2:#ebe5db; --field:#fffdf9;
  --line:#ded7ca; --line-soft:#e7e1d6;
  --ink:#1a1917; --ink-2:#5e5a53; --ink-3:#6f6960;
  --accent:#4c6410; --accent-ink:#fffdf9; --accent-line:#8b9f57;
  --btn-quiet-line:#cfc7b8;
  --st-shared:#3f3b35; --st-look:#245d85; --st-unique:#6f6960;
  --bar-track:#e3ddd1;
}
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h, 60px) + 8px); }
body[data-page="chain"] { position:relative; z-index:0; background:var(--bg); color:var(--ink); }
body[data-page="chain"] a { color:var(--accent); border-bottom:1px solid var(--accent-line); }
body[data-page="chain"] a:hover { color:var(--ink); border-bottom-color:var(--accent); }
body[data-page="chain"] input:focus, body[data-page="chain"] textarea:focus, body[data-page="chain"] button:focus-visible, body[data-page="chain"] a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* the type: mono, six hundred, uppercase for every heading, number, nav item, badge and label; Archivo for prose */
.mono, .sec-h, .num, .nav, .page-switch, .cluster, .theme, .strip, .badge, .kicker, .sub, .dg-num, .dg-title, .dg-list > div, .dg-index-t, .dg-boundary-label, .dg-inlabel-1, .specimen-label, .st, .chart-title, .foot-links, .contract-label, .token-btn, .btn-quiet, .cmd-code { font-family:'IBM Plex Mono',monospace; }
.sec-h { font-size:22px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; margin:0; }
.num { font-size:12px; font-weight:600; letter-spacing:0.14em; color:var(--accent); opacity:0.5; transition:opacity 300ms linear; }
.num.is-active { opacity:1; }
.sub { font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); margin:34px 0 12px; }
.kicker { font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin:0 0 34px; }
.badge { display:inline-block; font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; border-radius:999px; padding:3px 9px; }
.badge-snapshot { color:var(--ink); background:var(--panel-2); border:1px solid var(--accent); }   /* the border carries the accent; the fill does not change */
.badge-live { color:var(--accent-ink); background:var(--accent); }
.badge-notdata { color:var(--ink-3); border:1px dashed var(--ink-3); }

/* ---------------------------------------------------------------- the wash: acid at the page edges, behind everything */
.wash { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.wash-l, .wash-r { position:absolute; top:0; bottom:0; width:min(24vw,300px); animation:lc-wash 8s ease-in-out infinite; }
.wash-l { left:0; background:linear-gradient(to right, color-mix(in srgb, var(--accent) 11%, transparent) 0, color-mix(in srgb, var(--accent) 6%, transparent) 120px, transparent 100%), repeating-linear-gradient(to right, color-mix(in srgb, var(--accent) 9%, transparent) 0 1px, transparent 1px 72px); }
.wash-r { right:0; background:linear-gradient(to left, color-mix(in srgb, var(--accent) 11%, transparent) 0, color-mix(in srgb, var(--accent) 6%, transparent) 120px, transparent 100%), repeating-linear-gradient(to left, color-mix(in srgb, var(--accent) 9%, transparent) 0 1px, transparent 1px 72px); }

/* ---------------------------------------------------------------- the header: sticky bar, then the status strip */
.topbar { position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--line); }
.bar-in { max-width:1080px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.topbar[data-topbar] .bar-in { max-width:1240px; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; border:0 !important; color:var(--ink) !important; }
/* the mark: the delivered mark-acid.png (acid on a transparent ground) used as a mask, so the shape is the file's and the
   colour is the theme's accent: the file's own acid on dark, the darker acid of the light palette on light */
.brand .mark { display:block; width:30px; height:30px; background:var(--accent); -webkit-mask:url(mark-acid.png) center/contain no-repeat; mask:url(mark-acid.png) center/contain no-repeat; }
.brand .wordmark { font-size:22px; font-weight:600; letter-spacing:-0.03em; }
.page-switch { display:flex; align-items:center; gap:14px; margin:0; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap; }
.topbar .page-switch a { color:var(--ink-2); border:0; padding:4px 0; }
.topbar .page-switch a:hover { color:var(--ink); }
.page-switch-current { color:var(--accent); padding:4px 0; }
.nav { position:relative; display:flex; align-items:center; gap:14px; margin:0 auto; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; }   /* ten items since the bar became the page's own order */
.topbar .nav a { color:var(--ink-2); border:0; padding:4px 0; }
.topbar .nav a:hover { color:var(--ink); }
.topbar[data-topbar] .section-nav { order:4; flex:1 1 100%; width:100%; min-width:0; max-width:100%; box-sizing:border-box; margin:0; padding-top:9px; border-top:1px solid var(--line-soft); flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; scrollbar-width:none; }
.topbar[data-topbar] .section-nav::-webkit-scrollbar { display:none; }
.nav-bar { position:absolute; bottom:-2px; left:0; height:2px; width:0; background:var(--accent); opacity:0; transition:transform 420ms cubic-bezier(.3,.8,.3,1), width 420ms cubic-bezier(.3,.8,.3,1), opacity 200ms linear; }
.cluster { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; }
.cluster .out { color:var(--ink-2); border:0; }
.cluster .out:hover { color:var(--accent); }
.cluster .arrow { font-weight:400; margin-left:0.35em; }
.header-tools { margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.header-tools [data-lang-host] { display:flex; }
.theme { font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; padding:8px 13px; border-radius:999px; border:1px solid var(--line); cursor:pointer; background:transparent; color:var(--ink-2); }
.header-tools .theme { min-height:34px; padding:7px 11px; display:inline-flex; align-items:center; gap:7px; }
.header-tools .theme .sprite-s { width:14px; height:14px; }
.strip { border-bottom:1px solid var(--line); background:var(--bg); position:relative; z-index:1; }
.strip-in { max-width:1080px; margin:0 auto; padding:9px 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }
.strip-dot { color:var(--line); }
.strip-id { color:var(--accent); animation:lc-pulse 4s ease-in-out infinite; }
.strip-live { margin-left:auto; display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); }
.strip-live .badge { font-size:8px; padding:2px 7px; }
.strip-wall { color:var(--ink-2); border-bottom:1px solid var(--line); }
.strip-wall:hover { color:var(--accent); border-color:var(--accent); }

/* the token, header part: the contract row under the strip and the filled buy button in the cluster. Rendered by the
   build only when site/token.json carries an address (the row) and a pons link (the button); nothing otherwise. */
.buy { background:var(--accent) !important; color:var(--accent-ink) !important; padding:9px 16px; border-radius:999px; border:0 !important; }
.buy:hover { opacity:0.86; }
.contract { position:relative; z-index:1; border-bottom:1px solid var(--line); background:var(--panel); }
.contract-in { max-width:1080px; margin:0 auto; padding:11px 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.contract-label { font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); }
.contract-address { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink); overflow-wrap:anywhere; }
.contract .btn-copy { margin-left:auto; }
.btn-copy { font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; padding:7px 13px; border-radius:999px; border:1px solid var(--accent-line); background:transparent; color:var(--accent); cursor:pointer; }
.btn-quiet { font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:8px 14px; border-radius:999px; border:1px solid var(--btn-quiet-line); background:transparent; color:var(--ink-2); cursor:pointer; }

/* ---------------------------------------------------------------- the sprite: the mark on a cell grid, three sizes
   Eleven rectangles, no file and no request: the same caret the header wears, drawn on a sixteen by sixteen grid, and
   the two strokes the mark has cut out of it drawn as their own rectangles. Those two blink, which is the one thing a
   caret does on its own and the only motion here that claims nothing about the chain. They rest hidden, so a still
   sprite is the mark exactly as it is. */
.sprite { display:block; fill:var(--accent); flex:0 0 auto; }
.sprite-s { width:20px; height:20px; }
.sprite-m { width:40px; height:40px; }
.sprite-l { width:64px; height:64px; }
.sprite .cut { opacity:0; animation:lc-blink 1.06s steps(1,end) infinite; }

/* ---------------------------------------------------------------- the page column and the sections */
.page { position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 24px 40px; box-sizing:border-box; }
.hero { padding:76px 0 4px; }
.hero-h1 { font-family:'IBM Plex Mono',monospace; color:var(--ink); font-size:clamp(28px,3.4vw,48px); line-height:1.12; font-weight:600; letter-spacing:-0.02em; text-transform:uppercase; margin:0 0 28px; max-width:1040px; text-wrap:pretty; }
.hero-l2 { color:var(--ink-2); }
.hero-intro { font-size:18px; line-height:1.6; color:var(--ink-2); margin:0 0 14px; max-width:700px; }
.hero-privacy { font-size:15px; line-height:1.6; color:var(--ink-3); margin:0; max-width:700px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.hero-action { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; padding:10px 16px; border:1px solid var(--btn-quiet-line); border-radius:999px; color:var(--ink-2); }
.hero-action:hover { border-color:var(--accent); color:var(--accent); }
body[data-page="chain"] .hero-action-primary { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
body[data-page="chain"] .hero-action-primary:hover { color:var(--accent-ink); opacity:0.88; }
.sec { padding:52px 0; border-top:1px solid var(--line); scroll-margin-top:calc(var(--topbar-h, 60px) + 8px); }
.sec-head { display:flex; align-items:baseline; gap:14px; margin-bottom:8px; }
.sec-p { font-size:15px; line-height:1.6; color:var(--ink-2); margin:14px 0 6px; max-width:720px; }
.sec-p-lg { font-size:17px; max-width:780px; }
.mono-line { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-3); margin:18px 0 0; overflow-wrap:anywhere; }

/* ---------------------------------------------------------------- section one, the process: four stages on one baseline,
   the browser boundary notching around the index card; the geometry is measured and drawn by chain.js */
.diagram { position:relative; padding:0 0 210px; }
.dg-boundary { position:absolute; top:-16px; left:0; right:0; height:78%; border:1px solid var(--accent-line); border-bottom:0; border-radius:20px 20px 0 0; pointer-events:none; }
.dg-edge { position:absolute; left:0; top:calc(78% - 16px); width:calc(50% - 130px); height:1px; background:var(--accent-line); pointer-events:none; }
.dg-edge[data-edge-right] { left:auto; right:0; }
.dg-vedge { position:absolute; right:0; top:0; width:1px; height:0; background:var(--accent-line); pointer-events:none; display:none; }
.dg-boundary-label { position:absolute; top:-25px; left:22px; background:var(--bg); padding:0 10px; font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); }
.dg-links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.dg-stages { position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; gap:26px 44px; padding:14px 18px 0; }
.dg-stage { flex:1 1 120px; max-width:420px; min-width:0; border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:14px; transition:border-color 400ms ease, box-shadow 400ms ease; }
.dg-stage.is-on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-line), 0 0 26px -8px var(--accent); }
.dg-stage-index { background:var(--panel-2); }
.dg-col { flex:1 1 120px; max-width:420px; min-width:0; display:grid; gap:0; }
.dg-head { display:flex; align-items:baseline; gap:8px; margin-bottom:11px; }
.dg-num { font-size:11px; font-weight:600; color:var(--ink-3); }
.dg-title { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); }
.dg-list { display:grid; gap:5px; }
.dg-list > div { font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-soft); border-radius:8px; padding:6px 8px; }
.dg-note { font-size:13px; line-height:1.5; color:var(--ink-3); margin:11px 0 0; }
.dg-index { border:1px solid var(--line); border-radius:10px; padding:11px; }
.dg-index-t { font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); margin-bottom:8px; }
.dg-index-l { font-family:'IBM Plex Mono',monospace; font-size:11px; line-height:1.75; color:var(--ink-3); }
.dg-inbound { position:relative; height:60px; margin:0 auto; width:1px; }
.dg-inbound-line { position:absolute; top:0; bottom:0; left:0; border-left:1px dashed var(--accent-line); }
.dg-inbound-dot { position:absolute; top:0; left:-3px; width:6px; height:6px; border-radius:999px; background:var(--accent); animation:lc-fall 14s linear infinite; }
.dg-inlabel { text-align:center; margin:0; }
.dg-inlabel-1 { font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.dg-inlabel-2 { font-size:13px; line-height:1.5; color:var(--ink-3); margin-top:8px; }
.specimen { border:1px dashed var(--btn-quiet-line); border-radius:10px; padding:10px; }
.specimen-label { font-size:9px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.specimen-list { display:grid; gap:7px; }
.sp-item { border:1px solid var(--line-soft); border-radius:8px; padding:8px 9px; }
.sp-item .st { border:0; padding:0; font-size:10px; }
.sp-line { font-size:13px; line-height:1.45; color:var(--ink-2); margin-top:5px; }

/* the three states, a word and a shape each, never the accent and never red or green: filled square, hollow diamond,
   hollow ring. Used in the specimen (markup) and on the vendored result rows (chain.js reads the sentence and adds one). */
.st { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; border:1px solid currentColor; border-radius:999px; padding:3px 9px; vertical-align:middle; }
.st svg { flex:0 0 auto; }
.st-shared { color:var(--st-shared); }
.st-look { color:var(--st-look); }
.st-unique { color:var(--st-unique); }
.st-none { color:var(--ink-3); border-style:dashed; }

/* ---------------------------------------------------------------- section two, the tool: the vendored form and rows, restyled */
.sec-tool { padding-bottom:64px; }
.sec-tool .sec-head { margin-bottom:20px; }
.sec-tool main { display:block; }
.sec-tool .launch-form { margin-top:0; }
.sec-tool .launch-form label { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); position:relative; }
.sec-tool .launch-form input, .sec-tool .launch-form textarea { font-weight:400; letter-spacing:0; text-transform:none; }
.sec-tool .launch-two { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.sec-tool .caret { position:absolute; width:8px; height:18px; background:var(--accent); animation:lc-caret 1.15s steps(1,end) infinite; pointer-events:none; }
.sec-tool #launch-read { font-family:'IBM Plex Mono',monospace !important; font-size:13px !important; font-weight:600 !important; letter-spacing:0.14em; text-transform:uppercase; padding:14px 28px !important; border:1px solid var(--accent) !important; background:transparent !important; color:var(--accent) !important; transition:background 220ms ease, color 220ms ease; }
.sec-tool #launch-read:hover:not(:disabled) { background:var(--accent) !important; color:var(--accent-ink) !important; }
.sec-tool #launch-read:disabled { opacity:0.6; cursor:default; }
.sec-tool #launch-clear { font-family:'IBM Plex Mono',monospace !important; font-size:13px !important; font-weight:600 !important; letter-spacing:0.14em; text-transform:uppercase; padding:14px 24px !important; }
.sec-tool #launch-state { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-3); }
.sec-tool #launch-results { position:relative; overflow:hidden; margin-top:36px; border-top:1px solid var(--line); padding-top:8px; }
.sec-tool .sweep { position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); animation:lc-sweep 900ms cubic-bezier(.3,.7,.3,1) forwards; --sweep:640px; }
.sec-tool .launch-group h3 { font-weight:600; letter-spacing:0.14em; }
.sec-tool .launch-row { display:flex; flex-wrap:wrap; gap:8px 16px; padding:14px 2px; }
.sec-tool .launch-check { flex:0 0 200px; max-width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.sec-tool .launch-row > div:last-child { flex:1 1 240px; min-width:0; display:grid; gap:8px; }
.sec-tool .launch-line { line-height:1.55; }
.sec-tool .launch-line .st { margin-right:8px; font-size:10px; padding:2px 8px; }
.sec-tool .launch-fixed { display:none; }   /* the four paragraphs are lifted into section five by the build; the class stays for the vendored rule */
.result-restored { max-width:780px; margin:0 0 22px; padding:12px 14px; border-left:2px solid var(--accent); background:var(--panel); color:var(--ink-2); font-size:14px; line-height:1.55; }
.result-tools { margin-top:20px; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--panel); display:grid; gap:14px; }
.result-context { margin:0; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-3); }
.result-context strong { color:var(--ink); font-weight:600; }
.result-share { display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; }
.result-receipt { padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; }
.result-receipt-actions { display:flex; gap:8px; flex-wrap:wrap; }
.result-share-note { color:var(--ink-3); font-size:13px; line-height:1.5; max-width:620px; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

/* section five, what it cannot tell you: the vendored fixed paragraphs, verbatim, larger */
.sec .launch-fixed { margin-top:22px; max-width:780px; display:grid; gap:18px; }
.sec .launch-fixed p { font-size:17px; line-height:1.6; color:var(--ink-2); margin:0; }

/* the chain block: three paragraphs at reading width, no figure and no date in any of them */
.sec-chain .sec-p { max-width:780px; }

/* ---------------------------------------------------------------- cells: the window, the collector figures, the live tiles */
.cells { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:14px; }
.cells-tight { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.cell { background:var(--panel); padding:20px 22px; }
.cell-sm { padding:16px 18px; }
.cell .badge { margin-bottom:12px; }
.cell-v { font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--ink); line-height:1.35; overflow-wrap:anywhere; white-space:pre-line; }
.cell-sm .cell-v { font-size:17px; }
.cell-l { font-size:13px; color:var(--ink-3); margin-top:8px; }
.cell-sm .cell-l { margin-top:4px; }

/* ---------------------------------------------------------------- what this reads, definitions, reproduce, faq, method */
.reads { margin-top:14px; }
.reads-row { display:flex; flex-wrap:wrap; gap:6px 16px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.reads-id { flex:0 0 34px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-3); }
.reads-check { flex:0 0 160px; font-size:15px; font-weight:600; }
.reads-what { flex:1 1 240px; min-width:0; font-size:15px; line-height:1.55; color:var(--ink-2); }
.defs { margin:22px 0 0; max-width:780px; display:grid; gap:18px; }
.def { display:grid; grid-template-columns:minmax(0,140px) minmax(0,1fr); gap:6px 20px; }
.def dt { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink); }
.def dd { margin:0; font-size:15px; line-height:1.6; color:var(--ink-2); }
.defs-close { margin-top:24px; max-width:640px; }
.cmd { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--panel-2); border:1px solid var(--line); border-radius:18px; padding:18px 20px; max-width:780px; margin-top:20px; }
.cmd-code { font-size:15px; color:var(--accent); }
.cmd .btn-quiet { margin-left:auto; }
.cmds { display:grid; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:18px; padding:18px 20px; max-width:780px; margin-top:20px; }
.cmd-line { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:4px 18px; align-items:baseline; }
.cmd-line code { font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--accent); overflow-wrap:anywhere; }
.cmd-line span { font-size:14px; line-height:1.5; color:var(--ink-3); }
.cmd-line-wide { grid-template-columns:minmax(0,1fr); }
/* the roadmap as a line: one tick per item of shipped, next and later, labels staggered above and below so they do
   not collide, and the sprite standing where shipped ends. The line carries no axis, no date and no quarter: it shows
   the order things are done in, which is the only thing the page is willing to say about what has not happened yet.
   Not one string is rewritten to get here; the three columns became eight stops on one rule. */
.road-line { --ph-h:28px; --up-h:128px; --tick-h:14px; --dn-h:104px; position:relative; display:grid; grid-template-columns:3fr 3fr 2fr; margin:34px 0 6px; }
.road-line::before { content:""; position:absolute; left:0; right:0; top:calc(var(--ph-h) + var(--up-h) + var(--tick-h) / 2); height:1px; background:var(--line); }
.road-group { position:relative; min-width:0; }
.road-ph { height:var(--ph-h); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); }
.road-stops { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); height:calc(var(--up-h) + var(--tick-h) + var(--dn-h)); margin:0; padding:0; list-style:none; }
.road-stop { position:relative; min-width:0; }
.road-tick { position:absolute; top:var(--up-h); left:50%; width:2px; height:var(--tick-h); margin-left:-1px; background:var(--ink-3); }
.road-label { position:absolute; left:50%; width:min(202px,200%); transform:translateX(-50%); padding-right:14px; box-sizing:border-box; font-size:13px; line-height:1.45; color:var(--ink-2); text-wrap:pretty; }
.road-up .road-label { bottom:calc(var(--dn-h) + var(--tick-h) + 48px); }   /* the sprite stands in the first forty pixels above the line: the labels clear it */
.road-down .road-label { top:calc(var(--up-h) + var(--tick-h) + 13px); }
.road-group:first-child .road-stop:first-child .road-label { left:0; transform:none; }
.road-group:last-child .road-stop:last-child .road-label { left:auto; right:0; transform:none; text-align:right; }
[data-phase="shipped"] .road-ph, [data-phase="shipped"] .road-label { color:var(--accent); }
[data-phase="shipped"] .road-tick { top:calc(var(--up-h) - 3px); height:calc(var(--tick-h) + 6px); background:var(--accent); }
[data-phase="next"] .road-ph { color:var(--ink); }
[data-phase="next"] .road-tick { background:var(--ink-2); }
[data-phase="later"] .road-label { color:var(--ink-3); }
[data-phase="later"] .road-tick { background:var(--line); }
/* the sprite stands on the line where shipped ends and next begins: the left edge of the next group is that boundary,
   so the position is the markup's own and not a percentage fitted by eye */
.road-sprite { position:absolute; left:0; top:calc(var(--ph-h) + var(--up-h) + var(--tick-h) / 2); transform:translate(-50%,-100%); z-index:1; }
.telegram-app-callout { max-width:720px; box-sizing:border-box; margin:20px 0 6px; padding:20px 22px; border:1px solid var(--accent-line); border-radius:14px; background:var(--panel); }
.telegram-app-title { margin:0; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.telegram-app-callout .sec-p { margin:8px 0 0; }
.telegram-app-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.telegram-app-button { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; padding:10px 16px; border:1px solid var(--btn-quiet-line); border-radius:999px; color:var(--ink-2); }
.telegram-app-button:hover { border-color:var(--accent); color:var(--accent); }
.road-close { margin-top:24px; max-width:640px; }
.faq { margin-top:22px; max-width:780px; display:grid; gap:26px; }
.qa h3 { font-size:17px; font-weight:600; margin:0 0 8px; }
.qa p { font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; }
.tbl { border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.tbl-row { display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:6px 16px; padding:14px 20px; border-top:1px solid var(--line-soft); background:var(--panel); }
.tbl-head { display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:16px; padding:12px 20px; background:var(--panel-2); border-top:0; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.tbl-k { font-family:'IBM Plex Mono',monospace; font-size:13px; }
.tbl-v { font-size:15px; line-height:1.55; color:var(--ink-2); }
.tbl-v code, .sec-p code { font-family:'IBM Plex Mono',monospace; font-size:13px; }
.tbl-idx .tbl-row, .tbl-idx .tbl-head { grid-template-columns:minmax(0,1fr) 100px; }
.tbl-idx .tbl-row { padding:11px 20px; font-family:'IBM Plex Mono',monospace; font-size:13px; }
.tbl-idx .tbl-n { text-align:right; }
.tbl-idx .tbl-total { background:var(--panel-2); border-top:1px solid var(--line); color:var(--ink); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.card { border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:18px 20px; font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.9; color:var(--ink-2); overflow-wrap:anywhere; }
.card-t { font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.card-t + .card-t, .card > div + .card-t { margin-top:16px; }
.card .to { color:var(--ink-3); }
.skel { border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:20px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-2); }
.skel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:6px 18px; line-height:1.9; }
.skel-foot { border-top:1px solid var(--line-soft); margin-top:16px; padding-top:14px; display:grid; gap:6px; line-height:1.9; }
.skel-foot .lbl { color:var(--ink-3); margin-right:0.6em; }
.skel .to { color:var(--ink-3); }

/* ---------------------------------------------------------------- the lore section: six cards, two columns while
   there is room. Each card is a thin acid rule at its left edge and nothing else: no panel, no border box, so six
   long paragraphs read as prose rather than as six boxes. */
.lore { margin:22px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:26px 34px; }   /* two columns at the page's width: these are paragraphs, not tiles, and a third column would make them a stack of narrow strips */
.lore-card { border-left:2px solid var(--accent); padding-left:18px; }
.lore-card[data-lore-mark] { display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 20px; }
.lore-card[data-lore-mark] .sprite { grid-row:span 2; align-self:start; margin-top:2px; }
.lore-t { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; letter-spacing:0.04em; color:var(--ink); margin:0 0 8px; }
.lore-p { font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; }

/* the roadmap's added blocks: the columns and roadmap.close are untouched, these sit between them. The never list
   takes an acid dash as its marker, which is the one place acid appears in this block. */
.road-intro { margin-top:28px; }
.never { margin:14px 0 0; padding:0; max-width:780px; list-style:none; display:grid; gap:10px; }
.never li { position:relative; padding-left:22px; font-size:15px; line-height:1.6; color:var(--ink-2); }
.never li::before { content:""; position:absolute; left:0; top:0.62em; width:7px; height:1px; background:var(--accent); }

/* the same dash on what this is not, scoped to that section so the definitions list keeps its own shape */
.sec-not .def dt { position:relative; padding-left:22px; }
.sec-not .def dt::before { content:""; position:absolute; left:0; top:0.62em; width:7px; height:1px; background:var(--accent); }

/* the run section in cards: three steps across, then one wide card under them. The cells grid is the page's card
   block already, so the cards arrive with its hairlines and its radius and nothing new is invented. */
/* three fixed columns rather than the shared auto-fit: with three items auto-fit leaves an empty track in the last
   row at two-column widths, and an empty card is the one thing this page does not do. Three across, then one. */
.cells-run { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cells-run .cell, .cells-run-wide .cell { display:grid; align-content:start; gap:10px; }
.cell-t { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.cells-run .cell-l, .cells-run-wide .cell-l { margin-top:0; }
.cells-run .cmd-line, .cells-run-wide .cmd-line { grid-template-columns:minmax(0,1fr); gap:3px; }

/* ---------------------------------------------------------------- the accents that need a selector of their own.
   The rest of them are edits to the rule that already owned the thing: the section number, the kicker, the snapshot
   badge's border and a link's underline under the cursor.
   Acid deliberately stays off: the shared, lookalike and unique states, which carry their own colour, a word and a
   shape; the chart figures, keys, values and axis; anything that could read as good or bad. */
.tbl-v code, .sec-p code, .cells-run .cmd-line code, .cells-run-wide .cmd-line code { color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); border-radius:4px; padding:1px 5px; }
/* the arrow in a method table. Those tables are emitted by tools/build-method.mjs, which is not in this workset, so
   the class name here is the one the rest of the site uses for an arrow and the rule is scoped inside the table: if
   the arrow turns out to be a bare character in a text node, this matches nothing and changes nothing. */
.tbl .arrow, .tbl-v .arrow, .tbl-k .arrow { color:var(--accent); }

/* ---------------------------------------------------------------- section ten: three real charts, then the ornament */
.chart { border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:24px; margin-bottom:20px; }
.chart-orn { background:var(--panel-2); overflow:hidden; margin-bottom:0; }
.chart-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.chart-orn .chart-head { margin-bottom:16px; }
.chart-title { font-size:14px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; margin:0; }
.chart-caption { font-size:14px; line-height:1.55; color:var(--ink-3); margin:0 0 20px; max-width:620px; }
.chart-rows { display:grid; gap:7px; margin-top:14px; }
.chart-row { display:grid; grid-template-columns:64px minmax(0,1fr) 64px; gap:12px; align-items:center; }
.chart-row-wide { grid-template-columns:104px minmax(0,1fr) 64px; }
.chart-key { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-3); text-align:right; }
.chart-track { height:14px; background:var(--bar-track); border-radius:3px; overflow:hidden; }
.chart-row-wide .chart-track { height:16px; }
.chart-bar { display:block; height:100%; min-width:2px; background:var(--accent); border-radius:3px; transform-origin:left center; transition:transform 780ms cubic-bezier(.2,.7,.2,1); }
.chart-val { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-2); }
.chart-val-zero { color:var(--ink-3); }
.chart-axis { display:flex; justify-content:space-between; gap:12px; margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-3); border-top:1px solid var(--line-soft); padding-top:10px; }
.orn { font-family:'IBM Plex Mono',monospace; font-size:14px; line-height:1.9; color:var(--accent); user-select:none; overflow:hidden; }
.orn-row { display:flex; justify-content:space-between; gap:2px; }
.orn span { opacity:0.1; animation-name:lc-drift; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }

/* ---------------------------------------------------------------- the token, section part: rendered only with an address */
.token-sec { position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:52px 24px 8px; box-sizing:border-box; }
.token-address { display:block; font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; max-width:780px; overflow-wrap:anywhere; margin-top:22px; }
.token-btns { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.token-btn { font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:13px 22px; border-radius:999px; border:0 !important; }
.token-btn-pons { background:var(--accent); color:var(--accent-ink) !important; }
.token-btn-pons:hover { opacity:0.86; }
.token-btn-uni { border:1px solid var(--accent-line) !important; padding:12px 22px; background:transparent; color:var(--accent) !important; }
.token-btn-uni:hover { border-color:var(--accent) !important; }
.token-sec .cells { max-width:780px; margin-top:26px; }
.token-sec .cell { padding:18px 20px; }
.token-sec .cell-v { font-size:22px; }

/* ---------------------------------------------------------------- live wall: a separate, read-only view of the
   publishable name/ticker suffix. API strings stay in isolated table cells; status and coverage remain global. */
:is([data-live-page],[data-history-page]) .live-page { padding-bottom:72px; }
:is([data-live-page],[data-history-page]) .live-hero { padding-bottom:12px; }
:is([data-live-page],[data-history-page]) .wall-cells { grid-template-columns:repeat(4,minmax(0,1fr)); }
:is([data-live-page],[data-history-page]) .wall-cells .cell-v { font-size:17px; }
:is([data-live-page],[data-history-page]) .wall-controls { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
:is([data-live-page],[data-history-page]) .btn-quiet:disabled { cursor:not-allowed; opacity:0.5; }
:is([data-live-page],[data-history-page]) .wall-state { min-height:1.6em; margin:14px 0 0; font-size:14px; line-height:1.6; color:var(--ink-2); }
:is([data-live-page],[data-history-page]) .wall-gap-note { margin-top:18px; }
:is([data-live-page],[data-history-page]) .wall-find { display:flex; align-items:end; justify-content:space-between; gap:14px 20px; flex-wrap:wrap; margin-top:20px; }
:is([data-live-page],[data-history-page]) .wall-search { display:grid; gap:7px; min-width:min(100%,320px); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }
:is([data-live-page],[data-history-page]) .wall-search input { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); font:400 14px/1.4 'IBM Plex Mono',monospace; letter-spacing:0; text-transform:none; }
:is([data-live-page],[data-history-page]) .wall-search input:focus { outline:2px solid var(--accent); outline-offset:2px; }
:is([data-live-page],[data-history-page]) .wall-filter-state { min-height:1.5em; margin:10px 0 0; color:var(--ink-3); font-size:13px; line-height:1.5; }
:is([data-live-page],[data-history-page]) .wall-table-wrap { margin-top:20px; border:1px solid var(--line); border-radius:18px; overflow-x:auto; background:var(--panel); }
:is([data-live-page],[data-history-page]) .wall-table { width:100%; border-collapse:collapse; table-layout:fixed; }
:is([data-live-page],[data-history-page]) .wall-table th { padding:12px 20px; border-bottom:1px solid var(--line); background:var(--panel-2); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:0.14em; text-align:left; text-transform:uppercase; color:var(--ink-3); }
:is([data-live-page],[data-history-page]) .wall-table td { width:50%; padding:15px 20px; border-top:1px solid var(--line-soft); font-size:15px; line-height:1.55; color:var(--ink-2); vertical-align:top; overflow-wrap:anywhere; word-break:break-word; }
:is([data-live-page],[data-history-page]) .wall-table tbody tr:first-child td { border-top:0; }
:is([data-live-page],[data-history-page]) .wall-table bdi { unicode-bidi:isolate; }
:is([data-live-page],[data-history-page]) .wall-read { color:inherit; text-decoration:none; border-bottom:1px solid transparent; }
:is([data-live-page],[data-history-page]) .wall-read:hover, :is([data-live-page],[data-history-page]) .wall-read:focus-visible { color:var(--accent); border-bottom-color:currentColor; }
:is([data-live-page],[data-history-page]) .wall-ticker { font-family:'IBM Plex Mono',monospace; color:var(--ink); }
:is([data-live-page],[data-history-page]) .wall-empty { width:auto !important; text-align:center; color:var(--ink-3) !important; }
:is([data-live-page],[data-history-page]) .wall-hash code { color:var(--ink-2); }
:is([data-live-page],[data-history-page]) .wall-boundary { margin-top:12px; }
[data-history-page] .history-form { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
[data-history-page] .history-address { flex:1 1 520px; }
[data-history-page] .history-filter { margin-top:20px; }
[data-history-page] .history-table { min-width:760px; }
[data-history-page] .history-table td { width:auto; }
[data-history-page] .history-table th:first-child, [data-history-page] .history-table td:first-child { width:110px; }
[data-history-page] .history-table th:nth-child(2), [data-history-page] .history-table td:nth-child(2) { width:110px; }
[data-history-page] .history-block, [data-history-page] .history-date { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-3); }

/* ---------------------------------------------------------------- footer */
.foot { position:relative; z-index:1; border-top:1px solid var(--line); background:var(--panel); }
.foot-in { max-width:1080px; margin:0 auto; padding:30px 24px 48px; display:grid; gap:16px; }
.foot-links { display:flex; gap:22px; flex-wrap:wrap; align-items:center; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; }
.foot .foot-links a { border:0; color:var(--ink-2); }
.foot .foot-links a:hover { color:var(--accent); }
.foot-licence { color:var(--ink-3); }
.foot-p { font-size:14px; line-height:1.6; color:var(--ink-3); margin:0; max-width:720px; }

/* ---------------------------------------------------------------- the launch band: full width under the footer, rendered
   by the build only when site/token.json carries an address. The one place on the page where the acid does not follow the
   theme: the brief fixes the ground at the dark palette's accent, so the ink and the button are fixed dark against it in
   both themes rather than inverting with --accent. The button is the same handler as the contract row's (data-copy-address
   in site/chain.js), styled dark here because an accent-on-accent outline would not be visible. */
.band { position:relative; z-index:1; background:#d4fc50; }
.band-in { max-width:1080px; margin:0 auto; padding:15px 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; box-sizing:border-box; }
.band-address { font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; letter-spacing:0.01em; color:#08090a; overflow-wrap:anywhere; min-width:0; }
.band-copy { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; padding:7px 13px; border-radius:999px; border:1px solid #08090a; background:transparent; color:#08090a; cursor:pointer; transition:background 200ms linear, color 200ms linear; }
.band-copy:hover { background:#08090a; color:#d4fc50; }
body[data-page="chain"] .band-copy:focus-visible { outline:2px solid #08090a; outline-offset:2px; }

/* ---------------------------------------------------------------- motion, and the switch that stops all of it */
@keyframes lc-drift { 0%,100% { opacity:0.06; } 50% { opacity:0.34; } }
@keyframes lc-caret { 0%,45% { opacity:1; } 55%,100% { opacity:0; } }
@keyframes lc-fall { 0% { top:0; opacity:0; } 3% { opacity:1; } 18% { top:100%; opacity:1; } 24% { opacity:0; } 100% { top:100%; opacity:0; } }
@keyframes lc-wash { 0%,100% { opacity:0.55; } 50% { opacity:1; } }
@keyframes lc-pulse { 0%,100% { opacity:0.35; } 50% { opacity:1; } }
@keyframes lc-sweep { from { transform:translateY(0); opacity:0.9; } to { transform:translateY(var(--sweep,600px)); opacity:0; } }
@keyframes lc-blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .orn span, [data-pulse], .caret, .sweep, [data-wash], [data-particle], .dg-inbound-dot, .sprite .cut { animation:none !important; }
  [data-particle], .dg-inbound-dot, .sweep { display:none !important; }
  .orn span { opacity:0.16 !important; }
  .chart-bar { transition:none !important; transform:scaleX(1) !important; }
  .nav-bar, .num, .dg-stage, .topbar { transition:none !important; }
}

/* the roadmap line stands on its end below the width where eight stops stop fitting: the same ticks in the same
   order, read top to bottom instead of left to right, and the sprite still where shipped ends */
@media (max-width:1180px) {
  .topbar[data-topbar] .section-nav { order:4; }
}
@media (max-width:980px) {
  .topbar .section-nav { flex:1 1 100%; width:100%; min-width:0; max-width:100%; box-sizing:border-box; margin:0; flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; scrollbar-width:none; }
  .topbar .section-nav::-webkit-scrollbar { display:none; }
  .road-line { grid-template-columns:minmax(0,1fr); margin-top:26px; }
  .road-line::before { left:6px; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .road-group { padding-left:26px; }
  .road-ph { height:auto; margin:18px 0 10px; }
  .road-group:first-child .road-ph { margin-top:0; }
  .road-stops { grid-auto-flow:row; grid-auto-columns:auto; height:auto; gap:12px; }
  .road-stop { padding-left:0; }
  .road-tick { top:8px; left:-26px; width:12px; height:2px; margin:0; }
  [data-phase="shipped"] .road-tick { top:7px; left:-28px; width:16px; height:3px; }
  .road-label, .road-group:first-child .road-stop:first-child .road-label, .road-group:last-child .road-stop:last-child .road-label { position:static; width:auto; padding-right:0; transform:none; text-align:left; }
  .road-sprite { left:6px; top:0; transform:translate(-50%,-46%); }
  :is([data-live-page],[data-history-page]) .wall-cells { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------------------------------------------------------------- narrow */
@media (max-width:640px) {
  .bar-in { gap:12px 16px; }
  .topbar[data-topbar] .cluster { order:2; flex:1 1 100%; justify-content:flex-end; }
  .topbar[data-topbar] .header-tools { order:1; }
  .page-switch { order:3; flex:1 1 100%; width:100%; min-width:0; max-width:100%; box-sizing:border-box; gap:12px; overflow-x:auto; scrollbar-width:none; }
  .page-switch::-webkit-scrollbar { display:none; }
  .section-nav { margin:0; order:4; flex:1 1 100%; width:100%; min-width:0; max-width:100%; box-sizing:border-box; gap:9px; font-size:10px; letter-spacing:0.06em; flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; scrollbar-width:none; }   /* the narrowest section rows scroll, and overflow-x is that guard */
  .section-nav::-webkit-scrollbar { display:none; }
  .nav-bar { bottom:0; }
  .cmd-line { grid-template-columns:minmax(0,1fr); }
  .hero { padding-top:48px; }
  .sec-tool .launch-row { flex-direction:column; }
  .sec-tool .launch-check { flex-basis:auto; }
  .band-in { padding:13px 24px; gap:10px 12px; }
  .band-address { font-size:12px; }
  .lore { grid-template-columns:minmax(0,1fr); }
  .lore-card { padding-left:14px; }
  .lore-card[data-lore-mark] { grid-template-columns:minmax(0,1fr); gap:12px; }
  .lore-card[data-lore-mark] .sprite { grid-row:auto; }
  .sprite-l { width:48px; height:48px; }
  .cells-run { grid-template-columns:minmax(0,1fr); }
  .cells-run .cmd-line code, .cells-run-wide .cmd-line code { font-size:13px; }
  :is([data-live-page],[data-history-page]) .wall-cells { grid-template-columns:minmax(0,1fr); }
  :is([data-live-page],[data-history-page]) .wall-table { min-width:520px; }
  :is([data-live-page],[data-history-page]) .wall-table th, :is([data-live-page],[data-history-page]) .wall-table td { padding-left:16px; padding-right:16px; }
}