/* PQB Explorer theme: the visual layer over style.css.
   Glass surfaces over a live WebGPU backdrop (vgpu), gradient hairlines, a cursor spotlight,
   display type with a moving sheen, and motion that switches off under prefers-reduced-motion. */

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  --ink: #f4f3ff;
  --glass: rgba(20, 24, 50, .78);
  --glass-2: rgba(30, 36, 70, .62);
  --hair: rgba(150, 170, 255, .16);
  --hair-hi: rgba(170, 188, 255, .42);
  --brand-1: #C4CCFE; --brand-2: #678BFF; --brand-3: #9DB4FF;
  --grad: linear-gradient(120deg, var(--brand-1), var(--brand-2) 45%, var(--brand-3));
  --radius: 16px;
  --font: "Inter var", Inter, ui-sans-serif, -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

html { background: #0B0E1E; }
body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  /* No font-feature-settings here. These tags are per-font: the site used to set
     "cv11", "ss01", "ss03" for Inter, but it ships no webfont and Inter is not installed on most
     machines, so on macOS they landed on San Francisco instead -- where ss03 has exactly one
     substitution, colon -> colon.uc, the cap-height colon. That sits 235/2048 em higher than the
     normal one (y 221..1223 against -14..988), about 1.8px at 16px, which is why every colon on
     the site read as sitting too high. cv11 and ss01 were quietly swapping San Francisco's plus,
     six and nine as well. */
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
}
::selection { background: rgba(103, 139, 255, .45); color: #fff; }

/* the GPU backdrop, and what shows without it */
#backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; display: block; }
html.no-gpu body, html:not([data-fx]) body {
  background:
    radial-gradient(900px 520px at 72% -120px, rgba(103, 139, 255, .28), transparent 60%),
    radial-gradient(700px 480px at 8% 20%, rgba(196, 204, 254, .10), transparent 60%),
    #0B0E1E;
}
/* film grain */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }

/* ── header: a floating glass bar ─────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 12px; z-index: 20; margin: 12px auto 0; max-width: 1280px; width: calc(100% - 24px);
  border: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 999px;
  background: rgba(14, 17, 38, .55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  padding: .5rem .6rem .5rem 1rem;
}
.top::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--net), transparent); opacity: .7; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 750; letter-spacing: -.02em; }
.brand .logo-mark { filter: drop-shadow(0 0 10px rgba(103, 139, 255, .6)); }
.brand-name { font-size: 1.12rem; }
.nav a { color: #b7b5d9; font-weight: 550; padding: .35rem .7rem; border-radius: 999px; transition: background .2s, color .2s; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); text-decoration: none; }
.search input { background: rgba(255, 255, 255, .04); border: 1px solid var(--hair); }
.search input:focus { outline: none; border-color: var(--hair-hi); box-shadow: 0 0 0 4px rgba(103, 139, 255, .15); }

/* ── surfaces: glass, gradient hairline, cursor spotlight ────────────────────────────────── */
.card, .stat, .tabs, .how3, .pq-hero, .empty, .tile {
  position: relative; isolation: isolate;
  background: linear-gradient(var(--glass), var(--glass)) padding-box,
              linear-gradient(135deg, var(--hair-hi), rgba(103, 139, 255, .08) 38%, rgba(196, 204, 254, .22)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px -24px rgba(0, 0, 0, .6);
}
.glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(103, 139, 255, .16), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.glow:hover::before { opacity: 1; }
.stat { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.stat:hover { transform: translateY(-2px); box-shadow: 0 30px 60px -28px rgba(103, 139, 255, .45); }
.stat-value {
  background: linear-gradient(180deg, #fff, #DCE2FF); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat-accent .stat-value { background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.stat-label { color: #9d9bc6; font-weight: 600; }

/* ── display type ─────────────────────────────────────────────────────────────────────────── */
h1, h2, h3 { letter-spacing: -.025em; }
.display, .hero2 h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); line-height: 1.02; font-weight: 800; letter-spacing: -.045em; }
.shine {
  background: linear-gradient(100deg, var(--brand-1) 0%, var(--brand-2) 30%, var(--brand-3) 50%, var(--brand-2) 70%, var(--brand-1) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s ease-in-out infinite;
}
@keyframes shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.kicker { color: var(--brand-1); letter-spacing: .16em; }
.hero2 { margin-top: 2.2rem; }
.hero2 .lede { font-size: 1.15rem; line-height: 1.6; color: #c3c1e6; max-width: 640px; }

/* ── buttons ──────────────────────────────────────────────────────────────────────────────── */
button.primary {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .45rem;
  background: linear-gradient(135deg, #7C9BFF, #4568F3 55%, #678BFF); border: 0; color: #fff; font-weight: 650;
  box-shadow: 0 10px 30px -10px rgba(103, 139, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s, box-shadow .2s;
}
button.primary::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s;
}
button.primary:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -12px rgba(103, 139, 255, 1), inset 0 1px 0 rgba(255, 255, 255, .3); filter: none; }
button.primary:hover::after { transform: translateX(120%); }
.pill-link { background: rgba(103, 139, 255, .14); border-color: rgba(150, 170, 255, .4); display: inline-flex; align-items: center; gap: .35rem; transition: background .2s, transform .2s; }
.pill-link:hover { background: rgba(103, 139, 255, .28); transform: translateX(2px); }
.ico { vertical-align: -3px; }

.how-n { width: 2.6rem; height: 2.6rem; flex-basis: 2.6rem; border-radius: 12px; background: linear-gradient(135deg, rgba(103, 139, 255, .35), rgba(196, 204, 254, .18)); color: #E4E9F2; box-shadow: inset 0 0 0 1px var(--hair-hi), 0 8px 24px -8px rgba(103, 139, 255, .7); }
.how strong { font-size: 1.02rem; }

/* ── heroes on detail pages ───────────────────────────────────────────────────────────────── */
.pq-hero { background: linear-gradient(160deg, rgba(44, 62, 140, .38), rgba(18, 22, 46, .66) 42%) padding-box,
  linear-gradient(135deg, rgba(170, 188, 255, .5), rgba(196, 204, 254, .12) 45%, rgba(103, 139, 255, .35)) border-box; }
.pq-hero-bad { background: linear-gradient(160deg, rgba(160, 40, 70, .35), rgba(18, 22, 46, .66) 42%) padding-box, linear-gradient(135deg, rgba(255, 120, 140, .6), rgba(255, 92, 108, .1)) border-box; }
.pq-hero h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.035em; }
.pq-hero-icon { filter: drop-shadow(0 0 22px rgba(103, 139, 255, .65)); }
.pq-hero-icon.bad { filter: drop-shadow(0 0 22px rgba(255, 92, 108, .6)) hue-rotate(120deg); }
.ico-lock .shackle { transform-origin: 33px 21px; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.ico-lock.is-open .shackle { animation: unlock 1.3s cubic-bezier(.3, 1.5, .5, 1) .35s both; }
@keyframes unlock { from { transform: none; } to { transform: translateY(-5px) rotate(-28deg); } }
h3.sect { color: #a9a6d6; letter-spacing: .14em; }

/* ── timeline ─────────────────────────────────────────────────────────────────────────────── */
.step-dot { width: 2.2rem; height: 2.2rem; box-shadow: 0 0 0 5px rgba(11, 14, 30, .6); }
.step-ok .step-dot { background: radial-gradient(circle at 35% 30%, rgba(126, 240, 192, .45), rgba(59, 204, 138, .15)); box-shadow: 0 0 0 5px rgba(11, 14, 30, .6), 0 0 22px rgba(59, 204, 138, .55); }
.step-warn .step-dot { box-shadow: 0 0 0 5px rgba(11, 14, 30, .6), 0 0 22px rgba(245, 176, 65, .55); }
.step-bad .step-dot { box-shadow: 0 0 0 5px rgba(11, 14, 30, .6), 0 0 22px rgba(255, 92, 108, .6); }
.step-line { top: 1.1rem; height: 2px; background: rgba(150, 170, 255, .15); overflow: hidden; }
.step-ok .step-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(126, 240, 192, .95), transparent); transform: translateX(-100%); animation: travel 2.4s ease-in-out infinite; }
@keyframes travel { to { transform: translateX(100%); } }

/* ── tabs ─────────────────────────────────────────────────────────────────────────────────── */
.tab-bar { gap: .3rem; padding: .5rem; border-bottom: 1px solid var(--hair); }
.tab { border: 0; border-radius: 10px; padding: .5rem .9rem; transition: background .2s, color .2s; }
.tab:hover { background: rgba(255, 255, 255, .05); }
.tab.active { color: #fff; background: linear-gradient(135deg, rgba(103, 139, 255, .35), rgba(196, 204, 254, .15)); box-shadow: inset 0 0 0 1px var(--hair-hi), 0 6px 18px -8px rgba(103, 139, 255, .8); }
.tab-count { background: rgba(255, 255, 255, .08); }

/* ── badges and verdicts ──────────────────────────────────────────────────────────────────── */
/* The two schemes get the same treatment and differ only in hue: this explorer reports on both,
   and PQB used to carry a gradient, a heavier border, bolder text and a brighter glow, which
   read as an endorsement rather than a label. */
.b-pq, .b-qsb {
  font-weight: 650; color: #F1F4FF;
  background: linear-gradient(135deg, rgba(130, 160, 255, .3), rgba(196, 204, 254, .14));
  border-color: rgba(183, 199, 255, .45);
  box-shadow: 0 0 16px -6px rgba(150, 175, 255, .6);
}
.verdicts li { background: rgba(14, 17, 38, .55); border: 1px solid rgba(255, 255, 255, .04); }

/* ── block cubes: 3D ──────────────────────────────────────────────────────────────────────── */
.blocks { perspective: 900px; padding: 1rem .2rem 1.4rem; }
.cube {
  transform: rotateX(10deg) rotateY(-16deg); transform-style: preserve-3d;
  background: linear-gradient(155deg, #5F7FF5 0%, #3A4FB8 45%, #212647 100%);
  box-shadow: 10px 12px 0 -2px rgba(24, 30, 72, .85), 0 22px 40px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  border: 1px solid rgba(180, 196, 255, .35); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.cube:hover { transform: rotateX(0) rotateY(0) translateY(-4px); box-shadow: 0 22px 44px -10px rgba(103, 139, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .3); filter: none; }
.cube .c-h { color: #fff; font-size: 1.15rem; letter-spacing: -.02em; }
.cube-hit { background: linear-gradient(155deg, #9DB4FF, #4568F3 60%, #3350C8); box-shadow: 10px 12px 0 -2px rgba(20, 60, 120, .85), 0 0 36px rgba(196, 204, 254, .55); }
.cube-none { background: linear-gradient(155deg, #2C365F, #212647); }

/* ── tables ───────────────────────────────────────────────────────────────────────────────── */
.tbl th { color: #9896c4; }
.tbl td { border-bottom-color: rgba(150, 170, 255, .08); }
.tbl tbody tr { transition: background .2s; }
.tbl tbody tr:hover td { background: rgba(103, 139, 255, .06); }
.idchip { background: rgba(255, 255, 255, .05); border-color: var(--hair); }

/* ── flowchart: flowing edges ─────────────────────────────────────────────────────────────── */
@keyframes flow { to { stroke-dashoffset: -11; } }
.decomp { background: rgba(11, 14, 30, .6); border: 1px solid var(--hair); }

/* ── motion ───────────────────────────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px) scale(.995); transition: opacity .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), transform .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── footer ───────────────────────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--hair); color: #8e8cb8; }

/* ── scrollbar ────────────────────────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(103, 139, 255, .45) transparent; }

/* ── polish pass ───────────────────────────────────────────────────────────────────────────── */

/* header */
.top { gap: 1rem; padding: .45rem .55rem .45rem 1.1rem; }
.nav { gap: .15rem; }
.nav a { position: relative; font-size: .93rem; }
.nav a.active { color: #fff; background: rgba(103, 139, 255, .16); }
.nav a.active::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 2px; height: 2px; border-radius: 2px; background: #678BFF; }
.search { position: relative; display: flex; align-items: center; }
.search-ico { position: absolute; left: .85rem; color: #8e97c8; display: flex; pointer-events: none; }
.search input { padding-left: 2.45rem; padding-right: 2.2rem; height: 2.4rem; font-family: var(--font); font-size: .9rem; }
.search-kbd { position: absolute; right: .7rem; font: 600 .72rem var(--mono); color: #8e97c8; border: 1px solid var(--hair); border-radius: 5px; padding: 0 .35rem; pointer-events: none; }
.search input:focus + .search-kbd { display: none; }
/* The network menu: a list of real links, so it can be styled and cmd-clicked. */
.netsel { position: relative; display: block; }
.netsel-btn { display: flex; align-items: center; gap: .45rem; padding: 0 .5rem 0 .8rem; height: 2.4rem; border: 1px solid var(--hair); border-radius: 999px; background: rgba(255, 255, 255, .04); color: inherit; font: inherit; font-weight: 600; cursor: pointer; transition: background .18s, border-color .18s; }
.netsel-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(150, 170, 255, .34); }
.netsel-btn svg { opacity: .65; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.netsel.open .netsel-btn { background: rgba(255, 255, 255, .09); border-color: rgba(150, 170, 255, .5); }
.netsel.open .netsel-btn svg { transform: rotate(180deg); opacity: 1; }
.netsel-menu { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 60; min-width: 11.5rem; padding: .35rem; display: grid; gap: 2px; border-radius: 14px; background: linear-gradient(160deg, rgba(40, 50, 100, .97), rgba(24, 29, 60, .98)); border: 1px solid rgba(157, 180, 255, .3); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); }
.netsel-opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .48rem .6rem; border-radius: 10px; color: #CBD3EE; text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.netsel-opt:hover, .netsel-opt:focus-visible { background: rgba(255, 255, 255, .09); color: #fff; }
.netsel-opt.on { color: #fff; }
.netsel-odot { width: 8px; height: 8px; border-radius: 50%; background: var(--nd); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd) 25%, transparent); }
.netsel-tick { display: inline-flex; align-items: center; justify-content: flex-end; width: 16px; color: var(--nd); }
.netsel-tick svg { width: 15px; height: 15px; }
.net-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--net); box-shadow: 0 0 0 3px color-mix(in srgb, var(--net) 25%, transparent); }
.top::after { background: linear-gradient(90deg, transparent, rgba(103, 139, 255, .6), transparent); }
.foot button.link { font-size: inherit; }

/* 1. latest blocks: flat, readable, never overlapping */
.blocks { perspective: none; padding: .6rem .2rem 1rem; gap: .9rem; }
.cube {
  transform: none; flex: 0 0 144px; border-radius: 14px;
  background: linear-gradient(160deg, #3b4fae 0%, #2a3680 55%, #1d2459 100%);
  box-shadow: 6px 6px 0 -1px rgba(20, 26, 64, .95), inset 0 1px 0 rgba(255, 255, 255, .18);
  border: 1px solid rgba(157, 180, 255, .28);
}
.cube:hover { transform: translateY(-3px); box-shadow: 6px 9px 0 -1px rgba(20, 26, 64, .95), inset 0 1px 0 rgba(255, 255, 255, .22); background: linear-gradient(160deg, #4760c4 0%, #2f3c8e 55%, #1f2760 100%); }
.cube .c-h { font-size: 1.1rem; }
.cube-hit { background: linear-gradient(160deg, #678BFF, #4568F3 60%, #2f47b8); box-shadow: 6px 6px 0 -1px rgba(20, 30, 80, .95), 0 0 0 1px rgba(196, 204, 254, .7); }

/* 2. timeline: markers fully visible, clean rings */
.steps { padding: 8px 4px 4px; }
.step-dot { width: 2.1rem; height: 2.1rem; border-width: 2px; box-shadow: none; font-size: .95rem; }
.step-ok .step-dot { background: rgba(59, 204, 138, .14); box-shadow: 0 0 14px rgba(59, 204, 138, .28); }
.step-warn .step-dot { background: rgba(245, 176, 65, .14); box-shadow: 0 0 14px rgba(245, 176, 65, .28); }
.step-bad .step-dot { background: rgba(255, 92, 108, .16); box-shadow: 0 0 14px rgba(255, 92, 108, .3); }
.step-idle .step-dot { box-shadow: none; }
.step-line { top: calc(8px + 1.05rem); left: 2.35rem; }

/* 3–4. health: modern rows and a real toggle */
.health .verdicts { gap: .6rem; }
.verdicts li {
  display: grid; grid-template-columns: 2rem 1fr; align-items: start; gap: .8rem;
  padding: .85rem 1rem; border-radius: 12px; border: 1px solid rgba(150, 170, 255, .1);
  background: linear-gradient(135deg, rgba(34, 42, 86, .7), rgba(22, 26, 52, .7));
}
.verdicts li .v-icon { width: 2rem; height: 2rem; border-radius: 9px; display: grid; place-items: center; font-size: .85rem; }
.v-critical .v-icon { background: rgba(255, 92, 108, .16); } .v-warn .v-icon { background: rgba(245, 176, 65, .16); }
.v-ok .v-icon { background: rgba(59, 204, 138, .14); } .v-info .v-icon { background: rgba(103, 139, 255, .16); color: #9DB4FF; }
.v-critical { background: linear-gradient(135deg, rgba(120, 36, 64, .45), rgba(28, 24, 52, .7)) !important; border-color: rgba(255, 92, 108, .35) !important; }
.v-warn { border-color: rgba(245, 176, 65, .3) !important; }
.v-title { font-weight: 650; color: #F1F4FF; }
.v-detail { color: #aeb5d8; line-height: 1.5; margin-top: .15rem; }
.verdicts li .v-code { justify-self: end; font: 600 .7rem var(--mono); color: #9DB4FF; background: rgba(103, 139, 255, .12); border: 1px solid rgba(103, 139, 255, .25); border-radius: 6px; padding: .1rem .4rem; }
.health-bar { gap: .45rem; }
.hb { border-radius: 8px; padding: .25rem .7rem; font-size: .8rem; background: rgba(255, 255, 255, .04); }
.health-more > summary, details.more > summary {
  list-style: none; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none;
  margin-top: .7rem; padding: .45rem .85rem; border-radius: 10px; font-size: .88rem; font-weight: 600; color: #DCE2FF;
  background: rgba(103, 139, 255, .1); border: 1px solid rgba(103, 139, 255, .25); transition: background .2s, border-color .2s;
}
.health-more > summary::-webkit-details-marker, details.more > summary::-webkit-details-marker { display: none; }
.health-more > summary::before, details.more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; margin-right: .1rem; }
.health-more[open] > summary::before, details.more[open] > summary::before { transform: rotate(45deg); }
.health-more > summary:hover, details.more > summary:hover { background: rgba(103, 139, 255, .18); border-color: rgba(103, 139, 255, .45); }
.health-more[open] > .verdicts { margin-top: .7rem; }

/* 6. more fields: a tidy grid of cells */
details.more .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem; margin-top: .8rem; }
details.more .kv dt { display: none; }
details.more .kv dd { margin: 0; padding: .7rem .9rem; border-radius: 12px; background: rgba(14, 17, 38, .55); border: 1px solid rgba(150, 170, 255, .1); }
details.more .kv dd::before { content: attr(data-k); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9DA4CE; font-weight: 600; margin-bottom: .2rem; }

/* 5. flowchart: the new look */

/* 7. tooltips */
.term { border-bottom: 1px dashed rgba(157, 180, 255, .6); cursor: help; }
.tip {
  position: absolute; z-index: 50; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
  padding: .7rem .9rem; border-radius: 12px; font-size: .84rem; line-height: 1.5; color: #E4E9F2;
  white-space: pre-line; overflow-wrap: anywhere;
  background: linear-gradient(160deg, rgba(40, 50, 100, .96), rgba(24, 29, 60, .97)); border: 1px solid rgba(157, 180, 255, .3);
 box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
}
.tip.on { opacity: 1; transform: none; }
.blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); overflow: visible; }
.cube { flex: none; min-width: 0; }

/* callout (a known deployment, a note) */
.callout { margin: 1rem 0 .4rem; padding: .9rem 1.1rem; border-radius: 12px; background: rgba(103, 139, 255, .1); border: 1px solid rgba(103, 139, 255, .3); color: #dce2ff; line-height: 1.55; }
.callout-title { font-weight: 700; color: #fff; margin-bottom: .2rem; }

/* what the lock checks */
.reqs { display: grid; gap: 1rem; }
.req-stage { padding: 1rem 1.1rem; border-radius: 14px; background: rgba(14, 17, 38, .5); border: 1px solid rgba(150, 170, 255, .12); }
.req-head { display: block; margin-bottom: .7rem; }
.req-head strong { font-size: 1rem; }
.req-n { font: 700 .8rem var(--mono); color: #678BFF; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.req-list li { position: relative; padding: .6rem .8rem .6rem 1.6rem; border-radius: 10px; background: rgba(34, 42, 86, .45); }
.req-list li::before { content: ""; position: absolute; left: .7rem; top: 1rem; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #678BFF; }
.req-list li.req-data { background: rgba(22, 27, 58, .5); }
.req-list li.req-data::before { border-bottom-color: #5a6390; }
.req-title { font-weight: 650; color: #F1F4FF; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.req-body { color: #c6cbe8; margin: .15rem 0 .2rem; line-height: 1.5; }

/* raw script: all of it */
.raw-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.copybtn-lg { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 8px; background: rgba(103, 139, 255, .12); border: 1px solid rgba(103, 139, 255, .3); color: #dce2ff; font-size: .85rem; }
.rawhex { margin: 0; padding: 1rem; border-radius: 12px; background: rgba(11, 14, 30, .6); border: 1px solid rgba(150, 170, 255, .12); white-space: pre-wrap; word-break: break-all; font-size: .78rem; line-height: 1.6; color: #c6cbe8; max-height: 520px; overflow: auto; }
.lock-hero .stats { margin-top: 1.2rem; }

/* transaction flow */
.txflow-wrap { margin: .4rem 0 1.2rem; padding: 1rem 1.2rem; border-radius: 16px; background: radial-gradient(600px 200px at 50% 50%, rgba(103, 139, 255, .08), transparent 70%), rgba(11, 14, 30, .45); border: 1px solid rgba(150, 170, 255, .1); }
.txflow { width: 100%; height: auto; display: block; overflow: visible; }
.txflow .tf-band { transition: opacity .25s; }
.txflow:has(.tf-item:hover) .tf-item:not(:hover) .tf-band { opacity: .35; }
.txflow a { cursor: pointer; }
.txflow .tf-label { fill: #F1F4FF; font: 600 13px var(--font); }
.txflow .tf-label.tf-label-sm { font-size: 11.5px; }
.txflow .tf-sub { fill: #9DB4FF; font: 600 11px var(--font); }
.txflow .tf-value { fill: #9DA4CE; font: 500 11.5px var(--mono); }
/* the neighbouring transaction, one hop out: the same band continuing, dimmer, with the txid
   in its tooltip. No text, like mempool.space's connectors. */
.txflow .tf-connband { opacity: .34; transition: opacity .25s; }
.txflow a:hover .tf-connband { opacity: .95; }
.txflow .tf-conn { cursor: pointer; }

/* how it works */
.learn-hero { margin: 2.4rem 0 2rem; max-width: 900px; }
.learn-hero .lede { font-size: 1.15rem; line-height: 1.65; color: #c6cbe8; max-width: 760px; }
.chapter { display: grid; grid-template-columns: 1fr 1.05fr; gap: 2.4rem; align-items: center; margin: 0 0 1.4rem; padding: 1.8rem 2rem; border-radius: 20px;
  background: linear-gradient(var(--glass), var(--glass)) padding-box, linear-gradient(135deg, var(--hair-hi), rgba(103, 139, 255, .06) 45%, rgba(196, 204, 254, .18)) border-box;
  border: 1px solid transparent; }
.chapter:nth-of-type(even) .ch-art { order: -1; }
@media (max-width: 900px) { .chapter { grid-template-columns: 1fr; } .chapter:nth-of-type(even) .ch-art { order: 0; } }
.ch-n { font: 700 .85rem var(--mono); color: #678BFF; letter-spacing: .1em; margin-bottom: .3rem; }
.chapter h2 { font-size: 1.7rem; margin: 0 0 .3rem; letter-spacing: -.03em; }
.ch-lead { font-size: 1.05rem; color: #C4CCFE; margin: 0 0 .8rem; font-weight: 600; }
.ch-text p { color: #c6cbe8; line-height: 1.65; }
.ch-art { padding: 1rem; border-radius: 16px; background: rgba(11, 14, 30, .55); border: 1px solid rgba(150, 170, 255, .1); }
.ill { width: 100%; height: auto; display: block; }
.ill .ill-box { fill: rgba(44, 54, 95, .8); stroke: rgba(150, 170, 255, .3); }
.ill .ill-box-accent { fill: rgba(103, 139, 255, .22); stroke: #678BFF; }
.ill .ill-box-ok { fill: rgba(59, 204, 138, .12); stroke: rgba(59, 204, 138, .6); }
.ill .ill-box-bad { fill: rgba(255, 92, 108, .12); stroke: rgba(255, 92, 108, .6); }
.ill .ill-t { fill: #F1F4FF; font-weight: 650; }
.ill .ill-s { fill: #9DA4CE; }
.ill .ill-ok { fill: #6fe0ae; font-weight: 600; } .ill .ill-bad { fill: #ff8f9c; font-weight: 600; }
.ill .ill-arrow, .ill .ill-arrow-ok, .ill .ill-arrow-bad { fill: none; stroke-width: 2; stroke-dasharray: 5 5; animation: flow 2.4s linear infinite; }
.ill .ill-arrow { stroke: rgba(157, 180, 255, .7); } .ill .ill-arrow-ok { stroke: rgba(59, 204, 138, .7); } .ill .ill-arrow-bad { stroke: rgba(255, 92, 108, .7); }
.ill .ill-cell { fill: rgba(44, 54, 95, .7); stroke: rgba(150, 170, 255, .18); }
.ill .ill-cell-lit { fill: #678BFF; stroke: #C4CCFE; animation: cellpulse 3.2s ease-in-out infinite; }
@keyframes cellpulse { 50% { fill: #8FA8FF; } }
.ill .ill-byte { fill: rgba(44, 54, 95, .7); stroke: rgba(150, 170, 255, .2); }
.ill .ill-byte-lit { fill: rgba(103, 139, 255, .35); stroke: #678BFF; }
.ill .ill-mono { fill: #dce2ff; }
.chapter-two { grid-template-columns: 1fr; }
.two-designs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .two-designs { grid-template-columns: 1fr; } }
.design { padding: 1.1rem 1.2rem; border-radius: 14px; background: rgba(11, 14, 30, .5); border: 1px solid rgba(150, 170, 255, .12); }
.design h3 { margin: .5rem 0 .3rem; font-size: 1.1rem; }
.design p { color: #c6cbe8; line-height: 1.6; margin: 0; }
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .7rem; }
.gl-item { padding: .8rem 1rem; border-radius: 12px; background: rgba(11, 14, 30, .45); border: 1px solid rgba(150, 170, 255, .1); }
.gl-term { font-weight: 700; color: #F1F4FF; text-transform: capitalize; margin-bottom: .2rem; }
.gl-def { color: #aeb5d8; font-size: .9rem; line-height: 1.55; }
.foot { display: none; }
.details-grid .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem; }
.details-grid .kv dt { display: none; }
.details-grid .kv dd { margin: 0; padding: .7rem .9rem; border-radius: 12px; background: rgba(14, 17, 38, .55); border: 1px solid rgba(150, 170, 255, .1); word-break: break-word; }
.details-grid .kv dd::before { content: attr(data-k); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9DA4CE; font-weight: 600; margin-bottom: .2rem; }
.tx-summary { padding: .6rem; }
.tx-summary .stats { margin: 0; }
.tx-summary .stat { background: rgba(14, 17, 38, .45); }

/* pills: one style for "see how it was unlocked" and "locked", optically centered */
.pill-link { display: inline-flex; align-items: center; gap: .4rem; line-height: 1; padding: .5rem .85rem .46rem; border-radius: 10px; font-weight: 600; font-size: .86rem; }
.pill-link .ico, .pill-link svg { display: block; flex: none; }
.pill-locked { background: rgba(196, 204, 254, .08); border-color: rgba(196, 204, 254, .3); color: #E4E9F2; }
.pill-locked:hover { background: rgba(196, 204, 254, .16); }

/* 4. hero backgrounds: gradients of fixed length, so a long tab never changes their tone */
.pq-hero { background: linear-gradient(160deg, rgba(44, 62, 140, .46), rgba(24, 30, 64, .72) 760px) padding-box,
  linear-gradient(135deg, rgba(170, 188, 255, .5), rgba(196, 204, 254, .12) 520px, rgba(103, 139, 255, .3)) border-box; }
.pq-hero-bad { background: linear-gradient(160deg, rgba(160, 40, 70, .38), rgba(24, 30, 64, .72) 760px) padding-box, linear-gradient(135deg, rgba(255, 120, 140, .6), rgba(255, 92, 108, .1) 520px) border-box; }
.card, .tabs, .how3, .chapter { background-size: 100% 100%; }

/* 5. motion when things change */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.tab-panel:not([hidden]) { animation: fadeUp .28s cubic-bezier(.2, .8, .2, 1); }
details[open] > :not(summary) { animation: fadeUp .25s cubic-bezier(.2, .8, .2, 1); }
.tr-op, .stack { animation: fadeIn .18s ease-out; }
.tab { transition: background .25s, color .25s, box-shadow .25s; }
#page > * { animation: fadeIn .3s ease-out; }
.stat-value, .hb, .badge { transition: color .3s, background .3s; }
.tip { transition: opacity .15s, transform .18s cubic-bezier(.2, .8, .2, 1); }
.secbar .seg { transition: filter .2s, transform .2s; }
.secbar .seg:hover, .secbar .seg:focus { filter: brightness(1.25); outline: none; }

/* 6. script breakdown */
.secbar { height: 38px; border-radius: 10px; gap: 2px; background: rgba(11, 14, 30, .5); padding: 2px; }
.secbar .seg { border-radius: 7px; border-right: 0; cursor: help; }
.secbar .seg span { font-size: .74rem; font-weight: 600; }
.seg0 { background: linear-gradient(135deg, #5F7FF5, #3A4FB8); } .seg1 { background: linear-gradient(135deg, #3f5aa8, #2C365F); }
.seg2 { background: linear-gradient(135deg, #7C9BFF, #4568F3); } .seg3 { background: linear-gradient(135deg, #4a5d9e, #313d70); }
.seg4 { background: linear-gradient(135deg, #8FA8FF, #5F7FF5); } .seg5 { background: linear-gradient(135deg, #3a4a86, #262f5c); }
.seclegend { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin: .7rem 0 .2rem; }
.leg { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: #dce2ff; cursor: help; padding: .15rem .3rem; border-radius: 6px; }
.leg:hover, .leg:focus { background: rgba(103, 139, 255, .12); outline: none; }
.leg-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.secnotes { display: none; }
@media (prefers-reduced-motion: reduce) { .tab-panel:not([hidden]), details[open] > :not(summary), .tr-op, .stack, #page > * { animation: none; } }

/* look it up */
.lookup { display: grid; gap: .5rem; margin-bottom: 1rem; }
.lk-row { display: grid; grid-template-columns: 170px 1fr; gap: .1rem 1rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(14, 17, 38, .55); border: 1px solid rgba(150, 170, 255, .1); }
.lk-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9DA4CE; font-weight: 600; align-self: center; }
.lk-v { word-break: break-all; color: #F1F4FF; font-size: .84rem; }
.lk-n { grid-column: 2; color: #9DA4CE; font-size: .8rem; }
@media (max-width: 700px) { .lk-row { grid-template-columns: 1fr; } .lk-n { grid-column: 1; } }
.amt { white-space: nowrap; }
.amt-unit { color: #9DA4CE; font-size: .85em; }
.usd { color: #9DB4FF; font-size: .85em; margin-left: .15rem; font-variant-numeric: tabular-nums; }
.hero-usd { color: #C4CCFE; font-size: 1rem; margin: -.1rem 0 .4rem; font-weight: 600; }
.hero-usd-inline { color: #C4CCFE; font-size: .6em; font-weight: 600; margin-left: .3rem; }

/* intro lines above a panel's content keep their distance from it */
.panel-lede, .tab-panel > p.small:first-child, .card > p.muted.small:first-child { margin: 0 0 1.1rem; }

/* "What unlocking requires": a centred row of step cards, each clearly its own */
h3.sect-center { text-align: center; }
.steps { justify-content: center; gap: .9rem; padding: 4px; overflow: visible; }
.step { align-items: center; text-align: center; padding: 1rem .9rem .9rem; max-width: 230px; min-width: 0; flex: 1 1 0;
  border-radius: 12px; background: rgba(44, 54, 95, .45); border: 1px solid rgba(150, 170, 255, .12); }
.step-body { margin-top: .6rem; }
.step-title { font-size: .95rem; }
.step-sub { margin-top: .25rem; line-height: 1.4; font-size: .8rem; }
.step-line { display: none; }

.step-title a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(196, 204, 254, .5); }
.step-title a:hover { color: #C4CCFE; border-bottom-color: #C4CCFE; }

/* How it works illustrations */
.ill .ill-arrow, .ill .ill-arrow-ok, .ill .ill-arrow-bad { animation-name: ill-flow; }
@keyframes ill-flow { to { stroke-dashoffset: -20; } }   /* two dash periods of 5+5: seamless */
.ill .ill-r0 { fill: #678BFF; stroke: #C4CCFE; } .ill .ill-r1 { fill: #C4CCFE; stroke: #fff; }
.ill .ill-b-hdr { fill: rgba(59, 204, 138, .22); stroke: rgba(59, 204, 138, .8); }
.ill .ill-b-shdr { fill: rgba(245, 176, 65, .22); stroke: rgba(245, 176, 65, .85); animation: ill-glow 2.4s ease-in-out infinite; }
.ill .ill-b-r, .ill .ill-b-s { fill: rgba(44, 54, 95, .7); stroke: rgba(150, 170, 255, .22); }
.ill .ill-b-ht { fill: rgba(44, 54, 95, .45); stroke: rgba(150, 170, 255, .15); stroke-dasharray: 3 2; }
.ill .ill-brace { fill: none; stroke-width: 1.2; stroke: rgba(157, 164, 206, .6); }
.ill .ill-brace.ill-ok { stroke: rgba(59, 204, 138, .8); } .ill .ill-brace.ill-warn { stroke: rgba(245, 176, 65, .85); }
.ill .ill-warn { fill: #f5b041; font-weight: 600; }
@keyframes ill-glow { 50% { fill: rgba(245, 176, 65, .45); } }
@media (prefers-reduced-motion: reduce) { .ill .ill-b-shdr, .ill .ill-arrow, .ill .ill-arrow-ok, .ill .ill-arrow-bad { animation: none; } }

/* What it checks: a purpose line per stage, and the instructions behind each check */
.req-purpose { margin: .25rem 0 0; font-size: .86rem; line-height: 1.45; color: #b9c0e3; max-width: 90ch; }
.req-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: .35rem; font-size: .76rem; }
.req-code > span:first-child { text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; font-weight: 700; color: #7d84b0; }
.req-code code { color: #C4CCFE; }
.req-body { line-height: 1.5; }

/* footer: the niche tools, small, and who made it */
.foot { max-width: 1240px; margin: 3rem auto 1.5rem; padding: 1.2rem 1rem 0; border-top: 1px solid rgba(150, 170, 255, .1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; font-size: .82rem; color: #8d94c0; }
.foot-tools { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.foot a { color: #b9c0e3; text-decoration: none; }
.foot a:hover { color: #fff; }
.foot-by a { color: #C4CCFE; font-weight: 600; }

.hero-tx { display: block; margin-top: .15rem; }
.hero-tx a { color: #C4CCFE; }

/* inputs & outputs: a panel per side, so each is plainly one transaction's coins */
.io-col { background: rgba(22, 27, 58, .5); border: 1px solid rgba(150, 170, 255, .1); border-radius: 12px; padding: .65rem .8rem .4rem; }
.io-kicker { color: #C4CCFE; }
.io-n, .io-src { color: #8d94c0; }
.io-src a { color: #9DB4FF; }
.io-arrow { background: rgba(44, 54, 95, .65); border: 1px solid rgba(150, 170, 255, .18); color: #C4CCFE; }

/* narrow screens: wide tables scroll inside their card, long ids wrap, nothing pushes the page wider */
.card, .pq-hero { overflow: hidden; }
main, section, .card { min-width: 0; }
.stat-sub, .io, .hero-tx { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl td, .tbl th { white-space: nowrap; }
  .tbl td.what, .tbl td.what * { white-space: normal; min-width: 240px; }
  .txids { padding-left: 1.6rem; }
  .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .io { grid-template-columns: 1fr !important; }
  .io > * { min-width: 0; }
  .io-col { overflow-x: auto; }
  .stat-sub, .stat-sub .amt { white-space: normal; }
  .idline, .idline * { overflow-wrap: anywhere; word-break: break-all; }
}

[hidden] { display: none !important; }

/* step cards with an arrow between each pair, centred in the gap */
.steps { align-items: stretch; gap: .5rem; }
.step-arrow { list-style: none; flex: none; align-self: center; color: #7d84b0; font-size: 1rem; line-height: 1; }
@media (max-width: 760px) {
  .steps { flex-direction: column; align-items: stretch; gap: .35rem; }
  .step { max-width: none; flex-direction: row; text-align: left; align-items: center; gap: .8rem; padding: .7rem .8rem; }
  .step-body { margin-top: 0; }
  .step-arrow { align-self: center; transform: rotate(90deg); }
}

/* ── Phones ─────────────────────────────────────────────────────────────────────────────────── */
.tfm, .iom { display: none; }
@media (max-width: 760px) {
  /* header: one compact row (logo, How it works, network), search below; scrolls away with the page */
  .top { position: relative; top: 0; margin: 8px auto 0; width: calc(100% - 16px); border-radius: 18px; padding: .5rem .6rem;
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav net" "search search search"; gap: .5rem .4rem; align-items: center; }
  .top::after { left: 16px; right: 16px; }
  .brand { grid-area: brand; } .brand-name { font-size: 1rem; }
  .nav { grid-area: nav; justify-self: end; } .nav a { font-size: .85rem; padding: .3rem .55rem; }
  .netsel { grid-area: net; }
  .netsel-btn { height: 2.1rem; padding: 0 .35rem 0 .6rem; }
  .netsel-btn { font-size: .85rem; }
  .netsel-name { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
  .search { grid-area: search; min-width: 0; }
  .search-kbd { display: none; }
  .search input { height: 2.3rem; font-size: 16px; }             /* 16px: iOS doesn't zoom on focus */
  main, #page { padding-left: 12px; padding-right: 12px; }
  .card { padding: 1rem .9rem; border-radius: 16px; }
  h1 { font-size: 1.6rem; overflow-wrap: anywhere; }
  .display { font-size: 2.3rem !important; }

  /* 1fr floors at min-content, so a long figure pushed the second column off screen */
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: .5rem; }
  .stat { padding: .7rem .75rem; } .stat-value { font-size: 1.15rem; }

  /* flow: stacked rows instead of the wide diagram */
  .txflow-c { padding: .6rem .5rem; }
  .tfm-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #8d94c0; font-weight: 700; margin-top: .2rem; }
  .tfm-row { display: grid; gap: .3rem; padding: .55rem .65rem; border-radius: 10px; background: rgba(22, 27, 58, .6); color: inherit; text-decoration: none; }
  .tfm-top { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
  .tfm-label { font-family: var(--mono); font-size: .8rem; color: #dce2f7; min-width: 0; overflow-wrap: anywhere; }
  .tfm-sub { font-family: var(--font); font-size: .72rem; color: #9DB4FF; }
  .tfm-amt { font-family: var(--mono); font-size: .8rem; color: #E4E9F2; white-space: nowrap; text-align: right; }
  .tfm-amt .usd { display: block; font-size: .72rem; color: #9DA4CE; }
  .tfm-bar { display: block; height: 4px; border-radius: 3px; background: #AEB8E6; opacity: .55; }
  .tfm-bar.tfm-pq { background: #678BFF; opacity: 1; } .tfm-bar.tfm-fee { background: #f5b041; opacity: .9; }
  .tfm-mid { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; font-size: .75rem; color: #C4CCFE; }
  .tfm-mid i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(157, 180, 255, .5), transparent); }

  /* inputs & outputs: address on one line, amount under it */
  .io .tbl, .io .tbl tbody { display: block; }
  .io .tbl tr { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0 .3rem; padding: .45rem 0; border-bottom: 1px solid rgba(150, 170, 255, .08); }
  .io .tbl td { white-space: normal; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .io .tbl td.num:last-child { grid-column: 2; text-align: left; }
  .io-arrow { margin: .2rem auto; }

  /* hero cards (lock / spend): icon above the text, full width */
  .pq-hero { padding: 1rem .9rem; }
  .pq-hero-head { flex-direction: column; gap: .5rem; }
  .pq-hero-icon svg { width: 36px; height: 36px; }
  .pq-hero h2 { font-size: 1.45rem; }
  .pq-hero-kicker { overflow-wrap: anywhere; }
}
@media (max-width: 760px) { .nav a { white-space: nowrap; } }
@media (max-width: 760px) {
  /* stages: one stacked card per check instead of a wide table */
  .tbl.stages { display: block; overflow: visible; }
  .tbl.stages thead { display: none; }
  .tbl.stages tbody { display: grid; gap: .6rem; }
  .tbl.stages tr { display: grid; grid-template-columns: 1fr auto; gap: .35rem .6rem; padding: .7rem .75rem; border-radius: 12px; background: rgba(22, 27, 58, .55); }
  .tbl.stages td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .tbl.stages td.what, .tbl.stages td.what * { min-width: 0; white-space: normal; }
  .tbl.stages td:nth-child(1) { grid-column: 1; }
  .tbl.stages td:nth-child(6) { grid-column: 2; grid-row: 1; justify-self: end; }
  .tbl.stages td:nth-child(n+2):nth-child(-n+5) { grid-column: 1 / -1; }
  .tbl.stages td.num { text-align: left; }
  /* the tab bar scrolls sideways: fade its right edge so that's visible */
  .tab-bar { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: none; }
}
@media (max-width: 760px) { .chapter { padding: 1.1rem .9rem; gap: 1rem; border-radius: 16px; } .learn-hero { padding-left: 4px; padding-right: 4px; } }
@media (max-width: 760px) {
  .tbl.stages td:nth-child(4)::before { content: "Transaction digest"; }
  .tbl.stages td:nth-child(5)::before { content: "FindAndDelete"; }
  .tbl.stages td:nth-child(4)::before, .tbl.stages td:nth-child(5)::before { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7d84b0; margin-bottom: .1rem; }

  /* compare: each row a small card, both schemes labelled */
  .tbl.compare { display: block; overflow: visible; }
  .tbl.compare thead { display: none; }
  .tbl.compare tbody { display: grid; gap: .5rem; }
  .tbl.compare tr { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .6rem; padding: .65rem .7rem; border-radius: 12px; background: rgba(22, 27, 58, .55); }
  .tbl.compare th, .tbl.compare td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .tbl.compare th { grid-column: 1 / -1; font-size: .8rem; color: #9DB4FF; }
  .tbl.compare td { padding: .4rem .5rem; border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: .88rem; }
  .tbl.compare td.win { background: rgba(59, 204, 138, .1); box-shadow: inset 2px 0 0 #3bcc8a; }
  .tbl.compare td:nth-of-type(1)::before { content: "PQB"; } .tbl.compare td:nth-of-type(2)::before { content: "QSB"; }
  .tbl.compare td::before { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: #7d84b0; margin-bottom: .15rem; }
  form.inline { flex-direction: column; align-items: stretch; }
  form.inline input { font-size: 16px; }
}
@media (max-width: 760px) {
  .pq-card .tbl { display: block; overflow: visible; }
  .pq-card .tbl thead { display: none; }
  .pq-card .tbl tr { display: grid; gap: .25rem; padding: .6rem 0; border-bottom: 1px solid rgba(150, 170, 255, .08); }
  .pq-card .tbl td { display: block; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 760px) { .tbl.compare td, .tbl.compare th { width: auto; } }

/* Below this the captions are the only part that will not fit, so the narrow cut takes over:
   same bands, same neighbouring transactions, no text. The addresses are in the list below. */
.txflow-c { display: none; }
@media (max-width: 1000px) {
  .txflow-wrap:not(.txflow-c) { display: none; }
  .txflow-c { display: block; }
  /* it is a 360-unit drawing, so let it stop growing rather than inflate across a wide tablet */
  .txflow-c .txflow { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .io { display: none; }
  .iom { display: grid; gap: .35rem; }
  .iom .tfm-label { font-family: inherit; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
  .iom .tfm-label .mono, .iom .tfm-label a { font-family: var(--mono); font-size: .8rem; }
  .tfm-n { font-family: var(--mono); font-size: .72rem; color: #7d84b0; min-width: .9rem; }
  .tfm-subline { font-size: .74rem; color: #9DA4CE; overflow-wrap: anywhere; }
  .tfm-subline .link { font-size: .74rem; }
  .tfm-row-pq { background: rgba(58, 72, 140, .45); }
}
@media (max-width: 1000px) { .txflow-c { margin: .2rem 0 0; } }
/* things with an explanation behind a tap */
button.badge.has-tip { cursor: help; font: inherit; font-size: .78rem; }
.tip-q { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-left: .2rem; border-radius: 50%; font-size: .72em; font-weight: 700; background: rgba(255, 255, 255, .14); }
button.step-dot.has-tip { cursor: help; font: inherit; padding: 0; }
/* anything that copies on tap: a hint on hover, a confirmation after */
[data-copy] { cursor: copy; }
.copyable:hover, .rp-v[data-copy]:hover, .rp-node code[data-copy]:hover { text-decoration: underline dotted rgba(196, 204, 254, .6); }
.copied-toast { position: fixed; z-index: 100; transform: translate(-50%, -150%); padding: .15rem .5rem; border-radius: 6px; font: 600 .72rem var(--font); color: #0B0E1E; background: #6fe0ae; pointer-events: none; animation: toast 1.1s ease-out forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -100%); } 15%, 70% { opacity: 1; transform: translate(-50%, -150%); } 100% { opacity: 0; transform: translate(-50%, -170%); } }

/* home lists sit on a panel so they read over the backdrop; no panel inside a panel */
.home-list .empty { background: none; border: 0; box-shadow: none; padding: .4rem 0; }
.home-list:has(.blocks) { overflow: visible; }

@media (max-width: 760px) {
  /* the disassembly keeps one column grid across every group, and scrolls as a block */
  .disasm details { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .disasm .tbl { display: table; min-width: 34rem; }
  .disasm .tbl td, .disasm .tbl th { white-space: normal; }
  .disasm td.hex { white-space: nowrap; }
  /* the secrets map: smaller cells, menus side by side */
  .smap-grids { grid-template-columns: 1fr; gap: .9rem; }
  .smap-grid { gap: 2px; }
  .sc { border-radius: 3px; }
  .smap-big { font-size: 1.35rem; }
  /* transaction rows: amount under the id, never clipped */
  .atx-row { grid-template-columns: minmax(0, 1fr) auto; }
  .atx-meta { font-size: .76rem; }
}


/* ── phones ──────────────────────────────────────────────────────────────────────────────────
   Two-column grids look broken when the count is odd: the last card sits alone against a gap.
   Everywhere a grid pairs cards up, the odd one out takes the whole row instead. */
@media (max-width: 600px) {
  .stats > .stat:last-child:nth-child(odd),
  .smap-menus > *:last-child:nth-child(odd),
  .grid2 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* blocks: fix the column count so "last of an odd number" is knowable, then widen that one */
  .blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blocks > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* amounts: the dollar value goes under the BTC figure rather than off the edge */
  .stat-value .usd { display: block; }

  /* the narrow diagram stays: it is the picture of the transaction, and hiding it left the page
     opening on a table. Its labels are dropped instead (see .txflow-c), and the list below
     carries the addresses and the neighbouring transactions. */
  .tx-flow { padding-left: .6rem; padding-right: .6rem; }
  /* a block's 3,749 ids: one line each, clipped, the way a list of ids is meant to read */
  .txids a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.stat { min-width: 0; }