p { line-height:1.45; }
  .blocks p { margin:0 0 10px; }
  .lead { font-weight:bold; }
  .mcol { color:#8e44ad; font-weight:bold; }
  .bcol { color:#d66e14; font-weight:bold; }
  .stage { background:#f4f9ff; border:1px solid #c9d6e4; border-radius:8px; touch-action:none; display:block; margin:0 auto; width:min(100%, calc((100dvh - 280px) * 1)); height:auto; user-select:none; -webkit-user-select:none; }
  #exSvg { width:min(100%, calc((100dvh - 280px) * 0.7)); }
  #bgSvg { width:min(100%, calc((100dvh - 280px) * 0.7)); }
  #eyGraph { width:min(100%, calc((100dvh - 280px) * 0.7)); height:auto; }
  .stage.small { width:min(100%, 560px); }
  .readout { background:#eef4ff; border-left:5px solid #2255cc; padding:12px 14px; margin-top:12px; border-radius:0 8px 8px 0; }
  .readout p { margin:0 0 8px; }
  .readout p:last-child { margin-bottom:0; }
  .ok { background:#e8f6ec; border-left:5px solid #1f7a36; padding:12px 14px; margin-top:12px; border-radius:0 8px 8px 0; }
  .warn { background:#fdf3e0; border-left:5px solid #d9930d; padding:12px 14px; margin-top:12px; border-radius:0 8px 8px 0; }
  .hidden { display:none !important; }
  .choice { display:block; width:100%; text-align:left; margin:8px 0; padding:12px 14px; background:#f7f7f7; }
  .choice:hover { background:#ffe98a; }
  .choice.picked-wrong { background:#f5c86e; border-color:#b97e10; }
  .choice.shown-correct { background:#bfe8c8 !important; border:2px solid #1f7a36; font-weight:bold; }
  .choice.earned-correct { background:#bfe8c8; border-color:#1f7a36; }
  .ctl-line { margin:8px 0; font-size:15px; }
  .dot { display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:-2px; margin-right:6px; border:2px solid #fff; box-shadow:0 0 0 1px #666; }
  .dot.orange { background:#e67e22; } .dot.purple { background:#8e44ad; }
  /* Stacked fraction: sign in its own slot, centered on the bar */
  .frac-wrap { display:inline-flex; align-items:center; vertical-align:middle; margin:0 2px; }
  .frac-sign { display:inline-block; font-weight:bold; margin-right:5px; line-height:1; }
  .frac { display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; line-height:1.05; }
  .frac .num { padding:0 5px; }
  .frac .den { padding:0 5px; border-top:2px solid currentColor; }
  table.tbl { border-collapse:collapse; margin-top:8px; }
  table.tbl th, table.tbl td { border:1px solid #9db8d6; padding:6px 16px; text-align:center; font-size:16px; }
  table.tbl th { background:#eef4ff; }
  .cols { display:grid; grid-template-columns:1fr 1fr; gap:8px 34px; }
  @media (max-width:760px){ .cols { grid-template-columns:1fr; } }
  .check-item { font-size:17px; margin:6px 0; }
  .check-item .mark { font-weight:bold; }
  .met { color:#1f7a36; } .unmet { color:#8a5a00; }
  .qstrip { margin:6px 0 10px; }
  .qstrip button { margin-right:6px; padding:6px 11px; }
  .qstrip button.on { background:#ffd94d; font-weight:bold; }
  .qgraph { display:block; margin:8px auto; background:#f4f9ff; border:1px solid #c9d6e4; border-radius:8px; height:min(300px, calc(100dvh - 470px)); width:auto; max-width:100%; }
  .score { font-weight:bold; margin-top:10px; }
  .bottom-note { text-align:center; font-size:14px; color:#333; margin-top:10px; }
  .handle { cursor:grab; }
  .frac-entry { display:inline-flex; align-items:center; vertical-align:middle; gap:8px; }
  .frac-stack { display:inline-flex; flex-direction:column; align-items:center; }
  .frac-stack input { width:70px; font:19px Arial, sans-serif; text-align:center; padding:6px 4px; border:1.5px solid #888; border-radius:6px; }
  .frac-stack .bar { width:82px; border-top:3px solid #111; margin:5px 0; }
  .sign-toggle { font-size:20px; font-weight:bold; padding:6px 13px; }
  .sign-toggle.on { background:#ffd94d; }
  .int-entry { width:80px; font:19px Arial, sans-serif; text-align:center; padding:6px 4px; border:1.5px solid #888; border-radius:6px; }
  .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:14px; }
  .modal-box { background:#fff; border-radius:12px; max-width:602px; width:100%; max-height:94dvh; overflow:auto; padding:20px 22px; box-shadow:0 6px 30px rgba(0,0,0,.35); }
  .modal-box h2 { margin-top:0; }
  .calc-stage { background:#f4f9ff; border:1px solid #c9d6e4; border-radius:8px; display:block; margin:10px auto; width:min(100%, 336px); height:auto; }
.ventry { margin:6px 0 12px; }
.ventry .kind-row { margin:0 0 8px; font-size:15.5px; }
.ventry .kind-btn { margin:0 5px 4px 0; padding:7px 12px; }
.ventry .kind-btn.on { background:#ffd94d; font-weight:bold; }
.ventry .ventry-main { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ventry .sign-slot { width:48px; height:52px; font-size:27px; font-weight:bold; border:1.5px solid #888; border-radius:6px; background:#fff; color:#aaa; padding:0; }
.ventry .sign-slot.neg { color:#111; }
.ventry .frac-stack { display:inline-flex; flex-direction:column; align-items:center; }
.ventry .frac-stack input, .ventry .int-input { width:74px; font:19px Arial, sans-serif; text-align:center; padding:6px 4px; border:1.5px solid #888; border-radius:6px; }
.ventry .int-input { width:96px; }
.ventry .frac-stack .bar { width:86px; border-top:3px solid #111; margin:5px 0; }
.ventry .undef-word { font-size:21px; font-weight:bold; padding:10px 4px; }
.ventry .ventry-preview { font-size:20px; margin-left:6px; }
.ventry .ventry-cap { font-size:13.5px; color:#555; margin-top:5px; }

.entry-cols { display:grid; grid-template-columns:1fr 1fr; gap:6px 34px; align-items:start; }
.entry-cols > div { min-width:0; }
@media (max-width:680px) { .entry-cols { grid-template-columns:1fr; } }

  /* ===== Algebra activity additions (formerly STYLE_EXTRA) ===== */
  .prob-head { font-size:20px; }
  .step-head { font-size:18px; font-weight:700; margin:14px 0 8px; }
  .blocks button.on { background:#ffd94d; font-weight:bold; }
  .check-btn { background:#2255cc; color:#fff; font-weight:700; border:2px solid #1a44a3; padding:10px 22px; font-size:16px; border-radius:8px; }
  .check-btn:hover { background:#1a44a3; }
  .exsvg { width:min(100%, calc((100dvh - 280px) * 0.7)); }
  .endbox { margin-top:14px; }
  #sections .panel > div > .blocks + .blocks { border-top:2px solid #dfe7f3; padding-top:20px; margin-top:26px; }
  .meta { color:#333; font-size:15.5px; margin:2px 0 10px; }
  .goal { font-size:17.5px; }

/* Back bar (modeled on the MrJGeometry activity pages): full panel width,
   sits at the bottom of the activity so the way back to the lesson page is
   there after the last question too. */
.backbar { background:#ffffff; border:1px solid #9a9a9a; border-radius:8px; margin:18px 0 10px; padding:9px 14px; box-sizing:border-box; }
.backbar a { color:#1f3a5f; font-weight:bold; font-size:15px; text-decoration:none; }
.backbar a:hover { text-decoration:underline; }