:root{--bg:#FAF0DB;--gold:#F2BE45;--amber:#DE8F0A;--bronze:#8A5514;--ink:#38220D;
      --card:#FFFBF2;--rule:#E4D2AC;--hl:#F7EBD2;--on-ink:#fff;color-scheme:light dark}
/* A real dark theme, because without one Samsung Internet and Chrome force-darken the
   page themselves — and they recolour the charts too, which scrambles the data: the
   births calendar's scale went from near-black to black. Declaring our own dark theme is
   what makes a browser leave the page alone. The chart panel (.frame) deliberately stays
   light paper in both themes: every ramp ends near black, and on a dark panel the top of
   the scale would vanish into the background. */
@media (prefers-color-scheme:dark){
  :root{--bg:#16110B;--card:#211A12;--rule:#3B3024;--ink:#F2E4C8;--bronze:#C8A57A;
        --hl:#2D2317;--on-ink:#16110B}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,sans-serif}
.wrap{max-width:820px;margin:0 auto;padding:0 16px 70px}
h1{font-size:2.3rem;margin:38px 0 4px;letter-spacing:-.02em}
.lede{color:var(--bronze);max-width:560px;margin:.4em 0}
.date{color:var(--bronze);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin:18px 0 0}
.round{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:16px;margin:18px 0}
.metric{font-size:1.22rem;font-weight:600;line-height:1.25}
.ask{color:var(--bronze);margin-top:2px}
.ask b{color:var(--accent,var(--amber))}
.frame{margin-top:12px;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:#F7EFDC;position:relative;cursor:zoom-in}
/* Tap-to-enlarge. The button is only a hint that the chart can be tapped; the whole
   frame opens it. The enlarged chart pans inside .zoom-pan, the controls stay docked. */
.frame .expand{position:absolute;right:6px;bottom:6px;width:30px;height:30px;padding:0;
  border:1px solid var(--rule);border-radius:8px;background:rgba(255,251,242,.88);
  color:#38220D;font-size:17px;line-height:1;cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
.zoom-top{display:flex;align-items:center;gap:10px;padding:10px 16px}
.zoom-ask{flex:1;font-weight:600;line-height:1.3}
.zoom-ask b{color:var(--accent,var(--amber))}
.zoom-x{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);
  background:var(--card);color:var(--ink);font-size:18px;cursor:pointer}
.zoom-pan{flex:1;min-height:0;overflow:auto;display:flex;background:#F7EFDC;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.zoom-pan svg.plot{flex:none;margin:auto;height:auto}
.tip{position:fixed;z-index:70;pointer-events:none;transform:translate(-50%,calc(-100% - 14px));
  background:var(--ink);color:var(--bg);padding:5px 10px;border-radius:9px;font-size:.86rem;
  white-space:nowrap;opacity:0;transition:opacity .12s}
.tip.on{opacity:1}
.tip span{opacity:.8;margin-left:4px;font-variant-numeric:tabular-nums}
.zoom-dock{padding:4px 16px calc(14px + env(safe-area-inset-bottom))}
svg.plot{width:100%;height:auto;display:block}
.legend{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:.74rem;color:var(--bronze)}
.legend .bar{flex:1;display:flex;height:9px;border-radius:5px;overflow:hidden}
.legend .bar i{flex:1}
/* One line, always. The readout used to wrap under the slider once a value reached three
   digits, which moved the slider out from under the player's thumb mid-drag. The number
   now has a fixed-width slot with tabular figures, and shrinks rather than wraps. */
.control{margin-top:14px;display:flex;gap:12px;align-items:center;flex-wrap:nowrap}
.control input[type=range]{flex:1 1 auto;min-width:0;height:26px;
  accent-color:var(--thumb,var(--accent,var(--amber)))}
.readout{flex:none;min-width:6.2ch;text-align:right;white-space:nowrap}
/* The thumb wears the live guess colour; the number does not — at the pale end of a ramp
   it was pale yellow on cream and unreadable. It keeps the round's strong accent. */
.readout b{font-size:clamp(1.05rem,5vw,1.5rem);color:var(--accent,var(--amber));
  font-variant-numeric:tabular-nums}
button.primary{margin-top:12px;font:inherit;font-weight:600;cursor:pointer;
  border:1px solid var(--accent,var(--amber));background:var(--accent,var(--amber));color:#fff;border-radius:10px;padding:11px 20px}
button:disabled{opacity:.45;cursor:default}
.result{display:none;margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
.result.show{display:block}
/* The reveal fades up rather than appearing, so it reads as a consequence of the slider
   moving rather than as the page reflowing under you. */
.result.show{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.result.show.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.result.show{transition:none}}
.score{display:flex;align-items:baseline;gap:4px;color:var(--bronze);font-size:.9rem}
.score b{font-size:2rem;color:var(--accent,var(--amber));line-height:1}
.gap{color:var(--bronze);font-size:.92rem;margin-top:2px}
.derived{margin:12px 0 0;font-size:.94rem;line-height:1.5}
.fact{margin:8px 0 0;font-size:.94rem;line-height:1.5;color:var(--bronze);
  border-left:3px solid var(--accent,var(--gold));padding-left:11px}
table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.9rem}
td{padding:6px 8px;border-bottom:1px dotted var(--rule)}
td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
tr.hl td{background:var(--hl)}
.src{font-size:.76rem;color:var(--bronze);margin-top:8px}
footer{margin-top:36px;font-size:.84rem;color:var(--bronze)}

/* ---- page furniture ---- */
header.top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
header.top h1{margin-bottom:0}
header.top nav a{color:var(--bronze);font-size:.9rem;margin-left:14px}
details.how{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:10px 14px;margin:16px 0 0}
details.how summary{cursor:pointer;font-weight:600}
details.how ol{margin:8px 0 4px;padding-left:20px}
details.how li{margin:4px 0}
.share{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:16px;margin:18px 0}
.share-head{font-weight:600;font-size:1.1rem}
.share pre.card{font:1.05rem/1.5 system-ui,sans-serif;white-space:pre-wrap;margin:8px 0 0}
.share button.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.share .note{margin-left:12px;font-size:.88rem;color:var(--bronze)}
footer a{color:var(--bronze)}
footer p{margin:.4em 0}
.page h2{margin-top:32px;font-size:1.2rem}
.page li{margin:6px 0}
.page .fine{font-size:.85rem;color:var(--bronze)}

/* ---- screens ---- */
.screen{display:none}
.screen.on{display:block;animation:rise .35s ease}
/* No fill-mode: a finished animation that keeps applying its last frame still makes the
   screen its own stacking layer, and the bees then flew over every card on it. */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slidein{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.round.enter{animation:slidein .4s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.screen.on,.round.enter{animation:none}}

/* start */
.start{text-align:center;padding-top:34px}
.logo{display:flex;gap:6px;justify-content:center;align-items:flex-end;height:46px}
.logo i{width:14px;border-radius:3px;animation:grow .7s cubic-bezier(.2,.9,.3,1.3) both}
.logo i:nth-child(1){background:#DE8F0A;height:28px;animation-delay:.05s}
.logo i:nth-child(2){background:#2A7CB8;height:44px;animation-delay:.15s}
.logo i:nth-child(3){background:#8652AC;height:20px;animation-delay:.25s}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
h1.title{font-size:2.8rem;margin:10px 0 0;letter-spacing:-.03em}
.tag{color:var(--bronze);margin:2px 0 18px;font-size:1.05rem}
.showcase .frame{max-width:560px;margin:0 auto}
.showcase svg{opacity:0;transition:opacity .25s ease}
.showcase svg.in{opacity:1}
.showcase .cap{font:600 .72rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze);margin-top:8px;min-height:1em}
.pitch{max-width:470px;margin:14px auto 18px;color:var(--ink)}
button.big{font-size:1.15rem;padding:14px 44px;border-radius:12px;margin-top:4px}
#start button.big{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.meta{display:flex;gap:14px;justify-content:center;margin-top:10px;font-size:.84rem;color:var(--bronze)}
.days{display:flex;gap:6px;overflow-x:auto;margin:18px -16px 0;padding:2px 16px 6px;
  scrollbar-width:none;justify-content:safe center}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;font:inherit;cursor:pointer;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:10px;padding:6px 0;width:48px;display:flex;
  flex-direction:column;align-items:center;line-height:1.15}
.day span{font-size:.68rem;color:var(--bronze)}
.day b{font-size:1.05rem}
.day i{font-style:normal;font-size:.62rem;color:var(--bronze);min-height:.8rem}
.day.done{background:var(--hl)}
.day.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.start details.how{text-align:left;max-width:560px;margin:22px auto 0}
.start footer{text-align:center}

/* game */
.bar-top{display:flex;align-items:center;gap:12px;padding:14px 0 4px}
.bar-top .brand{margin-left:auto;font-weight:700;letter-spacing:-.01em}
button.icon{font:600 1.5rem/1 system-ui;background:none;border:0;color:var(--ink);cursor:pointer;
  padding:4px 10px 6px 0}
.progress{display:flex;align-items:center;gap:10px;font:600 .72rem/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.pips{display:flex;gap:5px}
.pips i{width:22px;height:8px;border-radius:3px;border:1.5px solid var(--c);display:block}
.pips i.full{background:var(--c)}
.pips i.now{background:linear-gradient(90deg,var(--c) 40%,transparent 40%)}
#stage .round{margin-top:10px}
button.next{display:block;width:100%;margin-top:16px}

/* reveal voice */
.verdict{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.react{font-size:1.05rem;font-style:italic}
.readout-line{font:600 .7rem/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;
  color:var(--bronze);margin-top:6px}
.readout-line .kind{color:var(--accent,var(--amber))}
.why{margin-top:14px}
.why-h{font:700 .74rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent,var(--amber))}
.why .fact{margin-top:6px}

/* results */
.results{text-align:center;padding:10px 0 30px}
.res-head{font:600 .7rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;color:var(--bronze)}
.res-title{margin-top:14px;color:var(--bronze)}
.res-total{font-size:1rem;color:var(--bronze);margin-top:4px}
.res-total b{font-size:3.2rem;color:var(--ink);letter-spacing:-.02em}
.res-cal{font-style:italic;margin-top:2px}
.res-rows{margin:20px auto 0;max-width:520px;text-align:left}
.res-row{display:grid;grid-template-columns:2rem 1fr auto;gap:2px 10px;align-items:baseline;
  padding:10px 12px;border-left:4px solid var(--accent);background:var(--card);border-radius:8px;margin:8px 0}
.res-row .lab{font-size:.9rem}
.res-row b{font-size:1.2rem;color:var(--accent)}
.res-row .vs{grid-column:2 / 4;font:600 .68rem/1.5 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bronze)}
.res-row em{grid-column:2 / 4;font-size:.86rem;color:var(--bronze)}
.results pre.card{font:1.05rem/1.5 system-ui,sans-serif;white-space:pre-wrap;margin:22px auto 12px;
  display:inline-block;text-align:left;background:var(--card);border:1px solid var(--rule);
  border-radius:12px;padding:12px 16px}
.results button.big{display:block;margin:0 auto;background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.results .note{display:block;margin-top:8px;font-size:.88rem;color:var(--bronze)}
.countdown{margin-top:22px;font:600 .72rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.16em;color:var(--bronze)}

/* The blank before any guess: hatched, with a slow pulse on its outline. */
.pending{stroke:#0B7A45;animation:pend 1.1s ease-in-out infinite}
@keyframes pend{0%,100%{stroke-width:1.8px;stroke-opacity:1}50%{stroke-width:4.2px;stroke-opacity:.55}}
@media (prefers-reduced-motion:reduce){.pending{animation:none;stroke-width:3px}}
.readout b.q{color:#0E8F4E}

/* What the chart is, above what it measures. */
.kicker{font:700 .72rem/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent,var(--amber));margin-bottom:4px}
button.ghost{margin-top:16px;font:600 .9rem/1 system-ui,sans-serif;background:none;color:var(--ink);
  border:1.5px dashed var(--rule);border-radius:10px;padding:10px 18px;cursor:pointer}

/* beta feedback */
.fb{margin-top:14px;padding:10px 12px;border:1.5px dashed var(--rule);border-radius:10px}
.fb-q{font-size:.86rem;font-weight:600}
.fb-row{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.fb-row button{font:inherit;cursor:pointer;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:8px;padding:6px 10px}
.fb-row button.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.fb-row input{flex:1 1 140px;min-width:0;font:inherit;padding:6px 8px;border-radius:8px;
  border:1px solid var(--rule);background:var(--card);color:var(--ink)}
.fb-note{font-size:.82rem;color:var(--bronze);margin-top:4px;min-height:1em}
/* Review mode (beta): quick-tap tags, a nav strip above each puzzle, and a jump list. */
.fb-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fb-tags button{font:inherit;font-size:.8rem;cursor:pointer;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:999px;padding:4px 11px}
.fb-tags button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rev-nav{display:flex;align-items:center;gap:6px;margin:0 0 10px;flex-wrap:wrap}
.rev-nav button{font:inherit;font-size:.85rem;cursor:pointer;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:9px;padding:6px 11px}
.rev-nav button.mid{font-weight:600}
.rev-count{margin-left:auto;font-size:.8rem;color:var(--bronze)}
.rev-list{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:8px 14px 14px}
.rev-h{font-weight:700;margin:14px 0 4px}
.rev-row{display:block;width:100%;text-align:left;font:inherit;font-size:.9rem;cursor:pointer;
  background:none;color:var(--ink);border:0;border-bottom:1px solid var(--rule);padding:7px 2px}
.rev-row.done{color:var(--bronze)}