*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --bg:      #0f1117;
  --surface: #1a1d27;
  --border:  #2a2d3a;
  --accent:  #6c8eff;
  --accent2: #a78bfa;
  --green:   #34d399;
  --blue:    #60a5fa;
  --brown:   #b45309;
  --text:    #e2e4ef;
  --muted:   #6b7280;
  --tab-h:   52px;
}

body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* ── Header ── */
header { padding: 2rem 2rem 0; text-align: center; }
.header-inner {
  display: inline-flex; align-items: center; gap: 0.85rem;
  justify-content: center;
}
.header-img {
  width: 52px; height: 52px; border-radius: 12px;
  object-fit: cover; flex-shrink: 0;
}
header h1 {
  font-size: 1.9rem; font-weight: 700; letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
header p { margin-top: 0.35rem; color: var(--muted); font-size: 0.9rem; }

/* ── Tab bar ── */
.tab-bar { display: flex; justify-content: center; gap: 0.25rem; margin: 1.75rem auto 0; padding: 0 1rem; max-width: 820px; }
.tab-bar button {
  flex: 1; height: var(--tab-h); border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 10px 0 0; background: var(--surface); color: var(--muted);
  font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: color 0.18s, background 0.18s;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.tab-bar button:hover { color: var(--text); }
.tab-bar button.active { background: var(--bg); color: var(--accent); border-color: var(--border); border-bottom-color: var(--bg); font-weight: 600; }
.tab-bar button svg { flex-shrink: 0; }

/* ── Main ── */
main { max-width: 920px; margin: 0 auto; padding: 0 1rem 3rem; }
.content-wrap { border: 1px solid var(--border); border-radius: 0 0 14px 14px; background: var(--surface); min-height: 420px; }

/* ── Panels ── */
.panel { display: none; padding: 1.75rem 1.75rem; animation: fadeIn 0.2s ease; }
.panel.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ── Placeholder ── */
.placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:3rem 1rem; text-align:center; }
.placeholder-icon { width:72px; height:72px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; }
.placeholder h2 { font-size:1.5rem; font-weight:700; letter-spacing:-0.3px; }
.placeholder p  { color:var(--muted); max-width:380px; line-height:1.6; font-size:0.92rem; }
#panel-calculators .placeholder-icon { background:rgba(167,139,250,.15); }
#panel-quiz        .placeholder-icon { background:rgba(52,211,153,.15); }
#panel-calculators h2 { color:var(--accent2); }
#panel-quiz        h2 { color:var(--green); }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:.5rem; }
.chip { padding:.3rem .8rem; border-radius:999px; border:1px solid var(--border); font-size:.78rem; color:var(--muted); background:var(--bg); }

/* Periodic table */
.pt-wrap{display:flex;flex-direction:column;gap:1rem}.pt-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.pt-search{color:var(--muted);font-size:.72rem;display:flex;flex-direction:column;gap:.3rem}.pt-search input{width:240px;max-width:78vw;padding:.55rem .7rem;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);outline:none}.pt-search input:focus{border-color:var(--accent)}
.pt-detail{min-height:152px;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);display:grid;grid-template-columns:170px 84px 1fr;gap:1rem;align-items:center}
.pt-atom-wrap{position:relative;width:170px;height:130px;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:radial-gradient(circle at center,rgba(108,142,255,.1),transparent 68%);cursor:grab;touch-action:none}.pt-atom-wrap:active{cursor:grabbing}.pt-atom-canvas{display:block;width:100%;height:100%}.pt-drag-hint{position:absolute;left:0;right:0;bottom:5px;text-align:center;color:var(--muted);font-size:.6rem;pointer-events:none}
.pt-identity{width:84px;height:84px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(108,142,255,.13);border:1px solid rgba(108,142,255,.45)}.pt-atomic,.pt-mass-small{font-size:.68rem;color:var(--muted)}.pt-symbol-big{font-size:2rem;font-weight:700;line-height:1.05}
.pt-info-head{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin-bottom:.55rem}.pt-info-name{font-size:1.12rem;font-weight:700}.pt-category{color:var(--accent2);font-size:.72rem}.pt-facts{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:.48rem 1rem}.pt-fact-label{display:block;color:var(--muted);font-size:.63rem;text-transform:uppercase;letter-spacing:.05em}.pt-fact-value{display:block;margin-top:.12rem;font-size:.8rem;overflow-wrap:anywhere}.pt-config{grid-column:span 2}
.pt-scroll{overflow-x:auto;padding-bottom:.3rem}.periodic-table{min-width:810px;display:grid;grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(9,48px);gap:3px}.pt-element{border:1px solid transparent;border-radius:5px;padding:3px;background:rgba(108,142,255,.1);color:var(--text);cursor:pointer;text-align:left;min-width:0;transition:transform .12s,border-color .12s,filter .12s}.pt-element:hover{transform:translateY(-2px);filter:brightness(1.25)}.pt-element.selected{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}.pt-element.dimmed{opacity:.18}.pt-z{display:block;color:var(--muted);font-size:.55rem;line-height:1}.pt-symbol{display:block;font-size:.94rem;font-weight:700;line-height:1.05;margin-top:3px}
.pt-legend{display:flex;flex-wrap:wrap;gap:.4rem .8rem;color:var(--muted);font-size:.67rem}.pt-legend-item{display:flex;align-items:center;gap:.3rem}.pt-dot{width:8px;height:8px;border-radius:2px}.cat-alkali{background:rgba(245,158,11,.18)}.cat-alkaline{background:rgba(251,191,36,.14)}.cat-transition{background:rgba(108,142,255,.16)}.cat-post{background:rgba(96,165,250,.13)}.cat-metalloid{background:rgba(52,211,153,.15)}.cat-nonmetal{background:rgba(167,139,250,.17)}.cat-halogen{background:rgba(244,114,182,.15)}.cat-noble{background:rgba(34,211,238,.15)}.cat-lanthanide{background:rgba(251,113,133,.14)}.cat-actinide{background:rgba(248,113,113,.14)}
@media(max-width:700px){.tab-bar{overflow-x:auto;justify-content:flex-start}.tab-bar button{min-width:130px}.pt-detail{grid-template-columns:1fr 68px}.pt-atom-wrap{grid-column:1/-1;width:100%;height:150px}.pt-identity{width:68px;height:76px}.pt-facts{grid-template-columns:repeat(2,minmax(90px,1fr))}.pt-config{grid-column:span 2}.panel{padding:1rem}}

/* ══════════════════════════════════════
   Kp SIMULATOR
══════════════════════════════════════ */
.sim { display:flex; flex-direction:column; gap:1rem; }

/* Header row */
.sim-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.75rem; }
.sim-title  { font-size:1.2rem; font-weight:700; color:var(--accent); }
.sim-sub    { color:var(--muted); font-size:0.79rem; margin-top:.25rem; line-height:1.5; max-width:500px; }
.rxn-badge  { display:flex; align-items:center; gap:.55rem; border:1px solid var(--border); border-radius:8px; padding:.4rem .85rem; background:var(--bg); font-size:1rem; font-weight:600; white-space:nowrap; }
.rxn-n2o4 { color:#94a3b8; }
.rxn-no2  { color:#f59e0b; }
.rxn-arr  { color:var(--muted); }

/* Sliders */
.sliders { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.9rem 1.1rem; display:flex; flex-direction:column; gap:.75rem; }
.sl-row  { display:grid; grid-template-columns:1.1rem 1fr 1fr 80px; align-items:center; gap:.6rem; }
.sl-icon { font-size:.9rem; line-height:1; }
.sl-lbl-wrap { display:flex; flex-direction:column; gap:2px; }
.sl-label { font-size:.82rem; color:var(--muted); white-space:nowrap; }
.sl-badge { font-size:.62rem; padding:.1rem .38rem; border-radius:3px; width:fit-content; }
.sl-badge-t  { background:rgba(108,142,255,.12); color:var(--accent); }
.sl-badge-ok { background:rgba(52,211,153,.12);  color:var(--green); }
.sl-val { text-align:right; font-size:.88rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }

input[type=range] { -webkit-appearance:none; width:100%; height:5px; border-radius:3px; background:var(--border); outline:none; cursor:pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:17px; height:17px; border-radius:50%; background:var(--accent); cursor:pointer; transition:transform .15s; }
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.2); }

/* Gas chamber */
.chamber-wrap { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.chamber-head { padding:.38rem .8rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); background:var(--bg); border-bottom:1px solid var(--border); }
.gas-chamber  { display:flex; height:80px; }
.g-n2o4 { background:#1c2743; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#94a3b8; overflow:hidden; transition:width .45s cubic-bezier(.4,0,.2,1); }
.g-no2  { background:rgba(180,83,9,.42); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fbbf24; overflow:hidden; transition:width .45s cubic-bezier(.4,0,.2,1); }
.g-name { font-size:.82rem; font-weight:600; }
.g-hint { font-size:.6rem; opacity:.6; margin-top:1px; }

/* ── Step-by-step calc box ── */
.calc-box {
  background:#080b12; border:1px solid var(--border); border-radius:10px;
  padding:.9rem 1.1rem; overflow-x:auto;
}
.calc-box-title { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.7rem; }
.calc-steps { display:flex; flex-direction:column; gap:0; font-family:'Courier New','Consolas',monospace; font-size:.8rem; }
.cs-label { font-family:'Segoe UI',system-ui,sans-serif; font-size:.68rem; color:var(--muted); margin-bottom:.1rem; padding-left:.1rem; }
.cs-line  { color:var(--text); line-height:1.9; white-space:nowrap; }
.cs-arrow { font-family:'Segoe UI',system-ui,sans-serif; color:var(--muted); font-size:.72rem; padding:.08rem 0 .08rem .3rem; white-space:nowrap; }
.cs-sep   { border-top:1px solid var(--border); margin:.4rem 0; }

/* Highlighted values */
.hc  { color:var(--accent2); font-weight:700; }
.hp  { color:var(--blue); font-weight:700; }
.hkp { color:var(--accent); font-weight:700; font-size:.95rem; }

/* Kc line at bottom */
.kc-line { font-family:'Segoe UI',system-ui,sans-serif; font-size:.74rem; color:var(--muted); margin-top:.55rem; padding-top:.55rem; border-top:1px solid var(--border); }
.kc-line .hkc { color:var(--accent2); }
.kc-line .hkp2 { color:var(--accent); font-weight:600; }

/* Stats row */
.stats-row { display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:.7rem; }
@media(max-width:600px) {
  .stats-row { grid-template-columns:1fr; }
  .sl-row    { grid-template-columns:1.1rem 1fr 1fr 70px; }
  .calc-steps { font-size:.7rem; }
}
.stat-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.8rem .9rem; transition:border-color .35s, box-shadow .35s; }
.sc-lbl    { font-size:.67rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.38rem; }

/* Kp card */
.kp-card.flash-temp  { border-color:var(--accent); box-shadow:0 0 14px rgba(108,142,255,.3); }
.kp-card.flash-press { border-color:var(--green);  box-shadow:0 0 14px rgba(52,211,153,.25); }
.kp-num  { font-size:1.06rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.kp-unit { font-size:.67rem; color:var(--muted); margin-top:1px; }
.kp-tag  { display:inline-block; margin-top:.4rem; font-size:.65rem; padding:.16rem .45rem; border-radius:4px; background:rgba(108,142,255,.1); color:var(--accent); transition:background .3s, color .3s; }
.kp-tag.t-green { background:rgba(52,211,153,.1); color:var(--green); }

/* Pressure bars */
.pb-row   { display:grid; grid-template-columns:44px 1fr 72px; align-items:center; gap:.35rem; margin-bottom:.4rem; }
.pb-sp    { font-size:.74rem; color:var(--muted); }
.pb-track { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.pb-fill  { height:100%; border-radius:4px; transition:width .45s cubic-bezier(.4,0,.2,1); }
.pb-blue  { background:#475569; }
.pb-amber { background:var(--brown); }
.pb-val   { font-size:.74rem; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.ptot-row { font-size:.72rem; color:var(--muted); margin-top:.3rem; }
.ptot-row span { color:var(--text); font-weight:600; }

/* Dissociation */
.big-alpha  { font-size:1.7rem; font-weight:700; color:var(--accent2); font-variant-numeric:tabular-nums; }
.alpha-sub  { font-size:.67rem; color:var(--muted); margin-top:.2rem; }

/* Insight */
.insight { padding:.58rem 1rem; border-radius:8px; border:1px solid var(--border); background:var(--bg); font-size:.8rem; color:var(--muted); text-align:center; line-height:1.5; transition:border-color .35s, color .35s; }
.insight.i-temp  { border-color:var(--accent); color:var(--accent); }
.insight.i-press { border-color:var(--green);  color:var(--green); }

/* ── Sim sub-nav ── */
.sim-subnav { display:flex; gap:.5rem; margin-bottom:1.25rem; border-bottom:1px solid var(--border); padding-bottom:.75rem; }
.subnav-btn { padding:.32rem .85rem; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); font-size:.82rem; font-weight:500; cursor:pointer; transition:all .18s; }
.subnav-btn:hover { color:var(--text); border-color:var(--border); }
.subnav-btn.active { background:rgba(108,142,255,.12); color:var(--accent); border-color:rgba(108,142,255,.4); }

/* ── Sub-sim containers ── */
.subsim { display:none; }
.subsim.active { display:block; }

/* ── Orbital viewer ── */
.orbital-wrap { display:flex; flex-direction:column; gap:1rem; }
.orbital-top { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.75rem; }
.orb-selector { display:flex; flex-direction:column; gap:.4rem; align-items:flex-end; }
.orb-family-row { display:flex; gap:.3rem; }
.orb-family-btn { padding:.26rem .68rem; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--muted); font-size:.82rem; font-weight:700; cursor:pointer; transition:all .18s; font-family:'Courier New',monospace; letter-spacing:.05em; }
.orb-family-btn:hover { color:var(--text); border-color:var(--accent); }
.orb-family-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.orb-subgroup { display:none; gap:.28rem; flex-wrap:wrap; justify-content:flex-end; }
.orb-subgroup.active { display:flex; }
.orb-btn { padding:.26rem .68rem; border:none; border-radius:5px; background:rgba(255,255,255,.06); color:var(--muted); font-size:.82rem; font-weight:600; cursor:pointer; transition:all .18s; font-family:'Courier New',monospace; }
.orb-btn:hover { color:var(--text); }
.orb-btn.active { background:rgba(108,142,255,.25); color:var(--accent); }
#orbital-canvas-wrap { border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#080c15; position:relative; height:440px; }
#orbital-canvas-wrap canvas { display:block; width:100%!important; height:100%!important; }
.orb-hint { position:absolute; bottom:.55rem; left:50%; transform:translateX(-50%); font-size:.66rem; color:rgba(107,114,128,.55); white-space:nowrap; pointer-events:none; }
.orbital-info { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.8rem 1.1rem; font-size:.81rem; color:var(--muted); line-height:1.65; }
.orbital-info strong { color:var(--text); }
.node-badge { display:inline-block; padding:.1rem .45rem; border-radius:4px; font-size:.72rem; background:rgba(167,139,250,.15); color:var(--accent2); font-weight:600; }

/* ══════════════════════════════════════
   ELECTRON CONFIGURATION BUILDER
══════════════════════════════════════ */
.elcfg-wrap { display:flex; flex-direction:column; gap:1rem; }

/* Element badge */
.elcfg-badge {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.5rem 1.1rem; border:1px solid var(--border);
  border-radius:8px; background:var(--bg); min-width:84px; text-align:center;
}
.elcfg-symbol { font-size:1.45rem; font-weight:700; color:var(--accent); line-height:1; }
.elcfg-z      { font-size:.68rem;  color:var(--muted); margin-top:3px; }

/* Controls */
.elcfg-controls { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.elcfg-btn {
  padding:.3rem .82rem; border:1px solid var(--border);
  border-radius:6px; background:var(--bg); color:var(--muted);
  font-size:.82rem; font-weight:500; cursor:pointer; transition:all .18s;
}
.elcfg-btn:hover:not(:disabled) { color:var(--text); border-color:var(--accent); }
.elcfg-btn.primary { background:rgba(108,142,255,.12); color:var(--accent); border-color:rgba(108,142,255,.4); }
.elcfg-btn.primary:hover:not(:disabled) { background:rgba(108,142,255,.22); }
.elcfg-btn:disabled { opacity:.38; cursor:not-allowed; }
.elcfg-count { font-size:.82rem; color:var(--muted); margin-left:.35rem; font-variant-numeric:tabular-nums; }

/* Orbital diagram */
.elcfg-diagram {
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:.9rem 1.1rem; display:flex; flex-direction:column; gap:.55rem;
}

/* One row = one sublevel */
.elcfg-row { display:flex; align-items:center; gap:.6rem; }

/* Sublevel label (1s, 2p, 3d …) */
.elcfg-lbl {
  font-family:'Courier New',monospace; font-size:.8rem; color:var(--muted);
  width:26px; text-align:right; flex-shrink:0;
}

/* Box group */
.elcfg-boxes { display:flex; gap:.28rem; }

/* Individual orbital box */
.elcfg-box {
  width:38px; height:34px; border:1px solid var(--border); border-radius:4px;
  background:rgba(255,255,255,.025);
  display:flex; align-items:center; justify-content:space-around; padding:0 3px;
}

/* Arrow spans — transparent when empty so space is reserved */
.elcfg-arrow {
  font-size:1.05rem; line-height:1; font-weight:700;
  width:13px; text-align:center; display:inline-block;
  color:transparent; transition:color .2s;
}
.elcfg-up  { color:var(--accent); }   /* spin-up: blue */
.elcfg-dn  { color:var(--accent2); }  /* spin-down: purple */
.elcfg-new { color:var(--green) !important; } /* most recently added: green */

/* Energy-level line extending right of the boxes */
.elcfg-line-fill { flex:1; height:1px; background:var(--border); opacity:.4; }

/* Configuration text */
.elcfg-config-wrap {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:.8rem 1.1rem;
}
.elcfg-config-label {
  font-size:.67rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin-bottom:.38rem;
}
.elcfg-config-text {
  font-family:'Courier New',monospace; font-size:1rem;
  color:var(--text); font-weight:600; word-break:break-all; line-height:1.5;
}

/* ══════════════════════════════════════
   Cr & Cu EXCEPTIONS
══════════════════════════════════════ */
.exc-wrap { display:flex; flex-direction:column; gap:1rem; }

.exc-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:1rem 1.25rem;
  display:flex; flex-direction:column; gap:.85rem;
}

.exc-element-header { display:flex; align-items:center; gap:.75rem; }
.exc-el-badge {
  width:52px; height:52px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:700; color:#fff;
  background:var(--accent);
}
.exc-el-badge.exc-cu { background:var(--accent2); }
.exc-el-name { font-size:1rem; font-weight:700; color:var(--text); }
.exc-z       { font-size:.8rem; font-weight:400; color:var(--muted); margin-left:.5rem; }
.exc-el-sub  { font-size:.71rem; color:var(--muted); margin-top:2px; }

.exc-compare { display:flex; align-items:flex-start; gap:1rem; }
.exc-side    { flex:1; display:flex; flex-direction:column; gap:.45rem; }
.exc-divider {
  font-size:1.6rem; color:var(--muted); align-self:center;
  flex-shrink:0; padding:0 .25rem;
}

.exc-side-label {
  font-size:.67rem; text-transform:uppercase; letter-spacing:.07em;
  padding:.18rem .5rem; border-radius:4px; width:fit-content; font-weight:600;
}
.exc-label-wrong { background:rgba(239,68,68,.12); color:#f87171; }
.exc-label-right { background:rgba(52,211,153,.12);  color:var(--green); }

.exc-config {
  font-family:'Courier New',monospace; font-size:.88rem;
  color:var(--muted); font-weight:600;
}

.exc-orbital-mini { display:flex; flex-direction:column; gap:.35rem; }
.exc-row { display:flex; align-items:center; gap:.5rem; }
.exc-rlbl {
  font-family:'Courier New',monospace; font-size:.78rem;
  color:var(--muted); width:24px; text-align:right; flex-shrink:0;
}

/* highlight arrows in the "actual" diagram */
.exc-hi { color:var(--green) !important; }

.exc-reason {
  display:flex; align-items:flex-start; gap:.55rem;
  background:rgba(108,142,255,.07); border:1px solid rgba(108,142,255,.2);
  border-radius:8px; padding:.65rem .85rem;
  font-size:.81rem; color:var(--muted); line-height:1.55;
}
.exc-reason strong { color:var(--text); }
.exc-reason-icon  { font-size:1rem; flex-shrink:0; margin-top:1px; }

.exc-summary {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:.8rem 1.1rem;
  font-size:.82rem; color:var(--muted); line-height:1.6;
}
.exc-summary-title {
  font-size:.67rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin-bottom:.38rem;
}

@media(max-width:580px) {
  .exc-compare { flex-direction:column; }
  .exc-divider { display:none; }
}

/* ══════════════════════════════════════
   BRIGHT EDITORIAL LAB THEME
══════════════════════════════════════ */
:root {
  --bg:#f5f1e7;
  --surface:#fffdf7;
  --border:#d9d3c4;
  --accent:#386c5b;
  --accent2:#80679a;
  --green:#44806d;
  --blue:#557b9d;
  --brown:#b36d3f;
  --text:#292b25;
  --muted:#74766d;
}

body {
  background:
    radial-gradient(circle at 8% 8%,rgba(235,191,134,.18),transparent 24rem),
    radial-gradient(circle at 92% 18%,rgba(128,103,154,.11),transparent 26rem),
    var(--bg);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body::before,body::after {
  content:"";position:fixed;z-index:-1;width:150px;height:260px;opacity:.15;pointer-events:none;
  background:radial-gradient(ellipse at 50% 85%,transparent 0 9%,#78917d 10% 12%,transparent 13%),linear-gradient(78deg,transparent 48%,#78917d 49% 51%,transparent 52%);
}
body::before{left:-45px;bottom:-80px;transform:rotate(-14deg)}
body::after{right:-50px;top:120px;transform:rotate(164deg)}

header { max-width:1180px;margin:0 auto;padding:1.35rem 1.5rem .65rem;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(100,100,80,.16) }
.header-inner { display:flex;align-items:center;gap:.85rem }
.header-mark { width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#4e7d6b,#315e50);font-family:Georgia,serif;font-size:1.35rem;border:2px solid #fff;box-shadow:0 4px 16px rgba(69,61,45,.14) }
.brand-copy{display:flex;flex-direction:column}.brand-kicker{font-family:Georgia,serif;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
header h1 { font-family:Georgia,"Times New Roman",serif;font-size:1.65rem;font-weight:600;letter-spacing:-.03em;background:none;-webkit-text-fill-color:var(--text);color:var(--text) }
header p { margin:0;color:var(--muted);font-family:Georgia,serif;font-style:italic;font-size:.83rem }

.site-hero{position:relative;max-width:1180px;height:265px;margin:.85rem auto 0;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#eee9dc;box-shadow:0 18px 45px rgba(69,61,45,.1)}
.site-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,244,234,.96) 0%,rgba(248,244,234,.84) 34%,rgba(248,244,234,.08) 67%);pointer-events:none}
.site-hero>img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.hero-copy{position:absolute;z-index:1;left:clamp(1.25rem,4vw,3.5rem);top:50%;width:min(390px,43%);transform:translateY(-50%)}
.hero-copy>span{display:block;margin-bottom:.5rem;color:var(--accent);font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.hero-copy h2{font:600 clamp(1.65rem,3vw,2.55rem)/1.06 Georgia,"Times New Roman",serif;letter-spacing:-.035em;color:var(--text)}
.hero-copy p{max-width:340px;margin-top:.75rem;color:var(--muted);font-size:.82rem;line-height:1.55}

main { max-width:1180px;padding:0 1.5rem 3rem }
.tab-bar { max-width:none;margin:1rem 0 0;padding:0;justify-content:flex-start;gap:.45rem }
.tab-bar button { flex:0 1 175px;height:44px;border:1px solid var(--border);border-radius:999px;background:rgba(255,253,247,.66);color:var(--muted);box-shadow:0 2px 8px rgba(69,61,45,.04) }
.tab-bar button:hover { color:var(--accent);border-color:#9bb4a7;background:#fffdf7 }
.tab-bar button.active { color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 5px 15px rgba(56,108,91,.2) }
.content-wrap { margin-top:.75rem;border:1px solid var(--border);border-radius:18px;background:rgba(255,253,247,.9);box-shadow:0 18px 50px rgba(69,61,45,.08);overflow:hidden }
.panel { padding:2rem }

.sim-title,.placeholder h2,.pt-info-name,.exc-el-name { font-family:Georgia,"Times New Roman",serif;color:var(--text) }
.sim-title { font-size:1.42rem }
.sim-sub { color:var(--muted);font-size:.8rem }
.sim-subnav { gap:.35rem;border-bottom-color:var(--border);overflow-x:auto }
.subnav-btn { white-space:nowrap;border-radius:999px;padding:.42rem .9rem }
.subnav-btn.active { background:#e3eee8;color:var(--accent);border-color:#b8cec2 }

.sliders,.rxn-badge,.stat-card,.insight,.orbital-info,.elcfg-badge,.elcfg-diagram,.elcfg-config-wrap,.exc-card,.exc-summary,.pt-detail,.pt-search input,.chip { background:#fffdf8;box-shadow:0 4px 14px rgba(69,61,45,.045) }
.sliders,.stat-card,.orbital-info,.elcfg-diagram,.elcfg-config-wrap,.exc-card,.exc-summary,.pt-detail { border-color:var(--border);border-radius:12px }
.calc-box { background:#f0eee7;border-color:var(--border);box-shadow:inset 0 1px 0 #fff }
.cs-line { color:var(--text) }
.chamber-head { background:#eeeae0;color:#6f7168 }
.g-n2o4 { background:#dfe8e5;color:#45665e }
.g-no2 { background:#e9c9a9;color:#7a4d2f }
.pb-blue { background:#7f9c96 }.pb-amber { background:#c88755 }
.orb-btn { background:#eeeae1 }.orb-family-btn.active,.elcfg-btn.primary { color:#fff;background:var(--accent);border-color:var(--accent) }
#orbital-canvas-wrap { background:linear-gradient(145deg,#1c2927,#293734 55%,#182220);border-color:#5f746d;box-shadow:0 8px 24px rgba(31,49,45,.18) }
.elcfg-box { background:#faf7ef }
.exc-el-badge { color:#fff }
.exc-label-wrong { color:#a24e4e }.exc-reason { background:#edf3ef;border-color:#cbded4 }
.pt-atom-wrap { background:radial-gradient(circle at center,#eaf1ed,transparent 68%) }
.pt-element:hover { filter:brightness(.98);box-shadow:0 3px 8px rgba(69,61,45,.12) }
.pt-element.selected { border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,108,91,.25) }
input[type=range] { background:#d8d3c7 } input[type=range]::-webkit-slider-thumb { background:var(--accent);box-shadow:0 1px 5px rgba(56,108,91,.28) }

@media(max-width:760px){
  header{align-items:flex-start;flex-direction:column;padding:1rem}.header-mark{width:42px;height:42px}header p{padding-left:3.6rem;margin-top:-.55rem}.site-hero{height:225px;margin:.45rem .75rem 0;border-radius:14px}.site-hero::after{background:linear-gradient(90deg,rgba(248,244,234,.96) 0%,rgba(248,244,234,.83) 48%,rgba(248,244,234,.16) 78%)}.hero-copy{left:1.25rem;width:56%}.hero-copy h2{font-size:1.72rem}.hero-copy p{font-size:.72rem}.tab-bar{overflow-x:auto;padding-bottom:.3rem}.tab-bar button{min-width:145px}.panel{padding:1.1rem}.content-wrap{border-radius:14px}main{padding:0 .75rem 2rem}.sim-subnav{padding-bottom:.6rem}}
@media(max-width:480px){header p{display:none}.brand-kicker{font-size:.56rem}header h1{font-size:1.35rem}.sl-row{grid-template-columns:1.1rem 1fr;gap:.5rem}.sl-row input{grid-column:1/-1}.sl-val{position:absolute;right:2rem}.pt-facts{grid-template-columns:1fr 1fr}}

/* Footer links and information */
.site-footer{margin-top:1.1rem;padding:1.25rem 1.35rem 0;border:1px solid var(--border);border-radius:16px;background:rgba(255,253,247,.82);box-shadow:0 12px 36px rgba(69,61,45,.06);scroll-margin-top:1rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.35rem .5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.footer-links a{padding:.38rem .72rem;border-radius:999px;color:var(--accent);font-size:.76rem;font-weight:600;text-decoration:none;background:#e7efe9;border:1px solid #cfddd4;transition:background .16s,color .16s,transform .16s}
.footer-links a:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
.footer-sections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;padding:1.25rem 0}
.footer-section{scroll-margin-top:1rem}.footer-section h2{margin:.16rem 0 .42rem;font:600 1.02rem Georgia,"Times New Roman",serif;color:var(--text)}
.footer-section p{color:var(--muted);font-size:.75rem;line-height:1.6}.footer-section a{color:var(--accent);font-weight:600;text-decoration:none}.footer-section a:hover{text-decoration:underline}
.footer-label{font-size:.57rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent2);font-weight:700}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-top:1px solid var(--border);color:var(--muted);font:italic .68rem Georgia,serif}
@media(max-width:760px){.footer-sections{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{padding:1rem 1rem 0}}
@media(max-width:440px){.footer-sections{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:.25rem}.footer-links a{flex:1 1 42%;text-align:center}}

/* Interactive oxygen atomic model */
.atomic-wrap{display:flex;flex-direction:column;gap:1rem}.atomic-symbol{width:72px;height:72px;display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr 1fr;align-items:center;padding:.45rem .55rem;border:1px solid #b9cec3;border-radius:11px;background:#e8f0eb;color:var(--accent);box-shadow:0 5px 16px rgba(69,61,45,.06)}.atomic-symbol span{font-size:.64rem;align-self:start}.atomic-symbol strong{grid-row:1/3;grid-column:2;font:600 2rem Georgia,serif;text-align:center}.atomic-symbol small{font-size:.6rem;align-self:end}
.atomic-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(230px,.8fr);gap:1rem}.atomic-stage{position:relative;min-height:430px;border:1px solid #c9d3cd;border-radius:15px;overflow:hidden;background:radial-gradient(circle at 50% 48%,#fffdf5 0,#eef3ef 34%,#dfeae4 70%,#d5e2db);box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(69,61,45,.06)}#atomic-canvas{display:block;width:100%;height:430px;cursor:grab;touch-action:none}#atomic-canvas.dragging{cursor:grabbing}.atomic-hint{position:absolute;left:50%;bottom:.7rem;transform:translateX(-50%);padding:.28rem .65rem;border-radius:999px;background:rgba(255,253,247,.82);color:var(--muted);font-size:.65rem;white-space:nowrap;pointer-events:none}
.atomic-info{padding:1.2rem;border:1px solid var(--border);border-radius:15px;background:#fffdf8;box-shadow:0 7px 20px rgba(69,61,45,.055)}.atomic-info-kicker{font-size:.59rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent2);font-weight:700}.atomic-info-head{display:flex;align-items:center;gap:.6rem;margin:.4rem 0 1rem}.atomic-info-head h3{font:600 1.45rem Georgia,serif}.atomic-dot{display:inline-block;width:13px;height:13px;border-radius:50%;flex:none;box-shadow:inset -2px -2px 3px rgba(0,0,0,.16)}.atomic-dot.proton{background:#d7655c}.atomic-dot.neutron{background:#6c8da0}.atomic-dot.electron{background:#e4ae3f}.atomic-info dl{display:grid;gap:.5rem}.atomic-info dl div{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.45rem;border-bottom:1px solid #e6e0d4}.atomic-info dt{color:var(--muted);font-size:.71rem}.atomic-info dd{font-weight:700;font-size:.82rem}.atomic-info>p{min-height:4.8rem;margin-top:1rem;color:var(--muted);font-size:.75rem;line-height:1.6}
.atomic-particle-buttons{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem}.atomic-particle-buttons button{display:flex;align-items:center;gap:.35rem;padding:.38rem .55rem;border:1px solid var(--border);border-radius:999px;background:#f6f2e9;color:var(--text);font-size:.66rem;cursor:pointer}.atomic-particle-buttons button:hover,.atomic-particle-buttons button.active{border-color:var(--accent);background:#e4eee8;color:var(--accent)}.atomic-particle-buttons .atomic-dot{width:8px;height:8px}
.atomic-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem}.atomic-summary span{padding:.75rem .9rem;border:1px solid var(--border);border-radius:11px;background:#fffdf8}.atomic-summary small{display:block;color:var(--muted);font-size:.61rem;text-transform:uppercase;letter-spacing:.06em}.atomic-summary strong{display:block;margin-top:.18rem;font:600 1.15rem Georgia,serif;color:var(--accent)}
@media(max-width:760px){.atomic-layout{grid-template-columns:1fr}.atomic-stage{min-height:360px}#atomic-canvas{height:360px}.atomic-info>p{min-height:auto}.atomic-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.atomic-summary{grid-template-columns:1fr 1fr}.atomic-symbol{width:62px;height:62px}.atomic-hint{font-size:.58rem}}

/* Grade-based simulation library */
.simulation-library{margin-bottom:1.35rem}.grade-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-bottom:1rem}.grade-btn{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:58px;padding:.65rem;border:1px solid var(--border);border-radius:13px;background:#fffdf8;color:var(--muted);cursor:pointer;box-shadow:0 4px 13px rgba(69,61,45,.04);transition:transform .16s,border-color .16s,background .16s,color .16s}.grade-btn strong{font:600 1.15rem Georgia,serif}.grade-btn span{font-size:.67rem}.grade-btn:hover{transform:translateY(-1px);border-color:#9eb7aa;color:var(--accent)}.grade-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(56,108,91,.18)}
.grade-group{display:none}.grade-group.active{display:block;animation:fadeIn .18s ease}.grade-heading{display:flex;align-items:baseline;gap:.65rem;margin-bottom:.65rem}.grade-heading span{font:600 1.08rem Georgia,serif;color:var(--text)}.grade-heading small{color:var(--muted);font-size:.69rem}.simulation-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.sim-choice{display:grid;grid-template-columns:38px 1fr 18px;align-items:center;gap:.7rem;width:100%;padding:.8rem .9rem;border:1px solid var(--border);border-radius:12px;background:#fffdf8;color:var(--text);text-align:left;cursor:pointer;box-shadow:0 4px 12px rgba(69,61,45,.04);transition:transform .16s,border-color .16s,box-shadow .16s}.sim-choice:hover{transform:translateY(-2px);border-color:#9eb7aa;box-shadow:0 8px 18px rgba(69,61,45,.08)}.sim-choice.active{border-color:var(--accent);background:#edf4ef;box-shadow:0 0 0 2px rgba(56,108,91,.12)}.sim-choice>i{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#e6eee9;color:var(--accent);font-style:normal}.sim-choice>span{min-width:0}.sim-choice strong{display:block;font:600 .9rem Georgia,serif}.sim-choice small{display:block;margin-top:.18rem;color:var(--muted);font-size:.64rem;line-height:1.35}.sim-choice>b{color:var(--accent);font-weight:500}.empty-grade{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:130px;padding:1.2rem;border:1px dashed #bfc9c2;border-radius:13px;background:rgba(255,253,248,.55);color:var(--muted);text-align:center}.empty-grade i{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e6eee9;color:var(--accent);font-style:normal;font-size:1.2rem}.empty-grade strong{margin-top:.55rem;color:var(--text);font:600 .88rem Georgia,serif}.empty-grade span{margin-top:.25rem;font-size:.67rem}
@media(max-width:680px){.simulation-choices{grid-template-columns:1fr}.grade-btn{flex-direction:column;gap:.08rem}.grade-heading{align-items:flex-start;flex-direction:column;gap:.15rem}}

/* Simulation finder and syllabus units */
.sim-library-tools{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.8rem}.sim-library-tools label{display:flex;align-items:center;gap:.5rem;flex:1;max-width:540px;padding:.58rem .75rem;border:1px solid var(--border);border-radius:11px;background:#fffdf8;box-shadow:0 4px 13px rgba(69,61,45,.04)}.sim-library-tools label:focus-within{border-color:#8fac9c;box-shadow:0 0 0 3px rgba(56,108,91,.11)}.sim-library-tools label>span{color:var(--accent);font-size:1.15rem}.sim-library-tools input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.78rem}.sim-library-tools small{color:var(--muted);font-size:.65rem;white-space:nowrap}.sim-unit-list{display:flex;flex-direction:column;gap:.48rem}.sim-unit{border:1px solid var(--border);border-radius:12px;background:rgba(255,253,248,.7);overflow:hidden}.sim-unit[open]{background:#fffdf8;box-shadow:0 5px 14px rgba(69,61,45,.045)}.sim-unit summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.72rem .85rem;cursor:pointer;list-style:none;color:var(--text)}.sim-unit summary::-webkit-details-marker{display:none}.sim-unit summary::before{content:"›";width:20px;height:20px;display:grid;place-items:center;flex:none;border-radius:50%;background:#e7efe9;color:var(--accent);font-size:1rem;transition:transform .16s}.sim-unit[open] summary::before{transform:rotate(90deg)}.sim-unit summary>span{flex:1;font:600 .84rem Georgia,"Times New Roman",serif}.sim-unit summary>small{color:var(--muted);font-size:.61rem}.sim-unit .simulation-choices{padding:0 .75rem .75rem}.unit-empty{margin:0 .8rem .8rem;padding:.65rem .75rem;border-left:3px solid #c8d6ce;background:#f4f1e8;color:var(--muted);font-size:.67rem}.sim-no-results{margin-top:.65rem;padding:.9rem;border:1px dashed #bfc9c2;border-radius:11px;color:var(--muted);font-size:.72rem;text-align:center}.sim-choice[hidden],.sim-unit[hidden]{display:none}.sim-choice mark{background:#f2dda1;color:inherit}
@media(max-width:600px){.sim-library-tools{align-items:stretch;flex-direction:column}.sim-library-tools label{max-width:none}.sim-library-tools small{padding-left:.15rem}.sim-unit summary{align-items:flex-start}.sim-unit summary>small{text-align:right}}

/* IGCSE changes of state drag-and-drop simulation */
.phase-sim{display:flex;flex-direction:column;gap:1rem}.phase-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.phase-kicker{display:block;margin-bottom:.3rem;color:var(--accent);font-size:.59rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.phase-heading h2{font:600 clamp(1.45rem,3vw,2rem) Georgia,"Times New Roman",serif;color:var(--text)}.phase-heading p{max-width:620px;margin-top:.38rem;color:var(--muted);font-size:.75rem;line-height:1.55}.phase-reset{flex:none;padding:.48rem .7rem;border:1px solid var(--border);border-radius:8px;background:#fffdf8;color:var(--accent);font:700 .63rem Inter,sans-serif;cursor:pointer}.phase-reset:hover{border-color:var(--accent);background:#edf3ef}
.phase-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.phase-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:96px;padding:.65rem;border:1px solid var(--border);border-radius:13px;background:#fffdf8;color:var(--text);text-align:left;cursor:grab;box-shadow:0 5px 15px rgba(69,61,45,.05);transition:transform .16s,border-color .16s,box-shadow .16s}.phase-card:hover,.phase-card.selected{transform:translateY(-2px);border-color:#7e9e8f;box-shadow:0 8px 20px rgba(56,108,91,.12)}.phase-card.selected{outline:3px solid rgba(56,108,91,.12)}.phase-card.dragging{opacity:.55;cursor:grabbing}.phase-card-visual{display:grid;place-items:center;width:72px;height:72px;overflow:hidden;border-radius:10px;background:#edf2f3}.phase-card-visual img{width:100%;height:100%;display:block;object-fit:cover}.phase-water-visual{background:linear-gradient(145deg,#e5f2f5,#cfe5ea)}.phase-water-visual svg{width:48px;height:48px;overflow:visible}.phase-water-visual path:first-child{fill:#76b7ce;stroke:#397f99;stroke-width:2}.phase-water-visual path:last-child{fill:none;stroke:#d9f3fb;stroke-width:3;stroke-linecap:round}.phase-vapour-visual{position:relative;background:linear-gradient(145deg,#edf0ef,#dee6e3)}.phase-vapour-visual i{position:absolute;width:32px;height:19px;border-radius:50%;background:rgba(255,255,255,.93);box-shadow:0 3px 7px rgba(75,94,89,.13)}.phase-vapour-visual i:nth-child(1){left:9px;top:31px}.phase-vapour-visual i:nth-child(2){left:25px;top:20px;width:37px;height:26px}.phase-vapour-visual i:nth-child(3){left:28px;top:39px;width:29px;height:17px}.phase-card-copy strong{display:block;font:600 .88rem Georgia,serif}.phase-card-copy small{display:block;margin-top:.22rem;color:var(--muted);font-size:.59rem;line-height:1.4}.phase-grip{color:#a2a59d;font-size:1rem}.phase-touch-hint{margin-top:-.35rem;color:var(--muted);font-size:.59rem;text-align:center}
.phase-workbench{display:grid;grid-template-columns:minmax(170px,230px) minmax(90px,1fr) minmax(170px,230px);align-items:center;justify-content:center;gap:1rem;padding:1.25rem;border:1px solid #d9d2c3;border-radius:18px;background:radial-gradient(circle at center,#fffdf8 0,#f0ece2 78%)}.phase-dropzone{position:relative;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(100%,220px);aspect-ratio:1;border:2px dashed #9eb3a8;border-radius:50%;background:rgba(255,253,248,.86);color:var(--text);cursor:pointer;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.phase-dropzone:hover,.phase-dropzone.drag-over{transform:scale(1.025);border-color:var(--accent);background:#edf4ef;box-shadow:0 0 0 7px rgba(56,108,91,.08)}.phase-slot-number{position:absolute;top:10%;left:14%;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--accent);color:#fff;font-size:.61rem;font-weight:800}.phase-empty-icon{display:grid;place-items:center;width:50px;height:50px;margin-bottom:.42rem;border-radius:50%;background:#e3ebe6;color:var(--accent);font-size:1.3rem}.phase-dropzone>strong{font:600 .88rem Georgia,serif}.phase-dropzone>small{margin-top:.2rem;color:var(--muted);font-size:.58rem}.phase-dropzone.filled{border-style:solid;background:#fff}.phase-dropzone.filled .phase-empty-icon{display:none}.phase-dropped-visual{display:grid;place-items:center;width:60%;max-width:112px;aspect-ratio:1;margin-bottom:.45rem;border-radius:50%;overflow:hidden}.phase-dropped-visual img{width:100%;height:100%;object-fit:cover}.phase-dropped-visual.phase-water-visual svg{width:62%;height:62%}.phase-dropped-visual.phase-vapour-visual i:nth-child(1){left:12%;top:44%}.phase-dropped-visual.phase-vapour-visual i:nth-child(2){left:34%;top:28%}.phase-dropped-visual.phase-vapour-visual i:nth-child(3){left:39%;top:54%}.phase-arrow{display:flex;flex-direction:column;align-items:center;color:var(--accent)}.phase-arrow span{font:400 clamp(2.5rem,7vw,4.7rem)/.8 Georgia,serif}.phase-arrow small{margin-top:.4rem;color:var(--muted);font-size:.57rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.phase-result{padding:1rem 1.1rem;border-left:5px solid #aeb9b2;border-radius:0 12px 12px 0;background:#f1eee6;transition:background .2s,border-color .2s}.phase-result.complete{border-color:var(--accent);background:#e8f1ec}.phase-result-label{display:block;margin-bottom:.28rem;color:var(--muted);font-size:.55rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.phase-result strong{font:600 1.12rem Georgia,serif;color:var(--text)}.phase-result p{margin-top:.35rem;color:var(--muted);font-size:.67rem;line-height:1.5}.phase-equation{display:inline-flex;align-items:center;gap:.45rem;margin-right:.55rem;color:var(--accent)}.phase-key{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem 1.2rem;padding:.62rem;border-top:1px solid var(--border);color:var(--muted);font-size:.58rem}.phase-key span{display:flex;align-items:center;gap:.35rem}.particle{display:inline-block;width:28px;height:18px;border-radius:3px;background-color:#e9eee9;background-image:radial-gradient(circle,#54796b 0 2px,transparent 2.5px);background-size:7px 7px}.liquid-particles{background-position:0 1px,3px 4px;transform:skewX(-6deg)}.gas-particles{background-size:14px 9px}.phase-card:focus-visible,.phase-dropzone:focus-visible,.phase-reset:focus-visible{outline:3px solid rgba(56,108,91,.28);outline-offset:2px}
@media(max-width:760px){.phase-palette{grid-template-columns:1fr}.phase-card{grid-template-columns:62px 1fr auto;min-height:76px}.phase-card-visual{width:62px;height:62px}.phase-workbench{grid-template-columns:minmax(125px,1fr) 58px minmax(125px,1fr);gap:.45rem;padding:.8rem}.phase-arrow span{font-size:2.7rem}.phase-arrow small{font-size:.48rem}.phase-dropzone{max-width:180px}.phase-heading{align-items:flex-start;flex-direction:column}.phase-reset{align-self:flex-end}}
@media(max-width:460px){.phase-workbench{grid-template-columns:1fr;gap:.5rem}.phase-dropzone{width:170px}.phase-arrow{transform:rotate(90deg);margin:.15rem 0}.phase-arrow small{display:none}.phase-result strong{font-size:.98rem}}

/* IGCSE aluminium electrolysis simulator */
.al-electrolysis{display:flex;flex-direction:column;gap:1rem}.al-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.al-kicker{display:block;margin-bottom:.3rem;color:var(--accent2);font-size:.59rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.al-heading h2{font:600 1.52rem Georgia,"Times New Roman",serif;color:var(--text)}.al-heading p{max-width:720px;margin-top:.35rem;color:var(--muted);font-size:.74rem;line-height:1.55}.al-controls{display:flex;gap:.45rem;flex:none}.al-controls button{padding:.55rem .72rem;border:1px solid var(--border);border-radius:9px;background:#fffdf8;color:var(--accent);font:700 .64rem Inter,sans-serif;cursor:pointer;transition:transform .15s,box-shadow .15s}.al-controls button:first-child{border-color:var(--accent);background:var(--accent);color:#fff}.al-controls button:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(56,108,91,.14)}
.al-sequence{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;padding:0;list-style:none}.al-sequence li{display:flex;align-items:center;gap:.4rem;min-height:43px;padding:.45rem .5rem;border:1px solid var(--border);border-radius:9px;background:#f6f2e9;color:var(--muted);transition:border-color .2s,background .2s,color .2s,transform .2s}.al-sequence span{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#dfdbd1;color:var(--muted);font-size:.55rem;font-weight:800}.al-sequence strong{font-size:.56rem;line-height:1.35}.al-sequence li.active{transform:translateY(-1px);border-color:var(--accent);background:#e7f0eb;color:var(--text);box-shadow:0 4px 11px rgba(56,108,91,.09)}.al-sequence li.active span,.al-sequence li.complete span{background:var(--accent);color:#fff}.al-sequence li.complete{border-color:#b8c9c0;color:var(--accent)}
.al-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(255px,.75fr);gap:1rem}.al-cell-wrap{position:relative;min-height:470px;overflow:hidden;border:1px solid #c9d3cd;border-radius:15px;background:linear-gradient(#e7f0ee 0 16%,#f1eadb 16% 100%);box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(69,61,45,.06)}#al-cell-canvas{display:block;width:100%;height:470px;cursor:grab;touch-action:none}#al-cell-canvas:active{cursor:grabbing}.al-supply{position:absolute;top:.55rem;left:50%;display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:174px;transform:translateX(-50%);padding:.35rem .55rem;border:1px solid #aebdb6;border-radius:8px;background:rgba(255,253,248,.92);color:var(--text);font-size:.68rem;box-shadow:0 4px 12px rgba(69,61,45,.08);pointer-events:none}.al-supply span:first-child{color:#3c7691}.al-supply span:last-child{color:#a84d45}.al-supply strong{font-size:.61rem}.al-3d-hint{position:absolute;top:3.25rem;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 1.4rem);padding:.28rem .48rem;border-radius:999px;background:rgba(255,253,248,.82);color:var(--muted);font-size:.54rem;text-align:center;pointer-events:none}.al-legend{position:absolute;left:.65rem;bottom:.6rem;display:flex;flex-wrap:wrap;gap:.32rem .6rem;padding:.32rem .48rem;border-radius:8px;background:rgba(255,253,248,.86);color:var(--muted);font-size:.55rem;pointer-events:none}.al-legend span{display:flex;align-items:center;gap:.24rem}.al-legend i{display:inline-block;width:9px;height:9px;border-radius:50%}.al-key-al{background:#d6ad4a}.al-key-oxide{background:#6d9fb4}.al-key-electron{background:#714f8d}.al-key-co2{border:2px solid #777;background:transparent}
.al-canvas-play{position:absolute;z-index:4;left:50%;top:51%;display:flex;flex-direction:column;align-items:center;gap:.12rem;min-width:190px;transform:translate(-50%,-50%);padding:.72rem 1rem;border:1px solid rgba(255,255,255,.48);border-radius:14px;background:rgba(39,65,57,.92);color:#fff;cursor:pointer;box-shadow:0 12px 30px rgba(31,54,47,.28);backdrop-filter:blur(5px);transition:transform .18s,opacity .2s}.al-canvas-play:hover{transform:translate(-50%,-52%) scale(1.02)}.al-canvas-play[hidden]{display:none}.al-canvas-play span{display:grid;place-items:center;width:38px;height:38px;margin-bottom:.18rem;border-radius:50%;background:#fff;color:var(--accent);font-size:.92rem}.al-canvas-play strong{font:600 .78rem Georgia,serif}.al-canvas-play small{color:#dce9e4;font-size:.52rem}.al-playback{position:absolute;z-index:3;left:50%;bottom:.58rem;display:grid;grid-template-columns:auto minmax(90px,220px) auto;align-items:center;gap:.48rem;width:min(64%,430px);transform:translateX(-50%);padding:.34rem .5rem;border-radius:9px;background:rgba(255,253,248,.91);color:var(--muted);font-size:.52rem;box-shadow:0 4px 14px rgba(48,57,52,.12);pointer-events:none}.al-playback>span{color:var(--accent);font-weight:800;white-space:nowrap}.al-playback>div{height:5px;overflow:hidden;border-radius:999px;background:#d9ddd8}.al-playback i{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent);transition:width .1s linear}.al-playback time{font-variant-numeric:tabular-nums}.al-legend{bottom:3.05rem!important}
.al-process{padding:1rem;border:1px solid var(--border);border-radius:15px;background:#fffdf8;box-shadow:0 7px 20px rgba(69,61,45,.055)}.al-process-kicker{color:var(--accent2);font-size:.56rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.al-process h3{margin-top:.25rem;font:600 1.12rem Georgia,"Times New Roman",serif;color:var(--text)}.al-process>p{min-height:3.25rem;margin-top:.3rem;color:var(--muted);font-size:.67rem;line-height:1.5}.al-equations{display:flex;flex-direction:column;gap:.4rem;margin-top:.75rem}.al-equations>div{display:grid;grid-template-columns:1fr auto;gap:.15rem .45rem;padding:.58rem .62rem;border-left:3px solid #c8d6ce;background:#f4f1e8;transition:border-color .2s,background .2s,transform .2s}.al-equations>div.active{border-color:var(--accent);background:#e6f0ea;transform:translateX(2px)}.al-equations span{color:var(--muted);font-size:.55rem;font-weight:700}.al-equations strong{grid-column:1/-1;color:var(--text);font:600 .72rem Georgia,"Times New Roman",serif}.al-equations small{grid-column:2;grid-row:1;color:var(--accent2);font-size:.52rem;font-weight:700}.al-live-values{display:grid;gap:.45rem;margin-top:.8rem}.al-live-values div{display:flex;justify-content:space-between;gap:.8rem;padding-bottom:.38rem;border-bottom:1px solid #e4ded2}.al-live-values dt{color:var(--muted);font-size:.61rem}.al-live-values dd{color:var(--text);font-size:.65rem;font-weight:700}.al-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}.al-facts span{padding:.62rem .7rem;border-left:3px solid var(--accent);background:#edf3ef;color:var(--muted);font-size:.62rem;line-height:1.45}.al-facts strong{color:var(--text)}
@media(max-width:820px){.al-layout{grid-template-columns:1fr}.al-process>p{min-height:0}.al-equations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.al-facts{grid-template-columns:1fr}.al-cell-wrap,#al-cell-canvas{height:430px;min-height:430px}}
@media(max-width:620px){.al-heading{align-items:flex-start;flex-direction:column}.al-controls{width:100%}.al-controls button{flex:1}.al-equations{grid-template-columns:1fr}.al-cell-wrap,#al-cell-canvas{height:410px;min-height:410px}.al-supply{width:155px}.al-legend{right:.65rem;justify-content:center}}
@media(max-width:760px){.al-sequence{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto;padding-bottom:.25rem}.al-sequence li{min-height:48px}.al-sequence strong{font-size:.58rem}}

/* Shared IGCSE simulation collection */
.igx-sim{--igx-green:#386c5b;--igx-purple:#80638f;--igx-gold:#c7973f;--igx-blue:#5f91a7;display:flex;flex-direction:column;gap:1rem;color:var(--text)}.igx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.igx-kicker{display:block;margin-bottom:.28rem;color:var(--accent2);font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.igx-head h2{font:600 1.52rem Georgia,"Times New Roman",serif}.igx-head p{max-width:710px;margin-top:.32rem;color:var(--muted);font-size:.72rem;line-height:1.5}.igx-badge{flex:none;padding:.38rem .62rem;border:1px solid #c9d8d0;border-radius:999px;background:#e8f0eb;color:var(--accent);font-size:.58rem;font-weight:800}.igx-grid{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.48fr);gap:.85rem}.igx-controls,.igx-stage,.igx-readout{border:1px solid var(--border);border-radius:14px;background:#fffdf8;box-shadow:0 7px 20px rgba(69,61,45,.05)}.igx-controls{display:flex;flex-direction:column;gap:.7rem;padding:.9rem}.igx-controls h3,.igx-stage-title{font:600 .89rem Georgia,"Times New Roman",serif}.igx-field{display:flex;flex-direction:column;gap:.28rem;color:var(--text);font-size:.62rem;font-weight:700}.igx-field small{color:var(--muted);font-size:.54rem;font-weight:400;line-height:1.35}.igx-field select,.igx-field input[type=number]{width:100%;padding:.5rem .56rem;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font:inherit;font-size:.68rem;outline:none}.igx-field select:focus,.igx-field input:focus{border-color:#83a292;box-shadow:0 0 0 3px rgba(56,108,91,.11)}.igx-range-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem .55rem}.igx-range-row label{font-size:.61rem;font-weight:700}.igx-range-row output{color:var(--accent);font-size:.61rem;font-weight:800}.igx-range-row input{grid-column:1/-1;width:100%;accent-color:var(--accent)}.igx-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.1rem}.igx-btn{flex:1;padding:.52rem .62rem;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--accent);font:700 .61rem Inter,sans-serif;cursor:pointer;white-space:nowrap;transition:transform .14s,box-shadow .14s}.igx-btn.primary{border-color:var(--accent);background:var(--accent);color:#fff}.igx-btn:disabled{opacity:.45;cursor:not-allowed}.igx-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(56,108,91,.13)}.igx-stage{position:relative;min-height:350px;padding:.85rem;overflow:hidden}.igx-readout{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem .85rem;border-left:4px solid var(--accent)}.igx-readout strong{font:600 .78rem Georgia,serif}.igx-readout p{color:var(--muted);font-size:.6rem;line-height:1.45;text-align:right}.igx-equation{padding:.48rem .58rem;border-left:3px solid var(--accent);background:#edf3ef;color:var(--text);font:600 .71rem Georgia,"Times New Roman",serif;line-height:1.45}.igx-muted{color:var(--muted);font-size:.58rem;line-height:1.45}.igx-mini-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}.igx-mini-stats div{padding:.5rem .55rem;background:#f3efe6}.igx-mini-stats span{display:block;color:var(--muted);font-size:.52rem}.igx-mini-stats strong{display:block;margin-top:.12rem;font:600 .82rem Georgia,serif}

/* Isotope mixer */
.iso-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(160px,.9fr);gap:1rem;align-items:end;min-height:350px;background:linear-gradient(180deg,#f4f0e7,#fffdf8)}.iso-beams{display:flex;align-items:flex-end;justify-content:center;gap:1.1rem;height:255px;padding:0 .75rem 1.8rem;border-bottom:2px solid #9d998e}.iso-peak{position:relative;width:min(90px,28%);height:var(--peak);min-height:10px;border-radius:8px 8px 2px 2px;background:linear-gradient(#7fa89a,#386c5b);transition:height .35s}.iso-peak:nth-child(2){background:linear-gradient(#ad95bb,#80638f)}.iso-peak strong{position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);font-size:.62rem}.iso-peak span{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);color:var(--muted);font-size:.57rem}.iso-balance{display:grid;place-items:center;align-content:center;min-height:250px}.iso-balance-ring{display:grid;place-items:center;width:145px;height:145px;border:11px solid #b8d0c3;border-radius:50%;background:#fffdf8}.iso-balance-ring span{color:var(--muted);font-size:.55rem}.iso-balance-ring strong{font:600 2.15rem Georgia,serif}.iso-formula{margin-top:.65rem;color:var(--muted);font-size:.58rem;text-align:center}

/* Limiting reactant */
.lr-vessels{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.45rem;min-height:300px}.lr-vessel{display:flex;align-content:flex-start;justify-content:center;flex-wrap:wrap;gap:.35rem;min-height:190px;padding:.75rem;border:2px solid #b7b4aa;border-top:0;border-radius:0 0 18px 18px;background:linear-gradient(rgba(231,240,238,.72),rgba(255,253,248,.8))}.lr-vessel-label{grid-row:2;text-align:center;color:var(--muted);font-size:.57rem}.lr-arrow{font:600 1.55rem Georgia,serif;color:var(--accent)}.lr-particle{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#6f9cad;color:#fff;font-size:.52rem;font-weight:800;box-shadow:inset -3px -3px 5px rgba(0,0,0,.14)}.lr-particle.b{background:#c59b48}.lr-particle.product{width:43px;border-radius:16px;background:linear-gradient(90deg,#6f9cad 0 33%,#c59b48 33% 66%,#6f9cad 66%)}.lr-leftover{opacity:.45;filter:grayscale(.35)}

/* Chromatography */
.chrom-stage{display:grid;place-items:center;min-height:390px;background:linear-gradient(#e8f0ed,#f7f3ea)}.chrom-paper{position:relative;width:min(390px,88%);height:330px;border:1px solid #d3c8ae;background:#fffaf0;box-shadow:0 6px 15px rgba(69,61,45,.08)}.chrom-baseline,.chrom-front{position:absolute;left:8%;right:8%;border-top:1px dashed #756f64}.chrom-baseline{bottom:34px}.chrom-front{bottom:var(--front,34px);border-color:#4f8875;transition:bottom .08s linear}.chrom-front::after{content:"solvent front";position:absolute;right:0;bottom:3px;color:var(--accent);font-size:.51rem}.chrom-lane{position:absolute;top:0;bottom:0;width:24%;transform:translateX(-50%)}.chrom-lane[data-lane="blue"]{left:25%}.chrom-lane[data-lane="purple"]{left:50%}.chrom-lane[data-lane="gold"]{left:75%}.chrom-spot{position:absolute;left:50%;bottom:var(--spot,31px);width:18px;height:18px;transform:translateX(-50%);border-radius:50%;background:#8f68a2;filter:blur(.35px);transition:bottom .08s linear}.chrom-spot.blue{background:#4e8ca8}.chrom-spot.gold{background:#d1a13f}.chrom-spot.pink{background:#b45d75}.chrom-lane-label{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);color:var(--muted);font-size:.52rem}.chrom-ruler{position:absolute;top:20px;right:4px;bottom:32px;width:12px;border-left:1px solid #8f8a80;background:repeating-linear-gradient(to bottom,transparent 0 9px,#8f8a80 9px 10px)}

/* Electrolysis decision lab */
.ed-cell{position:relative;min-height:350px;background:linear-gradient(#e7efee 0 17%,#f0ece3 17%)}.ed-beaker{position:absolute;left:10%;right:10%;top:22%;bottom:10%;overflow:hidden;border:5px solid #98a6a3;border-top:0;border-radius:0 0 24px 24px}.ed-liquid{position:absolute;inset:16% 0 0;background:linear-gradient(rgba(133,190,205,.55),rgba(76,143,165,.72))}.ed-electrode{position:absolute;top:5%;width:13%;height:62%;border-radius:5px;background:linear-gradient(90deg,#333,#5a5b55,#292a27);z-index:2}.ed-electrode.cathode{left:25%}.ed-electrode.anode{right:25%}.ed-electrode::after{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:.59rem;font-weight:800}.ed-electrode.cathode::after{content:"cathode −";color:#4e7990}.ed-electrode.anode::after{content:"anode +";color:#a6544c}.ed-ion{position:absolute;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#d2a548;color:#fff;font-size:.49rem;font-weight:800;transition:left .9s ease,top .9s ease,opacity .3s}.ed-ion.anion{background:#6f9eb2}.ed-ion.spectator{filter:saturate(.45);outline:1px dashed rgba(255,255,255,.75)}.ed-product{position:absolute;bottom:7%;padding:.25rem .4rem;border-radius:999px;background:rgba(255,253,248,.88);font-size:.55rem;font-weight:800;opacity:0;transition:opacity .25s}.ed-product.show{opacity:1}.ed-product.cathode{left:15%}.ed-product.anode{right:15%}.ed-bubble{position:absolute;width:13px;height:13px;border:2px solid rgba(255,255,255,.8);border-radius:50%;animation:edBubble 1.8s ease-in infinite}.ed-bubble:nth-child(2){animation-delay:.5s}.ed-bubble:nth-child(3){animation-delay:1s}@keyframes edBubble{0%{bottom:7%;opacity:0}20%{opacity:1}100%{bottom:75%;opacity:0}}

/* Titration */
.tit-stage{display:grid;grid-template-columns:minmax(170px,.85fr) minmax(190px,1.15fr);align-items:center;gap:1rem;min-height:390px;background:linear-gradient(#edf2ef,#f8f4eb)}.tit-apparatus{position:relative;height:350px}.tit-burette{position:absolute;left:50%;top:5px;width:32px;height:235px;transform:translateX(-50%);border:2px solid #8ca1a1;border-radius:5px;background:linear-gradient(to top,rgba(126,185,202,.72) var(--level),rgba(255,255,255,.55) var(--level))}.tit-scale{position:absolute;inset:8px 3px;background:repeating-linear-gradient(to bottom,transparent 0 8px,#697b7b 8px 9px);opacity:.45}.tit-tap{position:absolute;left:50%;top:235px;width:74px;height:8px;transform:translateX(-50%);border-radius:5px;background:#565a57}.tit-tip{position:absolute;left:50%;top:243px;width:4px;height:42px;transform:translateX(-50%);background:#7c8e8c}.tit-drop{position:absolute;left:50%;top:280px;width:8px;height:11px;transform:translateX(-50%);border-radius:50% 50% 55% 55%;background:#5e9eb5;opacity:0}.tit-drop.fall{animation:titDrop .42s ease-in}@keyframes titDrop{0%{top:275px;opacity:1}100%{top:330px;opacity:0}}.tit-flask{position:absolute;left:50%;bottom:3px;width:125px;height:85px;transform:translateX(-50%);clip-path:polygon(39% 0,61% 0,63% 18%,91% 86%,85% 100%,15% 100%,9% 86%,37% 18%);background:var(--flask,#eaa6b4);border:2px solid #8ea09c;transition:background .35s}.tit-flask::after{content:"";position:absolute;left:20%;right:20%;bottom:14%;height:35%;border-radius:50%;background:rgba(255,255,255,.2)}.tit-panel{padding:.9rem}.tit-volume{font:600 2.25rem Georgia,serif;color:var(--text)}.tit-volume small{font:500 .68rem Inter,sans-serif;color:var(--muted)}.tit-endpoint{margin-top:.5rem;padding:.5rem .6rem;border-left:3px solid var(--accent);background:#fffdf8;color:var(--muted);font-size:.6rem;line-height:1.45}

/* Collision theory */
.ct-stage{padding:0;min-height:390px}.ct-stage canvas{display:block;width:100%;height:390px;background:radial-gradient(circle at 50% 45%,#f7f3ea,#e4ece8)}.ct-overlay{position:absolute;left:.65rem;top:.65rem;display:flex;gap:.4rem}.ct-overlay span{padding:.28rem .45rem;border-radius:999px;background:rgba(255,253,248,.86);color:var(--muted);font-size:.54rem}.ct-overlay b{color:var(--text)}

/* Bond energy */
.be-stage{display:grid;grid-template-rows:1fr auto;gap:.75rem;min-height:360px;background:linear-gradient(145deg,#f5f1e8,#e9f0ec)}.be-molecules{display:flex;align-items:center;justify-content:space-around;gap:1rem;min-height:220px}.be-side{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem}.be-molecule{display:flex;align-items:center}.be-atom{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#6d9eb1;color:#fff;font:700 .65rem Inter,sans-serif;box-shadow:inset -4px -4px 7px rgba(0,0,0,.14)}.be-atom.h{width:36px;height:36px;background:#ddd9cd;color:#565650}.be-atom.cl{background:#65a56e}.be-atom.br{background:#984f43}.be-bond{width:29px;height:5px;background:#6f6c66;transition:transform .35s,opacity .35s}.be-molecule.broken .be-bond{transform:scaleX(0);opacity:0}.be-arrow{font:600 1.7rem Georgia,serif;color:var(--accent)}.be-energy-track{position:relative;height:78px;border-left:2px solid #8f8b81;border-bottom:2px solid #8f8b81}.be-energy-line{position:absolute;left:6%;right:6%;top:var(--energy,50%);height:3px;background:var(--accent);transition:top .4s}.be-energy-line::after{content:attr(data-label);position:absolute;right:0;bottom:5px;color:var(--muted);font-size:.54rem}

/* Cracking */
.crack-stage{display:grid;place-items:center;gap:1rem;min-height:360px;background:linear-gradient(145deg,#f4efe4,#e9efeb)}.carbon-chain{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;max-width:720px}.carbon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#535650;color:#fff;font-size:.56rem;font-weight:800;box-shadow:inset -3px -3px 5px rgba(0,0,0,.18)}.cc-bond{width:23px;height:4px;background:#8a867c}.cc-bond.double{height:9px;border-top:3px solid #8a867c;border-bottom:3px solid #8a867c;background:transparent}.crack-catalyst{padding:.55rem 1.1rem;border-radius:8px;background:repeating-linear-gradient(135deg,#c9b99c 0 8px,#b5a383 8px 16px);color:#3f413d;font-size:.59rem;font-weight:800}.crack-products{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem}.bromine-test{padding:.55rem .7rem;border:1px solid #c19a58;border-radius:9px;background:#c9843e;color:#fff;font-size:.61rem;font-weight:800;transition:background .45s,color .45s}.bromine-test.clear{background:#f6f3e9;color:#5d5c56}

/* Condensation polymer */
.poly-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;min-height:350px;background:linear-gradient(145deg,#f5f1e8,#e8efeb)}.poly-monomers{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem}.poly-monomer{padding:.55rem .7rem;border:1px solid #c9c4b8;border-radius:999px;background:#fffdf8;font:600 .64rem Georgia,serif}.poly-chain{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.25rem;min-height:80px}.poly-unit{padding:.52rem .62rem;border-radius:8px;background:#dfeae4;color:#315e50;font:600 .6rem Georgia,serif;animation:polyJoin .35s ease-out}.poly-link{color:var(--accent2);font-weight:800}.poly-water{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#dcecf0;color:#44788a;font-size:.54rem;font-weight:800;animation:polyWater .7s ease-out}@keyframes polyJoin{from{transform:scale(.7);opacity:0}}@keyframes polyWater{from{transform:translateY(-20px);opacity:0}}.poly-bracket{padding:.55rem;border-left:3px solid #6d6961;border-right:3px solid #6d6961}.poly-repeat{outline:3px solid rgba(128,99,143,.28);background:#eee6f2}

@media(max-width:820px){.igx-grid{grid-template-columns:1fr}.igx-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.igx-controls h3,.igx-controls>.igx-equation,.igx-controls>.igx-mini-stats,.igx-controls>.igx-actions,.igx-controls>.igx-muted{grid-column:1/-1}.iso-stage{grid-template-columns:1fr}.iso-balance{min-height:170px}.lr-vessels{grid-template-columns:1fr}.lr-arrow{transform:rotate(90deg)}.lr-vessel{width:100%;min-height:120px}.tit-stage{grid-template-columns:1fr}.tit-apparatus{height:350px}}
@media(max-width:560px){.igx-head{align-items:flex-start;flex-direction:column}.igx-controls{grid-template-columns:1fr}.igx-controls>*{grid-column:auto!important}.igx-stage{min-height:330px;padding:.65rem}.igx-readout{align-items:flex-start;flex-direction:column}.igx-readout p{text-align:left}.iso-stage{grid-template-columns:1fr}.iso-beams{height:220px}.chrom-paper{height:310px}.be-molecules{flex-direction:column}.be-arrow{transform:rotate(90deg)}.ct-stage canvas{height:360px}.crack-products{flex-direction:column}.ed-beaker{left:4%;right:4%}}

/* SN1 vs SN2 rate simulator */
.sn-wrap{display:flex;flex-direction:column;gap:1rem}.sn-badge{padding:.48rem .78rem;border:1px solid var(--border);border-radius:999px;background:#fffdf8;color:var(--accent);font:600 .82rem Georgia,serif;white-space:nowrap}.sn-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;padding:1rem;border:1px solid var(--border);border-radius:13px;background:#f5f2e9}.sn-controls label{display:flex;flex-direction:column;gap:.35rem;color:var(--muted);font-size:.68rem}.sn-controls select{width:100%;padding:.52rem .58rem;border:1px solid var(--border);border-radius:8px;background:#fffdf8;color:var(--text);font:inherit;font-size:.76rem}.sn-range-label{grid-column:span 1}.sn-range-label strong{color:var(--text);font-size:.72rem}.sn-range-label input{margin-top:.2rem}.sn-rate-laws{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.sn-law{padding:.95rem 1rem;border:1px solid var(--border);border-radius:13px;background:#fffdf8}.sn-law-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.sn-law-head>span{font:600 1.08rem Georgia,serif}.sn-law-head code{padding:.25rem .45rem;border-radius:6px;background:#eeeae0;color:var(--text);font-size:.72rem}.sn-law p{margin-top:.55rem;color:var(--muted);font-size:.7rem;line-height:1.55}.sn1-law{border-top:3px solid #9377ad}.sn2-law{border-top:3px solid #4f8875}.sn-chart{padding:1rem 1.05rem;border:1px solid var(--border);border-radius:13px;background:#fffdf8}.sn-bar-row{display:grid;grid-template-columns:38px minmax(0,1fr) 48px;align-items:center;gap:.65rem;margin:.55rem 0}.sn-bar-label{font:600 .84rem Georgia,serif}.sn-track{height:24px;border-radius:999px;background:#e7e3da;overflow:hidden}.sn-bar{display:block;width:0;height:100%;border-radius:inherit;transition:width .38s ease}.sn1-bar{background:linear-gradient(90deg,#b69bc9,#8b6aa4)}.sn2-bar{background:linear-gradient(90deg,#77aa96,#3f7b67)}.sn-bar-row>strong{text-align:right;font-size:.76rem;font-variant-numeric:tabular-nums}.sn-axis-note{display:block;margin-top:.45rem;padding-left:48px;color:var(--muted);font-size:.61rem}.sn-pathways{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.sn-pathways>div{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;padding:.8rem .9rem;border:1px solid var(--border);border-radius:11px;background:#f8f5ed}.sn-pathways strong{width:100%;font:600 .82rem Georgia,serif}.sn-pathways span{font-size:.68rem}.sn-pathways i{padding:.12rem .36rem;border-radius:999px;background:#e5eee8;color:var(--accent);font-size:.57rem;font-style:normal;text-transform:uppercase;letter-spacing:.05em}.sn-conclusion{padding:.8rem 1rem;border-left:4px solid var(--accent);border-radius:0 10px 10px 0;background:#edf3ef;color:var(--text);font-size:.75rem;line-height:1.55}.sn-conclusion strong{font-family:Georgia,serif}.sn-disclaimer{color:var(--muted);font-size:.6rem;text-align:right}
@media(max-width:760px){.sn-controls{grid-template-columns:1fr 1fr}.sn-controls label:first-child{grid-column:1/-1}.sn-rate-laws,.sn-pathways{grid-template-columns:1fr}}
@media(max-width:460px){.sn-controls{grid-template-columns:1fr}.sn-controls label:first-child{grid-column:auto}.sn-law-head{align-items:flex-start;flex-direction:column}.sn-bar-row{grid-template-columns:34px minmax(0,1fr) 42px;gap:.45rem}.sn-axis-note{padding-left:40px}.sn-badge{white-space:normal}}

/* Grade 12 calculator library and Henderson-Hasselbalch buffer calculator */
.calculator-library{display:flex;flex-direction:column;gap:1rem}.calculator-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem}.calculator-kicker{display:block;margin-bottom:.35rem;color:var(--accent2);font-size:.61rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.calculator-heading h2{font:600 1.55rem Georgia,"Times New Roman",serif;color:var(--text)}.calculator-heading p{max-width:560px;margin-top:.35rem;color:var(--muted);font-size:.76rem;line-height:1.55}.calculator-count{padding:.38rem .68rem;border:1px solid #cbd9d1;border-radius:999px;background:#e8f0eb;color:var(--accent);font-size:.64rem;font-weight:700;white-space:nowrap}
.calculator-unit{border:1px solid var(--border);border-radius:14px;background:#fffdf8;overflow:hidden;box-shadow:0 7px 22px rgba(69,61,45,.055)}.calculator-unit>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;cursor:pointer;list-style:none;background:#f2eee4;color:var(--text)}.calculator-unit>summary::-webkit-details-marker{display:none}.calculator-unit>summary>span{display:flex;align-items:center;gap:.7rem;font:600 .95rem Georgia,"Times New Roman",serif}.calculator-unit>summary b{padding:.22rem .42rem;border-radius:999px;background:#dfeae4;color:var(--accent);font:700 .54rem Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}.calculator-unit>summary small{color:var(--muted);font-size:.64rem}.calculator-unit>summary::after{content:"⌄";color:var(--accent);font-size:1rem}.calculator-unit:not([open])>summary::after{transform:rotate(-90deg)}
.hh-calculator{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(290px,.95fr);gap:0}.hh-form,.hh-result{padding:1.35rem}.hh-form{border-right:1px solid var(--border)}.hh-form-heading{display:flex;align-items:flex-start;gap:.75rem}.hh-number{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid #c7d7ce;border-radius:50%;background:#e8f0eb;color:var(--accent);font:600 .7rem Georgia,serif}.hh-form-heading h3{font:600 1.08rem Georgia,"Times New Roman",serif;color:var(--text)}.hh-form-heading p{margin-top:.28rem;color:var(--muted);font-size:.69rem;line-height:1.5}
.hh-formula{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:1rem 0;padding:.72rem;border:1px solid #ddd7ca;border-radius:10px;background:#f4f1e9;color:var(--text);font:600 1.08rem Georgia,"Times New Roman",serif}.hh-fraction{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1}.hh-fraction>span:first-child{padding:0 .35rem .2rem;border-bottom:1px solid currentColor}.hh-fraction>span:last-child{padding-top:.16rem}
.hh-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.hh-fields>label:first-child{grid-column:1/-1}.hh-fields label{display:flex;flex-direction:column;gap:.32rem;color:var(--text);font-size:.68rem;font-weight:700}.hh-fields input{width:100%;padding:.58rem .65rem;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font:500 .8rem Inter,sans-serif;outline:none}.hh-fields input:focus{border-color:#81a091;box-shadow:0 0 0 3px rgba(56,108,91,.12)}.hh-fields label>small{color:var(--muted);font-size:.57rem;font-weight:400}.hh-input-unit{position:relative;display:block}.hh-input-unit input{padding-right:5.7rem}.hh-input-unit i{position:absolute;right:.58rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.57rem;font-style:normal;font-weight:400;pointer-events:none}.hh-error{margin-top:.7rem;padding:.55rem .65rem;border-left:3px solid #b8534f;border-radius:0 7px 7px 0;background:#f8e8e5;color:#8f3e3a;font-size:.66rem;line-height:1.45}.hh-calculate{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:.9rem;padding:.67rem .8rem;border:1px solid var(--accent);border-radius:9px;background:var(--accent);color:#fff;font:700 .72rem Inter,sans-serif;cursor:pointer;transition:transform .16s,box-shadow .16s}.hh-calculate:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(56,108,91,.2)}.hh-calculate span{font-size:1rem}
.hh-result{display:flex;flex-direction:column;background:linear-gradient(145deg,#e9f1ec,#f5f2e9)}.hh-result-label{color:var(--accent);font-size:.59rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.hh-result output{display:block;margin:.35rem 0 0;font:600 clamp(2.8rem,6vw,4.1rem)/1 Georgia,"Times New Roman",serif;color:var(--text);font-variant-numeric:tabular-nums}.hh-result>p{margin-top:.38rem;color:var(--muted);font-size:.69rem}.hh-scale{margin-top:1.35rem}.hh-scale-labels{display:flex;justify-content:space-between;gap:.4rem;margin-bottom:.35rem;color:var(--muted);font-size:.54rem}.hh-scale-track{position:relative;height:9px;border-radius:999px;background:linear-gradient(90deg,#d88e82 0%,#e8c97d 32%,#a7c8a4 50%,#7bb3af 70%,#8b8ec0 100%)}.hh-scale-track>span{position:absolute;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:var(--text);box-shadow:0 2px 6px rgba(41,43,37,.25);transition:left .35s ease}.hh-scale-track i{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);color:var(--text);font-size:.5rem;font-style:normal;font-weight:700}
.hh-explanation{margin-top:1.35rem;padding:.72rem .8rem;border-left:3px solid var(--accent);border-radius:0 9px 9px 0;background:rgba(255,253,248,.7)}.hh-explanation strong{display:block;color:var(--text);font:600 .76rem Georgia,serif}.hh-explanation p{margin-top:.28rem;color:var(--muted);font-size:.63rem;line-height:1.5}.hh-note{margin-top:auto!important;padding-top:1rem;color:var(--muted)!important;font-size:.57rem!important;line-height:1.5}
@media(max-width:760px){.calculator-heading{align-items:flex-start;flex-direction:column;gap:.6rem}.hh-calculator{grid-template-columns:1fr}.hh-form{border-right:0;border-bottom:1px solid var(--border)}.hh-form,.hh-result{padding:1.05rem}.hh-result{min-height:330px}}
@media(max-width:440px){.hh-fields{grid-template-columns:1fr}.hh-fields>label:first-child{grid-column:auto}.calculator-unit>summary{align-items:flex-start}.calculator-unit>summary small{display:none}.hh-formula{font-size:.9rem}.hh-scale-labels{font-size:.48rem}}

/* IGCSE and A Level self-test quiz */
.quiz-library{display:flex;flex-direction:column;gap:1rem}.quiz-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.quiz-kicker{display:block;margin-bottom:.35rem;color:var(--accent2);font-size:.61rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.quiz-heading h2{font:600 1.55rem Georgia,"Times New Roman",serif;color:var(--text)}.quiz-heading p{max-width:650px;margin-top:.35rem;color:var(--muted);font-size:.76rem;line-height:1.55}.quiz-count{padding:.38rem .68rem;border:1px solid #cbd9d1;border-radius:999px;background:#e8f0eb;color:var(--accent);font-size:.64rem;font-weight:700;white-space:nowrap}
.quiz-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.quiz-level{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.85rem;border:1px solid var(--border);border-radius:13px;background:#fffdf8;color:var(--text);text-align:left;cursor:pointer;box-shadow:0 5px 15px rgba(69,61,45,.05);transition:transform .16s,border-color .16s,background .16s}.quiz-level:hover{transform:translateY(-1px);border-color:#95ab9f}.quiz-level.active{border-color:var(--accent);background:#edf4ef;box-shadow:0 0 0 2px rgba(56,108,91,.1)}.quiz-level-code{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#e4ece7;color:var(--accent);font:600 .88rem Georgia,serif}.quiz-level.active .quiz-level-code{background:var(--accent);color:#fff}.quiz-level strong{display:block;font:600 .91rem Georgia,serif}.quiz-level small{display:block;margin-top:.2rem;color:var(--muted);font-size:.6rem;line-height:1.4}.quiz-level b{color:var(--accent);font-size:.63rem;white-space:nowrap}
.quiz-topic-picker{padding:1rem;border:1px solid var(--border);border-radius:15px;background:#fffdf8;box-shadow:0 9px 26px rgba(69,61,45,.06)}.quiz-topic-tools{display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:end;gap:1rem;margin-bottom:.9rem}.quiz-topic-kicker{color:var(--accent);font-size:.57rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.quiz-topic-tools h3{margin-top:.16rem;font:600 1.15rem Georgia,serif}.quiz-topic-tools p{margin-top:.25rem;color:var(--muted);font-size:.65rem;line-height:1.45}.quiz-topic-tools label{display:flex;flex-direction:column;gap:.25rem;color:var(--text);font-size:.62rem;font-weight:700}.quiz-topic-tools label span{color:var(--muted);font-size:.55rem;font-weight:400}.quiz-topic-tools input{width:100%;padding:.48rem .55rem;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font:inherit;font-size:.7rem;outline:none}.quiz-topic-tools input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,108,91,.12)}.quiz-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}.quiz-topic-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:.6rem;padding:.62rem .7rem;border:1px solid var(--border);border-radius:10px;background:#faf8f2;color:var(--text);text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}.quiz-topic-card:hover{transform:translateY(-1px);border-color:#8fa99b;background:#edf3ef}.quiz-topic-number{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e4ece7;color:var(--accent);font:600 .62rem Georgia,serif}.quiz-topic-card small{display:block;color:var(--accent2);font-size:.49rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.quiz-topic-card strong{display:block;margin-top:.08rem;font:600 .73rem Georgia,serif}.quiz-topic-card i{display:block;margin-top:.12rem;color:var(--muted);font-size:.52rem;font-style:normal;line-height:1.35}.quiz-topic-card b{padding:.2rem .38rem;border-radius:999px;background:#eeeae0;color:var(--muted);font-size:.52rem;white-space:nowrap}.quiz-data-note{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;margin-top:.8rem;padding:.65rem .72rem;border-left:3px solid var(--accent);background:#edf3ef}.quiz-data-note>span{color:var(--accent);font-size:.58rem;font-weight:800;text-transform:uppercase}.quiz-data-note p{color:var(--muted);font-size:.58rem;line-height:1.4}.quiz-back-link{padding:0;border:0;background:transparent;color:var(--accent);font:700 .6rem Inter,sans-serif;cursor:pointer;white-space:nowrap}
.quiz-term{position:relative;border-bottom:1px dotted var(--accent);color:inherit}.quiz-term::after{content:attr(data-cn);position:absolute;z-index:12;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%) translateY(3px);min-width:max-content;padding:.28rem .45rem;border-radius:6px;background:#292b25;color:#fff;font:600 .61rem Inter,sans-serif;letter-spacing:0;opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 5px 14px rgba(41,43,37,.22);transition:opacity .14s,transform .14s}.quiz-term::before{content:"";position:absolute;z-index:13;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);border:5px solid transparent;border-top-color:#292b25;opacity:0;visibility:hidden;transition:opacity .14s}.quiz-term:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.quiz-term:hover::before{opacity:1;visibility:visible}
.quiz-question-term{position:relative;border-bottom:1px dotted #8c709e;color:inherit;cursor:help}.quiz-question-term::after{content:attr(data-cn);position:absolute;z-index:25;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:220px;padding:.34rem .52rem;border-radius:7px;background:#292b25;color:#fff;font:600 .62rem/1.35 Inter,sans-serif;letter-spacing:0;text-align:center;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 6px 16px rgba(41,43,37,.25);transition:opacity .12s 0s,transform .12s 0s,visibility 0s .12s}.quiz-question-term::before{content:"";position:absolute;z-index:26;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:6px solid transparent;border-top-color:#292b25;opacity:0;visibility:hidden;transition:opacity .12s 0s,visibility 0s .12s}.quiz-question-term:hover::after,.quiz-question-term:hover::before{opacity:1;visibility:visible;transition-delay:2s}.quiz-question-term:hover::after{transform:translateX(-50%) translateY(0)}.quiz-question-term.show-cn::after,.quiz-question-term.show-cn::before{opacity:1;visibility:visible;transition-delay:0s}.quiz-question-term.show-cn::after{transform:translateX(-50%) translateY(0)}
.quiz-workspace{overflow:hidden;border:1px solid var(--border);border-radius:15px;background:#fffdf8;box-shadow:0 9px 26px rgba(69,61,45,.06)}.quiz-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem 1rem;border-bottom:1px solid var(--border);background:#f3efe6;color:var(--muted);font-size:.62rem}.quiz-toolbar>div{display:flex;align-items:center;gap:.65rem;flex:1}.quiz-progress{width:min(240px,38vw);height:6px;overflow:hidden;border-radius:999px;background:#ddd8cd}.quiz-progress span{display:block;width:5%;height:100%;border-radius:inherit;background:var(--accent);transition:width .25s}.quiz-question-card{min-height:340px;padding:1.25rem 1.35rem}.quiz-question-meta{display:flex;align-items:center;justify-content:space-between;color:var(--accent);font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.quiz-question-meta span:last-child{font:600 1.6rem Georgia,serif;color:#c9c5bb}.quiz-question-card h3{max-width:760px;margin:.35rem 0 .45rem;font:600 1.17rem/1.45 Georgia,"Times New Roman",serif;color:var(--text)}.quiz-cn{display:inline-block;margin:0 .12rem;padding:.08rem .32rem;border-radius:999px;background:#ede7f3;color:#725a8b;font:600 .58rem Inter,sans-serif;vertical-align:.15em;white-space:nowrap}.quiz-language-note{display:flex;align-items:center;gap:.4rem;margin-bottom:.85rem;color:var(--muted);font-size:.6rem}.quiz-language-note span{padding:.15rem .36rem;border-radius:999px;background:#ede7f3;color:#725a8b;font-weight:700}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.quiz-option{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.6rem;min-height:54px;padding:.58rem .68rem;border:1px solid var(--border);border-radius:10px;background:#faf8f2;color:var(--text);font-size:.72rem;line-height:1.4;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}.quiz-option:hover{transform:translateY(-1px);border-color:#9eb3a8}.quiz-option.selected{border-color:var(--accent);background:#e8f1ec;box-shadow:0 0 0 2px rgba(56,108,91,.08)}.quiz-option input{width:15px;height:15px;accent-color:var(--accent)}.quiz-option-letter{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#ebe7de;color:var(--muted);font:600 .64rem Georgia,serif}.quiz-option.selected .quiz-option-letter{background:var(--accent);color:#fff}.quiz-message{min-height:1.1rem;margin-top:.65rem;color:#a04e47;font-size:.65rem;font-weight:700}
.quiz-actions{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.78rem 1rem;border-top:1px solid var(--border);background:#f7f3eb}.quiz-primary,.quiz-secondary{padding:.55rem .78rem;border-radius:8px;font:700 .65rem Inter,sans-serif;cursor:pointer;transition:transform .15s,box-shadow .15s}.quiz-primary{border:1px solid var(--accent);background:var(--accent);color:#fff}.quiz-secondary{border:1px solid var(--border);background:#fff;color:var(--accent)}.quiz-primary:hover,.quiz-secondary:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(56,108,91,.14)}.quiz-secondary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.quiz-dots{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.25rem}.quiz-dots button{display:grid;place-items:center;width:22px;height:22px;border:1px solid #d4d0c7;border-radius:50%;background:#fff;color:var(--muted);font-size:.52rem;cursor:pointer}.quiz-dots button.answered{border-color:#a9beb3;background:#e7efe9;color:var(--accent)}.quiz-dots button.active{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 0 3px rgba(56,108,91,.12)}
.quiz-results{display:grid;grid-template-columns:130px minmax(0,1fr);gap:1.2rem;padding:1.2rem;border:1px solid var(--border);border-radius:15px;background:linear-gradient(145deg,#e9f1ec,#f7f3ea);scroll-margin-top:1rem}.quiz-score-ring{display:flex;flex-direction:column;align-items:center;justify-content:center;width:126px;height:126px;border:10px solid #b8d0c3;border-radius:50%;background:#fffdf8;color:var(--text)}.quiz-score-ring strong{font:600 2.7rem/1 Georgia,serif}.quiz-score-ring span{color:var(--muted);font-size:.65rem}.quiz-result-kicker{display:block;color:var(--accent);font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.quiz-score-copy h3{margin-top:.25rem;font:600 1.35rem Georgia,serif}.quiz-score-copy>p{margin-top:.3rem;color:var(--muted);font-size:.7rem}.quiz-score-stats{display:flex;gap:.45rem;margin:.7rem 0}.quiz-score-stats span{padding:.28rem .5rem;border-radius:999px;font-size:.62rem}.quiz-score-stats .correct{background:#deede4;color:#316a56}.quiz-score-stats .incorrect{background:#f3dfdc;color:#944b45}.quiz-score-stats b{font-size:.75rem}.quiz-review{grid-column:1/-1;display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem}.quiz-review-item{border:1px solid var(--border);border-radius:9px;background:#fffdf8;overflow:hidden}.quiz-review-item summary{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:.5rem;padding:.58rem .68rem;cursor:pointer;list-style:none}.quiz-review-item summary::-webkit-details-marker{display:none}.quiz-review-item summary>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-weight:800}.quiz-review-item.right summary>span{background:#deede4;color:#316a56}.quiz-review-item.wrong summary>span{background:#f3dfdc;color:#944b45}.quiz-review-item summary strong{font:600 .72rem Georgia,serif}.quiz-review-item summary small{color:var(--muted);font-size:.57rem}.quiz-review-item>div{padding:.1rem .75rem .75rem 2.95rem;color:var(--muted);font-size:.65rem;line-height:1.5}.quiz-review-item>div p{margin-top:.32rem}.quiz-review-item>div b{color:var(--text)}.quiz-review-item .quiz-explanation{padding:.45rem .55rem;border-left:3px solid var(--accent);background:#edf3ef;color:var(--text)}.quiz-coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:310px;padding:2rem;border:1px dashed #bfc9c2;border-radius:15px;background:#f7f3eb;text-align:center}.quiz-coming-soon>span{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#e9e1ef;color:var(--accent2);font:600 1.2rem Georgia,serif}.quiz-coming-soon h3{margin-top:.75rem;font:600 1.2rem Georgia,serif}.quiz-coming-soon p{margin-top:.3rem;color:var(--muted);font-size:.7rem}
@media(max-width:760px){.quiz-heading{align-items:flex-start;flex-direction:column;gap:.6rem}.quiz-levels{grid-template-columns:1fr}.quiz-topic-tools{grid-template-columns:1fr}.quiz-topic-tools label{max-width:260px}.quiz-options{grid-template-columns:1fr}.quiz-question-card{min-height:430px;padding:1rem}.quiz-actions{grid-template-columns:auto auto}.quiz-dots{grid-column:1/-1;grid-row:2;order:3}.quiz-results{grid-template-columns:100px 1fr}.quiz-score-ring{width:96px;height:96px;border-width:8px}.quiz-score-ring strong{font-size:2.1rem}.quiz-data-note{grid-template-columns:1fr}.quiz-data-note .quiz-secondary{justify-self:start}}
@media(max-width:540px){.quiz-topic-grid{grid-template-columns:1fr}.quiz-topic-card{grid-template-columns:32px minmax(0,1fr) auto}}
@media(max-width:480px){.quiz-level{grid-template-columns:40px 1fr}.quiz-level b{grid-column:2}.quiz-level-code{width:40px;height:40px}.quiz-toolbar{align-items:flex-start;flex-direction:column;gap:.45rem}.quiz-toolbar>div{width:100%;flex-wrap:wrap}.quiz-progress{flex:1;width:auto}.quiz-question-card h3{font-size:1.02rem}.quiz-question-card{min-height:455px}.quiz-results{grid-template-columns:1fr}.quiz-score-ring{justify-self:center}.quiz-score-copy{text-align:center}.quiz-score-stats{justify-content:center}.quiz-review{grid-column:auto;text-align:left}.quiz-review-item>div{padding-left:.75rem}.quiz-actions{gap:.45rem}.quiz-primary,.quiz-secondary{padding:.52rem .62rem}}

/* Chemistry vocabulary library */
.vocab-library{display:flex;flex-direction:column;gap:1rem}.vocab-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.vocab-kicker{display:block;margin-bottom:.35rem;color:var(--accent2);font-size:.61rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.vocab-heading h2{font:600 1.55rem Georgia,"Times New Roman",serif;color:var(--text)}.vocab-heading p{max-width:620px;margin-top:.35rem;color:var(--muted);font-size:.76rem;line-height:1.55}.vocab-search{display:flex;flex-direction:column;gap:.25rem;width:min(330px,100%);color:var(--muted);font-size:.58rem;font-weight:700}.vocab-search input{width:100%;padding:.55rem .65rem;border:1px solid var(--border);border-radius:9px;background:#fffdf8;color:var(--text);font:inherit;font-size:.68rem;outline:none}.vocab-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,108,91,.12)}.vocab-level-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.vocab-level-tabs button{padding:.68rem;border:1px solid var(--border);border-radius:10px;background:#fffdf8;color:var(--muted);font:700 .7rem Inter,sans-serif;cursor:pointer}.vocab-level-tabs button:hover{border-color:#9eb7aa;color:var(--accent)}.vocab-level-tabs button.active{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 5px 14px rgba(56,108,91,.16)}.vocab-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.55rem;border-bottom:1px solid var(--border)}.vocab-summary strong{font:600 1rem Georgia,serif;color:var(--text)}.vocab-summary span{padding:.28rem .5rem;border-radius:999px;background:#e7efe9;color:var(--accent);font-size:.57rem;font-weight:700}.vocab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.vocab-card{display:grid;grid-template-columns:34px minmax(0,1fr);gap:.65rem;padding:.75rem;border:1px solid var(--border);border-radius:11px;background:#fffdf8;box-shadow:0 4px 13px rgba(69,61,45,.04)}.vocab-number{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e5ede8;color:var(--accent);font-size:.55rem;font-weight:800}.vocab-card h3{font:600 .82rem Georgia,"Times New Roman",serif;color:var(--text)}.vocab-card strong{display:block;margin-top:.12rem;color:var(--accent2);font-size:.66rem}.vocab-card p{margin-top:.28rem;color:var(--muted);font-size:.62rem;line-height:1.48}.vocab-empty{padding:1rem;border:1px dashed #bfc9c2;border-radius:10px;color:var(--muted);font-size:.68rem;text-align:center}
@media(max-width:700px){.vocab-heading{align-items:flex-start;flex-direction:column}.vocab-search{width:100%}.vocab-grid{grid-template-columns:1fr}}
@media(max-width:420px){.vocab-level-tabs button{padding:.58rem .3rem}.vocab-card{padding:.65rem}}

/* Teaching slides and materials library */
.tab-bar button{min-width:0;font-size:.74rem;padding:0 .4rem}.tab-bar #tab-vocabulary{flex-grow:1.08;font-size:.68rem;line-height:1.15}.tab-bar #tab-materials{flex-grow:1.35;font-size:.68rem;line-height:1.15}
.materials-library{display:flex;flex-direction:column;gap:1rem}.materials-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.materials-kicker{display:block;margin-bottom:.35rem;color:var(--accent2);font-size:.61rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.materials-heading h2{font:600 1.55rem Georgia,"Times New Roman",serif;color:var(--text)}.materials-heading p{max-width:620px;margin-top:.35rem;color:var(--muted);font-size:.76rem;line-height:1.55}.materials-count{padding:.38rem .68rem;border:1px solid #cbd9d1;border-radius:999px;background:#e8f0eb;color:var(--accent);font-size:.64rem;font-weight:700;white-space:nowrap}.material-card{overflow:hidden;border:1px solid var(--border);border-radius:15px;background:#fffdf8;box-shadow:0 8px 22px rgba(69,61,45,.06)}.material-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem}.material-icon{display:grid;place-items:center;width:54px;height:66px;border:1px solid #d9b6ae;border-radius:7px 7px 10px 7px;background:#f7e7e2;color:#a5473d;font-size:.68rem;font-weight:800;letter-spacing:.06em}.material-type{color:var(--accent2);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.material-summary h3{margin-top:.2rem;font:600 1.02rem Georgia,"Times New Roman",serif;color:var(--text)}.material-summary p{max-width:610px;margin-top:.3rem;color:var(--muted);font-size:.68rem;line-height:1.5}.material-meta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}.material-meta span{padding:.2rem .42rem;border-radius:999px;background:#eeeae0;color:var(--muted);font-size:.56rem}.material-actions{display:flex;align-items:center;gap:.45rem}.material-actions a{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.56rem .7rem;border-radius:8px;font-size:.65rem;font-weight:700;text-decoration:none;white-space:nowrap}.material-open{border:1px solid var(--border);background:#fff;color:var(--accent)}.material-download{border:1px solid var(--accent);background:var(--accent);color:#fff}.material-actions a:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(56,108,91,.14)}.material-preview{display:block;width:100%;height:620px;border:0;border-top:1px solid var(--border);background:#ece9e1}
@media(max-width:760px){.materials-heading{align-items:flex-start;flex-direction:column;gap:.6rem}.material-summary{grid-template-columns:auto 1fr}.material-actions{grid-column:1/-1;justify-content:flex-end}.material-preview{height:520px}}
@media(max-width:480px){.material-summary{grid-template-columns:1fr}.material-icon{width:44px;height:52px}.material-actions{grid-column:auto;justify-content:stretch}.material-actions a{flex:1}.material-preview{height:430px}}
@media(max-width:700px){.tab-bar button,.tab-bar #tab-vocabulary,.tab-bar #tab-materials{min-width:145px;flex:0 0 145px}}

/* Per-question quiz marking and bilingual feedback */
.quiz-option.correct{border-color:#6f9d80;background:#e2f0e7;box-shadow:0 0 0 2px rgba(70,130,91,.08)}.quiz-option.correct .quiz-option-letter{background:#3f805b;color:#fff}.quiz-option.incorrect{border-color:#c97970;background:#f7e4e1;box-shadow:0 0 0 2px rgba(169,75,66,.07)}.quiz-option.incorrect .quiz-option-letter{background:#a74f48;color:#fff}.quiz-option.locked{opacity:.62;cursor:default;transform:none}.quiz-option input:disabled{cursor:default}.quiz-dots button.correct{border-color:#75a488;background:#e2f0e7;color:#32664b}.quiz-dots button.incorrect{border-color:#cc847b;background:#f7e4e1;color:#914942}.quiz-dots button.active{background:var(--accent);color:#fff}.quiz-feedback{margin-top:.75rem;overflow:hidden;border:1px solid var(--border);border-radius:11px;background:#fff}.quiz-feedback-head{display:flex;align-items:center;gap:.65rem;padding:.68rem .78rem}.quiz-feedback-head>span{display:grid;place-items:center;width:31px;height:31px;flex:none;border-radius:50%;color:#fff;font-weight:800}.quiz-feedback-head strong{display:block;font:600 .83rem Georgia,"Times New Roman",serif}.quiz-feedback-head p{margin-top:.12rem;color:var(--muted);font-size:.61rem}.quiz-feedback-head.correct{background:#e5f0e9;color:#32664b}.quiz-feedback-head.correct>span{background:#43805d}.quiz-feedback-head.incorrect{background:#f5e5e2;color:#914942}.quiz-feedback-head.incorrect>span{background:#aa574f}.quiz-feedback-body{display:flex;flex-direction:column;gap:.45rem;padding:.72rem .82rem;color:var(--text);font-size:.66rem;line-height:1.55}.quiz-feedback-body b{color:var(--accent)}.quiz-feedback-reason{padding:.58rem .65rem;border-left:3px solid var(--accent2);border-radius:0 8px 8px 0;background:#f2edf5}.quiz-feedback-reason p{margin-top:.28rem}.quiz-feedback-check{color:var(--muted)}

/* Global typography: larger, cleaner and consistent across the full site */
html{font-size:18px}body,body *{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}@media(max-width:700px){html{font-size:17px}}

/* Full English-first and Chinese-second answer explanations */
.quiz-feedback-answer{padding:.45rem .55rem;border-radius:7px;background:#f8e8e5;color:#8f4740}.quiz-explanation-language{padding:.7rem .78rem;border:1px solid var(--border);border-radius:9px;background:#fffdf8}.quiz-explanation-language>span{display:inline-block;margin-bottom:.35rem;padding:.18rem .42rem;border-radius:999px;font-size:.58rem;font-weight:800;letter-spacing:.04em}.quiz-explanation-language.english>span{background:#e5eee9;color:#356950}.quiz-explanation-language.chinese{background:#f4f0f7}.quiz-explanation-language.chinese>span{background:#e8deef;color:#6e5385}.quiz-explanation-language p{margin-top:.35rem;font-size:.68rem;line-height:1.65}.quiz-explanation-language p:first-of-type{margin-top:0}.quiz-explanation-language b{color:var(--text)}

/* Apple-inspired interface refresh — August 2026 */
:root{--bg:#f5f5f7;--surface:#fff;--border:rgba(0,0,0,.085);--accent:#0071e3;--accent2:#5856d6;--green:#248a3d;--blue:#0071e3;--text:#1d1d1f;--muted:#6e6e73;--tab-h:48px;--apple-shadow:0 18px 50px rgba(0,0,0,.07);--apple-shadow-small:0 6px 22px rgba(0,0,0,.055)}
html{scroll-behavior:smooth;background:#f5f5f7}body{background:radial-gradient(circle at 50% 0,#fff 0,#f5f5f7 34rem);color:var(--text);font-size:1rem;letter-spacing:-.008em;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}
header{position:relative;z-index:20;display:block;max-width:none;margin:0;padding:0 5vw;border:0;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;justify-content:flex-start;max-width:1240px;height:68px;margin:auto;gap:.7rem}.header-mark{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px;background:linear-gradient(145deg,#147ce5,#0064c8);color:#fff;box-shadow:0 5px 16px rgba(0,113,227,.24)}.header-mark svg{width:23px;height:23px}.brand-copy{display:flex;align-items:baseline;gap:.65rem;min-width:0}.brand-kicker{order:2;color:#86868b;font-size:.66rem;font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap}header h1{font-size:1rem;font-weight:650;letter-spacing:-.025em;color:#1d1d1f;-webkit-text-fill-color:#1d1d1f;white-space:nowrap}
.site-hero{height:min(650px,67vh);min-height:490px;max-width:1440px;margin:0 auto;border:0;border-radius:0;background:#111;box-shadow:none}.site-hero::after{background:linear-gradient(90deg,rgba(0,0,0,.77) 0%,rgba(0,0,0,.48) 42%,rgba(0,0,0,.08) 72%),linear-gradient(0deg,rgba(0,0,0,.2),transparent 45%)}.site-hero>img{object-position:center 48%;transform:scale(1.015)}
.hero-copy{z-index:2;left:max(5vw,calc((100% - 1240px)/2));top:50%;width:min(610px,50%);transform:translateY(-50%);color:#fff}.hero-copy>span{color:rgba(255,255,255,.72);font-size:.68rem;font-weight:650;letter-spacing:.14em}.hero-copy h2{margin:.65rem 0 .8rem;color:#fff;font-size:clamp(2.7rem,5.5vw,5.5rem);font-weight:650;line-height:.96;letter-spacing:-.065em;text-wrap:balance}.hero-copy p{max-width:550px;color:rgba(255,255,255,.82);font-size:clamp(.9rem,1.45vw,1.18rem);line-height:1.5}.hero-actions{display:flex;gap:.6rem;margin-top:1.35rem}.hero-actions button{padding:.66rem 1.05rem;border:1px solid #0071e3;border-radius:999px;background:#0071e3;color:#fff;font-size:.76rem;font-weight:600;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}.hero-actions button:hover{transform:translateY(-2px);background:#0077ed;box-shadow:0 8px 22px rgba(0,113,227,.3)}.hero-actions .hero-action-secondary{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1);backdrop-filter:blur(12px)}.hero-actions .hero-action-secondary:hover{background:rgba(255,255,255,.2)}