:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #122033;
  background: #f5f7fa;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --navy: #0b2442;
  --navy-2: #163a64;
  --teal: #1f9d91;
  --teal-soft: #dff4f0;
  --ink: #142033;
  --muted: #64748b;
  --line: #dce3ea;
  --panel: #ffffff;
  --warm: #fff8ea;
  --danger: #a23d3d;
  --success: #26745a;
  --shadow: 0 12px 36px rgba(11, 36, 66, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: linear-gradient(180deg,#f8fafc 0,#f3f6f9 100%); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; padding: 10px clamp(16px,4vw,44px);
  background: rgba(255,255,255,.94); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(220,227,234,.9);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.03em; }
.brand-mark { width:34px; height:34px; border-radius:50%; background:var(--navy); display:grid; place-items:center; color:white; font-weight:800; }
.brand-name { font-size:1.2rem; }
.brand-name span { color:var(--teal); }
.version { font-size:.78rem; color:var(--muted); padding:5px 9px; border:1px solid var(--line); border-radius:999px; }
.shell { width:min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 72px; }
.hero { display:grid; grid-template-columns:1.5fr .8fr; gap:24px; align-items:stretch; margin-bottom:24px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.hero-main { padding: clamp(26px,5vw,52px); background:linear-gradient(145deg,#0b2442,#163d68); color:white; overflow:hidden; position:relative; }
.hero-main::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(31,157,145,.22); right:-100px; top:-90px; }
.kicker { text-transform:uppercase; font-size:.76rem; letter-spacing:.14em; font-weight:800; color:#a9efe5; }
h1,h2,h3 { margin-top:0; letter-spacing:-.035em; }
h1 { font-size:clamp(2.25rem,5vw,4.8rem); line-height:.96; margin-bottom:18px; }
h2 { font-size:clamp(1.55rem,3vw,2.35rem); line-height:1.04; }
h3 { font-size:1.12rem; }
p { line-height:1.65; }
.hero-main p { max-width:720px; color:#e6edf5; font-size:1.08rem; }
.hero-side { padding:24px; display:flex; flex-direction:column; justify-content:space-between; }
.progress-wrap { margin:12px 0 8px; }
.progress-track { height:11px; background:#e9eef3; border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; width:0; background:linear-gradient(90deg,var(--teal),#49b7ac); transition:width .35s ease; }
.meta { color:var(--muted); font-size:.9rem; }
.primary-btn, .secondary-btn, .ghost-btn {
  border:0; border-radius:13px; padding:12px 16px; font-weight:750; transition:.2s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.primary-btn { background:var(--teal); color:white; box-shadow:0 8px 24px rgba(31,157,145,.22); }
.primary-btn:hover { transform:translateY(-1px); background:#19877d; }
.secondary-btn { background:var(--navy); color:white; }
.ghost-btn { background:#f1f5f8; color:var(--navy); border:1px solid var(--line); }
button:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.section-card { padding:24px; margin:18px 0; }
.journey { display:grid; gap:10px; }
.journey-item { display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.journey-item.current { border-color:#8fd5cc; box-shadow:0 0 0 3px rgba(31,157,145,.08); }
.journey-item.locked { opacity:.58; background:#f7f9fb; }
.status-dot { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:#eef2f6; color:var(--muted); }
.complete .status-dot { background:var(--teal-soft); color:var(--success); }
.current .status-dot { background:var(--navy); color:white; }

.course-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; align-items:start; }
.course-rail { position:sticky; top:92px; padding:18px; }
.rail-title { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:800; margin-bottom:10px; }
.rail-step { padding:11px 12px; border-radius:11px; margin:4px 0; font-size:.92rem; display:flex; gap:10px; align-items:center; }
.rail-step.active { background:var(--teal-soft); color:#155e57; font-weight:700; }
.rail-step.done { color:var(--success); }
.lesson { padding:clamp(22px,5vw,52px); min-height:650px; }
.lesson-header { margin-bottom:24px; }
.lesson-header .eyebrow { color:var(--teal); font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; }
.lesson-copy { max-width:760px; }
.big-question { font-size:clamp(1.45rem,3vw,2.2rem); line-height:1.2; color:var(--navy); margin:18px 0; }
.callout { border-left:4px solid var(--teal); padding:14px 18px; background:var(--teal-soft); border-radius:0 14px 14px 0; margin:20px 0; }
.callout.warm { border-color:#d39b3c; background:var(--warm); }
.callout strong { color:var(--navy); }
.option-list { display:grid; gap:10px; margin:18px 0; }
.option { border:1px solid var(--line); border-radius:14px; padding:15px 16px; background:white; display:flex; gap:12px; align-items:flex-start; transition:.18s ease; }
.option:hover { border-color:#aac0d5; background:#fbfdff; }
.option input { margin-top:4px; accent-color:var(--teal); }
.feedback { margin:16px 0; padding:16px 18px; border-radius:14px; background:#f7fafc; border:1px solid var(--line); }
.feedback.correct { background:#ebf7f2; border-color:#b8dfcf; }
.feedback.incorrect { background:#fff3ef; border-color:#efc6b7; }
.feedback .label { font-weight:800; margin-bottom:4px; }
.inline-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.mini-card { border:1px solid var(--line); border-radius:16px; padding:16px; background:#fbfcfd; }
.science-box { border:1px solid #b8dfcf; background:linear-gradient(180deg,#f0faf7,#fff); border-radius:18px; padding:20px; margin:22px 0; }
.science-box .science-label { color:var(--success); text-transform:uppercase; font-size:.76rem; font-weight:850; letter-spacing:.1em; }
textarea, .text-input { width:100%; border:1px solid #cdd7e1; border-radius:12px; padding:12px 14px; background:white; color:var(--ink); outline:none; }
textarea:focus, .text-input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,157,145,.12); }
.range-row { display:grid; grid-template-columns:1fr 260px; gap:16px; align-items:center; padding:13px 0; border-bottom:1px solid #edf1f4; }
.scale { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.scale button { border:1px solid var(--line); background:white; border-radius:10px; padding:8px 4px; }
.scale button.selected { background:var(--navy); color:white; border-color:var(--navy); }
.gate-banner { background:linear-gradient(135deg,#eef8f6,#f8fbfd); border:1px solid #b8dfcf; padding:20px; border-radius:18px; margin:18px 0; }
.score-ring { width:112px; height:112px; border-radius:50%; background:conic-gradient(var(--teal) calc(var(--score)*1%), #e7edf2 0); display:grid; place-items:center; margin:0 auto; position:relative; }
.score-ring::after { content:""; width:82px; height:82px; border-radius:50%; background:white; position:absolute; }
.score-ring span { position:relative; z-index:1; font-size:1.35rem; font-weight:850; color:var(--navy); }
.toolkit-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.toolkit-item { border:1px solid var(--line); border-radius:15px; padding:16px; background:#fff; }
.toolkit-item.locked { opacity:.48; filter:grayscale(.5); }
.module-tag { font-size:.72rem; padding:4px 8px; background:#eef2f6; border-radius:999px; color:var(--muted); display:inline-block; }
.footer { color:var(--muted); font-size:.82rem; text-align:center; padding:10px 0 30px; }
.mobile-progress { display:none; }
.toast { position:fixed; right:18px; bottom:18px; max-width:360px; background:var(--navy); color:white; padding:14px 16px; border-radius:14px; box-shadow:var(--shadow); z-index:50; animation:fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px)} to{opacity:1;transform:none} }

@media (max-width: 820px) {
  .hero { grid-template-columns:1fr; }
  .course-layout { grid-template-columns:1fr; }
  .course-rail { display:none; }
  .mobile-progress { display:flex; justify-content:space-between; align-items:center; padding:11px 14px; margin-bottom:10px; border-radius:14px; background:#fff; border:1px solid var(--line); }
  .inline-grid, .toolkit-list { grid-template-columns:1fr; }
  .range-row { grid-template-columns:1fr; }
  .journey-item { grid-template-columns:42px 1fr; }
  .journey-item > :last-child { grid-column:2; justify-self:start; }
  .shell { width:min(100% - 18px,1180px); padding-top:16px; }
  .lesson { padding:22px 18px; }
  .topbar { padding:9px 14px; }
}