:root {
  --unit-purple: #6543a5;
  --unit-purple-dark: #40256f;
  --unit-purple-soft: #f1ebff;
  --unit-orange: #e77924;
  --unit-yellow: #fff4bf;
  --unit-red: #b42318;
  --unit-red-soft: #fff0ee;
}

.unit-band { background: linear-gradient(120deg, var(--unit-purple-dark), var(--unit-purple)); }
.unit-band .page-kicker { color: #ddd0ff; }
.activity-shell { width: min(1050px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 64px; }
.activity-nav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:18px; }
.activity-nav a { padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--blue-900); text-decoration:none; font-size:12px; font-weight:800; }
.activity-nav a:hover,.activity-nav a:focus-visible { border-color:#9a85c5; box-shadow:0 0 0 3px var(--unit-purple-soft); }
.activity-head { margin-bottom:20px; padding:24px; border-radius:10px; color:#fff; background:linear-gradient(120deg,var(--unit-purple-dark),var(--unit-purple)); }
.activity-head .eyebrow { margin:0 0 7px; color:#ddd0ff; font-size:12px; font-weight:800; text-transform:uppercase; }
.activity-head h1 { margin:0; font-size:clamp(28px,5vw,44px); line-height:1.08; }
.activity-head p { max-width:720px; margin:10px 0 0; color:#eee8ff; }
.learning-goals { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.learning-goals span { padding:5px 8px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(255,255,255,.09); font-size:11px; font-weight:700; }
.panel { margin-top:16px; padding:20px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:0 5px 18px rgba(27,63,111,.05); }
.panel h2,.panel h3 { margin-top:0; color:var(--blue-950); }
.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.panel-title h2 { margin:0; font-size:21px; }
.panel-title p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.step-number { display:grid; min-width:32px; height:32px; place-items:center; border-radius:50%; color:#fff; background:var(--unit-purple); font-weight:900; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.choice-card { width:100%; padding:14px; border:2px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; text-align:left; font:inherit; cursor:pointer; }
.choice-card:hover,.choice-card:focus-visible { border-color:#9a85c5; background:#fbf9ff; }
.choice-card.selected { border-color:var(--unit-purple); background:var(--unit-purple-soft); }
.choice-card.correct { border-color:var(--green); background:var(--green-soft); }
.choice-card.wrong { border-color:var(--unit-red); background:var(--unit-red-soft); }
.choice-card strong { display:block; color:var(--blue-950); }
.choice-card small { display:block; margin-top:4px; color:var(--muted); }
.controls { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.action { min-height:40px; padding:8px 14px; border:0; border-radius:6px; color:#fff; background:var(--unit-purple); font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.action:hover,.action:focus-visible { background:var(--unit-purple-dark); box-shadow:0 0 0 3px #ded4f4; }
.action.secondary { border:1px solid #9a85c5; color:var(--unit-purple-dark); background:#fff; }
.action.danger { background:var(--unit-red); }
.action:disabled { opacity:.48; cursor:not-allowed; }
.feedback { min-height:44px; margin-top:14px; padding:11px 13px; border-left:4px solid #8aa0b8; border-radius:4px; color:#46566c; background:#eef3f8; }
.feedback.success { border-color:var(--green); color:#125d3e; background:var(--green-soft); }
.feedback.error { border-color:var(--unit-red); color:#842017; background:var(--unit-red-soft); }
.feedback.warning { border-color:var(--unit-orange); color:#78400f; background:#fff3df; }
.field { display:grid; gap:5px; }
.field label { color:var(--blue-950); font-size:12px; font-weight:800; }
.field select,.field input[type="text"] { width:100%; min-height:42px; padding:8px 10px; border:1px solid #b9c6d5; border-radius:6px; color:var(--ink); background:#fff; font:inherit; }
.field select:focus,.field input:focus { outline:3px solid #ded4f4; border-color:var(--unit-purple); }
.status-pill { display:inline-flex; padding:4px 8px; border-radius:999px; color:#526175; background:#eef2f6; font-size:11px; font-weight:800; }
.status-pill.done { color:var(--green); background:var(--green-soft); }
.progress-track { height:8px; overflow:hidden; border-radius:999px; background:#e5eaf0; }
.progress-track span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--unit-purple),#9575cd); transition:width .25s ease; }
.sequence { display:grid; gap:8px; }
.sequence button { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.sequence button:hover,.sequence button:focus-visible { border-color:#9a85c5; }
.sequence .picked { border-color:var(--unit-purple); background:var(--unit-purple-soft); }
.sequence-index { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; color:#fff; background:#7b8ca1; font-size:12px; font-weight:900; }
.picked .sequence-index { background:var(--unit-purple); }
.symbol-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.hazard-symbol { position:relative; display:grid; min-height:120px; place-items:center; padding:14px; border:1px solid var(--line); border-radius:8px; background:#fff; text-align:center; }
.hazard-diamond { display:grid; width:58px; height:58px; place-items:center; transform:rotate(45deg); border:4px solid #d52b1e; background:#fff; }
.hazard-diamond span { transform:rotate(-45deg); font-size:27px; }
.hazard-symbol strong { display:block; margin-top:10px; font-size:12px; }
.toggle-row { display:flex; flex-wrap:wrap; gap:10px; }
.toggle-control { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:7px; background:#fff; font-weight:700; }
.toggle-control input { width:20px; height:20px; accent-color:var(--unit-purple); }
.sim-stage { position:relative; min-height:280px; overflow:hidden; border:1px solid #cbd7e3; border-radius:10px; background:linear-gradient(#dff2ff 0 68%,#d9d2c2 68%); }
.sim-caption { position:absolute; top:12px; left:12px; padding:5px 8px; border-radius:5px; background:rgba(255,255,255,.9); color:var(--blue-950); font-size:12px; font-weight:800; }
.flame { position:absolute; left:50%; bottom:82px; width:74px; height:118px; transform:translateX(-50%) scale(.15); transform-origin:50% 100%; opacity:0; border-radius:52% 48% 48% 52% / 66% 66% 34% 34%; background:radial-gradient(ellipse at 50% 75%,#fff 0 9%,#ffe55b 10% 30%,#ff8b28 31% 65%,#e63818 66%); filter:drop-shadow(0 0 20px rgba(255,120,20,.7)); transition:.35s ease; }
.flame.on { transform:translateX(-50%) scale(1); opacity:1; }
.flame.blue { width:58px; height:126px; background:radial-gradient(ellipse at 50% 78%,#fff 0 9%,#65d6ff 10% 38%,#1769d1 39% 72%,transparent 73%); filter:drop-shadow(0 0 13px rgba(35,127,255,.55)); }
.burner { position:absolute; left:50%; bottom:24px; width:110px; height:70px; transform:translateX(-50%); }
.burner::before { content:""; position:absolute; left:39px; bottom:18px; width:32px; height:78px; border:3px solid #536576; border-radius:4px 4px 8px 8px; background:linear-gradient(90deg,#aab7c2,#e9eef2,#81909d); }
.burner::after { content:""; position:absolute; left:8px; bottom:0; width:94px; height:24px; border-radius:50%; background:#536576; box-shadow:0 -7px 0 #84929e; }
.apparatus-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.apparatus-card { min-height:145px; padding:13px; border:1px solid var(--line); border-radius:8px; background:#fff; text-align:center; }
.apparatus-icon { display:grid; min-height:70px; place-items:center; color:var(--unit-purple); font-size:44px; line-height:1; }
.apparatus-card strong { display:block; color:var(--blue-950); font-size:13px; }
.apparatus-card p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.chapter-note { margin-top:18px; padding:14px 16px; border:1px solid #efd48b; border-radius:7px; background:#fff9e7; color:#694d16; font-size:13px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (max-width:760px) {
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .symbol-grid,.apparatus-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .activity-shell { width:100%; padding:16px 14px 48px; }
  .activity-head { padding:20px; }
  .panel { padding:16px; }
}
@media (max-width:430px) {
  .symbol-grid,.apparatus-grid { grid-template-columns:1fr; }
  .controls .action { width:100%; }
}