:root {
  --ink: #15313a;
  --muted: #60757d;
  --line: #dce7e9;
  --paper: #ffffff;
  --wash: #f3f8f8;
  --teal: #00796b;
  --teal-dark: #07534c;
  --teal-soft: #dff5f1;
  --mint: #38d5bd;
  --amber: #f4b942;
  --amber-dark: #9b6500;
  --navy: #081c24;
  --navy-2: #102d35;
  --green: #1f8b55;
  --red: #bd3a3a;
  --blue: #3c82b9;
  --shadow: 0 18px 55px rgba(9, 43, 51, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--wash);
  font-family: "Almarai", "Segoe UI", Tahoma, sans-serif;
  line-height: 1.75;
}
a { color: inherit; text-decoration: none; }
button, textarea { font-family: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 100; top: -80px; right: 22px; padding: 10px 18px;
  border-radius: 0 0 12px 12px; color: #fff; background: var(--teal); font-weight: 800;
}
.skip-link:focus { top: 0; }
:where(a, button, textarea):focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.site-header {
  position: sticky; z-index: 30; top: 0; color: #fff;
  background: rgba(8, 28, 36, .94); border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
}
.header-row { min-height: 74px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; margin-inline-end: auto; }
.brand img { width: 43px; height: 43px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mint); }
.brand span { display: grid; line-height: 1.35; }
.brand strong { font-size: .96rem; }
.brand small { color: #9fb4bc; font-size: .68rem; }
.site-header nav { display: flex; align-items: center; gap: 4px; }
.site-header nav a { padding: 8px 11px; border-radius: 9px; color: #bed0d6; font-size: .82rem; font-weight: 700; }
.site-header nav a:hover, .site-header nav a.active { color: #fff; background: rgba(56,213,189,.14); }
.back-link {
  padding: 8px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px;
  color: #fff; font-size: .78rem; font-weight: 800;
}

.hero {
  position: relative; overflow: hidden; padding: 78px 0 0; color: #fff;
  background:
    radial-gradient(circle at 84% 10%, rgba(56,213,189,.2), transparent 32%),
    radial-gradient(circle at 8% 88%, rgba(60,130,185,.25), transparent 32%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .17;
  background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, #000, transparent 84%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 62px; align-items: center; }
.eyebrow, .section-kicker {
  display: inline-block; color: var(--teal); font-family: "JetBrains Mono", monospace;
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
}
.hero .eyebrow { color: var(--mint); direction: ltr; }
.hero h1 { margin: 11px 0 20px; font-family: "Amiri", serif; font-size: clamp(2.7rem, 5.3vw, 5.2rem); line-height: .97; }
.hero h1 em { color: var(--amber); font-style: normal; }
.hero-copy > p { max-width: 650px; margin: 0; color: #bfd0d6; font-size: 1.04rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.primary-action, .secondary-action {
  display: inline-flex; min-height: 48px; padding: 10px 20px; align-items: center; justify-content: center;
  border-radius: 12px; font-weight: 800; font-size: .88rem;
}
.primary-action { color: #10272e; background: var(--amber); box-shadow: 0 10px 28px rgba(244,185,66,.22); }
.secondary-action { color: #fff; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.05); }
.safety-line { margin-top: 18px; color: #95afb7; font-size: .78rem; }
.safety-line span { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-left: 6px; border-radius: 50%; color: #09242b; background: var(--mint); font-weight: 800; }

.code-visual { position: relative; direction: ltr; border: 1px solid rgba(255,255,255,.13); border-radius: 19px; background: #07171d; box-shadow: 0 28px 80px rgba(0,0,0,.35); transform: rotate(-1deg); }
.terminal-bar { display: flex; align-items: center; gap: 7px; height: 45px; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.terminal-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ed6a5e; }
.terminal-bar i:nth-child(2) { background: var(--amber); }
.terminal-bar i:nth-child(3) { background: #55c18c; }
.terminal-bar span { margin-left: auto; color: #6f8992; font: 600 .66rem "JetBrains Mono", monospace; }
.code-visual pre { min-height: 210px; margin: 0; padding: 32px; color: #d7e2e6; font: 600 clamp(.82rem, 1.5vw, 1rem)/2 "JetBrains Mono", monospace; white-space: pre-wrap; }
.code-blue { color: #7dc5f1; } .code-yellow { color: #ffd45e; } .code-green { color: #5fe0ad; }
.code-pink { color: #ef8cc3; } .code-text { color: #d5cb83; }
.terminal-result { display: flex; gap: 8px; align-items: center; padding: 13px 18px; color: #bdcdd2; background: #0c242b; font: .72rem "JetBrains Mono", monospace; }
.terminal-result span { color: var(--mint); } .terminal-result b { margin-left: auto; color: #62dda9; }
.floating-chip { position: absolute; padding: 7px 11px; border-radius: 9px; color: #10272e; font-size: .68rem; font-weight: 800; box-shadow: 0 10px 24px rgba(0,0,0,.24); }
.chip-one { top: 70px; right: -22px; background: var(--mint); }
.chip-two { bottom: 42px; left: -24px; background: var(--amber); }
.hero-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 62px; border: 1px solid rgba(255,255,255,.1); border-bottom: 0; border-radius: 18px 18px 0 0; background: rgba(255,255,255,.05); }
.hero-stats div { display: grid; gap: 1px; padding: 18px 22px; border-inline-start: 1px solid rgba(255,255,255,.1); }
.hero-stats div:first-child { border-inline-start: 0; }
.hero-stats strong { color: var(--amber); font-size: 1.4rem; }
.hero-stats span { color: #9fb5bc; font-size: .72rem; }

.lab-section { padding: 84px 0 92px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 31px; }
.section-heading h2, .next-step h2 { margin: 4px 0 0; color: var(--navy); font-family: "Amiri", serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }
.section-heading > p { max-width: 520px; margin: 0; color: var(--muted); font-size: .88rem; }
.section-heading.compact { margin-bottom: 27px; }
.lab-layout { display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 20px; align-items: start; }
.exercise-sidebar, .workspace-card { border: 1px solid var(--line); border-radius: 19px; background: var(--paper); box-shadow: 0 8px 32px rgba(15,49,57,.06); }
.exercise-sidebar { position: sticky; top: 94px; overflow: hidden; }
.progress-card { display: flex; align-items: center; gap: 14px; padding: 17px; color: #fff; background: linear-gradient(140deg, var(--teal-dark), var(--teal)); }
.progress-ring {
  position: relative; width: 72px; height: 72px; flex: 0 0 auto; display: grid; place-content: center; text-align: center;
  border-radius: 50%; background: conic-gradient(var(--amber) var(--lab-progress), rgba(255,255,255,.17) 0);
}
.progress-ring::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: var(--teal-dark); }
.progress-ring strong, .progress-ring span { position: relative; z-index: 1; line-height: 1.2; }
.progress-ring strong { font-size: 1rem; } .progress-ring span { color: #a9c7c5; font-size: .56rem; }
.progress-card > div:last-child { display: grid; min-width: 0; }
.progress-card small { color: #a9c7c5; font-size: .63rem; }
.progress-card b { font-size: .84rem; }
.progress-card button { justify-self: start; margin-top: 4px; padding: 0; border: 0; color: #c6dcda; background: none; font-size: .6rem; text-decoration: underline; }
.track-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 9px; gap: 5px; border-bottom: 1px solid var(--line); }
.track-switch button { padding: 9px 4px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .68rem; font-weight: 800; }
.track-switch button span { display: inline-grid; width: 19px; height: 19px; place-items: center; margin-right: 3px; border-radius: 50%; background: #e6edef; font-size: .57rem; }
.track-switch button.active { color: var(--teal-dark); background: var(--teal-soft); }
.exercise-list { max-height: 522px; overflow: auto; padding: 8px; scrollbar-color: #a8bfbe transparent; scrollbar-width: thin; }
.exercise-item { width: 100%; display: grid; grid-template-columns: 29px minmax(0,1fr) 17px; gap: 8px; align-items: center; padding: 10px 8px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; text-align: right; }
.exercise-item:hover { background: #f2f7f7; }
.exercise-item.active { background: var(--teal-soft); }
.exercise-item .num { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; font: 700 .65rem "JetBrains Mono", monospace; }
.exercise-item.done .num { color: #fff; border-color: var(--green); background: var(--green); }
.exercise-item .copy { display: grid; line-height: 1.4; min-width: 0; }
.exercise-item .copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .71rem; }
.exercise-item .copy small { color: var(--muted); font-size: .57rem; }
.exercise-item .state { color: #9badb3; font-size: .76rem; }
.exercise-item.done .state { color: var(--green); }

.workspace-card { overflow: hidden; }
.runtime-bar { min-height: 61px; display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 11px 20px; color: #dce8eb; background: var(--navy); }
.runtime-state { display: flex; align-items: center; gap: 10px; }
.runtime-state i { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #718890; box-shadow: 0 0 0 5px rgba(113,136,144,.12); }
.runtime-state i.loading { background: var(--amber); animation: pulse 1s infinite; }
.runtime-state i.ready { background: var(--mint); box-shadow: 0 0 0 5px rgba(56,213,189,.13); }
.runtime-state i.error { background: #ef6969; }
.runtime-state span { display: grid; line-height: 1.45; }
.runtime-state b { font-size: .74rem; } .runtime-state small { color: #78929b; font-size: .6rem; }
.runtime-badge { padding: 4px 8px; border: 1px solid rgba(56,213,189,.27); border-radius: 7px; color: var(--mint); font-size: .58rem; font-weight: 800; }
.exercise-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 23px 25px 19px; border-bottom: 1px solid var(--line); }
.exercise-number { color: var(--teal); font: 700 .65rem "JetBrains Mono", monospace; }
.exercise-head h3 { margin: 3px 0 5px; font-size: 1.15rem; }
.exercise-head p { margin: 0; color: var(--muted); font-size: .8rem; }
.exercise-head code, .feedback-box code, .hint-box code { padding: 2px 5px; border-radius: 5px; color: #0b5d53; background: #e4f3f0; font-family: "JetBrains Mono", monospace; direction: ltr; }
.difficulty { padding: 5px 9px; white-space: nowrap; border-radius: 8px; color: var(--amber-dark); background: #fff2d5; font-size: .63rem; font-weight: 800; }
.editor-grid { display: grid; grid-template-columns: 1.12fr .88fr; background: #091c23; direction: ltr; }
.editor-panel, .output-panel { min-width: 0; }
.output-panel { border-left: 1px solid #284048; }
.panel-title { height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; color: #829ba4; background: #0d252d; font: 600 .64rem "JetBrains Mono", monospace; direction: rtl; }
.panel-title button { padding: 3px 7px; border: 0; color: #9bb0b7; background: transparent; font-size: .6rem; }
#codeEditor {
  width: 100%; min-height: 355px; display: block; resize: vertical; margin: 0; padding: 21px;
  border: 0; border-radius: 0; outline: 0; color: #dfebee; caret-color: var(--amber); background: #081a21;
  font: 600 .84rem/1.85 "JetBrains Mono", Consolas, monospace; tab-size: 4; white-space: pre;
}
#codeEditor:focus { background: #0a2028; box-shadow: inset 0 0 0 2px rgba(56,213,189,.28); }
#codeOutput {
  min-height: 355px; max-height: 520px; overflow: auto; margin: 0; padding: 21px; color: #bed0d5;
  background: #06171d; font: .76rem/1.8 "JetBrains Mono", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.exercise-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 15px 22px; border-top: 1px solid #213a42; background: #0c2229; }
.exercise-actions button { min-height: 40px; padding: 7px 15px; border-radius: 9px; font-size: .72rem; font-weight: 800; }
.run-button { border: 0; color: #11282e; background: var(--amber); }
.check-button { border: 0; color: #fff; background: var(--teal); }
.hint-button { border: 1px solid #425a62; color: #becfd4; background: transparent; }
.exercise-actions button:disabled { cursor: wait; opacity: .5; }
.shortcut { margin-right: auto; color: #627b84; font: .56rem "JetBrains Mono", monospace; direction: ltr; }
.feedback-box, .hint-box { margin: 16px 22px 0; padding: 12px 14px; border-radius: 10px; font-size: .75rem; }
.feedback-box.success { color: #13623d; border: 1px solid #b6e2cb; background: #e9f8ef; }
.feedback-box.failure { color: #8c2e2e; border: 1px solid #efc7c7; background: #fff0f0; }
.hint-box { color: #714e0c; border: 1px solid #ecd69e; background: #fff8e5; }
.lesson-navigation { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 20px 22px; }
.lesson-navigation button { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-size: .67rem; font-weight: 700; }
.lesson-navigation button:disabled { opacity: .38; cursor: not-allowed; }
.lesson-dots { display: flex; justify-content: center; gap: 5px; }
.lesson-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d4dfe1; }
.lesson-dots i.active { width: 18px; border-radius: 4px; background: var(--teal); }

.learning-modes { padding: 78px 0; background: #fff; }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.mode-card { position: relative; min-height: 265px; overflow: hidden; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); transition: transform .22s, box-shadow .22s; }
a.mode-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.mode-card::after { content: ""; position: absolute; left: -35px; bottom: -55px; width: 150px; height: 150px; border-radius: 50%; background: var(--teal-soft); opacity: .7; }
.mode-icon { align-self: start; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #fff; background: var(--teal); font: 700 .68rem "JetBrains Mono", monospace; }
.mode-card small { margin-top: 27px; color: var(--teal); font-size: .63rem; font-weight: 800; }
.mode-card h3 { margin: 4px 0 7px; font-size: 1.05rem; }
.mode-card p { margin: 0; color: var(--muted); font-size: .76rem; }
.mode-card b { position: relative; z-index: 1; margin-top: auto; color: var(--teal-dark); font-size: .71rem; }
.mode-card.guide .mode-icon { background: var(--blue); }
.mode-card.guide::after { background: #e3f0fa; }
.mode-card.safe { color: #fff; border-color: var(--navy-2); background: var(--navy-2); }
.mode-card.safe .mode-icon { color: var(--navy); background: var(--amber); }
.mode-card.safe small, .mode-card.safe b { color: var(--amber); }
.mode-card.safe p { color: #adc0c6; }
.mode-card.safe::after { background: rgba(56,213,189,.1); }

.colab-learning {
  position: relative; overflow: hidden; padding: 86px 0 92px;
  background:
    radial-gradient(circle at 92% 4%, rgba(244,185,66,.14), transparent 25%),
    linear-gradient(180deg, #edf7f6 0%, #f8fbfb 100%);
  border-top: 1px solid #dcebea;
}
.colab-learning::before {
  content: ""; position: absolute; width: 280px; height: 280px; left: -120px; top: 170px;
  border: 54px solid rgba(0,121,107,.045); border-radius: 50%; pointer-events: none;
}
.colab-heading { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 38px; align-items: end; }
.colab-heading h2 { margin: 5px 0 8px; color: var(--navy); font-family: "Amiri", serif; font-size: clamp(2.15rem, 4.2vw, 3.35rem); line-height: 1.1; }
.colab-heading p { max-width: 760px; margin: 0; color: var(--muted); font-size: .88rem; }
.colab-heading-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: end; }
.colab-open, .colab-download {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px;
  border-radius: 11px; font-size: .72rem; font-weight: 800;
}
.colab-open { color: #fff; background: var(--teal); box-shadow: 0 9px 24px rgba(0,121,107,.18); }
.colab-download { color: var(--teal-dark); border: 1px solid #b8d8d4; background: #fff; }
.colab-roadmap {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 35px;
  border: 1px solid #cfe1df; border-radius: 17px; background: rgba(255,255,255,.82); box-shadow: 0 14px 38px rgba(10,55,62,.07);
}
.colab-roadmap article { min-height: 145px; display: flex; gap: 11px; padding: 20px 16px; border-inline-start: 1px solid #dfeae9; }
.colab-roadmap article:first-child { border-inline-start: 0; }
.colab-roadmap article > span {
  width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px;
  color: #fff; background: var(--teal); font: 700 .62rem "JetBrains Mono", monospace;
}
.colab-roadmap article:nth-child(4) > span { color: var(--navy); background: var(--amber); }
.colab-roadmap b { display: block; margin: 3px 0 5px; font-size: .76rem; }
.colab-roadmap p { margin: 0; color: var(--muted); font-size: .64rem; line-height: 1.75; }
.colab-roadmap em { color: var(--teal-dark); font-style: normal; font-weight: 700; direction: ltr; }
.colab-roadmap code { color: var(--teal-dark); font-family: "JetBrains Mono", monospace; }
.colab-roadmap kbd { padding: 1px 4px; border: 1px solid #cad8da; border-bottom-width: 2px; border-radius: 4px; color: #38545c; background: #fff; font: .58rem "JetBrains Mono", monospace; }
.colab-practice-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 52px 0 20px; }
.colab-practice-head span { color: var(--teal); font-size: .67rem; font-weight: 800; }
.colab-practice-head h3 { margin: 3px 0 0; color: var(--navy); font-family: "Amiri", serif; font-size: 2rem; line-height: 1.1; }
.colab-practice-head p { max-width: 580px; margin: 0; color: var(--muted); font-size: .75rem; }
.colab-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.colab-cell { overflow: hidden; border: 1px solid #d1e0e1; border-radius: 15px; background: #fff; box-shadow: 0 8px 26px rgba(12,54,62,.06); }
.colab-cell.wide-cell { grid-column: 1 / -1; }
.colab-cell header { min-height: 65px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 15px; border-bottom: 1px solid #19343c; background: #0d252d; }
.colab-cell header span { color: var(--mint); font: 600 .58rem "JetBrains Mono", monospace; }
.colab-cell header b { color: #fff; font-size: .75rem; }
.copy-colab-code {
  grid-column: 2; grid-row: 1 / 3; min-width: 92px; padding: 7px 10px; border: 1px solid #49626a;
  border-radius: 8px; color: #cfdee2; background: rgba(255,255,255,.04); font-size: .62rem; font-weight: 800;
}
.copy-colab-code:hover { color: #10272e; border-color: var(--amber); background: var(--amber); }
.copy-colab-code.copied { color: #0a3e34; border-color: var(--mint); background: var(--mint); }
.colab-cell pre { min-height: 190px; max-height: 410px; overflow: auto; margin: 0; padding: 19px; color: #cddde1; background: #071a21; font: .72rem/1.8 "JetBrains Mono", Consolas, monospace; white-space: pre; direction: ltr; }
.colab-cell.wide-cell pre { min-height: 260px; }
.colab-cell.result-cell pre { min-height: 180px; }
.colab-cell > p { margin: 0; padding: 12px 15px; color: var(--muted); font-size: .66rem; }
.colab-cell > p code { padding: 2px 5px; border-radius: 5px; color: var(--teal-dark); background: var(--teal-soft); font-family: "JetBrains Mono", monospace; }
.colab-cell.gpu-cell { border-color: #e7cf93; }
.colab-cell.gpu-cell header { box-shadow: inset -4px 0 var(--amber); }
.colab-safety { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin-top: 22px; border: 1px solid #183941; border-radius: 15px; background: #23434a; }
.colab-safety div { min-height: 130px; padding: 20px; color: #fff; background: var(--navy-2); }
.colab-safety b { color: var(--amber); font-size: .75rem; }
.colab-safety p { margin: 6px 0 0; color: #acc0c6; font-size: .66rem; }
.colab-safety code { color: var(--mint); font-family: "JetBrains Mono", monospace; }

.next-step { padding: 82px 0; color: #fff; background: linear-gradient(135deg, #064d48, #087c70); }
.next-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 60px; align-items: center; }
.next-step .section-kicker { color: var(--amber); }
.next-step h2 { color: #fff; }
.next-step p { color: #c5dcd9; font-size: .87rem; }
.readiness-list { display: grid; gap: 7px; margin-top: 18px; }
.readiness-list span { color: #b9d4d0; font-size: .73rem; }
.readiness-list span.done { color: #fff; font-weight: 800; }
.transition-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.transition-cards a { display: grid; min-height: 156px; padding: 20px; border: 1px solid rgba(255,255,255,.17); border-radius: 15px; background: rgba(255,255,255,.08); }
.transition-cards a:hover { background: rgba(255,255,255,.13); }
.transition-cards small { color: #8ed7cd; font-size: .62rem; }
.transition-cards b { align-self: center; font-size: .9rem; }
.transition-cards span { align-self: end; color: var(--amber); font-size: .65rem; }

footer { color: #9ab0b7; background: var(--navy); }
.footer-row { min-height: 102px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-row div { display: grid; } .footer-row strong { color: #fff; font-size: .8rem; }
.footer-row span { font-size: .63rem; } .footer-row a { color: var(--mint); font-size: .68rem; font-weight: 800; }

@keyframes pulse { 50% { opacity: .45; transform: scale(.82); } }
@media (max-width: 970px) {
  .site-header nav { display: none; }
  .hero-grid, .next-grid { grid-template-columns: 1fr; }
  .code-visual { max-width: 650px; }
  .lab-layout { grid-template-columns: 1fr; }
  .exercise-sidebar { position: static; }
  .exercise-list { max-height: 250px; }
  .mode-grid { grid-template-columns: 1fr 1fr; }
  .mode-card.safe { grid-column: 1 / -1; min-height: 220px; }
  .colab-heading { grid-template-columns: 1fr; gap: 20px; }
  .colab-heading-actions { justify-content: start; }
  .colab-roadmap { grid-template-columns: 1fr 1fr; }
  .colab-roadmap article { border-top: 1px solid #dfeae9; }
  .colab-roadmap article:nth-child(-n+2) { border-top: 0; }
  .colab-roadmap article:nth-child(odd) { border-inline-start: 0; }
  .colab-roadmap article:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .shell { width: min(100% - 24px, 1180px); }
  .header-row { min-height: 65px; gap: 10px; }
  .brand small { display: none; }
  .back-link { padding: 7px 10px; }
  .hero { padding-top: 52px; }
  .hero-grid { gap: 38px; }
  .hero h1 { font-size: 2.75rem; }
  .code-visual { transform: none; }
  .chip-one { right: -6px; } .chip-two { left: -6px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats div:nth-child(3) { border-inline-start: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .hero-stats div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.1); }
  .lab-section, .learning-modes, .colab-learning, .next-step { padding: 56px 0; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 10px; }
  .editor-grid { grid-template-columns: 1fr; }
  .output-panel { border-left: 0; border-top: 1px solid #284048; }
  #codeEditor, #codeOutput { min-height: 270px; }
  .exercise-head { padding: 19px 16px; }
  .exercise-actions { padding: 13px; }
  .exercise-actions button { flex: 1 1 30%; }
  .shortcut { width: 100%; text-align: center; margin: 2px 0 0; }
  .feedback-box, .hint-box { margin-inline: 13px; }
  .lesson-navigation { padding-inline: 13px; }
  .lesson-dots { display: none; }
  .mode-grid, .transition-cards { grid-template-columns: 1fr; }
  .mode-card.safe { grid-column: auto; }
  .colab-heading-actions { display: grid; }
  .colab-roadmap, .colab-cells, .colab-safety { grid-template-columns: 1fr; }
  .colab-roadmap article, .colab-roadmap article:nth-child(-n+2) { min-height: 0; border-top: 1px solid #dfeae9; border-inline-start: 0; }
  .colab-roadmap article:first-child { border-top: 0; }
  .colab-roadmap article:last-child, .colab-cell.wide-cell { grid-column: auto; }
  .colab-practice-head { display: block; margin-top: 40px; }
  .colab-practice-head p { margin-top: 9px; }
  .colab-cell header { grid-template-columns: 1fr; }
  .copy-colab-code { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 5px; }
  .colab-cell pre, .colab-cell.wide-cell pre { min-height: 0; font-size: .64rem; }
  .footer-row { padding: 22px 0; display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .site-header, .hero, .exercise-actions, .lesson-navigation, .learning-modes, .colab-learning, .next-step, footer { display: none !important; }
  .lab-section { padding: 0; } .lab-layout { display: block; } .exercise-sidebar { display: none; }
  .workspace-card { box-shadow: none; } .editor-grid { color: #000; background: #fff; }
  #codeEditor, #codeOutput { color: #000; background: #fff; }
}