/* =====================================================================================================
   Chain lab (SPEC 5.5 / 6.2): "How a chain stays honest — running in your browser".
   Stands alone: every token has a fallback and every rule is scoped under .chain-lab.
   Layout (lab = .chain-lab__inner, container "chainlab"):
     vertical stack, connectors looping through a left rail ... portrait, or lab < 40rem
     horizontal snap track (bleeds to the section edges) .... landscape, lab 40rem–70rem
     all four blocks in one row ............................. landscape, lab >= 70rem (always at 21:9+)
   States live on .chain-block[data-state=valid|broken|weak|mining]; .chain-lab.is-live = chain.js is running.
   ===================================================================================================== */

@property --cl-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* the horizontal track bleeds to the section's edges: (section width - lab width) / 2 */
@property --cl-bleed { syntax: '<length>'; inherits: true; initial-value: 0px; }

.chain-lab {
  --cl-blue: var(--accent, #4D8DFF);
  --cl-cyan: var(--accent-2, #7FE3FF);
  --cl-blue-text: #8DB6FF;
  --cl-ok: var(--ok, #5CF2B0);
  --cl-short: var(--short, #FF5C7A);
  --cl-plasma: var(--plasma, #F2F7FF);
  --cl-text: var(--text, #E9EDFA);
  --cl-text-2: var(--text-2, rgba(233, 237, 250, .72));
  --cl-text-3: var(--text-3, rgba(233, 237, 250, .56));
  --cl-solder: var(--solder, #070A1C);
  --cl-laminate: var(--laminate, #0E1430);
  --cl-line: rgba(127, 227, 255, .16);
  --cl-line-strong: rgba(127, 227, 255, .32);
  --cl-focus: var(--focus, var(--photon, #7CD6FF));
  --cl-mono: var(--font-mono, 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace);
  --cl-body: var(--font-body, 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --cl-display: var(--font-display, 'Anybody', system-ui, sans-serif);
  --cl-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
  --cl-r: var(--r-md, 12px);
  --cl-r-sm: var(--r-sm, 6px);
  --cl-gutter: var(--gutter, clamp(12px, 4vw, 96px));
  --cl-max: var(--wrap-max, 100rem);
  --cl-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 28px 56px -32px rgba(0, 0, 0, .95);
  /* icons (used as masks, so they take currentColor) */
  --cl-i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='12' r='4'/%3E%3Cpath d='M11 12h11M17.5 12v3.5M20.5 12v2.5'/%3E%3C/svg%3E");
  --cl-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
  --cl-i-broken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6.5 4.5L8 3a3 3 0 0 1 4.2 4.2L10.7 8.7M9.5 11.5L8 13a3 3 0 0 1-4.2-4.2L5.3 7.3M2 2l2 2M14 14l-2-2'/%3E%3C/svg%3E");
  --cl-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 3.5v5.5'/%3E%3Ccircle cx='8' cy='12.3' r='.6' fill='%23000'/%3E%3C/svg%3E");
  --cl-i-remine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8A5.5 5.5 0 1 1 11.7 4'/%3E%3Cpath d='M12.2 1.6v3h-3'/%3E%3C/svg%3E");

  container: chainsection / inline-size;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--section, clamp(4rem, 6rem + 4vmin, 11rem));
  color: var(--cl-text);
  font-family: var(--cl-body);
  font-size: 1rem;
  line-height: 1.6;
}
@media (min-width: 2560px) { .chain-lab { --cl-max: var(--wrap-max, 150rem); } }
@media (max-height: 600px) { .chain-lab { padding-block: var(--section, clamp(2.5rem, 2rem + 4vmin, 5rem)); } }

/* the bench: a faint blueprint grid and a Ledger Blue glow behind the blocks */
.chain-lab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 42% at 50% 66%, rgba(77, 141, 255, .14), transparent 72%),
    repeating-linear-gradient(0deg, rgba(127, 227, 255, .05) 0 1px, transparent 1px 2.5rem),
    repeating-linear-gradient(90deg, rgba(127, 227, 255, .05) 0 1px, transparent 1px 2.5rem);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 62%, #000 25%, transparent 78%);
  mask-image: radial-gradient(80% 70% at 50% 62%, #000 25%, transparent 78%);
}
/* ultrawide: the grid runs edge to edge (fading only top and bottom), so the extra width is bench, not void */
@media (min-aspect-ratio: 21/9) {
  .chain-lab::before {
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
    mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
  }
}

.chain-lab__inner {
  --cl-inner: min(100cqw - 2 * var(--cl-gutter), var(--cl-max));
  --cl-bleed: calc((100cqw - var(--cl-inner)) / 2);
  container: chainlab / inline-size;
  width: var(--cl-inner);
  margin-inline: auto;
}

.chain-lab .chain-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- intro */
.chain-lab__head {
  display: grid;
  gap: clamp(1.75rem, 4cqi, 3.5rem);
  margin-block-end: clamp(2rem, 5cqi, 4rem);
}
@container chainlab (width >= 60rem) {
  .chain-lab__head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
}
/* very wide labs (4K, ultrawide): title | explanation | steps side by side instead of a hole between
   a 64ch paragraph and the steps */
@container chainlab (width >= 120rem) {
  .chain-lab__head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .9fr);
    grid-template-areas: 'eyebrow lede guide' 'title lede guide';
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 4cqi, 7rem);
    row-gap: 0;
  }
  .chain-lab__intro { display: contents; }
  .chain-lab__eyebrow { grid-area: eyebrow; }
  .chain-lab__title { grid-area: title; align-self: start; }
  .chain-lab__lede { grid-area: lede; align-self: end; margin: 0; }
  .chain-lab__guide { grid-area: guide; align-self: end; }
}
.chain-lab__intro, .chain-lab__guide { min-width: 0; }

.chain-lab__eyebrow {
  margin: 0 0 1.1rem;
  font: 500 var(--t-mono, .72rem)/1.4 var(--cl-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cl-blue-text);
}
/* the live dot never wraps away from "Chain lab"; narrow labs drop "proof of work" */
.chain-lab__eyebrow-key { white-space: nowrap; }
@container chainlab (width < 22rem) { .chain-lab__eyebrow-pow { display: none; } }
.chain-lab__live {
  display: none;
  width: .5rem;
  height: .5rem;
  margin-right: .7em;
  vertical-align: .08em;
  border-radius: 50%;
  background: var(--cl-ok);
  box-shadow: 0 0 10px rgba(92, 242, 176, .55);
}
.chain-lab.is-live .chain-lab__live { display: inline-block; }

.chain-lab__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--cl-display);
  font-weight: 300;
  font-size: min(var(--t-h2, clamp(1.75rem, 1rem + 2.6vmin, 4rem)), 10cqi);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--cl-plasma);
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.chain-lab__title-sub {
  display: block;
  margin-top: .35em;
  font-size: .52em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cl-cyan);
}
/* without JS nothing runs here, so the title says the chain was mined in advance */
.chain-lab__sub-static,
html:not(.js) .chain-lab__sub-live { display: none; }
html:not(.js) .chain-lab__sub-static { display: inline; }
@container chainlab (width < 30rem) { .chain-lab__title { font-stretch: 80%; } }
@container chainlab (width >= 60rem) { .chain-lab__title { font-stretch: 125%; } }

.chain-lab__lede {
  max-width: 64ch;
  margin: clamp(1.1rem, 2.5cqi, 1.75rem) 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--cl-text-2);
}

.chain-lab__steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cl-line);
}
.chain-lab__steps li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  padding: .8rem 0;
  border-bottom: 1px solid var(--cl-line);
  color: var(--cl-text);
}
.chain-lab__step-n {
  font: 500 .75rem/1 var(--cl-mono);
  letter-spacing: .12em;
  color: var(--cl-blue-text);
  font-variant-numeric: tabular-nums;
}

.chain-lab__formula { margin: 1.25rem 0 0; }
.chain-lab__formula code {
  display: inline-block;
  max-width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-sm);
  background: rgba(77, 141, 255, .07);
  font: 400 .8125rem/1.6 var(--cl-mono);
  color: var(--cl-text-2);
  overflow-wrap: anywhere;
}
.chain-lab__term { color: var(--cl-plasma); font-weight: 500; }
.chain-lab__term--nonce { color: var(--cl-cyan); }
.chain-lab__term--prev { color: var(--cl-blue-text); }

.chain-lab__note {
  max-width: 68ch;
  margin: 0 0 1.75rem;
  padding: .8rem 1rem;
  border-left: 2px solid var(--cl-cyan);
  background: rgba(127, 227, 255, .06);
  color: var(--cl-text-2);
  font-size: .9375rem;
}

/* ---------------------------------------------------------------- console */
.chain-lab__console {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem clamp(1.25rem, 3cqi, 2.5rem);
  margin-block-end: clamp(1.5rem, 3.5cqi, 2.75rem);
  padding: .7rem .7rem .7rem 1.1rem;
  border: 1px solid var(--cl-line);
  border-radius: calc(var(--cl-r) + 4px);
  background: linear-gradient(180deg, rgba(14, 20, 48, .78), rgba(7, 10, 28, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html:not(.js) .chain-lab [data-live-only] { display: none; }

.chain-lab__k {
  font: 500 .6875rem/1.3 var(--cl-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cl-text-2);
}
.chain-lab__difficulty { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; min-width: 0; }
.chain-lab__hint { font: 400 .75rem/1.3 var(--cl-mono); color: var(--cl-text-2); }

.chain-lab__seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--cl-line-strong);
  border-radius: 999px;
  background: rgba(3, 4, 10, .6);
}
.chain-lab__seg label { position: relative; display: grid; cursor: pointer; }
.chain-lab__seg input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chain-lab__seg label > span {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  min-height: 2.1rem;
  padding: 0 .75rem;
  border-radius: 999px;
  font: 500 .9375rem/1 var(--cl-mono);
  color: var(--cl-text-2);
  transition: background-color .32s var(--cl-ease), color .16s, box-shadow .32s;
}
.chain-lab__seg label:hover > span { color: var(--cl-plasma); }
.chain-lab__seg input:checked + span {
  background: var(--cl-blue);
  color: #03040A;
  box-shadow: 0 0 20px rgba(77, 141, 255, .45);
}
.chain-lab__seg input:focus-visible + span {
  outline: 2px solid var(--cl-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(3, 4, 10, .85);
}

.chain-lab__readout { display: grid; gap: .15rem; min-width: 0; margin: 0; }
.chain-lab__v {
  font: 500 .9375rem/1.35 var(--cl-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cl-plasma);
}
.chain-lab__v::before {
  content: '';
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: .5rem;
  border-radius: 50%;
  vertical-align: .1em;
  background: currentColor;
}
.chain-lab__v--rate::before { display: none; }
.chain-lab__v[data-tone='valid'] { color: var(--cl-ok); }
.chain-lab__v[data-tone='broken'] { color: var(--cl-short); }
.chain-lab__v[data-tone='mining'] { color: var(--cl-cyan); }
.chain-lab.is-mining .chain-lab__v--rate { color: var(--cl-cyan); }

.chain-lab__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

.chain-lab__btn,
.chain-block__mine {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 2.5rem;
  margin: 0;
  padding: .5rem 1.1rem;
  border: 1px solid var(--cl-line-strong);
  border-radius: 999px;
  background: rgba(3, 4, 10, .45);
  color: var(--cl-text);
  font: 500 .875rem/1.2 var(--cl-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s, box-shadow .32s, opacity .16s;
}
.chain-lab__btn:hover,
.chain-block__mine:hover { border-color: var(--cl-cyan); color: var(--cl-plasma); }
.chain-lab__btn--primary {
  border-color: transparent;
  background: var(--cl-blue);
  color: #03040A;
  box-shadow: 0 10px 28px -12px rgba(77, 141, 255, .9);
}
.chain-lab__btn--primary:hover { border-color: transparent; background: #6FA3FF; color: #03040A; }
.chain-lab.is-mining .chain-lab__btn--primary { background: transparent; border-color: var(--cl-cyan); color: var(--cl-cyan); box-shadow: none; }
/* unavailable actions dim by colour (not opacity), so a focus ring on them stays at full strength */
.chain-lab__btn[aria-disabled='true'],
.chain-lab__btn[aria-disabled='true']:hover,
.chain-block__mine[aria-disabled='true'],
.chain-block__mine[aria-disabled='true']:hover {
  border-color: var(--cl-line);
  background: transparent;
  color: rgba(233, 237, 250, .4);
  box-shadow: none;
  cursor: default;
}
.chain-lab__btn--primary[aria-disabled='true'],
.chain-lab__btn--primary[aria-disabled='true']:hover { border-color: transparent; background: rgba(77, 141, 255, .2); color: rgba(233, 237, 250, .45); }
.chain-lab__btn:focus-visible,
.chain-block__mine:focus-visible,
.chain-lab__viewport:focus-visible {
  outline: 2px solid var(--cl-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(3, 4, 10, .85);
}
.chain-lab__btn--toggle { display: none; }
.chain-lab__btn--toggle[aria-pressed='true'] { border-color: var(--cl-cyan); background: rgba(127, 227, 255, .1); color: var(--cl-cyan); }

@container chainlab (44rem <= width < 80rem) {
  .chain-lab__console {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'diff diff act' 'chain rate rate';
    column-gap: clamp(1.5rem, 4cqi, 3rem);
    padding: .8rem .8rem .9rem 1.1rem;
  }
  .chain-lab__difficulty { grid-area: diff; }
  .chain-lab__actions { grid-area: act; }
  .chain-lab__readout--chain { grid-area: chain; }
  .chain-lab__readout--rate { grid-area: rate; }
  .chain-lab__readout { padding-top: .8rem; }
  /* one rule between the two rows, across the whole console */
  .chain-lab__console::before {
    content: '';
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: start;
    border-top: 1px solid var(--cl-line);
  }
}
@container chainlab (width < 44rem) {
  .chain-lab__console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: .9rem; }
  .chain-lab__difficulty, .chain-lab__actions { grid-column: 1 / -1; }
  .chain-lab__actions { margin-left: 0; }
  .chain-lab__actions .chain-lab__btn { flex: 1 1 auto; }
}
@container chainlab (width < 30rem) {
  .chain-lab__console { grid-template-columns: minmax(0, 1fr); }
  .chain-lab__btn--toggle { display: inline-flex; }
  .chain-lab__hint { display: none; }
}

/* ---------------------------------------------------------------- track */
.chain-lab__viewport { position: relative; border-radius: var(--cl-r); }
.chain-lab__track {
  --cl-rail: clamp(1.4rem, 7cqi, 2.75rem);
  --cl-gap: clamp(1.75rem, 6cqi, 3rem);
  position: relative;
  max-width: calc(42rem + var(--cl-rail));
  margin-inline: auto;
  padding-inline-start: var(--cl-rail);
}
.chain-lab__blocks {
  display: grid;
  gap: var(--cl-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* landscape: a horizontal track, all four in a row once they fit */
@media (aspect-ratio > 4/5) {
  @container chainlab (width >= 40rem) {
    .chain-lab__viewport {
      margin-inline: calc(-1 * var(--cl-bleed));
      padding: 1rem var(--cl-bleed);
      scroll-padding-inline: var(--cl-bleed);
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      scrollbar-color: rgba(127, 227, 255, .35) transparent;
      border-radius: 0;
    }
    .chain-lab__track {
      --cl-gap: clamp(3rem, 5.5cqi, 4.5rem);
      width: max-content;
      max-width: none;
      margin: 0;
      padding: 0;
    }
    .chain-lab__blocks {
      grid-auto-flow: column;
      grid-auto-columns: clamp(16.5rem, 36cqi, 21rem);
      padding-bottom: 3.25rem; /* room for the connectors' swoop */
    }
    .chain-block { scroll-snap-align: start; }
    /* the track bleeds to the section edges, so its focus ring is drawn inside */
    .chain-lab__viewport:focus-visible { outline-offset: -2px; box-shadow: none; }
    .chain-lab__viewport[data-edge='start'] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent); }
    .chain-lab__viewport[data-edge='middle'] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent); }
    .chain-lab__viewport[data-edge='end'] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5rem); mask-image: linear-gradient(90deg, transparent, #000 3.5rem); }
  }
  @container chainlab (width >= 70rem) {
    .chain-lab__viewport { margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
    .chain-lab__track { --cl-gap: clamp(2.5rem, 3.6cqi, 6rem); width: auto; }
    .chain-lab__blocks {
      grid-auto-flow: row;
      grid-template-columns: repeat(4, minmax(0, 34rem));
      justify-content: center;
      padding-bottom: 2.5rem;
    }
  }
}

/* ---------------------------------------------------------------- a block */
.chain-block {
  container: chainblock / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem 1.15rem 1.05rem 1.5rem;
  border: 1px solid rgba(127, 227, 255, .24);
  border-radius: var(--cl-r);
  background:
    linear-gradient(180deg, rgba(127, 227, 255, .09), transparent 3.4rem),
    repeating-linear-gradient(90deg, rgba(127, 227, 255, .05) 0 1px, transparent 1px 12px) left bottom / 100% 2.6rem no-repeat,
    repeating-linear-gradient(0deg, rgba(127, 227, 255, .05) 0 1px, transparent 1px 12px) left bottom / 100% 2.6rem no-repeat,
    linear-gradient(165deg, rgba(42, 75, 214, .24), rgba(14, 20, 48, .82) 42%, rgba(7, 10, 28, .94));
  box-shadow: var(--cl-card-shadow);
  transition: border-color .32s, box-shadow .32s;
}
.chain-block:hover,
.chain-block:focus-within { border-color: rgba(127, 227, 255, .45); }

/* the glowing spine down the left edge (blockchain.jpg's blocks carry one) */
.chain-block::before {
  content: '';
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: .55rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--cl-ok), var(--cl-cyan));
  box-shadow: 0 0 10px rgba(92, 242, 176, .45);
  transition: background .32s, box-shadow .32s;
}
/* a current that runs around the frame while mining */
.chain-block::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from var(--cl-angle), transparent 0 60%, var(--cl-cyan) 84%, var(--cl-plasma) 88%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .32s;
}

.chain-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  margin: 0 0 .9rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--cl-line);
}
.chain-block__title {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font: 500 .75rem/1 var(--cl-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cl-text-2);
}
.chain-block__num {
  font: 300 1.75rem/.8 var(--cl-display);
  letter-spacing: 0;
  color: var(--cl-plasma);
  font-variant-numeric: tabular-nums;
}
.chain-block__key {
  width: 1.15rem;
  height: 1.15rem;
  background: var(--cl-cyan);
  -webkit-mask: var(--cl-i-key) center / contain no-repeat;
  mask: var(--cl-i-key) center / contain no-repeat;
}

/* status pill: words + icon, never colour alone */
.chain-block__pill {
  --cl-icon: var(--cl-i-check);
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin: 0;
  padding: .35rem .65rem .35rem .55rem;
  border: 1px solid rgba(92, 242, 176, .38);
  border-radius: 999px;
  background: rgba(92, 242, 176, .08);
  font: 500 .6875rem/1 var(--cl-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cl-ok);
}
.chain-block__pill::before {
  content: '';
  flex: none;
  width: .9em;
  height: .9em;
  background: currentColor;
  -webkit-mask: var(--cl-icon) center / contain no-repeat;
  mask: var(--cl-icon) center / contain no-repeat;
}

.chain-block__fields { display: grid; gap: .75rem; margin: 0; }
.chain-block__field { display: grid; gap: .3rem; min-width: 0; }
.chain-block__field dt {
  display: flex;
  align-items: center;
  gap: .5rem;
  font: 500 .6875rem/1.3 var(--cl-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cl-text-2);
}
.chain-block__field dt label { cursor: pointer; }
.chain-block__field dd { min-width: 0; margin: 0; }
.chain-block__tag {
  padding: .15rem .4rem;
  border: 1px solid var(--cl-line-strong);
  border-radius: 3px;
  font-size: .625rem;
  letter-spacing: .12em;
  color: var(--cl-text-2);
}
@container chainblock (width >= 25rem) {
  .chain-block__field { grid-template-columns: 4.75rem minmax(0, 1fr); align-items: start; gap: 1rem; }
  .chain-block__field dt { min-height: 1.55rem; flex-wrap: wrap; align-content: center; }
  .chain-block__field--data dt { min-height: 2.75rem; }
}

/* nonce odometer */
.chain-odo { display: inline-flex; gap: 3px; font: 500 1.0625rem/1 var(--cl-mono); font-variant-numeric: tabular-nums; color: var(--cl-plasma); }
.chain-odo > span {
  display: inline-grid;
  place-items: center;
  width: 1.2em;
  height: 1.6em;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(3, 4, 10, .7), rgba(14, 20, 48, .7) 50%, rgba(3, 4, 10, .7));
  box-shadow: inset 0 0 0 1px rgba(127, 227, 255, .14);
}
.chain-odo > .is-pad { color: var(--cl-text-3); }

.chain-block__data {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  max-height: 8.5rem;
  margin: 0;
  padding: .6rem .75rem;
  border: 1px solid var(--cl-line-strong);
  border-radius: var(--cl-r-sm);
  background: rgba(3, 4, 10, .6);
  color: var(--cl-plasma);
  caret-color: var(--cl-cyan);
  font: 500 1rem/1.4 var(--cl-body);
  field-sizing: content;
  resize: none;
  transition: border-color .16s, background-color .16s;
}
.chain-block__data:hover { border-color: rgba(127, 227, 255, .55); }
.chain-block__data:focus { outline: none; }
.chain-block__data:focus-visible {
  border-color: var(--cl-cyan);
  background: rgba(3, 4, 10, .85);
  outline: 2px solid var(--cl-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(3, 4, 10, .85);
}
.chain-block__data[readonly] { cursor: default; }

/* hashes: the leading zeros the difficulty asks for glow; a miss is marked in Short Red */
.chain-hex {
  font: 400 .78rem/1.6 var(--cl-mono);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  overflow-wrap: anywhere;
  color: var(--cl-text);
  transition: background-color .32s, box-shadow .32s, color .32s;
}
.chain-hex { position: relative; }
.chain-hex::after {
  content: '';
  position: absolute;
  inset: -2px -4px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(127, 227, 255, .26), transparent) no-repeat;
  background-size: 40% 100%;
}
.chain-block__field--prev .chain-hex { color: var(--cl-text-2); }
.chain-hex--genesis { color: var(--cl-text-3) !important; }
.chain-hex__lead { color: var(--cl-cyan); text-shadow: 0 0 12px rgba(127, 227, 255, .6); }
.chain-block__field--prev .chain-hex__lead { text-shadow: none; }
.chain-hex__lead.is-miss {
  border-radius: 2px;
  background: rgba(255, 92, 122, .14);
  color: var(--cl-short);
  text-shadow: none;
  box-shadow: inset 0 -1px 0 var(--cl-short);
}
@container chainlab (width < 30rem) {
  html.js .chain-lab:not(.is-full) .chain-hex__tail { display: none; }
  html.js .chain-lab:not(.is-full) .chain-hex__head::after { content: '…'; color: var(--cl-text-2); }
}

.chain-block__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem .75rem;
  margin-top: auto;
  padding-top: 1rem;
}
.chain-block__note {
  flex: 1 1 6rem;
  min-width: 0;
  margin: 0;
  font: 400 var(--t-mono, .72rem)/1.45 var(--cl-mono);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--cl-text-2);
}
.chain-block__note-t, .chain-block__note-d { display: block; }
.chain-block__note-t { color: var(--cl-text); }
.chain-block[data-state='broken'] .chain-block__note-t,
.chain-block[data-state='weak'] .chain-block__note-t { color: var(--cl-short); }
.chain-block__mine { min-height: 2.25rem; padding: .4rem .95rem; font-size: .8125rem; }
@container chainblock (width < 19rem) {
  .chain-block__foot { gap: .5rem; }
  .chain-block__note { letter-spacing: 0; }
  .chain-block__mine { gap: .35em; padding: .4rem .7rem; font-size: .75rem; }
}
.chain-block__mine::before {
  content: '';
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--cl-i-remine) center / contain no-repeat;
  mask: var(--cl-i-remine) center / contain no-repeat;
}

/* short screens (≤ 600px tall): a compact block, so a whole block and the link into the next fit the
   screen — labels beside their values, a smaller odometer, hashes shortened behind "Show full hashes" */
@media (max-height: 600px) {
  .chain-block { padding: .75rem .9rem .8rem 1.3rem; }
  .chain-block::before { top: .75rem; bottom: .75rem; left: .5rem; }
  .chain-block__head { margin-bottom: .6rem; padding-bottom: .55rem; }
  .chain-block__num { font-size: 1.5rem; }
  .chain-block__fields { gap: .45rem; }
  .chain-block__field { grid-template-columns: 3.6rem minmax(0, 1fr); align-items: center; gap: .6rem; }
  .chain-block__field dt,
  .chain-block__field--data dt { flex-wrap: wrap; row-gap: .2rem; min-height: 0; }
  .chain-odo { font-size: .9375rem; }
  .chain-odo > span { height: 1.5em; }
  .chain-block__data { min-height: 2.25rem; padding: .4rem .6rem; }
  .chain-block__foot { padding-top: .6rem; }
  .chain-lab__btn--toggle { display: inline-flex; }
  html.js .chain-lab:not(.is-full) .chain-hex__tail { display: none; }
  html.js .chain-lab:not(.is-full) .chain-hex__head::after { content: '…'; color: var(--cl-text-2); }
}

/* ---- states ---- */
.chain-block[data-state='broken'],
.chain-block[data-state='weak'] {
  border-color: rgba(255, 92, 122, .5);
  background:
    linear-gradient(180deg, rgba(255, 92, 122, .1), transparent 3.4rem),
    repeating-linear-gradient(90deg, rgba(255, 92, 122, .045) 0 1px, transparent 1px 12px) left bottom / 100% 2.6rem no-repeat,
    repeating-linear-gradient(0deg, rgba(255, 92, 122, .045) 0 1px, transparent 1px 12px) left bottom / 100% 2.6rem no-repeat,
    linear-gradient(165deg, rgba(90, 30, 70, .22), rgba(14, 20, 48, .84) 42%, rgba(7, 10, 28, .95));
}
.chain-block[data-state='broken']::before,
.chain-block[data-state='weak']::before { background: var(--cl-short); box-shadow: 0 0 10px rgba(255, 92, 122, .55); }
.chain-block[data-state='broken'] .chain-block__pill,
.chain-block[data-state='weak'] .chain-block__pill {
  --cl-icon: var(--cl-i-broken);
  border-color: rgba(255, 92, 122, .5);
  background: rgba(255, 92, 122, .1);
  color: var(--cl-short);
}
.chain-block[data-state='weak'] .chain-block__pill {
  --cl-icon: var(--cl-i-alert);
}
.chain-block[data-state='broken'] .chain-block__mine,
.chain-block[data-state='weak'] .chain-block__mine {
  border-color: transparent;
  background: var(--cl-blue);
  color: #03040A;
  box-shadow: 0 8px 22px -10px rgba(77, 141, 255, .9);
}
.chain-block[data-state='broken'] .chain-block__mine:hover,
.chain-block[data-state='weak'] .chain-block__mine:hover { background: #6FA3FF; color: #03040A; }

.chain-block[data-state='mining'] { border-color: rgba(127, 227, 255, .5); }
.chain-block[data-state='mining']::before { background: var(--cl-cyan); box-shadow: 0 0 12px rgba(127, 227, 255, .7); }
.chain-block[data-state='mining']::after { opacity: 1; }
.chain-block[data-state='mining'] .chain-block__pill {
  border-color: rgba(127, 227, 255, .45);
  background: rgba(127, 227, 255, .1);
  color: var(--cl-cyan);
}
.chain-block[data-state='mining'] .chain-block__pill::before {
  -webkit-mask: none;
  mask: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  background: none;
  box-sizing: border-box;
}
.chain-block[data-state='mining'] .chain-block__field--hash .chain-hex { color: var(--cl-text-2); }

/* ---------------------------------------------------------------- connectors (SVG built by chain.js) */
.chain-lab__links {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.chain-link { color: var(--cl-cyan); }
.chain-link.is-broken { color: var(--cl-short); }
.chain-link path, .chain-link circle { fill: none; stroke: currentColor; }
.chain-link__glow { stroke-width: 7; stroke-linecap: round; opacity: .14; }
.chain-link.is-broken .chain-link__glow { opacity: 0; }
.chain-link__half {
  --cl-snap: 24deg;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 5 5;
  transform-box: view-box;
}
[data-layout='vertical'] .chain-link__half { --cl-snap: 11deg; }
.chain-link__half--b { stroke-dashoffset: var(--dash0, 0px); }
.chain-link.is-broken .chain-link__half--a { transform: rotate(var(--cl-snap)); }
.chain-link.is-broken .chain-link__half--b { transform: rotate(calc(-1 * var(--cl-snap))); }
.chain-link .chain-link__node { fill: #060A1C; stroke-width: 2; }
.chain-link.is-hot:not(.is-broken) { color: var(--cl-plasma); }
.chain-link.is-hot:not(.is-broken) .chain-link__glow { opacity: .3; }

/* hover/focus on a block lights the hashes its links join */
.chain-block.is-hot [data-chain-prev]:not(.chain-hex--genesis),
.chain-block.is-hot [data-chain-hash],
.chain-hex.is-hot {
  border-radius: 3px;
  background: rgba(127, 227, 255, .08);
  box-shadow: 0 0 0 4px rgba(127, 227, 255, .08);
  color: var(--cl-plasma);
}
.chain-link__spark { stroke-width: 2; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.chain-link.is-broken .chain-link__spark { opacity: 1; }
.chain-link .chain-link__packet { stroke: var(--cl-plasma); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 2; stroke-dashoffset: .1; opacity: 0; }

/* no JS: a plain dashed link between the static blocks */
html:not(.js) .chain-lab .chain-block + .chain-block::after {
  inset: auto;
  top: auto;
  bottom: 100%;
  left: 50%;
  width: 0;
  height: var(--cl-gap);
  padding: 0;
  border-left: 2px dashed var(--cl-cyan);
  border-radius: 0;
  background: none;
  opacity: .85;
  -webkit-mask: none;
  mask: none;
}
@media (aspect-ratio > 4/5) {
  @container chainlab (width >= 40rem) {
    html:not(.js) .chain-lab .chain-block + .chain-block::after {
      top: 62%;
      bottom: auto;
      right: 100%;
      left: auto;
      width: var(--cl-gap);
      height: 0;
      border-left: 0;
      border-top: 2px dashed var(--cl-cyan);
    }
  }
}

/* ---------------------------------------------------------------- motion (never under reduced motion / Motion: Off) */
:root:not(.motion-off) .chain-lab.is-live.is-onscreen .chain-lab__live { animation: cl-breathe 2.4s ease-in-out infinite; }
:root:not(.motion-off) .chain-block.is-powering { animation: cl-power .9s var(--cl-ease); }
:root:not(.motion-off) .chain-block.is-powering::before { animation: cl-spine .9s var(--cl-ease); }
:root:not(.motion-off) .chain-link { transition: color .32s; }
:root:not(.motion-off) .chain-link__half { transition: transform .6s var(--cl-ease); }
:root:not(.motion-off) .chain-lab.is-onscreen .chain-link:not(.is-broken) .chain-link__half { animation: cl-march 1.3s linear infinite; }
:root:not(.motion-off) .chain-link.is-relinking .chain-link__packet { animation: cl-packet .9s var(--cl-ease) both; }
:root:not(.motion-off) .chain-link.is-snapping .chain-link__spark { animation: cl-spark .7s var(--cl-ease) both; }
:root:not(.motion-off) .chain-link.is-snapping .chain-link__half { transition-timing-function: cubic-bezier(.3, 1.6, .5, 1); }

:root:not(.motion-off) .chain-block[data-state='mining']::after { animation: cl-orbit 1s linear infinite; }
:root:not(.motion-off) .chain-block[data-state='mining'] .chain-block__pill::before { animation: cl-orbit-spin .8s linear infinite; }
:root:not(.motion-off) .chain-block[data-state='mining'] .chain-odo > span:nth-last-child(-n+3) { animation: cl-roll .14s steps(2) infinite; }
:root:not(.motion-off) .chain-block[data-state='mining'] .chain-odo > span:nth-last-child(4) { animation: cl-roll .3s steps(2) infinite; }

:root:not(.motion-off) .chain-hex.is-rehash::after { animation: cl-sweep .55s var(--cl-ease) var(--cl-wave, 0ms) both; }
:root:not(.motion-off) .chain-block.is-sealing { animation: cl-seal 1.1s var(--cl-ease); }
:root:not(.motion-off) .chain-block.is-sealing .chain-block__pill { animation: cl-pop .55s var(--cl-ease); }
:root:not(.motion-off) .chain-block.is-sealing .chain-block__field--hash .chain-hex__lead { animation: cl-zeros 1.1s var(--cl-ease); }
:root:not(.motion-off) .chain-block.is-sealing::before { animation: cl-spine 1.1s var(--cl-ease); }
@keyframes cl-breathe { 50% { opacity: .35; } }
@keyframes cl-power { 0% { border-color: var(--cl-cyan); box-shadow: var(--cl-card-shadow), 0 0 0 1px rgba(127, 227, 255, .5), 0 0 36px rgba(127, 227, 255, .28); } }
@keyframes cl-march { from { stroke-dashoffset: var(--dash0, 0px); } to { stroke-dashoffset: calc(var(--dash0, 0px) - 10px); } }
@keyframes cl-packet { 0% { opacity: 1; stroke-dashoffset: .1; } 90% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes cl-spark { 0% { transform: scale(0) rotate(-45deg); } 55% { transform: scale(1.6) rotate(0deg); } 100% { transform: scale(1); } }
@keyframes cl-sweep { from { opacity: 1; background-position-x: -70%; } to { opacity: 0; background-position-x: 170%; } }
@keyframes cl-orbit { to { --cl-angle: 360deg; } }
@keyframes cl-orbit-spin { to { transform: rotate(360deg); } }
@keyframes cl-roll {
  from { transform: translateY(-.06em); text-shadow: 0 -.75em 0 rgba(242, 247, 255, .35), 0 .75em 0 rgba(242, 247, 255, .35); }
  to { transform: translateY(.06em); text-shadow: 0 -.6em 0 rgba(242, 247, 255, .2), 0 .6em 0 rgba(242, 247, 255, .2); }
}
@keyframes cl-seal {
  0% { border-color: var(--cl-ok); box-shadow: var(--cl-card-shadow), 0 0 0 0 rgba(92, 242, 176, .6), 0 0 40px rgba(92, 242, 176, .35); }
  55% { box-shadow: var(--cl-card-shadow), 0 0 0 10px rgba(92, 242, 176, 0), 0 0 30px rgba(92, 242, 176, .12); }
  100% { box-shadow: var(--cl-card-shadow), 0 0 0 10px rgba(92, 242, 176, 0), 0 0 0 rgba(92, 242, 176, 0); }
}
@keyframes cl-pop { 0% { transform: scale(.8); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes cl-zeros { 0%, 30% { color: var(--cl-ok); text-shadow: 0 0 18px rgba(92, 242, 176, .95); } }
@keyframes cl-spine { 0% { box-shadow: 0 0 24px 2px rgba(92, 242, 176, .9); } }

/* ---------------------------------------------------------------- coarse pointers, user modes */
@media (pointer: coarse) {
  .chain-lab__btn, .chain-block__mine { min-height: 44px; }
  .chain-lab__seg label > span { min-height: 44px; min-width: 44px; }
}
@media (prefers-contrast: more) {
  .chain-block, .chain-block[data-state] { background: var(--cl-laminate); border-color: rgba(127, 227, 255, .6); }
  .chain-block[data-state='broken'], .chain-block[data-state='weak'] { border-color: var(--cl-short); }
  .chain-lab__console { background: var(--cl-solder); border-color: rgba(127, 227, 255, .4); }
  .chain-lab::before, .chain-link__glow { display: none; }
  .chain-hex__lead, .chain-block::before { text-shadow: none; box-shadow: none; }
}
@media (forced-colors: active) {
  .chain-block, .chain-block[data-state], .chain-lab__console { border: 1px solid CanvasText; background: Canvas; }
  .chain-block[data-state='broken'], .chain-block[data-state='weak'] { border: 2px dashed CanvasText; }
  .chain-block::before, .chain-block::after, .chain-lab::before, .chain-link__glow, .chain-hex::after { display: none; }
  .chain-block__pill, .chain-lab__btn, .chain-block__mine, .chain-block[data-state] .chain-block__pill { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .chain-block__data { border-color: CanvasText; background: Field; color: FieldText; }
  .chain-lab__btn[aria-disabled='true'], .chain-block__mine[aria-disabled='true'] { border-color: GrayText; color: GrayText; }
  .chain-block__pill::before, .chain-block__mine::before, .chain-block__key, .chain-lab__v::before { forced-color-adjust: none; background: CanvasText; }
  .chain-link, .chain-link.is-broken, .chain-link.is-hot { color: CanvasText; }
  .chain-link.is-broken .chain-link__half { stroke-dasharray: 1 5; }
  .chain-hex__lead { color: LinkText; text-shadow: none; }
  .chain-hex__lead.is-miss { forced-color-adjust: none; background: Mark; color: MarkText; box-shadow: none; }
  .chain-lab__seg input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}