/* belleofthebot_ · terminal rose, plum night
   Tokens are the design system. Do not invent colours. */

:root{
  --ground:#17121C;
  --panel:#241D28;
  --screen:#141019;
  --rose:#DFA192;
  --mint:#9FE0CE;
  --well:#F5F1EC;
  --well-rose:#AE5A47;
  --well-mint:#2E9B7F;
  --text:#F4F2EE;
  --line:#423748;
  --meta:#B3A6BC;
  --faint:#8A7F93;
  --ink:#3A343E;
  --well-line:#DCD2C6;

  --sans:'Space Grotesk',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;

  --s1:8px; --s2:12px; --s3:18px; --s4:28px; --s5:44px; --s6:72px;
  --r:8px; --rc:12px;
  --measure:1040px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--text);
  font-family:var(--sans);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--s4)}
.narrow{max-width:760px}

h1,h2,h3{font-weight:500;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.12}
h2{font-size:clamp(1.4rem,3.2vw,1.85rem);line-height:1.22;margin-top:var(--s6);margin-bottom:var(--s2)}
h3{font-size:1.15rem;margin-bottom:var(--s1)}
p{max-width:62ch;margin-bottom:var(--s3)}
a{color:var(--rose);text-decoration:none;border-bottom:1px solid rgba(223,161,146,.35)}
a:hover{border-bottom-color:var(--rose)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

.kicker{font-family:var(--mono);font-size:.8rem;color:var(--meta);text-transform:lowercase;display:block;margin-bottom:var(--s1)}
.meta{font-family:var(--mono);font-size:.8rem;color:var(--faint)}

/* ---------- wordmark + nav ---------- */
.nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ground);z-index:40}
.nav-in{max-width:var(--measure);margin:0 auto;padding:var(--s2) var(--s4);display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.mark{font-family:var(--mono);font-size:.95rem;color:var(--rose);border:0;letter-spacing:-.02em}
.mark .sg{font-family:var(--sans);font-weight:500}
.cur{color:var(--mint);animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.nav a.link{font-family:var(--mono);font-size:.8rem;color:var(--meta);border:0}
.nav a.link:hover,.nav a.link[aria-current=page]{color:var(--rose)}
.nav-sp{flex:1}
/* the "more" hover menu. Opens on hover for a pointer and on focus-within for a
   keyboard. "more" itself stays a real link, so a touch device that never fires
   hover still lands on the page that lists the same things. */
.navsub{position:relative;display:inline-block}
.submenu{position:absolute;right:-.6rem;top:100%;min-width:15rem;padding:.4rem 0;
  background:var(--ground);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.45);opacity:0;visibility:hidden;
  transform:translateY(-4px);transition:opacity .13s ease,transform .13s ease;z-index:60}
.navsub:hover .submenu,.navsub:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:.42rem .9rem;font-family:var(--mono);font-size:.78rem;
  color:var(--meta);border:0;white-space:nowrap;text-decoration:none}
.submenu a:hover,.submenu a:focus-visible{color:var(--rose);background:rgba(255,255,255,.05)}
@media(hover:none){.submenu{display:none}}
@media(max-width:640px){.submenu{display:none}}
@media(prefers-reduced-motion:reduce){.submenu{transition:none}}

/* the suggestion form. One box, because three prompts get three answers and
   nothing else, and an empty box gets the thing the person came to say. */
.sform{display:block;margin:var(--s4) 0;max-width:620px}
.sform label{display:block;font-family:var(--mono);font-size:.8rem;color:var(--meta);
  margin:var(--s3) 0 var(--s1)}
.sform textarea,.sform input[type=email]{width:100%;font:inherit;font-size:1rem;color:var(--text);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s2) var(--s3);resize:vertical}
.sform textarea::placeholder,.sform input::placeholder{color:var(--faint)}
.sform textarea:focus,.sform input:focus{outline:2px solid var(--rose);outline-offset:1px;
  border-color:var(--rose)}
.sform button{margin-top:var(--s3);font-family:var(--mono);font-size:.85rem;color:var(--ground);
  background:var(--rose);border:0;border-radius:999px;padding:.6rem 1.6rem;cursor:pointer}
.sform button:hover{filter:brightness(1.08)}
.sform button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.sform input[name=_gotcha]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sform .meta{margin-top:var(--s3)}

/* the one solid call to action on the home page. Mint, filled, and it lights up. */
.tag.mintpill{background:var(--mint);color:#14301f;border-color:var(--mint);font-weight:500;
  transition:box-shadow .18s ease,transform .18s ease,filter .18s ease}
.tag.mintpill:hover,.tag.mintpill:focus-visible{filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(159,224,206,.22),0 0 22px 2px rgba(159,224,206,.42)}
@media(prefers-reduced-motion:reduce){.tag.mintpill{transition:none}
  .tag.mintpill:hover{transform:none}}

/* ============================================================ the quiz deck
   More game, less list. Portrait cards, an animated icon each, level buttons
   big enough to want to press, locks that read as locks, and a level that
   opened while you were away says so when you come back. */

.qhello{display:grid;grid-template-columns:150px 1fr;gap:var(--s4);align-items:center;
  margin:var(--s4) 0 var(--s5)}
.qhello .qhb{margin:0}
.qhello .qhb img{width:100%;height:auto;display:block}
.qbubble{position:relative;background:var(--well);color:var(--ink);border-radius:var(--rc);
  padding:var(--s3) var(--s4)}
.qbubble:before{content:"";position:absolute;left:-9px;top:50%;margin-top:-9px;width:18px;height:18px;
  background:var(--well);transform:rotate(45deg);border-radius:3px}
.qbubble p{position:relative;font-size:1.02rem;line-height:1.45}
.qbubble p+p{margin-top:var(--s2)}
.qbubble .meta{color:#6C6472;font-size:.86rem}
@media(max-width:640px){.qhello{grid-template-columns:88px 1fr;gap:var(--s3)}
  .qbubble:before{display:none}}

.qdeck{display:grid;gap:var(--s3);grid-template-columns:repeat(3,1fr);align-items:stretch}
@media(max-width:860px){.qdeck{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.qdeck{grid-template-columns:1fr}}
.qcard{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);border-radius:var(--rc);
  border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden}
.qcard:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--sub)}
.qc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)}
.qc-name{font-family:var(--mono);font-size:1rem;font-weight:500;color:var(--sub);margin:0}
.qc-meta{font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.qc-lv{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:var(--s2)}

/* the icons */
.qi{width:52px;height:52px;fill:none;stroke:var(--sub);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.qi circle[class]{fill:var(--sub);stroke:none}
.qi .dash{stroke:var(--sub);opacity:.55}
.qcard:hover .qi{stroke:var(--rose)}
.qi .a1,.qi .a2,.qi .a3{animation:travel 3.4s ease-in-out infinite}
.qi .a2{animation-delay:.35s}.qi .a3{animation-delay:.7s}
@keyframes travel{0%,100%{transform:translateX(0)}50%{transform:translateX(32px)}}
.qi .p1,.qi .p2,.qi .p3{animation:beat 2.6s ease-in-out infinite}
.qi .p2{animation-delay:.5s}.qi .p3{animation-delay:1s}
@keyframes beat{0%,100%{opacity:.45}50%{opacity:1}}
.qi .w1{animation:squiggle 3s ease-in-out infinite}
@keyframes squiggle{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.qi .e1,.qi .e2{animation:blink 4.2s steps(1,end) infinite;transform-origin:center}
@keyframes blink{0%,92%,100%{opacity:1}95%{opacity:0}}
.qi .hl,.qi .hl2{animation:pick 3.6s ease-in-out infinite}
@keyframes pick{0%,100%{opacity:.35}45%,55%{opacity:1}}
.qi .x1{animation:warn 2.2s ease-in-out infinite}
@keyframes warn{0%,100%{opacity:.3}50%{opacity:1}}
.qi .q1,.qi .q2{animation:beat 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.qi *{animation:none!important}}

/* progress pips */
.qc-pips{display:flex;gap:5px;padding-top:4px}
.qc-pips i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);display:block}
.qc-pips i.on{background:var(--mint);border-color:var(--mint)}

/* the level buttons */
.lvb{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);width:100%;
  font-family:var(--mono);font-size:.84rem;text-align:left;padding:11px 13px;border-radius:var(--r);
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--meta);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease}
.lvb .lvs{font-size:.9rem;line-height:1;opacity:.85}
.lvb.open{border-color:var(--sub);color:var(--sub);background:rgba(255,255,255,.06)}
.lvb.open:hover{background:var(--sub);color:var(--ground);transform:translateY(-1px)}
.lvb.won{border-color:var(--mint);color:var(--mint);background:rgba(159,224,206,.08)}
.lvb.won .lvs:after{content:"\2713"}
.lvb.open .lvs:after{content:"\25B8"}
.lvb.shut{opacity:.4;cursor:not-allowed;border-style:dashed}
.lvb.shut .lvs:after{content:"\1F512";font-size:.8rem}
.lvb:focus-visible{outline:2px solid var(--rose);outline-offset:2px}

/* a level that opened while you were away */
.lvb.justopened{animation:unlockpop .9s cubic-bezier(.2,.9,.25,1) 1}
@keyframes unlockpop{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(159,224,206,0)}
  18%{transform:scale(1.07) rotate(-1.4deg)}
  36%{transform:scale(1.02) rotate(1deg);box-shadow:0 0 0 8px rgba(159,224,206,.28)}
  60%{transform:scale(1.04) rotate(-.5deg)}
  100%{transform:scale(1);box-shadow:0 0 0 22px rgba(159,224,206,0)}}
.qcard.justopened{animation:cardglow 1.1s ease-out 1}
@keyframes cardglow{0%{box-shadow:0 0 0 0 rgba(159,224,206,.5)}100%{box-shadow:0 0 0 26px rgba(159,224,206,0)}}
@media(prefers-reduced-motion:reduce){.lvb.justopened,.qcard.justopened{animation:none}}

.qc-bonus{border-style:dashed}
.qc-bonus:before{background:var(--rose)}
.qc-bonus .qi{stroke:var(--rose)}
.qc-bonus .qc-name{color:var(--rose)}
.qc-bonus .lvb.open{border-color:var(--rose);color:var(--rose)}
.qc-bonus .lvb.open:hover{background:var(--rose);color:var(--ground)}
.qfoot{margin-top:var(--s4)}

/* ==================================================== the light play screen
   A round should feel like a different room from the browsing, so it inverts:
   the terminal in reverse, dark ink on the warm well. */
.qplay.qlight{background:var(--well);color:var(--ink);border:1px solid var(--well-line);
  border-radius:var(--rc);padding:var(--s4);margin-top:var(--s4)}
.qlight .qtopic{color:var(--well-rose)}
.qlight .qlevel,.qlight .meta{color:#6C6472}
.qlight .qprog{background:#E3DCD2}
.qlight .qfill{background:var(--well-rose)}
.qhead{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s3)}
.qhead .qq{margin:0}
.qicon{flex:0 0 auto;width:46px;height:46px;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px;
  --ic-rose:var(--well-rose);--ic-mint:var(--well-mint);--ic-dim:#8C8394}
.qlight .qq{color:var(--ink)}
.qlight .qopt{background:#fff;border:1px solid var(--well-line);color:var(--ink)}
.qlight .qopt:hover:not([disabled]){border-color:var(--well-rose);background:#FFFDFA}
.qlight .qopt.right{border-color:var(--well-mint);background:#EAF7F2;color:#16332A}
.qlight .qopt.wrong{border-color:var(--well-rose);background:#FBEDE9;color:#4A2A22}
.qlight .qfb{background:#fff;border:1px solid var(--well-line);color:#4A4450}
.qlight .fb-yes{color:var(--well-mint)}
.qlight .fb-no{color:var(--well-rose)}
.qlight .btn{background:var(--well-rose);color:var(--well)}
.qlight .btn[disabled]{opacity:.35}
@media(max-width:640px){.qhead{gap:var(--s2)}.qicon{width:34px;height:34px}}

/* ---------- hero ---------- */
.hero{padding:var(--s6) 0 var(--s5)}
.hero p.lede{font-size:1.1rem;color:var(--meta);max-width:56ch}
.herogrid{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s5);align-items:center}
@media(max-width:820px){.herogrid{grid-template-columns:1fr}}

/* ---------- belle + terminal ---------- */
.stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:var(--s3);display:grid;gap:var(--s2)}
.stage img,.stage svg{width:100%;height:auto;display:block;border-radius:var(--r)}
.ph{font-family:var(--mono);font-size:.72rem;color:var(--faint);text-align:center}

.term{background:var(--screen);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);font-family:var(--mono);font-size:.86rem;line-height:1.7;color:var(--rose)}
.term .u{color:var(--meta)}
.term .c{color:var(--mint)}

/* ---------- plain text list, for the teach page ---------- */
.tlist{max-width:62ch;margin-bottom:var(--s3);list-style:none}
.tlist li{position:relative;padding-left:1.3em;margin-bottom:var(--s2);color:var(--text)}
.tlist li::before{content:"\2014";position:absolute;left:0;color:var(--rose)}
.tlist strong{font-weight:500;color:var(--rose)}
.well .tlist li{color:var(--ink)}
.well .tlist strong{color:var(--well-rose)}

/* ---------- ivory well ---------- */
.well{background:var(--well);color:var(--ink);border-radius:var(--rc);padding:var(--s5) var(--s4);margin:var(--s4) 0}
.well h2,.well h3{color:var(--ink);margin-top:0}
.well p{color:var(--ink)}
.well a{color:var(--well-rose);border-bottom-color:rgba(174,90,71,.4)}
.well strong{color:var(--well-rose);font-weight:500}
.well .meta{color:#6E6474}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3);margin-top:var(--s4)}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:var(--s4);display:block;border-bottom:1px solid var(--line)}
a.card:hover{border-color:var(--rose)}
.card h3{color:var(--text)}
.card p{color:var(--meta);font-size:.94rem;margin-bottom:var(--s2)}
.card .foot{font-family:var(--mono);font-size:.75rem;color:var(--faint)}

/* ---------- tags, metrics, status ---------- */
.tags{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s3) 0}
.tag{font-family:var(--mono);font-size:.72rem;padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--meta)}
.tag.rose{color:var(--rose);border-color:var(--well-rose)}
.tag.mint{color:var(--mint);border-color:#2E5348}
.dot{color:var(--mint);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s3);margin:var(--s4) 0}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:var(--s3)}
.metric .n{display:block;font-size:1.9rem;color:var(--rose);font-weight:500;line-height:1.1}
.metric .l{display:block;font-family:var(--mono);font-size:.72rem;color:var(--faint);margin-top:6px}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:.8rem;padding:10px 18px;border-radius:var(--r);
  background:var(--rose);color:var(--ground);border:1px solid var(--rose);cursor:pointer}
.btn.ghost{background:none;color:var(--rose)}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.45;cursor:default}

/* ---------- epistemic status flags ---------- */
.flag{font-family:var(--mono);font-size:.68rem;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--faint);white-space:nowrap}
.flag.emp{color:var(--mint);border-color:#2E5348}
.flag.op{color:var(--rose);border-color:var(--well-rose)}
.flag.phil{color:var(--meta)}
.well .flag{border-color:var(--well-line);color:#6E6474}
.well .flag.emp{color:var(--well-mint);border-color:#A9C9BC}
.well .flag.op{color:var(--well-rose);border-color:#D8B3A8}

/* ---------- the grid interactive ---------- */
.gridwrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:var(--s4);margin-top:var(--s4)}
.gtable{display:grid;grid-template-columns:120px repeat(4,1fr);gap:6px;min-width:600px}
.gscroll{overflow-x:auto;padding-bottom:var(--s1)}
.gh{font-family:var(--mono);font-size:.72rem;color:var(--meta);padding:var(--s1);align-self:end;line-height:1.35}
.gr{font-family:var(--mono);font-size:.72rem;color:var(--meta);padding:var(--s1);display:flex;align-items:center;line-height:1.35}
.cell{background:var(--screen);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);min-height:64px;
  font-family:var(--mono);font-size:.7rem;color:var(--faint);cursor:pointer;text-align:left;line-height:1.4}
.cell:hover{border-color:var(--rose);color:var(--meta)}
.cell.on{border-color:var(--rose);background:#1D1622;color:var(--rose)}
.readout{margin-top:var(--s3);background:var(--screen);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);min-height:120px}
.readout h4{font-weight:500;font-size:1.02rem;margin-bottom:6px}
.readout p{font-size:.92rem;color:var(--meta);max-width:none;margin-bottom:var(--s2)}
.readout .src{font-family:var(--mono);font-size:.72rem}

/* ---------- definition builder ---------- */
.builder{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:var(--s4);margin-top:var(--s4)}
.brow{margin-bottom:var(--s3)}
.brow .lab{font-family:var(--mono);font-size:.75rem;color:var(--meta);display:block;margin-bottom:var(--s1)}
.opts{display:flex;flex-wrap:wrap;gap:var(--s1)}
.opt{font-family:var(--mono);font-size:.75rem;padding:7px 13px;border-radius:999px;background:none;
  border:1px solid var(--line);color:var(--meta);cursor:pointer}
.opt:hover{border-color:var(--rose);color:var(--text)}
.opt.on{background:var(--rose);color:var(--ground);border-color:var(--rose)}
.sentence{margin-top:var(--s4);background:var(--screen);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
  font-size:1.02rem;line-height:1.7}
.sentence b{color:var(--rose);font-weight:500}

/* ---------- stepped walkthrough ---------- */
.walk{margin-top:var(--s4)}
.wsteps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s3)}
.wstep{font-family:var(--mono);font-size:.72rem;padding:7px 12px;border-radius:999px;background:none;
  border:1px solid var(--line);color:var(--meta);cursor:pointer}
.wstep.on{background:var(--rose);color:var(--ground);border-color:var(--rose)}
.wstep.rt{border-style:dashed}
.wpanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:var(--s4)}
.wpanel .zone{font-family:var(--mono);font-size:.72rem;color:var(--faint);margin-bottom:var(--s2)}
.wbody{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:760px){.wbody{grid-template-columns:1fr}}
.wfig{background:var(--screen);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.wfig svg{width:100%;height:auto;display:block}
.miscon{border-left:2px solid var(--well-rose);padding-left:var(--s3);margin-top:var(--s3)}
.miscon .h{font-family:var(--mono);font-size:.72rem;color:var(--faint);display:block;margin-bottom:4px}
.miscon p{font-size:.92rem;color:var(--meta);margin-bottom:0}

/* ---------- quiz ---------- */
.quiz{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:var(--s4);margin-top:var(--s4)}
.qq{font-size:1.05rem;margin-bottom:var(--s3)}
.qopts{display:grid;gap:var(--s1)}
.qopt{text-align:left;font-family:var(--sans);font-size:.95rem;padding:12px 14px;border-radius:var(--r);
  background:var(--screen);border:1px solid var(--line);color:var(--text);cursor:pointer}
.qopt:hover{border-color:var(--rose)}
.qopt.right{border-color:var(--mint);color:var(--mint)}
.qopt.wrong{border-color:var(--well-rose);color:var(--rose)}
.qfb{margin-top:var(--s3);font-size:.92rem;color:var(--meta);min-height:1.6em}
.qbar{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s3);
  font-family:var(--mono);font-size:.75rem;color:var(--faint)}

/* ---------- source list ---------- */
.srcs{margin-top:var(--s3)}
.src-item{border-top:1px solid var(--line);padding:var(--s2) 0}
.src-item .t{font-size:.95rem}
.src-item .n{font-family:var(--mono);font-size:.75rem;color:var(--faint)}
.well .src-item{border-top-color:var(--well-line)}
.well .src-item .n{color:#6E6474}

/* ---------- crosslinks ---------- */
.xlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3);margin-top:var(--s5)}
.xlinks.two{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.xl{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:var(--s3);display:block}
.xl:hover{border-color:var(--rose)}
.xl .k{font-family:var(--mono);font-size:.72rem;color:var(--faint);display:block;margin-bottom:4px}
.xl .t{color:var(--text);font-size:1rem}

footer{border-top:1px solid var(--line);margin-top:var(--s6);padding:var(--s4) 0}
footer .wrap{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-family:var(--mono);font-size:.75rem;color:var(--faint)}

.note{background:var(--screen);border:1px solid var(--line);border-left:2px solid var(--rose);
  border-radius:var(--r);padding:var(--s3);margin:var(--s4) 0}
.note p{font-size:.92rem;color:var(--meta);margin-bottom:0}
.note p+p{margin-top:var(--s2)}
.note .h{font-family:var(--mono);font-size:.72rem;color:var(--rose);display:block;margin-bottom:6px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:var(--s3);background:var(--rose);color:var(--ground);padding:8px 14px;border-radius:var(--r);z-index:99}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- belle expression slots ---------- */
.bfig{margin:0}
.bfig img{width:100%;height:auto;display:block}
.bph{aspect-ratio:3/4;border:1px dashed var(--line);border-radius:var(--rc);background:var(--panel);
     display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:var(--s3);text-align:center}
.bph .s{font-family:var(--mono);font-size:.66rem;color:var(--faint);line-height:1.4}
.bph .n{font-family:var(--mono);font-size:.78rem;color:var(--rose)}
.bfig figcaption{font-family:var(--mono);font-size:.72rem;color:var(--faint);margin-top:var(--s1);line-height:1.5}
.bsay{display:grid;grid-template-columns:150px 1fr;gap:var(--s3);align-items:center;
      background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:var(--s3);margin-top:var(--s4)}
.bsay .bfig img,.bsay .bph{max-width:150px}
.bsay p{margin:0;color:var(--meta);font-size:.95rem}
.bsay .h{font-family:var(--mono);font-size:.72rem;color:var(--rose);display:block;margin-bottom:6px}
@media(max-width:640px){.bsay{grid-template-columns:1fr}.bsay .bfig{max-width:130px}}

/* ---------- narrowing stack ---------- */
.stack{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);padding:var(--s4);margin-top:var(--s4)}
.strow{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--screen);
       border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s2);cursor:pointer;transition:border-color .15s}
.strow:hover{border-color:var(--rose)}
.strow.on{border-color:var(--rose);background:var(--ground)}
.strow .bar{height:10px;border-radius:5px;background:var(--rose);opacity:.55;margin-bottom:10px}
.strow.on .bar{opacity:1}
.strow .lab{display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline}
.strow .t{color:var(--text);font-size:.95rem}
.strow .c{font-family:var(--mono);font-size:1.05rem;color:var(--rose);white-space:nowrap}
.stout{border:1px solid var(--line);border-radius:var(--r);background:var(--ground);padding:var(--s3);margin-top:var(--s3);min-height:96px}
.stout h4{margin:0 0 6px;color:var(--text);font-weight:500}
.stout p{margin:0 0 8px;color:var(--meta);font-size:.93rem}


/* ===================== subject + type colours ===================== */
.c-components{--sub:#F5F1EC} .c-concepts{--sub:#A98BAE} .c-behavior{--sub:#DFA192}
.c-actors{--sub:#D5CFC9}     .c-risk{--sub:#C08172}
body{--sub:var(--rose)}

.flag{font-family:var(--mono);font-size:.68rem;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--faint);white-space:nowrap;display:inline-block}
.flag.f-emp{color:var(--mint);border-color:#2E5348}
.flag.f-arg{color:#BFA9C6;border-color:#5A4A63}
.flag.f-def{color:var(--rose);border-color:var(--well-rose)}
.flag.f-op{color:#E0B79C;border-color:#7A5340}

/* ===================== intro ===================== */
.intro{padding:var(--s6) 0 var(--s4)}
.introgrid{display:grid;grid-template-columns:.55fr 1.45fr;gap:var(--s5);align-items:center}
.introgrid h1{font-size:clamp(1.9rem,4vw,2.7rem)}
.bfig.plain img{border-radius:var(--r);width:100%;height:auto;display:block}
.bfig.plain.big{max-width:340px}
a.tag{border-bottom:0}
@media(max-width:820px){.introgrid{grid-template-columns:1fr}.bfig.plain.big{max-width:210px}}

/* ===================== filters ===================== */
.filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--s3) 0;margin-bottom:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.frow{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.flab{font-family:var(--mono);font-size:.72rem;color:var(--faint);min-width:110px}

/* the scope row is the primary choice (AI itself / the people / all), so it
   reads as a connected segmented control rather than the loose toggle-pills
   below it, and gets its own rule under .filters to set it apart. */
.scoperow{padding-bottom:var(--s3);margin-bottom:var(--s1);border-bottom:1px solid var(--line)}
.scopes{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.scopebtn{font-family:var(--mono);font-size:.82rem;padding:9px 18px;background:none;
  border:0;border-right:1px solid var(--line);color:var(--meta);cursor:pointer;
  display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.scopebtn:last-child{border-right:0}
.scopebtn:hover{color:var(--text);background:rgba(255,255,255,.05)}
.scopebtn .pn{color:var(--faint);font-size:.7rem}
.scopebtn.on{background:var(--rose);color:var(--ground)}
.scopebtn.on .pn{color:inherit;opacity:.7}
.pills{display:flex;gap:var(--s1);flex-wrap:wrap}
.pill{font-family:var(--mono);font-size:.76rem;padding:7px 14px;border-radius:999px;
  background:none;border:1px solid var(--line);color:var(--meta);cursor:pointer;
  display:inline-flex;gap:8px;align-items:center}
.pill:hover{border-color:var(--meta);color:var(--text)}
.pill .pn{color:var(--faint);font-size:.68rem}
.pill.p-components.on{background:#F5F1EC;color:#2A2530;border-color:#F5F1EC}
.pill.p-concepts.on{background:#A98BAE;color:#1F1722;border-color:#A98BAE}
.pill.p-behavior.on{background:#DFA192;color:#2A1F26;border-color:#DFA192}
.pill.p-actors.on{background:#D5CFC9;color:#2B2826;border-color:#D5CFC9}
.pill.p-risk.on{background:#AE5A47;color:#F7EFEC;border-color:#AE5A47}
.pill.sub-builders.on{background:#C69A5B;color:#2B2115;border-color:#C69A5B}
.pill.sub-safety.on{background:#2D4A4A;color:#EAF1EE;border-color:#2D4A4A}
.pill.sub-critics.on{background:#7A3B2E;color:#F5EAE4;border-color:#7A3B2E}
.pill.sub-policy.on{background:#A9B7C4;color:#25303A;border-color:#A9B7C4}
.pill.sub-orgs.on{background:#D8CFC0;color:#3A342B;border-color:#D8CFC0}
.pill.on .pn{color:inherit;opacity:.65}
.pill.t-emp.on{border-color:var(--mint);color:var(--mint)}
.pill.t-arg.on{border-color:#8B76A0;color:#BFA9C6}
.pill.t-def.on{border-color:var(--rose);color:var(--rose)}
.pill.t-op.on{border-color:#A87352;color:#E0B79C}
.fbar{justify-content:space-between}
.btn.sm{font-size:.74rem;padding:7px 14px}

@media(max-width:640px){
  .scoperow{flex-direction:column;align-items:stretch;gap:var(--s1)}
  .scopes{width:100%}
  .scopebtn{flex:1;justify-content:center;padding:9px 8px;font-size:.74rem}
}

/* ===================== card grid ===================== */
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));
  gap:var(--s3);margin-bottom:var(--s6)}
.etile{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--sub);
  border-radius:var(--rc);padding:var(--s3) var(--s3) var(--s4);cursor:pointer;
  display:flex;flex-direction:column;gap:var(--s1);min-height:200px}
.etile:hover{border-color:var(--sub);transform:translateY(-2px)}
.etile:focus-visible{outline:2px solid var(--sub);outline-offset:3px}
.et-sub{font-family:var(--mono);font-size:.66rem;color:var(--sub);letter-spacing:.05em;text-transform:uppercase}
.et-term{font-size:1.06rem;color:var(--text);margin:0}
.et-hook{color:var(--meta);font-size:.92rem;line-height:1.4;margin:0;flex:1}
.et-hook .rose{color:var(--sub)}
.etile .flag{align-self:flex-start;margin-top:var(--s1)}
.eempty{padding:var(--s5) 0;text-align:center}

/* ---------- cover tiles: the carousel card, at web scale ----------
   The ground colours are injected per page from the carousel stylesheet, so a
   colour can only ever be changed in one place. Every tile carries --bg, --fg,
   --acc, --edge, --faint and the three --ic- colours for the diagrams. */
.egrid.covers{grid-template-columns:repeat(auto-fill,minmax(min(208px,100%),1fr));
  gap:var(--s2)}
.etile.cover{background:var(--bg);color:var(--fg);border:1px solid var(--edge);
  border-left-width:1px;border-radius:var(--rc);aspect-ratio:4/5;min-height:0;
  padding:var(--s3);position:relative;overflow:hidden;display:block;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.etile.cover:hover,.etile.cover:focus-visible{transform:translateY(-4px);
  border-color:var(--acc);box-shadow:0 16px 34px rgba(8,5,11,.42)}
.cover .et-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:.45rem;position:relative;z-index:4;margin-bottom:.55rem}
.cover .et-name{font-family:var(--mono);font-size:.68rem;color:var(--acc);
  line-height:1.35;min-width:0}
.cover .et-hook{line-height:1.16;font-weight:500;color:var(--fg);margin:0;
  position:relative;z-index:3;max-width:15ch;letter-spacing:-.01em}
/* the type steps down with the length of the hook rather than truncating */
.cover .et-hook.h-xl{font-size:1.16rem}
.cover .et-hook.h-l{font-size:1.04rem}
.cover .et-hook.h-m{font-size:.9rem}
.cover .et-hook.h-s{font-size:.8rem;line-height:1.22}
.cover .et-hook .rose{color:var(--acc)}
.cover .flag{flex:0 0 auto;color:var(--faint);border-color:var(--edge);
  background:transparent;font-size:.58rem;padding:2px 8px}
.cover .et-open{position:absolute;left:var(--s3);bottom:var(--s3);z-index:4;
  font-family:var(--mono);font-size:.66rem;color:var(--acc);opacity:0;
  transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}
.etile.cover:hover .et-open,.etile.cover:focus-visible .et-open{opacity:1;transform:none}

/* Belle, sitting in the tile the way she sits on the cover. She is anchored
   left, centre or right by term so the grid does not read as one repeated
   composition, and she swaps expression on hover. */
/* Belle lives in a band across the bottom of the tile and is clipped by it, so
   however she moves she cannot reach the words. The hover grows her downward,
   out of the frame, rather than up into the hook. */
.et-belle{position:absolute;left:0;right:0;bottom:0;height:50%;margin:0;z-index:2;
  overflow:hidden;pointer-events:none}
.et-belle img{position:absolute;bottom:0;height:100%;width:auto;display:block;
  transform-origin:center bottom;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .18s ease}
.et-belle .et-react{opacity:0}
.etile.cover:hover .et-react,.etile.cover:focus-visible .et-react{opacity:1}
.etile.cover:hover .et-idle,.etile.cover:focus-visible .et-idle{opacity:0;
  transition:opacity .18s ease}
.b-left  .et-belle img{left:3%}
.b-right .et-belle img{right:2%}
.b-mid   .et-belle img{left:50%;transform:translateX(-50%)}
.etile.cover:hover .et-belle img,.etile.cover:focus-visible .et-belle img{
  transform:translateY(11px) scale(1.08)}
.etile.cover.b-mid:hover .et-belle img,.etile.cover.b-mid:focus-visible .et-belle img{
  transform:translateX(-50%) translateY(11px) scale(1.08)}

/* The diagram alternative: the same grounds, the icon language instead of the
   character. On hover the dim strokes come up to the accent, so the drawing
   completes itself rather than just moving. */
.cover .et-icon{position:absolute;left:var(--s3);bottom:var(--s3);z-index:2;
  width:min(66%,150px);height:auto;aspect-ratio:1;overflow:visible;
  /* grow down and right, never up into the hook */
  transform-origin:left top;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.etile.cover:hover .et-icon,.etile.cover:focus-visible .et-icon{
  transform:scale(1.16);--ic-dim:var(--acc)}
.etile.cover.b-icon .et-open{left:auto;right:var(--s3)}

@media(max-width:640px){
  .egrid.covers{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:var(--s1)}
  .cover{padding:var(--s2)}
  .cover .et-hook{max-width:100%}
  .cover .et-hook.h-xl{font-size:.95rem}
  .cover .et-hook.h-l{font-size:.87rem}
  .cover .et-hook.h-m{font-size:.79rem}
  .cover .et-hook.h-s{font-size:.72rem}
  .cover .et-name{font-size:.56rem}
  .cover .flag{font-size:.5rem;padding:2px 6px}
  .cover .et-top{gap:.3rem;margin-bottom:.4rem}
  .et-belle{height:42%}
  .cover .et-icon{width:min(58%,92px)}
}
@media(prefers-reduced-motion:reduce){
  .etile.cover,.et-belle,.cover .et-icon,.cover .et-open{transition:none}
  .etile.cover:hover{transform:none}
}


/* ===================== modal ===================== */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--s3)}
.modal[hidden]{display:none}
.etile[hidden]{display:none}
.pill[hidden]{display:none}
.frow[hidden]{display:none}
.mscrim{position:absolute;inset:0;background:rgba(10,7,13,.82)}
.mcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);
  width:min(640px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.mhead{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.mcat{font-family:var(--mono);font-size:.68rem;color:var(--sub);letter-spacing:.05em;text-transform:uppercase}
.mterm{font-family:var(--mono);font-size:.78rem;color:var(--faint);flex:1}
.mclose{background:none;border:0;color:var(--meta);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}
.mclose:hover{color:var(--rose)}
.mbody{padding:var(--s5) var(--s4);overflow-y:auto;position:relative;
  height:clamp(330px,52vh,450px)}
.mkick{font-family:var(--mono);font-size:.72rem;color:var(--faint);display:block;margin-bottom:var(--s2)}
.mhook{font-size:1.72rem;line-height:1.18;font-weight:500;max-width:22ch}
.mhook .rose,.mans .rose,.mwhy .rose,.mfile .rose{color:var(--sub)}
.mans{font-size:1.3rem;line-height:1.28;font-weight:500;margin-bottom:var(--s2);max-width:26ch}
.mwhy{font-size:1.18rem;line-height:1.34;color:var(--text);max-width:30ch;margin-bottom:var(--s2)}
.mfile{font-size:1.05rem;color:var(--text);max-width:32ch}
.mpts{list-style:none;display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)}
.mpts b{color:var(--text);font-weight:500;display:block}
.mpts div b{display:block}
.mflag{margin:var(--s3) 0}
.mfoot{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.mdots{display:flex;gap:7px;flex:1;justify-content:center}
.mdot{width:8px;height:8px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0}
.mdot.on{background:var(--sub)}
@media(max-width:560px){.mhook{font-size:1.4rem}.mbody{padding:var(--s4) var(--s3)}}

/* ===================== quizzes ===================== */
.qrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:space-between;
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--sub);
  border-radius:var(--rc);padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.qr-sub{font-family:var(--mono);font-size:.95rem;color:var(--sub);display:block}
.qr-lvls{display:flex;gap:var(--s1);flex-wrap:wrap}
.qplay,.qdone{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--sub);
  border-radius:var(--rc);padding:var(--s5) var(--s4)}
.qtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s2)}
.qtopic{font-family:var(--mono);font-size:.86rem;color:var(--sub)}
.qprog{height:4px;background:var(--line);border-radius:2px;margin-bottom:var(--s4);overflow:hidden}
.qfill{display:block;height:100%;background:var(--sub);width:0;transition:width .25s}
.qq{font-size:1.3rem;line-height:1.3;margin-bottom:var(--s3);max-width:44ch}
.qopts{display:flex;flex-direction:column;gap:var(--s2)}
.qopt{text-align:left;background:var(--screen);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);color:var(--text);font-family:var(--sans);font-size:.98rem;cursor:pointer;line-height:1.35}
.qopt:hover:enabled{border-color:var(--sub)}
.qopt.right{border-color:var(--mint);color:var(--mint)}
.qopt.wrong{border-color:#8C4A4A;color:#D89393}
.qopt:disabled{cursor:default}
.qfb{color:var(--meta);font-size:.95rem;margin:var(--s3) 0 0;min-height:2.6em;max-width:60ch}
.qbar{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.qbar .btn{margin-left:auto}
.rgrid{display:grid;grid-template-columns:180px 1fr;gap:var(--s4);align-items:center}
.rbelle img{width:100%;height:auto;display:block}
.rscore{font-family:var(--mono);font-size:2.4rem;line-height:1;color:var(--fg);
        letter-spacing:-.02em;display:block;margin-bottom:.6rem}
.rline{font-size:1.5rem;line-height:1.22;margin-bottom:var(--s2)}
.ractions{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s3)}
@media(max-width:640px){.rgrid{grid-template-columns:1fr}.rbelle{max-width:150px}}

/* ===================== misc ===================== */
.flagkey{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s4) 0}
.fk{display:grid;grid-template-columns:190px 1fr;gap:var(--s3);align-items:baseline}
.fk span:last-child{color:var(--meta);font-size:.95rem}
@media(max-width:640px){.fk{grid-template-columns:1fr;gap:6px}}
.xl .d{display:block;color:var(--faint);font-size:.86rem;margin-top:6px;line-height:1.45}
.xl.c-components,.xl.c-concepts,.xl.c-behavior,.xl.c-actors,.xl.c-risk{border-left:4px solid var(--sub)}
.xl .k{color:var(--sub)}
h2 .subdot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--sub);margin-right:10px}
.srcs .src-item .t .flag{margin-left:8px}
footer a{color:var(--rose)}

/* ---------- the modal wears the subject's ground ----------
   Same colours as the carousel and the tile, so opening a card feels like
   picking up the post rather than opening a document. */
.mcard[class*="tg-"]{background:var(--bg);border-color:var(--edge)}
.mcard[class*="tg-"] .mhead,.mcard[class*="tg-"] .mfoot{border-color:var(--edge)}
.mcard[class*="tg-"] .mcat{color:var(--acc)}
.mcard[class*="tg-"] .mterm,.mcard[class*="tg-"] .mkick,
.mcard[class*="tg-"] .meta,.mcard[class*="tg-"] .src{color:var(--faint)}
.mcard[class*="tg-"] .mclose{color:var(--faint)}
.mcard[class*="tg-"] .mclose:hover{color:var(--acc)}
.mcard[class*="tg-"] .mhook,.mcard[class*="tg-"] .mans,.mcard[class*="tg-"] .mwhy,
.mcard[class*="tg-"] .mfile,.mcard[class*="tg-"] .mq,.mcard[class*="tg-"] p,
.mcard[class*="tg-"] .mpts b{color:var(--fg)}
.mcard[class*="tg-"] .rose{color:var(--acc)}
.mcard[class*="tg-"] .btn{background:var(--acc);color:var(--bg);border-color:var(--acc)}
.mcard[class*="tg-"] .btn.ghost{background:none;color:var(--acc)}
.mcard[class*="tg-"] .btn[disabled]{opacity:.35}
.mcard[class*="tg-"] .mdot{background:var(--edge)}
.mcard[class*="tg-"] .mdot.on{background:var(--acc)}
.mcard[class*="tg-"] .flag{color:var(--faint);border-color:var(--edge)}
.mcard[class*="tg-"] a{color:var(--acc);border-bottom-color:var(--edge)}

/* Belle opens the card and sees you out of it */
.mbelle{position:absolute;right:0;bottom:0;height:74%;margin:0;pointer-events:none;
  animation:mbelle-in .38s cubic-bezier(.2,.8,.3,1) both}
.mbelle img{height:100%;width:auto;display:block}
.mbelle.small{height:52%;opacity:.92}
@keyframes mbelle-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mcard[class*="tg-"] .mhook{max-width:13ch;position:relative;z-index:2}
.mcard[class*="tg-"] .mfile,.mcard[class*="tg-"] .src,.mcard[class*="tg-"] .mflag{
  position:relative;z-index:2;max-width:34ch}

/* the question panel */
.mq{font-size:1.24rem;line-height:1.26;font-weight:500;margin-bottom:var(--s3);max-width:30ch}
.mopts{display:grid;gap:var(--s1);margin-bottom:var(--s2)}
.mopt{text-align:left;font-family:var(--sans);font-size:.94rem;line-height:1.35;
  padding:11px 14px;border-radius:var(--r);background:transparent;color:var(--fg);
  border:1px solid var(--edge);cursor:pointer;transition:border-color .15s,background .15s}
.mopt:hover:not([disabled]){border-color:var(--acc)}
.mopt.right{border-color:var(--ic-mint);color:var(--ic-mint)}
.mopt.wrong{border-color:var(--acc);opacity:.6;text-decoration:line-through}
.mopt[disabled]{cursor:default}
.mfb{font-size:.94rem;color:var(--soft);max-width:44ch;margin:0}

/* the drawings, inside the card */
.mfig{position:absolute;right:var(--s4);bottom:var(--s4);width:110px;height:110px;opacity:.9}
.mpts{list-style:none;display:grid;gap:var(--s2);margin-bottom:var(--s3)}
.mpts li{display:flex;gap:var(--s3);align-items:flex-start;color:var(--soft)}
.mpi{width:52px;height:52px;flex:0 0 52px;margin-top:-4px}
.mpts b{font-weight:500}
.mpts div{font-size:.95rem;line-height:1.45;color:var(--soft)}

@media(max-width:640px){
  .mbelle{height:56%;opacity:.9}
  .mfig{width:76px;height:76px}
  .mcard[class*="tg-"] .mhook{max-width:11ch}
}

/* the objection panel: somebody competent, disagreeing, in the card itself */
.mobj{font-size:1.06rem;line-height:1.42;max-width:42ch;margin-bottom:var(--s3)}
.mcard[class*="tg-"] .mobj{color:var(--fg)}
.src-item .n.obj{margin-top:6px;padding-left:var(--s2);border-left:2px solid var(--line)}
.src-item .n .ok{display:block;color:var(--rose);font-size:.68rem;margin-bottom:2px}

/* ---------- cut out portraits, for the people cards ----------
   Black and white so a photograph sits beside a drawing without fighting it,
   and so the five category grounds stay the only colour in the grid. */
.et-photo{position:absolute;bottom:0;height:56%;margin:0;z-index:2;
  filter:grayscale(1) contrast(1.12) brightness(1.02);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),filter .3s ease}
.et-photo img{height:100%;width:auto;display:block}
.etile.cover:hover .et-photo,.etile.cover:focus-visible .et-photo{
  transform:translateY(-7px) scale(1.05);filter:grayscale(1) contrast(1.3)}
.b-left .et-photo{left:2%}
.b-right .et-photo{right:1%}
.b-mid .et-photo{left:50%;transform:translateX(-50%)}
.etile.cover.b-mid:hover .et-photo,.etile.cover.b-mid:focus-visible .et-photo{
  transform:translateX(-50%) translateY(-7px) scale(1.05)}
.mphoto{filter:grayscale(1) contrast(1.12)}
.photocred{position:absolute;left:0;bottom:0;z-index:3;font-family:var(--mono);
  font-size:.62rem;line-height:1.4;color:var(--faint);max-width:26ch;margin:0}
@media(max-width:640px){.et-photo{height:54%}}

/* ---------- quiz gating, feedback and the prize ---------- */
.qopt .tick,.btn .tick{margin-left:6px;color:var(--mint)}
.btn.locked,.btn.locked:hover{opacity:.32;cursor:not-allowed;filter:none}
.btn.won{border-color:var(--mint);color:var(--mint)}
.btn.won.btn:not(.ghost){background:none}
.qbonus{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;padding:var(--s3) 0;border-top:1px dashed var(--line);margin-top:var(--s2)}
.qfb{background:var(--screen);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);font-size:.95rem;line-height:1.5;color:var(--meta);max-width:64ch}
.fb-yes{color:var(--mint);font-weight:500}
.fb-no{color:var(--rose);font-weight:500}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--rose);
  cursor:pointer;border-bottom:1px solid rgba(223,161,146,.4)}
.prizehint{color:var(--mint);margin-top:var(--s1)}
.qprize{background:var(--panel);border:1px solid var(--line);border-radius:var(--rc);
  padding:var(--s5) var(--s4);margin-top:var(--s4)}
.qprize .pline{font-size:1.6rem;line-height:1.22;margin-bottom:var(--s2)}
.qprize .psub{color:var(--meta);max-width:56ch}
.rbelle.big{max-width:260px}