/* Energetics — heartwood-char palette, ember = energy, moss = living biomass.
   Type: Space Grotesk (display) · IBM Plex Sans (UI) · IBM Plex Mono (data). */

/* Theme: each colour is light-dark(LIGHT, DARK). color-scheme (set per data-theme by theme.js)
   picks which value resolves — so dark stays as designed and a warm light theme comes for free. */
:root{ color-scheme: light dark; }            /* default = follow the OS (system) */
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="system"]{ color-scheme: light dark; }

:root{
  --char:    light-dark(#f3eee2, #16130f);   /* app bg — warm paper / burnt heartwood */
  --bark:    light-dark(#fbf8f0, #1f1912);   /* panel */
  --bark-2:  light-dark(#efe9da, #2a2219);   /* raised / hover */
  --bark-3:  light-dark(#e5ddca, #352b20);   /* active */
  --paper:   light-dark(#231d13, #f1e9da);   /* primary text */
  --paper-dim:   light-dark(#5d5340, #b3a892);
  --paper-faint: light-dark(#8a7f66, #7d735f);
  --line:    light-dark(rgba(40,30,16,.12), rgba(241,233,218,.10));
  --line-2:  light-dark(rgba(40,30,16,.18), rgba(241,233,218,.18));

  --ember:#e0712d;                           /* primary accent — reads on both */
  --flame:   light-dark(#b5631a, #f4a93b);   /* hot highlight (darker amber on light) */
  --moss:    light-dark(#5f7a45, #8aa06a);   /* living biomass */

  --inset:   light-dark(#efe8d8, #1b1610);   /* diagram-panel bg */
  --inset-2: light-dark(#e9e1cf, #19140f);   /* deeper inset bg */
  --topbar:  light-dark(#efe8d9, #1b1610);   /* header bg */
  --viewer-bg: light-dark(#fbfaf7, #0d0b08); /* 3D viewport bg */

  --radius:10px;
  --sidebar-w:300px;
  --topbar-h:64px;

  /* energy gradient: cool moss (structural carbs) -> hot ember (lipids/terpenes) */
  --grad-energy:linear-gradient(90deg,#8aa06a 0%,#b9a96a 32%,#d98a3a 60%,#e0712d 82%,#f4a93b 100%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--char); color:var(--paper);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2{font-family:"Space Grotesk",sans-serif; margin:0; font-weight:600; letter-spacing:-.01em}
a{color:inherit}
::selection{background:rgba(224,113,45,.32)}

/* ---------- top bar ---------- */
.topbar{
  height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 22px; border-bottom:1px solid var(--line);
  background:var(--topbar);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:13px; min-width:0}
.mark{width:38px; height:38px; flex:0 0 auto; filter:drop-shadow(0 0 10px rgba(224,113,45,.35))}
.brand-text h1{font-size:21px; line-height:1}
.brand-text p{margin:2px 0 0; font-size:12.5px; color:var(--paper-dim)}
.topbar-meta{display:flex; align-items:center; gap:18px; flex:0 0 auto}
.meta-stat{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--paper-faint);
  text-transform:uppercase; letter-spacing:.08em}
.paper-link{font-size:13px; color:var(--paper-dim); text-decoration:none; padding-bottom:1px;
  border-bottom:1px solid var(--line-2); transition:color .15s,border-color .15s}
.paper-link:hover{color:var(--flame); border-color:var(--flame)}

/* ---------- layout ---------- */
.layout{display:grid; grid-template-columns:var(--sidebar-w) 1fr; height:calc(100vh - var(--topbar-h))}

/* ---------- sidebar ---------- */
.sidebar{border-right:1px solid var(--line); background:var(--bark);
  display:flex; flex-direction:column; min-height:0}
.search-wrap{padding:14px 14px 10px}
#search{
  width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--line-2);
  background:var(--char); color:var(--paper); font-family:inherit; font-size:13.5px;
}
#search::placeholder{color:var(--paper-faint)}
#search:focus{outline:none; border-color:var(--ember); box-shadow:0 0 0 3px rgba(224,113,45,.14)}

.nav{overflow-y:auto; flex:1; padding:2px 8px 10px; scrollbar-width:thin;
  scrollbar-color:var(--bark-3) transparent}
.nav::-webkit-scrollbar{width:9px}
.nav::-webkit-scrollbar-thumb{background:var(--bark-3); border-radius:8px}

.cat{margin-top:10px}
.cat-head{display:flex; align-items:center; gap:8px; padding:5px 8px 5px 6px;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--paper-dim)}
.cat-dot{width:8px; height:8px; border-radius:2px; flex:0 0 auto}
.cat-count{margin-left:auto; color:var(--paper-faint); font-size:10px}

.mol{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:7px 8px; border-radius:8px; border:1px solid transparent; cursor:pointer;
  background:transparent; color:var(--paper); font-family:inherit; transition:background .12s,border-color .12s}
.mol:hover{background:var(--bark-2)}
.mol.active{background:var(--bark-3); border-color:var(--line-2)}
.mol-thumb{width:48px; height:38px; border-radius:5px; flex:0 0 auto; object-fit:contain;
  background:transparent}
.mol-meta{min-width:0; flex:1; display:flex; flex-direction:column; gap:1px}
.mol-nm{font-size:13px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mol-fm{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--paper-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mol-energy{width:4px; align-self:stretch; border-radius:3px; flex:0 0 auto; opacity:.85}

.sidebar-foot{margin:0; padding:10px 14px; border-top:1px solid var(--line);
  font-size:11px; color:var(--paper-faint); display:flex; align-items:center; gap:6px}
.legend-swatch{display:inline-block; width:46px; height:7px; border-radius:4px; background:var(--grad-energy)}

/* ---------- stage ---------- */
.stage{display:flex; flex-direction:column; min-width:0; min-height:0}
.stage-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:16px 22px 12px}
.mol-id{min-width:0}
#molName{font-size:22px; line-height:1.15}
.mol-sub{display:flex; align-items:center; gap:12px; margin-top:5px; flex-wrap:wrap}
.formula{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--flame)}
.tag{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--paper-dim); border:1px solid var(--line-2); border-radius:99px; padding:2px 9px}

.engine-toggle{display:inline-flex; background:var(--bark); border:1px solid var(--line-2);
  border-radius:9px; padding:3px; flex:0 0 auto}
.eng{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--paper-dim);
  background:transparent; border:0; padding:6px 13px; border-radius:6px; cursor:pointer; transition:.14s}
.eng:hover{color:var(--paper)}
.eng[aria-pressed="true"]{background:var(--ember); color:#1a1208; font-weight:600}

/* viewer */
.viewport{position:relative; flex:1; margin:0 22px; border-radius:var(--radius);
  border:1px solid var(--line-2); overflow:hidden; min-height:240px;
  background:var(--viewer-bg);}
body[data-viewer-bg="light"] .viewport{background:#fbfaf7}
.engine-host{position:absolute; inset:0}
.engine-host canvas{display:block}
/* tame Mol*'s own chrome inside our embedded host — we provide our own controls */
.engine-host .msp-viewport-controls,
.engine-host .msp-viewport-top-right-controls{display:none !important}
.viewport-empty{position:absolute; inset:0; display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center; color:var(--paper-faint); text-align:center; padding:24px}
.viewport-empty p{max-width:280px; margin:0; font-size:13.5px}

.stage-controls{display:flex; align-items:center; gap:8px; padding:12px 22px; flex-wrap:wrap}
.ctl{font-family:"IBM Plex Sans",sans-serif; font-size:12.5px; color:var(--paper);
  background:var(--bark); border:1px solid var(--line-2); border-radius:8px; padding:7px 12px;
  cursor:pointer; text-decoration:none; transition:.14s}
.ctl:hover{background:var(--bark-2); border-color:var(--paper-faint)}
.ctl[aria-pressed="true"]{background:var(--moss); color:#15180e; border-color:transparent; font-weight:600}
.ctl-hint{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--paper-faint)}

/* ---------- readout (signature energy gauge + facts) ---------- */
.readout{display:grid; grid-template-columns:1.1fr 1fr; gap:16px 30px; padding:6px 22px 22px;
  border-top:1px solid var(--line); margin-top:4px}
.energy{grid-column:1 / -1}
.energy-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px}
.energy-head label{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--paper-dim)}
.hhv-num{font-family:"Space Grotesk",sans-serif; font-size:19px; font-weight:600; color:var(--flame)}
.gauge{position:relative; height:14px; border-radius:8px; background:var(--bark);
  border:1px solid var(--line-2); overflow:hidden}
.gauge-fill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:8px 0 0 8px;
  background:var(--grad-energy); transition:width .6s cubic-bezier(.2,.7,.2,1)}
.gauge-ref{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--paper);
  opacity:.55; transform:translateX(-1px)}
.gauge-ref::after{content:"whole-tree mean"; position:absolute; top:-15px; left:50%;
  transform:translateX(-50%); white-space:nowrap; font-family:"IBM Plex Mono",monospace;
  font-size:9px; color:var(--paper-faint)}
.gauge-cap{margin:7px 0 0; font-size:11.5px; color:var(--paper-faint)}

.facts{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-content:start}
.facts dt{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--paper-faint); align-self:center}
.facts dd{margin:0; font-size:13px; color:var(--paper); word-break:break-word}
.facts dd.mono{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--paper-dim)}
.note{grid-column:1 / -1; margin:2px 0 0; font-size:12.5px; color:var(--paper-dim);
  border-left:2px solid var(--ember); padding-left:11px}

/* ---------- top nav (shared) ---------- */
a.brand{text-decoration:none; color:inherit}
.topnav{display:flex; gap:6px; align-items:center}
.topnav a{font-family:"IBM Plex Sans",sans-serif; font-size:13.5px; color:var(--paper-dim);
  white-space:nowrap; text-decoration:none; padding:7px 13px; border-radius:8px; transition:.14s}
.topnav a:hover{color:var(--paper); background:var(--bark-2)}
.topnav a[aria-current="page"]{color:var(--flame); background:var(--bark)}

/* theme toggle (light / dark / system) */
.theme-toggle{display:inline-flex; background:var(--bark); border:1px solid var(--line-2);
  border-radius:8px; padding:2px; gap:1px; flex:0 0 auto}
.theme-toggle button{width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:6px; cursor:pointer; color:var(--paper-dim);
  font-size:14px; line-height:1; transition:.14s}
.theme-toggle button:hover{color:var(--paper); background:var(--bark-2)}
.theme-toggle button[aria-pressed="true"]{background:var(--ember); color:#1a1208}

/* ===================================================================== */
/* Explainer page (learn.html)                                           */
/* ===================================================================== */
body.doc{overflow-y:auto}
.doc-main{max-width:860px; margin:0 auto; padding:0 24px 80px}

/* hero / thesis */
.hero{padding:52px 0 30px; border-bottom:1px solid var(--line)}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ember); margin:0 0 14px}
.hero-title{font-size:clamp(34px,6vw,56px); line-height:1.03; letter-spacing:-.02em; max-width:14ch}
.hero-title em{font-style:normal; color:var(--flame)}
.lede{font-size:clamp(16px,2.2vw,19px); line-height:1.6; color:var(--paper-dim); max-width:62ch; margin:20px 0 0}
.lede strong{color:var(--paper); font-weight:600}
.lede a, .inline-link{color:var(--flame); text-decoration:none; border-bottom:1px solid rgba(244,169,59,.35)}
.lede a:hover, .inline-link:hover{border-color:var(--flame)}

/* flow diagram (the signature): capture strip + fan of biosynthetic pathways */
.flow{margin:34px 0 6px; padding:24px; background:var(--inset); border:1px solid var(--line-2); border-radius:14px}
.capture{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap}
.capture .inputs{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.node{display:inline-flex; flex-direction:column; gap:1px; padding:8px 12px; border-radius:9px;
  background:var(--bark-2); border:1px solid var(--line-2); font-family:"IBM Plex Sans",sans-serif;
  font-size:13px; color:var(--paper); text-decoration:none; line-height:1.15; white-space:nowrap}
.node small{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--paper-faint)}
.n-sun{border-left:3px solid var(--flame)} .n-air{border-left:3px solid #9aa7b0}
.n-water{border-left:3px solid #6f93a8} .n-soil{border-left:3px solid var(--moss)}
.n-photo{background:var(--bark-3); border-left:3px solid var(--ember)}
.n-glucose{background:var(--bark-3); border-left:3px solid var(--flame)}
.flow-link{color:var(--paper-faint); font-size:18px}
.flow-link::before{content:"→"}
.fan-intro{margin:18px 0 12px; font-size:13.5px; color:var(--paper-dim); text-align:center}
.fan{display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap}
.fan-hub{flex:0 0 auto}
.fan-rows{display:flex; flex-direction:column; gap:9px; border-left:2px solid var(--line-2); padding-left:16px}
.flow figcaption{margin-top:16px; font-size:12px; color:var(--paper-faint); text-align:center}

/* horizontal reaction chain (hero fan rows) */
.rxn{display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0}
.rxn .arr{color:var(--paper-faint); font-size:13px}
.rxn .met{padding:6px 11px; border-radius:8px; background:var(--bark-2); border:1px solid var(--line-2);
  font-size:12.5px; color:var(--paper); white-space:nowrap}
.rxn .met small{font-family:"IBM Plex Mono",monospace; font-size:8.5px; color:var(--paper-faint); margin-left:3px}
.rxn .met.start{border-color:var(--flame); color:var(--flame)}
.rxn .met.end{border:1px solid transparent; border-image:var(--grad-energy) 1; padding:0; background:var(--bark-2)}
.rxn .met.end a{display:block; padding:6px 12px; color:var(--paper); text-decoration:none; font-weight:500}
.rxn .met.end a small{color:var(--ember); margin-left:3px}
.rxn .met.end a:hover{color:var(--flame)}

/* vertical reaction pathway (go-deeper diagrams) */
.pathway{list-style:none; margin:16px 0 4px; padding:18px 14px; display:flex; flex-direction:column;
  align-items:center; gap:0; background:var(--inset-2); border:1px solid var(--line-2); border-radius:12px}
.pathway .head{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--paper-faint); margin-bottom:10px}
.pathway .met{padding:7px 14px; border-radius:8px; background:var(--bark-2); border:1px solid var(--line-2);
  font-size:13px; color:var(--paper); text-align:center; line-height:1.2; max-width:96%}
.pathway .met small{display:block; font-family:"IBM Plex Mono",monospace; font-size:9px; color:var(--paper-faint); margin-top:1px}
.pathway .met.start{border-color:var(--flame); color:var(--flame)}
.pathway .met.end{border:1px solid transparent; border-image:var(--grad-energy) 1}
.pathway .met.end a{color:var(--paper); text-decoration:none}
.pathway .met.end a:hover{color:var(--flame)}
.pathway .met .metlink, .rxn .met .metlink{color:inherit; text-decoration:none; border-bottom:1px dotted var(--paper-faint)}
.pathway .met .metlink:hover, .rxn .met .metlink:hover{color:var(--flame); border-color:var(--flame)}
.pathway .step{display:flex; align-items:center; gap:8px; min-height:28px; padding:3px 0}
.pathway .step::before{content:"↓"; font-size:15px; color:var(--ember); line-height:1; flex:0 0 auto}
.pathway .step .enz{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--flame); white-space:nowrap}
.pathway .step .cof{font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--moss); white-space:nowrap}
.pathway-pair{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:flex-start; margin:16px 0 4px}
.pathway-pair .pathway{flex:1 1 220px; margin:0}
.pathway-cap{text-align:center; font-size:11.5px; color:var(--paper-faint); margin:9px 0 2px}
details .pathway, details .pathway-pair{margin-left:18px; margin-right:18px}

/* Figure-A journal plate — native HTML, scaled to fit (never rasterized, so never cropped) */
.figplate{padding:30px 0 10px}
.figA-scaler{width:100%; overflow:hidden; border-radius:12px; border:1px solid var(--line-2);
  box-shadow:0 10px 34px rgba(0,0,0,.42); background:#fff; aspect-ratio:1660 / 1400}
.figA-stage{width:1660px; transform-origin:top left; background:#fff; padding:30px 30px 34px;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.figA-stage, .figA-stage *{box-sizing:border-box}
.figplate-note{margin:13px 4px 0; font-size:12.5px; color:var(--paper-faint); text-align:center; line-height:1.5}

/* chapters */
.chapter{padding:40px 0; border-bottom:1px solid var(--line)}
.chapter-head{display:flex; align-items:baseline; gap:14px}
.step{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ember); font-weight:600;
  border:1px solid var(--line-2); border-radius:7px; padding:3px 8px; flex:0 0 auto}
.chapter-head h3{font-family:"Space Grotesk",sans-serif; font-size:clamp(22px,3.4vw,30px); margin:0;
  letter-spacing:-.01em; line-height:1.1}
.standfirst{font-size:17px; color:var(--flame); margin:14px 0 10px; font-weight:500}
.chapter p{font-size:15.5px; line-height:1.66; color:var(--paper-dim); max-width:64ch; margin:0 0 14px}
.chapter p strong{color:var(--paper); font-weight:600}
.chapter p em{color:var(--paper); font-style:italic}

/* molecule cross-link chips — cards with a large, transparent molecule render */
.molchips{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 16px; max-width:none !important}
.molref{display:flex; flex-direction:column; align-items:center; gap:6px; width:126px; padding:10px 9px 9px;
  border-radius:12px; background:var(--bark); border:1px solid var(--line-2); text-decoration:none;
  color:var(--paper-dim); font-size:12px; line-height:1.2; text-align:center; transition:.14s}
.molref img{width:100%; height:84px; object-fit:contain; background:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.molref span{display:block}
.molref small{font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--paper-faint)}
.molref:hover{background:var(--bark-2); border-color:var(--ember); color:var(--flame); transform:translateY(-2px)}

/* "go deeper" disclosures */
details{margin:8px 0 4px; background:var(--bark); border:1px solid var(--line-2); border-radius:11px;
  overflow:hidden}
summary{cursor:pointer; list-style:none; padding:13px 16px; font-family:"IBM Plex Mono",monospace;
  font-size:12.5px; letter-spacing:.04em; color:var(--flame); display:flex; align-items:center; gap:10px}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸"; color:var(--ember); transition:transform .18s}
details[open] summary::before{transform:rotate(90deg)}
summary:hover{background:var(--bark-2)}
details > p, details > ul{padding:0 18px; margin:0 0 14px; font-size:14.5px; line-height:1.62; color:var(--paper-dim); max-width:64ch}
details > p:first-of-type{padding-top:4px}
details p strong{color:var(--paper)}
details p em{color:var(--paper-dim); font-style:italic}
.eq{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--flame); white-space:nowrap}
.myth{border-left:2px solid var(--moss); margin-left:18px !important; padding-left:12px !important;
  font-size:13.5px !important}
.myth strong{color:var(--moss) !important}

/* deep-time vignette (charcoal chapter) */
.vignette{margin:26px 0 6px; padding:22px 24px; border:1px solid var(--line-2); border-left:3px solid var(--ember);
  border-radius:12px; background:var(--inset)}
.vignette .v-eyebrow{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--paper-faint); margin-bottom:5px}
.vignette h4{font-family:"Space Grotesk",sans-serif; font-size:20px; font-weight:600; margin:0 0 10px; color:var(--flame)}
.vignette p{font-size:14.5px; line-height:1.62; color:var(--paper-dim); max-width:64ch; margin:0 0 12px}
.vignette p:last-child{margin-bottom:0}
.vignette p strong{color:var(--paper); font-weight:600}
.vignette p em{color:var(--paper); font-style:italic}

/* nutrient list */
.nutrients{list-style:none; padding:0; margin:6px 0 16px; display:grid; gap:10px; max-width:64ch}
.nutrients li{padding-left:16px; position:relative; font-size:15px; line-height:1.55; color:var(--paper-dim)}
.nutrients li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:2px;
  background:var(--moss)}
.nutrients b{color:var(--paper)}

/* closing + energy comparison */
.closing{padding:44px 0 10px}
.closing h3{font-family:"Space Grotesk",sans-serif; font-size:clamp(22px,3.4vw,30px); margin:0 0 14px}
.closing p{font-size:15.5px; line-height:1.66; color:var(--paper-dim); max-width:64ch; margin:0 0 16px}
.closing em{color:var(--paper); font-style:italic}
.hhv-compare{display:grid; gap:9px; margin:22px 0 26px}
.hhv-row{display:grid; grid-template-columns:170px 1fr auto; align-items:center; gap:12px}
.hhv-lab{font-size:12.5px; color:var(--paper-dim); text-align:right}
.hhv-bar{height:13px; border-radius:7px; background:var(--bark); border:1px solid var(--line-2); overflow:hidden}
.hhv-bar i{display:block; height:100%; background:var(--grad-energy); border-radius:7px}
.hhv-val{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--flame)}
.closing-cta{margin-top:8px}
.btn-primary{display:inline-block; background:var(--ember); color:#1a1208; font-weight:600; font-size:14.5px;
  text-decoration:none; padding:11px 20px; border-radius:9px; transition:.14s}
.btn-primary:hover{background:var(--flame)}
.doc-foot{padding:30px 0 0; border-top:1px solid var(--line); margin-top:30px}
.doc-foot p{font-size:12px; color:var(--paper-faint); max-width:64ch}
.doc-foot em{font-style:italic}

/* part divider (Part II — releasing it) */
.part-intro{padding:56px 0 6px; border-top:1px solid var(--line)}
.part-intro h2{font-family:"Space Grotesk",sans-serif; font-size:clamp(30px,5vw,46px); line-height:1.05;
  letter-spacing:-.02em; margin:8px 0 0}
.part-intro h2 em{font-style:normal; color:var(--flame)}
.part-intro .lede{margin-top:18px}
.part-intro > p{font-size:15.5px; line-height:1.66; color:var(--paper-dim); max-width:64ch; margin:18px 0 0}

/* tree-part composition stacked bars */
.comp-figure{margin:20px 0 8px; padding:20px; background:var(--inset); border:1px solid var(--line-2); border-radius:14px}
.comp-legend{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:16px}
.comp-legend span{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--paper-dim)}
.comp-legend i{width:12px; height:12px; border-radius:3px; flex:0 0 auto}
.comp{display:grid; grid-template-columns:104px 1fr; gap:9px 14px; align-items:center}
.comp-lab{font-size:12.5px; color:var(--paper); text-align:right; line-height:1.15}
.comp-lab small{display:block; font-family:"IBM Plex Mono",monospace; font-size:8.5px; color:var(--paper-faint); text-transform:uppercase; letter-spacing:.04em}
.comp-bar{display:flex; height:24px; border-radius:6px; overflow:hidden; border:1px solid var(--line-2)}
.comp-bar i{height:100%; transition:filter .14s}
.comp-bar i:hover{filter:brightness(1.18)}
.seg-cell{background:#c2b06a} .seg-hemi{background:#8aa06a} .seg-lig{background:#d98a3a}
.seg-ext{background:#e0712d} .seg-oth{background:#5b5346}
.comp-cap{margin:15px 0 0; font-size:11.5px; color:var(--paper-faint)}

/* thermal-decomposition track (fire chapter) */
.thermo{margin:16px 0 4px; padding:18px 16px 14px; background:var(--inset-2); border:1px solid var(--line-2); border-radius:12px}
.thermo-row{display:grid; grid-template-columns:128px 1fr; gap:12px; align-items:center; margin:8px 0}
.thermo-lab{font-size:12px; color:var(--paper); text-align:right; line-height:1.15}
.thermo-lab small{display:block; font-family:"IBM Plex Mono",monospace; font-size:8.5px; color:var(--paper-faint)}
.thermo-track{position:relative; height:15px; background:var(--bark); border-radius:5px; border:1px solid var(--line-2)}
.thermo-bar{position:absolute; top:-1px; bottom:-1px; border-radius:5px; background:var(--grad-energy); opacity:.92}
.thermo-axis{display:grid; grid-template-columns:128px 1fr; gap:12px; margin-top:8px}
.thermo-ticks{display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace; font-size:9px; color:var(--paper-faint)}

@media (max-width:760px){
  .flow-link{transform:rotate(90deg)}
  .fan{flex-direction:column; align-items:stretch}
  .fan-hub{align-self:center}
  .fan-rows{border-left:0; border-top:2px solid var(--line-2); padding-left:0; padding-top:14px}
  .molref{width:calc(50% - 5px)}
  .hhv-row{grid-template-columns:120px 1fr auto}
  .hhv-lab{font-size:11px}
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .topnav a{padding:6px 9px; font-size:12.5px}
  :root{--sidebar-w:100%}
  .layout{grid-template-columns:minmax(0,1fr); height:auto}
  .sidebar{border-right:0; border-bottom:1px solid var(--line); max-height:46vh; min-width:0}
  .stage{min-height:80vh; min-width:0}
  .stage-head{flex-wrap:wrap}
  .mol-id{min-width:0}
  #molName{overflow-wrap:anywhere}
  .viewport{min-height:340px}
  .readout{grid-template-columns:1fr}
  .facts{grid-template-columns:auto minmax(0,1fr)}
  .facts dd.mono{overflow-wrap:anywhere}
  .topbar{padding:0 12px; gap:8px}
  .topbar-meta{gap:8px}
  .topbar-meta .meta-stat{display:none}
  .brand-text p{display:none}
}
@media (max-width:540px){
  .brand-text{display:none}            /* keep just the logo mark; free space for nav + theme */
  .topnav a{padding:6px 7px; font-size:12px}
  .theme-toggle button{width:26px; height:24px; font-size:13px}
}
/* belt-and-suspenders: never allow a stray child to create a horizontal scrollbar */
html, body{max-width:100%; overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}