/* /how-it-works. Tokens come from system.css; the diagram parts from dg.css. */
.hw-sec { scroll-margin-top: calc(var(--header-h) + 3.25rem); }
.hw-sec .sec-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hw-sec .sec-head .lede { max-width: 70ch; }
.hw-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dg-flow); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.hw-cols { align-items: stretch; }
.hw-cols > .cap p { margin: 0; color: var(--text-dim); font-size: var(--text-body-size); }
@media (max-width: 63.99rem) { .hw-cols { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }
.hw-dg { min-width: 0; }
.hw-fallback { color: var(--text-dim); font-size: var(--text-body-size); padding-left: 1.25rem; display: grid; gap: .4rem; }
ol.hw-fallback { list-style: decimal; }

.hw-dg .dg__chips { max-width: 100%; }
.hw-sec .table-wrap { margin-top: 1.5rem; }
.hw-sec .table-wrap td code { display: inline-block; margin: 0 6px 6px 0; padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; font: 400 var(--text-code-size) var(--mono); color: var(--text-dim); white-space: nowrap; }
.hw-sec .table-wrap th[scope="row"] { white-space: normal; }
/* technical depth */
.hw-more { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(255, 255, 255, .02); }
.hw-more > summary { cursor: pointer; list-style: none; padding: .85rem 1.1rem; color: var(--text); font-size: var(--text-body-size); display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; }
.hw-more > summary::-webkit-details-marker { display: none; }
.hw-more > summary::after { content: '+'; color: var(--text-faint); font: 400 var(--text-code-size) var(--mono); transition: transform var(--dg-hover) var(--ease); }
.hw-more[open] > summary::after { transform: rotate(45deg); }
.hw-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hw-more > div { padding: 0 1.1rem 1.1rem; display: grid; gap: .8rem; color: var(--text-dim); max-width: none; }
.hw-more code { font-family: var(--mono); font-size: var(--text-code-size); color: var(--text); overflow-wrap: anywhere; }
.hw-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; }
.hw-note { color: var(--text-faint); font-size: var(--text-body-size); }
.notice.hw-note { margin-top: 1.5rem; color: var(--text-dim); }
.hw-sub { margin-bottom: .75rem; }
.hw-lead2 { color: var(--text-dim); margin-bottom: 1rem; }
.hw-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 3vw, 2.5rem); }
/* artifact anatomy */
.hw-art { display: grid; gap: 1.25rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .006)), var(--surface-1); box-shadow: var(--elev); }
.hw-art__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 63.99rem) { .hw-art__grid { grid-template-columns: minmax(0, 1fr); } }
.hw-card { border: 1px solid var(--border-hover); border-radius: var(--r-control); background: rgba(0, 0, 0, .3); overflow: hidden; }
.hw-card__bar { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border); color: var(--text-faint); font: 500 var(--text-small-size) var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.hw-card__rows { display: grid; }
.hw-field { appearance: none; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .75rem; text-align: left; padding: .8rem .9rem; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; min-height: 2.75rem; transition: background var(--dg-hover) var(--ease); }
.hw-field:last-child { border-bottom: 0; }
.hw-field:hover { background: rgba(255, 255, 255, .03); }
.hw-field[aria-pressed="true"] { background: rgba(90, 93, 203, .14); box-shadow: inset 3px 0 0 var(--brand-indigo); color: var(--text); }
.hw-field:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.hw-field__k { font: 400 var(--text-code-size) var(--mono); color: var(--text); }
.hw-field__v { font: 400 var(--text-code-size) var(--mono); overflow-wrap: anywhere; }
@media (max-width: 30rem) { .hw-field { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }
.hw-detail { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(0, 0, 0, .22); display: grid; gap: .5rem; font-size: var(--text-body-size); }
.hw-detail b { font: 500 var(--text-code-size) var(--mono); color: var(--text); }
.hw-detail p { color: var(--text-dim); line-height: var(--text-body-lh); }
.hw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.hw-tile--wide { grid-column: 1 / -1; }
@media (max-width: 47.99rem) { .hw-tiles { grid-template-columns: minmax(0, 1fr); } }
.hw-tile { display: grid; gap: var(--btn-row); align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(255, 255, 255, .02); color: var(--text-dim); font-size: var(--text-body-size); }
.hw-tile h4 { color: var(--text); }
.hw-lab { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.hw-lab--col { display: grid; gap: .4rem; }
.hw-lab input[type="range"] { flex: 1 1 10rem; accent-color: var(--brand-blue); min-height: 2rem; }
.hw-lab output { font: var(--text-code);  color: var(--text); min-width: 3.5rem; }
.hw-input { width: 100%; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--border-hover); border-radius: var(--r-control); background: rgba(0, 0, 0, .3); color: var(--text); font: 400 var(--text-code-size) var(--mono); }
.hw-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hw-btnrow { display: flex; flex-wrap: wrap; gap: var(--btn-row); align-items: center; }
.hw-bar { position: relative; height: .6rem; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.hw-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--brand-blue); transition: width var(--dg-hover) var(--ease); }
.hw-bar i.is-bad { background: var(--invalid); }
.hw-bar b { position: absolute; top: -.35rem; bottom: -.35rem; width: 2px; background: var(--text-dim); }
.hw-status { min-height: 1.5em; color: var(--text-dim); }
.hw-status.is-ok { color: var(--valid); }
.hw-status.is-bad { color: var(--invalid); }
.hw-hashes { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .35rem .75rem; }
.hw-hashes dt { color: var(--text-faint); }
.hw-hashes dd { font: 400 var(--text-code-size) var(--mono); overflow-wrap: anywhere; color: var(--text-dim); }
@media (max-width: 40rem) { .hw-hashes { grid-template-columns: minmax(0, 1fr); } }
.hw-hash .is-diff { color: #fff; background: rgba(255, 107, 122, .5); border-radius: 2px; }
/* Merkle explorer */
.hw-merkle { display: grid; gap: .9rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .006)), var(--surface-1); box-shadow: var(--elev); margin-top: 1.5rem; }
.hw-merkle h3 { margin: 0; }
.hw-merkle .dg__btn[aria-pressed="true"] { color: var(--text); border-color: var(--brand-indigo); }
.hw-mk { width: 100%; height: auto; display: block; }
.hw-mk-cap { margin: 0; min-height: 3.2em; color: var(--text); font-size: var(--text-body-size); line-height: var(--text-body-lh); padding: .6rem .9rem; border-left: 2px solid var(--brand-blue); background: rgba(255, 255, 255, .025); border-radius: 0 10px 10px 0; overflow-wrap: anywhere; }
.mk-l { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.3; transition: stroke var(--dg-step, var(--dg-step-default)) var(--ease); }
.mk-l.is-on { stroke: var(--brand-blue); stroke-width: 2; }
.mk-n rect { fill: var(--surface-2); stroke: var(--border-hover); transition: stroke var(--dg-step, var(--dg-step-default)) var(--ease), fill var(--dg-step, var(--dg-step-default)) var(--ease); }
.mk-n text { fill: var(--text-faint); font: 400 12px var(--mono); }
.mk-n.is-on rect { stroke: var(--brand-blue); fill: rgba(1, 137, 253, .12); }
.mk-n.is-on text { fill: var(--text); }
.mk-n.is-sib rect { stroke: var(--brand-amber); fill: rgba(251, 186, 2, .1); }
.mk-n.is-sib text { fill: var(--text); }
.mk-n.is-bad rect { stroke: var(--invalid); fill: rgba(255, 107, 122, .1); }
.mk-t { fill: var(--text-faint); font: 500 11px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.hw-mk-list { display: grid; gap: .5rem; list-style: none; counter-reset: mk; padding: 0; }
.hw-mk-list li { counter-increment: mk; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--r-control); color: var(--text-faint); font-size: var(--text-body-size); overflow-wrap: anywhere; }
.hw-mk-list li::before { content: counter(mk) '. '; font-family: var(--mono); }
.hw-mk-list li.is-on { color: var(--text-dim); border-color: var(--border-hover); }
.hw-mk-list li.is-now { color: var(--text); border-color: var(--brand-blue); }
@media (min-width: 48rem) { .hw-mk-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hw-merkle__stage { position: relative; } }
@media (max-width: 47.99rem) { .hw-mk { display: none; } }
/* delegation widget: a funnel of three cards joined by luminous links; no keyframes, every change is a transition (motion is driven by the shared autoplay) */
.hw-deleg { margin-top: 1.5rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .006)), var(--surface-1); box-shadow: var(--elev); display: grid; gap: .6rem; }
.hw-deleg h3 { margin: 0; }
.hw-deleg .hw-lead2 { margin-bottom: 0; }
.dl { margin: 14.4px 0 0; display: grid; gap: 24px; }
.dl__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
/* three equal cards joined by two directional connectors: card | connector | card | connector | card; the nine card rows are shared (subgrid), so every part sits at the same height in all three */
.dl__stage { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) 52px minmax(0, 1fr); align-items: stretch; }
.dl-card { grid-row: 1 / span 9; grid-template-rows: subgrid; row-gap: 0; }
.dl-link { grid-row: 1 / span 9; }
.dl-card { position: relative; display: grid; align-content: start; padding: 18px; border: 1px solid var(--border-hover); border-radius: var(--r-panel); background: rgba(0, 0, 0, .28); opacity: .74; transition: opacity var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.dl-card.is-lit { opacity: 1; border-color: rgba(1, 137, 253, .6); box-shadow: 0 0 0 1px rgba(1, 137, 253, .22), 0 12px 38px -14px rgba(90, 93, 203, .75); }
.dl-part { appearance: none; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dl-part:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.dl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; min-height: 26px; color: var(--text); }
.dl-head b { font-weight: 600; }
.dl-depth { flex: none; padding: 2px 9px; border: 1px solid var(--border-hover); border-radius: 999px; color: var(--text-dim); font: 400 var(--text-small-size)/1.3 var(--mono); }
.dl-role { margin: 4px 0 0; color: var(--text-dim); }
.dl-lab { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--text-dim); font: 500 var(--text-small-size)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.dl-card > .dl-lab { margin-top: 18px; }
.dl-lab b { color: var(--text-dim); font-weight: 500; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.dl-pills { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; margin-top: 8px; }
.dl-pill { appearance: none; display: inline-flex; align-items: center; transition: opacity var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease), transform 300ms var(--ease), box-shadow var(--t) var(--ease); }
.dl .dl-pill { box-sizing: border-box; height: 30px; min-height: 0; padding: 0 12px; border: 1px solid var(--border-hover); border-radius: 999px; background: transparent; color: var(--text-dim); font: 500 var(--text-body-size)/1 var(--font); }
.dl .dl-pill.is-on { border-color: var(--brand-blue); color: var(--text); background: rgba(1, 137, 253, .12); }
.dl-card:not(.is-lit) .dl-pill.is-on { border-color: var(--border-hover); background: transparent; }
.dl .dl-pill.is-off { border-style: dashed; border-color: var(--border-hover); color: var(--text-faint); background: transparent; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(138, 147, 166, .7); }
.dl button.dl-pill:hover { border-color: var(--text-dim); color: var(--text); }
.dl button.dl-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dl .dl-pill.is-try { transform: translateY(-4px); text-decoration: none; border-style: solid; border-color: var(--invalid); color: var(--invalid); background: color-mix(in srgb, var(--invalid) 14%, transparent); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--invalid) 70%, transparent); }
.dl-meter { display: grid; gap: 8px; margin-top: 16px; }
.dl-card > .dl-meter + .dl-meter { margin-top: 12px; }
.dl-bar { position: relative; height: 6px; }
.dl-track { position: absolute; inset: 0; border-radius: 99px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); overflow: hidden; }
.dl-fill, .dl-over { position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--w, 1)); transition: transform 500ms var(--ease), opacity var(--t) var(--ease); }
.dl-fill { background: linear-gradient(90deg, #FBBA02, #FC6A02 40%, #C02E62 75%, #5A5DCB); }
.dl-meter.is-cut .dl-fill { background: linear-gradient(90deg, #5A5DCB, #0189FD); }
.dl-over { background: repeating-linear-gradient(135deg, var(--invalid) 0 5px, color-mix(in srgb, var(--invalid) 45%, transparent) 5px 10px); opacity: 0; transform: scaleX(0); }
.dl-over.is-show { opacity: 1; transform: scaleX(var(--w, 0)); }
/* ghost marker: the parent's value, shown where a deeper card has narrowed a limit */
.dl-ghost { position: absolute; top: -3px; bottom: -3px; left: calc(var(--g, 1) * 100%); width: 2px; margin-left: -2px; border-radius: 1px; background: var(--text-dim); opacity: 0; text-decoration: none; transition: opacity var(--t) var(--ease), left 500ms var(--ease); }
.dl-meter.is-cut .dl-ghost { opacity: .85; }
.dl-tag { margin: 10px 0 0; min-height: 24px; display: grid; align-items: center; color: var(--invalid); font: 400 var(--text-small-size)/1.3 var(--mono); }
.dl-tag__t { grid-area: 1 / 1; display: flex; align-items: center; gap: .4rem; opacity: 0; transition: opacity var(--t) var(--ease); }
.dl-tag__t.is-bad { opacity: 1; }
.dl-tag .bdg { margin: 0; }
/* every text a slot can ever show is also laid out, hidden, in the same grid cell: the slot keeps the height of its longest text */
.dl__size { visibility: hidden; opacity: 0; pointer-events: none; user-select: none; }
.dl-tag__t.dl__size { grid-area: 1 / 1; }
/* connector: a line with a filled arrowhead in its own cell, label above; the one next to the step that is playing pulses */
.dl-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255, 255, 255, .34); transition: color var(--t) var(--ease); }
.dl-link__t { position: absolute; left: 0; right: 0; bottom: calc(50% + 12px); text-align: center; white-space: nowrap; color: var(--text-faint); font: 400 var(--text-small-size)/1.2 var(--mono); }
.dl-link svg { display: block; flex: none; }
.dl-link__v { display: none !important; }
.dl-link.is-lit { color: var(--brand-blue); }
.dl-link.is-lit .dl-link__t { color: var(--text-dim); }
.dl-link.is-now svg { animation: dl-pulse 1.6s ease-in-out infinite; }
@keyframes dl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.dl-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dl-rule { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--border-hover); border-radius: var(--r-panel); background: rgba(0, 0, 0, .22); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease); }
.dl-rule.is-lit { border-color: rgba(1, 137, 253, .6); box-shadow: 0 0 20px -8px rgba(1, 137, 253, .7); }
.dl-rule.is-bad { border-color: var(--invalid); background: color-mix(in srgb, var(--invalid) 9%, transparent); box-shadow: 0 0 22px -6px color-mix(in srgb, var(--invalid) 75%, transparent); }
.dl-rule__ico { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border-hover); border-radius: 8px; background: rgba(255, 255, 255, .04); color: var(--text-dim); transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.dl-rule__ico svg { width: 18px; height: 18px; }
.dl-rule.is-lit .dl-rule__ico { color: var(--brand-blue); }
.dl-rule.is-bad .dl-rule__ico { color: var(--invalid); border-color: var(--invalid); }
.dl-rule__h { display: grid; gap: 2px; padding: 0; min-height: 32px; align-content: center; }
.dl-rule__h b { font-weight: 600; color: var(--text); font-size: var(--text-card-title-size); line-height: 1.3; }
.dl-rule__s { display: grid; color: var(--text-dim); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.dl-rule__s > * { grid-area: 1 / 1; transition: opacity var(--t) var(--ease); }
.dl-rule__a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--invalid); opacity: 0; }
.dl-rule.is-bad .dl-rule__a { opacity: 1; }
.dl-rule.is-bad .dl-rule__t { opacity: 0; }
.dl-rule__a code { padding: 0; border: 0; background: none; color: inherit; font: 400 var(--text-small-size)/1.45 var(--mono); overflow-wrap: anywhere; }
/* footnotes: caption, hint and note as one quiet block, left-aligned with the cards */
.dl-foot { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.dl__cap { margin: 0; display: grid; color: var(--text-dim); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.dl__cap > .dl__live, .dl__cap > .dl__size { grid-area: 1 / 1; }
.dl-hint, .dl-note { margin: 0; color: var(--text-faint); }
.dl-hint { display: flex; align-items: center; gap: 8px; }
.dl-hint__i { display: grid; flex: none; width: 16px; height: 16px; }
.dl-hint__i svg { width: 16px; height: 16px; }
.dl-note code { font-family: var(--mono); font-size: var(--text-small-size); color: var(--text-dim); overflow-wrap: anywhere; }
/* the source link below the box: a plain line under the panel, so it gets its own distance from the panel edge */
#hw-deleg + .hw-note { margin: 16px 0 0; padding: 0; }
@media (max-width: 59.99rem) {
  .dl__stage { grid-template-columns: minmax(0, 1fr); }
  .dl-card { grid-row: auto; grid-template-rows: none; }
  .dl-link { grid-row: auto; flex-direction: row; justify-content: center; gap: 10px; height: 44px; }
  .dl-link__t { left: calc(50% + 14px); right: auto; bottom: auto; top: 50%; transform: translateY(-50%); }
  .dl-link__h { display: none !important; }
  .dl-link__v { display: block !important; }
  .dl-rules { grid-template-columns: minmax(0, 1fr); }
}
}
/* read next */
#read-next .caps { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 39.99rem) { #read-next .caps { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 75rem) { #read-next .caps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .hw-bar i, .mk-l, .mk-n rect, .hw-more > summary::after, .hw-field, .dl-card, .dl-pill, .dl-fill, .dl-over, .dl-link, .dl-ghost, .dl-rule, .dl-rule__s > *, .dl-tag { transition: none; } .dl-link.is-now svg { animation: none; } }

/* the idle line of an inspector: shown under widgets that explain their parts when selected */
.hw-hint { margin: .5rem 0 0; font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.hw-mk .mk-n { cursor: pointer; outline: none; }
.hw-mk .mk-n:focus-visible rect { stroke: var(--focus); stroke-width: 2.2; }

/* ============ hero (shared component: system.css "THE ONE HERO") + in-page pill bar ============ */
.hw-hero { --hw-nav-h: 4.375rem; padding-bottom: 0; }

.hw-nav { --hw-nav-h: 4.375rem; position: relative; z-index: 30; margin-top: calc(1.5rem - 8px); padding-block: 8px; pointer-events: none; }
.hw-nav__bar { pointer-events: auto; width: fit-content; max-width: 100%; border: 1px solid var(--border-hover, var(--border)); border-radius: 16px; background: rgba(18, 20, 28, .66); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.hw-nav ul { --fl: 0px; --fr: 0px; list-style: none; margin: 0; display: flex; gap: 8px; padding: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; border-radius: 16px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.hw-nav ul::-webkit-scrollbar { display: none; }
.hw-nav li { flex: none; scroll-snap-align: center; }
.hw-nav a { box-sizing: border-box; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; white-space: nowrap; font-size: .875rem; line-height: 1; color: var(--text-dim); text-decoration: none; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.hw-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .06); transform: translateY(-1px); }
.hw-nav a[aria-current="location"] { color: var(--text); background: color-mix(in srgb, var(--brand-blue) 14%, transparent); border-color: color-mix(in srgb, var(--brand-blue) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-blue) 18%, transparent), 0 0 12px color-mix(in srgb, var(--brand-blue) 32%, transparent); }
.hw-nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .hw-nav a { transition: none; } .hw-nav a:hover { transform: none; } }

/* wide screens: the bar sticks under the site header; the left stepper (hung in the margin, outside the content column) starts below it */
@media (min-width: 64.01rem) {
  .hw-nav { position: sticky; top: var(--header-h); }
  .hw-sec { scroll-margin-top: calc(var(--header-h) + var(--hw-nav-h) + 1rem); }
  body:has(.hw-nav) .rm-rail { top: calc(var(--header-h) + 4.375rem + 1.5rem); }
}
@media (max-width: 63.99rem) { .hw-nav { margin-top: 1rem; } }
/* Off-screen decorative loops are parked (class set in how.mjs); they resume where they stopped. Same look on screen. */
main > .section.hw-sec.is-off::before, main > .section.hw-sec.is-off::after, .hw-dg.is-off.dg::before, .hw-dg.is-off.dg::after, .c-foot.is-off::before, .c-foot.is-off::after, .c-foot.is-off .c-foot__mark { animation-play-state: paused; }

/* Until a diagram is built (assets/js/how-boot.mjs builds it when it nears the screen) its box keeps about the height it will have, so the page does not grow while it is read.
   Exact at 1200px and wider; an estimate at narrower widths, and always replaced by the real height as soon as the diagram is built. */
.js .hw-dg:not(.dg), .js #hw-art:not(.is-ready), .js #hw-merkle:not(.is-ready), .js #hw-deleg:not(.is-ready) { min-height: var(--hw-r, 0); }
@media (min-width: 75rem) { #dg-seq { --hw-r: 722px; } #dg-pipe { --hw-r: 466px; } #hw-art { --hw-r: 1056px; } #dg-evid { --hw-r: 379px; } #dg-keys { --hw-r: 450px; } #hw-merkle { --hw-r: 644px; } #dg-off { --hw-r: 545px; } #hw-deleg { --hw-r: 798px; } #dg-stream { --hw-r: 379px; } #dg-tools { --hw-r: 425px; } }
@media (min-width: 64rem) and (max-width: 74.99rem) { #dg-seq { --hw-r: 712px; } #dg-pipe { --hw-r: 482px; } #hw-art { --hw-r: 1069px; } #dg-evid { --hw-r: 379px; } #dg-keys { --hw-r: 471px; } #hw-merkle { --hw-r: 598px; } #dg-off { --hw-r: 539px; } #hw-deleg { --hw-r: 791px; } #dg-stream { --hw-r: 379px; } #dg-tools { --hw-r: 445px; } }
@media (min-width: 48rem) and (max-width: 63.99rem) { #dg-seq { --hw-r: 1148px; } #dg-pipe { --hw-r: 880px; } #hw-art { --hw-r: 1220px; } #dg-evid { --hw-r: 516px; } #dg-keys { --hw-r: 504px; } #hw-merkle { --hw-r: 552px; } #dg-off { --hw-r: 893px; } #hw-deleg { --hw-r: 1650px; } #dg-stream { --hw-r: 383px; } #dg-tools { --hw-r: 473px; } }
@media (max-width: 47.99rem) { #dg-seq { --hw-r: 1199px; } #dg-pipe { --hw-r: 907px; } #hw-art { --hw-r: 1774px; } #dg-evid { --hw-r: 670px; } #dg-keys { --hw-r: 567px; } #hw-merkle { --hw-r: 736px; } #dg-off { --hw-r: 1036px; } #hw-deleg { --hw-r: 1884px; } #dg-stream { --hw-r: 800px; } #dg-tools { --hw-r: 1035px; } }