/* ============================================================
   DESIGN TOKENS — obsidian (shielded) · ice (public) · Zcash gold
   ============================================================ */
:root{
  --bg:#07070B;
  --gold:#F4B728;
  --gold-hi:#FFD66B;
  --gold-soft:rgba(244,183,40,.18);
  --ice:#A9E7FF;
  --ice-soft:rgba(169,231,255,.16);
  --white:#F2F3F7;
  --muted:rgba(242,243,247,.62);
  --faint:rgba(242,243,247,.34);
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.22);
  --glass:rgba(10,10,16,.62);
  --glass-2:rgba(14,14,22,.76);
  --ok:#6CE59C;
  --bad:#FF6B6B;
  --iris:linear-gradient(115deg,#8F7BFF,#3FE0C5 45%,#F4B728 80%);
  --accent:var(--ice);
  --accent-soft:var(--ice-soft);
  --font-display:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-ui:"Geist","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,5vw,96px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
body[data-mode="shielded"]{--accent:var(--gold);--accent-soft:var(--gold-soft)}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--bg);color:var(--white);
  font-family:var(--font-ui);font-weight:400;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;touch-action:pan-y;
}
body.loading{overflow:hidden}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
a:hover{border-bottom-color:var(--accent)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mono{font-family:var(--font-mono)}
::selection{background:rgba(244,183,40,.35)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   CANVAS + SCROLL TRACK
   ============================================================ */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;outline:none}
#track{position:relative;z-index:1;pointer-events:none}
#track section{width:100%}
#endnote{position:absolute;left:0;right:0;bottom:0}

/* ============================================================
   UI LAYER
   ============================================================ */
#ui{position:fixed;inset:0;z-index:2;pointer-events:none}
#ui > *{pointer-events:none}
.card{
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),var(--glass);
  border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 12px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
}


/* the author's links: two quiet glass buttons in the top-right corner, clear of the caption, the rail and the reveal */
#social{
  position:absolute;top:calc(clamp(14px,2.2vw,28px) + env(safe-area-inset-top,0px));right:clamp(14px,2.6vw,34px);
  display:flex;gap:10px;pointer-events:auto;
}
.soc{
  position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  color:rgba(242,243,247,.8);text-decoration:none;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.015)),var(--glass);
  border:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 10px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .45s var(--ease-expo),color .35s,border-color .35s,box-shadow .45s var(--ease-expo);
}
.soc svg{width:17px;height:17px;fill:currentColor;transition:transform .45s var(--ease-expo)}
.soc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.soc:active{transform:scale(.94)}
@media (hover:hover){
  .soc:hover{transform:translateY(-2px);color:var(--white);border-color:rgba(244,183,40,.5);box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 22px rgba(244,183,40,.22),inset 0 1px 0 rgba(255,255,255,.08)}
  .soc:hover svg{transform:scale(1.08)}
}

/* caption block */
#capwrap{
  position:absolute;left:var(--gutter);bottom:clamp(64px,12vh,132px);
  max-width:min(980px,78vw);
  opacity:0;transform:translateY(16px);will-change:opacity,transform;
}
#kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;transition:color .8s}
#caption{
  margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:-.012em;line-height:.98;
  font-size:clamp(40px,5.4vw,100px);text-wrap:balance;
  text-shadow:0 2px 30px rgba(7,7,11,.92),0 0 2px rgba(7,7,11,.9);
}
/* the wipe's clip reaches past the line box (the tight line-height leaves descenders — g, j, p, q, y — and accents
   outside it), and it is dropped once the wipe ends ('backwards', not 'both'), so no glyph is ever cut */
#caption.scan{animation:scan 1s var(--ease-expo) backwards}
@keyframes scan{from{clip-path:inset(-.3em 100% -.35em -.15em);filter:blur(6px)}to{clip-path:inset(-.3em -.15em -.35em -.15em);filter:blur(0)}}
#subcap{
  margin-top:14px;font-size:clamp(12px,.9vw,15px);color:var(--muted);letter-spacing:.005em;line-height:1.5;
  opacity:0;max-width:620px;
}
#subcap b{color:var(--accent);font-weight:600}
#subcap i{font-style:normal;color:var(--white)}
#subcap .m{font-family:var(--font-mono);font-size:.92em;color:var(--ice)}
#subcap .g{font-family:var(--font-mono);font-size:.92em;color:var(--gold)}

/* "Look inside": a viewing-key lens, not a button-shaped button */
#look{
  pointer-events:auto;display:inline-flex;align-items:center;gap:16px;margin-top:24px;padding:4px 14px 4px 0;
  color:var(--white);text-align:left;white-space:nowrap;border-radius:999px;
}
#look .lens{position:relative;width:52px;height:52px;flex:none;display:grid;place-items:center;transition:transform .7s var(--ease-expo)}
#look .lens::before{ /* dark glass disc */
  content:"";position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.14),rgba(255,255,255,.02) 45%,rgba(7,7,11,.6) 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#look .ring{ /* thin-film iridescent ring, slowly turning */
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#8F7BFF,#3FE0C5,#F4B728,#FF8FD8,#8F7BFF);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:lensturn 9s linear infinite;opacity:.95;
}
#look .lens::after{ /* a soft ping that invites the first click */
  content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);opacity:0;
  animation:lensping 3.2s var(--ease-expo) infinite;
}
#look.seen .lens::after{animation:none}
#look svg{position:relative;width:20px;height:20px;fill:var(--accent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 70%,transparent));transition:transform .7s var(--ease-expo),fill .8s}
#look .txt{display:flex;flex-direction:column;gap:4px}
#look .t1{
  font-family:var(--font-display);font-style:italic;font-size:25px;line-height:1;letter-spacing:.005em;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;
  transition:background-size .6s var(--ease-expo);
}
#look .t2{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
#look .t2 .n{color:var(--muted)}
#look:hover .lens,#look:focus-visible .lens{transform:scale(1.08) rotate(-8deg)}
#look:hover svg{transform:scale(1.12)}
#look:hover .t1,#look:focus-visible .t1{background-size:100% 1px}
#look:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* the end of the story: a quiet way back to the beginning */
#replay{
  pointer-events:none;opacity:0;display:inline-flex;align-items:center;gap:9px;min-height:40px;margin:24px 0 0 18px;padding:0 17px;vertical-align:middle;
  border-radius:999px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);background:rgba(244,183,40,.07);color:var(--white);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:opacity .7s var(--ease-expo),background .25s,border-color .25s;
}
#replay span{font-size:15px;letter-spacing:0;color:var(--gold)}
#replay.on{opacity:1;pointer-events:auto}
#replay:hover{background:rgba(244,183,40,.16);border-color:var(--gold)}
#replay:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@keyframes lensturn{to{transform:rotate(360deg)}}
@keyframes lensping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.7);opacity:0}}

/* scroll hint */
#hint{
  position:absolute;left:50%;bottom:calc(28px + var(--safe-b));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
#hint i{display:block;width:1px;height:44px;background:linear-gradient(to bottom,var(--ice),transparent);position:relative;overflow:hidden}
#hint i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:linear-gradient(to bottom,transparent,#fff);animation:hintdrop 1.8s var(--ease-expo) infinite}
@keyframes hintdrop{to{top:100%}}

/* chapter nav: a Merkle authentication path — you climb from your leaf to the root */
#chain{
  position:absolute;right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column-reverse;align-items:center;pointer-events:auto;
}
#chain::before{content:"";position:absolute;top:22px;bottom:12px;left:50%;width:1px;background:linear-gradient(to top,var(--line),var(--line-strong));transform:translateX(-50%)}
#chain .root{order:99;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);padding-bottom:6px}
#chain button{position:relative;width:44px;height:24px;display:grid;place-items:center}
#chain button i{
  display:block;width:8px;height:8px;transform:rotate(45deg);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);transition:all .5s var(--ease-expo);
}
#chain button.done i{background:rgba(169,231,255,.35);border-color:rgba(169,231,255,.55)}
#chain button.done.z i{background:rgba(244,183,40,.45);border-color:rgba(244,183,40,.6)}
#chain button.active i{background:var(--accent);border-color:#fff;box-shadow:0 0 14px var(--accent);transform:rotate(45deg) scale(1.4)}
#chain button.locked{cursor:default}
#chain button.locked i{opacity:.3;border-style:dashed}
#chain button span{
  position:absolute;right:44px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;font-family:var(--font-mono);font-size:11px;color:var(--muted);
  opacity:0;transition:all .35s var(--ease-expo);pointer-events:none;
  background:var(--glass-2);border:1px solid var(--line);padding:4px 8px;border-radius:6px;
}
#chain button:hover span,#chain button:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}
#chain button:focus-visible i{outline:2px solid var(--gold);outline-offset:3px}

/* 3D-projected labels */
#labels{position:absolute;inset:0;overflow:hidden}
.lbl{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.01em;color:var(--white);
  padding:5px 9px;border-radius:7px;background:var(--glass);border:1px solid var(--line);
  white-space:nowrap;opacity:0;will-change:transform,opacity;
  /* a denser tint instead of a live backdrop blur: over a scene that redraws every frame, each blurred label would be
     re-blurred every frame — ten of them cost real GPU time for a difference the eye can't see on a dark stage */
  background-color:rgba(9,9,14,.78);
}
.lbl .k{color:var(--muted)}
.lbl .v{display:block;color:var(--ice);margin-top:2px;font-size:10.5px}
.lbl b{color:var(--gold);font-weight:600}
.lbl .ice{color:var(--ice)}
.lbl .gold{color:var(--gold)}
.lbl .red{color:var(--bad)}
.lbl.mini{font-size:10px;padding:3px 7px;color:var(--muted)}
.lbl.big{font-size:13px;padding:7px 12px}
.lbl.pub{border-color:rgba(169,231,255,.35)}
.lbl.zk{border-color:rgba(244,183,40,.45)}
.lbl.red{border-color:rgba(255,107,107,.5);color:var(--bad)}
.lbl.ok{border-color:rgba(108,229,156,.5)}
.lbl.ok b{color:var(--ok)}
.lbl.plain{background:none;border:0;padding:0;font-size:12px;font-weight:600;color:var(--white);text-shadow:0 0 12px rgba(0,0,0,.9)}
.lbl.headline{
  max-width:min(460px,80vw);white-space:normal;text-align:center;line-height:1.5;padding:12px 16px;border-radius:10px;
  font-size:12px;background:var(--glass-2);border-color:rgba(244,183,40,.4);word-break:break-all;
}
.lbl.headline .k{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;word-break:normal}
.lbl.card{white-space:normal;min-width:min(250px,64vw);max-width:min(290px,70vw);padding:10px 12px;line-height:1.55}
.lbl.card .row{display:flex;justify-content:space-between;gap:12px}
.lbl.card .h{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}

/* ============================================================
   THE REVEAL — details seen through a viewing key
   ============================================================ */
html{scrollbar-gutter:stable}
html.dd-lock,html.dd-lock body{overflow:hidden}
#ui{transition:opacity .5s var(--ease-expo)}
body.dd-open #ui{opacity:0}
#reveal{position:fixed;inset:0;z-index:5;visibility:hidden;pointer-events:none}
#reveal.open{visibility:visible;pointer-events:auto}
.rv-shade{
  position:absolute;inset:0;opacity:0;
  background:linear-gradient(90deg,rgba(7,7,11,0) 34%,rgba(7,7,11,.5) 56%,rgba(7,7,11,.8) 78%,rgba(7,7,11,.86));
}
.rv-col{
  position:absolute;top:0;bottom:0;right:clamp(28px,5vw,96px);width:min(600px,44vw);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:clamp(72px,11vh,120px) 18px 72px 30px;scrollbar-width:none;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 56px,#000 calc(100% - 56px),transparent);
          mask:linear-gradient(to bottom,transparent,#000 56px,#000 calc(100% - 56px),transparent);
}
.rv-col::-webkit-scrollbar{display:none}
.rv-col:focus{outline:none}
.rv-grab{display:none}
.rv-progress{position:sticky;top:0;float:left;margin-left:-30px;width:1px;height:calc(100vh - clamp(72px,11vh,120px) - 72px);background:var(--line)}
.rv-progress i{display:block;width:1px;height:100%;background:linear-gradient(to bottom,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent));transform-origin:top;transform:scaleY(0)}
.rv-kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.rv-kicker .sep{margin:0 .6em;color:var(--faint)}
#rv-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(46px,4.6vw,78px);line-height:.95;letter-spacing:-.015em}
.rv-toc{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 34px}
.rv-toc[hidden]{display:none}
.rv-toc button .i{margin-right:9px;color:var(--accent);letter-spacing:.12em}
.rv-toc button{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);
  padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.025);
  transition:color .3s,border-color .3s,background .3s;
}
.rv-toc button:hover,.rv-toc button:focus-visible{color:var(--white);border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:var(--accent-soft)}
.rv-toc button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rv-foot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px}
.rv-share{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,.03);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s,border-color .3s,background .3s}
.rv-share svg{width:15px;height:15px;fill:currentColor;flex:none}
.rv-share:hover,.rv-share:focus-visible{color:var(--white);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--accent-soft)}
.rv-share:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rv-back{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--muted);transition:color .3s}
.rv-back:hover,.rv-back:focus-visible{color:var(--white)}
.rv-back:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ============================================================
   READING — the "Look inside" column, set like a long-form magazine page
   ============================================================ */
.dd{counter-reset:sec;font-feature-settings:"kern","liga","calt"}
/* deck: the first heading reads as the chapter's subtitle */
.dd h3.deck{
  margin:-4px 0 26px;padding:0;font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(24px,2vw,30px);line-height:1.15;letter-spacing:-.005em;color:rgba(242,243,247,.72);
}
/* numbered sections: 01 ───── then the heading */
.dd h3:not(.deck){
  counter-increment:sec;position:relative;margin:64px 0 18px;padding-top:30px;
  font-family:var(--font-display);font-size:clamp(30px,2.5vw,38px);font-weight:400;line-height:1.04;letter-spacing:-.012em;
  scroll-margin-top:28px;text-wrap:balance;
}
.dd h3:not(.deck)::before{
  content:counter(sec,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-size:10.5px;font-style:normal;letter-spacing:.22em;color:var(--accent);
}
.dd h3:not(.deck)::after{
  content:"";position:absolute;left:32px;right:0;top:6px;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),rgba(255,255,255,.07) 45%,transparent);
}
.dd h4{
  display:flex;align-items:center;gap:14px;margin:34px 0 14px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.dd h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}

/* body text */
.dd p{margin:0 0 16px;max-width:62ch;font-size:15.5px;line-height:1.74;color:rgba(242,243,247,.76);text-wrap:pretty;hanging-punctuation:first}
.dd p strong,.dd li strong,.dd .kv strong{color:var(--white);font-weight:500}
.dd p em,.dd li em,.dd .kv em,.dd .timeline em{font-family:var(--font-display);font-style:italic;font-size:1.14em;line-height:1;color:var(--white);letter-spacing:.004em}
/* lede: the opening paragraph, in the display serif with a gold drop cap */
.dd p.lede{
  max-width:none;margin:0 0 30px;font-family:var(--font-display);font-size:clamp(21px,1.75vw,25px);line-height:1.38;
  letter-spacing:-.002em;color:rgba(242,243,247,.94);
}
.dd p.lede strong{font-weight:400;color:var(--accent)}
.dd p.lede em{font-size:1em;color:var(--accent)}
.dd p.lede::first-letter{
  float:left;margin:.07em .14em 0 0;font-size:3.35em;line-height:.8;color:var(--accent);
  text-shadow:0 0 24px color-mix(in srgb,var(--accent) 45%,transparent);
}
/* marginal notes */
.dd > p.note,.dd > .note{
  position:relative;margin:18px 0;padding:2px 0 2px 16px;max-width:62ch;
  font-size:13px;line-height:1.62;color:rgba(242,243,247,.52);border-left:1px solid var(--line-strong);
}
.dd .note{font-size:12.5px;color:var(--muted)}
.dd a{color:var(--white);border-bottom:0;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent)) 0 100%/100% 1px no-repeat;transition:background-size .4s var(--ease-expo),color .3s}
.dd a:hover{color:var(--accent)}

/* lists with diamond markers (like the Merkle-path nav) */
.dd ul{list-style:none;margin:8px 0 20px;padding:0;max-width:62ch}
.dd ul li{position:relative;margin:0 0 12px;padding-left:24px;font-size:15px;line-height:1.66;color:rgba(242,243,247,.76)}
.dd ul li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--accent)}

/* timeline */
.dd .timeline{position:relative;list-style:none;margin:6px 0 28px;padding:0}
.dd .timeline::before{content:"";position:absolute;left:5px;top:12px;bottom:18px;width:1px;background:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 70%,transparent),rgba(255,255,255,.06))}
.dd .timeline li{position:relative;padding:0 0 26px 38px;font-size:15px;line-height:1.66;color:rgba(242,243,247,.76)}
.dd .timeline li:last-child{padding-bottom:0}
.dd .timeline li::before{content:"";position:absolute;left:1px;top:10px;width:9px;height:9px;transform:rotate(45deg);background:var(--bg);border:1px solid var(--accent)}
.dd .timeline li:last-child::before{background:var(--accent);box-shadow:0 0 14px var(--accent)}
.dd .timeline .yr{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:30px;line-height:1;color:var(--white);letter-spacing:-.01em}

/* definition rows */
.dd .kv{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px 16px;margin:12px 0;font-size:13px;line-height:1.55}
.dd .kv > span{min-width:0}
.dd .kv > span:nth-child(odd){color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding-top:2px}
.dd .kv > span:nth-child(even){color:rgba(242,243,247,.86)}
.dd > .kv{gap:0 18px;margin:18px 0 24px;border-top:1px solid var(--line)}
.dd > .kv > span{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14.5px;line-height:1.6}
.dd > .kv > span:nth-child(odd){font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-top:17px}

/* tables */
.dd table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:13px}
.dd th{text-align:left;font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 10px 10px 0;border-bottom:1px solid var(--line-strong)}
.dd td{padding:12px 10px 12px 0;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top;line-height:1.55;color:rgba(242,243,247,.8)}
.dd tbody tr{transition:background .3s}
.dd tbody tr:hover{background:rgba(255,255,255,.025)}
.dd td:first-child{font-family:var(--font-display);font-size:17px;line-height:1.25;color:var(--white)}
.dd td.b{font-family:var(--font-mono);font-size:12.5px;color:var(--gold);white-space:nowrap}
.dd td.m{font-family:var(--font-mono);font-size:11px}

/* live checks: each row is recomputed in the browser and compared with official data */
.dd .checks{margin:6px 0 4px;display:grid;gap:10px}
.dd .ck{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.dd .ck:last-child{border-bottom:0}
.dd .ck .lab{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:rgba(242,243,247,.78)}
.dd .ck .st{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--faint);white-space:nowrap}
.dd .ck .st.ok{color:var(--ok)}
.dd .ck .st.bad{color:var(--bad)}
.dd .ck .val{grid-column:1 / -1;font-size:11px;color:var(--ice);min-height:1em}
.dd .ck .val:empty{display:none}

.dd .grid5{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:4px 10px;margin:6px 0 10px}
.dd .grid5 label{margin:6px 0 0}
.dd .grid5 input{margin-top:6px}

/* a 32-bit path, one square per level */
.dd .bits{display:grid;grid-template-columns:repeat(32,1fr);gap:2px;margin:14px 0 6px}
.dd .bits i{height:14px;border-radius:2px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.dd .bits i.r{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 50%,transparent)}

/* sources: every claim above can be checked */
.dd .sources{list-style:none;counter-reset:src;margin:6px 0 0;padding:0;max-width:62ch}
.dd .sources li{counter-increment:src;position:relative;margin:0 0 9px;padding-left:28px;font-size:12.5px;line-height:1.55;color:rgba(242,243,247,.5)}
.dd .sources li::before{content:counter(src,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--accent)}
.dd .sources a{color:rgba(242,243,247,.82)}
.dd .sources em{font-size:1.06em;color:rgba(242,243,247,.7)}

/* tags + data */
.dd .simp,.dd .exact{
  display:inline-block;margin-right:8px;padding:2px 7px;border-radius:999px;vertical-align:.12em;
  font-family:var(--font-mono);font-size:9.5px;font-style:normal;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;
}
.dd .simp{color:var(--gold);border:1px solid rgba(244,183,40,.4)}
.dd .exact{color:var(--ok);border:1px solid rgba(108,229,156,.45)}
.dd .hex{font-family:var(--font-mono);font-size:11.5px;color:var(--ice);word-break:break-all;line-height:1.55}
.dd .hex.g{color:var(--gold)}
.dd .box{
  position:relative;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:18px 0;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px rgba(0,0,0,.25);
}
.dd .box::before{ /* thin-film hairline along the top edge */
  content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,#8F7BFF,#3FE0C5,#F4B728,transparent);opacity:.7;
}
.dd .box .t{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.dd .ok{color:var(--ok);font-weight:600}
.dd .bad{color:var(--bad);font-weight:600}
.dd ol{margin:6px 0 10px;padding-left:18px;font-size:13.5px;color:rgba(242,243,247,.84);line-height:1.6}
.dd input[type=text]{
  width:100%;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line-strong);
  background:rgba(0,0,0,.35);color:var(--white);font-family:var(--font-mono);font-size:13px;outline:none;
}
.dd input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dd label{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:8px 0 6px}
.dd .big{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--white)}
.dd .big small{font-size:12px;font-weight:400;color:var(--muted);margin-left:6px}
.dd .pill{display:inline-block;font-family:var(--font-mono);font-size:11px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid var(--line);margin:2px 4px 2px 0}
.dd .pill.g{color:var(--gold);border-color:rgba(244,183,40,.4)}
.dd .pill.i{color:var(--ice);border-color:rgba(169,231,255,.35)}
.dd .pill.r{color:var(--bad);border-color:rgba(255,107,107,.4)}
.dd .btn{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:9px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);color:var(--white);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;cursor:pointer;transition:background .25s}
.dd .btn:hover{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.dd .btn.ghost{background:rgba(255,255,255,.04);border-color:var(--line-strong)}
.dd .btn:disabled{opacity:.45;cursor:default}
.dd .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.dd .fieldbar{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:2px;margin:8px 0 4px}
.dd .fieldbar i{display:block;height:100%}
.dd .fieldbar i.i{background:var(--ice)}
.dd .fieldbar i.g{background:var(--gold)}
.dd .fieldbar i.w{background:rgba(242,243,247,.5)}
.dd .meter{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0}
.dd .meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a5e05,var(--gold),var(--gold-hi));transition:width .4s var(--ease-expo)}
.dd .log{font-family:var(--font-mono);font-size:11px;line-height:1.6;max-height:150px;overflow:auto;color:var(--muted)}
.dd .log .ok,.dd .log .bad{font-weight:500}
.dd .steps{counter-reset:s;list-style:none;padding:0}
.dd .steps li{counter-increment:s;position:relative;padding-left:26px;margin:6px 0}
.dd .steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);font-family:var(--font-mono);font-size:10px;display:grid;place-items:center;color:var(--muted)}
.dd .steps li.on::before{border-color:var(--accent);color:var(--accent)}
.dd .tx{font-family:var(--font-mono);font-size:11px;line-height:1.7}
.dd .tx .a{padding:1px 5px;border-radius:4px;border:1px solid var(--line);transition:all .4s var(--ease-expo)}
.dd .tx .a.hit{border-color:rgba(255,107,107,.6);color:var(--bad);background:rgba(255,107,107,.1)}

/* loader */
#loader{position:fixed;inset:0;z-index:20;background:var(--bg);display:grid;place-items:center;transition:opacity .9s var(--ease-expo),visibility 0s linear .9s}
#loader.off{opacity:0;visibility:hidden}
#loader .in{display:flex;flex-direction:column;align-items:center;gap:18px}
#loader .lg{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 40px rgba(244,183,40,.35);animation:pulse 1.8s ease-in-out infinite}
#loader .lg svg{display:block;width:64px;height:64px}
@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 0 70px rgba(244,183,40,.5)}}
#loader .bar{width:160px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
#loader .bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .4s var(--ease-expo)}
#loader .msg{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
#nogl{display:none;max-width:420px;text-align:center;padding:24px;color:var(--muted);font-size:14px;line-height:1.6}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px),(orientation:portrait) and (max-width:1024px){
  #capwrap{left:20px;right:56px;bottom:calc(84px + var(--safe-b));max-width:none}
  #caption{font-size:clamp(34px,9.4vw,52px)}
  #subcap{font-size:12px}
  #kicker{margin-bottom:8px}
  #look{margin-top:16px;gap:13px;max-width:100%;white-space:normal}
  #look .t2{line-height:1.5}
  #look .lens{width:46px;height:46px}
  #look .t1{font-size:22px}
  #replay{margin:12px 0 0;min-height:38px}
  #chain{right:6px}
  #chain button{width:40px;height:20px}
  #chain button span{display:none}
  #hint{display:none}
  #social{gap:8px}
  .soc{width:42px;height:42px}
  .soc svg{width:16px;height:16px}
  /* the reveal becomes a sheet under the lens */
  .rv-shade{background:linear-gradient(to bottom,rgba(7,7,11,0) 26%,rgba(7,7,11,.55) 42%,rgba(7,7,11,.8))}
  .rv-col{
    left:0;right:0;top:38vh;bottom:0;width:auto;padding:30px 20px calc(48px + var(--safe-b));
    border-radius:24px 24px 0 0;border-top:1px solid var(--line-strong);
    background:linear-gradient(to bottom,rgba(14,14,21,.82),rgba(9,9,14,.94) 30%);
    box-shadow:0 -24px 60px rgba(0,0,0,.45);-webkit-mask:none;mask:none;
  }
  .rv-col.dragging{transition:none}
  .rv-grab{display:block;position:absolute;left:50%;top:10px;width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);transform:translateX(-50%)}
  .rv-progress{display:none}
  #rv-title{font-size:clamp(40px,11vw,56px)}
  .rv-toc{margin:18px 0 26px}
  .dd h3:not(.deck){margin-top:50px;padding-top:26px;font-size:30px}
  .dd h3.deck{font-size:23px;margin-bottom:22px}
  .dd p{font-size:15px;line-height:1.7}
  .dd p.lede{font-size:20px;line-height:1.4;margin-bottom:26px}
  .dd > .kv{grid-template-columns:minmax(78px,auto) 1fr}
  .dd > .kv > span{font-size:14px}
  .dd td:first-child{font-size:15px}
  .dd .timeline .yr{font-size:26px}
  .lbl{font-size:10px;padding:4px 7px}
  .lbl .wide{display:none}
  .lbl.headline{font-size:10.5px;padding:10px 12px}
  .lbl.card{font-size:10px}
}
/* narrow phones: a label may take two lines rather than run past the chapter rail */
@media (max-width:480px){
  .lbl:not(.card){white-space:normal;max-width:calc(100vw - 84px);width:max-content;text-align:center;line-height:1.35;font-size:10.5px;padding:4px 8px}
}
@media (min-width:1900px){
  #capwrap{max-width:min(1400px,62vw)}
  #caption{font-size:clamp(84px,5vw,124px)}
  #kicker{font-size:12px}
  .lbl{font-size:12px}
  .rv-col{width:min(680px,36vw)}
}
@media (prefers-reduced-motion:reduce){
  #hint i::after,#loader .lg,#look .ring,#look .lens::after{animation:none}
  #look .lens,#look svg,#look .t1,.lbl,#chain button i,.soc,.soc svg{transition-duration:.15s}
  #caption.scan{animation:none}
}