@font-face {
  font-family: "Portfolio Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600-latin-v13.woff2") format("woff2");
}

@font-face {
  font-family: "Portfolio IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-v23.woff2") format("woff2");
}

:root {
  color-scheme: light;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  background: #f5f1e8;
  color: #1d2523;
  --brand-bg: #101310;
  --brand-surface: #181D19;
  --brand-line: #364039;
  --brand-text: #F2F0E8;
  --brand-muted: #AAB1A7;
  --brand-clay: #B76F52;
  --brand-clay-dark: #814B3A;
  --brand-clay-light: #D08B6D;
  --brand-moss: #718070;
  --lesson-muted-strong: #5C6762;
  --accent-button: var(--brand-clay);
  --accent-button-hover: var(--brand-clay-light);
  --accent-text: var(--brand-clay-dark);
  --accent-focus: var(--brand-clay);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 0;
  line-height: 1.45;
  overflow-x: hidden;
  overflow-x: clip;
}

.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;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fffdf8;
  color: #172622;
  font-weight: 800;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.portfolio-bar {
  width: min(1420px, calc(100% - 32px));
  margin: 18px auto 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 9px 14px;
  border: 1px solid var(--brand-line);
  background: var(--brand-surface);
  color: var(--brand-muted);
  font-family: "Portfolio IBM Plex Sans", system-ui, sans-serif;
}

.portfolio-bar a { color: var(--brand-text); text-decoration: none; }
.portfolio-brand { min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
.portfolio-brand-picture,
.portfolio-brand-logo { display: block; }
.portfolio-brand-logo { width: 172px; height: auto; }
.portfolio-context {
  color: var(--brand-clay-light);
  font-family: "Portfolio Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}
.portfolio-return { min-height: 44px; display: inline-flex; align-items: center; justify-self: end; font-size: 14px; font-weight: 600; }
.portfolio-return:hover { color: var(--brand-clay-light); }
.portfolio-bar a:focus-visible { outline-color: var(--brand-clay-light); }

.portfolio-footer {
  width: min(1420px, calc(100% - 32px));
  margin: -26px auto 34px;
  padding-top: 22px;
  border-top: 1px solid #d8d1c3;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--lesson-muted-strong);
  font-family: "Portfolio IBM Plex Sans", system-ui, sans-serif;
  font-size: 14px;
}

.portfolio-footer a { color: #172622; font-weight: 800; text-decoration: none; }
.portfolio-footer a:hover { color: var(--brand-clay-dark); }
.resume-prompt { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid #d4c7b3; border-radius: 13px; background: #fff8e9; }
.resume-prompt[hidden] { display: none; }
.resume-prompt strong { display: block; margin-top: 3px; }
.resume-prompt > div:last-child { display: flex; gap: 8px; }

::selection { background: var(--brand-clay-light); color: var(--brand-bg); }
:focus-visible {
  outline: 3px solid var(--accent-focus);
  outline-offset: 3px;
}

.app {
  width: min(1420px, calc(100% - 32px));
  margin: 24px auto 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel {
  background: #fffdf8;
  border: 1px solid #ddd5c6;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 16px 45px rgba(49, 39, 25, 0.07);
}

.side-panel {
  min-width: 0;
}

.technical-inspector {
  margin-top: 24px;
  border-top: 1px solid #ddd5c6;
  padding-top: 18px;
}

.technical-inspector > summary,
.advanced-tools > summary {
  cursor: pointer;
  color: #172622;
  font-weight: 850;
}

.technical-inspector[open] > summary,
.advanced-tools[open] > summary { margin-bottom: 12px; }

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  gap: 24px;
}

.hero-panel { background: #172622; color: #f8f4e9; overflow: hidden; }
.hero-panel .header { align-items: flex-start; margin-bottom: 24px; }
.hero-panel .header p { color: #c5d0c9; max-width: 800px; font-size: 17px; line-height: 1.55; }
.hero-panel .header .audience-line { margin-bottom: 14px; color: #e4e9e6; font-size: 14px; }
.path-choice { display: flex; flex-wrap: wrap; gap: 9px; }
.path-choice button { min-height: 46px; padding-inline: 16px; }
.hero-panel h1 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.045em; line-height: .98; max-width: 900px; margin: 8px 0 14px; }
.eyebrow, .step-kicker { color: var(--accent-text); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero-panel > .header .eyebrow,
.fire-story .step-kicker { color: var(--brand-clay-light); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .7fr); gap: 22px; }
.map-stage { background: #f9f7ef; color: #1d2523; border-radius: 14px; padding: 20px; }
.map-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.auto-training .map-heading { position: sticky; z-index: 4; top: 0; padding: 8px 0; background: #f9f7ef; }
.map-heading h2 { margin: 5px 0 0; font-size: 22px; }
.network-summary { display: inline-block; margin-top: 7px; color: var(--lesson-muted-strong); font-weight: 700; }
.map-actions { display: flex; align-items: center; gap: 14px; }
.map-legend { color: #6b736f; font-size: 12px; white-space: nowrap; }
.map-legend b { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 3px; border-radius: 50%; background: #e6ebe7; color: #243c34; }
.positive-line, .negative-line { display: inline-block; width: 24px; border-top: 4px solid #2da44e; margin: 0 6px 3px 12px; }
.negative-line { border-color: #bf3989; }
.map-input-tray {
  display: flex;
  gap: 8px;
  max-width: 100%;
  margin: 12px 0 9px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.map-input-tray:empty { display: none; }
.map-input-tray button {
  flex: 0 0 min(190px, 34vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 9px;
  min-height: 48px;
  padding: 8px 10px;
  border: 2px solid #c9d3df;
  border-radius: 9px;
  background: #fff;
  color: #26332f;
  text-align: left;
  scroll-snap-align: start;
  box-shadow: none;
}
.map-input-tray button:hover { border-color: #6e8ba0; background: #f3f8fa; color: #172622; box-shadow: none; }
.map-input-tray button[aria-pressed="true"] { border-color: #52745f; background: #eaf4eb; color: #294b34; }
.map-input-tray button[aria-pressed="false"] { border-color: #a8b4be; background: #fff; color: #4f5c57; }
.map-input-tray button strong,
.map-input-tray button span { min-width: 0; overflow-wrap: anywhere; }
.map-input-tray button small { grid-column: 1 / -1; color: inherit; font-size: 10px; }
.map-selection { margin: 8px 0 0; color: #596963; font-size: 12px; line-height: 1.45; }
.map-caption { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.equation-panel { margin-top: 14px; border: 1px solid #d5cbb9; border-radius: 12px; padding: 15px; background: #f2eee5; }
.equation-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.equation-heading strong { font-size: 15px; }
.equation-body { display: grid; gap: 8px; margin-top: 11px; }
.equation-body code { display: block; overflow-x: auto; padding: 10px 12px; border: 1px solid #ded5c5; border-radius: 8px; background: #fffdf8; color: #243c34; font: 700 14px/1.55 Consolas, "Courier New", monospace; white-space: nowrap; }
.equation-body .equation-result { border-color: var(--brand-clay); background: #fff7e8; color: var(--accent-text); }
.plain-math { padding: 13px; border: 1px solid var(--brand-clay); border-radius: 9px; background: #fff7e8; }
.plain-math span { display: block; margin-bottom: 4px; color: var(--accent-text); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.plain-math strong { display: block; color: #3c3128; font-size: 15px; line-height: 1.45; }
.plain-math small { display: block; margin-top: 5px; color: #685c52; font-size: 12px; line-height: 1.45; }
.formal-math { border: 1px solid #d8d0c2; border-radius: 8px; background: #f8f5ee; padding: 9px 11px; }
.formal-math summary { cursor: pointer; color: #55615c; font-size: 12px; font-weight: 800; }
.formal-math[open] summary { margin-bottom: 8px; }
.formal-math code + code { margin-top: 7px; }
.equation-panel > p { margin: 10px 0 0; color: #59645f; font-size: 12px; line-height: 1.5; }
.equation-explanation { margin-top: 12px; padding-top: 12px; border-top: 1px solid #d8d0c2; color: #34443e; }
.equation-explanation > strong { display: block; margin-bottom: 6px; font-size: 13px; }
.equation-explanation p { margin: 5px 0 0; color: #52605b; font-size: 13px; line-height: 1.55; }
.equation-explanation b { color: #243c34; }
.math-contributions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 9px 0; }
.math-contributions span { padding: 7px 8px; border-radius: 7px; background: #fffdf8; color: #52605b; font-size: 11px; line-height: 1.35; }
.math-contributions b { display: block; font-family: Consolas, "Courier New", monospace; }
.math-output-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 7px; }
.math-output-card { border: 1px solid #d8d0c2; border-radius: 8px; padding: 9px 10px; background: #fffdf8; }
.math-output-card span, .math-output-card small { display: block; color: #65706b; font-size: 11px; }
.math-output-card strong { display: block; margin: 3px 0; color: #243c34; font-size: 14px; }
.inspector-note { grid-column: 1 / -1; margin: 0; color: #65706b; font-size: 11px; }
.map-stage { transition: box-shadow .35s ease, transform .35s ease; }
.map-stage.auto-focus { box-shadow: 0 0 0 5px rgba(233,162,59,.38), 0 24px 70px rgba(0,0,0,.28); transform: translateY(-2px); }
.weight-label { fill: #172622; font-family: Consolas, monospace; font-size: 11px; font-weight: 800; paint-order: stroke; stroke: #f9f7ef; stroke-width: 5px; stroke-linejoin: round; }
.auto-train-panel { border: 1px solid #d5cbb9; border-radius: 12px; background: #fffdf8; margin-top: 14px; padding: 16px; }
.auto-train-panel[hidden] { display: none; }
.mobile-auto-summary { display: none; }
.mobile-auto-summary[hidden] { display: none; }
.auto-train-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.auto-train-heading span { display: block; color: var(--accent-text); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.auto-train-heading strong { display: block; margin-top: 3px; font-size: 18px; }
.auto-controls { display: flex; gap: 7px; }
.auto-controls button { padding: 7px 10px; font-size: 12px; }
.auto-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; }
.auto-values > div { border: 1px solid #e3dccf; border-radius: 9px; padding: 10px; background: #f7f3eb; }
.auto-values span, .connection-value span { display: block; color: var(--lesson-muted-strong); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auto-values strong { display: block; margin-top: 4px; font-family: Consolas, monospace; font-size: 18px; }
.auto-connections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.connection-value { position: relative; border: 1px solid #dcd6cb; border-radius: 9px; padding: 9px; overflow: hidden; }
.connection-value strong, .connection-value b { display: block; font-family: Consolas, monospace; margin-top: 3px; }
.connection-value b { color: var(--accent-text); animation: number-change .7s ease both; }
.connection-value.changed { border-color: #e9a23b; background: #fff7e8; }
.auto-train-panel > p { margin: 12px 0 8px; font-size: 13px; line-height: 1.45; color: #525d58; }
.auto-train-panel.training-complete { border: 2px solid #52745f; background: #f0f8f1; box-shadow: 0 0 0 5px rgba(82,116,95,.12); }
.auto-train-panel.training-complete #autoPhase { color: #315c3d; font-size: 13px; }
.auto-train-panel.training-limit { border-color: #c68b40; background: #fff8ea; }
.completion-stat { border: 1px solid #8eaf97; border-radius: 9px; padding: 10px; background: #fff; }
.completion-stat span { display: block; color: #52745f; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.completion-stat strong { display: block; margin-top: 4px; font-family: Consolas, monospace; font-size: 20px; color: #31513c; }
.auto-timeline { height: 5px; background: #e6e0d5; border-radius: 999px; overflow: hidden; }
.auto-timeline i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent-button), #e9a23b); transition: width .45s ease; }
@keyframes number-change { 0% { background: #ffd28e; transform: translateY(4px); } 100% { background: transparent; transform: translateY(0); } }
.fire-story { background: var(--brand-surface); border: 1px solid var(--brand-line); border-radius: 14px; padding: 24px; }
.fire-story h2 { font-size: 30px; margin: 7px 0; }
.fire-story > p { color: #c5d0c9; line-height: 1.5; }
.ingredient-list { display: grid; gap: 9px; margin: 20px 0; }
.ingredient-list div { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px; background: #1b2b27; border-radius: 10px; }
.ingredient-list span { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e9a23b; color: #172622; font-weight: 900; }
.ingredient-list small { color: #9eada6; }
.fire-rule { display: flex; justify-content: space-between; gap: 10px; padding: 13px; border: 1px solid #e9a23b; border-radius: 10px; color: #ffd28e; }
.plain-note { font-size: 13px; }

.lesson-panel { padding: 36px; }
.lesson-heading { max-width: 800px; margin-bottom: 28px; }
.lesson-heading h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.03em; margin: 7px 0 10px; }
.lesson-heading p { font-size: 16px; line-height: 1.55; }
.walkthrough { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.walkthrough-step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; border: 1px solid #ddd5c6; background: #faf7f0; border-radius: 14px; padding: 20px; }
.walkthrough-step, .step-number { transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.walkthrough-step.active-step { border-color: var(--accent-button); background: #fffaf1; box-shadow: 0 0 0 3px rgb(183 111 82 / .14); }
.walkthrough-step.active-step .step-number { background: var(--accent-button); color: var(--brand-bg); transform: scale(1.06); }
.walkthrough-step.completed-step .step-number { background: #52745f; }
.walkthrough-step h3 { font-size: 20px; margin-bottom: 7px; }
.walkthrough-step p { line-height: 1.5; }
.step-number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #172622; color: #fff; font-size: 18px; font-weight: 800; }
.scenario-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-button.selected { background: var(--accent-button); box-shadow: 0 0 0 3px rgb(183 111 82 / .2); }
.compact-prediction { margin-bottom: 0; }
.compact-prediction strong { font-size: 40px; }
.advanced-targets { margin-top: 12px; }
.text-button { width: 100%; margin-top: 8px; }
.lesson-coach { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; border-radius: 12px; background: #172622; color: #fff; padding: 15px 18px; margin-bottom: 18px; }
.lesson-coach span { color: #e9a23b; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.lesson-coach strong { font-size: 15px; }
.lesson-coach small { color: #aebdb6; text-align: right; }
.reward-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: -8px 0 18px; }
body:not([data-lesson-level="1"]) .reward-progress { display: none; }
.reward-progress > div { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; border: 1px solid #ddd5c6; border-radius: 10px; padding: 10px; background: #f1ede4; color: var(--lesson-muted-strong); transition: .25s ease; }
.reward-progress span { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #d9d4ca; }
.reward-progress strong { font-size: 13px; }
.reward-progress small { font-size: 11px; }
.reward-progress > div.earned { background: #eef6ee; border-color: #8eaf97; color: #31513c; transform: translateY(-2px); }
.reward-progress > div.earned span { background: #52745f; color: #fff; }
.reward-progress .mastery-badge { background: #172622; border-color: #172622; color: #ffd28e; }
.reward-progress .mastery-badge span { background: #e9a23b; color: #172622; }
.lesson-roadmap { margin: 0 0 18px; overflow: hidden; }
.lesson-roadmap ol {
  display: grid;
  grid-template-columns: repeat(9, minmax(92px, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lesson-roadmap li {
  min-width: 0;
  min-height: 72px;
  padding: 9px 10px;
  border: 1px solid #ddd5c6;
  border-radius: 10px;
  background: #f4f0e7;
  color: var(--lesson-muted-strong);
}
.lesson-roadmap li > span:first-child,
.lesson-roadmap .roadmap-number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #d9d4ca;
  color: #4e5854;
  font-size: 11px;
  font-weight: 900;
}
.lesson-roadmap li strong,
.lesson-roadmap li b { display: block; color: inherit; font-size: 11px; line-height: 1.25; }
.lesson-roadmap li small { display: block; margin-top: 3px; color: inherit; font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; }
.lesson-roadmap li.current,
.lesson-roadmap li[aria-current="step"],
.lesson-roadmap li[data-status="current"] {
  border-color: var(--accent-button);
  background: #fff7e8;
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent-button);
}
.lesson-roadmap li.current > span:first-child,
.lesson-roadmap li[aria-current="step"] > span:first-child,
.lesson-roadmap li[data-status="current"] > span:first-child { background: var(--accent-button); color: var(--brand-bg); }
.lesson-roadmap li.complete,
.lesson-roadmap li.completed,
.lesson-roadmap li[data-status="complete"],
.lesson-roadmap li[data-status="completed"] { border-color: #8eaf97; background: #eef6ee; color: #31513c; }
.lesson-roadmap li.complete > span:first-child,
.lesson-roadmap li.completed > span:first-child,
.lesson-roadmap li[data-status="complete"] > span:first-child,
.lesson-roadmap li[data-status="completed"] > span:first-child { background: #52745f; color: #fff; }
.lesson-roadmap li.locked,
.lesson-roadmap li[data-status="locked"] { opacity: 1; }

.completed-results {
  margin: -2px 0 18px;
  padding: 0 15px;
  border: 1px solid #c8d8e3;
  border-radius: 12px;
  background: #f6fafc;
}
.completed-results[hidden] { display: none; }
.completed-results > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: #294c62;
  cursor: pointer;
  font-weight: 850;
  list-style: none;
}
.completed-results > summary::-webkit-details-marker,
.manual-input-editor > summary::-webkit-details-marker { display: none; }
.completed-results > summary::after,
.manual-input-editor > summary::after { content: "+"; margin-left: auto; padding-left: 12px; color: var(--accent-text); font-size: 20px; line-height: 1; }
.completed-results[open] > summary::after,
.manual-input-editor[open] > summary::after { content: "−"; }
.completed-results[open] { padding-bottom: 15px; }
.completed-results[open] > summary { border-bottom: 1px solid #d8e4eb; margin-bottom: 12px; }
#completedResultsBody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#completedResultsBody > article,
#completedResultsBody > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #d8e4eb;
  border-radius: 9px;
  background: #fff;
}
#completedResultsBody strong { color: #172622; }
#completedResultsBody article > span { display: block; margin-top: 5px; color: #596963; font-size: 13px; line-height: 1.45; }
#completedResultsBody p,
#completedResultsBody small { color: #596963; line-height: 1.45; }
.level-two-panel { border: 2px solid #7059a8; border-radius: 15px; background: linear-gradient(135deg, #f7f3ff, #fffdf8); padding: 22px; margin-bottom: 18px; box-shadow: 0 12px 34px rgba(83,60,130,.12); }
.level-two-panel[hidden], .complex-scenarios[hidden] { display: none; }
.level-two-intro h3 { font-size: 26px; margin: 6px 0 8px; }
.level-two-intro p { max-width: 850px; line-height: 1.5; }
.upgrade-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.upgrade-steps button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; text-align: left; gap: 2px 9px; background: #59418f; }
.upgrade-steps button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); }
.upgrade-steps button small { color: #ddd2f7; font-weight: 500; }
.upgrade-steps button.upgrade-done { background: #52745f; opacity: 1; }
.upgrade-steps button.upgrade-done > span::after { content: "✓"; }
.upgrade-steps button.upgrade-done > span { font-size: 0; }
.complex-scenarios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid #d9cee9; margin-top: 18px; padding-top: 16px; }
.complex-scenarios > strong { width: 100%; color: #4e3a76; }
.complex-scenarios button { background: #7059a8; }
.level-three-panel { border: 2px solid #2f7481; border-radius: 15px; background: linear-gradient(135deg, #eefafb, #fffdf8); padding: 22px; margin-bottom: 18px; box-shadow: 0 12px 34px rgba(47,116,129,.12); }
.level-three-panel[hidden] { display: none; }
.level-three-intro h3 { margin: 6px 0 8px; font-size: 26px; }
.level-three-intro p { max-width: 850px; line-height: 1.55; }
.level-three-upgrades button { background: #2f7481; }
.level-three-upgrades button.upgrade-done { background: #52745f; }
.level-three-scenarios { border-top-color: #b8d9dc; }
.level-three-scenarios > strong { color: #245e68; }
.level-three-scenarios button { background: #2f7481; }
.generalization-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0 12px; }
.generalization-actions button:first-child { background: #2f7481; }
.level-three-result { border: 1px solid #b8d9dc; border-radius: 11px; padding: 15px; background: #fff; }
.level-three-result span { display: block; color: #2f7481; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.level-three-result strong { display: block; margin-top: 4px; font-size: 17px; }
.level-three-result p { margin: 6px 0 0; font-size: 13px; }
.level-three-result.passed { border-color: #75a27f; background: #eff8f0; }
.level-three-result.needs-practice { border-color: #dda052; background: #fff8ea; }
.level-extension-panel { border: 2px solid #55728b; border-radius: 15px; background: linear-gradient(135deg, #f1f7fb, #fffdf8); padding: 22px; margin-bottom: 18px; box-shadow: 0 12px 34px rgba(42,75,102,.1); }
.level-extension-panel[hidden] { display: none; }
.level-extension-panel h3 { margin: 6px 0 8px; font-size: 25px; }
.level-extension-panel > p { max-width: 900px; line-height: 1.55; }
.extension-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 15px 0 4px; }
.extension-actions button { background: #426981; }
.evaluation-result { margin-top: 12px; border: 1px solid #c8d8e3; border-radius: 10px; padding: 14px; background: #fff; font-weight: 700; }
.threshold-panel label { max-width: 620px; margin: 14px 0; }
.threshold-panel label strong { color: var(--accent-text); font-size: 20px; }
.confusion-matrix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.confusion-matrix div { padding: 12px; border: 1px solid #c8d8e3; border-radius: 9px; background: #fff; }
.confusion-matrix span { display: block; color: #66736e; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.confusion-matrix strong { display: block; margin-top: 4px; font-size: 23px; }
.wildfire-dashboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.wildfire-dashboard > div { padding: 14px; border-radius: 10px; background: #172622; color: #fff; }
.wildfire-dashboard span { display: block; color: #aebdb6; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.wildfire-dashboard strong { display: block; margin-top: 5px; color: #ffd28e; font-size: 22px; }
.wildfire-dashboard p { grid-column: 1 / -1; }
.simulation-note { margin-top: 13px; font-size: 12px; color: var(--lesson-muted-strong); }
.reward-toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: grid; grid-template-columns: 52px minmax(0, 300px); gap: 14px; align-items: center; background: #172622; color: #fff; border: 1px solid #52745f; border-radius: 16px; padding: 17px 20px; box-shadow: 0 20px 60px rgba(23,38,34,.35); opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none; transition: .3s ease; }
.reward-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.reward-toast.milestone { border-color: #e9a23b; background: linear-gradient(135deg, #172622, #344e3e); }
.reward-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #e9a23b; color: #172622; font-size: 27px; animation: reward-pop .55s ease both; }
.reward-toast span { color: #e9a23b; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.reward-toast strong { display: block; margin: 3px 0; font-size: 19px; }
.reward-toast p { margin: 0; color: #c5d0c9; font-size: 13px; line-height: 1.4; }
.celebrating .mastery-badge { animation: mastery-glow 1s ease 2; }
.auto-training .lesson-panel,
.auto-training .workspace-grid,
.auto-training .fire-story,
.auto-training .level-two-panel { opacity: .62; filter: saturate(.75); transition: opacity .25s ease, filter .25s ease; }
.auto-training .map-stage { opacity: 1; filter: none; }
body:not([data-lesson-level="1"]) [data-lesson-step="scenario"] .scenario-buttons { display: none; }
body:is([data-lesson-level="7"], [data-lesson-level="8"], [data-lesson-level="9"]) .walkthrough { display: none; }
@keyframes reward-pop { 0% { transform: scale(.5) rotate(-25deg); } 70% { transform: scale(1.14) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes mastery-glow { 50% { box-shadow: 0 0 0 5px rgba(233,162,59,.25); transform: translateY(-3px); } }
.guided-target { display: flex; justify-content: space-between; align-items: center; border: 1px dashed #c7bba8; border-radius: 10px; padding: 13px 15px; margin: 12px 0; color: #66706b; }
.guided-target strong { font-size: 20px; color: #1d2523; }
.guided-target.ready { border-style: solid; border-color: var(--accent-button); background: #fff7e8; }
#guidedTrainButton { width: 100%; font-size: 16px; padding: 13px; }
button:disabled { cursor: not-allowed; opacity: .42; }
button:disabled:hover { transform: none; box-shadow: none; }
.manual-targets { margin-top: 12px; border-top: 1px solid #ddd5c6; padding-top: 10px; }
.manual-targets summary { cursor: pointer; color: #68716e; font-size: 13px; font-weight: 700; }
.training-result { display: grid; grid-template-columns: auto 1fr auto auto 1fr; align-items: baseline; gap: 7px; background: #172622; color: #fff; border-radius: 12px; padding: 14px; margin: 12px 0; }
.training-result span { color: #aebdb6; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.training-result strong { color: #ffd28e; font-size: 22px; }
.training-result .result-arrow { color: #e9a23b; font-size: 19px; }
.training-result small { grid-column: 1 / -1; color: #c5d0c9; line-height: 1.4; }
.training-result.empty-result { background: #e9e5db; color: var(--lesson-muted-strong); }
.training-result.empty-result span,
.training-result.empty-result strong,
.training-result.empty-result small { color: var(--lesson-muted-strong); }
.next-scenario-button { width: 100%; margin-top: 12px; background: #52745f; }
.next-scenario-button:hover { background: #3e5c49; }
.advanced-tools { margin-top: 24px; border: 1px solid #ddd5c6; border-radius: 12px; padding: 15px; }
.advanced-tools > summary { cursor: pointer; font-weight: 800; }
.advanced-tools[open] { background: #fbf8f1; }
.advanced-tools summary:hover, .guide summary:hover, .manual-targets summary:hover { color: var(--accent-text); }
.architecture-title { margin-top: 18px; }
.manual-input-editor {
  margin-top: 12px;
  padding: 0 14px;
  border: 1px solid #ddd5c6;
  border-radius: 11px;
  background: #fbf8f1;
}
.manual-input-editor > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: #34443e;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.manual-input-editor[open] { padding-bottom: 15px; }
.manual-input-editor[open] > summary { margin-bottom: 12px; border-bottom: 1px solid #ddd5c6; }
.manual-input-editor .hint:first-of-type { margin-top: 0; }

.header,
.section-title,
.button-row,
.layer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header,
.section-title {
  justify-content: space-between;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  font-size: 28px;
  margin-bottom: 6px;
}

h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

h3 {
  font-size: 15px;
  margin-bottom: 10px;
}

h4 {
  font-size: 15px;
  margin-bottom: 10px;
}

p {
  color: #607089;
}

.hint {
  color: #607089;
  font-size: 14px;
  line-height: 1.45;
  margin: -4px 0 12px;
}

.formula {
  background: #eef3f9;
  border: 1px solid #d8e2ee;
  border-radius: 6px;
  color: #31415a;
  font-family: Consolas, "Courier New", monospace;
  margin: 18px 0;
  padding: 12px;
  overflow-x: auto;
}

.learn-card,
.live-explanation {
  background: #f8fafc;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  color: #31415a;
  line-height: 1.5;
  margin-bottom: 18px;
  padding: 14px;
}

.learn-card p,
.live-explanation p {
  margin: 6px 0 0;
}

.live-explanation {
  border-left: 4px solid #1f6feb;
}

.live-explanation h4 {
  margin-bottom: 8px;
}

.step-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.step-list code {
  background: #eef3f9;
  border-radius: 4px;
  color: #25364f;
  padding: 1px 4px;
}

label {
  display: grid;
  gap: 7px;
  color: #44536a;
  font-size: 14px;
}

input {
  width: 100%;
  border: 1px solid #c9d3df;
  border-radius: 6px;
  font: inherit;
  font-size: 16px;
  padding: 9px 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus, select:focus { border-color: var(--accent-button); box-shadow: 0 0 0 3px rgb(183 111 82 / .16); outline: none; }

select {
  width: 100%;
  border: 1px solid #c9d3df;
  border-radius: 6px;
  background: #ffffff;
  font: inherit;
  font-size: 16px;
  padding: 9px 10px;
}

button {
  border: 0;
  border-radius: 6px;
  min-height: 44px;
  background: var(--accent-button);
  color: var(--brand-bg);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 10px 12px;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

button:hover {
  background: var(--accent-button-hover);
  color: var(--brand-bg);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgb(129 75 58 / .16);
}

button:active { transform: translateY(0); box-shadow: none; }

button.secondary,
#resetButton,
#removeInputButton {
  background: #6b778c;
  color: #fff;
}

button.secondary:hover,
#resetButton:hover,
#removeInputButton:hover {
  background: #566176;
  color: #fff;
}

.upgrade-steps button,
.complex-scenarios button,
.generalization-actions button:first-child,
.extension-actions button,
.next-scenario-button {
  color: #fff;
}

.upgrade-steps button:hover,
.complex-scenarios button:hover,
.generalization-actions button:first-child:hover,
.extension-actions button:hover,
.next-scenario-button:hover {
  color: #fff;
}

.upgrade-steps button:hover { background: #493477; }
.complex-scenarios button:hover { background: #5c468f; }
.level-three-upgrades button:hover,
.level-three-scenarios button:hover,
.generalization-actions button:first-child:hover { background: #245e68; }
.extension-actions button:hover { background: #35566a; }

.inputs,
.mode-grid,
.targets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.inputs.grid-mode {
  grid-template-columns: repeat(var(--grid-cols), minmax(58px, 1fr));
}

.input-card,
.target-card {
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.input-card label + label,
.target-card label + label {
  margin-top: 10px;
}

.controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  margin-top: 16px;
}

.prediction {
  border-left: 4px solid #1f6feb;
  margin: 22px 0;
  padding-left: 14px;
}

.prediction span,
.prediction small {
  display: block;
  color: #607089;
}

.prediction strong {
  display: block;
  font-size: 46px;
  line-height: 1.1;
  margin: 4px 0;
}

.quick-targets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.quick-targets button {
  background: #2da44e;
}

.quick-targets button:hover {
  background: #23853f;
  color: #fff;
}

.layers {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.layer-card,
.weight-layer {
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  padding: 12px;
}

.layer-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.layer-card strong {
  display: block;
}

.layer-card span {
  color: #607089;
  font-size: 13px;
}

.diagram-wrap {
  border: 1px solid #dce2ea;
  border-radius: 8px;
  min-height: 430px;
  overflow: auto;
  background: #fbfcfe;
  box-shadow: inset 0 0 35px rgba(23,38,34,.035);
}

#diagram {
  display: block;
  min-width: 680px;
  width: 100%;
  height: 430px;
}

.node {
  fill: #ffffff;
  stroke: #1f6feb;
  stroke-width: 2;
}
.node, .connection { transition: fill .25s ease, stroke .25s ease, stroke-width .25s ease, opacity .25s ease; }
.input-node-group { cursor: pointer; outline: none; }
.input-node-group .node { transition: fill .18s ease, stroke-width .18s ease, filter .18s ease; }
.input-node-group:hover .node, .input-node-group:focus .node { fill: #fff7e8; stroke-width: 4; filter: drop-shadow(0 3px 5px rgba(31,111,235,.2)); }
.input-node-group:focus-visible .node { stroke: var(--accent-button-hover); stroke-width: 5; filter: drop-shadow(0 0 4px rgb(183 111 82 / .3)); }
.auto-training .input-node-group { cursor: not-allowed; }

.node.output {
  stroke: #2da44e;
}

.node-label {
  fill: #172033;
  font-size: 12px;
  text-anchor: middle;
  dominant-baseline: middle;
}
.input-node-group .node-label { pointer-events: none; }
.node-status { fill: #61706a; font-size: 10px; text-anchor: middle; pointer-events: none; }
.map-just-trained .connection { animation: connection-learn .7s ease both; }
@keyframes connection-learn { 35% { opacity: 1; filter: drop-shadow(0 0 4px currentColor); } }

.connection {
  fill: none;
  opacity: 0.65;
}

.weights-editor {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.guide {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}

.guide details {
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  padding: 10px 12px;
}

.guide summary,
.cnn-options summary {
  color: #172033;
  cursor: pointer;
  font-weight: 700;
}

.guide p {
  font-size: 14px;
  line-height: 1.45;
  margin: 8px 0 0;
}

.cnn-options {
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 12px;
}

.cnn-options .mode-grid {
  margin-top: 12px;
}

.weight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.weight-grid label {
  min-width: 0;
}

.log {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}

.log-entry {
  background: #f8fafc;
  border: 1px solid #e1e7ef;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px;
}

@media (max-width: 960px) {
  .app,
  .hero-grid,
  .workspace-grid,
  .walkthrough,
  .inputs,
  .mode-grid,
  .targets,
  .quick-targets,
  .controls {
    grid-template-columns: 1fr;
  }

  .header,
  .section-title,
  .layer-card {
    align-items: stretch;
    flex-direction: column;
  }

  .button-row,
  .layer-actions {
    flex-wrap: wrap;
  }

  .map-heading { align-items: flex-start; flex-direction: column; }
  .map-actions { align-items: flex-start; flex-direction: column; }
  .map-legend { white-space: normal; }
  .auto-values, .auto-connections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-coach { grid-template-columns: 1fr; }
  .lesson-coach small { text-align: left; }
  .reward-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-roadmap { margin-inline: -2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .lesson-roadmap ol { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(118px, 145px); width: max-content; min-width: 100%; padding: 2px; }
  .upgrade-steps { grid-template-columns: 1fr; }
  .hero-grid > *, .workspace-grid > *, .map-stage, .fire-story, .main-panel, .side-panel { min-width: 0; width: 100%; }
}

@media (max-width: 680px) {
  .portfolio-bar {
    width: min(100% - 20px, 1420px);
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 10px;
  }

  .portfolio-context { display: none; }
  .portfolio-brand { width: 44px; }
  .portfolio-brand-logo { width: 44px; height: 44px; object-fit: contain; }
  .portfolio-return { max-width: 100%; font-size: 13px; text-align: right; }
}

@media (max-width: 600px) {
  .portfolio-footer { width: min(100% - 20px, 1420px); flex-direction: column; margin-top: -20px; }
  .resume-prompt { align-items: stretch; flex-direction: column; }
  .resume-prompt > div:last-child, .resume-prompt button, .path-choice, .path-choice button { width: 100%; }
  .resume-prompt > div:last-child { flex-direction: column; }
  .app { width: min(100% - 20px, 1420px); margin-top: 10px; }
  .panel, .lesson-panel { padding: 18px; border-radius: 13px; }
  .walkthrough-step { grid-template-columns: 1fr; }
  .hero-panel h1 { font-size: 34px; }
  .hero-panel .header p { font-size: 15px; }
  .hero-panel .header #resetButton { width: 100%; }
  .reward-progress { grid-template-columns: 1fr; }
  .reward-toast { left: 10px; right: 10px; bottom: 10px; }
  .auto-train-heading { align-items: flex-start; flex-direction: column; }
  .auto-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-values > div { min-width: 0; padding: 8px; }
  .auto-values strong { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
  .auto-connections {
    display: flex;
    max-width: 100%;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .auto-connections > * { flex: 0 0 min(190px, 70vw); scroll-snap-align: start; }
  .equation-heading { align-items: flex-start; flex-direction: column; }
  .map-stage { padding: 12px; overflow: hidden; }
  .auto-training .map-heading { position: static; }
  .map-heading h2 { font-size: 19px; }
  .map-actions, .map-actions > button, .auto-controls { width: 100%; }
  .auto-controls > button { flex: 1; }
  .mobile-auto-summary:not([hidden]) {
    position: sticky;
    z-index: 6;
    top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin: 10px 0;
    padding: 9px 11px;
    border: 1px solid #8eaf97;
    border-radius: 10px;
    background: rgba(240,248,241,.97);
    color: #294b34;
    box-shadow: 0 8px 22px rgba(23,38,34,.15);
    backdrop-filter: blur(8px);
  }
  .mobile-auto-summary span { color: #42634d; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .mobile-auto-summary strong { font-size: 13px; text-align: right; }
  .map-input-tray { margin-block: 10px 8px; }
  .map-input-tray button { flex-basis: min(220px, 72vw); min-height: 52px; }
  .diagram-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 300px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
  }
  #diagram { width: 680px; min-width: 680px; max-width: none; }
  .input-node-group .node { stroke-width: 3; }
  .equation-panel, .auto-train-panel { padding: 12px; }
  .equation-body { min-width: 0; }
  .equation-body code { max-width: 100%; font-size: 12px; }
  .math-contributions { grid-template-columns: 1fr; }
  .fire-story { padding: 18px; }
  .scenario-buttons { display: grid; grid-template-columns: 1fr; }
  .scenario-buttons button, .complex-scenarios button { width: 100%; }
  .walkthrough-step { min-width: 0; padding: 16px; }
  .walkthrough-step > div { min-width: 0; }
  .guided-target { align-items: flex-start; flex-direction: column; gap: 4px; }
  .training-result { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 11px; }
  .training-result strong { min-width: 0; font-size: 18px; overflow-wrap: anywhere; }
  .training-result .result-arrow { grid-column: 1 / -1; text-align: center; line-height: .8; }
  .level-two-panel { padding: 16px; }
  .level-three-panel { padding: 16px; }
  .level-extension-panel { padding: 16px; }
  .extension-actions, .extension-actions button { width: 100%; }
  .confusion-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wildfire-dashboard { grid-template-columns: 1fr; }
  .generalization-actions, .generalization-actions button { width: 100%; }
  .advanced-tools { padding: 12px; }
  .lesson-roadmap ol { grid-auto-columns: minmax(124px, 40vw); }
  #completedResultsBody { grid-template-columns: 1fr; }
  .completed-results { padding-inline: 12px; }
  .manual-input-editor { padding-inline: 12px; }
  .manual-input-editor > summary { min-height: 52px; }
  input:not([type="range"]), select { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}