@import url(vendor/fonts/fonts.css);
:root{
  --bg:#121A2B;--panel:#1B2540;--panel2:#243052;--text:#EEF2FA;--muted:#9AA6C2;
  --accent:#6CB4FF;--accent-ink:#0b1426;--accent2:#5FD38D;--warn:#F5B848;--danger:#FF6F7D;--border:#33415F;
  --radius:14px;--bar:44px;--nav:56px;
  --f-head:'Unbounded',system-ui,sans-serif;--f-body:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
body[data-topic=atoms]{--accent:#6CB4FF}
body[data-topic=medicine]{--accent:#FF6F91}
body[data-topic=tracers]{--accent:#F5B848}
body[data-topic=crystals]{--accent:#7BE0C3}
body[data-topic=bonds]{--accent:#B79CFF}
body[data-topic=hydrogen]{--accent:#5FD38D}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font:400 16px/1.55 var(--f-body);-webkit-text-size-adjust:100%}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
header.top{height:var(--bar);background:var(--bg);border-bottom:1px solid var(--border);padding:0 16px;display:flex;gap:12px;align-items:center}
header.top a.home{text-decoration:none;color:var(--text);font:600 15px var(--f-head)}
header.top .crumb{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
h1,h2,h3{font-family:var(--f-head);font-weight:600;line-height:1.2;margin:0}
h1{font-size:clamp(26px,4.4vw,48px)}
h2{font-size:clamp(20px,2.8vw,32px)}
h3{font-size:clamp(15px,1.6vw,18px)}
main{max-width:980px;margin:0 auto;padding:16px}
p{margin:0 0 8px}
p.lead,.idea{color:var(--text);font-size:clamp(17px,2.2vw,26px);line-height:1.4;margin:0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:0}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
button,.btn,select,input[type=range]{font:inherit}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:10px;
  padding:8px 14px;cursor:pointer;min-height:44px;touch-action:manipulation;text-decoration:none}
button:hover,.btn:hover{border-color:var(--accent)}
button.active,button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
input[type=range]{width:100%;accent-color:var(--accent)}
select{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px;min-height:44px}
.stage{width:100%;aspect-ratio:4/3;max-height:70vh;background:#0b1220;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;position:relative;touch-action:none}
.stage canvas{display:block;width:100%;height:100%}
.hint{color:var(--muted);font-size:14px}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);font-size:13px}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top}
.table-wrap{overflow-x:auto}
.note{border-left:4px solid var(--accent);padding:8px 12px;background:var(--panel2);border-radius:0 10px 10px 0}
footer{color:var(--muted);font-size:13px;text-align:center;padding:24px 16px}
.next-prev{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
details{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px}
details>summary{cursor:pointer;color:var(--accent);font-weight:600;min-height:32px;display:flex;align-items:center}
.caption{color:var(--muted);font-size:clamp(14px,1.5vw,17px);margin:0}
.caption b{color:var(--text)}

/* periodic-table tile: signature element */
.ptile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1/1;min-width:0;
  border:2px solid var(--accent);border-radius:14px;padding:10px 12px;background:color-mix(in srgb,var(--accent) 10%,var(--bg));
  color:var(--text);text-decoration:none}
.ptile .z{position:absolute;top:8px;left:12px;font:600 14px var(--f-head);color:var(--accent)}
.ptile .sym{font:600 clamp(40px,6vw,76px)/1 var(--f-head);color:var(--accent)}
.ptile .nm{font-size:clamp(13px,1.4vw,16px);font-weight:600;line-height:1.25;margin-top:6px}

/* ---------- slide deck ---------- */
body.deckpage{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.deck{position:relative;flex:1;min-height:0}
.slide{position:absolute;inset:0;padding:12px 20px 8px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;
  max-width:1200px;margin:0 auto;visibility:hidden;opacity:0;transition:opacity .25s}
.slide.active{visibility:visible;opacity:1}
.slide>h2{flex:none}
.slide .viz{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.slide .viz>.stage{flex:1;min-height:0;aspect-ratio:auto;max-height:none}
.slide .controls{flex:none}
.slide.title{justify-content:center;align-items:center;text-align:center;gap:16px}
.slide.title .ptile{width:clamp(96px,17vh,170px)}
.slide.title .hero{width:min(100%,760px);max-height:44vh;border-radius:var(--radius);border:1px solid var(--border);object-fit:cover}
.slide.title h1{max-width:20ch}
.slide.title .idea{max-width:46ch;color:var(--muted)}
.slide.title.active .ptile{animation:pop .6s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.bullets{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:clamp(17px,2.2vw,26px);line-height:1.35}
.bullets li{padding-left:22px;position:relative}
.bullets li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:3px;background:var(--accent)}

.deckbar{height:var(--nav);flex:none;display:flex;align-items:center;justify-content:center;gap:14px;border-top:1px solid var(--border);background:var(--bg);padding:0 12px}
.deckbar button{width:48px;min-height:44px;font-size:22px;padding:0}
.deckbar button:disabled{opacity:.3;cursor:default}
.dots{display:flex;gap:7px;align-items:center;flex-wrap:nowrap}
.dots button{width:12px;min-height:0;height:12px;padding:0;border-radius:50%;border:0;background:var(--panel2);position:relative}
.dots button::after{content:"";position:absolute;inset:-14px -3px}
.dots button.on{background:var(--accent);transform:scale(1.25)}
.count{font:600 14px var(--f-head);color:var(--muted);min-width:56px;text-align:center}
.edge{display:none}
@media (min-width:900px){
  .edge{display:flex;position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:88px;font-size:30px;padding:0;background:color-mix(in srgb,var(--panel) 80%,transparent)}
  .edge.prev{left:10px}.edge.next{right:10px}
  .edge:disabled{opacity:0;pointer-events:none}
  .slide{padding:14px 76px 8px}
}
.swipehint{position:absolute;left:50%;top:8px;font-size:14px;transform:translateX(-50%);z-index:6;background:var(--accent);color:var(--accent-ink);font-weight:700;padding:8px 16px;border-radius:999px;
  pointer-events:none;transition:opacity .6s;white-space:nowrap}
.swipehint.gone{opacity:0}

/* quiz: one question at a time */
.quiz{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.quiz .qtext{font:600 clamp(17px,2.2vw,24px)/1.35 var(--f-body)}
.quiz .opt{display:block;width:100%;text-align:left;margin:0 0 8px;justify-content:flex-start;font-size:clamp(15px,1.8vw,19px);min-height:48px}
.quiz .opt.ok{background:#12361d;border-color:var(--accent2)}
.quiz .opt.bad{background:#46182a;border-color:var(--danger)}
.quiz .why{min-height:1.4em;color:var(--muted)}
.quiz .qprog{color:var(--muted);font-size:14px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:600px){
  .slide{padding:10px 14px 6px}
  .deckbar{gap:8px}
}
[hidden]{display:none!important}

/* text-only slides: centre the content vertically instead of leaving the lower half empty */
.slide:not(.title):not(:has(.viz)){justify-content:safe center;gap:clamp(12px,2.5vh,28px)}
.slide:not(.title):not(:has(.viz))>h2{font-size:clamp(24px,3.6vw,44px)}
.slide:not(:has(.viz)) .bullets{font-size:clamp(18px,2.6vw,32px);gap:clamp(10px,2vh,22px)}
.slide:not(:has(.viz))>details{margin-top:0}
/* phone: the title slide must fit one screen */
@media (max-width:600px){
  .slide.title{gap:10px}
  .slide.title .ptile{width:clamp(72px,11vh,110px);padding:6px 8px}
  .slide.title .ptile .sym{font-size:clamp(28px,5vh,44px)}
  .slide.title .ptile .nm{display:none}
  .slide.title .hero{max-height:32vh}
  .slide.title h1{font-size:clamp(22px,6.4vw,30px)}
  .slide.title .idea{font-size:16px}
}

/* a .viz without a stretchy stage keeps its natural height (else it shrinks and its children overlap
   whatever follows); the slide scrolls instead. Only stage-based models squeeze to fit. */
.slide .viz{min-height:auto;flex:none}
.slide .viz:has(>.stage){flex:1;min-height:0}
.slide .viz>*{flex-shrink:0}
.slide .viz>.stage{flex-shrink:1}
/* swipe hint sits at the bottom of the slide so it never covers the title tile */
.swipehint{top:auto!important;bottom:10px!important}
.slide .viz:has(>.pair){flex:1;min-height:0}