/* ───────────────────────────────────────────────────────────────
   PATHWAYS
   The palette is the chart's own four printing inks. Blue is always
   an enzyme. Orange is always a pathway. Red is inhibition or a wrong
   answer. Green is activation or a right one. Learn the interface,
   learn the legend.
   ─────────────────────────────────────────────────────────────── */

:root{
  /* the four inks, sampled from the poster's vector fills */
  --ink:        #231f21;
  --enzyme:     #104c8f;
  --pathway:    #f25e21;
  --inhibit:    #f0454d;
  --activate:   #00a654;

  /* the plan chest: a deep slate pulled from the chart's blue */
  --chest-900:  #0b1522;
  --chest-800:  #0f1d2e;
  --chest-700:  #16293f;
  --chest-600:  #1f334d;
  --chest-line: #24384f;
  --chest-text: #c3d2e2;
  --chest-dim:  #7f93a9;

  /* paper */
  --paper:      #fbfaf7;
  --paper-2:    #f2efe8;
  --paper-line: #ddd8cc;

  --shadow-sheet: 0 2px 60px rgba(7,16,27,.42);
  --rail-h: 54px;
  --strip-h: 30px;
  --chest-w: 272px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; overflow:hidden;
  background:var(--chest-900);
  color:var(--chest-text);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible{ outline:2px solid var(--pathway); outline-offset:2px; border-radius:2px }
::selection{ background:var(--pathway); color:#fff }

.mono{ font-family:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace }

/* ── the chart ───────────────────────────────────────────────── */
#map{
  position:fixed; inset:var(--rail-h) 0 var(--strip-h) 0;
  background:#e9e6df;
  z-index:1;
}
.leaflet-container{ background:#e9e6df; font-family:inherit }
.leaflet-control-attribution{ display:none }
.leaflet-control-zoom{ border:0!important; margin:14px!important; box-shadow:none!important }
.leaflet-control-zoom a{
  width:30px; height:30px; line-height:28px;
  background:var(--chest-800); color:var(--chest-text);
  border:1px solid var(--chest-line)!important; border-radius:0!important;
  font-weight:500;
}
.leaflet-control-zoom a:hover{ background:var(--chest-700); color:#fff }
.leaflet-control-zoom a:first-child{ border-bottom:0!important }

/* faint base layer + full-colour layer clipped to what you have mastered */
.pane-faint{ filter:grayscale(.88) opacity(.6) contrast(.92) }
.pane-lit{ transition:clip-path .55s var(--ease) }
body.ink-off .pane-faint{ filter:none }
body.ink-off .pane-lit{ display:none }

#vignette{
  position:fixed; inset:var(--rail-h) 0 var(--strip-h) 0; z-index:2;
  pointer-events:none;
  box-shadow:inset 0 0 120px rgba(11,21,34,.38), inset 0 0 36px rgba(11,21,34,.22);
}

/* ── top rail ────────────────────────────────────────────────── */
.rail{
  position:fixed; top:0; left:0; right:0; height:var(--rail-h); z-index:40;
  display:flex; align-items:center; gap:18px; padding:0 14px 0 12px;
  background:var(--chest-900);
  border-bottom:1px solid var(--chest-line);
}
.mark{ display:flex; align-items:center; gap:9px; padding:6px 4px }
.mark-glyph{
  width:15px; height:15px; flex:none; position:relative;
  border:2px solid var(--pathway);
}
.mark-glyph::after{
  content:''; position:absolute; inset:3px 3px auto auto;
  width:5px; height:5px; background:var(--pathway);
}
.mark-word{
  font-size:15px; font-weight:800; font-stretch:118%;
  letter-spacing:.14em; text-transform:uppercase; color:#eaf1f8;
}
.mark:hover .mark-word{ color:#fff }

.search{ position:relative; flex:1; max-width:430px }
.search input{
  width:100%; height:32px; padding:0 34px 0 11px;
  background:var(--chest-800); color:var(--chest-text);
  border:1px solid var(--chest-line); border-radius:0;
  font-size:13px; font-family:inherit;
}
.search input::placeholder{ color:#5f7490 }
.search input:focus{ outline:none; border-color:var(--enzyme); background:#0d1b2b }
.slashkey{
  position:absolute; right:8px; top:7px; pointer-events:none;
  font-family:'Plex Mono',monospace; font-size:11px; color:#566982; border:1px solid var(--chest-line); padding:1px 5px;
}
.search input:focus ~ .slashkey{ opacity:0 }
.results{
  position:absolute; top:36px; left:0; right:0; max-height:52vh; overflow-y:auto;
  margin:0; padding:4px 0; list-style:none; z-index:50;
  background:var(--chest-800); border:1px solid var(--chest-line);
  box-shadow:0 18px 44px rgba(5,11,19,.55);
}
.results li{
  display:flex; align-items:baseline; gap:10px; padding:6px 11px;
  font-size:13px; cursor:pointer;
}
.results li[aria-selected=true],.results li:hover{ background:var(--chest-700); color:#fff }
.results .r-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.results .r-sq{ font-family:'Plex Mono',monospace; font-size:11px; color:var(--pathway) }
.results .r-kind{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--chest-dim) }

.rail-right{ display:flex; align-items:center; gap:14px; margin-left:auto }
.tab{
  position:relative; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; color:var(--chest-dim); padding:7px 2px;
}
.tab:hover{ color:#fff }
.due[hidden]{ display:none }
.due{
  display:inline-grid; place-items:center; vertical-align:2px; margin-left:6px;
  min-width:17px; height:16px; padding:0 4px;
  background:var(--pathway); color:#fff;
  font-family:'Plex Mono',monospace; font-size:10px; font-weight:600;
}
.score{ display:flex; align-items:baseline; gap:5px }
.score-num{ font-family:'Plex Mono',monospace; font-size:15px; font-weight:600; color:#eaf1f8 }
.score-lab{ font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--chest-dim) }
.icon{
  width:28px; height:28px; display:grid; place-items:center;
  border:1px solid var(--chest-line); color:var(--chest-dim); font-size:13px;
}
.icon:hover{ color:#fff; border-color:var(--chest-dim) }
.icon[aria-pressed=false]{ color:#44566d; text-decoration:line-through }

/* ── plan chest ──────────────────────────────────────────────── */
.chest{
  position:fixed; top:var(--rail-h); bottom:var(--strip-h); left:0; width:var(--chest-w);
  z-index:30; display:flex; flex-direction:column;
  background:var(--chest-900);
  border-right:1px solid var(--chest-line);
  transition:transform .4s var(--ease);
}
body.chest-shut .chest{ transform:translateX(calc(var(--chest-w) * -1 + 36px)) }
body.chest-shut .chest-body,body.chest-shut .chest-filter,body.chest-shut .chest-head h2{ opacity:0; pointer-events:none }
body.chest-shut .chest-toggle{ transform:rotate(180deg) }
.chest-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 7px 10px 14px;
}
.chest-head h2{
  margin:0; font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--chest-dim); transition:opacity .2s;
}
.chest-toggle{
  width:22px; height:22px; z-index:1; display:grid; place-items:center; flex:none;
  color:var(--chest-dim); font-size:15px; transition:transform .4s var(--ease);
}
.chest-toggle:hover{ color:#fff }
.chest-filter{ display:flex; flex-wrap:wrap; gap:4px; padding:0 10px 10px 14px; transition:opacity .2s }
.chip{
  font-size:10px; letter-spacing:.07em; text-transform:uppercase; font-weight:600;
  padding:3px 7px; color:var(--chest-dim); border:1px solid transparent;
}
.chip:hover{ color:#fff }
.chip.is-on{ color:var(--paper); border-color:var(--chest-line); background:var(--chest-700) }
.chest-body{ flex:1; overflow-y:auto; padding:0 6px 20px; transition:opacity .2s }
.chest-body::-webkit-scrollbar{ width:9px }
.chest-body::-webkit-scrollbar-thumb{ background:#1c3049; border:3px solid var(--chest-900) }

.region{ margin-bottom:4px }
.region-h{
  display:flex; align-items:center; gap:7px; width:100%; padding:7px 8px;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--chest-dim);
}
.region-h:hover{ color:#fff }
.region-h .caret{ font-size:9px; transition:transform .25s var(--ease) }
.region.shut .caret{ transform:rotate(-90deg) }
.region.shut .region-list{ display:none }
.region-h .region-n{ margin-left:auto; font-family:'Plex Mono',monospace; font-size:10px; color:#4e617a }
.region-list{ list-style:none; margin:0 0 6px; padding:0 }

.lv{
  display:flex; align-items:center; gap:8px; width:100%; padding:6px 9px;
  font-size:13px; text-align:left; color:#b4c5d7; line-height:1.25;
  border-left:2px solid transparent;
}
.lv:hover{ background:var(--chest-800); color:#fff }
.lv.is-open{ background:var(--chest-700); color:#fff; border-left-color:var(--pathway) }
.lv-name{ flex:1; min-width:0 }
.lv-sq{ font-family:'Plex Mono',monospace; font-size:10px; color:#4e617a; flex:none }
.lv.is-open .lv-sq{ color:var(--pathway) }
.pips{ display:flex; gap:2px; flex:none }
.pip{ width:5px; height:5px; background:#2a3f59; transform:rotate(45deg) }
.pip.on{ background:var(--pathway) }

/* ── status strip ────────────────────────────────────────────── */
.strip{
  position:fixed; left:0; right:0; bottom:0; height:var(--strip-h); z-index:40;
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--chest-900); border-top:1px solid var(--chest-line);
  font-family:'Plex Mono',monospace; font-size:11px; color:var(--chest-dim);
}
.strip-sq{ color:var(--pathway); min-width:28px }
.strip-grow{ flex:1 }
.strip-btn{
  font-family:inherit; font-size:11px; color:var(--chest-dim);
  border:1px solid var(--chest-line); padding:2px 8px;
}
.strip-btn:hover{ color:#fff; border-color:var(--chest-dim) }
.strip-btn[aria-pressed=true]{ color:var(--pathway); border-color:#3a2a22; background:#1a1109 }

/* ── map pins ────────────────────────────────────────────────── */
.pin{
  position:relative; width:18px; height:18px; cursor:pointer;
  display:grid; place-items:center;
}
.pin i{
  width:9px; height:9px; background:#8d9bab; transform:rotate(45deg);
  box-shadow:0 0 0 2px rgba(251,250,247,.9);
  transition:background .2s, transform .2s var(--ease);
}
.pin.seen i{ background:var(--enzyme) }
.pin.done i{ background:var(--pathway) }
.pin:hover i{ transform:rotate(45deg) scale(1.5) }
.pin.is-open i{ background:var(--pathway); transform:rotate(45deg) scale(1.5) }
.pin.is-open::after{
  content:''; position:absolute; inset:-9px; border:1.5px solid var(--pathway);
  border-radius:50%; animation:ping 1.9s var(--ease) infinite;
}
@keyframes ping{ 0%{transform:scale(.55);opacity:.95} 100%{transform:scale(1.5);opacity:0} }
.pin-label{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  white-space:nowrap; pointer-events:none; opacity:0;
  background:rgba(11,21,34,.93); color:#fff; padding:3px 7px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  transition:opacity .18s;
}
.pin:hover .pin-label,.pin.is-open .pin-label{ opacity:1 }

.hit{ border:2px solid var(--pathway); background:rgba(242,94,33,.1) }
.hit-right{ border-color:var(--activate); background:rgba(0,166,84,.14) }
.hit-wrong{ border-color:var(--inhibit); background:rgba(240,69,77,.14) }

/* ── level sheet ─────────────────────────────────────────────── */
.sheet{
  position:fixed; top:var(--rail-h); bottom:var(--strip-h); right:0; z-index:35;
  width:min(520px,46vw);
  background:var(--paper); color:var(--ink);
  border-left:1px solid #c9c3b4; box-shadow:var(--shadow-sheet);
  transform:translateX(102%); transition:transform .46s var(--ease),width .46s var(--ease);
  display:flex; flex-direction:column;
}
body.sheet-open .sheet{ transform:none }
body.sheet-wide .sheet{ width:min(860px,72vw) }
.sheet-inner{ flex:1; overflow-y:auto; overscroll-behavior:contain }
.sheet-inner::-webkit-scrollbar{ width:10px }
.sheet-inner::-webkit-scrollbar-thumb{ background:#d3cdbe; border:3px solid var(--paper) }

.sh-head{ padding:20px 26px 16px; border-bottom:1px solid var(--paper-line); position:relative }
.sh-close{
  position:absolute; top:14px; right:16px; width:26px; height:26px;
  display:grid; place-items:center; color:#8a8375; font-size:17px;
}
.sh-close:hover{ color:var(--ink) }
.sh-eyebrow{
  display:flex; align-items:center; gap:9px; margin-bottom:9px;
  font-family:'Plex Mono',monospace; font-size:11px; color:#8a8375;
}
.sh-sq{ color:var(--pathway); font-weight:600 }
.sh-dot{ color:#bdb6a6 }
.sh-title{
  margin:0 56px 7px 0; font-size:clamp(23px,2.6vw,31px); line-height:1.02;
  font-weight:800; font-stretch:112%; letter-spacing:-.016em; text-transform:uppercase;
}
.sh-tag{ margin:0; font-size:15px; line-height:1.45; color:#59534a; font-style:italic }

.sh-body{ padding:18px 26px 40px }
.sh-sect{ margin-bottom:26px }
.sh-lab{
  margin:0 0 8px; font-size:10px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:#938b7c;
  display:flex; align-items:center; gap:8px;
}
.sh-lab::after{ content:''; flex:1; height:1px; background:var(--paper-line) }
.sh-p{ margin:0 0 11px; font-size:14.5px; line-height:1.6; color:#2e2a25 }
.sh-p b{ font-weight:700 }

.io{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px }
.io-col{ flex:1; min-width:150px }
.io-col h4{
  margin:0 0 6px; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:#938b7c; font-weight:700;
}
.io-list{ display:flex; flex-wrap:wrap; gap:5px }
.io-arrow{ color:var(--pathway); font-size:19px; flex:none }

/* chart grammar: compound boxes, enzyme labels, reaction arrows */
.cbox{
  display:inline-block; padding:3px 7px; background:var(--paper);
  border:1.5px solid var(--ink); font-size:11.5px; font-weight:600;
  font-stretch:82%; letter-spacing:.035em; text-transform:uppercase; line-height:1.15;
}
.cbox.round{ border-radius:11px }
.cbox.sm{ font-size:10.5px; padding:2px 6px }
.cbox.co{ border-color:var(--inhibit); color:var(--inhibit); border-width:1px; text-transform:none; font-stretch:92% }
.cbox.lit{ border-color:var(--pathway); color:var(--pathway); box-shadow:0 0 0 3px rgba(242,94,33,.13) }

.chain{ margin:0; padding:0; list-style:none }
.rx{
  display:grid; grid-template-columns:30px 1fr; gap:0 13px;
  opacity:.26; transition:opacity .4s var(--ease);
}
.rx.shown{ opacity:1 }
.rx.cur .rx-n{ background:var(--pathway); color:#fff; border-color:var(--pathway) }
.rx-n{
  grid-column:1; width:24px; height:24px; display:grid; place-items:center;
  border:1.5px solid #c3bcab; color:#938b7c;
  font-family:'Plex Mono',monospace; font-size:11px; font-weight:600;
}
.rx-rail{ grid-column:1; justify-self:center; width:1.5px; background:#d7d1c2; min-height:16px }
.rx.key .rx-n{ border-color:var(--pathway); color:var(--pathway) }
.rx-body{ grid-column:2; padding-bottom:4px }
.rx-enz{
  display:block; margin:2px 0 4px; font-size:12px; font-weight:700;
  color:var(--enzyme); font-stretch:92%; letter-spacing:.01em;
}
.rx-cof{ display:flex; flex-wrap:wrap; gap:5px; margin:3px 0 5px; align-items:center }
.rx-cof .sign{ color:var(--inhibit); font-size:12px; font-family:'Plex Mono',monospace }
.rx-note{ margin:5px 0 12px; font-size:13px; line-height:1.55; color:#5c5648 }
.rx-to{ display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.rx-dn{ color:var(--ink); font-size:13px; line-height:1 }

.facts{ margin:0; padding:0; list-style:none }
.facts li{
  position:relative; padding:0 0 0 18px; margin-bottom:9px;
  font-size:13.5px; line-height:1.55; color:#3a352e;
}
.facts li::before{
  content:''; position:absolute; left:2px; top:7px; width:5px; height:5px;
  background:var(--pathway); transform:rotate(45deg);
}

.rel{ display:flex; flex-wrap:wrap; gap:6px }
.rel-b{
  padding:4px 9px; border:1px solid var(--paper-line); background:var(--paper-2);
  font-size:12px; color:#4a443b;
}
.rel-b:hover{ border-color:var(--pathway); color:var(--pathway) }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{ background:var(--pathway); border-color:var(--pathway) }
.btn-ghost{ background:none; color:var(--ink) }
.btn-ghost:hover{ background:none; color:var(--pathway) }
.btn-go{ background:var(--pathway); border-color:var(--pathway); color:#fff }
.btn-go:hover{ background:#d94e14; border-color:#d94e14 }
.btn[disabled]{ opacity:.33; pointer-events:none }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px }
.sh-foot{
  position:sticky; bottom:0; z-index:6; display:flex; gap:10px; align-items:center;
  padding:12px 26px; margin:0 -26px;
  background:var(--paper);
  border-top:1px solid var(--paper-line);
  box-shadow:0 -10px 18px -10px rgba(35,31,33,.14);
}
.sh-foot .btn-row{ margin:0 }
.sh-foot .boot-meta{ margin:0 0 0 auto }
.sh-body > .sh-foot:last-child{ margin-bottom:-40px }

/* ── walkthrough + drills ────────────────────────────────────── */
.stage{ padding:0 26px 40px; max-width:780px }
.stage-top{
  position:sticky; top:0; z-index:5; padding:14px 26px 12px; margin:0 0 18px;
  background:linear-gradient(var(--paper) 72%,rgba(251,250,247,0));
}
.prog{ display:flex; gap:3px; margin:0 -26px 11px }
.prog span{ flex:1; height:3px; background:var(--paper-line) }
.prog span.on{ background:var(--pathway) }
.prog span.bad{ background:var(--inhibit) }
.stage-kicker{
  display:flex; align-items:center; gap:10px; min-height:24px;
  font-family:'Plex Mono',monospace; font-size:11px; color:#8a8375;
}
.stage-kicker b{ color:var(--ink); font-weight:600 }
.stage-who{ margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.stage-quit{
  flex:none; display:flex; align-items:center; gap:5px; padding:3px 8px;
  font-family:inherit; font-size:11px; line-height:1.3; color:#8a8375;
  border:1px solid var(--paper-line);
}
.stage-quit span{ font-weight:600; letter-spacing:.09em; text-transform:uppercase }
.stage-quit:hover{ color:var(--ink); border-color:#a9a192 }
.stage-q{ margin:12px 0 18px; font-size:19px; line-height:1.34; font-weight:600; letter-spacing:-.008em }

.opts{ display:grid; gap:8px; margin:0; padding:0; list-style:none }
.opt{
  display:flex; align-items:flex-start; gap:11px; width:100%; padding:12px 14px;
  text-align:left; font-size:14px; line-height:1.4;
  border:1.5px solid var(--paper-line); background:var(--paper);
  transition:border-color .16s,background .16s;
}
.opt:hover{ border-color:#a9a192 }
.opt-k{
  flex:none; width:19px; height:19px; display:grid; place-items:center; margin-top:-1px;
  border:1px solid #c3bcab; font-family:'Plex Mono',monospace; font-size:10px; color:#8a8375;
}
.opt.right{ border-color:var(--activate); background:rgba(0,166,84,.07) }
.opt.right .opt-k{ border-color:var(--activate); color:var(--activate) }
.opt.wrong{ border-color:var(--inhibit); background:rgba(240,69,77,.07) }
.opt.wrong .opt-k{ border-color:var(--inhibit); color:var(--inhibit) }
.opt.locked{ pointer-events:none }

.verdict{
  margin:16px 0 0; padding:13px 15px; border-left:3px solid var(--activate);
  background:var(--paper-2); font-size:13.5px; line-height:1.55;
}
.verdict.no{ border-left-color:var(--inhibit) }
.verdict b{
  display:block; margin-bottom:4px; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--activate);
}
.verdict.no b{ color:var(--inhibit) }

/* ordering drill */
.slots{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:20px; min-height:34px }
.slot{
  min-width:66px; min-height:30px; padding:3px 7px; display:grid; place-items:center;
  border:1.5px dashed #c3bcab; background:var(--paper-2);
  font-size:11px; color:#a9a192;
}
.slot.full{ border-style:solid; border-color:var(--ink); background:var(--paper); color:var(--ink) }
.slot.ok{ border-color:var(--activate) }
.slot.no{ border-color:var(--inhibit); animation:shake .34s }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.bank{ display:flex; flex-wrap:wrap; gap:7px }
.bank .cbox{ cursor:pointer; transition:transform .14s,border-color .14s }
.bank .cbox:hover{ border-color:var(--pathway); transform:translateY(-2px) }
.bank .cbox.used{ opacity:.22; pointer-events:none }

/* match drill */
.match{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px }
.match-col h4{
  margin:0 0 8px; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:#938b7c; font-weight:700;
}
.mitem{
  display:block; width:100%; text-align:left; padding:9px 11px; margin-bottom:7px;
  border:1.5px solid var(--paper-line); background:var(--paper); font-size:12.5px; line-height:1.3;
}
.mitem:hover{ border-color:#a9a192 }
.mitem.sel{ border-color:var(--pathway); box-shadow:0 0 0 3px rgba(242,94,33,.13) }
.mitem.done{ opacity:.3; pointer-events:none; border-color:var(--activate) }
.mitem.enz{ color:var(--enzyme); font-weight:700; font-stretch:92% }
.mitem.cmp{ font-stretch:82%; text-transform:uppercase; font-weight:600; letter-spacing:.03em; font-size:11.5px }

/* locate drill */
.locate-note{
  margin:0 0 14px; padding:12px 14px; background:var(--paper-2);
  border-left:3px solid var(--pathway); font-size:13.5px; line-height:1.5;
}

/* results */
.result-grade{
  font-size:clamp(46px,8vw,74px); line-height:.9; font-weight:800; font-stretch:118%;
  letter-spacing:-.03em; margin:4px 0 2px;
}
.result-sub{ font-size:14px; color:#59534a; margin:0 0 22px }
.tally{ border-top:1px solid var(--paper-line); margin-bottom:22px }
.tally div{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--paper-line); font-size:13.5px;
}
.tally span:last-child{ font-family:'Plex Mono',monospace; font-weight:600 }
.stars{ display:flex; gap:6px; margin:0 0 18px }
.star{ width:13px; height:13px; background:#ddd8cc; transform:rotate(45deg) }
.star.on{ background:var(--pathway) }

/* ── title card ──────────────────────────────────────────────── */
.boot{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:rgba(8,16,26,.82); backdrop-filter:blur(3px);
  transition:opacity .6s var(--ease),visibility .6s;
}
body:not([data-view=boot]) .boot{ opacity:0; visibility:hidden; pointer-events:none }
.boot-card{
  width:min(480px,88vw); padding:34px 36px 30px; background:var(--paper); color:var(--ink);
  border-top:5px solid var(--enzyme); box-shadow:0 30px 90px rgba(0,0,0,.5);
  animation:cardIn .7s var(--ease) both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(16px) } }
.boot-rule{ width:42px; height:3px; background:var(--pathway); margin-bottom:16px }
.boot-card h1{
  margin:0 0 10px; font-size:clamp(38px,6.4vw,54px); line-height:.92; font-weight:800;
  font-stretch:122%; letter-spacing:-.028em; text-transform:uppercase;
}
.boot-sub{ margin:0 0 16px; font-size:16px; line-height:1.45; color:#4a443b }
.boot-meta{
  margin:0 0 24px; font-family:'Plex Mono',monospace; font-size:11.5px; color:#8a8375;
}
.boot-hint{ margin:14px 0 0; font-size:12px; color:#938b7c }

/* ── toast ───────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:calc(var(--strip-h) + 20px); z-index:80;
  transform:translate(-50%,14px); opacity:0; pointer-events:none;
  padding:10px 18px; background:var(--chest-900); color:#fff;
  border:1px solid var(--chest-line); font-size:13px; font-weight:600;
  transition:opacity .28s,transform .28s var(--ease);
}
.toast.up{ opacity:1; transform:translate(-50%,0) }
.toast .t-flux{ color:var(--pathway); font-family:'Plex Mono',monospace }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width:980px){
  .chest{ width:238px }
  :root{ --chest-w:238px }
  .sheet{ width:min(460px,62vw) }
}
@media (max-width:720px){
  .search{ max-width:none; min-width:0 }
  .slashkey,.tab{ display:none }
  .mark-word{ display:none }
  .rail{ gap:10px; padding:0 10px }
  .rail-right{ gap:10px }
  .score + .score{ display:none }
  .strip-part,.strip-sep{ display:none }
  /* the sheet owns the screen on a phone, so the drawer gets out of the way */
  body.sheet-open .chest{ transform:translateX(-100%) }
  .chest{ width:84vw; z-index:45 }
  :root{ --chest-w:84vw }
  .sheet{ width:100%; border-left:0 }
  body.sheet-wide .sheet{ width:100% }
  /* the locate round needs the chart, so the sheet drops to the lower half */
  body.locating .sheet{ top:46%; border-top:1px solid #c9c3b4 }
  body.locating .chest{ transform:translateX(calc(-84vw + 26px)) }
  .match{ grid-template-columns:1fr }
  .sh-head{ padding:16px 18px 14px }
  .sh-body,.stage{ padding-left:18px; padding-right:18px }
  .stage-top{ padding-left:18px; padding-right:18px; margin-left:-18px; margin-right:-18px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important }
  .pin.is-open::after{ display:none }
}

/* ───────────────────────────────────────────────────────────────
   PROGRESSION
   A pathway is shut until its prerequisites have been drilled.
   Locked things stay visible but plainly out of reach.
   ─────────────────────────────────────────────────────────────── */

.lv-lock{ width:0; flex:none; overflow:hidden; transition:width .2s }
.lv.is-locked{ color:#5d708a }
.lv.is-locked .lv-name{ opacity:.72 }
.lv.is-locked .lv-lock{
  width:9px; height:11px; margin-right:1px; position:relative; overflow:visible;
}
.lv.is-locked .lv-lock::before{
  content:''; position:absolute; left:0; bottom:0; width:9px; height:6px;
  background:#4a5f7a;
}
.lv.is-locked .lv-lock::after{
  content:''; position:absolute; left:2px; bottom:5px; width:5px; height:4px;
  border:1.5px solid #4a5f7a; border-bottom:0; border-radius:3px 3px 0 0;
}
.lv.is-locked .pips{ display:none }

.pin.locked i{
  background:transparent; border:1.5px solid #9aa7b6;
  box-shadow:0 0 0 2px rgba(251,250,247,.75);
}
.pin.locked .pin-label{ opacity:0 }
.pin.locked:hover .pin-label{ opacity:1; color:#b9c6d4 }

.brief-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px }
.pips.big .pip{ width:9px; height:9px }
.brief-state{
  font-family:'Plex Mono',monospace; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:#8a8375;
}
.brief-line{ margin:0 0 7px; font-size:14px; line-height:1.55; color:#3a352e }
.brief-line b{ font-weight:700 }

.locked-note{
  padding:18px; border:1px solid var(--paper-line); background:var(--paper-2);
}
.lock-mark{
  display:block; width:16px; height:19px; position:relative; margin-bottom:12px;
}
.lock-mark::before{
  content:''; position:absolute; left:0; bottom:0; width:16px; height:11px; background:var(--ink);
}
.lock-mark::after{
  content:''; position:absolute; left:3px; bottom:9px; width:10px; height:7px;
  border:2.5px solid var(--ink); border-bottom:0; border-radius:5px 5px 0 0;
}
.rel-b.is-locked{ opacity:.5 }
.rel-b.is-new{ border-color:var(--pathway); color:var(--pathway); font-weight:600 }

.unlocked{
  margin:4px 0 22px; padding:16px 18px;
  border:1.5px solid var(--pathway); background:rgba(242,94,33,.06);
  animation:capIn .5s var(--ease) both;
}
.unlocked-h{
  margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--pathway);
}

/* the save lives in this browser and nowhere else, so there is a way to clear it */
.strip-wipe{ color:#5d6f85 }
.strip-wipe:hover{ color:var(--inhibit); border-color:#4a2a2e }