/* A monochrome, self-contained illustration of Bitcoin's block lifecycle. */
.chain-section{padding:38px 0 10px;background:var(--cream)}
.chain-console{background:#090909;color:#f3f3f3;border:1px solid #282828;border-radius:6px;overflow:hidden;isolation:isolate;--chain-progress:0}
.chain-topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #242424;padding:17px 28px;color:#aaa;font:10px/1.4 var(--mono)}
.chain-topbar>span:first-child{display:flex;gap:10px;align-items:center}.chain-topbar i{width:5px;height:5px;background:#ddd;border-radius:50%}.chain-demo{font-size:8px;letter-spacing:1px;color:#888}
.chain-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:36px 42px 0}.chain-kicker{font:9px/1.5 var(--mono);letter-spacing:.6px;color:#999;margin:0 0 16px}.chain-intro h2{font-size:clamp(27px,3.1vw,42px);line-height:1.15;letter-spacing:-1.5px;color:#f3f3f3}.chain-intro>p{font:12px/1.8 var(--mono);color:#a0a0a0;margin:0 0 3px}
.chain-stage{position:relative;margin:20px 28px 0;overflow:hidden}.chain-svg{display:block;width:100%;height:auto}.chain-svg text{font-family:var(--mono)}
.cube-top{fill:#1d1d1d}.cube-left{fill:#111}.cube-right{fill:#171717}.cube-edge{stroke:#727272;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}.chain-older .cube-edge{stroke:#5b5b5b}.chain-block-id{fill:#a7a7a7;text-anchor:middle;font-size:16px}.chain-svg-label{fill:#929292;font-size:10px;letter-spacing:2px}.chain-wire{stroke:#333;stroke-width:1}.chain-source-node rect{stroke:#7f7f7f;fill:#101010}.chain-packet{fill:#ededed}.chain-tile{fill:#c7c7c7;opacity:.08;stroke:#0b0b0b;stroke-width:1.5}.chain-front-lines{stroke:#696969;stroke-width:2}.chain-bitcoin{fill:#ddd;font:32px Arial,sans-serif!important}.chain-link-base{stroke:#3c3c3c;stroke-width:1;stroke-dasharray:3 6}.chain-link-active{stroke:#ededed;stroke-width:1.5;stroke-dasharray:140;stroke-dashoffset:140}.chain-candidate-position{transform:translate(500px,140px)}.chain-candidate{transform-origin:0 30px}.chain-orbit path{stroke:#292929;stroke-width:1}.chain-orbit .chain-bracket{stroke:#8b8b8b}.chain-check{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}.chain-console[data-phase="1"] .chain-candidate .cube-edge{stroke:#cfcfcf}.chain-console[data-phase="2"] .chain-candidate .cube-edge,.chain-console[data-phase="3"] .chain-candidate .cube-edge{stroke:#f3f3f3}.chain-console[data-phase="2"] .chain-check,.chain-console[data-phase="3"] .chain-check{opacity:1}.chain-console[data-phase="3"] .chain-candidate{transform:translateX(72px) scale(.84)}.chain-console[data-phase="3"] .chain-link-active{stroke-dashoffset:0}.chain-console[data-phase="3"] .chain-orbit{opacity:.2}.chain-console[data-phase="2"] .chain-tiles,.chain-console[data-phase="3"] .chain-tiles{opacity:.3}
.chain-controls{display:flex;align-items:stretch;gap:16px;margin:0 42px;border-top:1px solid #292929}.chain-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:24px}.chain-steps button{position:relative;display:flex;align-items:center;gap:12px;padding:20px 0 17px;border:0;background:none;color:#848484;font:11px/1.5 var(--mono);text-align:left;cursor:pointer}.chain-steps button>span:first-child{font-size:9px;color:#737373}.chain-steps button[aria-pressed="true"]{color:#fff}.chain-steps button[aria-pressed="true"]>span:first-child{color:#ddd}.chain-steps i{position:absolute;top:-1px;left:0;width:100%;height:1px;background:#fff;transform:scaleX(0);transform-origin:left}.chain-steps button[aria-pressed="true"] i{transform:scaleX(var(--chain-progress))}.chain-play{width:42px;flex-shrink:0;display:grid;place-items:center;align-self:center;height:38px;border:1px solid #414141;border-radius:3px;background:transparent;color:#ddd;cursor:pointer}.chain-play svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.chain-play-icon{display:none}.chain-console.is-paused .chain-play-icon{display:block}.chain-console.is-paused .chain-pause-icon{display:none}.chain-console button:focus-visible{outline:2px solid #fff;outline-offset:5px}.chain-play:hover{background:#232323}.chain-steps button:hover{color:#fff}
.chain-explainer{display:flex;align-items:flex-start;justify-content:space-between;gap:35px;padding:5px 42px 30px;min-height:98px}.chain-description{max-width:660px;font-size:13px;line-height:1.8;color:#bcbcbc;margin:0}.chain-footnote{flex-shrink:0;color:#888;font:9px/1.8 var(--mono);text-align:right}
@media(prefers-reduced-motion:no-preference){.chain-candidate{transition:transform 1.4s cubic-bezier(.2,.75,.2,1)}.chain-candidate .cube-edge,.chain-tiles,.chain-check,.chain-orbit{transition:opacity .8s,stroke 1s}.chain-link-active{transition:stroke-dashoffset 1.8s ease .25s}.chain-description{animation:none}}
@media(max-width:760px){.chain-section{padding-top:22px}.chain-topbar{padding:15px 20px;font-size:8px}.chain-demo{font-size:6px;letter-spacing:.4px}.chain-intro{padding:28px 24px 0;display:block}.chain-intro h2{font-size:31px;letter-spacing:-1px}.chain-intro>p{font-size:11px;margin-top:18px}.chain-intro>p br{display:none}.chain-kicker{font-size:8px}.chain-stage{margin:4px 0 0;height:290px}.chain-svg{height:100%;width:100%}.chain-controls{margin:0 24px;gap:10px}.chain-steps{gap:8px}.chain-steps button{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:8px;padding:16px 0}.chain-steps button>span:first-child{font-size:9px}.chain-play{width:34px;height:34px}.chain-explainer{padding:4px 24px 24px;display:block;min-height:151px}.chain-description{font-size:12px;min-height:65px}.chain-footnote{display:block;font-size:8px;text-align:left;margin-top:15px}.chain-footnote br{display:none}.chain-footnote br:after{content:' '}}
@media(max-width:380px){.chain-topbar{padding-inline:16px}.chain-demo{font-size:5.5px}.chain-intro{padding-inline:20px}.chain-intro h2{font-size:27px}.chain-controls{margin-inline:20px}.chain-steps{gap:6px}.chain-steps button{font-size:7px}.chain-explainer{padding-inline:20px}.chain-stage{height:260px}}
@media(prefers-reduced-motion:reduce){.chain-console *{transition:none!important}.chain-play{display:none}.chain-steps button[aria-pressed="true"] i{transform:scaleX(1)}}
.chain-mining-beam{stroke:#fff;stroke-width:1.5;opacity:0}
@media(max-width:760px){.chain-controls{position:relative;display:block}.chain-steps{gap:10px}.chain-steps button{font-size:9px}.chain-play{position:absolute;right:0;bottom:calc(100% + 12px);width:38px;height:38px}}
@media(max-width:380px){.chain-steps{gap:7px}.chain-steps button{font-size:8.5px}}
@keyframes chain-mine{0%{opacity:0;transform:translateY(0)}15%{opacity:.8}85%{opacity:.8}100%{opacity:0;transform:translateY(96px)}}
@media(prefers-reduced-motion:no-preference){.chain-console[data-phase="1"] .chain-mining-beam{animation:chain-mine 2.2s linear infinite;animation-play-state:paused}.chain-console.is-running[data-phase="1"] .chain-mining-beam{animation-play-state:running}}
@media print{.chain-console{break-inside:avoid}.chain-play{display:none}}