:root {
  --paper: #f6f4ed;
  --surface: #fffef9;
  --ink: #181b22;
  --muted: #656b73;
  --line: #d8d8d1;
  --blue: #3659cf;
  --blue-soft: #e7ecff;
  --cyan: #1a7f88;
  --cyan-soft: #ddf1f0;
  --orange: #b85c25;
  --orange-soft: #f7e6da;
  --green: #1b7059;
  --green-soft: #dff1e9;
  --red: #b54232;
  --red-soft: #f8e3df;
  --night: #1b2029;
  --night-2: #252c37;
  --body: "Atkinson Hyperlegible", sans-serif;
  --display: "Bricolage Grotesque", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.chain-post {
  max-width: 1120px;
  background:
    radial-gradient(circle at 96% 5%, rgba(54, 89, 207, .08), transparent 23rem),
    var(--paper);
  color: var(--ink);
  font-family: var(--body);
}

.reading-progress { position: fixed; z-index: 100; inset: 0 0 auto; height: 3px; background: rgba(24, 27, 34, .1); }
.reading-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--orange)); transform: scaleX(0); transform-origin: left; }
.skip-link { position: fixed; z-index: 110; top: .75rem; left: .75rem; padding: .65rem .85rem; color: white; background: var(--night); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.chain-post header { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.chain-post .post { max-width: none; padding-top: clamp(3.4rem, 7vw, 5.5rem); }
.post-hero { max-width: 920px; }
.chain-post h1 { max-width: 880px; margin-top: .8rem; font: 720 clamp(3.25rem, 7vw, 5.6rem)/.95 var(--display); letter-spacing: -.058em; }
.chain-post article { max-width: 980px; margin-top: clamp(4rem, 8vw, 7rem); font-size: 1.09rem; }
.myth { max-width: 760px; margin: clamp(2rem, 4vw, 2.9rem) 0 1rem; font: 650 clamp(1.55rem, 2.8vw, 2.35rem)/1.15 var(--display); letter-spacing: -.032em; }
.myth span { display: block; margin-bottom: .65rem; color: var(--red); font: 500 .63rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.stakes, .hero-promise { max-width: 690px; margin: .9rem 0 0; color: var(--muted); font-size: clamp(1.08rem, 1.6vw, 1.24rem); line-height: 1.6; }
.stakes { color: var(--ink); font-weight: 700; }
.story-start, .story-end { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.55rem; padding: .8rem 1.05rem; color: white; border-radius: 999px; background: var(--night); font-weight: 700; text-decoration: none; }
.story-start:hover, .story-end:hover { background: var(--blue); }

.lesson { margin: 0; padding: clamp(4.5rem, 9vw, 7.5rem) 0 0; border: 0; }
.opening-lesson { padding-top: 0; }
.section-copy { max-width: 750px; }
.section-index { display: flex; align-items: center; gap: .5rem; margin: 0 0 .65rem; color: var(--blue); font: 500 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.section-index::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.chain-post article h2 { max-width: 820px; margin: 0; scroll-margin-top: 2rem; font: 680 clamp(2.1rem, 4.5vw, 3.8rem)/1.01 var(--display); letter-spacing: -.047em; }
.section-copy > p:last-child { max-width: 660px; margin: 1rem 0 0; color: var(--muted); font-size: 1.07rem; line-height: 1.62; }
.reading { max-width: 700px; margin-top: 2rem; }
.reading p { margin: 0 0 1rem; color: #383d44; line-height: 1.72; }
.reading p:last-child { margin-bottom: 0; }
.reading code, .deep-note code, .source-note code { padding: .1rem .28rem; background: #e8e6df; font: .82em var(--mono); }
.keep-rule { max-width: 750px; margin: 1.7rem 0 0; padding: 1rem 1.1rem; border-left: 3px solid var(--green); background: var(--green-soft); font-weight: 700; line-height: 1.55; }
.keep-rule span { display: block; margin-bottom: .28rem; color: var(--green); font: 500 .57rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.open-thread { max-width: 700px; margin: 1.5rem 0 0; padding-left: 1rem; color: var(--blue); border-left: 1px solid var(--blue); font-style: italic; line-height: 1.6; }
.deep-note { max-width: 790px; margin-top: 1.5rem; border-block: 1px solid var(--line); }
.deep-note summary { padding: 1rem 0; color: var(--ink); font-weight: 700; cursor: pointer; }
.deep-note > p { max-width: 700px; color: #454a52; line-height: 1.64; }
.deep-note[open] { padding-bottom: 1rem; }
.static-note { max-width: 760px; padding: 1rem; color: #34404d; border-left: 3px solid var(--blue); background: var(--blue-soft); line-height: 1.6; }

button { font-family: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.run-button, .reset-button, .danger-button, .secondary-button { min-height: 44px; padding: .64rem .92rem; border: 1px solid var(--night); font-weight: 700; cursor: pointer; }
.run-button { color: white; background: var(--night); }
.run-button:hover { background: var(--blue); border-color: var(--blue); }
.reset-button { color: var(--ink); background: transparent; }
.reset-button:hover { background: white; }
.danger-button { color: #78382f; border-color: #da9b91; background: var(--red-soft); }
.danger-button:hover { border-color: var(--red); }
.secondary-button { color: #244e4e; border-color: #91c3c0; background: var(--cyan-soft); }
.secondary-button:hover { border-color: var(--cyan); }
.run-button:disabled, .reset-button:disabled, .danger-button:disabled, .secondary-button:disabled { opacity: .42; cursor: default; }
.lab-controls { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.lab-status { margin: 0; color: var(--muted); font: .64rem/1.55 var(--mono); }
.sr-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Opening journey */
.journey-lab { display: grid; grid-template-columns: .7fr 1.45fr; gap: 1rem; max-width: 960px; margin-top: 2rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid #353e4b; border-radius: 20px; background: var(--night); box-shadow: 9px 9px 0 #d5d3cb; }
.withdraw-card { display: grid; align-content: start; gap: .55rem; min-height: 330px; padding: 1.25rem; color: #eff3ff; border: 1px solid #424c5c; border-radius: 14px; background: linear-gradient(155deg, #2d3747, #202631); }
.withdraw-card > span { color: #a9b4c5; font: .56rem var(--mono); text-transform: uppercase; }
.withdraw-card > strong { margin-bottom: 1rem; font: 650 clamp(2rem, 4vw, 3.1rem)/1 var(--display); letter-spacing: -.045em; }
.withdraw-card > strong b { color: #9db0ff; font-weight: inherit; }
.withdraw-card dl { display: grid; gap: .45rem; margin: 0 0 auto; }
.withdraw-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .45rem; border-bottom: 1px solid #3e4755; }
.withdraw-card dt { color: #aab2c0; font-size: .76rem; }
.withdraw-card dd { margin: 0; font-weight: 700; }
.withdraw-card code { padding: 0; color: #bdc9ff; background: transparent; font: .72rem var(--mono); }
.withdraw-card .run-button { margin-top: 1rem; color: var(--night); border-color: #aebeff; background: #aebeff; }
.withdraw-card .run-button:hover { color: white; border-color: var(--blue); background: var(--blue); }
.withdraw-card .reset-button { color: #dbe2ee; border-color: #687385; }
.journey-rail { display: grid; grid-template-columns: 1fr 1fr; gap: .48rem; margin: 0; padding: 0; list-style: none; }
.journey-rail li { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; align-items: center; min-height: 72px; padding: .78rem .85rem; color: #a8b0be; border: 1px solid #3b4452; border-radius: 10px; background: #222934; opacity: .48; transition: opacity .2s, transform .2s, border-color .2s, background .2s; }
.journey-rail span { grid-row: span 2; color: #738094; font: .52rem var(--mono); }
.journey-rail strong { color: #dde3ec; font: 650 .95rem var(--display); }
.journey-rail small { font-size: .7rem; }
.journey-rail li.is-active { opacity: 1; border-color: #91a5ff; background: #2c3550; transform: translateY(-2px); }
.journey-rail li.is-complete { opacity: 1; border-color: #4e8876; background: #263a36; }
.journey-receipt { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: center; padding: 1rem 1.1rem; color: #d9dfe8; border-radius: 11px; background: #11161d; }
.journey-receipt > span { grid-row: span 2; min-width: 90px; color: #93a9ff; font: .56rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.journey-receipt strong { font: 650 1rem var(--display); }
.journey-receipt p { margin: 0; color: #aab2bf; font-size: .8rem; line-height: 1.45; }
.journey-receipt.is-complete > span { color: #7fd0b2; }

/* Prediction gates */
.prediction { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 870px; margin-top: 2rem; padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.prediction pre { grid-row: span 2; margin: 0; padding: 1rem; overflow-x: auto; color: #d6dce6; border-radius: 10px; background: var(--night); font: .72rem/1.7 var(--mono); }
.prediction pre code { padding: 0; background: transparent; }
.prediction fieldset { display: grid; gap: .48rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.prediction legend { margin-bottom: .65rem; font: 650 1rem var(--display); }
.prediction fieldset button { display: grid; grid-template-columns: auto 1fr; gap: .6rem; min-height: 43px; padding: .62rem .72rem; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #faf9f4; text-align: left; cursor: pointer; }
.prediction fieldset button:hover { border-color: var(--blue); }
.prediction fieldset button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
.prediction fieldset button:disabled { cursor: default; }
.prediction fieldset code { padding: 0; background: transparent; font: .65rem var(--mono); }
.answer { grid-column: 2; padding-top: .8rem; border-top: 1px solid var(--line); }
.answer p { margin: 0; line-height: 1.55; }
.answer-result { margin-bottom: .35rem !important; color: var(--green); font: 700 .65rem var(--mono); text-transform: uppercase; }

/* Replicated ledger */
.ledger-lab { display: grid; grid-template-columns: .78fr 1.22fr; gap: .85rem; max-width: 920px; margin-top: 2rem; padding: clamp(1rem, 3vw, 1.4rem); border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.local-ledger { display: grid; align-content: center; gap: .45rem; min-height: 160px; padding: 1rem; border: 1px dashed #c98d82; border-radius: 11px; background: var(--red-soft); }
.local-ledger span, .network-ledgers span { color: var(--muted); font: .55rem var(--mono); text-transform: uppercase; }
.local-ledger strong { font: 650 1.25rem var(--display); }
.local-ledger b { color: var(--red); font-weight: inherit; }
.local-ledger small { color: #75534d; line-height: 1.45; }
.network-ledgers { display: grid; gap: .48rem; }
.network-ledgers div { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 50px; padding: .75rem .85rem; border: 1px solid #bec8eb; border-radius: 9px; background: var(--blue-soft); transition: border-color .2s, background .2s, transform .2s; }
.network-ledgers strong { font: 600 .76rem var(--mono); }
.network-ledgers div.is-updated { border-color: #85b9a7; background: var(--green-soft); transform: translateX(4px); }
.ledger-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .15rem; }
.ledger-lab > .lab-status { grid-column: 1 / -1; }

/* Vault signing */
.vault-lab { display: grid; grid-template-columns: .7fr 1.3fr .7fr; gap: .75rem; max-width: 950px; margin-top: 2rem; padding: clamp(1rem, 3vw, 1.4rem); color: #e8edf5; border-radius: 18px; background: var(--night); box-shadow: 8px 8px 0 #d3d1c9; }
.vault-request, .signed-envelope { display: grid; align-content: center; gap: .45rem; min-height: 185px; padding: 1rem; border: 1px solid #4a5463; border-radius: 11px; background: #252d38; }
.vault-request > span, .signed-envelope > span { color: #9da8b7; font: .54rem var(--mono); text-transform: uppercase; }
.vault-request strong, .signed-envelope strong { font: 650 1.05rem var(--display); }
.vault-request code { padding: 0; color: #aebeff; background: transparent; font: .78rem var(--mono); }
.vault-request small, .signed-envelope small { color: #aeb6c1; line-height: 1.45; }
.vault-room { display: grid; gap: .45rem; }
.vault-room div { display: grid; grid-template-columns: auto 1fr; gap: .2rem .65rem; align-items: center; min-height: 58px; padding: .7rem .78rem; border: 1px solid #3f4856; border-radius: 9px; background: #222934; opacity: .43; transition: opacity .2s, border-color .2s, background .2s; }
.vault-room i { grid-row: span 2; width: 10px; height: 10px; border: 1px solid #6d7888; border-radius: 50%; }
.vault-room span { color: #9eabba; font: .52rem var(--mono); text-transform: uppercase; }
.vault-room strong { font-size: .78rem; line-height: 1.35; }
.vault-room div.is-active { opacity: 1; border-color: #8ba1fc; background: #2d3650; }
.vault-room div.is-complete { opacity: 1; border-color: #5b9a83; background: #263a35; }
.vault-room div.is-complete i { border-color: #79c4a7; background: #79c4a7; box-shadow: 0 0 0 4px rgba(121, 196, 167, .12); }
.signed-envelope.is-signed { border-color: #73b49e; background: #243b35; }
.signed-envelope.is-signed strong { color: #8dd1b8; }
.vault-lab > .lab-controls, .vault-lab > .lab-status { grid-column: 1 / -1; }
.vault-lab .run-button { color: var(--night); border-color: #acbdff; background: #acbdff; }
.vault-lab .reset-button { color: #e9eef7; border-color: #687486; }
.vault-lab .lab-status { color: #aeb6c1; }

/* Native asset vs token */
.asset-lab { max-width: 900px; margin-top: 2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.asset-tabs, .destination-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.asset-tabs button, .destination-tabs button { min-height: 52px; color: var(--muted); border: 0; border-right: 1px solid var(--line); background: #f8f7f2; font: 600 .7rem var(--mono); cursor: pointer; }
.asset-tabs button:last-child, .destination-tabs button:last-child { border-right: 0; }
.asset-tabs button[aria-selected="true"], .destination-tabs button[aria-selected="true"] { color: var(--ink); background: var(--blue-soft); }
.asset-path { display: grid; grid-template-columns: .7fr 1.6fr .7fr; gap: .7rem; padding: 1.2rem; }
.asset-path > div { display: grid; align-content: center; gap: .4rem; min-height: 125px; padding: .9rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.asset-path span { color: var(--muted); font: .54rem var(--mono); text-transform: uppercase; }
.asset-path strong { font: 650 1rem var(--display); }
.asset-path code { padding: 0; color: var(--blue); background: transparent; font: .72rem var(--mono); }
.asset-path .asset-machine { color: #edf1f8; border-color: var(--night); background: var(--night); }
.asset-machine span { color: #a9b2c0; }
.asset-machine p { margin: 0; color: #b7c0cc; font-size: .82rem; line-height: 1.45; }
.asset-machine.is-token { color: #fff1e6; border-color: #814621; background: #66391f; }
.asset-machine.is-token span, .asset-machine.is-token p { color: #e9c8b2; }
.asset-code { margin: 0; padding: 1rem 1.2rem; overflow-x: auto; color: #d9dfea; border-top: 1px solid #39414e; background: var(--night); font: .72rem/1.7 var(--mono); }
.asset-code code { padding: 0; background: transparent; }
.asset-lab .lab-status { padding: .9rem 1.2rem; border-top: 1px solid var(--line); }

/* Transaction lifecycle */
.lifecycle-lab { display: grid; grid-template-columns: .72fr 1.28fr; gap: 1rem; max-width: 940px; margin-top: 2rem; padding: clamp(1rem, 3vw, 1.4rem); color: #e6ebf3; border-radius: 18px; background: var(--night); }
.block-stage { display: flex; align-items: center; justify-content: center; min-height: 260px; perspective: 800px; }
.chain-block { display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid #60708a; border-radius: 12px; background: linear-gradient(145deg, #3c485a, #252d38); box-shadow: 8px 10px 0 #11161d; font: 650 .72rem var(--mono); transform: rotateX(58deg) rotateZ(-34deg); transition: border-color .2s, background .2s, color .2s; }
.block-old { color: #9ca7b7; }
.chain-link { width: 26px; height: 2px; background: #566174; transform: rotateZ(-34deg); }
.block-live { color: #8894a5; }
.block-live.is-broadcast { color: #b5c3ff; border-color: #7f95ec; }
.block-live.is-included { color: #91d6bc; border-color: #6bb499; background: linear-gradient(145deg, #315a4c, #243b35); }
.confirmation-stack { display: grid; gap: 5px; margin-left: 12px; transform: rotateX(58deg) rotateZ(-34deg); }
.confirmation-stack i { display: block; width: 26px; height: 26px; border: 1px solid #4f5b6d; border-radius: 4px; background: #252d38; opacity: .25; }
.confirmation-stack i.is-visible { border-color: #6eb398; background: #315848; opacity: 1; }
.lifecycle-steps { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.lifecycle-steps li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .55rem; align-items: center; min-height: 66px; padding: .65rem .75rem; border: 1px solid #3f4855; border-radius: 9px; opacity: .42; }
.lifecycle-steps span { grid-row: span 2; color: #7b8798; font: .52rem var(--mono); }
.lifecycle-steps strong { font: 650 .88rem var(--display); }
.lifecycle-steps small { color: #a5afbd; font-size: .68rem; }
.lifecycle-steps li.is-active { color: white; border-color: #8599ec; background: #2c3550; opacity: 1; }
.lifecycle-steps li.is-complete { color: #a1d8c4; border-color: #4f8875; background: #273a35; opacity: 1; }
.lifecycle-console { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; padding: .9rem 1rem; border-radius: 10px; background: #11161d; }
.lifecycle-console span { grid-row: span 2; min-width: 82px; color: #95a9fa; font: .56rem var(--mono); }
.lifecycle-console strong { font: 650 .98rem var(--display); }
.lifecycle-console p { margin: 0; color: #aeb7c4; font-size: .78rem; }
.lifecycle-lab > .lab-controls, .lifecycle-lab > .sr-status { grid-column: 1 / -1; }
.lifecycle-lab .run-button { color: var(--night); border-color: #aebdff; background: #aebdff; }
.lifecycle-lab .reset-button { color: #e8edf5; border-color: #687486; }

/* Reconciliation */
.reconcile-lab { display: grid; grid-template-columns: .72fr 1.35fr .5fr; gap: .75rem; max-width: 950px; margin-top: 2rem; padding: clamp(1rem, 3vw, 1.4rem); border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.webhook-packet { display: grid; align-content: center; gap: .45rem; min-height: 190px; padding: 1rem; color: #e9eef8; border-radius: 11px; background: var(--night); }
.webhook-packet span, .settlement-meter span { color: #aab4c1; font: .54rem var(--mono); text-transform: uppercase; }
.webhook-packet strong { font: 650 1rem var(--display); }
.webhook-packet code { padding: 0; color: #b3c2ff; background: transparent; font: .7rem var(--mono); }
.webhook-packet small { color: #afb8c5; line-height: 1.55; }
.reconcile-rail { display: grid; gap: .42rem; }
.reconcile-rail div { display: grid; grid-template-columns: auto 1fr; gap: .12rem .55rem; align-items: center; min-height: 45px; padding: .55rem .68rem; border: 1px solid var(--line); border-radius: 8px; opacity: .42; transition: opacity .2s, border-color .2s, background .2s; }
.reconcile-rail span { grid-row: span 2; color: var(--muted); font: .5rem var(--mono); }
.reconcile-rail strong { font: 650 .82rem var(--display); }
.reconcile-rail small { color: var(--muted); font-size: .66rem; }
.reconcile-rail div.is-active { border-color: #91a5ed; background: var(--blue-soft); opacity: 1; }
.reconcile-rail div.is-complete { border-color: #8abda9; background: var(--green-soft); opacity: 1; }
.settlement-meter { display: grid; align-content: center; justify-items: center; gap: .45rem; min-width: 120px; padding: .8rem; border: 1px solid #a6cdbd; border-radius: 11px; background: var(--green-soft); text-align: center; }
.settlement-meter span { color: var(--green); }
.settlement-meter strong { color: var(--green); font: 700 3.5rem/1 var(--display); }
.settlement-meter small { color: #45685c; line-height: 1.4; }
.reconcile-lab > .lab-controls, .reconcile-lab > .lab-status { grid-column: 1 / -1; }

/* Wallet vs contract */
.destination-lab { max-width: 900px; margin-top: 2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.destination-path { display: grid; grid-template-columns: 1fr auto 1.35fr; gap: .85rem; align-items: center; padding: 1.2rem; }
.destination-path > i { color: var(--blue); font-size: 1.4rem; font-style: normal; }
.signed-mini, .destination-target { display: grid; align-content: center; gap: .4rem; min-height: 140px; padding: 1rem; border: 1px solid var(--line); border-radius: 11px; background: white; }
.signed-mini span, .destination-target span { color: var(--muted); font: .54rem var(--mono); text-transform: uppercase; }
.signed-mini strong, .destination-target strong { font: 650 1.05rem var(--display); }
.destination-target p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.destination-target code { padding: 0; color: var(--blue); background: transparent; font: .75rem var(--mono); }
.destination-target.is-contract { color: #fff0e3; border-color: #77411f; background: #63391f; }
.destination-target.is-contract span, .destination-target.is-contract p { color: #e7c4ab; }
.destination-target.is-contract code { color: #ffd1ad; }
.destination-lab pre { margin: 0; padding: 1rem 1.2rem; overflow-x: auto; color: #d9dfeb; border-top: 1px solid #39424e; background: var(--night); font: .72rem/1.7 var(--mono); }
.destination-lab pre code { padding: 0; background: transparent; }
.destination-lab .lab-status { padding: .9rem 1.2rem; border-top: 1px solid var(--line); }

/* AMM pool */
.pool-lab { display: grid; grid-template-columns: .7fr 1.3fr; gap: 1rem; max-width: 940px; margin-top: 2rem; padding: clamp(1rem, 3vw, 1.5rem); color: #e9eef7; border-radius: 18px; background: var(--night); box-shadow: 8px 8px 0 #d3d1c9; }
.pool-copy { display: grid; align-content: start; gap: .6rem; padding: 1rem; border: 1px solid #414b59; border-radius: 11px; background: #242c37; }
.pool-copy > span { color: #9fabb9; font: .55rem var(--mono); text-transform: uppercase; }
.pool-copy > strong { font: 650 1.45rem var(--display); }
.pool-copy p { margin: 0 0 auto; color: #b2bcc9; font-size: .84rem; line-height: 1.5; }
.pool-copy label { margin-top: 1.5rem; color: #dce3ee; font-size: .9rem; font-weight: 700; }
.pool-copy label b { color: #99adff; }
.pool-copy input { width: 100%; accent-color: #90a5ff; }
.pool-vaults { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: .6rem; min-height: 260px; }
.pool-asset { position: relative; display: grid; align-content: end; gap: .35rem; overflow: hidden; padding: 1rem; border: 1px solid #47515f; border-radius: 12px; background: #222934; }
.pool-asset span, .pool-formula span { position: relative; z-index: 2; color: #b0bac7; font: .52rem var(--mono); text-transform: uppercase; }
.pool-asset strong { position: relative; z-index: 2; font: 650 1.1rem var(--display); }
.pool-asset i { position: absolute; inset: auto 0 0; height: 50%; opacity: .82; transition: height .2s; }
.pool-usdc i { background: linear-gradient(#3b76aa, #315e87); }
.pool-eth i { background: linear-gradient(#a66638, #7a4a2a); }
.pool-formula { display: grid; place-content: center; gap: .45rem; padding: .7rem; border: 1px dashed #667283; border-radius: 11px; text-align: center; }
.pool-formula strong { color: #afbeff; font: 600 1.1rem var(--mono); }
.pool-formula var { color: #e5eaf2; font-style: normal; }
.pool-formula small { color: #9faab8; font-size: .65rem; line-height: 1.4; }
.swap-receipt { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .85rem 1rem; border: 1px solid #4b8974; border-radius: 10px; background: #253b35; }
.swap-receipt span { color: #9fc9b9; font: .54rem var(--mono); text-transform: uppercase; }
.swap-receipt strong { color: #98d7bf; font: 650 1.2rem var(--display); }
.swap-receipt small { color: #a9c6bc; font-size: .72rem; }
.pool-lab > .lab-status { grid-column: 1 / -1; color: #aab4c1; }

/* Responsibility boundaries */
.boundary-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .7rem; align-items: stretch; max-width: 960px; margin-top: 2rem; }
.boundary-map > div { display: grid; align-content: start; gap: .45rem; min-height: 290px; padding: 1.1rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.boundary-map > div:nth-of-type(2) { border-color: #a6c2c0; background: var(--cyan-soft); }
.boundary-map > div:nth-of-type(3) { color: #edf1f8; border-color: var(--night); background: var(--night); }
.boundary-map > i { display: grid; place-items: center; color: var(--blue); font-style: normal; }
.boundary-map span { color: var(--blue); font: .54rem var(--mono); text-transform: uppercase; }
.boundary-map > div:nth-of-type(2) span { color: var(--cyan); }
.boundary-map > div:nth-of-type(3) span { color: #99adff; }
.boundary-map strong { font: 650 1.25rem var(--display); }
.boundary-map ul { margin: .6rem 0 0; padding-left: 1.05rem; color: var(--muted); font-size: .84rem; line-height: 1.7; }
.boundary-map > div:nth-of-type(3) ul { color: #b6bfcb; }

/* Recap sticker */
.chain-sticker { max-width: 940px; margin: 2rem 0 0; padding: clamp(1.2rem, 3.5vw, 2.2rem); color: #eef2f8; border-radius: 19px; background: var(--night); box-shadow: 10px 10px 0 var(--blue); }
.chain-sticker figcaption { margin-bottom: 1.4rem; color: #aab8f4; font: .6rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sticker-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: .52rem; }
.sticker-flow div { position: relative; min-height: 120px; padding: .82rem; border: 1px solid #424c5a; border-radius: 9px; background: #252d38; }
.sticker-flow div::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -.48rem; color: #8da1f5; transform: translateY(-50%); }
.sticker-flow div:last-child::after { content: ""; }
.sticker-flow span { display: block; margin-bottom: .65rem; color: #91a5f6; font: .52rem var(--mono); }
.sticker-flow strong { display: block; font: 650 .92rem var(--display); }
.sticker-flow small { display: block; margin-top: .35rem; color: #aeb7c3; font-size: .64rem; line-height: 1.4; }
.chain-sticker blockquote { max-width: 760px; margin: 2rem 0 0; color: white; font: 620 clamp(1.45rem, 3vw, 2.25rem)/1.16 var(--display); letter-spacing: -.03em; }
.final-reading { padding-bottom: .5rem; }
.code-reading-map ol { max-width: 720px; padding-left: 1.3rem; color: #454a52; line-height: 1.65; }
.code-reading-map li { margin-bottom: .55rem; }

/* Sources */
.sources { padding-bottom: 3rem; }
.sources ul { display: grid; gap: .65rem; max-width: 800px; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.sources li { padding-bottom: .7rem; color: var(--muted); border-bottom: 1px solid var(--line); line-height: 1.58; }
.sources a { color: var(--ink); font-weight: 700; }
.source-note { max-width: 780px; margin-top: 1.3rem; color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* No JavaScript */
.no-js [hidden] { display: block !important; }
.no-js .prediction fieldset, .no-js .lab-controls, .no-js .asset-tabs, .no-js .destination-tabs, .no-js .ledger-actions, .no-js .pool-copy input { display: none; }
.no-js .journey-rail li, .no-js .vault-room div, .no-js .lifecycle-steps li, .no-js .reconcile-rail div { opacity: 1; }
.no-js .network-ledgers div { background: var(--green-soft); }
.no-js .signed-envelope { border-color: #73b49e; background: #243b35; }

@media (max-width: 820px) {
  body.chain-post { padding-inline: 1rem; }
  .chain-post h1 { font-size: clamp(3rem, 13vw, 4.7rem); }
  .journey-lab, .ledger-lab, .vault-lab, .asset-path, .lifecycle-lab, .reconcile-lab, .pool-lab { grid-template-columns: 1fr; }
  .journey-receipt, .ledger-actions, .ledger-lab > .lab-status, .vault-lab > .lab-controls, .vault-lab > .lab-status, .lifecycle-console, .lifecycle-lab > .lab-controls, .reconcile-lab > .lab-controls, .reconcile-lab > .lab-status, .swap-receipt, .pool-lab > .lab-status { grid-column: auto; }
  .journey-lab, .vault-lab, .pool-lab { box-shadow: 5px 5px 0 #d3d1c9; }
  .withdraw-card { min-height: 285px; }
  .vault-request, .signed-envelope { min-height: 120px; }
  .asset-path > div { min-height: 105px; }
  .boundary-map { grid-template-columns: 1fr; }
  .boundary-map > i { transform: rotate(90deg); }
  .boundary-map > div { min-height: auto; }
  .sticker-flow { grid-template-columns: repeat(3, 1fr); }
  .sticker-flow div:nth-child(3)::after { content: "↓"; top: auto; right: 50%; bottom: -.72rem; transform: translateX(50%); }
  .sticker-flow div:nth-child(4)::after, .sticker-flow div:nth-child(5)::after { content: "←"; left: -.48rem; right: auto; }
  .sticker-flow div:nth-child(4) { grid-column: 3; grid-row: 2; }
  .sticker-flow div:nth-child(5) { grid-column: 2; grid-row: 2; }
  .sticker-flow div:nth-child(6) { grid-column: 1; grid-row: 2; }
  .chain-sticker { box-shadow: 6px 6px 0 var(--blue); }
}

@media (max-width: 620px) {
  .chain-post article { font-size: 1.03rem; }
  .myth { font-size: 1.5rem; }
  .journey-rail, .lifecycle-steps, .prediction { grid-template-columns: 1fr; }
  .prediction pre { grid-row: auto; }
  .answer { grid-column: auto; }
  .journey-receipt { grid-template-columns: 1fr; }
  .journey-receipt > span { grid-row: auto; }
  .network-ledgers div { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .pool-vaults { grid-template-columns: 1fr 1fr; min-height: 340px; }
  .pool-formula { grid-column: 1 / -1; grid-row: 1; min-height: 100px; }
  .swap-receipt { align-items: flex-start; flex-direction: column; }
  .destination-path { grid-template-columns: 1fr; }
  .destination-path > i { transform: rotate(90deg); text-align: center; }
  .block-stage { min-height: 210px; }
  .sticker-flow { grid-template-columns: 1fr 1fr; }
  .sticker-flow div, .sticker-flow div:nth-child(4), .sticker-flow div:nth-child(5), .sticker-flow div:nth-child(6) { grid-column: auto; grid-row: auto; }
  .sticker-flow div::after, .sticker-flow div:nth-child(3)::after, .sticker-flow div:nth-child(4)::after, .sticker-flow div:nth-child(5)::after { content: "↓"; top: auto; left: 50%; right: auto; bottom: -.74rem; transform: translateX(-50%); }
  .sticker-flow div:last-child::after { content: ""; }
}

@media (max-width: 410px) {
  .chain-post h1 { font-size: 3rem; }
  .asset-tabs, .destination-tabs { grid-template-columns: 1fr; }
  .asset-tabs button, .destination-tabs button { border-right: 0; border-bottom: 1px solid var(--line); }
  .asset-tabs button:last-child, .destination-tabs button:last-child { border-bottom: 0; }
  .pool-vaults, .sticker-flow { grid-template-columns: 1fr; }
  .pool-formula { grid-column: auto; grid-row: auto; }
  .sticker-flow div::after, .sticker-flow div:nth-child(3)::after, .sticker-flow div:nth-child(4)::after, .sticker-flow div:nth-child(5)::after { content: "↓"; }
  .sticker-flow div:last-child::after { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .001ms !important; }
}