:root {
  --paper: #f6f3ec;
  --paper-deep: #ebe6da;
  --ink: #17211f;
  --muted: #66716c;
  --line: #d8d4c9;
  --white: #fffdf8;
  --blue: #3764d8;
  --blue-soft: #e3e9ff;
  --mint: #b8ead9;
  --mint-deep: #217c69;
  --coral: #f07e63;
  --coral-soft: #ffe0d6;
  --yellow: #f4c65c;
  --yellow-soft: #fff1c7;
  --purple: #7e68d8;
  --shadow: 0 20px 55px rgba(35, 44, 39, 0.08);
  --shadow-small: 0 8px 24px rgba(35, 44, 39, 0.07);
  --radius: 22px;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(55, 100, 216, 0.38); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
code, pre { font-family: var(--mono); }
code { font-size: 0.88em; color: #2c4eb1; }

.site-noise {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.21;
  background-image: radial-gradient(rgba(34, 43, 39, 0.12) 0.55px, transparent 0.55px);
  background-size: 6px 6px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.app-shell { min-height: 100vh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  border-bottom: 1px solid rgba(216, 212, 201, 0.88);
  background: rgba(246, 243, 236, 0.9);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 15px; letter-spacing: 0.11em; }
.brand-copy strong span { color: var(--coral); }
.brand-copy small { color: var(--muted); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }

.brand-mark {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 11px 11px 15px 6px;
  transform: rotate(-8deg);
  background: var(--mint);
  box-shadow: 4px 4px 0 var(--ink);
}
.brand-mark span, .brand-mark i, .brand-mark b { position: absolute; display: block; border-radius: 99px; background: var(--ink); }
.brand-mark span { width: 5px; height: 5px; top: 10px; left: 9px; }
.brand-mark i { width: 5px; height: 5px; top: 10px; left: 19px; }
.brand-mark b { width: 13px; height: 4px; top: 20px; left: 9px; border-radius: 7px; }
.brand-mark.small { width: 27px; height: 27px; border-radius: 9px 9px 12px 5px; box-shadow: 3px 3px 0 var(--ink); }
.brand-mark.small span { width: 4px; height: 4px; top: 8px; left: 7px; }
.brand-mark.small i { width: 4px; height: 4px; top: 8px; left: 15px; }
.brand-mark.small b { width: 10px; height: 3px; top: 16px; left: 7px; }

.topbar-actions { display: flex; align-items: center; gap: 18px; }
.progress-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 12px; background: rgba(255, 253, 248, 0.65); }
.tiny-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(240, 126, 99, 0.16); }
.text-button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 12px; }
.text-button:hover { color: var(--ink); }
.menu-button { display: none; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--white); font-size: 12px; }
.menu-button span { margin-left: 5px; color: var(--coral); }

.page-layout { display: grid; grid-template-columns: 246px minmax(0, 1fr); max-width: 1540px; margin: 0 auto; }
.course-nav { position: sticky; top: 76px; align-self: start; height: calc(100vh - 76px); padding: 37px 19px 28px 30px; border-right: 1px solid var(--line); overflow: auto; }
.nav-intro { padding: 0 10px 22px; }
.nav-intro p { max-width: 175px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.eyebrow { display: inline-block; margin: 0; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; }
.eyebrow.accent { color: var(--coral); }

.nav-list { display: grid; gap: 3px; }
.nav-link { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; min-height: 40px; padding: 6px 9px; border-radius: 12px; color: var(--muted); font-size: 12px; transition: 0.2s ease; }
.nav-link:hover { color: var(--ink); background: rgba(255, 253, 248, 0.82); }
.nav-link.active { color: var(--ink); background: var(--white); box-shadow: var(--shadow-small); }
.nav-link.active::before { position: absolute; left: -3px; width: 3px; height: 18px; border-radius: 4px; background: var(--coral); content: ""; }
.nav-number { color: var(--muted); font: 11px var(--mono); }
.nav-link span:nth-child(2) { font-weight: 700; }
.nav-link em { color: #9aa19a; font-size: 9px; font-style: normal; text-align: right; }
.nav-link.done .nav-number { color: var(--mint-deep); }
.nav-link.done .nav-number::after { content: " ✓"; }

.nav-progress { margin: 42px 10px 0; padding-top: 20px; border-top: 1px solid var(--line); }
.progress-heading { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }
.progress-heading strong { color: var(--ink); font: 12px var(--mono); }
.progress-track { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: var(--paper-deep); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--yellow), var(--mint-deep)); transition: width 0.45s ease; }
.nav-progress p { margin: 11px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.nav-note { display: flex; gap: 9px; margin: 28px 9px 0; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 253, 248, 0.45); }
.note-icon { display: grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: 12px; }
.nav-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.nav-note strong { color: var(--ink); }

.content { min-width: 0; padding: 0 54px 90px; }
.module { max-width: 1100px; margin: 0 auto; padding: 100px 0 25px; scroll-margin-top: 76px; }
.hero-module { max-width: 1160px; padding-top: 80px; }
.module-heading { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 37px; }
.module-number { display: grid; flex: 0 0 45px; place-items: center; width: 45px; height: 45px; border: 1px solid var(--ink); border-radius: 14px 14px 17px 6px; color: var(--ink); background: var(--mint); font: 13px var(--mono); transform: rotate(-5deg); box-shadow: 3px 3px 0 var(--ink); }
.module-heading h2 { max-width: 800px; margin: 6px 0 11px; font-size: clamp(31px, 4vw, 53px); letter-spacing: -0.045em; line-height: 0.99; }
.module-lead { max-width: 700px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr); gap: 38px; align-items: center; min-height: 560px; }
.hero-copy h1 { margin: 17px 0 22px; font-size: clamp(50px, 6vw, 86px); letter-spacing: -0.07em; line-height: 0.91; }
.hero-copy h1 span { color: var(--blue); }
.hero-lead { max-width: 590px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 29px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid transparent; border-radius: 13px; font-size: 13px; font-weight: 800; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: var(--white); background: var(--ink); box-shadow: 5px 5px 0 var(--coral); }
.button.primary:hover { box-shadow: 3px 3px 0 var(--coral); }
.button.ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.button.ghost:hover { background: var(--white); }
.button.small { min-height: 39px; padding: 0 14px; font-size: 12px; }
.hero-stats { display: flex; gap: 28px; margin-top: 54px; }
.hero-stats div { display: grid; gap: 1px; }
.hero-stats strong { font-size: 24px; letter-spacing: -0.06em; }
.hero-stats span { color: var(--muted); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }

.hero-stage { position: relative; min-height: 475px; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px dashed rgba(55, 100, 216, 0.26); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 430px; height: 310px; }
.orbit-two { width: 330px; height: 440px; border-color: rgba(240, 126, 99, 0.3); transform: rotate(44deg); }
.expense-ticket { position: relative; z-index: 2; width: min(360px, 76%); padding: 22px 23px 20px; border: 1px solid #d5d1c7; border-radius: 16px 16px 30px 16px; background: var(--white); box-shadow: 10px 12px 0 var(--ink), var(--shadow); transform: rotate(-7deg); }
.expense-ticket::after { position: absolute; right: -19px; bottom: -20px; width: 65px; height: 65px; border-radius: 50%; background: var(--coral); opacity: 0.92; content: ""; z-index: -1; }
.ticket-top, .ticket-bottom { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 10px var(--mono); letter-spacing: 0.04em; }
.ticket-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-deep); }
.ticket-line { flex: 1; height: 1px; background: var(--line); }
.ticket-body { display: grid; gap: 7px; padding: 31px 0 23px; border-bottom: 1px dashed var(--line); }
.ticket-label { color: var(--coral); font-size: 9px; font-weight: 900; letter-spacing: 0.17em; }
.ticket-body strong { max-width: 230px; font-size: 25px; letter-spacing: -0.055em; line-height: 0.98; }
.ticket-meta { color: var(--muted); font-size: 11px; }
.ticket-path { display: flex; align-items: center; gap: 6px; padding: 20px 0; }
.path-node { display: grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font: 10px var(--mono); background: var(--paper); }
.path-node.done { color: var(--white); border-color: var(--mint-deep); background: var(--mint-deep); }
.path-line { flex: 1; height: 2px; background: var(--line); }
.path-line.done { background: var(--mint-deep); }
.path-line.active { background: linear-gradient(90deg, var(--mint-deep), var(--yellow)); }
.ticket-bottom { justify-content: space-between; }
.ticket-bottom strong { color: var(--mint-deep); font-size: 15px; letter-spacing: 0.04em; }
.ticket-stamp { padding: 4px 6px; border: 1px solid var(--yellow); color: #986d13; font-size: 8px; transform: rotate(-3deg); }
.floating-tag { position: absolute; z-index: 3; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--white); box-shadow: var(--shadow-small); font: 9px var(--mono); letter-spacing: 0.06em; }
.floating-tag b { color: var(--coral); }
.tag-top { top: 75px; right: 9%; transform: rotate(6deg); }
.tag-bottom { right: 2%; bottom: 69px; transform: rotate(-5deg); }
.hero-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 99px; font-size: 10px; font-weight: 800; box-shadow: var(--shadow-small); }
.hero-chip span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: var(--white); font-size: 11px; }
.chip-rust { left: 2%; top: 178px; background: var(--coral-soft); transform: rotate(-9deg); }
.chip-rust span { background: var(--coral); }
.chip-react { right: 0; top: 245px; background: var(--blue-soft); transform: rotate(7deg); }
.chip-react span { background: var(--blue); }
.module-intro-strip { display: flex; justify-content: space-between; gap: 25px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.module-intro-strip > div:first-child { display: flex; gap: 12px; align-items: center; }
.strip-number { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--white); background: var(--blue); font: 10px var(--mono); }
.module-intro-strip p { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; }
.module-intro-strip strong { color: var(--ink); }
.strip-tip { display: flex; gap: 7px; align-items: center; max-width: 300px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.strip-tip span { color: var(--coral); font-size: 18px; }

.module-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.module-status { color: var(--muted); font-size: 11px; }
.module-status.completed { color: var(--mint-deep); font-weight: 800; }
.module-status.completed::before { margin-right: 6px; content: "✓"; }
.complete-button { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
.complete-button:hover { color: var(--ink); border-color: var(--ink); background: var(--white); }
.complete-button.completed { color: var(--mint-deep); border-color: var(--mint-deep); background: var(--mint); }

.stack-board { display: grid; grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1.08fr); gap: 25px; align-items: stretch; }
.stack-visual { display: grid; gap: 8px; padding: 27px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink); box-shadow: var(--shadow); }
.stack-layer { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; min-height: 63px; padding: 9px 12px; border: 1px solid rgba(255, 253, 248, 0.13); border-radius: 13px; color: var(--white); text-align: left; background: rgba(255, 253, 248, 0.06); transition: 0.2s ease; }
.stack-layer:hover, .stack-layer.active { border-color: var(--yellow); background: rgba(255, 253, 248, 0.15); transform: translateX(5px); }
.stack-layer .layer-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; font-size: 18px; font-weight: 900; }
.layer-ui .layer-icon { color: var(--blue); background: var(--blue-soft); }
.layer-shell .layer-icon { color: var(--coral); background: var(--coral-soft); }
.layer-core .layer-icon { color: var(--white); background: var(--coral); }
.layer-data .layer-icon { color: #906e1a; background: var(--yellow); }
.layer-rules .layer-icon { color: var(--mint-deep); background: var(--mint); }
.stack-layer strong, .stack-layer small { display: block; }
.stack-layer strong { font-size: 13px; }
.stack-layer small { margin-top: 2px; color: #aeb6b1; font-size: 10px; }
.stack-layer b { color: #93a099; font: 10px var(--mono); }
.inspector-card { position: relative; padding: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-small); }
.inspector-card::after { position: absolute; top: -90px; right: -55px; width: 180px; height: 180px; border: 1px solid rgba(55, 100, 216, 0.15); border-radius: 50%; content: ""; }
.inspector-title { display: flex; gap: 13px; align-items: center; margin: 17px 0 14px; }
.inspector-title h3 { margin: 0; font-size: 22px; letter-spacing: -0.04em; line-height: 1.02; }
.inspector-orb { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--blue); background: var(--blue-soft); font-size: 22px; }
.inspector-card > p { position: relative; z-index: 1; max-width: 430px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.inspector-file { display: inline-block; margin-top: 22px; padding: 7px 9px; border-radius: 6px; color: var(--blue); background: var(--blue-soft); font: 10px var(--mono); }
.inspector-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 27px; padding: 13px; border-radius: 12px; background: var(--paper); }
.inspector-note > span { color: var(--coral); font-weight: 900; }
.inspector-note p { margin: 0; color: var(--muted); font-size: 11px; }
.language-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.language-card { min-height: 180px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 253, 248, 0.5); }
.language-head { display: flex; align-items: center; gap: 8px; }
.language-head strong { font-size: 12px; }
.language-badge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font: 11px var(--mono); font-weight: 900; }
.language-badge.ts { color: var(--blue); background: var(--blue-soft); }
.language-badge.rs { color: var(--white); background: var(--coral); }
.language-badge.yaml { color: #93701d; background: var(--yellow-soft); }
.language-badge.sql { color: var(--mint-deep); background: var(--mint); }
.language-card p { margin: 14px 0 18px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.language-place { color: #9aa19a; font: 9px var(--mono); }
.callout { display: flex; gap: 13px; align-items: flex-start; margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; }
.callout.remember { background: var(--yellow-soft); }
.callout.note { background: var(--blue-soft); }
.callout-icon { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #946e17; background: var(--yellow); font-size: 13px; }
.callout.note .callout-icon { color: var(--blue); background: var(--white); }
.callout strong { font-size: 12px; }
.callout p { max-width: 750px; margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.exercise-card { margin-top: 18px; padding: 23px 24px; border: 1px solid rgba(55, 100, 216, 0.24); border-radius: 17px; background: linear-gradient(135deg, rgba(227, 233, 255, 0.86), rgba(255, 253, 248, 0.86)); }
.exercise-label { display: flex; justify-content: space-between; margin-bottom: 13px; color: var(--blue); font: 10px var(--mono); font-weight: 800; letter-spacing: 0.08em; }
.exercise-label b { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.exercise-card h3 { margin: 0 0 5px; font-size: 17px; letter-spacing: -0.025em; }
.exercise-card > p { margin: 0; color: var(--muted); font-size: 12px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.choice-row button, .final-choices button { padding: 9px 11px; border: 1px solid rgba(55, 100, 216, 0.24); border-radius: 9px; color: var(--blue); background: rgba(255, 255, 255, 0.7); font-size: 11px; font-weight: 700; transition: 0.2s ease; }
.choice-row button:hover, .final-choices button:hover { border-color: var(--blue); background: var(--white); transform: translateY(-1px); }
.choice-row button.correct, .final-choices button.correct { border-color: var(--mint-deep); color: var(--mint-deep); background: var(--mint); }
.choice-row button.incorrect, .final-choices button.incorrect { border-color: #c96854; color: #a34b3a; background: var(--coral-soft); }
.exercise-feedback { min-height: 20px; margin-top: 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
.exercise-feedback.success { color: var(--mint-deep); }
.exercise-feedback.error { color: #ae533f; }

.architecture-layout { display: grid; gap: 16px; }
.flow-map { display: flex; align-items: center; gap: 8px; padding: 19px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink); box-shadow: var(--shadow); }
.flow-step { display: grid; flex: 1 0 118px; grid-template-columns: 22px 28px 1fr; grid-template-rows: auto auto; gap: 0 7px; min-height: 78px; padding: 10px; border: 1px solid rgba(255, 253, 248, 0.15); border-radius: 13px; color: var(--white); text-align: left; background: rgba(255, 253, 248, 0.06); transition: 0.2s ease; }
.flow-step:hover, .flow-step.active { border-color: var(--yellow); background: rgba(255, 253, 248, 0.14); }
.flow-index { grid-column: 1; grid-row: 1 / span 2; align-self: center; color: #98a39c; font: 9px var(--mono); }
.flow-icon { grid-column: 2; grid-row: 1; color: var(--yellow); font-size: 19px; line-height: 1; }
.flow-step strong { grid-column: 3; grid-row: 1; align-self: center; font-size: 11px; }
.flow-step small { grid-column: 2 / span 2; grid-row: 2; margin-top: 7px; color: #9da8a1; font-size: 9px; }
.flow-arrow { flex: 0 0 auto; color: var(--coral); font-size: 17px; }
.arch-detail { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px 27px; align-items: end; padding: 25px 27px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-small); }
.detail-kicker { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; color: var(--blue); font: 10px var(--mono); font-weight: 800; }
.pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px var(--blue-soft); }
.arch-detail h3 { grid-column: 1 / -1; margin: 0; font-size: 24px; letter-spacing: -0.04em; }
.arch-detail > p { grid-column: 1 / -1; max-width: 720px; margin: -4px 0 4px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.detail-columns { display: contents; }
.detail-columns div { display: grid; gap: 3px; }
.detail-columns span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.detail-columns strong { font-size: 12px; }
.arch-detail .inspector-file { margin: 0; justify-self: end; }
.bridge-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.bridge-card { display: flex; gap: 12px; padding: 17px; border-radius: 16px; }
.bridge-card.command { background: var(--coral-soft); }
.bridge-card.event { background: var(--mint); }
.bridge-symbol { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: var(--white); background: var(--ink); font-size: 17px; }
.bridge-card strong { font-size: 12px; }
.bridge-card p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.architecture-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 21px; }
.architecture-principles > div { padding: 16px; border-top: 2px solid var(--blue); }
.architecture-principles > div:nth-child(2) { border-color: var(--coral); }
.architecture-principles > div:nth-child(3) { border-color: var(--mint-deep); }
.architecture-principles span { color: var(--muted); font: 10px var(--mono); }
.architecture-principles strong { display: block; margin-top: 8px; font-size: 12px; }
.architecture-principles p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.repo-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 18px; align-items: stretch; }
.tree-card, .file-inspector { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-small); }
.tree-card { background: var(--ink); }
.tree-head { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #b0b8b0; font: 10px var(--mono); }
.tree-dot { width: 7px; height: 7px; border-radius: 50%; }
.tree-dot.red { background: var(--coral); }.tree-dot.yellow { background: var(--yellow); }.tree-dot.green { background: var(--mint); }
.repo-tree { min-height: 480px; margin: 0; padding: 21px 18px; overflow: auto; color: #abb5ae; font: 10px/1.9 var(--mono); }
.repo-tree code { color: inherit; white-space: pre; }
.tree-root, .tree-folder { color: var(--white); font-weight: 700; }
.tree-folder { color: #e7c76f; }
.tree-file { padding: 3px 5px; border: 0; border-radius: 5px; color: #8faef6; background: rgba(55, 100, 216, 0.15); font: inherit; }
.tree-file:hover { color: var(--white); background: var(--blue); }
.file-inspector { display: flex; flex-direction: column; padding: 28px; background: var(--white); }
.file-inspector h3 { margin: 22px 0 13px; font-size: 22px; letter-spacing: -0.04em; line-height: 1.05; overflow-wrap: anywhere; }
.file-inspector > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.file-role { display: grid; gap: 3px; margin-top: auto; padding-top: 28px; }
.file-role span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.file-role strong { font-size: 12px; }
.code-chip { margin-top: 17px; padding: 12px; overflow: auto; border-radius: 10px; color: var(--blue); background: var(--blue-soft); font: 10px/1.5 var(--mono); }
.read-recipe { display: flex; align-items: center; gap: 0; margin-top: 20px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 253, 248, 0.5); }
.recipe-step { display: flex; flex: 1; gap: 9px; align-items: flex-start; }
.recipe-step > span { display: grid; flex: 0 0 23px; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: var(--white); background: var(--blue); font: 10px var(--mono); }
.recipe-step strong { font-size: 11px; }
.recipe-step p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.recipe-line { flex: 0 0 28px; height: 1px; margin: 0 10px; background: var(--line); }
.code-example { margin-top: 19px; overflow: hidden; border: 1px solid #2f3c38; border-radius: 16px; background: #202d29; box-shadow: var(--shadow-small); }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 17px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.code-head .eyebrow { color: #94a39b; }
.copy-button { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; color: #c7d0ca; background: transparent; font: 9px var(--mono); text-transform: uppercase; }
.copy-button:hover { color: var(--white); border-color: var(--yellow); }
.code-example pre { margin: 0; padding: 19px; overflow: auto; color: #d4ddd7; font: 11px/1.75 var(--mono); }
.code-key { color: #f1c974; }.code-string { color: #b4e0c5; }.code-fn { color: #8fb1ff; }.code-field { color: #efa190; }.code-comment { color: #78877f; }

.data-timeline { display: flex; align-items: stretch; gap: 9px; }
.data-step { flex: 1; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-small); }
.data-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; font-size: 17px; }
.data-icon.raw { color: var(--blue); background: var(--blue-soft); }.data-icon.normalized { color: #a97617; background: var(--yellow-soft); }.data-icon.analyzed { color: var(--coral); background: var(--coral-soft); }.data-icon.reviewed { color: var(--mint-deep); background: var(--mint); }
.data-count { display: block; margin-top: 13px; color: var(--muted); font: 9px var(--mono); }
.data-step h3 { margin: 4px 0 5px; font-size: 15px; letter-spacing: -0.02em; }
.data-step p { min-height: 58px; margin: 0 0 13px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.data-step code { color: #69736e; font-size: 9px; }
.data-arrow { display: grid; flex: 0 0 15px; place-items: center; color: var(--coral); font-size: 16px; }
.data-columns { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 17px; margin-top: 18px; }
.panel-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-small); }
.panel-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.mini-tag { padding: 4px 6px; border-radius: 5px; color: var(--muted); background: var(--paper); font: 9px var(--mono); }
.compact-code { margin: 19px 0 0; padding: 15px; overflow: auto; border-radius: 10px; color: #d3ddd7; background: #202d29; font: 10px/1.7 var(--mono); }
.under-code { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.schema-list { display: grid; gap: 10px; margin-top: 17px; }
.schema-list > div { display: flex; gap: 9px; align-items: center; padding: 8px; border-radius: 9px; background: var(--paper); }
.schema-icon { color: var(--blue); font-size: 13px; }
.schema-list strong, .schema-list small { display: block; }
.schema-list strong { font: 10px var(--mono); }.schema-list small { color: var(--muted); font-size: 9px; }
.import-checklist { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 25px; margin-top: 19px; padding: 24px; border-radius: 19px; background: var(--ink); color: var(--white); }
.checklist-intro h3 { max-width: 320px; margin: 10px 0 8px; font-size: 20px; letter-spacing: -0.04em; line-height: 1.05; }
.checklist-intro p { max-width: 380px; margin: 0; color: #a9b3ac; font-size: 11px; line-height: 1.6; }
.checklist-items { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-content: center; }
.checklist-items > div { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 11px; background: rgba(255, 255, 255, 0.05); }
.checklist-items > div > span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: var(--ink); background: var(--mint); font-size: 10px; font-weight: 900; }
.checklist-items p { margin: 0; color: #aeb8b0; font-size: 9px; line-height: 1.45; }.checklist-items strong { color: var(--white); font-size: 10px; }

.analysis-pipeline { display: flex; align-items: center; gap: 7px; padding: 18px; overflow-x: auto; border-radius: 19px; background: var(--ink); box-shadow: var(--shadow); }
.analysis-node { flex: 1 0 125px; min-height: 91px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.analysis-node > span { color: var(--yellow); font: 9px var(--mono); }.analysis-node strong, .analysis-node small { display: block; }.analysis-node strong { margin-top: 14px; color: var(--white); font-size: 10px; }.analysis-node small { margin-top: 3px; color: #9ba79f; font-size: 9px; }
.analysis-pipeline > span { color: var(--coral); }
.provider-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 17px; }
.provider-card { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); text-align: left; background: var(--white); }
.provider-card:hover, .provider-card.active { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.provider-symbol { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font-size: 16px; }
.provider-card strong, .provider-card small { display: block; }.provider-card strong { font-size: 11px; }.provider-card small { color: var(--muted); font-size: 9px; }.provider-card b { color: var(--muted); font: 8px var(--mono); text-transform: uppercase; }
.provider-detail { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.provider-detail h3 { margin: 8px 0 4px; font-size: 18px; letter-spacing: -0.03em; }.provider-detail p { max-width: 590px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.provider-contract { flex: 0 0 220px; padding: 12px; border-radius: 10px; background: var(--paper); }.provider-contract span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }.provider-contract code { display: block; margin-top: 7px; font-size: 9px; }
.guardrail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 17px; }
.guardrail-card { padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 253, 248, 0.53); }.guardrail-icon { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 14px; border-radius: 9px; color: var(--coral); background: var(--coral-soft); font-size: 15px; font-weight: 900; }.guardrail-card:nth-child(2) .guardrail-icon { color: #936e16; background: var(--yellow-soft); }.guardrail-card:nth-child(3) .guardrail-icon { color: var(--blue); background: var(--blue-soft); }.guardrail-card strong { display: block; font-size: 12px; }.guardrail-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.simulator-card { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; margin-top: 19px; padding: 23px; border: 1px solid var(--line); border-radius: 19px; background: var(--yellow-soft); }
.simulator-copy h3 { margin: 9px 0 5px; font-size: 21px; letter-spacing: -0.04em; }.simulator-copy > p { max-width: 480px; margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.55; }.simulator-copy label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }.simulator-copy input, .simulator-copy select { min-height: 36px; padding: 0 10px; border: 1px solid #dbcfae; border-radius: 8px; color: var(--ink); background: rgba(255, 253, 248, 0.75); font-size: 11px; }.sim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 15px; }
.sim-result { display: flex; flex-direction: column; justify-content: center; min-height: 245px; padding: 26px; border: 1px solid rgba(33, 124, 105, 0.2); border-radius: 15px; background: var(--white); }.sim-result-label { color: var(--muted); font: 10px var(--mono); letter-spacing: 0.15em; }.sim-result strong { margin-top: 12px; color: var(--mint-deep); font-size: 31px; letter-spacing: -0.05em; }.sim-result p { margin: 9px 0 23px; color: var(--muted); font-size: 11px; line-height: 1.55; }.uncertainty-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; color: var(--muted); font-size: 9px; }.uncertainty-meter > div { height: 7px; overflow: hidden; border-radius: 99px; background: var(--paper-deep); }.uncertainty-meter i { display: block; width: 22%; height: 100%; border-radius: inherit; background: var(--coral); transition: width 0.3s ease; }.uncertainty-meter b { color: var(--ink); font: 10px var(--mono); }

.desktop-visual { position: relative; min-height: 530px; padding: 32px 55px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 70% 10%, rgba(227, 233, 255, 0.86), transparent 31%), var(--paper-deep); }
.window-frame { position: relative; z-index: 1; overflow: hidden; border: 1px solid #bbb9b1; border-radius: 15px; background: var(--white); box-shadow: 12px 12px 0 var(--ink), var(--shadow); transform: rotate(-2.5deg); }
.window-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); background: #efede6; font: 9px var(--mono); }.window-controls { display: flex; gap: 5px; }.window-controls i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }.window-controls i:nth-child(2) { background: var(--yellow); }.window-controls i:nth-child(3) { background: var(--mint-deep); }.window-lock { color: var(--mint-deep); }
.window-content { display: grid; grid-template-columns: 145px 1fr; min-height: 340px; }.window-content aside { display: flex; flex-direction: column; gap: 12px; padding: 19px 13px; border-right: 1px solid var(--line); color: var(--muted); font-size: 8px; }.window-content aside b { margin-top: -7px; color: var(--ink); font-size: 11px; }.window-content aside small { margin-top: -10px; font-size: 7px; }.window-content aside hr { width: 100%; border: 0; border-top: 1px solid var(--line); }.fake-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--white); background: var(--coral); font-size: 15px; font-weight: 900; }.fake-active { padding: 7px; border-radius: 7px; color: var(--blue); background: var(--blue-soft); }.fake-dashboard { padding: 23px; }.fake-heading { display: grid; gap: 5px; }.fake-heading span { color: var(--muted); font: 8px var(--mono); }.fake-heading strong { font-size: 22px; letter-spacing: -0.05em; }.fake-metrics { display: flex; gap: 8px; margin: 22px 0; }.fake-metrics span { display: grid; gap: 1px; min-width: 77px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }.fake-metrics b { font-size: 18px; }.fake-metrics small { color: var(--muted); font-size: 8px; }.fake-table { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }.fake-table > div { display: grid; grid-template-columns: 55px 1fr 105px; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; }.fake-table > div:first-child { color: var(--muted); background: var(--paper); font: 8px var(--mono); text-transform: uppercase; }.fake-table > div:last-child { border-bottom: 0; }.fake-table em, .fake-table i, .fake-table u { padding: 3px; border-radius: 4px; font-size: 7px; font-style: normal; text-decoration: none; text-align: center; }.fake-table em { color: var(--mint-deep); background: var(--mint); }.fake-table i { color: #a34b3a; background: var(--coral-soft); }.fake-table u { color: #986d13; background: var(--yellow-soft); }
.desktop-label { position: absolute; z-index: 3; display: grid; gap: 3px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); box-shadow: var(--shadow-small); }.desktop-label span { color: var(--coral); font: 9px var(--mono); }.desktop-label strong { font-size: 11px; }.desktop-label small { color: var(--muted); font-size: 9px; }.label-front { left: 16px; top: 95px; transform: rotate(-6deg); }.label-tauri { right: 13px; top: 195px; transform: rotate(6deg); }.label-back { left: 75px; bottom: 23px; transform: rotate(4deg); }
.desktop-flow { display: flex; align-items: center; gap: 11px; margin-top: 18px; }.desktop-flow-step { display: flex; flex: 1; gap: 9px; align-items: flex-start; }.number-tag { display: grid; flex: 0 0 25px; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--white); background: var(--coral); font: 10px var(--mono); }.desktop-flow-step strong { font-size: 11px; }.desktop-flow-step p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }.desktop-flow > .flow-arrow { color: var(--blue); }

.delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.delivery-card { display: flex; gap: 16px; padding: 24px; border-radius: 18px; }.review-card { background: var(--mint); }.export-card { background: var(--coral-soft); }.delivery-icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--white); background: var(--ink); font-size: 19px; }.delivery-card h3 { margin: 9px 0 5px; font-size: 20px; letter-spacing: -0.04em; }.delivery-card p { margin: 0 0 15px; color: var(--muted); font-size: 11px; line-height: 1.55; }.delivery-card code { color: var(--ink); }.sheet-pills { display: flex; flex-wrap: wrap; gap: 5px; }.sheet-pills span { padding: 4px 6px; border-radius: 5px; color: #a34b3a; background: rgba(255, 253, 248, 0.6); font: 9px var(--mono); }
.trace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }.trace-card { padding: 21px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }.trace-head { display: flex; gap: 10px; align-items: center; }.trace-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: var(--blue); background: var(--blue-soft); font-size: 18px; }.trace-card h3 { margin: 6px 0 0; font-size: 17px; letter-spacing: -0.03em; }.trace-card > p { margin: 16px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }.log-lines { display: grid; gap: 5px; padding: 11px; border-radius: 9px; background: var(--ink); color: #aeb9b0; font: 9px/1.55 var(--mono); }.log-lines b { color: var(--mint); font-weight: 500; }.file-list { display: grid; gap: 6px; }.file-list code { display: block; padding: 6px 8px; border-radius: 6px; color: var(--blue); background: var(--blue-soft); font-size: 9px; }
.windows-lab { margin-top: 19px; padding: 24px; border: 1px solid var(--line); border-radius: 19px; background: var(--ink); color: var(--white); }.lab-heading { display: flex; gap: 15px; align-items: flex-start; }.lab-sticker { display: inline-block; padding: 6px 8px; border-radius: 6px; color: var(--ink); background: var(--yellow); font: 9px var(--mono); font-weight: 900; transform: rotate(-4deg); }.lab-heading h3 { margin: 0; font-size: 21px; letter-spacing: -0.04em; }.lab-heading p { margin: 4px 0 0; color: #a9b3ac; font-size: 11px; }.command-list { display: grid; margin-top: 24px; }.command-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.11); }.command-number { color: var(--yellow); font: 10px var(--mono); }.command-row strong { display: block; color: #dfe7df; font-size: 11px; }.command-row pre { margin: 5px 0 0; color: #a8d9bb; font-size: 10px; }.command-row .copy-button { align-self: center; }.powershell-tip { display: flex; gap: 10px; align-items: center; margin-top: 15px; padding: 11px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); }.powershell-tip > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--ink); background: var(--mint); font: 10px var(--mono); font-weight: 900; }.powershell-tip p { margin: 0; color: #aeb8b0; font-size: 10px; }.powershell-tip strong { color: var(--white); }

.final-module { padding-top: 97px; }.final-banner { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--blue-soft); }.final-banner h2 { max-width: 600px; margin: 10px 0 9px; font-size: clamp(35px, 5vw, 63px); letter-spacing: -0.065em; line-height: 0.93; }.final-banner p:not(.eyebrow) { max-width: 620px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }.final-seal { display: grid; flex: 0 0 120px; place-items: center; width: 120px; height: 120px; padding-top: 21px; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--yellow); transform: rotate(8deg); box-shadow: 6px 6px 0 var(--ink); }.final-seal span { font: 12px var(--mono); letter-spacing: 0.2em; }.final-seal strong { margin-top: -8px; font-size: 26px; letter-spacing: -0.08em; }.final-seal small { margin-top: -7px; font: 9px var(--mono); letter-spacing: 0.16em; }
.challenge-card { margin-top: 20px; padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: var(--shadow); }.challenge-badge { display: inline-block; padding: 5px 7px; border-radius: 6px; color: var(--white); background: var(--coral); font: 9px var(--mono); }.challenge-head h3 { margin: 14px 0 3px; font-size: 22px; letter-spacing: -0.04em; }.challenge-head p { margin: 0; color: var(--muted); font-size: 11px; }.final-question { display: grid; grid-template-columns: 31px 1fr; gap: 10px; margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--line); }.final-question > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font: 10px var(--mono); }.final-question strong { font-size: 12px; }.final-choices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }.final-choices button { color: var(--ink); border-color: var(--line); font-weight: 600; }.final-choices button.correct { color: var(--mint-deep); border-color: var(--mint-deep); background: var(--mint); }.final-choices button.incorrect { color: #a34b3a; border-color: #c96854; background: var(--coral-soft); }.final-submit { margin-top: 25px; }.final-result { min-height: 0; }.final-result.visible { margin-top: 18px; padding: 14px; border-radius: 10px; color: var(--mint-deep); background: var(--mint); font-size: 12px; font-weight: 800; }.final-result.warning { color: #8d6518; background: var(--yellow-soft); }
.cheat-sheet { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 17px; margin-top: 19px; }.cheat-sheet > div { padding: 21px; border-radius: 17px; background: var(--ink); color: var(--white); }.cheat-sheet p { margin: 11px 0 0; color: #bbc4bd; font-size: 13px; line-height: 1.6; }.glossary { background: var(--coral) !important; }.glossary > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }.glossary button { padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; color: var(--white); background: rgba(255, 255, 255, 0.1); font: 10px var(--mono); }.glossary button:hover { color: var(--ink); background: var(--white); }.glossary #glossary-text { min-height: 37px; margin-top: 14px; color: rgba(255,255,255,.82); font-size: 10px; line-height: 1.45; }
.completion-card { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding: 19px; border: 1px dashed var(--line); border-radius: 16px; background: rgba(255, 253, 248, 0.5); }.completion-emoji { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #a97617; background: var(--yellow); font-size: 21px; }.completion-card h3 { margin: 5px 0 3px; font-size: 17px; }.completion-card p { margin: 0; color: var(--muted); font-size: 11px; }.completion-badge { margin-left: auto; color: var(--blue); font: 13px var(--mono); }.site-footer { display: flex; justify-content: space-between; gap: 15px; align-items: center; max-width: 1100px; margin: 76px auto 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.site-footer > div { display: flex; gap: 9px; align-items: center; color: var(--ink); }.site-footer p { margin: 0; }.site-footer a { color: var(--blue); }

.toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: 290px; padding: 11px 14px; border: 1px solid var(--ink); border-radius: 10px; color: var(--white); background: var(--ink); box-shadow: var(--shadow); font-size: 11px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: 0.25s ease; }.toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1120px) {
  .topbar { padding: 0 24px; }
  .page-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .course-nav { padding-left: 19px; }
  .content { padding: 0 35px 75px; }
  .hero-grid { grid-template-columns: 1fr 0.85fr; }.hero-stage { min-height: 410px; }.expense-ticket { width: 80%; }.floating-tag { display: none; }
  .language-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-map { gap: 5px; }.flow-arrow { font-size: 13px; }
}

@media (max-width: 820px) {
  .topbar { height: 67px; }.page-layout { display: block; }.course-nav { position: fixed; z-index: 15; top: 67px; right: 0; left: 0; display: none; width: 100%; height: calc(100vh - 67px); padding: 24px; border-right: 0; background: rgba(246, 243, 236, 0.97); backdrop-filter: blur(18px); }.course-nav.open { display: block; }.nav-list { grid-template-columns: 1fr 1fr; max-width: 620px; }.nav-progress { max-width: 620px; margin-top: 25px; }.nav-note { max-width: 620px; }
  .menu-button { display: inline-block; }.topbar-actions { gap: 9px; }.topbar-actions > .text-button { display: none; }.progress-pill { padding: 7px 9px; font-size: 10px; }
  .content { padding: 0 21px 65px; }.module, .hero-module { padding-top: 72px; }.hero-grid { grid-template-columns: 1fr; min-height: 0; }.hero-stage { min-height: 380px; margin-top: 12px; }.hero-copy h1 { font-size: clamp(48px, 13vw, 78px); }.hero-lead { font-size: 15px; }.module-intro-strip { display: grid; }
  .stack-board, .repo-layout, .data-columns, .simulator-card, .cheat-sheet { grid-template-columns: 1fr; }.stack-visual { min-height: 0; }.inspector-card { min-height: 245px; }
  .architecture-principles, .guardrail-grid { grid-template-columns: 1fr; }.arch-detail { grid-template-columns: 1fr 1fr; }.arch-detail .inspector-file { grid-column: 1 / -1; justify-self: start; }.bridge-row, .delivery-grid, .trace-grid { grid-template-columns: 1fr; }
  .data-timeline { display: grid; grid-template-columns: 1fr 25px 1fr; }.data-step:nth-of-type(3) { grid-column: 1 / -1; }.data-timeline .data-arrow:nth-of-type(2) { transform: rotate(90deg); }.data-timeline .data-arrow:nth-of-type(4) { display: none; }.data-timeline .data-step:nth-of-type(3) + .data-arrow { display: none; }
  .import-checklist { grid-template-columns: 1fr; }.checklist-items { margin-top: 5px; }.provider-grid { grid-template-columns: 1fr 1fr; }.provider-detail { display: grid; }.provider-contract { width: 100%; }
  .desktop-visual { padding: 25px 20px; }.window-content { grid-template-columns: 104px 1fr; }.window-content aside { font-size: 7px; }.fake-dashboard { padding: 16px; }.fake-heading strong { font-size: 17px; }.fake-table > div { grid-template-columns: 35px 1fr; }.fake-table > div > *:last-child { grid-column: 2; }.desktop-label { display: none; }.desktop-flow { display: grid; grid-template-columns: 1fr; }.desktop-flow > .flow-arrow { display: none; }
  .site-footer { display: grid; justify-items: start; }
}

@media (max-width: 540px) {
  .brand-copy small { display: none; }.brand-copy strong { font-size: 13px; }.brand-mark { width: 30px; height: 30px; }.topbar { padding: 0 15px; }.progress-pill { display: none; }.menu-button { padding: 7px 9px; }.course-nav { padding: 18px 15px; }.nav-list { grid-template-columns: 1fr; }.nav-link { min-height: 35px; }.content { padding: 0 15px 55px; }.module, .hero-module { padding-top: 57px; }.hero-stage { min-height: 300px; }.orbit-one { width: 330px; height: 240px; }.orbit-two { width: 250px; height: 330px; }.expense-ticket { width: 82%; padding: 17px; }.ticket-body { padding: 24px 0 18px; }.ticket-body strong { font-size: 21px; }.hero-chip { display: none; }.hero-stats { margin-top: 35px; }.hero-copy h1 { font-size: 49px; }.hero-actions { display: grid; }.button { width: 100%; }.module-heading { gap: 13px; }.module-number { flex-basis: 37px; width: 37px; height: 37px; }.module-heading h2 { font-size: 36px; }.module-lead { font-size: 14px; }.language-grid { grid-template-columns: 1fr; }.flow-map { padding: 12px; }.flow-step { flex-basis: 105px; }.arch-detail { grid-template-columns: 1fr; }.arch-detail .inspector-file { grid-column: auto; }.recipe-line { flex-basis: 10px; margin: 0 4px; }.read-recipe { align-items: flex-start; }.recipe-step p { display: none; }.repo-tree { min-height: 420px; padding: 18px 11px; font-size: 9px; }.data-timeline { display: grid; grid-template-columns: 1fr; }.data-arrow { display: none !important; }.data-step:nth-of-type(3) { grid-column: auto; }.checklist-items { grid-template-columns: 1fr; }.provider-grid { grid-template-columns: 1fr; }.sim-row { grid-template-columns: 1fr; }.simulator-card { padding: 17px; }.sim-result { min-height: 200px; padding: 20px; }.desktop-visual { min-height: 365px; padding: 18px 10px; }.window-frame { box-shadow: 7px 7px 0 var(--ink); }.window-content { min-height: 260px; grid-template-columns: 80px 1fr; }.window-content aside { gap: 9px; padding: 12px 8px; }.window-content aside span:not(.fake-logo) { font-size: 6px; }.fake-dashboard { padding: 12px; }.fake-heading strong { font-size: 14px; }.fake-metrics { gap: 4px; margin: 13px 0; }.fake-metrics span { min-width: 0; padding: 6px; }.fake-metrics b { font-size: 14px; }.fake-table > div { gap: 4px; padding: 7px; font-size: 7px; }.delivery-card { padding: 17px; }.windows-lab { padding: 18px; }.lab-heading { display: grid; gap: 12px; }.command-row { grid-template-columns: 22px 1fr; }.command-row .copy-button { grid-column: 2; justify-self: start; }.final-banner { padding: 22px; }.final-seal { flex-basis: 80px; width: 80px; height: 80px; box-shadow: 4px 4px 0 var(--ink); }.final-seal strong { font-size: 19px; }.final-seal span { font-size: 8px; }.final-seal small { font-size: 6px; }.challenge-card { padding: 18px; }.final-question { grid-template-columns: 27px 1fr; }.final-choices { display: grid; }.final-choices button { text-align: left; }.completion-card { align-items: flex-start; }.completion-badge { margin-top: 4px; }.module-footer { align-items: flex-start; flex-direction: column; }.complete-button { width: 100%; justify-content: space-between; }.site-footer { gap: 9px; }.site-footer p { max-width: 250px; }
}

/* Fondations : les premières étapes parlent aux débutants avant de parler au code. */
.lesson-path { display: flex; align-items: center; gap: 8px; margin: 19px 0 16px; }
.path-lesson { display: grid; grid-template-columns: 25px 1fr; gap: 1px 7px; align-items: center; min-width: 118px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); }
.path-lesson > span { display: grid; grid-row: span 2; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font: 10px var(--mono); }
.path-lesson strong { font-size: 11px; line-height: 1; }
.path-lesson small { color: var(--muted); font-size: 9px; }
.path-lesson.active { border-color: var(--blue); background: var(--blue-soft); }
.path-lesson.active > span { color: var(--white); background: var(--blue); }
.path-connector { flex: 1; max-width: 55px; height: 1px; background: var(--line); }
.term-learning-layout { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 16px; align-items: stretch; }
.term-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.term-card { display: grid; grid-template-columns: 30px 1fr; gap: 1px 8px; min-height: 91px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--white); text-align: left; cursor: pointer; transition: 0.18s ease; }
.term-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.term-card.active { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 2px rgba(45, 92, 122, 0.1); }
.term-symbol { display: grid; grid-row: span 2; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--white); background: var(--ink); font: 12px var(--mono); font-weight: 800; }
.term-card strong { align-self: end; font-size: 11px; line-height: 1.15; }
.term-card small { color: var(--muted); font-size: 9px; line-height: 1.25; }
.term-inspector { display: flex; flex-direction: column; min-height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--ink); color: var(--white); box-shadow: var(--shadow-small); }
.term-learning-layout { align-items: start; }
.term-inspector { min-height: 420px; position: sticky; top: 86px; }
.term-inspector .detail-kicker { color: var(--mint); }
.term-inspector-title { display: flex; gap: 12px; align-items: center; margin: 19px 0 13px; }
.term-large-symbol { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--ink); background: var(--yellow); font: 16px var(--mono); font-weight: 900; }
.term-inspector h3 { margin: 0; font-size: 23px; letter-spacing: -0.04em; }
.term-inspector-title > div > span { color: #b8c4bb; font-size: 10px; }
.term-inspector > p { margin: 0; color: #d2dbd2; font-size: 12px; line-height: 1.58; }
.term-example-label { margin-top: 20px; color: var(--yellow); font: 9px var(--mono); letter-spacing: 0.13em; }
.term-example { overflow: auto; margin: 7px 0 0; padding: 13px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9px; color: #a8d9bb; background: rgba(255, 255, 255, 0.07); font: 10px/1.55 var(--mono); white-space: pre-wrap; }
.term-output { margin-top: auto; padding: 11px 12px; border-radius: 9px; color: var(--mint-deep); background: var(--mint); font-size: 10px; line-height: 1.45; }
.code-lab { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 14px; }
.editor-pane, .output-pane { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.editor-pane { padding: 17px; }
.output-pane { display: flex; flex-direction: column; padding: 17px; background: var(--ink); color: var(--white); }
.lab-pane-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; }
.lab-pane-head .eyebrow { margin: 0; }
.lab-local { color: var(--muted); font-size: 9px; }
.output-pane .lab-local { color: #aeb9b0; }
#code-editor { display: block; width: 100%; min-height: 300px; box-sizing: border-box; resize: vertical; padding: 14px; border: 1px solid #33463d; border-radius: 9px; outline: none; color: #dbe6dc; background: #202d29; font: 12px/1.7 var(--mono); tab-size: 2; }
#code-editor:focus { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(167, 220, 187, 0.18); }
.editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.editor-actions .button { width: auto; }
.code-output { overflow: auto; min-height: 300px; margin: 0; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9px; color: #a8d9bb; background: rgba(255, 255, 255, 0.07); font: 12px/1.7 var(--mono); white-space: pre-wrap; }
.output-status { padding: 4px 7px; border-radius: 6px; color: #b8c4bb; background: rgba(255, 255, 255, 0.08); font: 9px var(--mono); }
.output-status.success { color: var(--mint-deep); background: var(--mint); }
.output-status.error { color: #ffd1c4; background: rgba(201, 104, 84, 0.35); }
.what-happened { display: flex; gap: 9px; margin-top: 11px; padding: 11px; border-radius: 9px; background: rgba(255, 255, 255, 0.07); }
.what-happened > span { color: var(--yellow); font: 13px var(--mono); }
.what-happened p { margin: 0; color: #b8c4bb; font-size: 10px; line-height: 1.5; }
.what-happened code { color: var(--white); }
.mini-challenges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 14px; }
.mini-challenges > div { display: flex; gap: 9px; align-items: flex-start; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.challenge-number { display: grid; flex: 0 0 23px; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font: 10px var(--mono); font-weight: 900; }
.mini-challenges p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.mini-challenges strong { color: var(--ink); }
.translation-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 14px; }
.translation-strip > div { padding: 12px; border-radius: 11px; background: var(--yellow-soft); }
.translation-code { display: block; margin-bottom: 6px; color: #986d13; font: 10px var(--mono); font-weight: 800; }
.translation-strip strong { display: block; font-size: 11px; }
.translation-strip small { color: var(--muted); font-size: 9px; line-height: 1.3; }
.code-caption { margin: 0; padding: 0 19px 14px; color: #aeb9b0; font-size: 11px; line-height: 1.5; }
.inline-explain { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; }

/* Contraste du code : le style global de `code` est bleu pour les cartes claires,
   mais les exemples sur fond sombre doivent hériter de leur couleur claire. */
pre code { color: inherit; }
.code-example pre { color: #e3eee7; }
.compact-code { color: #e3eee7; }
.code-key { color: #ffe08a; }
.code-string { color: #c4efd2; }
.code-fn { color: #b4ccff; }
.code-field { color: #ffad9d; }
.code-comment { color: #a8b8ae; }
.analysis-node small code { color: #cbd9ff; }

/* Parcours long : nouvelles activités graduées pour apprendre en faisant. */
.learning-loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.loop-step { position: relative; min-height: 174px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-small); }
.loop-step:nth-child(2) { background: var(--blue-soft); }.loop-step:nth-child(3) { background: var(--mint); }.loop-step:nth-child(4) { background: var(--yellow-soft); }.loop-step:nth-child(5) { background: var(--coral-soft); }
.loop-step > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: var(--white); background: var(--ink); font: 10px var(--mono); }
.loop-step strong { display: block; margin-top: 18px; font-size: 15px; letter-spacing: -0.03em; }
.loop-step p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.outcomes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 15px; }
.outcome-card { min-height: 157px; padding: 17px; border-radius: 15px; color: var(--white); background: var(--ink); }
.outcome-card:nth-child(2) { background: var(--blue); }.outcome-card:nth-child(3) { background: var(--mint-deep); }.outcome-card:nth-child(4) { background: #a76450; }
.outcome-card > span { font-size: 21px; }.outcome-card strong { display: block; margin-top: 14px; font-size: 14px; }.outcome-card p { margin: 4px 0 0; color: rgba(255,255,255,.76); font-size: 10px; line-height: 1.5; }
.mental-layout { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 16px; }
.mental-buttons { display: grid; gap: 9px; }
.mental-button { display: grid; grid-template-columns: 29px 1fr; gap: 1px 9px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--white); text-align: left; transition: .18s ease; }
.mental-button > span { display: grid; grid-row: span 2; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font: 9px var(--mono); font-weight: 800; }
.mental-button strong { align-self: end; font-size: 11px; }.mental-button small { color: var(--muted); font-size: 9px; }.mental-button:hover, .mental-button.active { border-color: var(--blue); background: var(--blue-soft); }.mental-button.active > span { color: var(--white); background: var(--blue); }
.mental-inspector { display: flex; flex-direction: column; min-height: 355px; padding: 28px; border-radius: 18px; color: var(--white); background: var(--ink); box-shadow: var(--shadow); }
.mental-inspector .detail-kicker { color: var(--mint); }.mental-inspector h3 { margin: 25px 0 11px; font-size: 27px; letter-spacing: -.05em; }.mental-inspector > p { margin: 0; color: #c4d0c6; font-size: 12px; line-height: 1.6; }
.mental-example { margin-top: 17px; padding: 12px; border-radius: 10px; color: var(--mint); background: rgba(255,255,255,.07); font: 10px/1.5 var(--mono); }.mental-question { margin-top: auto !important; padding-top: 16px; color: var(--yellow) !important; font-size: 10px !important; }
.four-questions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 16px; }
.four-questions > div { padding: 15px; border-top: 3px solid var(--blue); background: rgba(255,253,248,.55); }.four-questions > div:nth-child(2) { border-color: var(--coral); }.four-questions > div:nth-child(3) { border-color: var(--mint-deep); }.four-questions > div:nth-child(4) { border-color: #a97617; }
.four-questions span { color: var(--muted); font: 10px var(--mono); }.four-questions strong { display: block; margin-top: 7px; font-size: 12px; }.four-questions p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.compare-card { min-height: 182px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-small); }
.compare-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--blue); background: var(--blue-soft); font: 12px var(--mono); font-weight: 900; }.compare-card.library .compare-icon { color: var(--mint-deep); background: var(--mint); }.compare-card.tool .compare-icon { color: #a34b3a; background: var(--coral-soft); }.compare-card.format .compare-icon { color: #986d13; background: var(--yellow-soft); }.compare-card.crate .compare-icon { color: var(--white); background: var(--ink); }.compare-card.file .compare-icon { color: var(--purple); background: #eee9ff; }
.compare-card h3 { margin: 16px 0 4px; font-size: 15px; letter-spacing: -.03em; }.compare-card p { min-height: 45px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.compare-card strong { display: block; margin-top: 12px; color: var(--ink); font: 9px/1.4 var(--mono); }
.myth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 15px; }.myth-card { display: flex; gap: 9px; padding: 14px; border-radius: 13px; background: var(--coral-soft); }.myth-card > span { display: grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--white); background: var(--coral); font-weight: 900; }.myth-card p { margin: 0; color: #74554c; font-size: 10px; line-height: 1.5; }.myth-card strong { color: var(--ink); }
.prediction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.prediction-card { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }.prediction-card.accent-card { background: var(--yellow-soft); }.prediction-card h3 { margin: 10px 0 15px; font-size: 20px; letter-spacing: -.04em; }.prediction-code { margin: 0; padding: 15px; overflow: auto; border-radius: 10px; color: #e3eee7; background: #202d29; font: 11px/1.7 var(--mono); }.prediction-card > p { margin: 15px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.recall-prompt { display: flex; gap: 13px; margin-top: 17px; padding: 16px; border: 1px dashed #d3bd78; border-radius: 14px; background: var(--yellow-soft); }.recall-prompt > span { font-size: 21px; }.recall-prompt strong { font-size: 12px; }.recall-prompt p { margin: 3px 0 0; color: #786b48; font-size: 10px; line-height: 1.5; }
.mini-app-lab { display: grid; grid-template-columns: 1.1fr .9fr; gap: 17px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, var(--blue-soft), rgba(255,253,248,.8)); }
.mini-app-form h3 { margin: 8px 0 5px; font-size: 22px; letter-spacing: -.04em; }.mini-app-form > p { margin: 0 0 16px; color: var(--muted); font-size: 11px; }.mini-app-form label, .project-form label { display: grid; gap: 5px; margin-top: 10px; color: var(--muted); font-size: 10px; font-weight: 800; }.mini-app-form input, .mini-app-form select, .project-form input { min-height: 39px; width: 100%; padding: 0 10px; border: 1px solid #c5cce0; border-radius: 8px; color: var(--ink); background: var(--white); font: 11px var(--sans); }.mini-app-fields { display: grid; grid-template-columns: .55fr 1.45fr; gap: 10px; }.mini-app-form .button { margin-top: 17px; }
.mini-app-preview { display: flex; flex-direction: column; min-height: 290px; padding: 23px; border: 1px solid rgba(33,124,105,.2); border-radius: 15px; background: var(--white); }.mini-app-preview h3 { margin: 11px 0 8px; font-size: 18px; letter-spacing: -.03em; }.mini-app-preview > strong { color: #a97617; font-size: 27px; letter-spacing: -.05em; }.mini-app-preview > p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.miniapp-path { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 18px; color: var(--blue); font: 9px var(--mono); }.miniapp-path span { padding: 5px 7px; border-radius: 6px; background: var(--blue-soft); }.miniapp-path i { color: var(--muted); font-style: normal; }
.build-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }.build-map > div { padding: 15px; border-radius: 13px; background: var(--white); border: 1px solid var(--line); }.build-map span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--white); background: var(--blue); font: 9px var(--mono); }.build-map strong { display: block; margin-top: 9px; font-size: 11px; }.build-map p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.reason-card { min-height: 204px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }.reason-card > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--white); background: var(--ink); font: 14px var(--mono); font-weight: 800; }.reason-card:nth-child(2) > span { background: var(--blue); }.reason-card:nth-child(3) > span { color: var(--mint-deep); background: var(--mint); }.reason-card:nth-child(4) > span { color: #986d13; background: var(--yellow-soft); }.reason-card h3 { margin: 16px 0 5px; font-size: 16px; }.reason-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.reason-card small { display: inline-block; margin-top: 13px; padding: 4px 6px; border-radius: 5px; color: var(--blue); background: var(--blue-soft); font: 9px var(--mono); }
.tradeoff-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }.tradeoff-strip > div { display: grid; gap: 4px; padding: 16px; border-radius: 13px; background: var(--coral-soft); }.tradeoff-strip > div:last-child { background: var(--mint); }.tradeoff-strip strong { font-size: 12px; }.tradeoff-strip span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.reading-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 16px; }.line-list { display: grid; gap: 8px; }.line-button { display: grid; grid-template-columns: 27px 1fr; gap: 10px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--white); text-align: left; }.line-button > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font: 9px var(--mono); }.line-button code { font-size: 10px; }.line-button:hover, .line-button.active { border-color: var(--blue); background: var(--blue-soft); }.line-button.active > span { color: var(--white); background: var(--blue); }
.reading-inspector { display: flex; flex-direction: column; min-height: 310px; padding: 25px; border-radius: 18px; color: var(--white); background: var(--ink); }.reading-inspector .detail-kicker { color: var(--mint); }.reading-inspector h3 { margin: 21px 0 8px; font-size: 24px; letter-spacing: -.045em; }.reading-inspector > p { margin: 0; color: #c9d4cc; font-size: 12px; line-height: 1.6; }.reading-inspector > p code { color: var(--yellow); }.read-say { margin-top: 15px; padding: 11px; border-radius: 9px; color: var(--mint-deep); background: var(--mint); font-size: 10px; font-weight: 800; }.read-why { display: grid; gap: 3px; margin-top: auto; padding-top: 15px; color: #b9c4bc; font-size: 10px; }.read-why strong { color: var(--yellow); }.read-why span { line-height: 1.45; }
.worked-example { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-top: 15px; padding: 19px; border-radius: 16px; background: var(--mint); }.worked-example h3 { margin: 8px 0 3px; font-size: 19px; letter-spacing: -.04em; }.worked-example p { max-width: 540px; margin: 0; color: #41655b; font-size: 11px; }.worked-code { flex: 0 0 280px; padding: 13px; border-radius: 9px; color: #e3eee7; background: #202d29; font: 10px/1.65 var(--mono); }
.test-journey, .debug-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.test-step { padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }.test-step span { color: var(--blue); font: 10px var(--mono); font-weight: 900; }.test-step h3 { margin: 11px 0 5px; font-size: 17px; }.test-step p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.test-step code { display: inline-block; margin-top: 13px; padding: 5px 6px; border-radius: 5px; color: var(--blue); background: var(--blue-soft); font-size: 9px; }
.test-case { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 15px; padding: 21px; border-radius: 17px; background: var(--yellow-soft); }.test-case h3 { margin: 8px 0 5px; font-size: 20px; letter-spacing: -.04em; }.test-case p { max-width: 590px; margin: 0; color: #756a4b; font-size: 11px; line-height: 1.55; }.test-case-check { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; color: #8a731a; font: 9px var(--mono); }.test-case-check span { padding: 6px; border-radius: 6px; background: rgba(255,255,255,.52); }.test-case-check i { font-style: normal; }
.debug-flow { grid-template-columns: repeat(4, 1fr); }.debug-flow article { padding: 16px; border-radius: 14px; background: var(--white); border-top: 3px solid var(--coral); }.debug-flow article:nth-child(2) { border-color: var(--yellow); }.debug-flow article:nth-child(3) { border-color: var(--blue); }.debug-flow article:nth-child(4) { border-color: var(--mint-deep); }.debug-flow span { color: var(--muted); font: 9px var(--mono); }.debug-flow strong { display: block; margin-top: 9px; font-size: 12px; }.debug-flow p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.debug-case { display: grid; grid-template-columns: 1.05fr .95fr; gap: 14px; margin-top: 15px; }.debug-window { padding: 22px; border-radius: 17px; color: var(--white); background: var(--ink); }.debug-window .eyebrow { color: var(--mint); }.debug-window h3 { margin: 9px 0 6px; font-size: 20px; letter-spacing: -.04em; }.debug-window p { margin: 5px 0 0; color: #c3cec5; font-size: 11px; line-height: 1.55; }.debug-window code { color: var(--yellow); }.debug-list { display: grid; gap: 8px; }.debug-list > div { display: flex; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); }.debug-list span { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--white); background: var(--blue); font: 10px var(--mono); }.debug-list p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }.debug-list strong { color: var(--ink); }
.command-basics { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; }.command-choice-list { display: grid; gap: 8px; }.command-choice { display: grid; grid-template-columns: 66px 1fr; gap: 10px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--white); text-align: left; }.command-choice code { display: inline-block; padding: 5px; border-radius: 6px; color: var(--blue); background: var(--blue-soft); text-align: center; font-size: 10px; }.command-choice span { color: var(--muted); font-size: 10px; }.command-choice:hover, .command-choice.active { border-color: var(--blue); background: var(--blue-soft); }.command-choice.active code { color: var(--white); background: var(--blue); }
.command-meaning { display: flex; flex-direction: column; min-height: 344px; padding: 25px; border-radius: 18px; color: var(--white); background: var(--ink); }.command-meaning .detail-kicker { color: var(--mint); }.command-meaning h3 { margin: 20px 0 9px; font-size: 24px; letter-spacing: -.04em; }.command-meaning h3 code { color: var(--yellow); }.command-meaning > p { margin: 0; color: #c8d3ca; font-size: 12px; line-height: 1.6; }.command-meaning pre { margin: 18px 0 0; padding: 12px; border-radius: 9px; color: var(--mint); background: rgba(255,255,255,.08); font: 10px var(--mono); }.command-meaning #command-question { margin-top: auto; padding-top: 16px; color: var(--yellow); font-size: 10px; }
.windows-safety { display: flex; gap: 11px; margin-top: 15px; padding: 15px; border-radius: 13px; background: var(--mint); }.windows-safety > span { display: grid; flex: 0 0 25px; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--white); background: var(--mint-deep); font-weight: 900; }.windows-safety p { margin: 0; color: #41655b; font-size: 11px; line-height: 1.55; }.windows-safety strong { color: var(--ink); }
.project-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }.project-form, .project-plan { padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }.project-form h3 { margin: 8px 0 3px; font-size: 21px; letter-spacing: -.04em; }.project-form .button { margin-top: 17px; }.project-plan { display: flex; flex-direction: column; color: var(--white); background: var(--ink); }.project-plan h3 { margin: 10px 0 10px; font-size: 23px; letter-spacing: -.04em; }.project-plan ol { display: grid; gap: 8px; margin: 0; padding-left: 19px; color: #c8d3ca; font-size: 11px; line-height: 1.5; }.project-plan li::marker { color: var(--yellow); font-weight: 900; }.project-plan li strong { color: var(--white); }.project-plan > p { margin: auto 0 0; padding-top: 17px; color: var(--mint); font-size: 10px; line-height: 1.55; }
.project-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 15px; }.project-ladder > div { padding: 15px; border-radius: 13px; background: var(--blue-soft); }.project-ladder > div:nth-child(2) { background: var(--mint); }.project-ladder > div:nth-child(3) { background: var(--yellow-soft); }.project-ladder > div:nth-child(4) { background: var(--coral-soft); }.project-ladder span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: var(--white); background: var(--ink); font: 9px var(--mono); }.project-ladder strong { display: block; margin-top: 9px; font-size: 11px; }.project-ladder p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }

@media (max-width: 1120px) {
  .learning-loop { grid-template-columns: repeat(3, 1fr); }
  .outcomes-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .four-questions, .build-map, .project-ladder { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .mental-layout, .mini-app-lab, .reading-layout, .command-basics, .project-builder, .debug-case { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: repeat(2, 1fr); }
  .learning-loop { grid-template-columns: repeat(2, 1fr); }
  .test-journey { grid-template-columns: 1fr 1fr 1fr; }
  .debug-flow { grid-template-columns: 1fr 1fr; }
  .mental-inspector, .reading-inspector, .command-meaning { min-height: 0; }
}

@media (max-width: 540px) {
  .learning-loop, .outcomes-grid, .four-questions, .compare-grid, .myth-grid, .prediction-grid, .why-grid, .build-map, .tradeoff-strip, .test-journey, .debug-flow, .project-ladder { grid-template-columns: 1fr; }
  .loop-step, .compare-card, .reason-card { min-height: 0; }
  .mini-app-fields { grid-template-columns: 1fr; }
  .worked-example, .test-case { display: grid; }
  .worked-code { width: 100%; min-width: 0; }
}

@media (max-width: 820px) {
  .term-learning-layout, .code-lab { grid-template-columns: 1fr; }
  .term-grid { grid-template-columns: repeat(4, 1fr); }
  .mini-challenges { grid-template-columns: 1fr 1fr 1fr; }
  .term-inspector { position: static; min-height: 0; }
}

@media (max-width: 540px) {
  .lesson-path { display: grid; grid-template-columns: 1fr 1fr; }
  .path-connector { display: none; }
  .term-grid { grid-template-columns: repeat(2, 1fr); }
  .term-card { min-height: 83px; padding: 10px; }
  .term-inspector { padding: 18px; }
  .mini-challenges, .translation-strip { grid-template-columns: 1fr; }
  #code-editor, .code-output { min-height: 240px; }
}