/* Mobile-first: base styles are for phones; wider screens are added with min-width queries. */

/* ---------- Theme tokens ---------- */
:root {
  --bg: #fff8ef;
  --bg-dot: #f3e6d4;
  --card: #ffffff;
  --ink: #1f2440;
  --muted: #5e6385;
  --line: #ece3d6;
  --accent: #6c4cf1;
  --accent-ink: #ffffff;
  --accent-soft: #efeaff;
  --sun: #ffc93c;
  --good: #1e9e5a;
  --good-soft: #e2f7ea;
  --bad: #d6455d;
  --bad-soft: #fde8ec;
  --tc: #6c4cf1; /* topic colour, set per level by app.js */
  --tc-soft: color-mix(in srgb, var(--tc) 13%, var(--card));
  --shadow: 0 2px 0 rgba(31, 36, 64, .06), 0 10px 24px -10px rgba(31, 36, 64, .18);
  --radius: 20px;
  --gutter: 16px;
  --tap: 44px;
  --head: "Baloo 2", "Nunito", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14152b; --bg-dot: #1d1f3a; --card: #1f2142; --ink: #f1f0ff; --muted: #a9abd0; --line: #2f3260;
    --accent: #9d86ff; --accent-ink: #14152b; --accent-soft: #2b2a5c; --sun: #ffd25e;
    --good: #4fd18b; --good-soft: #173a2a; --bad: #ff7a8f; --bad-soft: #43202b;
    --shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14152b; --bg-dot: #1d1f3a; --card: #1f2142; --ink: #f1f0ff; --muted: #a9abd0; --line: #2f3260;
  --accent: #9d86ff; --accent-ink: #14152b; --accent-soft: #2b2a5c; --sun: #ffd25e;
  --good: #4fd18b; --good-soft: #173a2a; --bad: #ff7a8f; --bad-soft: #43202b;
  --shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- Base (phone) ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-dot) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  font: 18px/1.6 "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: break-word;
}
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--head); line-height: 1.2; margin: 0 0 .4em; font-weight: 800; }
h1 { font-size: 1.75em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.1em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.top-inner {
  max-width: 960px; margin: 0 auto;
  padding: 8px max(var(--gutter), env(safe-area-inset-left)) 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.brand {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px;
  font-family: var(--head); font-weight: 800; font-size: 16px; text-decoration: none; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand .owl { width: 32px; height: 32px; flex: none; }
.theme-btn {
  flex: none; width: var(--tap); height: var(--tap);
  border: 2px solid var(--line); border-radius: 50%;
  background: var(--card); cursor: pointer; font-size: 18px; line-height: 1;
}
.lang {
  flex: 1 0 100%; order: 3;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
  background: var(--bg); border: 2px solid var(--line); border-radius: 999px;
}
.lang button {
  min-height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

main {
  max-width: 960px; margin: 0 auto;
  padding: 18px max(var(--gutter), env(safe-area-inset-left)) calc(56px + env(safe-area-inset-bottom));
}
section { margin-bottom: 28px; }

.card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

/* ---------- Bilingual text ---------- */
body.lang-bm .en, body.lang-en .bm { display: none; }
body.lang-both .bi > .bm, body.lang-both .bi > .en { display: block; }
body.lang-both .bi > .en { color: var(--muted); font-size: .9em; font-style: italic; font-weight: 600; }
body.lang-both .bi.inline > .bm, body.lang-both .bi.inline > .en { display: inline; }
body.lang-both .bi.inline > .en::before { content: " / "; font-style: normal; }
/* inside coloured banners the muted grey is unreadable */
.btn .bi > .en, .btn-more .bi > .en, .journey .bi > .en, .on-color.bi > .en, .on-color .bi > .en { color: inherit !important; opacity: .85; }

/* ---------- Mascot ---------- */
.owl { display: block; }
.owl-float { animation: float 3.2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px) rotate(-2deg); } }

.bubble-row { display: flex; align-items: flex-end; gap: 10px; }
.bubble-row .owl { width: 64px; height: 64px; flex: none; }
.bubble {
  position: relative; margin: 0 0 14px; padding: 10px 14px;
  background: var(--card); color: var(--ink); border-radius: 16px 16px 16px 4px;
  font-weight: 700; box-shadow: var(--shadow);
}

/* ---------- Home ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #6c4cf1 0%, #a64cf1 55%, #ff7aa8 100%);
  color: #fff; border-radius: 28px; padding: 20px 18px 22px; margin-bottom: 26px;
  box-shadow: 0 14px 30px -14px rgba(108, 76, 241, .7);
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12);
}
.hero::before { width: 180px; height: 180px; right: -50px; top: -60px; }
.hero::after { width: 110px; height: 110px; left: -30px; bottom: -50px; }
.hero-inner { position: relative; display: grid; gap: 6px; }
.hero .owl { width: 92px; height: 92px; }
.hello { margin: 0; font-family: var(--head); font-weight: 700; font-size: 1.1em; }
.hero h1 { font-size: 1.85em; margin: 0; }
.hero p { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: .92em;
}

.group-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.group-head .pill {
  font-family: var(--head); font-weight: 800; font-size: .8em; letter-spacing: .04em;
  background: var(--ink); color: var(--bg); border-radius: 999px; padding: 2px 10px;
}
.group-head h2 { margin: 0; }

/* Subject switch (Matematik | Sains) above the level tabs */
.subj-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px;
  padding: 5px; margin: 0 0 18px; border-radius: 999px;
  background: var(--card); border: 2px solid var(--line);
}
.subj-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap);
  padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font-family: var(--head); font-weight: 800; font-size: 1.05em; line-height: 1.1; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.subj-btn .bi > .en { font-size: .78em; }
.subj-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.subj-btn[aria-pressed="true"] .bi > .en { color: inherit; opacity: .8; }
.subj-btn:focus-visible { outline: 3px solid var(--tc, #6c4cf1); outline-offset: 2px; }

/* Level tabs: pick a year/form to see only its topics */
.school { margin-bottom: 18px; }
.lvl-tabs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lvl-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--tap);
  padding: 6px 12px; border: 2px solid var(--tc); border-radius: 16px;
  background: var(--card); color: var(--ink); cursor: pointer; text-align: left;
  font-family: var(--head); font-weight: 800; line-height: 1.15;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tc) 35%, transparent);
  transition: transform .12s ease, background .12s ease;
}
.lvl-tab .bi > .en { font-size: .78em; }
.lvl-tab-count {
  font-family: "Nunito", system-ui, sans-serif; font-size: .75em; font-weight: 800;
  padding: 1px 7px; border-radius: 999px; background: var(--tc-soft); color: var(--ink);
}
.lvl-tab[aria-pressed="true"] {
  background: var(--tc); color: #fff;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tc) 70%, #000);
}
.lvl-tab[aria-pressed="true"] .bi > .en { color: inherit; opacity: .85; }
.lvl-tab[aria-pressed="true"] .lvl-tab-count { background: rgba(255, 255, 255, .25); color: #fff; }
.lvl-tab:active { transform: translateY(2px); }
#lvl-panel { padding-top: 8px; border-top: 2px dashed var(--line); }
.lvl-panel-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 12px;
  padding-left: 10px; border-left: 6px solid var(--tc);
}
.lvl-panel-head h2 { margin: 0; }
.lvl-panel-count { color: var(--muted); font-weight: 700; }

/* Teacher page: one row per topic with open / download buttons */
.paper-search { margin: 0 0 18px; }
.paper-list { display: grid; gap: 10px; }
.paper-row {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center;
  padding: 12px 14px; background: var(--card); border: 2px solid var(--line);
  border-left: 6px solid var(--tc); border-radius: 16px; box-shadow: var(--shadow);
}
.paper-row.na { opacity: .7; }
.paper-emoji { font-size: 1.8em; line-height: 1; }
.paper-title { font-family: var(--head); font-weight: 800; line-height: 1.2; }
.paper-title .en { font-size: .85em; }
.paper-actions { grid-column: 1 / -1; display: grid; gap: 8px; }
.paper-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.paper-label { flex: 1 1 100%; font-weight: 800; color: var(--muted); font-size: .9em; }
.paper-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 6px 14px;
  border-radius: 999px; background: var(--tc); color: #fff; text-decoration: none; text-align: center;
  font-family: var(--head); font-weight: 800; line-height: 1.15; border: 2px solid var(--tc);
}
.paper-btn-soft { background: var(--card); color: var(--tc); }
.paper-btn .bi > .en { color: inherit; opacity: .85; }
.paper-na { color: var(--muted); font-weight: 700; }
.paper-empty { color: var(--muted); font-weight: 700; }

.lvls { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.lvl {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 172px;
  padding: 14px; border-radius: 22px; text-decoration: none; color: #fff;
  background: var(--tc);
  background-image: radial-gradient(circle at 100% 0, rgba(255, 255, 255, .28) 0 38%, transparent 39%);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--tc) 70%, #000), 0 14px 22px -12px var(--tc);
  transition: transform .15s ease, box-shadow .15s ease;
}
.lvl:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--tc) 70%, #000); }
.lvl-tag {
  align-self: flex-start; font-family: var(--head); font-weight: 800; font-size: .78em;
  background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 1px 10px;
}
.lvl-emoji { font-size: 2.3em; line-height: 1.1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15)); }
.lvl-title { font-family: var(--head); font-weight: 800; line-height: 1.2; flex: 1; }
.lvl-title .en { font-size: .85em; }
.lvl-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.go {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--tc); font-weight: 900; flex: none;
}
.stars { display: inline-flex; gap: 1px; font-size: 1.05em; letter-spacing: 0; }
.stars span { color: rgba(255, 255, 255, .4); }
.stars span.on { color: var(--sun); text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.done-flag {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--good); font-weight: 900; font-size: 14px;
}

/* ---------- Topic page ---------- */
#progress {
  position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 6px;
  background: linear-gradient(90deg, var(--tc), var(--sun));
  transform-origin: 0 50%; transform: scaleX(0);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes grow-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    #progress { animation: grow-progress auto linear; animation-timeline: scroll(root); }
  }
}

.crumb { margin: 0 0 10px; }
.crumb a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px;
  border-radius: 999px; background: var(--card); border: 2px solid var(--line);
  text-decoration: none; font-weight: 800; color: var(--ink); font-size: .9em;
}

.t-hero {
  position: relative; overflow: hidden; color: #fff; background: var(--tc);
  background-image: radial-gradient(circle at 100% 0, rgba(255, 255, 255, .25) 0 30%, transparent 31%),
                    radial-gradient(circle at 0 100%, rgba(255, 255, 255, .14) 0 25%, transparent 26%);
  border-radius: 28px; padding: 18px; margin-bottom: 18px;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--tc) 70%, #000);
}
.t-hero-row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.t-emoji {
  flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); font-size: 2.1em;
}
.t-hero h1 { margin: 4px 0 0; font-size: 1.5em; }
.tag {
  display: inline-block; font-family: var(--head); font-weight: 800; font-size: .8em;
  background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 1px 10px;
}
.t-hero .bubble { color: var(--ink); }

.journey {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 2px; margin: 0 -2px;
  scrollbar-width: none;
}
.journey::-webkit-scrollbar { display: none; }
.journey a {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px;
  padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .35); color: #fff; text-decoration: none; font-weight: 800; font-size: .88em;
}

.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.step-n {
  flex: none; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center;
  background: var(--tc); color: #fff; font-family: var(--head); font-weight: 800; font-size: 1.15em;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tc) 70%, #000);
  transform: rotate(-6deg);
}
.step-head h2 { margin: 0; }
.hint { color: var(--muted); font-weight: 700; font-size: .92em; margin: -4px 0 12px; }

.goals { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.goals li { display: flex; gap: 10px; align-items: flex-start; }
.goals li::before {
  content: "✓"; flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tc-soft); color: var(--tc); font-weight: 900;
}

.concept { position: relative; border-left: 6px solid var(--tc); }
.c-num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border-radius: 50%;
  background: var(--tc-soft); color: var(--tc); font-family: var(--head); font-weight: 800; vertical-align: middle;
}
.concept h3 { display: block; }
.concept .body {
  margin-bottom: 4px;
  line-height: 1.55;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile-first base: partially hidden clamped state (< 640px) */
.concept .body.is-clamped {
  max-height: 180px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

/* Tablet & Desktop: larger clamp threshold */
@media (min-width: 640px) {
  .concept .body.is-clamped {
    max-height: 240px;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
}

/* Mobile-friendly progressive disclosure button */
.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap, 44px);
  margin: 6px 0 10px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--tc-soft);
  color: var(--tc);
  border: 1.5px solid color-mix(in srgb, var(--tc) 35%, transparent);
  font-family: var(--head);
  font-weight: 800;
  font-size: 0.9em;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.12s ease;
}
.btn-more:hover {
  background: color-mix(in srgb, var(--tc) 24%, var(--card));
  transform: translateY(-1px);
}
.btn-more:active {
  transform: scale(0.97);
}
.btn-more[hidden] {
  display: none !important;
}

/* Mobile-first typography & list layout for concept bodies */
.concept .body ul {
  margin: 8px 0;
  padding-inline-start: 20px;
}
.concept .body li {
  margin-bottom: 6px;
  line-height: 1.5;
}
.concept .body li:last-child {
  margin-bottom: 0;
}

/* Callout box inside concept body */
.concept .body .box {
  margin: 8px 0;
  padding: 10px 12px;
  line-height: 1.5;
}
.concept .body .box ul {
  padding-inline-start: 18px;
}

@media (min-width: 640px) {
  .concept .body ul {
    padding-inline-start: 26px;
  }
  .concept .body .box {
    padding: 12px 16px;
  }
}

.fig {
  margin: 12px 0 0; text-align: center; overflow-x: auto;
  background: var(--tc-soft); border-radius: 16px; padding: 12px;
}
.fig svg { max-width: 100%; height: auto; }
.fig img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 auto; }
.fig .fa { fill: var(--tc); }
.fig .fs { fill: var(--card); }
.fig .fn { fill: none; }
.fig .st:not(text) { stroke: var(--ink); stroke-width: 1.5; }
.fig .stl:not(text) { stroke: var(--line); stroke-width: 1; }
.fig .sta:not(text) { stroke: var(--tc); stroke-width: 3.5; fill: none; stroke-linecap: round; }
.fig .dash { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
/* Typography: keep the theme's default size/weight, but let a figure override them with
   font-size / font-weight attributes (and let fill="..." keep its colour on dark panels). */
.fig text { font-family: "Nunito", system-ui, sans-serif; stroke: none !important; }
.fig text:not([font-size]) { font-size: 13px; }
.fig text:not([font-weight]) { font-weight: 700; }
.fig text:not([fill]):not(.tm):not(.fa):not(.sta) { fill: var(--ink); }
.fig text.fa, .fig text.sta { fill: var(--tc); stroke: none !important; }
.fig text.st { stroke: none !important; }
.fig .tm { fill: var(--muted); }
body.lang-bm .bi-slash, body.lang-en .bi-slash { display: none; }
/* Bilingual SVG labels: in "both" mode the English label drops below the Malay one. */
body.lang-both .fig text.en { transform: translateY(30px); font-style: italic; }
body.lang-both .fig text.en:not([fill]) { fill: var(--muted); }
/* Compact two-line labels (BM over EN) for dense anatomical drawings: both lines share one y,
   and only in "both" mode does the English line drop just below the Malay one. */
.fig text.lb2 { font-style: italic; }
body.lang-both .fig text.en.lb2 { transform: translateY(10px); opacity: .85; }
/* Rangsangan dan Gerak Balas: candle flame flicker; impulse dots hidden when motion is reduced. */
@keyframes rgFlick { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(.94, 1.06); } 70% { transform: scale(1.04, .95); } }
.fig .rg-flick { transform-box: fill-box; transform-origin: 50% 100%; animation: rgFlick 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fig .rg-flick { animation: none; } .fig .rg-anim { display: none; } }

/* ---------- 3D concept figures (assets/figure3d.js) ---------- */
.fig3d-wrap {
  border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, color-mix(in srgb, var(--card) 82%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 55%, transparent), color-mix(in srgb, var(--tc) 10%, transparent));
}
.fig3d-wrap canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.fig3d-wrap canvas:active { cursor: grabbing; }
/* Labels pinned to points on the model; figure3d.js projects them each frame. */
.fig3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fig3d-leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
/* beat `.fig svg { height: auto }`, which shrank the leader layer to 150px and cut lower leader lines */
.fig .fig3d-leads { height: 100%; max-width: none; }
.fig3d-leads line {
  stroke: color-mix(in srgb, var(--tc) 62%, var(--line)); stroke-width: 1.1;
  stroke-linecap: round; opacity: .8;
}
.fig3d-leads circle {
  fill: var(--card); stroke: color-mix(in srgb, var(--tc) 70%, var(--line)); stroke-width: 1.4;
}
.fig3d-lbl {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; line-height: 1.25; text-align: center;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc) 42%, var(--line));
  box-shadow: 0 2px 7px -3px rgba(0, 0, 0, .4);
  color: var(--ink); font-size: 10.5px; font-weight: 800;
}
.fig3d-lbl .bm, .fig3d-lbl .en { display: block; }
.fig3d-lbl .en { font-size: .82em; font-style: italic; font-weight: 700; opacity: .78; }
@media (max-width: 430px) { .fig3d-lbl { font-size: 9px; padding: 1px 6px; } }

/* ---------- 3D skull figure (Sains Tahun 3: Haiwan) ---------- */
.skull3d-fig { display: grid; gap: 6px; }
.skull3d-stage {
  position: relative; width: 100%; aspect-ratio: 2.2 / 1; min-height: 200px;
  border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(120% 95% at 50% 18%, color-mix(in srgb, var(--card) 88%, #fff), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--tc) 9%, var(--card)), color-mix(in srgb, var(--tc) 20%, var(--card)));
}
.skull3d-stage svg { display: block; width: 100%; height: 100%; }
.skull3d-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.skull3d-stage canvas:active { cursor: grabbing; }
.skull3d-hint {
  display: none; margin: 0; text-align: center;
  font-size: .78em; font-weight: 800; color: var(--muted);
}
.skull3d-fig.is-3d .skull3d-hint { display: block; }
.skull3d-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.skull3d-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px 4px; line-height: 1.25;
}
.skull3d-item b { display: block; font-size: .9em; }
.skull3d-item .skull3d-tag { display: block; font-size: .76em; font-weight: 800; }
@media (max-width: 430px) {
  .skull3d-stage { aspect-ratio: 4 / 3; }
  .skull3d-item b { font-size: .82em; }
  .skull3d-item .skull3d-tag { font-size: .7em; }
}

/* Science figure animations */
@keyframes sciSteam {
  0% { transform: translateY(0) scale(1); opacity: 0.85; }
  50% { transform: translateY(-3px) scale(1.03); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.85; }
}
@keyframes sciRipple {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.02); opacity: 1; }
}
@keyframes sciVibrate {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-0.7px, 0.7px); }
  75% { transform: translate(0.7px, -0.7px); }
}
@keyframes sciSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sci-steam { animation: sciSteam 2.6s ease-in-out infinite; transform-origin: center bottom; }
.sci-ripple { animation: sciRipple 3.2s ease-in-out infinite; transform-origin: center center; }
.sci-vib { animation: sciVibrate 0.25s ease-in-out infinite; }
.sci-spin { animation: sciSpin 6s linear infinite; transform-box: fill-box; transform-origin: center center; }
/* Arrows that carry a flow (O₂ / CO₂ cycle): the dashes creep along the line. */
@keyframes sciFlow { to { stroke-dashoffset: -26; } }
.sci-flow { animation: sciFlow 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .sci-steam, .sci-ripple, .sci-vib, .sci-spin, .sci-flow { animation: none; }
}

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85em; color: var(--muted); font-weight: 700; }
table.pv { width: auto; margin: 4px auto; background: var(--card); border-radius: 12px; overflow: hidden; }
table.pv th, table.pv td { text-align: center; border: 2px solid var(--line); min-width: 56px; padding: 6px; }
table.pv td { font-family: var(--head); font-size: 1.4em; font-weight: 800; color: var(--tc); }

.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1.1; margin: 0 2px; font-size: .9em; }
.frac > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 3px; }
/* Column vector, e.g. a translation: two numbers stacked between brackets. */
.vec { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1.1; margin: 0 3px; padding: 0 5px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 7px; font-size: .9em; }
.mat { display: inline-grid; grid-template-columns: repeat(var(--c, 2), auto); gap: 0 .7em; vertical-align: middle; text-align: center; line-height: 1.15; margin: 2px 3px; padding: 1px 6px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 7px; font-size: .9em; }
.big { font-family: var(--head); font-size: 1.35em; font-weight: 800; color: var(--tc); }
.box {
  background: var(--tc-soft); border: 2px dashed color-mix(in srgb, var(--tc) 45%, transparent);
  border-radius: 14px; padding: 10px 12px; margin: 8px 0; overflow-x: auto; font-weight: 700;
}

/* Flip cards (glossary) */
.flips { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.flip {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  text-align: center; perspective: 900px; height: 100%; vertical-align: top;
}
.flip-in {
  display: grid; min-height: 132px; height: 100%;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1.2); transform-style: preserve-3d;
}
.flip.flipped .flip-in { transform: rotateY(180deg); }
.face {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  padding: 12px 10px; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face.front {
  background: var(--card); border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--line);
}
.face.back {
  transform: rotateY(180deg); background: var(--tc); color: #fff; font-weight: 700; font-size: .92em;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tc) 70%, #000);
}
.face.back .bi > .en { color: inherit !important; opacity: .85; }
.f-bm { font-family: var(--head); font-weight: 800; font-size: 1.12em; line-height: 1.2; color: var(--tc); }
/* long single words (e.g. "karboksihemoglobin") wrap instead of widening a phone-width card */
.face { min-width: 0; overflow-wrap: anywhere; }
.f-en { font-weight: 700; color: var(--muted); font-size: .9em; }
.f-turn { margin-top: 4px; font-size: .78em; font-weight: 800; color: var(--muted); }

/* Worked examples */
.example { border-top: 6px solid var(--tc); }
.ex-label { display: inline-block; font-family: var(--head); font-weight: 800; color: var(--tc); margin-bottom: 4px; }
.example .q { font-weight: 800; margin-bottom: 10px; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps li {
  counter-increment: s; display: flex; gap: 10px; align-items: flex-start;
  background: var(--tc-soft); border-radius: 14px; padding: 8px 12px;
}
.steps li::before {
  content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tc); color: #fff; font-weight: 900; font-size: .85em; margin-top: 2px;
}
.steps li[hidden] { display: none; }
.ans {
  margin: 10px 0 0; padding: 10px 14px; border-radius: 14px; font-weight: 700;
  background: var(--good-soft); border: 2px solid var(--good);
}
.btn-soft {
  margin-top: 10px; min-height: var(--tap); padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--tc); border: 2px solid var(--tc); font-weight: 800;
}

/* ---------- Simulation ("Try it yourself") ---------- */
.sim { border: 3px dashed color-mix(in srgb, var(--tc) 55%, transparent); }
.sim-top h3 { margin: 0; color: var(--tc); font-size: 1.2em; }
.sim-how { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 12px; font-weight: 700; color: var(--muted); }
body.lang-both .sim-pic tspan.en { display: none; }
/* Drawing fallbacks that stack BM over EN themselves opt back in. */
body.lang-both .sim-pic svg.dl tspan.en { display: inline; }
/* Text on a solid button/card already has contrast; the 4px halo blobs small glyphs. */
.sim-pic svg.dl .on-dark text, .sim-pic .on-dark text { stroke: none; }
.sim-pic text { paint-order: stroke; stroke: var(--tc-soft); stroke-width: 4px; stroke-linejoin: round; }
/* labels printed on a coloured button or a dark panel need no pale outline */
.sim-pic.plain text, .sim-pic text.plain, .sim-pic .sim-btn text { paint-order: normal; stroke: none; }
.sim-grid { display: grid; gap: 14px; }
.sim-left, .sim-right { min-width: 0; }
.sim-pic { margin: 0; touch-action: manipulation; }
.sim-pic svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.sim-pic [data-tap] { cursor: pointer; }
/* Science sims: particles wiggle by --a/--b px (bigger for liquid and gas) */
.sim-pic .sci-p { transform-box: fill-box; animation: sci-jig var(--d, .5s) ease-in-out infinite alternate; }
@keyframes sci-jig {
  from { transform: translate(calc(var(--a, 1px) * -1), calc(var(--b, 0px) * -1)); }
  to { transform: translate(var(--a, 1px), var(--b, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .sim-pic .sci-p { animation: none; } }
.sim-pic [data-drag] { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.sim-pic [data-drag]:active { cursor: grabbing; }
/* Electrical lab: conventional current, magnetic fields and attracted clips. */
@keyframes circuit-dash-flow { to { stroke-dashoffset: -32; } }
@keyframes field-flow { to { stroke-dashoffset: -22; } }
@keyframes clip-attract { 50% { transform: translateY(-3px) rotate(4deg); } }
.circuit-flow-dashes, .magnetic-field-line { animation: circuit-dash-flow 1.4s linear infinite; }
.magnetic-field-line { animation-name: field-flow; }
.paperclip { animation: clip-attract 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .circuit-flow-dashes, .magnetic-field-line, .paperclip { animation: none; }
  .circuit-charge { display: none; }
}
.fig .fb { fill: color-mix(in srgb, var(--tc) 50%, var(--card)); }
.fig .rt { fill: var(--sun); stroke: var(--ink); stroke-width: 1.5; }
.fig .slice { stroke-width: 2; }
.sim-pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.sim-pair table.pv { margin: 0; }
.sim-pair table.pv th { font-size: .75em; min-width: 0; padding: 4px; }
.sim-talk { display: flex; align-items: flex-end; gap: 4px; margin-top: 12px; }
.sim-talk .owl { width: 38px; height: 38px; flex: none; }
.sim-saybox { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 2px; }
/* The owl text scrolls inside its bubble, so the picture and the explanation fit on one screen. */
.sim-say {
  width: 100%; min-width: 0; margin: 0; border: 2px solid var(--line); padding: 10px 12px;
  max-height: max(130px, 28vh); overflow-y: auto; overscroll-behavior: contain;
}
.sim-say.open { max-height: none; }
.sim-more {
  min-height: 32px; padding: 2px 8px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--tc); font: inherit; font-size: .85em; font-weight: 800;
}
.sim-more[hidden] { display: none; }
/* Headlines stay on one line when they fit; long formulas wrap on phones instead of widening the page. */
.sim-say .big { display: inline-block; max-width: 100%; }
@media (min-width: 600px) { .sim-talk { gap: 8px; } .sim-talk .owl { width: 52px; height: 52px; } }
.sim-say p { margin: 0 0 6px; }
.sim-say p:last-child { margin-bottom: 0; }
.sim-note { background: var(--tc-soft); border-radius: 10px; padding: 4px 8px; }
.sim-yay { color: var(--good); font-family: var(--head); font-weight: 800; }

.sim-ctrls { display: grid; gap: 10px; }
.sim-ctrl { background: var(--bg); border: 2px solid var(--line); border-radius: 16px; padding: 8px 12px 10px; }
.sim-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 800; margin-bottom: 6px; }
.sim-lbl .sim-val { flex: none; }
.sim-row { display: flex; align-items: center; gap: 10px; }
.sim-step {
  flex: none; width: 48px; height: 48px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--tc); color: #fff; font: 800 1.6em/1 var(--head); touch-action: manipulation;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tc) 65%, #000); transition: transform .1s, box-shadow .1s;
}
.sim-step:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tc) 65%, #000); }
.sim-step:disabled { opacity: .3; cursor: default; }
.sim-val { font: 800 1.2em var(--head); color: var(--tc); }
.sim-row .sim-val { flex: 1; text-align: center; font-size: 1.8em; line-height: 1; }
.sim-row input[type="range"] { flex: 1; min-width: 0; height: 36px; accent-color: var(--tc); cursor: pointer; }
.sim-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-seg button {
  flex: 1 1 auto; min-height: var(--tap); padding: 6px 12px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--line); background: var(--card); font-weight: 800;
}
.sim-seg button[aria-pressed="true"] { background: var(--tc); border-color: var(--tc); color: #fff; }
.sim-seg button[aria-pressed="true"] .bi > .en { color: inherit !important; opacity: .85; }
.sim-act { margin-top: 0; }
.sim-act:disabled { opacity: .4; cursor: default; }
/* All action buttons of a sim share one wrapping row. */
.sim-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-acts .sim-act { flex: 1 1 auto; }
.sim-acts .sim-act[hidden], .sim-acts:not(:has(.sim-act:not([hidden]))) { display: none; }

/* View tabs: the control that switches the whole picture, above the sim. */
.sim-tabs { margin: 0 0 12px; }
.sim-tabs[hidden] { display: none; }
.sim-tabs .sim-ctrl { background: none; border: 0; padding: 0; }
.sim-tabs .sim-lbl { display: none; }
.sim-tabs .sim-seg button { flex: 0 1 auto; border-radius: 999px; padding: 6px 14px; }

/* Side panel: 3D chips and readouts, next to the controls (sims.js make(): view(s).side). */
.sim-side { background: var(--bg); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; margin-bottom: 10px; }
.sim-side[hidden] { display: none; }
.sim-side > :first-child { margin-top: 0; }

.sim-tasks { margin-top: 14px; background: var(--tc-soft); border-radius: 16px; padding: 12px 14px; }
.sim-tasks h4 { margin: 0 0 8px; font-family: var(--head); font-size: 1.05em; }
.sim-tasks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sim-tasks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.sim-tick {
  flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid color-mix(in srgb, var(--tc) 50%, transparent); background: var(--card); color: #fff; font-weight: 900;
}
.sim-tasks li.done .sim-tick { background: var(--good); border-color: var(--good); }
.sim-tasks li.done .sim-tick::before { content: "✓"; }
.sim-all { margin: 10px 0 0; font-weight: 800; }
.sim-tasks-group[hidden], .sim-other[hidden] { display: none; }
.sim-other { margin: 10px 0 0; font-size: .9em; opacity: .8; }
.sim-reset { width: 100%; }

/* Place-value blocks */
.blocks { display: flex; gap: 8px; text-align: center; }
.bcol { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--card); border-radius: 14px; padding: 8px 6px; }
.bcol.wide { flex: 2; }
.bhead { font-weight: 800; font-size: .85em; line-height: 1.25; }
.bpile { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 4px; min-height: 176px; padding: 8px 0; }
.bcount { font: 800 2em/1 var(--head); color: var(--tc); }
.rod, .flat, .cube { display: block; flex: none; border: 1px solid color-mix(in srgb, var(--tc) 60%, #000); }
.rod {
  width: 16px; height: 160px; border-radius: 3px;
  background: repeating-linear-gradient(to bottom, transparent 0 15px, rgba(255, 255, 255, .6) 15px 16px), var(--tc);
}
.cube { width: 16px; height: 16px; border-radius: 3px; background: var(--card); border: 2px solid var(--tc); }
.blocks.sm .bpile { min-height: 120px; gap: 3px; }
.blocks.sm .rod { width: 8px; height: 50px; background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(255, 255, 255, .6) 4px 5px), var(--tc); }
.blocks.sm .cube { width: 8px; height: 8px; border-width: 1.5px; border-radius: 2px; }
.flat {
  width: 50px; height: 50px; border-radius: 3px;
  background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(255, 255, 255, .55) 4px 5px),
              repeating-linear-gradient(to right, transparent 0 4px, rgba(255, 255, 255, .55) 4px 5px),
              color-mix(in srgb, var(--tc) 80%, #000);
}

/* Year 3: thousand blocks and a tighter 4-column layout */
.blk {
  display: block; flex: none; width: 30px; height: 30px; border-radius: 3px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .35), transparent 60%), color-mix(in srgb, var(--tc) 65%, #000);
  border: 1px solid color-mix(in srgb, var(--tc) 40%, #000);
  box-shadow: 3px -3px 0 color-mix(in srgb, var(--tc) 45%, #000);
  margin: 3px 3px 0 0;
}
.blocks.xs { gap: 5px; }
.blocks.xs .bcol { padding: 6px 3px; }
.blocks.xs .bhead { font-size: .75em; }
.blocks.xs .bcount { font-size: 1.6em; }
.blocks.xs .flat { width: 26px; height: 26px; background-size: auto; }
.blocks.xs .rod { width: 6px; height: 40px; }
.blocks.xs .cube { width: 7px; height: 7px; }

/* Index chips */
.ix { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 4px 0; }
.ix-expr { font: 800 1.6em var(--head); color: var(--tc); }
.ix-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.ix-grp { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px 7px; border: 2px dashed var(--line); border-radius: 12px; background: var(--card); }
.ix-op { font: 800 1.4em var(--head); }
.ch {
  min-width: 32px; height: 32px; padding: 0 4px; border-radius: 9px; display: inline-grid; place-items: center;
  font: 800 1.05em var(--head); color: #fff; background: var(--tc);
}
.ch.b { background: var(--sun); color: #3b2a00; }
.ch.one { background: var(--good); }
.ch.gone { position: relative; opacity: .45; }
.ch.gone::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; border-top: 3px solid var(--ink); transform: rotate(-35deg); }
.ix-frac { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.ix-frac hr { width: 100%; border: 0; border-top: 3px solid var(--ink); margin: 0; }

/* Algebra tiles */
.atiles { display: grid; gap: 12px; padding: 6px 0; }
.atile-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-height: 64px; padding: 6px; background: var(--card); border-radius: 12px; }
.atile { display: inline-grid; place-items: center; border-radius: 8px; font: 800 1em var(--head); color: #fff; background: var(--tc); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.atile.x { width: 34px; height: 64px; }
.atile.u { width: 30px; height: 30px; background: var(--sun); color: #3b2a00; }
.atile.neg { background: var(--bad); color: #fff; }
.atile-lbl { font-weight: 800; color: var(--muted); }

/* Pictogram */
.pgram { display: grid; gap: 6px; }
.pg-row { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 12px; padding: 6px 10px; }
.pg-lbl { flex: none; width: 7.5em; font-weight: 800; font-size: .9em; }
.pg-pics { font-size: 1.25em; letter-spacing: 2px; line-height: 1.3; word-break: break-all; }
.pg-key { margin: 4px 0 0; font-weight: 700; color: var(--muted); font-size: .9em; text-align: center; }

/* Sim layout. The picture column stays in view while the pupil uses the controls:
   phones pin the picture + owl under the header; wider screens keep it sticky beside the controls.
   sims.js adds .sim-tall when the drawing is too tall to share the screen (big tables, tall HTML
   drawings); its box then gets a fixed height and scrolls inside. --hdr is set by app.js. */
@media (max-width: 759px) and (min-height: 561px) {
  .sim-grid .sim-left {
    position: sticky; top: var(--hdr, 116px); z-index: 4;
    background: var(--card); padding: 4px 0 8px;
    box-shadow: 0 12px 10px -12px rgba(0, 0, 0, .35);
  }
  /* --pin-h (sims.js): a control scrolled into view lands below the pinned picture, not under it */
  .sim-right button, .sim-right input, .sim-right li { scroll-margin-top: calc(var(--hdr, 116px) + var(--pin-h, 0px) + 8px); }
  .sim-pic svg { max-height: 34vh; }
  .sim-pic .c3d-stage { aspect-ratio: auto; height: clamp(180px, 32vh, 300px); max-height: none; }
  .sim-grid.sim-tall .sim-pic { max-height: 40vh; overflow-y: auto; }
  .sim-talk { margin-top: 6px; }
  .sim-say { max-height: 5.4em; padding: 6px 10px; font-size: .92em; }
  .sim-say.open { max-height: 35vh; }
}
@media (max-width: 759px) {
  .sim-how { font-size: .9em; margin-bottom: 8px; }
  /* tabs: one row that scrolls sideways */
  .sim-tabs .sim-seg { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: thin; }
  .sim-tabs .sim-seg button { flex: none; scroll-snap-align: start; max-width: 80%; }
}
@media (min-width: 760px) {
  .sim-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .sim-grid .sim-left { position: sticky; top: calc(var(--hdr, 66px) + 12px); }
  .sim-pic svg { max-height: max(260px, calc(100vh - var(--hdr, 66px) - 320px)); }
  .sim-pic .c3d-stage { aspect-ratio: auto; height: clamp(240px, calc(100vh - var(--hdr, 66px) - 330px), 560px); max-height: none; }
  .sim-grid.sim-tall .sim-pic { max-height: max(300px, calc(100vh - var(--hdr, 66px) - 290px)); overflow-y: auto; }
  .sim-say { max-height: max(120px, 24vh); }
}
/* Big screens: the sim card is wider than the reading column. */
@media (min-width: 1100px) {
  .sim { --simw: min(1240px, calc(100vw - 64px)); width: var(--simw); max-width: none; margin-left: calc(50% - var(--simw) / 2); }
  .sim-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 20px; }
}

/* ---------- Quiz challenge ---------- */
.quiz { border: 3px solid var(--tc); padding: 14px; }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.q-count { font-family: var(--head); font-weight: 800; color: var(--tc); }
.q-dots { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Pre-test (before the notes; neutral, never shows right/wrong) ---------- */
#topic.pre-lock > section:not(#pretest-sec), #topic.pre-lock .journey { display: none; }
.pretest { border: 3px dashed var(--tc); padding: 14px; }
.pre-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.pre-top { margin-bottom: 12px; }
.pre-count { font-family: var(--head); font-weight: 800; color: var(--tc); }
/* Neutral (ink, not green/red/topic colour) so a picked answer never looks right or wrong. */
.q-opt.picked { border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.q-opt.picked .q-key { background: var(--ink); color: var(--card); }
.q-fb.pre-fb { background: color-mix(in srgb, var(--ink) 7%, var(--card)); }
.pre-chip { margin: 0; font-weight: 700; }
.pre-done p { margin: 0 0 12px; }
.pre-post {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  margin: 4px 0 8px; padding: 6px 14px; border-radius: 999px; background: var(--tc-soft); font-weight: 700;
}
.pre-post .gain { font-weight: 900; padding: 0 8px; border-radius: 999px; background: var(--line); }
.pre-post .gain.up { background: var(--good); color: #fff; }
.q-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); transition: transform .2s; }
.q-dot.current { background: var(--tc); transform: scale(1.25); }
.q-dot.right { background: var(--good); }
.q-dot.wrong { background: var(--bad); }
.q-score {
  font-weight: 900; background: var(--sun); color: #3b2a00; border-radius: 999px; padding: 2px 12px;
}
.q-score.bump { animation: bump .5s; }
.q-text { font-size: 1.12em; font-weight: 800; margin: 0 0 14px; }
.q-opts { display: grid; gap: 10px; }
.q-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 14px;
  text-align: left; cursor: pointer; font-weight: 700;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px; box-shadow: 0 4px 0 var(--line);
  transition: transform .1s;
}
.q-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.q-key {
  flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--tc-soft); color: var(--tc); font-family: var(--head); font-weight: 800;
}
.q-opt.right { border-color: var(--good); background: var(--good-soft); box-shadow: 0 4px 0 var(--good); }
.q-opt.right .q-key { background: var(--good); color: #fff; }
.q-opt.wrong { border-color: var(--bad); background: var(--bad-soft); box-shadow: 0 4px 0 var(--bad); }
.q-opt.wrong .q-key { background: var(--bad); color: #fff; }
.q-opt:disabled { cursor: default; }
.q-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ans-input, .field input {
  font: inherit; font-size: max(16px, 1em); font-weight: 700; width: 100%; min-height: 52px; padding: 10px 14px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink);
}
.ans-input:focus, .field input:focus { border-color: var(--tc); outline: none; }
.ans-input.right { border-color: var(--good); background: var(--good-soft); }
.ans-input.wrong { border-color: var(--bad); background: var(--bad-soft); }
.q-fb { margin-top: 14px; padding: 12px 14px; border-radius: 16px; }
.q-fb.right { background: var(--good-soft); }
.q-fb.wrong { background: var(--bad-soft); }
.q-fb p { margin: 6px 0 0; }
.q-fb-head { font-family: var(--head); font-weight: 800; font-size: 1.2em; }
.plus { color: #b37a00; }
:root[data-theme="dark"] .plus { color: var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plus { color: var(--sun); } }

.btn {
  display: block; width: 100%; min-height: 52px; padding: 12px 22px;
  font-family: var(--head); font-weight: 800; font-size: 1.08em; cursor: pointer;
  border: 0; border-radius: 16px; background: var(--tc); color: #fff;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--tc) 65%, #000);
  transition: transform .1s, box-shadow .1s;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tc) 65%, #000); }
.btn:disabled { opacity: .5; cursor: default; }
.q-fb .btn { margin-top: 12px; }

/* ---------- Quick checks (practice after each section) ---------- */
.check { border: 2px dashed var(--tc); background: var(--tc-soft); margin-top: 18px; }
.check .q-card { background: var(--card); border-radius: 16px; padding: 14px; }
.check-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.check-badge { font-family: var(--head); font-weight: 800; font-size: 1.1em; color: var(--tc); }
.check-count { font-weight: 800; color: var(--muted); font-size: .9em; }
.check-hint { color: var(--muted); font-weight: 700; font-size: .88em; margin: 0 0 10px; }
.check .q-text { font-size: 1.04em; }
/* "Explore & answer" questions under a sim, with a "try this in the sim" hint line */
.sim-qs { margin-top: 14px; }
/* Lab page (topic.html?id=…&view=lab) and the card that links to it from the topic page */
.lab-card { display: flex; gap: 14px; align-items: center; border-style: dashed; border-color: var(--tc); background: var(--tc-soft); }
.lab-card-icon { font-size: 2.4em; line-height: 1; }
.lab-card-body p { margin: 0 0 10px; font-weight: 700; }
.lab-card .btn, .lab-next .btn { display: inline-block; text-decoration: none; }
.lab-next { margin-top: 18px; }
.lab-next p { margin: 0 0 12px; font-weight: 700; }
.lab-next-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lab-next-btns .btn-soft { margin-top: 0; text-decoration: none; display: inline-block; }
/* Lab page layout (app.js renderLab): slim title bar, then [sim | questions]. The question, the model and
   the controls share one screen: wide screens put the questions in a sticky column, narrow screens pin them
   to the bottom as a bar that can be folded away. */
body.lab-mode main { max-width: 1480px; }
.lab-bar { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.lab-back { font-weight: 800; color: var(--tc); text-decoration: none; }
.lab-emoji { font-size: 1.6em; line-height: 1; }
.lab-h1 { margin: 0; font-size: 1.35em; line-height: 1.2; color: var(--tc); }
.lab-bar .tag { background: var(--tc-soft); color: var(--tc); }
.lab-page { margin-bottom: 0; }
body.lab-mode .sim { width: auto; margin-left: 0; margin-bottom: 0; }
body.lab-mode .sim { padding: 12px 14px; }
body.lab-mode .sim-top h3 { font-size: 1.1em; }
body.lab-mode .sim-top .sim-how { margin-bottom: 8px; font-size: .88em; }
/* the main controls (slider, substance…) first, then the 3D chips, tasks and reset */
body.lab-mode .sim-right { display: flex; flex-direction: column; }
body.lab-mode .sim-right > .sim-ctrls { order: -1; margin-bottom: 10px; }
.lab-q { font-size: .9em; }
.lab-q .card { margin: 0 0 12px; }
.lab-q .sim-qs { margin-top: 0; padding: 12px; }
/* the lab page itself says what to do; keep the question card short */
.lab-q .sim-qs .check-hint { display: none; }
.lab-q .sim-qs .check-head { margin-bottom: 8px; }
.lab-q .q-card { padding: 12px; }
.lab-q-toggle { display: none; }
@media (min-width: 1000px) {
  .lab-page { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 390px); gap: 16px; align-items: start; }
  .lab-q {
    position: sticky; top: calc(var(--hdr, 66px) + 12px);
    max-height: calc(100vh - var(--hdr, 66px) - 24px); overflow-y: auto; overscroll-behavior: contain;
  }
}
@media (max-width: 999px) {
  body.lab-mode main { padding-bottom: calc(40vh + 32px); }
  .lab-q {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 max(var(--gutter), env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 3px solid var(--tc); box-shadow: 0 -8px 20px rgba(0, 0, 0, .18);
  }
  .lab-q .card { box-shadow: none; }
  .lab-q .sim-qs { padding: 10px 12px; }
  .lab-q-toggle {
    display: block; position: sticky; top: 0; z-index: 1; width: 100%; min-height: 40px; margin: 0 0 6px;
    border: 0; background: var(--bg); color: var(--tc); font: inherit; font-weight: 800; cursor: pointer;
  }
  .lab-q-show, .lab-q.is-min .lab-q-hide, .lab-q.is-min .lab-q-body { display: none; }
  .lab-q.is-min .lab-q-show { display: inline; }
  body.lab-mode:has(.lab-q.is-min) main { padding-bottom: 72px; }
  /* the "go to quiz" card only once the questions are done, so the bar stays short */
  .lab-q-body:has(.sim-qs:not(.is-done)) .lab-next { display: none; }
}
/* Phones: the model is pinned under the header and the questions under it, so both shrink to leave
   room for the controls in between. */
@media (max-width: 759px) {
  body.lab-mode main { padding-bottom: calc(34vh + 32px); }
  .lab-q { max-height: 34vh; }
  .lab-q .q-card { padding: 10px; }
  .lab-bar .tag { display: none; }
}
@media (max-width: 759px) and (min-height: 561px) {
  body.lab-mode .sim-pic .c3d-stage { height: clamp(150px, 22vh, 220px); }
  body.lab-mode .sim-pic svg { max-height: 24vh; }
  body.lab-mode .sim-talk .owl { width: 30px; height: 30px; }
  body.lab-mode .sim-say { max-height: 3.4em; padding: 4px 8px; font-size: .85em; }
}
.q-hint { display: flex; gap: 8px; align-items: flex-start; margin: -6px 0 12px; padding: 8px 12px; border-left: 4px solid var(--tc); border-radius: 8px; background: var(--tc-soft); font-weight: 700; font-size: .92em; }
.q-meaning { display: block; margin-top: 6px; padding: 8px 12px; border-left: 4px solid var(--tc); border-radius: 8px; background: var(--tc-soft); font-weight: 700; }
.check-done { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.check-done p { margin: 0; font-weight: 800; color: var(--good); }
.check-done .btn-soft { margin-top: 0; }
.check.is-done { border-style: solid; border-color: var(--good); background: var(--good-soft); }
/* One question at the bottom of each concept card */
.check-mini { margin-top: 14px; padding: 12px; border-radius: 16px; }
.check-mini .check-head { margin-bottom: 8px; }
.check-mini .check-badge { font-size: 1em; }
.check-mini .q-card { padding: 12px; }

/* Results */
.result { text-align: center; }
.result .owl { width: 110px; height: 110px; margin: 0 auto; }
.big-stars { display: flex; justify-content: center; gap: 6px; font-size: 3.2em; line-height: 1; margin: 6px 0; }
.big-stars span { color: var(--line); }
.big-stars span.on { color: var(--sun); text-shadow: 0 3px 0 #d79a00; }
.score-big { font-family: var(--head); font-weight: 800; font-size: 2.4em; margin: 0; color: var(--tc); line-height: 1.1; }
.result h3 { margin: 6px 0 16px; }
.send-box { text-align: left; background: var(--tc-soft); border-radius: 18px; padding: 14px; margin-top: 10px; }
.send-box h3 { margin: 0 0 10px; }
.field { display: block; margin: 0 0 12px; font-weight: 800; }
.field input { display: block; margin-top: 4px; }

.ticket { text-align: center; border: 3px dashed var(--good); background: var(--card); border-radius: 22px; padding: 18px; margin-top: 12px; }
.ticket .tick {
  width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center;
  background: var(--good); color: #fff; font-size: 34px; font-weight: 900;
}
.ticket dl { display: grid; grid-template-columns: 1fr; text-align: left; max-width: 420px; margin: 14px auto; }
.ticket dt { color: var(--muted); font-weight: 700; font-size: .85em; }
.ticket dd { margin: 0 0 10px; font-weight: 800; min-width: 0; }
.ticket .stars span { color: var(--line); }
.ticket .stars span.on { color: var(--sun); text-shadow: none; }
.status { font-size: .9em; color: var(--muted); font-weight: 700; }
.ticket .btn { margin-top: 8px; text-decoration: none; text-align: center; display: block; line-height: 28px; }

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ---------- Motion (only when the user allows it) ---------- */
@keyframes bump { 40% { transform: scale(1.35); } }
@keyframes pop { from { opacity: 0; transform: scale(.85) translateY(10px); } }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes bounce { 40% { transform: translateY(-8px); } 70% { transform: translateY(2px); } }
@keyframes star-in { from { opacity: 0; transform: scale(0) rotate(-180deg); } }
@media (prefers-reduced-motion: no-preference) {
  .pop { animation: pop .35s cubic-bezier(.2, .8, .3, 1.3) both; }
  .is-right { animation: bounce .5s; }
  .is-wrong { animation: shake .45s; }
  .big-stars span.on { animation: star-in .6s cubic-bezier(.2, .8, .3, 1.4) both; animation-delay: var(--d, 0s); }
  @media (hover: hover) {
    .lvl:hover { transform: translateY(-4px) rotate(-1deg); }
  }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.97); } }
    .reveal { animation: rise auto ease-out backwards; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .owl-float { animation: none; }
  .flip-in { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Tablet (600px+) ---------- */
@media (min-width: 600px) {
  :root { --gutter: 24px; }
  body { font-size: 20px; }
  .top-inner { flex-wrap: nowrap; padding-top: 10px; }
  .lang { flex: none; order: 0; display: inline-grid; }
  .lang button { padding: 0 14px; }
  .theme-btn { width: 42px; height: 42px; }

  .hero { padding: 28px 30px; }
  .hero-inner { grid-template-columns: auto 1fr; align-items: center; gap: 4px 22px; }
  .hero .owl { width: 130px; height: 130px; grid-row: span 4; }
  .hero h1 { font-size: 2.2em; }

  .lvls { grid-template-columns: repeat(3, 1fr); }
  .card { padding: 20px; }
  .t-hero { padding: 24px; }
  .t-hero h1 { font-size: 1.9em; }
  .t-emoji { width: 80px; height: 80px; font-size: 2.6em; }
  .flips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ticket dl { grid-template-columns: minmax(120px, 38%) 1fr; gap: 0 14px; }
  .q-form .ans-input { flex: 1; width: auto; }
  .q-form .btn { width: auto; }
  .btn { width: auto; min-width: 220px; display: inline-block; }
  .q-opts { grid-template-columns: repeat(2, 1fr); }
  .quiz { padding: 22px; }
}

/* ---------- Desktop (900px+) ---------- */
@media (min-width: 900px) {
  main { padding-top: 28px; }
  .lvls { grid-template-columns: repeat(4, 1fr); }
  .hero h1 { font-size: 2.5em; }
  .flips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paper-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
}

@media print {
  .top, .btn, #progress, .journey { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- AI tutor ("Tanya Cikgu", assets/tutor.js) ---------- */
.tutor-fab {
  position: fixed; right: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); z-index: 40;
  min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font: 800 1em/1 var(--head); cursor: pointer;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 65%, #000), var(--shadow);
  transition: transform .2s, opacity .2s;
}
.tutor-fab > span[aria-hidden] { font-size: 1.35em; vertical-align: -0.12em; }
.tutor-fab .bi > .en { color: inherit !important; opacity: .85; }
.tutor-fab[aria-expanded="true"] { opacity: 0; pointer-events: none; }
body.tutor-away .tutor-fab { opacity: 0; transform: translateY(120%); pointer-events: none; }

.tutor-panel {
  position: fixed; inset: auto 0 0 0; z-index: 41;
  display: flex; flex-direction: column; height: min(78vh, 620px); height: min(78dvh, 620px);
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tutor-panel[hidden] { display: none; }
.tutor-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.tutor-owl { font-size: 1.8em; line-height: 1; }
.tutor-head h2 { flex: 1; margin: 0; font: 800 1.15em/1.2 var(--head); }
.tutor-x { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--ink); font-size: 1.1em; cursor: pointer; }
.tutor-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tutor-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.tutor-msg.assistant { align-self: flex-start; background: var(--accent-soft); border-bottom-left-radius: 4px; }
.tutor-msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.tutor-msg.note { background: var(--bad-soft); }
.tutor-msg.typing { color: var(--muted); animation: tutor-blink 1s infinite; }
@keyframes tutor-blink { 50% { opacity: .4; } }
.tutor-form { display: flex; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--line); }
.tutor-form textarea {
  flex: 1; min-height: var(--tap); max-height: 120px; resize: none; padding: 10px 12px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit;
  field-sizing: content;
}
.tutor-form textarea:focus { border-color: var(--accent); outline: none; }
.tutor-send { min-height: var(--tap); padding: 0 16px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 800; cursor: pointer; }
.tutor-send:disabled { opacity: .5; cursor: default; }
.tutor-send .bi > .en { color: inherit !important; opacity: .85; }
body.lang-both .tutor-send .bi.inline > .en { display: none; }
.tutor-note { margin: 0; padding: 4px 14px 10px; font-size: .78em; color: var(--muted); }
body.lang-both .tutor-note .bi.inline > .en, body.lang-both .tutor-head .bi.inline > .en { display: block; }
body.lang-both .tutor-note .bi.inline > .en::before, body.lang-both .tutor-head .bi.inline > .en::before { content: none; }
body.lang-both .tutor-head .bi.inline > .en { font-size: .7em; }
@media (prefers-reduced-motion: reduce) { .tutor-fab { transition: none; } .tutor-msg.typing { animation: none; } }
@media (min-width: 600px) {
  .tutor-panel { inset: auto var(--gutter) var(--gutter) auto; width: 400px; border: 1px solid var(--line); border-radius: var(--radius); }
}
@media print { .tutor-fab, .tutor-panel { display: none !important; } }

/* ---------- 3D cell sim (assets/sim-cell3d.js) ---------- */
.c3d { display: grid; gap: 10px; text-align: left; }
.c3d-stage {
  position: relative; aspect-ratio: 4 / 3.3; max-height: 400px; width: 100%; border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--card) 85%, transparent) 0 38%, transparent 72%),
    radial-gradient(circle, color-mix(in srgb, var(--tc) 18%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px,
    color-mix(in srgb, var(--tc) 8%, var(--card));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 22%, transparent);
}
.c3d-cv { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.c3d-msg {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font-weight: 800; color: var(--muted);
}
.c3d-ready .c3d-msg { display: none; }
.c3d-hint {
  position: absolute; left: 8px; bottom: 8px; margin: 0; padding: 3px 10px; border-radius: 999px; pointer-events: none;
  background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--muted); font-size: .8em; font-weight: 800;
  transition: opacity .6s;
}
.c3d-hint.gone { opacity: 0; }
.c3d-tag {
  position: absolute; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; background: #facc15; color: #1f2440; font-weight: 900; font-size: .85em;
  box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .45);
}
.c3d-tag::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #facc15;
}
.c3d-tag.c3d-hov { background: var(--card); color: var(--ink); opacity: .92; }
.c3d-tag.c3d-hov::after { border-top-color: var(--card); }
body.lang-both .c3d-tag .bi.inline > .en { color: inherit; opacity: .75; }
.c3d-h { margin: 0 0 6px; font-weight: 800; color: var(--muted); font-size: .85em; }
.c3d-h.c3d-h2 { margin-top: 12px; }
.c3d-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.c3d-chip {
  display: flex; align-items: center; gap: 7px; min-height: var(--tap); padding: 5px 12px 5px 8px; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--ink); border: 2px solid var(--line); font: inherit; font-weight: 800; font-size: .9em; text-align: left;
}
.c3d-chip.plant { border-color: #16a34a; }
.c3d-chip i { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18); }
.c3d-chip[aria-pressed="true"] { background: #facc15; border-color: #eab308; color: #1f2440; }
.c3d-chip[aria-pressed="true"] .bi > .en { color: inherit !important; opacity: .8; }
.c3d-chip:focus-visible { outline: 3px solid var(--tc); outline-offset: 2px; }
.c3d-seen { color: var(--good); }
/* Stepper rows in a 3D side panel (assets/sim-simple-machines.js: moment and momentum views). */
.c3d-steps { display: grid; gap: 6px; }
.c3d-step { display: grid; grid-template-columns: 1fr var(--tap) minmax(60px, auto) var(--tap); align-items: center; gap: 6px; }
.c3d-step .c3d-k { padding-left: 2px; font-weight: 800; color: var(--muted); font-size: .82em; }
.c3d-step .c3d-v { text-align: center; font-weight: 900; font-size: .95em; }
.c3d-chip.c3d-sq { justify-content: center; min-width: var(--tap); padding: 0; font-size: 1.25em; line-height: 1; }
/* Food test (assets/sim-food-test.js): the positive / negative result line under the chips. */
.c3d-res {
  margin: 10px 0 0; padding: 8px 11px; border-radius: 11px;
  font-size: .86em; font-weight: 700; line-height: 1.4;
  border: 2px solid var(--line); background: var(--card);
}
.c3d-res.ok { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); background: var(--good-soft); }
.c3d-res.no { border-color: color-mix(in srgb, #ef4444 45%, var(--line)); background: color-mix(in srgb, #ef4444 10%, var(--card)); }
/* Thermochemistry lab (assets/sim-thermo-lab3d.js): the temperature readout under the chips. */
.tl-read {
  margin: 10px 0 0; padding: 9px 12px 11px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--card); display: grid; gap: 5px;
  font-size: .86em; line-height: 1.35;
}
.tl-read.hot { border-color: color-mix(in srgb, #ef4444 45%, var(--line)); background: color-mix(in srgb, #ef4444 7%, var(--card)); }
.tl-read.cold { border-color: color-mix(in srgb, #0ea5e9 45%, var(--line)); background: color-mix(in srgb, #0ea5e9 8%, var(--card)); }
.tl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-k { font-weight: 900; color: var(--ink); }
.tl-badge { flex: none; font-size: .72em; font-weight: 900; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: #ef4444; color: #fff; }
.tl-read.cold .tl-badge { background: #0284c7; }
.tl-row { display: flex; align-items: baseline; gap: 6px; font-weight: 700; color: var(--muted); flex-wrap: wrap; }
.tl-row b { color: var(--ink); font-weight: 900; }
.tl-delta { font-weight: 800; color: var(--ink); }
.tl-read.hot .tl-delta b { color: #b91c1c; }
.tl-read.cold .tl-delta b { color: #0369a1; }
.tl-note { color: var(--muted); font-size: .92em; font-weight: 600; }
/* Digestion (assets/sim-teeth-digest.js): the key to the flows drawn on the 3D body. */
.dg-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .78em; font-weight: 700; color: var(--muted); }
.dg-legend li { display: flex; align-items: center; gap: 7px; }
.dg-legend i { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .15); }
/* The organ name is a callout pinned to the corner of the stage, so it never hides the organ. */
.c3d-tag:not(.c3d-hov):has(.dg-tag) {
  left: 10px !important; top: 10px !important; transform: none; background: #1f2440; color: #fff;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7);
}
.c3d-tag:not(.c3d-hov):has(.dg-tag)::after { display: none; }
/* Digestion (2D fallback): dashes creep along the gut and the bolus pulses. */
@keyframes dg-flow { to { stroke-dashoffset: -26; } }
.dg-flow { animation: dg-flow 1.2s linear infinite; }
@keyframes dg-pulse { 50% { transform: scale(1.16); } }
.dg-bolus { transform-box: fill-box; transform-origin: center; animation: dg-pulse 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dg-flow, .dg-bolus { animation: none; } }
.c3d-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.c3d-ladder li {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 6px; border-radius: 999px;
  background: var(--card); border: 2px solid var(--line); font-weight: 800; font-size: .9em;
}
.c3d-ladder .c3d-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tc-soft); color: var(--tc); font-size: .85em;
}
.c3d-ladder li.done { border-color: var(--good); }
.c3d-ladder li.now { background: #facc15; border-color: #eab308; color: #1f2440; }
.c3d-ladder li.now .bi > .en { color: inherit !important; opacity: .8; }
.c3d-ladder li.now .c3d-n { background: #1f2440; color: #facc15; }
/* Density gauge in the salt-water view (assets/sim-float-sink.js). */
.c3d-gauge { display: grid; gap: 4px; margin-top: 8px; }
.c3d-gauge-h { margin: 0; font-weight: 800; color: var(--muted); font-size: .78em; }
.c3d-gauge-t { position: relative; height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.c3d-gauge-t i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #7dd3fc, #0284c7); transition: width .35s ease; }
.c3d-gauge-t b { position: absolute; top: -2px; bottom: -2px; width: 3px; border-radius: 2px; background: #f97316; }
.c3d-gauge-k { margin: 0; color: var(--muted); font-size: .72em; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .c3d-gauge-t i { transition: none; } }

/* ---------- Sound lab (assets/sim-sound-wave3d.js) ---------- */
.snd-scope {
  border-radius: 12px; overflow: hidden; border: 2px solid #0f766e;
  background: #06231a; box-shadow: inset 0 0 18px rgba(16, 185, 129, .25);
}
.snd-scope svg { display: block; width: 100%; height: auto; }
.snd-scope .trace { filter: drop-shadow(0 0 4px #34d399); animation: snd-glow 2.4s ease-in-out infinite; }
@keyframes snd-glow { 50% { filter: drop-shadow(0 0 8px #6ee7b7); } }
.snd-read {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0;
  font-size: .82em; font-weight: 800; color: var(--muted);
}
.snd-read b { color: var(--tc); font-weight: 900; }
.snd-warn {
  margin: 6px 0 0; padding: 4px 9px; border-radius: 8px;
  background: var(--bad-soft); color: var(--bad); font-size: .8em; font-weight: 800;
}
.snd-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
  font-size: .76em; font-weight: 800; color: var(--muted);
}
.snd-legend span { display: flex; align-items: center; gap: 5px; }
.snd-legend i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15); }
@media (prefers-reduced-motion: reduce) { .snd-scope .trace { animation: none; } }

/* ---------- 3D homeostasis sim (assets/sim-homeo3d.js) ---------- */
.h3d-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.h3d-tag { font-size: .75em; padding: 2px 8px; background: var(--card); color: var(--ink); opacity: .94; }
.h3d-tag::after { border-top-color: var(--card); border-width: 5px; }
.h3d-read { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.h3d-m { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 2px solid var(--line); }
.h3d-ml { font-weight: 800; color: var(--muted); font-size: .85em; }
.h3d-m > b { font-weight: 900; }
.h3d-bar { position: relative; grid-column: 1 / -1; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.h3d-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .4s, background .4s; }
.h3d-safe { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--good) 35%, transparent); z-index: 1; outline: 1px dashed var(--good); }
.h3d-scale { grid-column: 1 / -1; display: flex; gap: 3px; }
.h3d-scale i { flex: 1; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.h3d-scale i.now { outline: 3px solid var(--ink); outline-offset: 1px; }
.h3d-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.h3d-chip { padding: 3px 10px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); font-weight: 800; font-size: .82em; opacity: .45; }
.h3d-chip.on { opacity: 1; border-color: var(--good); }
.h3d-chip.warn { border-color: #dc2626; }
@media (prefers-reduced-motion: reduce) { .h3d-bar i { transition: none; } }

/* ---------- Structured (SPM-style) questions: write, then self-mark against the scheme ---------- */
.q-form-s { flex-direction: column; }
.ans-text {
  font: inherit; font-size: max(16px, 1em); width: 100%; min-height: 110px; padding: 10px 14px; resize: vertical;
  border: 2px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink);
}
.ans-text:focus { border-color: var(--tc); outline: none; }
.ans-text[readonly] { opacity: .85; }
.scheme { margin-top: 12px; padding: 12px 14px; border: 2px dashed var(--tc); border-radius: 16px; }
.scheme-hint { margin: 0 0 8px; font-weight: 700; }
.scheme-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.scheme-list label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 6px 8px; border-radius: 10px; }
.scheme-list label:hover { background: var(--bg); }
.scheme-list input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--tc); }
@media (min-width: 600px) { .q-form-s .btn { align-self: flex-start; } }

/* ---------- History (Sejarah) activities: assets/sims-sejarah.js ---------- */
.hs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hs-tab {
  min-height: var(--tap); padding: 6px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 800;
  background: var(--card); color: var(--ink); border: 2px solid var(--line);
}
.hs-tab[aria-selected="true"] { background: var(--tc); border-color: var(--tc); color: #fff; }
.hs-tab[aria-selected="true"] .bi > .en { color: inherit; opacity: .85; }
.hs-tab .bi > .en { font-size: .85em; }
.hs-wrap { text-align: left; display: grid; gap: 12px; }
.hs-line { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 6px; }
.hs-line::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--tc); }
.hs-line li { position: relative; display: flex; gap: 10px; align-items: baseline; min-height: 30px; padding: 4px 10px; border-radius: 12px; background: var(--card); border: 2px dashed var(--line); }
.hs-line li::before { content: ""; position: absolute; left: -17px; top: 11px; width: 11px; height: 11px; border-radius: 50%; background: var(--card); border: 3px solid var(--tc); }
.hs-line li.on { border-style: solid; border-color: var(--tc); }
.hs-line li.on::before { background: var(--tc); }
.hs-yr { flex: none; min-width: 64px; font-weight: 900; color: var(--tc); }
.hs-ev { font-weight: 700; }
.hs-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-card {
  font: inherit; font-weight: 700; text-align: left; cursor: pointer; min-height: var(--tap); padding: 8px 12px; border-radius: 14px;
  background: var(--card); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line);
}
.hs-card:hover:not(:disabled) { border-color: var(--tc); }
.hs-card.on { border-color: var(--tc); background: var(--tc-soft); box-shadow: 0 3px 0 var(--tc); }
.hs-card.done { border-color: var(--good); background: var(--good-soft); box-shadow: none; cursor: default; }
.hs-card.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.hs-n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--good); color: #fff; font-size: .8em; }
.hs-two { grid-template-columns: 1fr; }
@media (min-width: 600px) { .hs-two { grid-template-columns: 1fr 1fr; } }
.hs-col { display: grid; gap: 8px; align-content: start; }
.hs-col-h { margin: 0; font-weight: 900; color: var(--tc); }
.hs-q { margin: 0; font-weight: 900; color: var(--tc); }
.hs-big { margin: 0; font-size: 3em; text-align: center; }
.hs-clues { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-weight: 700; }
.fig .hs-sea { fill: color-mix(in srgb, #3b82f6 14%, var(--card)); }
.fig .hs-land { fill: color-mix(in srgb, #65a30d 22%, var(--card)); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.fig .hs-dot { fill: var(--card); stroke: var(--tc); stroke-width: 3.5; }
.fig .hs-pin.on .hs-dot { fill: var(--tc); }
.fig .hs-pin:focus { outline: none; }
.fig .hs-pin:focus-visible .hs-dot { stroke: var(--ink); stroke-width: 4.5; }

/* ---------- 3D Pelan & Dongakan (assets/sim-pelan-dongakan3d.js) ---------- */
/* Panel: mode + camera on top, the 3D stage beside the drafting board, layer chips and
   the 3x3 builder pad underneath. Phones stack everything in one column. */
.p3d-root {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "stage" "aux" "pad" "board";
  gap: 10px;
  width: 100%;
}
@media (min-width: 780px) {
  .p3d-root {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    grid-template-areas: "top top" "stage board" "aux board" "pad board";
    gap: 10px 16px;
  }
}
.p3d-topbar {
  grid-area: top;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.p3d-mode-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tc) 10%, var(--card));
}
.p3d-tab {
  font: inherit;
  font-weight: 800;
  font-size: 0.8em;
  min-height: 34px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.p3d-tab[aria-pressed="true"] {
  background: var(--tc);
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.35);
}
.p3d-cam-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.p3d-btn {
  font: inherit;
  font-weight: 800;
  font-size: 0.78em;
  min-height: 34px;
  padding: 4px 9px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.p3d-btn:hover { border-color: var(--tc); }
.p3d-btn[aria-pressed="true"] {
  background: #facc15;
  border-color: #eab308;
  color: #1f2440;
}
.p3d-btn-sub { background: transparent; color: var(--muted); }
.p3d-tab:focus-visible, .p3d-btn:focus-visible, .p3d-chip:focus-visible, .p3d-pad-c:focus-visible {
  outline: 3px solid var(--tc);
  outline-offset: 2px;
}

.p3d-slot, .p3d-stage { grid-area: stage; }
.p3d-slot {
  min-height: 220px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tc) 7%, var(--card));
}
.p3d-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.2;
  max-height: 420px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--card) 90%, transparent) 0 42%, transparent 75%),
    radial-gradient(circle, color-mix(in srgb, var(--tc) 16%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px,
    color-mix(in srgb, var(--tc) 7%, var(--card));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 20%, transparent);
}
.p3d-cv { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.p3d-cv:active { cursor: grabbing; }
.p3d-hint { z-index: 2; font-size: 0.72em; }
.p3d-lbl {
  position: absolute;
  z-index: 3;
  margin: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  padding: 2px 8px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  font-size: 0.7em;
  font-weight: 900;
  color: var(--ink);
}
.p3d-lbl[data-lbl="plan"] { border-color: #f59e0b; color: #b45309; }
.p3d-lbl[data-lbl="front"] { border-color: #0284c7; color: #0369a1; }
.p3d-lbl[data-lbl="side"] { border-color: #16a34a; color: #15803d; }
.p3d-lbl .en { color: inherit; opacity: 0.75; }

.p3d-aux-bar {
  grid-area: aux;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.p3d-chip {
  font: inherit;
  font-weight: 800;
  font-size: 0.78em;
  min-height: 34px;
  padding: 5px 11px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.p3d-chip:hover { border-color: var(--tc); }
.p3d-chip[aria-pressed="true"] {
  background: #facc15;
  border-color: #eab308;
  color: #1f2440;
}

.p3d-pad-wrap {
  grid-area: pad;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.p3d-bar-lbl {
  flex-basis: 100%;
  font-size: 0.78em;
  font-weight: 900;
  color: var(--muted);
}
.p3d-pad {
  display: grid;
  grid-template-columns: repeat(3, 38px);
  gap: 4px;
}
.p3d-pad-c {
  font: inherit;
  font-weight: 900;
  font-size: 0.9em;
  height: 34px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--tc-soft);
  color: var(--ink);
  cursor: pointer;
}
.p3d-pad-c[data-h="0"] { background: transparent; color: var(--muted); }
.p3d-pad-c:hover { border-color: var(--tc); }
.p3d-pad-tools { display: flex; flex-wrap: wrap; gap: 6px; }

.p3d-board {
  grid-area: board;
  align-self: start;
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.12);
}
.p3d-drafting-svg { display: block; width: 100%; height: auto; }
.p3d-paper-bg { fill: var(--card); color: var(--ink); }
.p3d-axis { stroke: color-mix(in srgb, var(--ink) 15%, transparent); stroke-width: 1; }
.p3d-ray line {
  stroke: color-mix(in srgb, var(--tc) 55%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.p3d-quad-hl-amber { fill: #fef08a; fill-opacity: 0.12; stroke: #d97706; stroke-width: 1.5; }
.p3d-quad-hl-blue { fill: #bae6fd; fill-opacity: 0.12; stroke: #0284c7; stroke-width: 1.5; }
.p3d-quad-hl-green { fill: #bbf7d0; fill-opacity: 0.12; stroke: #16a34a; stroke-width: 1.5; }
.p3d-dim line { stroke: var(--muted); stroke-width: 1; }
.p3d-dim text {
  font-size: 8.6px;
  font-weight: 800;
  fill: var(--ink);
  stroke: var(--card);
  stroke-width: 3px;
}
.p3d-hidden-note { font-size: 7.8px; font-weight: 800; fill: #64748b; stroke: none; }

/* Phones: the stage is short and narrow, so the plane labels and the drag hint must not
   cover the solid. Drop the English half of the labels (only when both languages are on)
   and keep everything small. */
@media (max-width: 560px) {
  .p3d-lbl { font-size: 0.6em; padding: 1px 6px; }
  .p3d-hint { font-size: 0.66em; padding: 2px 8px; max-width: calc(100% - 16px); line-height: 1.25; }
  body.lang-both .p3d-lbl .bi.inline > .en { display: none; }
  body.lang-both .p3d-hint .bi.inline > .en { display: none; }
}

/* The stage needs the full width, so the sim grid becomes one column and the controls and
   tasks sit side by side underneath it. */
.sim-grid.p3d-wide { grid-template-columns: minmax(0, 1fr); }
.sim-grid.p3d-wide .sim-left { position: static; }
.sim-grid.p3d-wide .sim-right { display: grid; gap: 12px 18px; align-items: start; }
@media (min-width: 780px) {
  .sim-grid.p3d-wide .sim-right { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .sim-grid.p3d-wide .sim-ctrls { grid-column: 1; grid-row: 1; }
  .sim-grid.p3d-wide .sim-tasks { grid-column: 2; grid-row: 1; margin-top: 0; }
  .sim-grid.p3d-wide .sim-reset { grid-column: 1 / -1; }
}

/* ---------- 3D figure chips and caption (assets/figure3d.js: built.controls / built.caption) ---------- */
.fig3d-under { display: grid; gap: 8px; margin-top: 8px; text-align: left; }
.fig3d-ctrls { display: grid; gap: 8px; }
.fig3d-ctrls .c3d-chip { min-height: 34px; padding: 4px 12px; font-size: .84em; }
.fig3d-row { display: grid; gap: 3px; }
.fig3d-row-lbl { font-size: .72em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, var(--ink)); opacity: .7; }
.fig3d-btns { display: flex; flex-wrap: wrap; gap: 6px; }
/* pick: one joined segmented bar */
.fig3d-row.is-pick .fig3d-btns { gap: 0; }
.fig3d-row.is-pick .c3d-chip { border-radius: 0; margin: 0 -1.5px 0 0; position: relative; }
.fig3d-row.is-pick .c3d-chip:first-child { border-radius: 999px 0 0 999px; }
.fig3d-row.is-pick .c3d-chip:last-child { border-radius: 0 999px 999px 0; margin-right: 0; }
.fig3d-row.is-pick .c3d-chip:only-child { border-radius: 999px; }
.fig3d-row.is-pick .c3d-chip[aria-pressed="true"] { z-index: 1; }
/* do: solid action buttons; toggle: outline with a check box that fills when on */
.fig3d-row .c3d-chip[data-kind="do"] { font-weight: 800; box-shadow: 0 2px 0 var(--line); }
.fig3d-row .c3d-chip[data-kind="toggle"]::before { content: "\2610\00a0"; }
.fig3d-row .c3d-chip[data-kind="toggle"][data-on="1"]::before { content: "\2611\00a0"; }
.fig3d-cap {
  padding: 7px 12px; border-radius: 11px; background: var(--card); border: 1.5px solid var(--line);
  color: var(--ink); font-size: .85em; font-weight: 700; line-height: 1.4;
}
.fig3d-cap .bi.inline > .en { font-style: italic; opacity: .8; }
.fig3d-cap .ag-a { color: #2563eb; } .fig3d-cap .ag-b { color: #d97706; }
/* ---------- circulation sim (assets/sim-circulation.js) ---------- */
@keyframes cz-scroll { from { transform: translateX(0); } to { transform: translateX(calc(var(--p) * -1px)); } }
@keyframes cz-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 26% { transform: scale(.97); } }
@keyframes cz-dash { to { stroke-dashoffset: -32; } }
@keyframes cz-rot { to { transform: rotate(360deg); } }
@keyframes cz-bubble { from { transform: translateX(0); } to { transform: translateX(calc(var(--w) * -1px)); } }
.cz-ecg { animation: cz-scroll var(--d, 1s) linear infinite; }
.cz-beat { transform-box: fill-box; transform-origin: center; animation: cz-beat var(--d, 1s) ease-in-out infinite; }
.cz-flow { stroke-dasharray: 6 10; animation: cz-dash 1.2s linear infinite; }
.cz-spin { transform-box: fill-box; transform-origin: center; animation: cz-rot var(--d, 1s) linear infinite; }
.cz-bub { animation: cz-bubble var(--d, 10s) linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .cz-ecg, .cz-beat, .cz-flow, .cz-spin, .cz-bub { animation: none; }
}
.cz-ecgbox { display: block; width: 100%; height: auto; margin-top: 8px; border-radius: 8px; }
.cz-ladder { flex-direction: column; margin-top: 8px; }
.cz-ladder li { min-height: 30px; font-size: .82em; }
.cz-vitals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cz-vitals > div { padding: 6px 10px; border-radius: 11px; background: var(--card); border: 2px solid var(--line); }
.cz-vitals small { display: block; color: var(--muted); font-weight: 700; font-size: .72em; line-height: 1.25; }
.cz-big { display: block; font-size: 1.6em; font-weight: 900; line-height: 1.1; color: #dc2626; }
.cz-big.cz-bp { color: #0284c7; font-size: 1.3em; }
.cz-grid, .cz-log { border-collapse: collapse; font-size: .78em; font-weight: 800; margin-top: 4px; }
.cz-grid th, .cz-grid td { width: 28px; height: 24px; padding: 0; text-align: center; border: 1.5px solid var(--line); }
.cz-grid th { color: var(--muted); background: var(--tc-soft); }
.cz-grid td.ok { background: var(--good-soft); color: var(--good); }
.cz-grid td.no { background: color-mix(in srgb, #ef4444 14%, var(--card)); color: #dc2626; }
.cz-grid td.cur { outline: 3px solid #facc15; outline-offset: -3px; }
.cz-log { width: 100%; margin-top: 8px; }
.cz-log th, .cz-log td { padding: 2px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.cz-log th { color: var(--muted); }
.cz-log tr.now td { background: #fef9c3; color: #1f2440; }

/* money pictures inside bilingual questions: show once in BM+EN mode */
body.lang-both .en .mny-row { display: none !important; }