/* ==========================================================================
   The Hundred-Heads Test — tool-specific styles

   Ported from Claude_Regression_Tutorials/Remote_Viewing/files/hundred-heads.html.
   The lesson content is unchanged; this file only moves it onto the house
   design system. Two structural rules, both borrowed from the earlier
   understanding_regression port:

   1. Every class is prefixed `hh-`. The source styled bare `button`, `canvas`,
      `p` and `body`, and used `.card`, `.panel`, `.hint`, `.body`, `.legend`,
      `.tag`, `.bar` and `.num` — all of which collide with
      shared/css/main.css. Element selectors are scoped under `.hh-lesson`.
   2. Custom properties are scoped to `.hh-lesson`, never `:root`. Names like
      --ink and --rule are generic enough that a future main.css addition
      would clash, and a :root block here would win page-wide.

   Colour rule, load-bearing:
     --hh-gold / --hh-gold-deep are the COIN and the plotted data series. The
     lesson prose calls that line "the gold line" in two places, so the hue is
     content, not decoration. Everything else — buttons, gates, focus rings,
     reference numbering — uses the house blue accent.

   The canvas charts repeat these values in JS; see PALETTE at the top of
   main_hundred_heads.js. Change both together.
   ========================================================================== */

.hh-lesson{
  /* house tokens (shared/css/main.css :root) */
  --hh-paper:#f5f7fb;          /* --app-bg      */
  --hh-paper-2:#eef2f8;
  --hh-panel:#ffffff;          /* --app-card-bg */
  --hh-ink:#1f2a37;            /* --app-text    */
  --hh-ink-soft:#5f6b7a;       /* --app-muted   */
  --hh-rule:#d6dfea;           /* --app-border  */

  --hh-accent:#2a7de1;         /* --app-accent      */
  --hh-accent-deep:#1a5fb4;    /* --app-accent-dark */

  --hh-fail:#d64747;           /* --app-danger  */
  --hh-pass:#2f9d58;           /* --app-success */

  /* the coin, and the plotted series the prose calls "the gold line" */
  --hh-gold:#b0843c;
  --hh-gold-deep:#8a6526;

  --hh-story:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --hh-ui:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  color:var(--hh-ink);
  font-family:var(--hh-ui);
  font-size:17px;
  line-height:1.6;
}
.hh-lesson *{box-sizing:border-box}
.hh-lesson p{max-width:62ch}

.hh-wrap{max-width:940px;margin:0 auto;padding:0 0 40px}

/* ---------- opening ---------- */
.hh-hero{padding:8px 0 30px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.hh-hero-title{
  font-family:var(--hh-story);font-weight:700;
  font-size:clamp(1.8rem,4.4vw,2.7rem);line-height:1.08;
  margin:0 0 18px;letter-spacing:-.02em;max-width:22ch;
}
.hh-hero p{font-size:1.06rem;color:var(--hh-ink-soft);margin:0 0 24px}
.hh-coin-stage{width:150px;height:150px;display:grid;place-items:center;perspective:800px}
.hh-coin{width:118px;height:118px;position:relative;transform-style:preserve-3d;
  animation:hh-spin 1.9s cubic-bezier(.2,.7,.2,1) 1 both}
@keyframes hh-spin{
  from{transform:rotateY(0) translateY(-34px)}
  60%{transform:rotateY(900deg) translateY(6px)}
  to{transform:rotateY(1080deg) translateY(0)}
}
@media (prefers-reduced-motion:reduce){.hh-coin{animation:none}}

.hh-jump{margin:0;padding:14px 0 0;list-style:none;display:flex;flex-wrap:wrap;
  gap:0 20px;font-size:.9rem;border-top:1px solid var(--hh-rule)}
.hh-jump a{color:var(--hh-ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding:3px 0}
.hh-jump a:hover,.hh-jump a:focus-visible{color:var(--hh-ink);border-bottom-color:var(--hh-accent)}

/* ---------- acts ---------- */
.hh-act{border-top:1px solid var(--hh-rule);padding-top:14px;margin-top:64px;scroll-margin-top:20px}
.hh-act-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.hh-act-num{font-family:var(--hh-story);font-size:.95rem;color:var(--hh-accent-deep);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em}
.hh-act h2{font-family:var(--hh-story);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.05rem);
  margin:0;letter-spacing:-.015em}
.hh-sub{font-family:var(--hh-story);font-weight:700;font-size:1.2rem;margin:38px 0 6px}
.hh-story{font-size:1.1rem;line-height:1.62}
.hh-aside{font-size:.95rem;color:var(--hh-ink-soft);border-left:2px solid var(--hh-rule);
  padding-left:16px;margin:22px 0;max-width:60ch}

/* The obvious student objection, answered inline. Deliberately visible rather
   than tucked into a disclosure: without it the panel implies judging is pure
   noise, which cannot explain a 30% hit rate against 20% chance. */
.hh-followup{margin:22px 0 0;padding:18px 20px;background:var(--hh-paper-2);
  border-left:3px solid var(--hh-accent);border-radius:0 6px 6px 0}
.hh-followup p{margin:0 0 12px;font-size:.95rem;line-height:1.6}
.hh-followup p:last-child{margin-bottom:0}
.hh-followup-q{font-family:var(--hh-story);font-size:1.05rem;font-weight:600;
  color:var(--hh-ink);line-height:1.45}
.hh-followup-note{font-size:.85rem;color:var(--hh-ink-soft);font-style:italic;
  border-top:1px solid var(--hh-rule);padding-top:10px}

/* ---------- panels, gates, controls ---------- */
.hh-panel{background:var(--hh-panel);border:1px solid var(--hh-rule);border-radius:8px;
  padding:22px;margin:26px 0;box-shadow:0 1px 2px rgba(31,42,55,.04)}
.hh-panel h3{margin:0 0 4px;font-size:1rem;font-weight:700}
.hh-panel .hh-hint{margin:0 0 16px;color:var(--hh-ink-soft);font-size:.93rem;max-width:60ch}
.hh-hint{color:var(--hh-ink-soft);font-size:.93rem;max-width:60ch}

.hh-gate{background:var(--hh-paper-2);border-left:3px solid var(--hh-accent);
  padding:18px 20px;margin:26px 0;border-radius:0 6px 6px 0}
.hh-gate .hh-q{font-family:var(--hh-story);font-size:1.05rem;font-weight:600;margin:0 0 12px;max-width:58ch}

.hh-choices{display:flex;gap:8px;flex-wrap:wrap}
.hh-lesson button{
  font:inherit;font-size:.95rem;background:var(--hh-panel);color:var(--hh-ink);
  border:1px solid var(--hh-ink);border-radius:6px;padding:8px 15px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.hh-lesson button:hover:not(:disabled){background:var(--hh-ink);color:#fff}
.hh-lesson button:focus-visible{outline:2px solid var(--hh-accent);outline-offset:2px}
.hh-lesson button:disabled{opacity:.45;cursor:default}
.hh-lesson button.hh-picked{background:var(--hh-ink);color:#fff}
/* an option the student clicked AFTER answering, to read its feedback */
.hh-lesson button.hh-explored{border-color:var(--hh-accent);color:var(--hh-accent-deep);background:#f2f8ff}
.hh-gate-note{margin:12px 0 0;font-size:.85rem;line-height:1.45;color:var(--hh-ink-soft);font-style:italic;max-width:62ch}
.hh-lesson button.hh-solid{background:var(--hh-accent);border-color:var(--hh-accent-deep);color:#fff}
.hh-lesson button.hh-solid:hover:not(:disabled){background:var(--hh-accent-deep)}

.hh-reveal{display:none;margin-top:16px;padding-top:16px;border-top:1px dashed var(--hh-rule)}
.hh-reveal.hh-on{display:block}
.hh-reveal p{margin:0 0 10px}
.hh-reveal p:last-child{margin-bottom:0}

.hh-verdict{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;font-weight:600;
  padding:9px 14px;border-radius:6px;margin-top:6px}
.hh-verdict.hh-bad{background:rgba(214,71,71,.09);color:var(--hh-fail);border:1px solid rgba(214,71,71,.32)}
.hh-verdict.hh-good{background:rgba(47,157,88,.09);color:var(--hh-pass);border:1px solid rgba(47,157,88,.32)}

.hh-readout{display:flex;gap:28px;flex-wrap:wrap;margin:16px 0 4px}
.hh-readout div{min-width:96px}
.hh-readout .hh-lab{font-size:.8rem;color:var(--hh-ink-soft);display:block}
.hh-readout .hh-val{font-size:1.3rem;font-variant-numeric:tabular-nums;font-weight:700}
/* the scoreboard says which exercise each number came from, so it needs room */
.hh-score-readout{gap:22px 26px}
.hh-score-readout div{min-width:170px;max-width:212px}
.hh-readout .hh-src{display:block;margin-top:4px;font-size:.75rem;line-height:1.35;color:var(--hh-ink-soft)}
.hh-num{font-variant-numeric:tabular-nums}
.hh-lesson input[type=range]{width:100%;max-width:420px;accent-color:var(--hh-accent)}
.hh-lesson input[type=range]:focus-visible{outline:2px solid var(--hh-accent);outline-offset:3px}

.hh-tally{display:flex;flex-wrap:wrap;gap:3px;margin:16px 0;min-height:22px}
.hh-pip{width:15px;height:15px;border-radius:50%;border:1px solid var(--hh-gold-deep);background:var(--hh-gold)}
.hh-pip.hh-tail{background:#fff}

.hh-proto{list-style:none;padding:0;margin:14px 0 0;max-width:62ch}
.hh-proto li{padding:9px 0 9px 30px;border-bottom:1px solid var(--hh-rule);position:relative;font-size:.97rem}
.hh-proto li:last-child{border-bottom:0}
.hh-proto li::before{content:"\2713";position:absolute;left:4px;color:var(--hh-pass);font-weight:700}

/* Authored SVG, generated by scripts/build_tool_figures.js from the sibling
   .figure.js. Never hand-edit the .svg. */
.hh-figure{margin:4px 0 18px;padding:0}
.hh-figure img{width:100%;max-width:804px;height:auto;display:block;
  border:1px solid var(--hh-rule);border-radius:6px;background:var(--hh-panel)}

/* The canvases carry their own width/height attributes (1200x560). Forcing a
   fixed CSS height stretched every label horizontally, so let the intrinsic
   aspect ratio drive the height. */
.hh-lesson canvas{width:100%;height:auto;display:block;background:var(--hh-panel);border-radius:6px}
.hh-stages{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px;align-items:center}
.hh-log{font-size:.92rem;color:var(--hh-ink-soft);min-height:1.6em;margin:12px 0 0;max-width:64ch}
.hh-seedbox{font:inherit;font-size:.9rem;padding:7px 9px;border:1px solid var(--hh-ink);
  border-radius:6px;background:#fff;color:var(--hh-ink);width:86px}

/* ---------- tables and citation lists ---------- */
.hh-map{width:100%;border-collapse:collapse;margin:22px 0;font-size:.95rem}
.hh-map th,.hh-map td{text-align:left;vertical-align:top;padding:13px 14px 13px 0;border-bottom:1px solid var(--hh-rule)}
.hh-map th{font-weight:700;width:24%}
.hh-map thead th{width:auto;color:var(--hh-ink);border-bottom:2px solid var(--hh-ink);padding-bottom:8px;font-size:.85rem}
.hh-map caption{caption-side:top;text-align:left;font-weight:700;font-size:.95rem;padding:0 0 10px;color:var(--hh-ink)}
.hh-map td:last-child{color:var(--hh-ink-soft)}

.hh-cites{margin:22px 0 0;padding:0;list-style:none;max-width:72ch;font-size:.92rem;color:var(--hh-ink-soft)}
.hh-cites li{padding:10px 0;border-bottom:1px solid var(--hh-rule)}
.hh-cites li:last-child{border-bottom:0}

/* ---------- sources ---------- */
.hh-refnote{background:var(--hh-paper-2);border-left:3px solid var(--hh-accent);padding:16px 20px;
  margin:20px 0 28px;font-size:.95rem;color:var(--hh-ink-soft);border-radius:0 6px 6px 0;max-width:70ch}
.hh-refnote strong{color:var(--hh-ink)}
.hh-refgrp{margin:30px 0 0}
.hh-refgrp > h3{font-family:var(--hh-story);font-weight:700;font-size:1.1rem;margin:0 0 4px}
.hh-refgrp > p.hh-gl{font-size:.9rem;color:var(--hh-ink-soft);margin:0 0 10px;max-width:66ch}
ol.hh-refs{margin:0;padding:0;list-style:none}
ol.hh-refs li{position:relative;padding:12px 0 12px 42px;border-bottom:1px solid var(--hh-rule);
  font-size:.92rem;line-height:1.55}
ol.hh-refs li:last-child{border-bottom:0}
ol.hh-refs li .hh-n{position:absolute;left:0;top:12px;width:30px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--hh-accent-deep);font-weight:700;font-size:.85rem}
ol.hh-refs a{color:var(--hh-accent-deep);text-decoration:none;border-bottom:1px solid var(--hh-rule);word-break:break-word}
ol.hh-refs a:hover{color:var(--hh-ink);border-bottom-color:var(--hh-accent)}
ol.hh-refs .hh-reply{display:block;margin-top:6px;padding-left:14px;border-left:2px solid var(--hh-rule);color:var(--hh-ink-soft)}
ol.hh-refs .hh-reply b{color:var(--hh-ink);font-weight:700}

/* ---------- remote viewing trial ---------- */
.hh-rvsteps{counter-reset:hhrv;margin:0 0 6px;padding:0;list-style:none}
.hh-rvsteps li{position:relative;padding:0 0 14px 40px;font-size:.97rem;color:var(--hh-ink-soft)}
.hh-rvsteps li::before{counter-increment:hhrv;content:counter(hhrv);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;border:1px solid var(--hh-accent-deep);color:var(--hh-accent-deep);
  display:grid;place-items:center;font-size:.8rem;font-weight:700}
.hh-rvsteps li b{color:var(--hh-ink)}

.hh-rvpool{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin:16px 0 8px}
.hh-rvcard{border:1px solid var(--hh-rule);background:var(--hh-panel);border-radius:6px;padding:12px 10px;
  text-align:center;transition:border-color .15s,background .15s}
.hh-rvcard svg{display:block;margin:0 auto 8px;width:56px;height:56px}
.hh-rvcard .hh-nm{font-size:.82rem;line-height:1.3;color:var(--hh-ink)}
.hh-rvpool.hh-judging .hh-rvcard{cursor:pointer}
.hh-rvpool.hh-judging .hh-rvcard:hover{border-color:var(--hh-accent);background:#f4f9ff}
.hh-rvpool.hh-judging .hh-rvcard:focus-visible{outline:2px solid var(--hh-accent);outline-offset:2px}
.hh-rvcard.hh-sealed{opacity:.45}
.hh-rvcard.hh-picked{border-color:var(--hh-accent);border-width:2px;background:#f2f8ff}
.hh-rvcard.hh-actual{border-color:var(--hh-pass);border-width:2px;background:#f2faf5}
.hh-rvcard .hh-flag{display:block;margin-top:7px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.hh-rvcard.hh-picked .hh-flag{color:var(--hh-accent-deep)}
.hh-rvcard.hh-actual .hh-flag{color:var(--hh-pass)}

.hh-rvtrans{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:#fbfcfe;border:1px solid var(--hh-rule);border-radius:6px;padding:16px 18px;margin:16px 0}
.hh-rvtrans .hh-sk{width:190px;height:154px;flex:none}
.hh-rvtrans ul{margin:0;padding:0;list-style:none;font-size:1rem;line-height:1.5}
.hh-rvtrans li{padding:3px 0}
.hh-rvtrans li.hh-miss{color:#9aa7b4}
.hh-rvtrans .hh-lg{font-size:.78rem;color:var(--hh-ink-soft);margin:10px 0 0}
@media (max-width:640px){
  .hh-rvtrans{grid-template-columns:1fr}
  .hh-rvtrans .hh-sk{width:100%;height:140px}
}

/* ---------- the single bent coin ---------- */
.hh-bcstage{display:flex;align-items:flex-end;gap:34px;flex-wrap:wrap;margin:6px 0 18px}
.hh-bcpit{width:210px;height:230px;display:grid;place-items:end center;perspective:1100px}
.hh-bcinner{position:relative;width:170px;height:210px;display:grid;place-items:center;
  transform:rotateX(9deg);transform-style:preserve-3d}
.hh-bigcoin{position:relative;width:152px;height:152px;transform-style:preserve-3d;will-change:transform;
  transform-origin:50% 50%;backface-visibility:visible}
.hh-bcf{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;overflow:hidden;
  border:1px solid #6E5019;box-shadow:inset 0 0 0 3px rgba(110,80,25,.3)}
.hh-bch{background:radial-gradient(circle at 33% 27%, #E0B76C 0%, #B0843C 55%, #8A6526 100%)}
.hh-bct{transform:rotateY(180deg);background:radial-gradient(circle at 33% 27%, #C49A54 0%, #9C7230 55%, #6E5019 100%)}
.hh-bcf span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--hh-ui);
  font-weight:700;font-size:15px;letter-spacing:.18em;color:rgba(90,65,20,.85);text-transform:uppercase;
  padding-top:34px}
.hh-bct span{color:rgba(45,32,10,.85)}
/* struck rings, so the faces read as metal rather than a letter on a circle */
.hh-bcf::before{content:"";position:absolute;inset:9px;border-radius:50%;
  border:2px solid rgba(94,67,24,.32);box-shadow:inset 0 0 0 5px rgba(255,240,205,.13)}
.hh-bch::after{content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:46px;height:52px;border-radius:50% 50% 46% 46%;
  background:linear-gradient(150deg,rgba(255,238,200,.5),rgba(94,67,24,.42));
  box-shadow:inset -2px -3px 5px rgba(94,67,24,.5), 1px 1px 2px rgba(255,245,215,.35)}
/* The edge is thick enough to read as a real coin, and its far end is solder
   grey rather than brass. The element is rotateX(90deg), so its height axis IS
   the coin's thickness: the gradient runs from the heads face to the tails
   face, which is where the extra metal sits. */
.hh-bcedge{position:absolute;left:0;width:100%;height:19px;top:calc(50% - 9.5px);
  transform:rotateX(90deg);border-radius:2px;
  background:
    linear-gradient(to bottom, rgba(138,101,38,0) 0 34%, rgba(70,72,75,.75) 62%, rgba(38,40,42,.95) 100%),
    repeating-linear-gradient(90deg,#8A6526 0 3px,#6E5019 3px 6px);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.4), inset 0 -3px 6px rgba(0,0,0,.5)}
/* the solder bead, seen from the edge: a bulge sitting proud of the tails face */
.hh-bcedge::after{content:"";position:absolute;left:21%;width:58%;bottom:-3px;height:9px;
  border-radius:0 0 50% 50%/0 0 100% 100%;
  background:linear-gradient(#5C5E61,#2C2E30);box-shadow:0 1px 3px rgba(0,0,0,.55)}
/* the lump of solder someone added to the tails face */
.hh-bclump{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:60%;height:30%;
  border-radius:50%;background:radial-gradient(ellipse at 42% 30%, #6D6F72 0%, #45474A 60%, #2C2E30 100%);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.4)}
/* the rim is thicker along one edge, so it reads as bent even at rest */
.hh-bcrim{position:absolute;left:12%;width:76%;height:25px;bottom:-5px;
  border-radius:0 0 60% 60%/0 0 100% 100%;transform:rotateX(90deg) translateZ(5px);
  background:linear-gradient(#5C5E61,#26282A);box-shadow:0 3px 8px rgba(0,0,0,.5)}
.hh-bcshadow{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:150px;height:22px;
  border-radius:50%;background:rgba(31,42,55,.26);filter:blur(3px)}
.hh-bcprofile{align-self:flex-end;padding-bottom:10px;border-top:0;margin-top:0;padding-top:0}
.hh-bcprofile.hh-on{display:block}
.hh-bccap{font-size:.86rem;color:var(--hh-ink-soft);margin:0;max-width:34ch}

/* ---------- 100 coins ---------- */
.hh-coingrid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;
  max-width:430px;margin:4px 0 14px;perspective:900px}
.hh-c{position:relative;aspect-ratio:1;transform-style:preserve-3d;will-change:transform}
.hh-cf{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;display:grid;place-items:center;
  font-family:var(--hh-ui);font-weight:700;font-size:clamp(9px,1.6vw,13px);color:#5E4318;
  background:radial-gradient(circle at 34% 30%, #D8AE63 0%, #B0843C 58%, #8A6526 100%);
  border:1px solid #7A5A20;box-shadow:inset 0 0 0 2px rgba(122,90,32,.35)}
.hh-cf.hh-cf-t{transform:rotateY(180deg);
  background:radial-gradient(circle at 34% 30%, #CDA55C 0%, #A87C35 60%, #7E5B21 100%)}
.hh-c.hh-landed .hh-cf{box-shadow:inset 0 0 0 2px rgba(122,90,32,.35), 0 2px 5px rgba(31,42,55,.22)}
@keyframes hh-tossFair{
  0%{transform:translateY(0) rotateY(0deg) scale(1)}
  18%{transform:translateY(-58px) rotateY(calc(var(--hh-sp)*.28)) scale(1.05)}
  70%{transform:translateY(-16px) rotateY(calc(var(--hh-sp)*.82)) scale(1)}
  90%{transform:translateY(0) rotateY(var(--hh-sp)) scaleY(.86) scaleX(1.1)}
  100%{transform:translateY(0) rotateY(var(--hh-sp)) scale(1)}
}
/* the weighted coin: lopsided mass, so it flops rather than spins and settles tilted */
@keyframes hh-tossWeighted{
  0%{transform:translateY(0) rotateY(0deg) rotateZ(0deg) scale(1)}
  16%{transform:translateY(-30px) rotateY(calc(var(--hh-sp)*.45)) rotateZ(-14deg) scale(1.03)}
  52%{transform:translateY(-8px) rotateY(var(--hh-sp)) rotateZ(10deg) scale(1)}
  70%{transform:translateY(0) rotateY(var(--hh-sp)) rotateZ(-9deg) scaleY(.82) scaleX(1.14)}
  82%{transform:translateY(-5px) rotateY(var(--hh-sp)) rotateZ(7deg) scale(1)}
  92%{transform:translateY(0) rotateY(var(--hh-sp)) rotateZ(-5deg) scaleY(.94) scaleX(1.04)}
  100%{transform:translateY(0) rotateY(var(--hh-sp)) rotateZ(var(--hh-tilt)) scale(1)}
}
.hh-c.hh-go{animation:hh-tossFair var(--hh-dur) cubic-bezier(.28,.7,.3,1) var(--hh-d) both}
.hh-coingrid.hh-wt .hh-c.hh-go{animation-name:hh-tossWeighted}
.hh-coingrid.hh-wt .hh-cf{border-width:1px 1px 4px 1px;border-bottom-color:#4A3410}
.hh-coingrid.hh-wt .hh-cf::after{content:"";position:absolute;bottom:8%;left:50%;transform:translateX(-50%);
  width:46%;height:22%;border-radius:50%;background:rgba(74,52,16,.55)}
@media (prefers-reduced-motion:reduce){.hh-c.hh-go{animation:none}}
.hh-coincount{font-size:.9rem;color:var(--hh-ink-soft);font-variant-numeric:tabular-nums;margin:0 0 4px}
.hh-coincount b{color:var(--hh-ink)}

/* ---------- case timeline ---------- */
.hh-cases{margin:26px 0 0;border-top:1px solid var(--hh-rule)}
.hh-cases details{border-bottom:1px solid var(--hh-rule)}
.hh-cases summary{padding:14px 0;cursor:pointer;display:flex;gap:14px;align-items:baseline;
  flex-wrap:wrap;list-style:none}
.hh-cases summary::-webkit-details-marker{display:none}
.hh-cases summary::after{content:"+";margin-left:auto;color:var(--hh-accent-deep);font-weight:700}
.hh-cases details[open] summary::after{content:"\2013"}
.hh-cases summary:hover .hh-cname{border-bottom-color:var(--hh-accent)}
.hh-cases summary:focus-visible{outline:2px solid var(--hh-accent);outline-offset:3px}
.hh-cyear{font-variant-numeric:tabular-nums;color:var(--hh-ink-soft);font-size:.9rem;min-width:66px}
.hh-cname{font-family:var(--hh-story);font-size:1.05rem;font-weight:600;border-bottom:1px solid transparent}
.hh-tag{font-size:.76rem;padding:3px 8px;border-radius:4px;border:1px solid;white-space:nowrap}
.hh-tag.hh-fab{color:var(--hh-fail);border-color:rgba(214,71,71,.42);background:rgba(214,71,71,.07)}
.hh-tag.hh-leak{color:#9a6b16;border-color:rgba(176,132,60,.55);background:rgba(176,132,60,.1)}
.hh-tag.hh-flex{color:#6d4aa8;border-color:rgba(109,74,168,.42);background:rgba(109,74,168,.07)}
.hh-tag.hh-thin{color:var(--hh-ink-soft);border-color:var(--hh-rule);background:var(--hh-paper-2)}
.hh-tag.hh-fix{color:var(--hh-pass);border-color:rgba(47,157,88,.42);background:rgba(47,157,88,.08)}
.hh-cases .hh-body{padding:0 0 18px;max-width:64ch;font-size:.97rem;color:var(--hh-ink-soft)}
.hh-cases .hh-body strong{color:var(--hh-ink)}
.hh-legend{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0;font-size:.9rem;
  color:var(--hh-ink-soft);align-items:center}

/* ---------- forking paths ---------- */
.hh-forks{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:20px 24px;margin:6px 0 20px}
.hh-fork .hh-flab{font-size:.86rem;font-weight:700;color:var(--hh-ink);display:block;margin-bottom:2px}
.hh-fork .hh-fwhy{display:block;font-size:.78rem;line-height:1.35;color:var(--hh-ink-soft);margin-bottom:8px}
.hh-fork .hh-choices button{font-size:.88rem;padding:6px 11px}
/* the forking-paths panel needs its brief stated before the controls, or the
   toggles read as arbitrary — which is exactly how it failed in a lecture */
.hh-spec-task{background:var(--hh-paper-2);border-left:3px solid var(--hh-accent);
  padding:14px 18px;margin:0 0 20px;border-radius:0 6px 6px 0;font-size:.95rem;
  line-height:1.55;max-width:74ch}
.hh-spec-plain{margin:4px 0 0;font-size:1rem;line-height:1.5;max-width:70ch}
.hh-spec-plain b{color:var(--hh-ink)}
.hh-spec-readout div{min-width:150px}
.hh-specwrap{position:relative;margin:18px 0 6px;padding:0 0 0 126px}
.hh-specplot{position:relative;height:150px}
.hh-specstrip{display:flex;gap:2px;align-items:flex-end;height:150px;
  border-bottom:2px solid var(--hh-ink);position:relative;z-index:2}
.hh-specgrid{position:absolute;left:0;right:0;border-top:1px solid var(--hh-rule);z-index:1;pointer-events:none}
.hh-specgrid.hh-cut{border-top:2px dashed var(--hh-fail)}
.hh-specgrid b{position:absolute;left:-126px;width:116px;text-align:right;top:-11px;font-size:.78rem;
  font-weight:400;color:var(--hh-ink-soft);font-variant-numeric:tabular-nums}
.hh-specgrid.hh-cut b{color:var(--hh-fail);font-weight:700}
.hh-specytitle{position:absolute;left:-126px;top:-30px;width:250px;font-size:.8rem;font-weight:700;color:var(--hh-ink)}
.hh-specxtitle{margin:8px 0 0;font-size:.8rem;font-weight:700;color:var(--hh-ink);text-align:center}
.hh-specxsub{margin:2px 0 0;font-size:.78rem;color:var(--hh-ink-soft);text-align:center}
.hh-specstrip .hh-bar{flex:1;background:var(--hh-ink-soft);min-width:4px;position:relative}
.hh-specstrip .hh-bar.hh-sig{background:var(--hh-fail)}
.hh-specstrip .hh-bar.hh-cur{outline:2px solid var(--hh-accent);outline-offset:1px}

.hh-closer{font-family:var(--hh-story);font-size:1.18rem;line-height:1.5;max-width:54ch;
  margin:44px 0 0;padding-left:18px;border-left:3px solid var(--hh-accent)}
.hh-lesson-footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--hh-rule);
  font-size:.85rem;color:var(--hh-ink-soft)}

@media (max-width:640px){
  .hh-hero{grid-template-columns:1fr}
  .hh-coin-stage{width:110px;height:110px;justify-self:start}
  .hh-coin{width:88px;height:88px}
  .hh-readout{gap:18px}
  .hh-map th{width:auto}
  .hh-specwrap{padding-left:96px}
  .hh-specgrid b,.hh-specytitle{left:-96px;width:88px}
}

/* The seed card sits OUTSIDE .hh-lesson, so the lesson's button styling cannot
   reach the shared SeedControl widget. Collapsed by default: opening the page
   on a seed input was a confusing first thing to meet in a lecture. */
.hh-advanced > summary{cursor:pointer;font-weight:600;color:#1f2a37;padding:2px 0;list-style:none}
.hh-advanced > summary::-webkit-details-marker{display:none}
.hh-advanced > summary::before{content:"\25B8";display:inline-block;width:1em;color:#5f6b7a;transition:transform .15s}
.hh-advanced[open] > summary::before{transform:rotate(90deg)}
.hh-advanced > summary:focus-visible{outline:2px solid #2a7de1;outline-offset:3px;border-radius:3px}
.hh-advanced p{margin:12px 0;color:#5f6b7a;font-size:.93rem;line-height:1.55;max-width:74ch}