/* Suken eBook simulations ("Explore" cards). Colours follow app.css; every colour is a token so dark mode only swaps tokens.
   Dark mode: html[data-theme="dark"], or html[data-theme="auto"] when the phone is in dark mode. Without data-theme the sims stay light, like the app. */
.sim {
  --s-blue: #1b1fd6; --s-btn: #1b1fd6; --s-teal: #0f8fb3; --s-orange: #e86f00; --s-purple: #800080; --s-green: #14823c; --s-red: #cc0000; --s-sun: #ffcd3c;
  --s-ink: #1d1d35; --s-muted: #5a5a78; --s-line: #dcdcec; --s-grid: #ececf5; --s-card: #ffffff; --s-bg: #f6f7fb; --s-lav: #eef0ff; --s-lav2: #dfe3ff;
  --s-orange-l: #fff1e0; --s-teal-l: #e3f5fa; --s-purple-l: #f6e9f6; --s-green-l: #e4f5ea; --s-red-l: #fde8e8; --s-sun-l: #fff6d8; --s-blue-l: #e6e8ff;
  --s-on: #ffffff; --s-shadow: 0 1px 2px rgba(20,20,60,.06), 0 4px 14px rgba(20,20,60,.06);
  --s-math: 'Latin Modern Math', 'STIX Two Math', 'Cambria Math', 'Times New Roman', Times, serif;
  color-scheme: light;
  background: var(--s-card); color: var(--s-ink); border: 1px solid var(--s-line); border-radius: 14px; box-shadow: var(--s-shadow);
  padding: 0 14px 14px; margin: 14px 0; font-family: 'Nunito', 'Kantumruy Pro', 'Noto Sans Khmer', 'Khmer UI', 'Leelawadee UI', system-ui, sans-serif;
  font-size: 16px; line-height: 1.5; overflow: hidden; max-width: 760px; -webkit-tap-highlight-color: transparent;
}
.sim.sim-km { font-family: 'Kantumruy Pro', 'Noto Sans Khmer', 'Khmer UI', 'Leelawadee UI', 'Nunito', system-ui, sans-serif; line-height: 1.75; }
.sim *, .sim *::before, .sim *::after { box-sizing: border-box; }
html[data-theme="dark"] .sim { --s-blue: #9a9eff; --s-btn: #4f54f0; --s-teal: #48c4e4; --s-orange: #ff9d45; --s-purple: #df8fdf; --s-green: #52cc84; --s-red: #ff7676; --s-sun: #ffd75e;
  --s-ink: #ececf7; --s-muted: #a9abc8; --s-line: #34364e; --s-grid: #262839; --s-card: #1a1b2a; --s-bg: #12131f; --s-lav: #262a52; --s-lav2: #363b72;
  --s-orange-l: #3d2a14; --s-teal-l: #12343f; --s-purple-l: #36203a; --s-green-l: #15351f; --s-red-l: #3e1c1c; --s-sun-l: #3a3214; --s-blue-l: #23264d;
  --s-shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .sim { --s-blue: #9a9eff; --s-btn: #4f54f0; --s-teal: #48c4e4; --s-orange: #ff9d45; --s-purple: #df8fdf; --s-green: #52cc84; --s-red: #ff7676; --s-sun: #ffd75e;
    --s-ink: #ececf7; --s-muted: #a9abc8; --s-line: #34364e; --s-grid: #262839; --s-card: #1a1b2a; --s-bg: #12131f; --s-lav: #262a52; --s-lav2: #363b72;
    --s-orange-l: #3d2a14; --s-teal-l: #12343f; --s-purple-l: #36203a; --s-green-l: #15351f; --s-red-l: #3e1c1c; --s-sun-l: #3a3214; --s-blue-l: #23264d;
    --s-shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark; }
}

/* head, goal, text */
.sim-head { display: flex; align-items: center; gap: 8px; margin: 0 -14px 10px; padding: 9px 14px; background: var(--s-teal); color: #fff; font-weight: 800; font-size: 14px; }
html[data-theme="dark"] .sim-head { background: #0e6f8c; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .sim-head { background: #0e6f8c; } }
.sim-badge { background: rgba(255,255,255,.22); border-radius: 99px; padding: 1px 9px; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.sim-km .sim-badge { text-transform: none; letter-spacing: 0; }
.sim-title { min-width: 0; }
.sim-goal { background: var(--s-lav); border-radius: 10px; padding: 8px 11px; margin: 0 0 10px; font-size: 15px; }
.sim-txt { margin: 8px 0; font-size: 15px; }
.sim-hint { color: var(--s-muted); font-size: 13.5px; margin: 4px 0 6px; }
.sim-note { color: var(--s-muted); font-size: 14px; margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--s-line); }
.sim .muted { color: var(--s-muted); }
.sim .kw { white-space: nowrap; }
.sim b { font-weight: 800; }

/* TeX-lite maths */
.sim .sm { white-space: nowrap; font-family: var(--s-math); font-size: 1.08em; }
.sim .sm i { font-style: italic; }
.sim .sm .so { margin: 0 .22em 0 .26em; }
.sim .sm sup, .sim .sm sub { font-size: .7em; line-height: 0; }
.sim .sm .st { font-family: inherit; font-style: normal; }
.sim .sf { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .86em; margin: 0 .12em; line-height: 1.12; }
.sim .sfn { border-bottom: 1.2px solid currentColor; padding: 0 .12em; }
.sim .sfd { padding: 0 .12em; }
.sim .sr { white-space: nowrap; }
.sim .srs { margin-right: -.02em; }
.sim .srx { border-top: 1.2px solid currentColor; padding: 0 .08em; }
.sim mjx-container { font-size: 105% !important; }

/* tabs and chips */
.sim-tabs { display: flex; background: var(--s-lav); border-radius: 12px; padding: 4px; gap: 4px; margin: 0 0 10px; }
.sim-tabs button { flex: 1; min-width: 0; border: 0; background: none; border-radius: 9px; padding: 9px 4px; font: inherit; font-weight: 800; font-size: 14px; color: var(--s-blue); cursor: pointer; line-height: 1.3; }
.sim-tabs button.on { background: var(--s-card); color: var(--s-ink); box-shadow: var(--s-shadow); }
.sim-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 8px; }
.sim-chips .lab { font-weight: 800; font-size: 14px; margin-right: 2px; }
.sim-chips button { border: 2px solid var(--s-lav2); background: var(--s-card); color: var(--s-ink); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 40px; }
.sim-chips button.on { border-color: var(--s-orange); background: var(--s-orange-l); color: var(--s-ink); }

/* buttons */
.sim-btn { border: 0; border-radius: 12px; padding: 10px 15px; min-height: 44px; font: inherit; font-weight: 800; font-size: 15px; background: var(--s-btn); color: var(--s-on); cursor: pointer; line-height: 1.25; }
.sim-btn.ghost { background: var(--s-lav); color: var(--s-blue); }
.sim-btn.ghost.on { background: var(--s-orange-l); color: var(--s-ink); box-shadow: inset 0 0 0 2px var(--s-orange); }
.sim-btn.small { min-height: 38px; padding: 7px 12px; font-size: 14px; }
.sim-btn.play { min-width: 104px; }
.sim-btn:disabled { opacity: .45; cursor: default; }
.sim-btn:focus-visible, .sim-tabs button:focus-visible, .sim-chips button:focus-visible, .sim-choice:focus-visible, .sim-ans:focus-visible { outline: 3px solid var(--s-orange); outline-offset: 2px; }
.sim-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }

/* svg figures */
.sim-svg { display: block; width: 100%; height: auto; margin: 4px auto; max-width: 520px; user-select: none; -webkit-user-select: none; overflow: visible; }
.sim-svg.square { max-width: 420px; }
.sim-svg.box3d { touch-action: pan-y; cursor: ew-resize; }
.sim-svg text { fill: var(--s-ink); font-family: inherit; }
.sim-svg .mi { font-family: var(--s-math); font-style: italic; }
.sim-svg .pt { font-family: var(--s-math); font-style: italic; font-weight: 600; }
.sim-svg .pt.faint { opacity: .55; }
.sim-svg .dim, .sim-svg .tick { fill: var(--s-muted); }
.sim-svg .axl { font-family: var(--s-math); font-style: italic; fill: var(--s-ink); }
.sim-svg .halo { paint-order: stroke; stroke: var(--s-card); stroke-width: 4px; stroke-linejoin: round; }
.sim-svg .grid { stroke: var(--s-grid); stroke-width: 1; }
.sim-svg .axis { stroke: var(--s-ink); stroke-width: 1.5; fill: none; }
.sim-svg .shape { fill: var(--s-card); stroke: var(--s-ink); stroke-width: 2; }
.sim-svg .tri { fill: var(--s-orange-l); stroke: var(--s-orange); stroke-width: 2; stroke-linejoin: round; }
.sim-svg .walk { stroke-width: 5; stroke-linecap: round; opacity: .85; }
.sim-svg .hgt { stroke: var(--s-green); stroke-width: 1.6; stroke-dasharray: 4 3; }
.sim-svg .c-blue { stroke: var(--s-blue); } .sim-svg text.c-blue { fill: var(--s-blue); stroke: none; }
.sim-svg .c-green { stroke: var(--s-green); } .sim-svg text.c-green { fill: var(--s-green); stroke: none; }
.sim-svg .c-purple { stroke: var(--s-purple); } .sim-svg text.c-purple { fill: var(--s-purple); stroke: none; }
.sim-svg .c-orange { stroke: var(--s-orange); } .sim-svg text.c-orange { fill: var(--s-orange); stroke: none; }
.sim-svg .c-teal { stroke: var(--s-teal); } .sim-svg text.c-teal { fill: var(--s-teal); stroke: none; }
.sim-svg text.halo.c-blue, .sim-svg text.halo.c-orange, .sim-svg text.halo.c-teal, .sim-svg text.halo.c-purple { stroke: var(--s-card); }
.sim-svg .trace { stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sim-svg .sep { stroke: var(--s-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.sim-svg .guide { stroke: var(--s-orange); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sim-svg .gdot { fill: var(--s-orange); stroke: var(--s-card); stroke-width: 2.5; }
.sim-svg .hl { stroke: var(--s-red); stroke-width: 1.6; stroke-dasharray: 6 4; }
.sim-svg .hl-t { fill: var(--s-red); font-weight: 700; }
.sim-svg .hit-pt { fill: var(--s-green); stroke: var(--s-card); stroke-width: 2; }
.sim-svg .miss-pt { fill: var(--s-red); stroke: var(--s-card); stroke-width: 2; }
.sim-svg .ghost { fill: none; stroke: var(--s-muted); stroke-width: 2.5; stroke-dasharray: 6 5; }
.sim-svg .outside { fill: var(--s-red-l); opacity: .7; }
/* handles */
.sim-h { cursor: grab; touch-action: none; outline: none; }
.sim-h .h-hit { fill: transparent; }
.sim-h .h-dot { stroke: var(--s-card); stroke-width: 3; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); transition: r .12s; }
.sim-h.h-orange .h-dot { fill: var(--s-orange); } .sim-h.h-blue .h-dot { fill: var(--s-btn); } .sim-h.h-teal .h-dot { fill: var(--s-teal); }
.sim-h .h-in { fill: #fff; font-family: var(--s-math); font-style: italic; font-weight: 700; font-size: 15px; pointer-events: none; }
.sim-h.drag { cursor: grabbing; } .sim-h.drag .h-dot, .sim-h:focus-visible .h-dot { stroke: var(--s-sun); stroke-width: 4; }
/* parabola */
.sim-svg .strip { fill: var(--s-teal-l); opacity: .85; }
.sim-svg .curve { fill: none; stroke: var(--s-blue); stroke-width: 2; }
.sim-svg .curve-on { fill: none; stroke: var(--s-orange); stroke-width: 5; stroke-linecap: round; }
.sim-svg .secant { stroke: var(--s-purple); stroke-width: 2.2; }
.sim-svg .sec-t { fill: var(--s-purple); font-weight: 800; }
.sim-svg .dash { stroke: var(--s-orange); stroke-width: 1.3; stroke-dasharray: 4 3; }
.sim-svg .yband { stroke: var(--s-orange); stroke-width: 9; stroke-linecap: round; opacity: .55; }
.sim-svg .ylab { fill: var(--s-orange); font-weight: 800; }
.sim-svg .vtx { fill: none; stroke: var(--s-green); stroke-width: 3; }
.sim-svg .cdot { fill: var(--s-orange); stroke: var(--s-card); stroke-width: 2; }
.sim-svg .stem { stroke: var(--s-btn); stroke-width: 2; }
/* circle */
.sim-svg .circle { fill: none; stroke: var(--s-ink); stroke-width: 2; }
.sim-svg .arc-on { fill: none; stroke: var(--s-blue); stroke-width: 6; stroke-linecap: round; opacity: .5; }
.sim-svg .rad { stroke: var(--s-blue); stroke-width: 2.2; }
.sim-svg .chord { stroke: var(--s-orange); stroke-width: 2.4; }
.sim-svg .chord-ab { stroke: var(--s-muted); stroke-width: 1.2; stroke-dasharray: 4 4; }
.sim-svg .ang-o { fill: var(--s-blue-l); stroke: var(--s-blue); stroke-width: 1.6; }
.sim-svg .ang-o.reflex { stroke-dasharray: 4 3; fill-opacity: .7; }
.sim-svg .ang-p { fill: var(--s-orange-l); stroke: var(--s-orange); stroke-width: 1.8; }
.sim-svg .ang-t { font-weight: 800; }
.sim-svg .o-dot { fill: var(--s-ink); }
/* Pythagoras */
.sim-svg .sq-a { fill: var(--s-teal-l); stroke: var(--s-teal); stroke-width: 2; stroke-linejoin: round; }
.sim-svg .sq-b { fill: var(--s-purple-l); stroke: var(--s-purple); stroke-width: 2; stroke-linejoin: round; }
.sim-svg .sq-c { fill: var(--s-orange-l); stroke: var(--s-orange); stroke-width: 2; stroke-linejoin: round; }
.sim-svg .ugrid line { stroke: var(--s-ink); stroke-width: .6; opacity: .18; }
.sim-svg .rt { fill: var(--s-sun-l); stroke: var(--s-ink); stroke-width: 2; stroke-linejoin: round; }
.sim-svg .rt0 { fill: #ffe39a; } .sim-svg .rt1 { fill: #ffd27a; } .sim-svg .rt2 { fill: #ffe9b5; } .sim-svg .rt3 { fill: #fbd98c; }
html[data-theme="dark"] .sim-svg .rt0, html[data-theme="dark"] .sim-svg .rt1, html[data-theme="dark"] .sim-svg .rt2, html[data-theme="dark"] .sim-svg .rt3 { fill: #6b5520; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .sim-svg .rt0, html[data-theme="auto"] .sim-svg .rt1, html[data-theme="auto"] .sim-svg .rt2, html[data-theme="auto"] .sim-svg .rt3 { fill: #6b5520; } }
.sim-svg .rmark { fill: none; stroke: var(--s-ink); stroke-width: 1.4; }
.sim-svg .sqlab { font-weight: 800; }
.sim-svg .leglab { font-family: var(--s-math); font-style: italic; font-weight: 700; fill: var(--s-ink); }
.sim-svg .bigsq { fill: var(--s-card); stroke: var(--s-ink); stroke-width: 2.5; }
.sim-svg .edge { stroke: var(--s-ink); stroke-width: 2; }
.sim-svg .edge.hidden { stroke: var(--s-muted); stroke-width: 1.4; stroke-dasharray: 5 4; }
.sim-svg .floor { fill: var(--s-lav); opacity: .8; }
.sim-svg .tri3 { fill: var(--s-orange-l); opacity: .75; }
.sim-svg .diag-f { stroke: var(--s-teal); stroke-width: 3; stroke-dasharray: 7 4; }
.sim-svg .diag-h { stroke: var(--s-red); stroke-width: 2.4; }
.sim-svg .diag-s { stroke: var(--s-orange); stroke-width: 4; stroke-linecap: round; }
/* charts */
.sim-svg.chart .b-orange { fill: var(--s-orange); } .sim-svg.chart .b-blue { fill: var(--s-btn); opacity: .85; }
.sim-svg .pline { stroke: var(--s-blue); stroke-width: 1.6; stroke-dasharray: 6 4; }
.sim-svg .hline { fill: none; stroke: var(--s-orange); stroke-width: 2.4; stroke-linejoin: round; }
.sim-svg .vlab { font-weight: 800; }

/* readouts */
.sim-read { background: var(--s-bg); border: 1px solid var(--s-line); border-radius: 11px; padding: 8px 11px; margin: 8px 0; font-size: 15px; }
.sim-read .rbig { font-size: 17px; font-weight: 700; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.sim-read .rbig .sep { color: var(--s-muted); }
.sim-read .rbig2 { font-size: 16px; margin-top: 2px; }
.sim-read .small { font-size: 14px; margin-top: 3px; color: var(--s-ink); }
.sim-read .small.muted { color: var(--s-muted); }
.sim-read .badge { display: inline-block; border-radius: 8px; padding: 2px 9px; font-weight: 700; font-size: 14px; margin: 3px 0; }
.sim-read .badge.in { background: var(--s-green-l); color: var(--s-ink); box-shadow: inset 3px 0 0 var(--s-green); }
.sim-read .badge.out { background: var(--s-lav); color: var(--s-ink); box-shadow: inset 3px 0 0 var(--s-blue); }
.sim-read .trap { color: var(--s-red); font-size: 14px; margin-top: 2px; }
.sim-read .rate { margin-top: 4px; font-size: 15px; color: var(--s-ink); }
.sim .c-blue { color: var(--s-blue); } .sim .c-orange { color: var(--s-orange); } .sim .c-teal { color: var(--s-teal); } .sim .c-purple { color: var(--s-purple); }
.sim-pieces { margin: 8px 0; border: 1px solid var(--s-line); border-radius: 11px; overflow: hidden; font-size: 14.5px; }
.sim-pieces .ph, .sim-pieces .pr { display: grid; grid-template-columns: 0.8fr 1.2fr 1.3fr; gap: 6px; padding: 6px 10px; align-items: center; }
.sim-pieces .ph { background: var(--s-lav); font-weight: 800; font-size: 13px; }
.sim-pieces .pr + .pr { border-top: 1px solid var(--s-line); }
.sim-pieces .pr.on { background: var(--s-orange-l); }
.sim-pieces em { color: var(--s-muted); font-style: normal; font-size: 13px; }
.sim-pieces .chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sim-pieces .chip.c-blue { background: var(--s-blue); } .sim-pieces .chip.c-green { background: var(--s-green); } .sim-pieces .chip.c-purple { background: var(--s-purple); }
.sim-bars { margin: 6px 0; }
.sim-bars .sbar { display: grid; grid-template-columns: 7.5em 1fr 3.4em; gap: 8px; align-items: center; font-size: 14px; margin: 3px 0; }
.sim-km .sim-bars .sbar { grid-template-columns: 7.2em 1fr 3.4em; }
.sim-bars .bt { height: 14px; background: var(--s-grid); border-radius: 99px; overflow: hidden; }
.sim-bars .bt i { display: block; height: 100%; border-radius: 99px; transition: width .15s; }
.sim-bars .b-blue { background: var(--s-blue); } .sim-bars .b-orange { background: var(--s-orange); }
.sim-bars b { text-align: right; }
.sim-missions { border: 1px dashed var(--s-line); border-radius: 11px; padding: 7px 11px; margin: 8px 0; font-size: 14.5px; }
.sim-missions .mh { font-weight: 800; margin-bottom: 2px; }
.sim-missions .ms { display: flex; gap: 8px; margin: 3px 0; }
.sim-missions .mk { font-weight: 800; color: var(--s-muted); width: 1.1em; flex: none; }
.sim-missions .ms.ok .mk { color: var(--s-green); }
.sim-missions .ms.ok b { color: var(--s-green); }

/* sliders */
.sim-sl { margin: 6px 0 2px; }
.sim-sl-h { font-size: 15px; font-weight: 700; min-height: 1.4em; }
.sim-sl.nohead .sim-sl-h { display: none; }
.sim-sl-svg { display: block; width: 100%; max-width: 520px; height: auto; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; outline: none; }
.sim-sl-svg .sl-track { stroke: var(--s-lav2); stroke-width: 8; stroke-linecap: round; }
.sim-sl-svg .sl-fill { stroke: var(--s-btn); stroke-width: 8; stroke-linecap: round; }
.sim-sl-svg .sl-tick { stroke: var(--s-muted); stroke-width: 1.2; }
.sim-sl-svg .sl-lab { fill: var(--s-muted); font-size: 11px; font-family: inherit; }
.sim-sl-svg .sl-th { fill: var(--s-card); stroke: var(--s-btn); stroke-width: 3.5; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.sim-sl-svg .sl-th-in { fill: var(--s-btn); }
.sim-sl-svg.on .sl-th, .sim-sl-svg:focus-visible .sl-th { stroke: var(--s-orange); }
.sim-two, .sim-three { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .sim-two { grid-template-columns: 1fr 1fr; } .sim-three { grid-template-columns: 1fr 1fr 1fr; } }

/* dice and coins */
.sim-roll { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; }
.sim-roll .faces { display: flex; align-items: center; gap: 6px; min-height: 52px; }
.sim-roll .faces .lab { font-size: 12.5px; color: var(--s-muted); max-width: 5.5em; line-height: 1.2; }
.sim-roll .rolls { margin: 0; }
.sim-roll .rolls .sim-btn { padding: 8px 11px; font-size: 14px; min-height: 42px; }
.sim .die, .sim .coin { width: 46px; height: 46px; display: block; }
.sim .die rect { fill: var(--s-card); stroke: var(--s-ink); stroke-width: 2.5; }
.sim .die circle { fill: var(--s-ink); }
.sim .coin circle { stroke-width: 3; }
.sim .coin.ch circle { fill: #f6d36b; stroke: #b98a00; } .sim .coin.ct circle { fill: #d9dbe6; stroke: #8a8ea3; }
.sim .coin text { fill: #3a2a00; font-weight: 800; font-family: inherit; }
.sim .die.idle, .sim .coin.idle { opacity: .35; }
.sim .faces.shake .die, .sim .faces.shake .coin { animation: sim-shake .12s linear infinite; }
@keyframes sim-shake { 0% { transform: rotate(-9deg); } 50% { transform: rotate(9deg) translateY(-2px); } 100% { transform: rotate(-9deg); } }
.sim-tbl { display: grid; gap: 3px; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.sim-tbl.dice { grid-template-columns: 1.15fr repeat(6, 1fr); }
.sim-tbl.c2 { grid-template-columns: repeat(4, 1fr); }
.sim-tbl.c3 { grid-template-columns: repeat(4, 1fr); }
.sim-tbl .th { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--s-muted); text-align: center; line-height: 1.1; }
.sim-tbl .th.corner { font-size: 10.5px; }
.sim-tbl .dmini { display: inline-flex; width: 24px; height: 24px; border: 2px solid var(--s-ink); border-radius: 6px; align-items: center; justify-content: center; color: var(--s-ink); font-size: 13px; }
.sim-tbl .cell { position: relative; border: 1.5px solid var(--s-line); border-radius: 7px; background: var(--s-card); text-align: center; padding: 2px 0; min-height: 40px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.sim-tbl .cell::before { content: ""; position: absolute; inset: 0; background: var(--s-btn); opacity: calc(var(--heat, 0) * .22); pointer-events: none; }
.sim-tbl .cell small { position: relative; font-size: 10.5px; color: var(--s-muted); line-height: 1.1; }
.sim-tbl .cell b { position: relative; font-size: 13.5px; line-height: 1.2; }
.sim-tbl.c2 .cell, .sim-tbl.c3 .cell { min-height: 54px; } .sim-tbl.c2 .cell small, .sim-tbl.c3 .cell small { font-size: 14px; letter-spacing: 1px; color: var(--s-ink); font-weight: 700; }
.sim-tbl .cell.ev { border-color: var(--s-orange); background: var(--s-orange-l); box-shadow: inset 0 0 0 1px var(--s-orange); }
.sim-tbl .cell.last { outline: 3px solid var(--s-ink); outline-offset: -1px; }

/* Predict → Check */
.sim-pred { margin: 14px 0 0; border: 2px solid var(--s-purple); border-radius: 13px; padding: 10px 12px 12px; background: var(--s-purple-l); }
.sim-pred-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.sim-pred-t { font-weight: 800; color: var(--s-purple); font-size: 14px; letter-spacing: .3px; }
.sim-dots { display: flex; gap: 5px; }
.sim-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--s-line); display: block; }
.sim-dots i.cur { background: var(--s-purple); } .sim-dots i.ok { background: var(--s-green); }
.sim-pred-q { font-weight: 700; font-size: 16px; margin: 2px 0 8px; }
.sim-choices { display: flex; flex-direction: column; gap: 7px; }
.sim-choice { text-align: left; border: 2px solid var(--s-line); background: var(--s-card); color: var(--s-ink); border-radius: 11px; padding: 10px 13px; min-height: 46px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.sim-choice.wrong { border-color: var(--s-red); background: var(--s-red-l); opacity: .8; }
.sim-choice.right { border-color: var(--s-green); background: var(--s-green-l); }
.sim-choice:disabled { cursor: default; }
.sim-ckrow { display: flex; gap: 8px; align-items: stretch; }
.sim-ans { flex: 1; min-width: 0; min-height: 46px; border: 2px solid var(--s-lav2); border-radius: 11px; background: var(--s-card); color: var(--s-ink); padding: 8px 12px; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.sim-ans .ph { color: var(--s-muted); font-weight: 600; font-size: 15px; }
.sim-ans .unit { margin-left: auto; color: var(--s-muted); font-size: 15px; }
.sim-kp { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 7px; }
.sim-kp button { min-height: 42px; border: 1px solid var(--s-line); background: var(--s-card); color: var(--s-ink); border-radius: 9px; font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; padding: 0; }
.sim-kp button.op { color: var(--s-blue); } .sim-kp button.del { color: var(--s-red); }
.sim-kp button:active, .sim-choice:active, .sim-btn:active { transform: translateY(1px); }
.sim-fb { margin-top: 8px; border-radius: 10px; padding: 7px 11px; font-size: 15px; font-weight: 700; }
.sim-fb.ok { background: var(--s-green-l); color: var(--s-ink); box-shadow: inset 4px 0 0 var(--s-green); }
.sim-fb.no { background: var(--s-red-l); color: var(--s-ink); box-shadow: inset 4px 0 0 var(--s-red); }
.sim-fb.show { background: var(--s-sun-l); color: var(--s-ink); box-shadow: inset 4px 0 0 var(--s-sun); }
.sim-ins { margin-top: 8px; background: var(--s-card); border-radius: 10px; padding: 8px 11px; font-size: 15px; }
.sim-look { color: var(--s-muted); font-size: 13.5px; margin-top: 4px; }
.sim-done { font-weight: 800; color: var(--s-green); }

/* ---------- second set of sims ---------- */
.sim .hlm { background: var(--s-sun-l); box-shadow: 0 0 0 2px var(--s-sun); border-radius: 3px; padding: 0 2px; margin: 0 3px; }
.sim .c-red { color: var(--s-red); }
.sim-svg text.c-red { fill: var(--s-red); stroke: none; }
.sim-svg text.halo.c-red { stroke: var(--s-card); }
.sim-note.warn { border-left-color: var(--s-orange); color: var(--s-ink); background: var(--s-orange-l); border-radius: 0 8px 8px 0; padding: 6px 10px; }
.sim-read .indent { padding-left: 2.6em; }
.sim-svg .lab12 { font-weight: 800; }
/* number walk */
.sim-svg .hop { fill: none; stroke-width: 2.4; }
.sim-svg .startpt { fill: var(--s-card); stroke: var(--s-ink); stroke-width: 2.5; }
.sim-svg .endpt { fill: var(--s-orange); stroke: var(--s-card); stroke-width: 2.5; }
.sim-svg .endlab { font-weight: 800; fill: var(--s-orange); }
.sim-svg .tick.zero { font-weight: 800; fill: var(--s-ink); }
.sim-svg .walker { fill: var(--s-btn); }
.sim-svg .walker-b { fill: none; stroke: var(--s-btn); stroke-width: 3; stroke-linecap: round; }
.sim-svg .walker-a { fill: none; stroke: var(--s-orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pow-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.pow-cards .pcard { border: 2px solid var(--s-line); border-radius: 12px; padding: 8px; text-align: center; background: var(--s-bg); }
.pow-cards .pt { font-size: 24px; }
.pow-cards .pf { margin: 6px 0; line-height: 2; font-weight: 800; }
.pow-cards .pr { font-size: 20px; }
.pow-cards .fchip { display: inline-block; border-radius: 7px; padding: 0 5px; background: var(--s-lav); }
.pow-cards .fchip.neg { background: var(--s-orange-l); color: var(--s-ink); }
.pow-cards .fchip.negout { background: var(--s-red-l); color: var(--s-red); font-size: 1.2em; }
.pow-cards .x { margin: 0 2px; color: var(--s-muted); }
.bpma { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.bpma .bp { border: 2px solid var(--s-line); border-radius: 10px; padding: 3px 9px; font-size: 14px; }
.bpma .bp.on { border-color: var(--s-sun); background: var(--s-sun-l); }
.bpma .small { width: 100%; font-size: 12.5px; }
.sim-read.steps .ln { font-size: 18px; margin: 3px 0; }
.sim-read.steps .ok { color: var(--s-green); font-size: 15px; }
/* lines and planes */
.sim-svg .lineA { stroke: var(--s-blue); stroke-width: 2.6; }
.sim-svg .lineB { stroke: var(--s-orange); stroke-width: 2.6; }
.sim-svg .slopetri { fill: var(--s-sun-l); opacity: .7; }
.sim-svg .runline { stroke: var(--s-blue); stroke-width: 3; stroke-dasharray: 6 3; }
.sim-svg .riseline { stroke: var(--s-orange); stroke-width: 3; stroke-dasharray: 6 3; }
.sim-svg .icpt { fill: var(--s-green); stroke: var(--s-card); stroke-width: 2; }
.sim-svg .meet { fill: var(--s-green); stroke: var(--s-card); stroke-width: 3; }
.sim-svg .meet-t { fill: var(--s-green); font-weight: 800; }
.sim-read .sys { display: flex; align-items: center; gap: 6px; font-size: 17px; line-height: 1.6; }
.sim-read .sys .brace { font-size: 44px; font-weight: 200; line-height: 1; color: var(--s-muted); }
/* polygon */
.sim-svg .poly { fill: var(--s-lav); fill-opacity: .55; stroke: var(--s-ink); stroke-width: 2.4; stroke-linejoin: round; }
.sim-svg .trifill.tf0 { fill: var(--s-teal-l); } .sim-svg .trifill.tf1 { fill: var(--s-purple-l); }
.sim-svg .diag { stroke: var(--s-muted); stroke-width: 1.4; stroke-dasharray: 5 4; }
.sim-svg .extline { stroke: var(--s-orange); stroke-width: 1.6; stroke-dasharray: 4 3; }
.sim-svg .extarc { fill: var(--s-orange-l); stroke: var(--s-orange); stroke-width: 1.6; }
.sim-svg .turtle { fill: var(--s-green); stroke: var(--s-card); stroke-width: 1.5; }
/* area models */
.sim-svg .atile { stroke: var(--s-ink); stroke-width: 1.4; }
.sim-svg .atile.pos { fill: var(--s-blue-l); } .sim-svg .atile.neg { fill: var(--s-red-l); }
.sim-svg .atile.unit { stroke-width: .8; }
.sim-svg .atile.sqa { fill: var(--s-teal-l); } .sim-svg .atile.sqb { fill: var(--s-purple-l); } .sim-svg .atile.sqab { fill: var(--s-orange-l); }
.sim-svg .atile.ghosted { fill: var(--s-card); stroke-dasharray: 5 4; stroke: var(--s-red); }
.sim-svg .atile.cutb { fill: none; stroke: var(--s-red); stroke-dasharray: 5 4; }
.sim-svg .ugrid1 { stroke: var(--s-ink); stroke-width: .5; opacity: .18; }
.sim-svg .tlab { font-weight: 800; fill: var(--s-ink); }
.sim.sim-embedded { padding-top: 12px; }
/* algebra tiles */
.sim-svg .atile.xsq { fill: var(--s-blue-l); }
.sim-svg .atile.xbar { fill: var(--s-teal-l); }
.sim-svg .atile.one { fill: var(--s-sun-l); stroke-width: .9; }
.sim-svg .atile.gapcell { fill: none; stroke: var(--s-red); stroke-dasharray: 3 3; }
.sim-svg .atile.spare { stroke: var(--s-red); }
.sim-svg .atile.addc { fill: var(--s-orange-l); stroke: var(--s-orange); }
.sim-svg .closed { fill: none; stroke: var(--s-green); stroke-width: 4; }
.sim-chips.pairs button small { color: var(--s-muted); font-weight: 600; }
.sim-chips.pairs button.good { border-color: var(--s-green); }
/* square roots */
.sim-svg .zseg { fill: transparent; cursor: pointer; }
.sim-svg .zseg:hover { fill: var(--s-lav); }
.sim-svg .zseg.good { fill: var(--s-green-l); } .sim-svg .zseg.bad { fill: var(--s-red-l); }
.sim-svg .rootmark { fill: var(--s-orange); }
.sim-svg .sqv { fill: var(--s-purple); }
.sim-svg .rootlab { font-weight: 800; fill: var(--s-orange); }
.sim-svg .bigroot { fill: var(--s-teal-l); stroke: var(--s-ink); stroke-width: 2.4; }
.sim-svg .rgrid { stroke: var(--s-ink); stroke-width: 1.2; opacity: .6; }
.sim-svg .onecell { fill: var(--s-orange-l); stroke: var(--s-orange); stroke-width: 2; }
.sim-svg .brace { fill: none; stroke: var(--s-orange); stroke-width: 2; }
/* complete the square, parabola and line */
.sim-svg .vtxdot { fill: var(--s-orange); stroke: var(--s-card); stroke-width: 2.5; }
.sim-svg .halfline { stroke: var(--s-purple); stroke-width: 2.4; stroke-dasharray: 7 4; }
/* similar figures */
.sim-svg .smalltri { fill: var(--s-teal-l); stroke: var(--s-ink); stroke-width: 1.6; }
.sim-svg .tri-e { stroke: var(--s-ink); stroke-width: 1.2; }
.sim-svg .cf { stroke: var(--s-ink); stroke-width: 1.6; stroke-linejoin: round; }
.sim-svg .cf.cfront { fill: var(--s-orange-l); } .sim-svg .cf.ctop { fill: var(--s-sun-l); } .sim-svg .cf.cside { fill: var(--s-purple-l); }
.sim-svg .cgrid { stroke: var(--s-ink); stroke-width: .8; opacity: .55; }
.sim-read .ratio { display: grid; grid-template-columns: 7em 1fr; font-size: 16px; padding: 2px 0; }
.sim-read .ratio + .ratio { border-top: 1px solid var(--s-line); }
/* midpoint, cone, sphere, fish, constructions */
.sim-h.h-green .h-dot { fill: var(--s-green); }
.sim-svg .parmark { fill: none; stroke: var(--s-ink); stroke-width: 1.8; stroke-linejoin: round; }
.sim-svg .conefill { fill: var(--s-teal-l); fill-opacity: .85; stroke: none; }
.sim-svg .gen { stroke: var(--s-teal); stroke-width: 1; opacity: .7; }
.sim-svg .rimline { fill: none; stroke: var(--s-orange); stroke-width: 3.5; stroke-linejoin: round; }
.sim-svg .slantline { stroke: var(--s-purple); stroke-width: 3; }
.sim-svg .hline2 { stroke: var(--s-ink); stroke-width: 1.6; stroke-dasharray: 5 4; }
.sim-svg .water { fill: var(--s-teal); fill-opacity: .45; }
.sim-svg .watertop { fill: var(--s-teal); fill-opacity: .35; stroke: var(--s-teal); stroke-width: 1.4; }
.sim-svg .cyl { fill: none; stroke: var(--s-ink); stroke-width: 2.4; }
.sim-svg .cylback { fill: none; stroke: var(--s-ink); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sim-svg .sphere { fill: var(--s-orange-l); fill-opacity: .7; stroke: var(--s-orange); stroke-width: 2.4; }
.sim-svg .equator { fill: none; stroke: var(--s-orange); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sim-svg .conef { fill: var(--s-purple-l); fill-opacity: .8; stroke: var(--s-purple); stroke-width: 2.2; }
.sim-svg .lvl { stroke: var(--s-ink); stroke-width: 1.6; }
.sim-svg .pond { fill: var(--s-teal-l); stroke: var(--s-teal); stroke-width: 2; }
.sim-svg .fish { fill: var(--s-blue); fill-opacity: .55; }
.sim-svg .fish.tagged { fill: var(--s-orange); fill-opacity: 1; }
.sim-svg .caught { fill: none; stroke: var(--s-ink); stroke-width: 1.4; }
.sim-svg .estdot { fill: var(--s-purple); }
.sim-svg .seg-ab { stroke: var(--s-ink); stroke-width: 2.6; stroke-linecap: round; }
.sim-svg .carc { fill: none; stroke: var(--s-blue); stroke-width: 2; }
.sim-svg .ipt { fill: var(--s-blue); stroke: var(--s-card); stroke-width: 2; }
.sim-svg .bisect { stroke: var(--s-orange); stroke-width: 2.8; }
.sim-svg .tickm { stroke: var(--s-ink); stroke-width: 2; }
.sim-svg .dist { stroke: var(--s-green); stroke-width: 2; stroke-dasharray: 6 4; }
.sim-svg .compass line { stroke: var(--s-muted); stroke-width: 3; stroke-linecap: round; }
.sim-svg .compass circle { fill: var(--s-muted); } .sim-svg .compass .pencil { fill: var(--s-orange); }
.sim-read .stepbar { display: flex; gap: 6px; margin-bottom: 3px; }
.sim-read .stepbar i { font-style: normal; font-weight: 800; color: var(--s-muted); font-size: 17px; }
.sim-read .stepbar i.on { color: var(--s-orange); }