/* Animated visualisations: "Watch it unlock" and "Try the grind". */

/* ── Watch it unlock ──────────────────────────────────────────────────────────────────────── */
.replay { border-radius: 16px; padding: 1rem 1.1rem; background: radial-gradient(700px 260px at 30% 0%, rgba(103, 139, 255, .12), transparent 70%), rgba(11, 14, 30, .6); border: 1px solid rgba(150, 170, 255, .16); }
.rp-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .rp-body { grid-template-columns: 1fr; } }
.rp-grids { display: grid; gap: 1rem; }
.rp-grids-2 { grid-template-columns: 1fr 1fr; }
.rp-grid-label { font-size: .8rem; color: #C4CCFE; font-weight: 600; margin-bottom: .45rem; }
.rp-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 4px; }
.rp-cell { display: block; aspect-ratio: 1; border-radius: 4px; background: rgba(44, 54, 95, .7); border: 1px solid rgba(150, 170, 255, .14); transition: background .35s, border-color .35s, transform .35s, box-shadow .35s; }
.rp-cell.is-open.is-r0, .rp-cell.sw-open.is-r0 { background: #678BFF; border-color: #C4CCFE; box-shadow: 0 0 10px rgba(103, 139, 255, .6); }
.rp-cell.is-open.is-r1, .rp-cell.sw-open.is-r1 { background: #C4CCFE; border-color: #fff; box-shadow: 0 0 10px rgba(196, 204, 254, .55); }
.rp-cell.is-open.is-r2, .rp-cell.sw-open.is-r2 { background: #3fb8c9; border-color: #b5f3fb; }
.rp-cell.is-fresh { animation: cellpop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cellpop { 0% { transform: scale(.3); background: #fff; } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.rp-cell.is-cut { background: transparent; border-color: rgba(245, 176, 65, .8); border-style: dashed; transform: scale(.72) rotate(12deg); }
.rp-cell.is-open.is-cut { transform: none; border-style: solid; outline: 1.5px dashed rgba(245, 176, 65, .9); outline-offset: 1.5px; }
.rp-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .7rem; font-size: .78rem; color: #9DA4CE; }
.rp-legend .rp-cell { display: inline-block; width: 12px; vertical-align: -2px; margin-right: .25rem; }
.rp-legend .sw-cut { background: transparent; border: 1px dashed rgba(245, 176, 65, .8); }
.rp-side { display: grid; gap: .5rem; align-content: start; }
.rp-stage, .rp-final { padding: .6rem .75rem; border-radius: 12px; background: rgba(22, 27, 58, .6); border: 1px solid rgba(150, 170, 255, .1); transition: border-color .3s, background .3s; }
.rp-stage.future, .rp-final.future { display: none; }
.rp-stage:not(.future), .rp-final:not(.future) { animation: fadeUp .35s cubic-bezier(.2, .8, .2, 1); }
.rp-stage.current { border-color: rgba(103, 139, 255, .6); background: rgba(38, 48, 100, .6); }
.rp-stage.done { opacity: .92; }
.rp-stage-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; font-size: .9rem; }
.rp-stage-dot { width: 8px; height: 8px; border-radius: 50%; background: #678BFF; box-shadow: 0 0 8px rgba(103, 139, 255, .8); flex: none; }
.rp-stage.done .rp-stage-dot, .rp-final .rp-stage-dot { background: #3bcc8a; box-shadow: 0 0 8px rgba(59, 204, 138, .7); }
.rp-stage-status { margin-left: auto; font-size: .75rem; font-weight: 650; }
.rp-stage-status.grinding { color: #f5b041; animation: blink 1s steps(2) infinite; }
.rp-stage-status.ok { color: #6fe0ae; } .rp-stage-status.bad { color: #ff8f9c; }
.rp-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; align-items: baseline; padding: .12rem 0; }
.rp-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #9DA4CE; font-weight: 650; }
.rp-v { font-size: .74rem; color: #dce2ff; word-break: break-all; line-height: 1.4; }
.rp-stage.done .rp-v { color: #b9c0e3; }
.rp-digest span, .gr-live span { padding: 0 1px; }
.der-hit { color: #0B0E1E; background: #9DB4FF; border-radius: 3px; font-weight: 700; }
.rp-final { display: flex; align-items: center; gap: .5rem; border-color: rgba(59, 204, 138, .45); background: rgba(20, 60, 50, .35); }
@keyframes blink { 50% { opacity: .35; } }
.rp-caption { display: grid; align-content: start; gap: .25rem; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(22, 27, 58, .7); border: 1px solid rgba(150, 170, 255, .14); }
.rp-cap-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #9DB4FF; }
.rp-cap-text { font-size: 1rem; line-height: 1.45; color: #F1F4FF; }
.rp-controls { margin-top: 1rem; }
.rp-v.rp-trying { color: #f5b041; }
.rp-cell.is-try { border-color: rgba(245, 176, 65, .55); background: rgba(245, 176, 65, .12); }
.rp-controls { display: flex; align-items: center; gap: .6rem; }
.rp-btn { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 10px; padding: 0; background: rgba(103, 139, 255, .16); border: 1px solid rgba(103, 139, 255, .4); color: #fff; }
.rp-btn:hover { background: rgba(103, 139, 255, .3); }
.rp-track { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); cursor: pointer; overflow: hidden; }
.rp-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4568F3, #9DB4FF); border-radius: 99px; }
.rp-time { font-size: .8rem; color: #9DA4CE; min-width: 4rem; text-align: right; }

/* ── Try the grind ────────────────────────────────────────────────────────────────────────── */
.grind-card { margin-bottom: 1.4rem; }
.gr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.gr-title { font-size: 1.2rem; font-weight: 750; margin-bottom: .2rem; }
.gr-head .muted { max-width: 720px; }
.gr-live { margin: 1rem 0; padding: .8rem 1rem; border-radius: 12px; background: rgba(11, 14, 30, .65); border: 1px solid rgba(150, 170, 255, .14); font-size: 1rem; letter-spacing: .04em; color: #aeb5d8; overflow: hidden; white-space: nowrap; }
.gr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.gr-stats > div { padding: .6rem .8rem; border-radius: 10px; background: rgba(22, 27, 58, .55); border: 1px solid rgba(150, 170, 255, .1); }
.gr-k { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: #9DA4CE; font-weight: 650; }
.gr-v { font-size: 1.25rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.gr-ladder { display: grid; gap: .35rem; margin-bottom: .7rem; }
.gr-rung { display: grid; grid-template-columns: 9.5rem 9rem 1fr auto; gap: .8rem; align-items: center; padding: .45rem .8rem; border-radius: 9px; background: rgba(22, 27, 58, .4); border: 1px solid rgba(150, 170, 255, .08); font-size: .85rem; transition: background .4s, border-color .4s; }
.gr-rung.hit { background: rgba(103, 139, 255, .16); border-color: rgba(103, 139, 255, .5); animation: fadeUp .4s; }
.gr-rung.hit .gr-hit { color: #F1F4FF; }
.gr-when { font-size: .8rem; color: #9DA4CE; text-align: right; font-variant-numeric: tabular-nums; }
.gr-rung.hit .gr-when { color: #6fe0ae; font-weight: 650; }
.gr-engine { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 8px; font-size: .72rem; font-weight: 650; vertical-align: middle; color: #C4CCFE; background: rgba(103, 139, 255, .14); }
.gr-engine:empty { display: none; }
.gr-n { font-weight: 700; } .gr-odds { color: #9DA4CE; } .gr-hit { color: #6d74a0; font-size: .8rem; }

/* How it works: secrets light up one at a time */
.ill .ill-cell-lit { animation: cellpulse 3.2s ease-in-out infinite, reveal-cell 6s ease-in-out infinite; }
@keyframes reveal-cell { 0%, 8% { opacity: 0; } 14%, 92% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ill .ill-cell-lit, .rp-cell.is-fresh, .rp-stage-status.grinding, .gr-rung.hit, .rp-stage:not(.future) { animation: none; opacity: 1; }
}

/* ── flowchart ─────────────────────────────────────────────────────────────────────────────── */

/* ── Script breakdown ───────────────────────────────────────────────────────────────────────── */
.sb-bar { display: flex; gap: 3px; height: 12px; }
.sb-seg { display: block; border-radius: 4px; min-width: 4px; opacity: .85; transition: opacity .2s, transform .2s; }
.sb:has(.on) .sb-seg:not(.on) { opacity: .3; }
.sb-seg.on { opacity: 1; transform: scaleY(1.35); }
.sb-scale { display: flex; justify-content: space-between; margin: .35rem 0 .9rem; font-size: .7rem; color: #7d84b0; font-variant-numeric: tabular-nums; }
/* A fixed number of cards per row at each width, laid out on a grid of half-cards, so the last
   row spreads over the full width instead of stranding one card on its own under a full row. */
.sb-cards { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 620px) {                                    /* two per row, on four half-tracks */
  .sb-cards { grid-template-columns: repeat(4, 1fr); }
  .sb-card { grid-column: span 2; }
  .sb-card:last-child:nth-child(2n+1) { grid-column: span 4; }
}
@media (min-width: 1000px) {                                    /* three per row, on six half-tracks */
  .sb-cards { grid-template-columns: repeat(6, 1fr); }
  .sb-card { grid-column: span 2; }
  .sb-card:last-child:nth-child(3n+1) { grid-column: span 6; }
  .sb-card:nth-last-child(2):nth-child(3n+1),
  .sb-card:nth-last-child(2):nth-child(3n+1) + .sb-card { grid-column: span 3; }
}
.sb-card { padding: .7rem .85rem; border-radius: 12px; background: rgba(44, 54, 95, .45); border: 1px solid rgba(150, 170, 255, .1); transition: background .2s, border-color .2s; outline: none; }
.sb-card.on { background: rgba(58, 72, 128, .6); border-color: rgba(157, 180, 255, .45); }
.sb-head { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.sb-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sb-share { margin-left: auto; font-size: .8rem; font-weight: 700; color: #C4CCFE; font-variant-numeric: tabular-nums; }
.sb-meta { margin: .2rem 0 .35rem; font-size: .72rem; color: #8d94c0; }
.sb-note { margin: 0; font-size: .8rem; line-height: 1.45; color: #b9c0e3; max-width: 72ch; }
.sb-c0 { background: #678BFF; } .sb-c1 { background: #C4CCFE; } .sb-c2 { background: #4568F3; }
.sb-c3 { background: #9DB4FF; } .sb-c4 { background: #3A4FB8; } .sb-c5 { background: #E4E9F2; }

/* grind: live hit flash, log-scale track, ladder, explainer */
.gr-live.gr-flash { border-color: rgba(59, 204, 138, .6); background: rgba(20, 60, 50, .45); transition: none; }
.gr-live { transition: border-color .6s, background .6s; }
.gr-track { margin: .2rem 0 1rem; padding: .8rem 1rem .8rem; border-radius: 12px; background: rgba(22, 27, 58, .5); border: 1px solid rgba(150, 170, 255, .1); }
.gr-track-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.gr-here { font-size: .78rem; color: #C4CCFE; }
/* the step marks sit above the rail and end on it; the scale sits below, clear of them */
.gr-pins { position: relative; height: 2.1rem; }
.gr-pin { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: .7rem; color: #9DA4CE; white-space: nowrap; }
.gr-pin b { font-weight: 700; }
.gr-pin i { width: 2px; height: .8rem; border-radius: 1px; background: rgba(157, 180, 255, .4); }
.gr-pin-last { color: #f5b041; }
.gr-pin-last i { background: rgba(245, 176, 65, .7); }
.gr-key { margin-left: .6rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: #9DA4CE; } .gr-key b { color: #f5b041; }
.gr-pin.hit { color: #6fe0ae; } .gr-pin.hit i { background: #3bcc8a; }
.gr-rail { position: relative; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); }
.gr-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, #4568F3, #9DB4FF); box-shadow: 0 0 14px rgba(103, 139, 255, .5); }
.gr-ticks { position: relative; height: 1.1rem; margin-top: .5rem; }
.gr-ticks span { position: absolute; transform: translateX(-50%); font-size: .7rem; color: #7d84b0; white-space: nowrap; }
.gr-ticks span:first-child { transform: none; } .gr-ticks span:last-child { transform: translateX(-100%); }
.gr-track-foot { margin-top: .4rem; }
/* the live candidate is plain; the closest-so-far is coloured by what each byte would be */
.gr-live { display: flex; align-items: baseline; gap: 1rem; }
.gr-live .gr-k { flex: none; width: 7.5rem; }
.gr-cur { color: #aeb5d8; }
.gr-best-live { margin-top: -.6rem; }
.gr-bestd span { color: #5d6390; }
.gr-bestd .b-hdr { color: #6fe0ae; } .gr-bestd .b-r { color: #9DB4FF; } .gr-bestd .b-shdr { color: #f5b041; }
.gr-bestd .b-s { color: #C4CCFE; } .gr-bestd .b-ht { color: #E4E9F2; }
.gr-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: -.5rem 0 .9rem; color: #b9c0e3; }
.gr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.gr-legend .b-hdr { background: #6fe0ae; } .gr-legend .b-r { background: #9DB4FF; } .gr-legend .b-shdr { background: #f5b041; }
.gr-legend .b-s { background: #C4CCFE; } .gr-legend .b-ht { background: #E4E9F2; }
.gr-rung { grid-template-columns: 9rem minmax(0, 1fr) 8.5rem minmax(0, 13rem) 14rem; }
.gr-what { color: #b9c0e3; font-size: .8rem; }
@media (max-width: 900px) { .gr-rung { grid-template-columns: 7rem 1fr 7rem; } .gr-rung .gr-what, .gr-rung .gr-hit { display: none; } }
.gr-why { margin: 0 0 .8rem; padding: .7rem 1rem; border-radius: 12px; background: rgba(22, 27, 58, .4); border: 1px solid rgba(150, 170, 255, .1); }
.gr-why summary { cursor: pointer; font-weight: 650; }
.gr-why p { margin: .6rem 0 0; font-size: .9rem; line-height: 1.5; color: #d5dbf5; }

/* security review: one summary line that opens to the full list */
details.health > summary.health-bar { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
details.health > summary.health-bar::-webkit-details-marker { display: none; }
.health-open { margin-left: .3rem; font-size: .8rem; color: #9DB4FF; }
.health-open::after { content: " ▸"; } details.health[open] .health-open::after { content: " ▾"; }
details.health > .verdicts { margin-top: .8rem; }

/* the chain every stage runs, above the tables */
.rp-pipe { margin-bottom: 1rem; padding: .7rem .8rem; border-radius: 12px; background: rgba(22, 27, 58, .55); border: 1px solid rgba(150, 170, 255, .1); }
.rp-pipe-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .55rem; font-size: .88rem; }
.rp-pipe-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: .3rem; }
.rp-arr { align-self: center; color: #5d6390; font-style: normal; font-size: .8rem; }
.rp-node { min-width: 0; padding: .45rem .5rem; border-radius: 9px; background: rgba(11, 14, 30, .5); border: 1px solid rgba(150, 170, 255, .08); transition: background .35s, border-color .35s; }
.rp-node b { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7d84b0; margin-bottom: .2rem; }
.rp-node code { display: block; font-size: .72rem; line-height: 1.35; color: #7d84b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-node.on { background: rgba(44, 54, 95, .7); border-color: rgba(103, 139, 255, .35); }
.rp-node.on b { color: #C4CCFE; } .rp-node.on code { color: #E4E9F2; }
.rp-node.trying code { color: #f5b041; }
.rp-node.ok { background: rgba(20, 60, 50, .55); border-color: rgba(59, 204, 138, .55); } .rp-node.ok code { color: #6fe0ae; }
@media (max-width: 700px) { .rp-pipe-row { grid-template-columns: 1fr; } .rp-arr { display: none; } }
/* digest bytes the signature rules pin, where they fit */
.der-pin { color: #0B0E1E; background: #9DB4FF; border-radius: 3px; font-weight: 700; }
.rp-v.rp-trying { color: #f5b041; }
/* the still picture of an unspent lock */

/* ── Stage map: one column per stage, plain-language steps ─────────────────────────────────── */
.sm-data { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.sm-chip { font-size: .78rem; padding: .3rem .6rem; border-radius: 8px; background: rgba(22, 27, 58, .6); color: #9DA4CE; }
.sm-chip b { color: #C4CCFE; font-weight: 650; margin-right: .3rem; }
.sm-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 1.4rem; overflow-x: auto; padding-bottom: .4rem; }
.sm-col { position: relative; padding: .8rem .85rem .9rem; border-radius: 12px; background: #161b39; min-width: 0; }
.sm-col + .sm-col::before { content: "→"; position: absolute; left: -1.1rem; top: .75rem; color: #5d6390; font-size: .95rem; }
.sm-head { font-weight: 700; font-size: .95rem; color: #E4E9F2; margin-bottom: .55rem; }
.sm-why { margin: -.35rem 0 .6rem; font-size: .78rem; line-height: 1.45; color: #9aa0bd; }
.sm-uses { font-size: .74rem; color: #8d94c0; margin: -.3rem 0 .55rem; }
.sm-note { margin: 0; font-size: .83rem; line-height: 1.45; color: #aeb5d8; }
.sm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sm-step { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; padding: .5rem .6rem; border-radius: 9px; background: rgba(255, 255, 255, .03); }
.sm-step[data-fc] { cursor: pointer; } .sm-step[data-fc]:hover { background: rgba(103, 139, 255, .1); }
.sm-kind { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7d84b0; }
.sm-check .sm-kind { color: #9DB4FF; } .sm-supply .sm-kind { color: #d9a24a; }
.sm-branch { font-size: .64rem; font-weight: 700; color: #c9a25e; margin-left: .4rem; }
.sm-mark { grid-row: 1; grid-column: 2; font-size: .8rem; color: #6fe0ae; }
.sm-text { grid-column: 1 / -1; font-size: .84rem; line-height: 1.4; color: #dce2f7; }
.sm-skip { opacity: .45; } .sm-skip .sm-mark { color: #7d84b0; }
.sm-fail { background: rgba(255, 92, 108, .1); } .sm-fail .sm-mark { color: #ff8f9c; }
.sm-unread { background: rgba(245, 176, 65, .08); } .sm-unread .sm-mark { color: #f5b041; }
.sm-warn { grid-column: 1 / -1; font-size: .76rem; color: #e0b060; }
.sm-end.sm-good { background: rgba(20, 60, 50, .45); } .sm-end.sm-bad { background: rgba(90, 30, 52, .45); }
.sm-start { background: #131832; }
/* the caption holds three lines, so a longer explanation never pushes the picture down; each new one flashes */
.rp-caption.rp-cap-new { animation: cap-new 2.2s cubic-bezier(.25, .1, .25, 1); }
@keyframes cap-new { 0% { border-color: rgba(150, 170, 255, .14); background: rgba(22, 27, 58, .7); } 18% { border-color: rgba(157, 180, 255, .6); background: rgba(52, 66, 128, .72); } 100% { border-color: rgba(150, 170, 255, .14); background: rgba(22, 27, 58, .7); } }
/* each try sweeps through the chain, node by node */
.rp-pipe-row.sweep .rp-node { animation: node-sweep .55s ease-out both; }
.rp-pipe-row.sweep .rp-node:nth-of-type(2) { animation-delay: .06s; } .rp-pipe-row.sweep .rp-node:nth-of-type(3) { animation-delay: .12s; }
.rp-pipe-row.sweep .rp-node:nth-of-type(4) { animation-delay: .18s; } .rp-pipe-row.sweep .rp-node:nth-of-type(5) { animation-delay: .24s; }
@keyframes node-sweep { 0% { background: rgba(245, 176, 65, .28); border-color: rgba(245, 176, 65, .7); } 100% { } }
/* the digest key: a signature's layout, with the bytes that must match highlighted */
.rp-digest-key { display: grid; gap: .45rem; margin: .8rem 0 0; color: #9DA4CE; line-height: 1.45; }
.sigtpl { display: flex; flex-wrap: wrap; gap: 3px; }
.sigtpl i { font-style: normal; font-family: var(--mono); font-size: .72rem; padding: .1rem .35rem; border-radius: 4px; background: rgba(255, 255, 255, .05); color: #9DA4CE; }
.sigtpl i.p { background: #9DB4FF; color: #0B0E1E; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .rp-pipe-row.sweep .rp-node, .rp-caption.rp-cap-new { animation: none; } }
/* the fields a search varies */
.rp-tag { font-style: normal; margin-left: .35rem; padding: 0 .3rem; border-radius: 4px; font-size: .6rem; letter-spacing: .04em; color: #f5b041; background: rgba(245, 176, 65, .12); vertical-align: 1px; }

/* chips and the colour-key toggle are for phones; on wider screens everything is shown */
.rp-chips { display: none; }
.rp-keys > summary { display: none; }

/* ── Watch it unlock, on phones: one screen, one stage at a time ───────────────────────────────── */
@media (max-width: 760px) {
  .replay { display: flex; flex-direction: column; gap: .5rem; padding: .65rem .6rem; border-radius: 14px; }
  .rp-chips { order: 0; display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; }
  .rp-chips li { flex: 1; text-align: center; font-size: .66rem; font-weight: 700; padding: .3rem .1rem; border-radius: 6px; color: #7d84b0; background: rgba(255, 255, 255, .04); transition: background .4s, color .4s; }
  .rp-chips li.done { color: #6fe0ae; background: rgba(59, 204, 138, .1); }
  .rp-chips li.cur { color: #fff; background: rgba(103, 139, 255, .32); }
  .rp-caption { order: 1; padding: .55rem .65rem; margin: 0; }
  .rp-digest-key { display: none; }
  .rp-cap-title { font-size: .66rem; }
  .rp-cap-text { font-size: .84rem; line-height: 1.4; }
  .rp-controls { order: 3; margin: 0; }
  .rp-btn { width: 2.6rem; height: 2.6rem; }
  .rp-body { order: 2; display: block; }
  /* the per-stage cards repeat the chain's values in full: phones keep just the chain */
  .rp-side { display: none; }
  .rp-pipe { padding: .45rem .5rem; margin-bottom: .5rem; }
  .rp-pipe-head { display: none; }
  .rp-pipe-row { grid-template-columns: 1fr; gap: 3px; }
  .rp-arr { display: none; }
  .rp-node { display: grid; grid-template-columns: 8.6rem 1fr; align-items: baseline; gap: .3rem; padding: .28rem .45rem; }
  .rp-node b { margin: 0; font-size: .58rem; letter-spacing: .02em; white-space: nowrap; }
  .rp-node code { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* only the table the current stage uses */
  .rp-grids, .rp-grids-2 { display: block; }
  .replay[data-table="0"] .rp-gridbox:not([data-ti="0"]), .replay[data-table="1"] .rp-gridbox:not([data-ti="1"]) { display: none; }
  .rp-grid-label { font-size: .72rem; margin-bottom: .3rem; }
  .rp-grid { --cols: 19 !important; gap: 2px; }
  .rp-cell { border-radius: 3px; }
  /* colour keys behind a tap */
  .rp-keys { margin-top: .4rem; }
  .rp-keys > summary { display: block; cursor: pointer; font-size: .74rem; color: #9DB4FF; padding: .2rem 0; }
  .rp-legend { font-size: .7rem; gap: .2rem .7rem; }
  .rp-digest-key { font-size: .74rem; }
  .sigtpl i { font-size: .62rem; }
}

/* How it works and the grind, on phones */
@media (max-width: 760px) {
  /* diagrams keep a readable size and scroll sideways */
  .ch-art { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.4rem; padding: 0 .4rem .3rem; scrollbar-width: thin; }
  .ch-art .ill { min-width: 500px; }
  .ch-art::after { content: "swipe to see the whole diagram →"; display: block; font-size: .72rem; color: #7d84b0; margin-top: .3rem; position: sticky; left: 0; }
  .gr-stats { grid-template-columns: 1fr 1fr; gap: .45rem; }
  .gr-stats > div { padding: .5rem .6rem; }
  .gr-v { font-size: 1.05rem; }
  .gr-live { font-size: .78rem; gap: .5rem; padding: .6rem .7rem; }
  .gr-live .gr-k { width: auto; }
  .gr-rung { grid-template-columns: 1fr auto; gap: .1rem .6rem; padding: .45rem .65rem; }
  .gr-rung .gr-odds { white-space: nowrap; text-align: right; }
  .gr-rung .gr-when { grid-column: 1 / -1; text-align: left; }
  .gr-pin[data-n="5"] b, .gr-pin[data-n="8"] b { transform: translateY(-.95rem); }
  .gr-pins { height: 2.9rem; }
  .gr-head .primary { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
  /* what's ground gets the full width: label above, value below */
  .rp-node[data-n="in"] { grid-template-columns: 1fr; gap: .1rem; }
  .rp-cap-text { font-size: .82rem; }
}

/* the secrets map: one cell per one-time secret, lit when a spend has published it.
   The panel is one full-width column: a header bar (the count, legend beside it), the grids,
   then the caption. Nothing sits in a side rail: a legend and a sentence left the lower half
   of the card empty while the table was squeezed into the other half. */
.smap { display: grid; gap: .9rem; }
.smap-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .35rem 1.6rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(157, 180, 255, .16);
}
.smap-sum { font-size: .95rem; color: #c4c9e4; }
.smap-big { font-size: 1.6rem; font-weight: 700; color: #fff; margin-right: .2rem; }
.smap-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem 1.1rem; margin: 0; font-size: .78rem; color: #9896c4; }
.smap-key { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.smap-key .sc { width: 11px; height: 11px; flex: none; }
.smap-grids { display: grid; gap: 1.1rem; align-content: start; }
/* one table takes the whole row; a lock that keeps a table per round sets them side by side */
.smap-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1.1rem 1.6rem; }
/* the menus share one band, each as wide as it has entries: one cell size across all of them,
   and the width of a menu is then how long the menu is */
.smap-menus { display: flex; flex-wrap: wrap; gap: .85rem 1.4rem; }
.smap-menu { flex-grow: var(--cols, 1); flex-shrink: 1; flex-basis: 0; min-width: min(100%, 9rem); }
.smap-head { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; font-size: .82rem; margin-bottom: .45rem; }
.smap-head strong { color: #C4CCFE; }
/* a table fits as many cells of one size as the row holds, so the grid grows with the card
   rather than a fixed column count shrinking the cells into a corner of it. A menu keeps its
   own count: every entry on one line is what makes a menu read as a menu. */
.smap-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--sgap, 5px); }
.smap-g:not(.smap-menu) .smap-grid { grid-template-columns: repeat(auto-fill, minmax(var(--cell, 30px), 1fr)); }
.smap-menu .smap-grid { max-width: calc(var(--cols) * 2rem); }     /* a 4-entry menu, not 4 slabs */
.sc { display: block; width: 100%; padding: 0; aspect-ratio: 1; border-radius: 4px; background: rgba(44, 54, 95, .7); border: 1px solid rgba(150, 170, 255, .14); -webkit-appearance: none; appearance: none; }
.sc[data-sck] { cursor: pointer; }
.sc[data-sck]:hover, .sc[data-sck]:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-color: rgba(150, 170, 255, .14); }
.sc-open.sc-s0 { background: #3fb8c9; border-color: #b5f3fb; }
.sc-open.sc-s1 { background: #678BFF; border-color: #C4CCFE; box-shadow: 0 0 8px rgba(103, 139, 255, .55); }
.sc-open.sc-s2 { background: #C4CCFE; border-color: #fff; box-shadow: 0 0 8px rgba(196, 204, 254, .5); }
.sc-open.sc-s3 { background: #f5b041; border-color: #ffd89b; }
.sc-up { opacity: .72; }
/* what the picture says, as the panel's caption rather than a paragraph in a side column */
.smap-note { font-size: .86rem; line-height: 1.55; color: #9aa0bd; margin: 0; padding-top: .75rem; border-top: 1px solid rgba(157, 180, 255, .12); max-width: 88ch; }
/* narrower than a wide desktop, three menus abreast come out as 15px dots: below that, one menu
   per line instead, each no wider than its own entries need */
@media (max-width: 1100px) {
  /* nowrap as well as column: a wrapping column container sizes its items off the main axis,
     which here is the height, and every menu grows a tail of empty space */
  .smap-menus { flex-direction: column; flex-wrap: nowrap; gap: .9rem; }
  .smap-menu { flex: 0 0 auto; min-width: 0; }   /* down a column, --cols would size the height */
}
@media (max-width: 760px) { .smap-grid { --cell: 24px; --sgap: 4px; } }

/* the hover card behind every cell of the secrets map: the commitment the script holds, and the
   preimage a spend published for it. Pointer, keyboard and tap all open the same card. */
.scpop {
  position: absolute; z-index: 60; opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .12s, transform .12s; width: min(28rem, calc(100vw - 20px));
  padding: .75rem .9rem; border-radius: 12px; font-size: .82rem; line-height: 1.5; color: #E4E9F2;
  background: linear-gradient(160deg, rgba(40, 50, 100, .97), rgba(22, 27, 58, .98));
  border: 1px solid rgba(157, 180, 255, .32); box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .8);
}
.scpop.on { opacity: 1; transform: none; pointer-events: auto; }
.scpop-head { margin-bottom: .5rem; }
.scpop-head strong { color: #C4CCFE; }
.scpop-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .7rem; align-items: baseline; }
.scpop-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8f95bb; }
.scpop-v { min-width: 0; overflow-wrap: anywhere; font-size: .78rem; }
.scpop-secret { color: #ffd89b; }
.scpop-at { display: block; font-size: .7rem; color: #8f95bb; font-family: inherit; }
.scpop-foot { margin-top: .55rem; padding-top: .5rem; border-top: 1px solid rgba(157, 180, 255, .16); color: #9aa0bd; }
.scpop-chain { display: block; margin-top: .25rem; font-size: .72rem; color: #8f95bb; }
.scpop .copybtn { margin-left: .35rem; vertical-align: middle; }

/* phones: the stage map reads top to bottom. Side by side it scrolled off the screen edge with
   every column clipped, which is the one view where a clipped column loses the meaning. */
@media (max-width: 600px) {
  .sm-cols { grid-auto-flow: row; grid-auto-columns: auto; gap: 1.6rem; overflow-x: visible; }
  .sm-col + .sm-col::before { content: "↓"; left: 50%; top: -1.25rem; transform: translateX(-50%); }
  /* the header bar stacks: the count on its line, the legend left-aligned under it */
  .smap { gap: .75rem; }
  .smap-legend { justify-content: flex-start; }
  .smap-grid { --cell: 21px; --sgap: 4px; }
  /* a menu already has a line to itself here, so its cells are sized like the table's rather
     than stretched across the phone: 16 of them split one width makes 8px dots */
  .smap-menu .smap-grid { grid-template-columns: repeat(auto-fill, minmax(var(--cell, 21px), 1fr)); max-width: none; }
  .scpop { font-size: .8rem; }
}