:root {
  color-scheme: light;
  --bg: oklch(97.8% 0.006 255);
  --bg-strong: oklch(95.4% 0.01 255);
  --surface: oklch(99.4% 0.003 255);
  --surface-soft: oklch(96.2% 0.007 255);
  --surface-tint: oklch(94.2% 0.035 263);
  --ink: oklch(22% 0.02 264);
  --ink-soft: oklch(30% 0.02 264);
  --ink-text: #ffffff;
  --ink-muted: oklch(85% 0.01 264);
  --text: oklch(22% 0.02 264);
  --muted: oklch(48% 0.02 264);
  --line: oklch(89.5% 0.012 255);
  --line-strong: oklch(79% 0.018 255);
  --primary: oklch(52% 0.16 263);
  --primary-ink: #ffffff;
  --teal: oklch(56% 0.11 190);
  --blue: oklch(52% 0.16 263);
  --indigo: oklch(55% 0.15 292);
  --red: oklch(58% 0.18 25);
  --purple: oklch(55% 0.15 315);
  --amber: oklch(60% 0.13 75);
  --cyan: oklch(58% 0.1 220);
  --green: oklch(56% 0.13 152);
  --shadow: 0 18px 46px rgba(24, 32, 56, 0.08);
  --shadow-soft: 0 8px 24px rgba(24, 32, 56, 0.055);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --sidebar: 272px;
  --font-display: "Sora", "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(20% 0.014 264);
  --bg-strong: oklch(17% 0.016 264);
  --surface: oklch(24% 0.018 264);
  --surface-soft: oklch(27% 0.018 264);
  --surface-tint: oklch(30% 0.05 263);
  --ink: oklch(10% 0.014 264);
  --ink-soft: oklch(90% 0.012 264);
  --ink-text: #ffffff;
  --ink-muted: oklch(78% 0.01 264);
  --text: oklch(92% 0.008 264);
  --muted: oklch(68% 0.02 264);
  --line: oklch(33% 0.02 264);
  --line-strong: oklch(40% 0.02 264);
  --primary: oklch(72% 0.13 263);
  --primary-ink: oklch(14% 0.02 264);
  --teal: oklch(72% 0.1 190);
  --blue: oklch(72% 0.13 263);
  --indigo: oklch(74% 0.13 292);
  --red: oklch(72% 0.15 25);
  --purple: oklch(74% 0.13 315);
  --amber: oklch(76% 0.13 75);
  --cyan: oklch(74% 0.09 220);
  --green: oklch(74% 0.13 152);
  --shadow: none;
  --shadow-soft: none;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(180deg, var(--surface) 0, var(--bg) 260px),
    var(--bg);
  font-family: var(--font-body);
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--primary);
}

a:hover {
  color: color-mix(in srgb, var(--primary), black 15%);
}

::selection {
  background: var(--surface-tint);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-sm);
}

input:focus,
textarea:focus,
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

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

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--text);
  background: var(--bg);
  text-align: center;
}

.boot-screen strong {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

.boot-screen span {
  color: var(--muted);
}

.app-shell {
  width: min(1780px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface), var(--bg) 30%);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "brand" "xp" "nav" "goal";
  gap: 20px;
  overflow: auto;
}

.brand {
  grid-area: brand;
}

.sidebar-xp {
  grid-area: xp;
}

.nav-list {
  grid-area: nav;
}

.daily-goal {
  grid-area: goal;
}

.app-main {
  min-width: 0;
  padding: 18px;
}

.brand {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 11px;
  min-height: auto;
  padding: 2px 4px 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--primary-ink);
  background: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary), transparent 74%);
}

.brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
}

.brand span,
.brand small {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.25;
}

.sidebar-xp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-soft);
}

.sidebar-xp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.sidebar-xp-row .streak-flame {
  color: var(--amber);
}

.sidebar-xp .progress-line {
  height: 6px;
}

.sidebar-xp-total {
  font-size: 0.72rem;
  color: var(--muted);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-group + .nav-group {
  margin-top: 16px;
}

.nav-group-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted), var(--text) 15%);
  padding: 0 10px 5px;
}

.nav-list {
  display: grid;
  gap: 16px;
  align-content: start;
}

.nav-item {
  min-height: auto;
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.nav-item:hover {
  color: var(--text);
  background: var(--surface);
}

.nav-item.active {
  color: var(--primary-ink);
  background: var(--primary);
}

.nav-item span:first-child {
  min-width: 0;
  display: block;
  font-weight: 600;
  line-height: 1.15;
}

.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--muted), transparent 20%);
}

.nav-item.active .nav-dot {
  background: var(--primary-ink);
}

.nav-item small {
  display: none;
}

.daily-goal {
  border: 1px solid color-mix(in srgb, var(--primary), transparent 78%);
  border-radius: var(--radius);
  padding: 13px 14px;
  background: color-mix(in srgb, var(--primary), var(--surface) 92%);
  box-shadow: none;
}

.daily-goal strong {
  font-family: var(--font-display);
  color: var(--primary);
}

.daily-goal p {
  margin: 3px 0 8px;
  color: var(--ink-soft);
  line-height: 1.4;
  font-size: 0.88rem;
}

.daily-goal .progress-line {
  background: var(--surface);
  height: 6px;
}

.pill {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 9px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.78rem;
  font-weight: 850;
}

.pill.success {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green), var(--line) 45%);
  background: color-mix(in srgb, var(--green), var(--surface) 90%);
}

.app-topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.app-topbar h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.15;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.readiness-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  white-space: nowrap;
}

.readiness-pill strong {
  color: var(--primary);
  font-weight: 700;
}

.global-search {
  width: min(430px, 42vw);
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.global-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
}

.icon-button,
.bookmark-mini {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: inline-grid;
  place-items: center;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.bookmark-mini {
  width: 34px;
  height: 34px;
  box-shadow: none;
  color: var(--amber);
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 860;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

.panel,
.hero-panel,
.metric-card,
.module-card,
.exercise-card,
.exam-start {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.panel {
  padding: 18px;
}

.panel h2,
.panel h3,
.hero-panel h2,
.metric-card strong,
.module-card strong,
.exercise-card h3 {
  margin: 0;
  letter-spacing: 0;
  font-family: var(--font-display);
}

.panel p,
.hero-panel p,
.exercise-card p {
  line-height: 1.5;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-heading h2 {
  font-size: 1.16rem;
}

.button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 800;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.button:hover,
.icon-button:hover,
.bookmark-mini:hover,
.prompt-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary), var(--line) 55%);
}

.button.primary {
  color: var(--primary-ink);
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary), transparent 78%);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}

.button.secondary {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary), var(--line) 58%);
  background: color-mix(in srgb, var(--primary), var(--surface) 91%);
}

.button.ghost {
  color: var(--muted);
  background: transparent;
}

.button.big {
  min-height: 52px;
  padding: 0 20px;
  font-size: 1rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(340px, 2.1fr) repeat(4, minmax(138px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.hero-panel {
  min-height: 190px;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
  gap: 18px;
  color: var(--ink-text);
  background: var(--ink);
  border-color: var(--ink);
}

.hero-panel > div:first-child {
  min-width: 0;
}

.hero-panel .eyebrow {
  color: var(--amber);
}

.hero-panel h2 {
  max-width: 720px;
  color: var(--ink-text);
  font-size: clamp(1.4rem, 1.8vw, 1.9rem);
  line-height: 1.2;
  overflow-wrap: break-word;
}

.hero-panel p:not(.eyebrow) {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: 1.03rem;
}

.readiness-ring {
  --value: 0;
  width: 156px;
  height: 156px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, var(--surface) 0 58%, transparent 59%),
    conic-gradient(var(--primary) calc(var(--value) * 1%), var(--line) 0);
}

.readiness-ring strong {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.readiness-ring span {
  max-width: 92px;
  margin-top: -58px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 780;
  text-align: center;
}

.metric-card {
  min-height: 168px;
  padding: 16px;
  display: grid;
  align-content: space-between;
  overflow: hidden;
  position: relative;
}

.metric-card::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -46px;
  width: 106px;
  height: 106px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary), transparent 82%);
}

.metric-card.xp::after {
  background: color-mix(in srgb, var(--amber), transparent 78%);
}

.metric-card.streak::after {
  background: color-mix(in srgb, var(--red), transparent 82%);
}

.metric-card.lessons::after {
  background: color-mix(in srgb, var(--blue), transparent 82%);
}

.metric-card.exercise::after {
  background: color-mix(in srgb, var(--green), transparent 82%);
}

.metric-card span,
.metric-card small {
  color: var(--muted);
  font-weight: 760;
}

.metric-card strong {
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  line-height: 1;
  z-index: 1;
}

.content-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.content-grid.two {
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.75fr);
}

.content-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-grid.one {
  grid-template-columns: 1fr;
}

.academy-mode {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  grid-template-columns: 1fr;
}

.academy-mode .app-sidebar {
  display: none;
}

.academy-mode .app-main {
  min-height: 100vh;
  padding: 0;
}

.academy {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  background:
    linear-gradient(180deg, var(--surface) 0, var(--bg) 260px),
    var(--bg);
}

.academy-header {
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: color-mix(in srgb, var(--surface), transparent 4%);
  box-shadow: var(--shadow-soft);
}

.academy-brand {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.academy-brand strong {
  display: block;
  font-family: var(--font-display);
  line-height: 1.1;
}

.academy-brand span,
.academy-progress span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.academy-progress {
  display: grid;
  gap: 8px;
}

.academy-nav {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.academy-path {
  min-height: 78px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x mandatory;
}

.path-step {
  flex: 0 0 190px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  text-align: left;
  scroll-snap-align: start;
}

.path-step span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface-soft);
  font-weight: 900;
}

.path-step strong {
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.2;
}

.path-step.active {
  border-color: color-mix(in srgb, var(--primary), var(--line) 24%);
  background: color-mix(in srgb, var(--primary), var(--surface) 92%);
}

.path-step.active span,
.path-step.done span {
  color: var(--primary-ink);
  background: var(--primary);
}

.academy-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.75fr);
  grid-template-rows: minmax(0, auto) minmax(260px, 1fr);
  gap: 12px;
}

.academy-instructions,
.academy-practice,
.study-chat {
  min-height: 0;
  overflow: auto;
}

.academy-instructions {
  grid-row: 1 / span 2;
  padding: clamp(18px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-content: start;
}

.academy-instructions h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 3.45rem);
  line-height: 1.04;
  text-wrap: balance;
}

.academy-instructions p:not(.eyebrow) {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.55;
}

.read-hero {
  min-width: 0;
}

.reading-block,
.examples-block {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-soft);
}

.reading-block {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1.1fr);
  gap: 16px 22px;
  align-items: start;
}

.reading-block .step-label,
.reading-block h3 {
  grid-column: 1;
}

.reading-block p {
  grid-column: 1;
  margin: 0;
}

.reading-block h4,
.reading-block ul {
  grid-column: 2;
}

.reading-block h3,
.examples-block h3,
.reading-block h4 {
  margin: 8px 0 0;
}

.reading-block ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.55;
}

.examples-block {
  display: grid;
  gap: 12px;
}

.example-card,
.mini-example {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.example-card {
  padding: 14px;
}

.example-card p {
  margin: 6px 0 0;
}

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

.mini-example {
  min-height: 160px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.mini-example span {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--primary-ink);
  background: var(--primary);
  font-weight: 900;
}

.mini-example em {
  color: var(--primary);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mini-example p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mini-example strong {
  font-size: 0.98rem;
}

.mini-example.model-answer {
  border-color: color-mix(in srgb, var(--primary), var(--line) 35%);
  background: color-mix(in srgb, var(--primary), var(--surface) 94%);
}

.academy-tabs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.academy-tabs article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-soft);
}

.academy-tabs h3,
.academy-practice h3 {
  margin: 8px 0 10px;
}

.academy-tabs p,
.academy-tabs ul {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.academy-tabs ul {
  padding-left: 20px;
}

.academy-practice {
  padding: clamp(18px, 2vw, 24px);
  display: grid;
  gap: 14px;
  align-content: start;
}

.study-chat {
  padding: 16px;
  display: grid;
  grid-template-rows: auto minmax(130px, 1fr) auto auto;
  gap: 10px;
}

.study-chat-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.study-chat-head h3 {
  margin: 4px 0 0;
}

.study-chat-head > span {
  border: 1px solid color-mix(in srgb, var(--green), var(--line) 45%);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--green);
  background: color-mix(in srgb, var(--green), var(--surface) 92%);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.study-chat-log {
  min-height: 130px;
  max-height: 260px;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 4px;
}

.study-chat-log .chat {
  max-width: 100%;
  font-size: 0.92rem;
}

.study-chat-prompts {
  display: grid;
  gap: 6px;
}

.prompt-button.compact {
  min-height: 34px;
  margin-top: 0;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
}

.study-chat-input {
  grid-template-columns: minmax(0, 1fr) auto;
}

.academy-practice .quiz-options {
  grid-template-columns: 1fr;
}

.academy-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.learn-shell {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(230px, 300px);
  gap: 14px;
  align-items: start;
}

.learn-sidebar,
.learn-next {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
}

.learn-sidebar h2,
.learn-next h3,
.learn-main h2,
.learn-main h3 {
  margin: 0;
}

.learn-topic-list {
  max-height: calc(100vh - 260px);
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 4px;
}

.learn-topic {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  color: var(--text);
  background: var(--surface-soft);
  cursor: pointer;
  text-align: left;
}

.learn-topic span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface);
  font-weight: 900;
}

.learn-topic strong {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.learn-topic small {
  grid-column: 2;
  color: var(--muted);
}

.learn-topic.active {
  border-color: color-mix(in srgb, var(--primary), var(--line) 30%);
  background: color-mix(in srgb, var(--primary), var(--surface) 92%);
}

.learn-topic.active span,
.learn-topic.done span {
  color: var(--primary-ink);
  background: var(--primary);
}

.learn-main {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 28px);
}

.learn-lesson-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.learn-lesson-header h2 {
  max-width: 820px;
  font-size: clamp(1.9rem, 2.45vw, 2.75rem);
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.learn-lesson-header p:not(.eyebrow) {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.55;
}

.learn-priority {
  border: 1px solid color-mix(in srgb, var(--primary), var(--line) 45%);
  border-radius: 999px;
  padding: 7px 12px;
  align-self: start;
  justify-self: end;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary), var(--surface) 92%);
  font-weight: 850;
  white-space: nowrap;
}

.lesson-jumps {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lesson-jumps button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  background: var(--surface);
  font-weight: 850;
  cursor: pointer;
}

.lesson-jumps button.active {
  color: var(--primary-ink);
  border-color: var(--primary);
  background: var(--primary);
}

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

.explain-card,
.practice-panel,
.exam-focus {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-soft);
}

.explain-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.explain-card.wide {
  grid-column: 1 / -1;
}

.explain-card p,
.practice-panel p,
.exam-focus p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.explain-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.55;
}

.step-label {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.practice-panel {
  display: grid;
  gap: 12px;
}

.learn-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

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

.module-card {
  min-height: 186px;
  padding: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.module-card:hover,
.module-card.active {
  border-color: color-mix(in srgb, var(--primary), var(--line) 35%);
  background: color-mix(in srgb, var(--primary), var(--surface) 94%);
}

.module-card small,
.module-card em {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
  font-style: normal;
}

.module-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--primary);
  font-weight: 920;
}

.module-icon.teal {
  background: var(--teal);
}

.module-icon.blue {
  background: var(--blue);
}

.module-icon.indigo {
  background: var(--indigo);
}

.module-icon.red {
  background: var(--red);
}

.module-icon.purple {
  background: var(--purple);
}

.module-icon.amber {
  background: var(--amber);
}

.module-icon.cyan {
  background: var(--cyan);
}

.module-icon.green {
  background: var(--green);
}

.progress-line {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
}

.progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.weak-row,
.bar-row,
.badge-row {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.weak-row:first-of-type,
.badge-row:first-of-type {
  border-top: 0;
}

.weak-row span,
.history-line,
.badge-row small {
  color: var(--muted);
}

.large-date {
  margin: 10px 0 6px;
  color: var(--primary);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  font-weight: 880;
}

.history-line {
  margin: 9px 0 0;
}

.badge-row {
  grid-template-columns: 28px 1fr;
  align-items: start;
}

.badge-row span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.badge-row.unlocked span {
  color: var(--amber);
}

.badge-row small {
  display: block;
  margin-top: 2px;
}

.course-layout {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.module-column {
  display: grid;
  gap: 9px;
}

.module-column .module-card {
  min-height: 118px;
}

.course-panel {
  min-height: calc(100vh - 126px);
}

.course-hero {
  min-height: 148px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.course-hero .module-icon {
  width: 64px;
  height: 64px;
  font-size: 1.35rem;
}

.course-hero h2 {
  font-size: clamp(1.8rem, 3vw, 3.4rem);
  line-height: 1;
}

.course-hero p:not(.eyebrow) {
  margin: 9px 0 0;
  color: var(--muted);
}

.lesson-list {
  display: grid;
  gap: 10px;
}

.lesson-row {
  min-height: 78px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.lesson-row:hover {
  border-color: color-mix(in srgb, var(--primary), var(--line) 45%);
}

.lesson-row.done {
  background: color-mix(in srgb, var(--green), var(--surface) 93%);
}

.lesson-row > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary), var(--surface) 90%);
  font-weight: 900;
}

.lesson-row small,
.lesson-row em {
  color: var(--muted);
  font-size: 0.86rem;
  font-style: normal;
}

.lesson-row strong {
  display: block;
  margin-bottom: 4px;
}

.lesson-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: 14px;
  align-items: start;
}

.lesson-main {
  padding: 0;
  overflow: hidden;
}

.lesson-header {
  min-height: 238px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.lesson-header h2 {
  margin: 0;
  max-width: 860px;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 0.96;
}

.lesson-header p:not(.eyebrow) {
  max-width: 920px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.lesson-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.lesson-tabs section {
  min-height: 166px;
  padding: 16px;
  background: var(--surface);
}

.lesson-tabs h3,
.study-block h3,
.diagram-block h3,
.quiz-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.lesson-tabs p,
.study-block p,
.quiz-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

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

.study-block,
.diagram-block,
.quiz-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-soft);
}

.study-block.wide {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--blue), var(--line) 42%);
  background: color-mix(in srgb, var(--blue), var(--surface) 94%);
}

.study-block ul,
.lesson-side ol,
.order-list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.5;
}

.study-block li + li,
.lesson-side li + li,
.order-list li + li {
  margin-top: 5px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 760;
}

.diagram-block,
.quiz-card {
  margin: 0 16px 16px;
}

.network-diagram,
.flow-diagram,
.er-diagram {
  display: grid;
  gap: 10px;
  align-items: center;
}

.network-diagram {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.flow-diagram {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.er-diagram {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.network-diagram span,
.flow-diagram span,
.er-diagram span,
.er-diagram b {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface);
  text-align: center;
  font-weight: 830;
}

.flow-diagram span:not(:last-child),
.network-diagram span:not(:last-child) {
  position: relative;
}

.flow-diagram span:not(:last-child)::after,
.network-diagram span:not(:last-child)::after {
  content: ">";
  position: absolute;
  right: -10px;
  color: var(--muted);
  font-weight: 900;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.quiz-option {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font-weight: 760;
}

.quiz-option:hover {
  border-color: var(--primary);
}

.quiz-option.selected {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue), var(--surface) 92%);
}

.quiz-option.correct {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green), var(--surface) 88%);
}

.feedback,
.answer-box,
.exam-result {
  border-radius: var(--radius);
  padding: 11px 12px;
  line-height: 1.45;
}

.feedback.ok,
.answer-box.ok,
.review-row.ok {
  border-color: color-mix(in srgb, var(--green), var(--line) 35%);
  background: color-mix(in srgb, var(--green), var(--surface) 90%);
}

.feedback.bad,
.answer-box.bad,
.review-row.bad {
  border-color: color-mix(in srgb, var(--red), var(--line) 35%);
  background: color-mix(in srgb, var(--red), var(--surface) 91%);
}

.lesson-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 18px;
}

.lesson-side .panel h3 {
  margin: 0 0 10px;
}

.vocab-mini {
  min-height: 50px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
  display: grid;
  gap: 2px;
}

.vocab-mini:first-of-type {
  border-top: 0;
}

.vocab-mini span {
  color: var(--muted);
}

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

.segmented-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px;
  background: var(--surface-soft);
}

.segmented {
  min-height: 34px;
  min-width: 72px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 810;
}

.segmented.active {
  color: var(--primary-ink);
  background: var(--primary);
}

.exercise-card {
  min-height: 310px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.exercise-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.exercise-meta .bookmark-mini {
  margin-left: auto;
}

.exercise-card h3 {
  font-size: 1.12rem;
  line-height: 1.2;
}

.exercise-card p {
  margin: 0;
  color: var(--muted);
}

.answer-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.text-input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface-soft);
  outline: none;
}

.text-input,
select {
  min-height: 42px;
  padding: 0 11px;
}

textarea {
  padding: 12px;
  resize: vertical;
}

.text-input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 82%);
}

.order-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 12px 12px 32px;
  background: var(--surface-soft);
}

.answer-box {
  border: 1px solid var(--line);
}

.answer-box strong {
  display: block;
  margin-bottom: 5px;
}

.exam-start {
  min-height: 320px;
  padding: 24px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
}

.exam-start h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}

.exam-start p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.exam-result {
  display: grid;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--primary), var(--line) 45%);
  background: color-mix(in srgb, var(--primary), var(--surface) 92%);
}

.exam-layout {
  display: grid;
}

.exam-paper {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

.sticky-heading {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 10px 0;
  background: var(--surface);
}

.timer-chip {
  min-width: 100px;
  min-height: 42px;
  border: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--ink-text);
  background: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.exam-question,
.review-row {
  border-top: 1px solid var(--line);
  padding: 18px 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
}

.exam-question p,
.review-row p {
  margin: 7px 0 0;
  color: var(--muted);
}

.review-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 10px;
}

.review-row small {
  display: block;
  margin-top: 5px;
}

.question-number {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary), var(--surface) 90%);
  font-weight: 900;
}

.vocab-table {
  display: grid;
  gap: 8px;
}

.vocab-row {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(150px, 0.6fr) minmax(130px, 0.45fr) minmax(260px, 1.3fr) auto;
  align-items: center;
  gap: 12px;
  background: var(--surface-soft);
}

.vocab-row small,
.vocab-row em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-style: normal;
}

.vocab-row p {
  margin: 0;
}

.flash-layout,
.tutor-layout,
.notes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.65fr);
  gap: 14px;
  align-items: start;
}

.flash-super-card {
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
}

.flash-super-card.flipped {
  border-color: var(--line);
  background: var(--surface);
}

.flash-super-card span {
  max-width: 760px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
}

.flash-super-card small {
  color: var(--muted);
  font-weight: 800;
}

.bar-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.tutor-chat {
  min-height: calc(100vh - 126px);
  display: grid;
  grid-template-rows: auto minmax(360px, 1fr) auto;
}

.chat-log {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 6px 0 12px;
}

.chat {
  max-width: min(720px, 86%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  line-height: 1.45;
  background: var(--surface-soft);
}

.chat.user {
  justify-self: end;
  color: var(--primary-ink);
  border-color: var(--primary);
  background: var(--primary);
}

.prompt-button {
  width: 100%;
  min-height: 46px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text);
  background: var(--surface-soft);
  cursor: pointer;
  text-align: left;
}

.note-editor {
  min-height: 520px;
  margin-top: 12px;
  line-height: 1.55;
}

.note-preview {
  min-height: 520px;
}

.note-preview-body {
  margin-top: 12px;
  line-height: 1.55;
}

.note-preview-body h1,
.note-preview-body h2,
.note-preview-body h3 {
  margin: 12px 0 8px;
}

.note-preview-body ul {
  padding-left: 22px;
}

.admin-list,
.schema-list,
.source-list,
.search-sections {
  display: grid;
  gap: 10px;
}

.admin-list button,
.schema-list div {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-soft);
}

.admin-list button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.admin-list button span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 760;
}

.schema-list code {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  white-space: normal;
}

.source-panel {
  grid-column: 1 / -1;
}

.source-list {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.source-list a {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  align-items: center;
  color: var(--blue);
  background: var(--surface-soft);
  text-decoration: none;
  line-height: 1.35;
}

.search-sections {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.search-hit {
  width: 100%;
  min-height: 72px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: grid;
  gap: 5px;
  color: var(--text);
  background: var(--surface-soft);
  cursor: pointer;
  text-align: left;
  font-weight: 800;
}

.search-hit.static {
  cursor: default;
}

.search-hit span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 520;
  line-height: 1.35;
}

.empty-state {
  min-height: 120px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--muted);
  background: var(--surface-soft);
  text-align: center;
}

.landing-hero {
  min-height: min(620px, calc(100vh - 124px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.58fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 14px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.landing-copy h2 {
  max-width: 820px;
  margin: 16px 0 0;
  font-size: clamp(2.35rem, 4.35vw, 4.85rem);
  line-height: 1;
  text-wrap: balance;
}

.landing-copy p {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.55;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.trust-row span,
.feature-grid span {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  background: var(--surface);
  font-weight: 760;
}

.demo-device {
  min-height: 430px;
  border: none;
  border-radius: var(--radius-lg);
  padding: 26px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  color: var(--ink-text);
  background: var(--ink);
}

.demo-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.window-dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.window-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.window-dots span:nth-child(1) {
  background: var(--red);
}

.window-dots span:nth-child(2) {
  background: var(--amber);
}

.window-dots span:nth-child(3) {
  background: var(--green);
}

.demo-top strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-weight: 700;
}

.demo-top em {
  color: var(--amber);
  font-style: normal;
  font-size: 1.35rem;
  font-weight: 700;
  white-space: nowrap;
}

.demo-chart {
  min-height: 80px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 8px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.demo-chart span {
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink-text), transparent 65%);
}

.demo-chart span:nth-child(4) {
  background: var(--primary);
}

.demo-list {
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--ink-text), var(--ink) 88%);
}

.demo-list strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.demo-list p {
  margin: 0;
  line-height: 1.5;
}

.premium-panel {
  border: none;
  color: var(--ink-text);
  background: var(--ink);
}

.premium-panel .eyebrow {
  color: var(--amber);
}

.premium-panel p:not(.eyebrow) {
  color: var(--ink-muted);
}

.premium-panel .feature-grid span {
  color: var(--ink-text);
  border-color: transparent;
  background: color-mix(in srgb, var(--ink-text), var(--ink) 88%);
}

.landing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.roadmap-list,
.mission-list,
.attempt-grid,
.test-list {
  display: grid;
  gap: 10px;
}

.roadmap-row,
.mission-row,
.leader-row,
.attempt-card,
.next-lesson {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-soft);
}

.roadmap-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
}

.roadmap-row > span,
.leader-row > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary), var(--surface) 90%);
  font-weight: 900;
}

.roadmap-row p,
.mission-row small,
.leader-row small,
.next-lesson small,
.testimonial span {
  margin: 4px 0 0;
  color: var(--muted);
}

.feature-grid,
.flash-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.testimonial p {
  margin-top: 0;
  color: var(--muted);
}

.mission-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.mission-row .progress-line {
  grid-column: 1 / -1;
}

.ai-card {
  display: grid;
  align-content: center;
  gap: 12px;
  border-color: color-mix(in srgb, var(--primary), transparent 55%);
  background: var(--surface-tint);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.calendar-grid span {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--surface-soft);
}

.calendar-grid span.active {
  color: var(--primary-ink);
  border-color: var(--primary);
  background: var(--primary);
}

.calendar-grid small {
  font-weight: 800;
}

.next-lesson {
  width: 100%;
  margin-top: 8px;
  display: grid;
  gap: 4px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.leader-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.leader-row.you {
  border-color: color-mix(in srgb, var(--primary), var(--line) 35%);
  background: color-mix(in srgb, var(--primary), var(--surface) 92%);
}

.attempt-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.attempt-card strong {
  display: block;
  margin: 6px 0;
  font-size: 1.8rem;
}

.flash-stats div {
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: grid;
  align-content: center;
  background: var(--surface-soft);
}

.flash-stats strong {
  font-size: 1.35rem;
}

.flash-stats span {
  color: var(--muted);
}

.code-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.code-panel,
.code-output {
  min-height: calc(100vh - 126px);
}

.code-editor {
  min-height: 460px;
  margin: 14px 0;
  font-family: var(--font-mono);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-text);
  background: var(--ink);
  tab-size: 2;
}

.code-output pre {
  min-height: 220px;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  overflow: auto;
  color: var(--text);
  background: var(--surface-soft);
  white-space: pre-wrap;
}

.test-list div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-soft);
}

@media (max-width: 1400px) {
  .dashboard-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-panel {
    grid-column: 1 / -1;
  }

  .module-strip,
  .exercise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .academy-header,
  .academy-workspace,
  .academy-tabs {
    grid-template-columns: 1fr;
  }

  .academy-workspace {
    grid-template-rows: none;
  }

  .academy-instructions {
    grid-row: auto;
  }

  .academy-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .academy-workspace {
    min-height: auto;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: static;
    height: auto;
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "brand xp" "nav nav" "goal goal";
    align-items: start;
  }

  .nav-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .nav-group {
    display: contents;
  }

  .nav-group-label {
    display: none;
  }

  .nav-item {
    min-height: 66px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 0.75rem;
  }

  .content-grid.two,
  .content-grid.three,
  .learn-shell,
  .landing-hero,
  .course-layout,
  .lesson-workspace,
  .flash-layout,
  .tutor-layout,
  .code-layout,
  .notes-layout {
    grid-template-columns: 1fr;
  }

  .lesson-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learn-sidebar,
  .learn-next {
    position: static;
  }

  .learn-main {
    order: 1;
  }

  .learn-sidebar {
    order: 2;
  }

  .learn-next {
    order: 3;
  }

  .learn-topic-list {
    max-height: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-panel,
  .tutor-chat,
  .code-panel,
  .code-output {
    min-height: auto;
  }

  .landing-stats,
  .attempt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .app-main,
  .app-sidebar {
    padding: 12px;
  }

  .app-topbar,
  .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions,
  .global-search {
    width: 100%;
  }

  .dashboard-grid,
  .landing-stats,
  .codecademy-grid,
  .module-strip,
  .module-column,
  .exercise-grid,
  .lesson-grid,
  .lesson-tabs,
  .lesson-side,
  .source-list,
  .search-sections {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: 0;
    padding: 16px;
  }

  .learn-lesson-header {
    grid-template-columns: 1fr;
  }

  .landing-copy h2 {
    font-size: 2.45rem;
  }

  .demo-device {
    min-height: 360px;
  }

  .attempt-grid,
  .feature-grid,
  .flash-stats,
  .calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-panel,
  .lesson-header {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    min-height: 0;
  }

  .readiness-ring {
    width: 138px;
    height: 138px;
  }

  .network-diagram,
  .flow-diagram,
  .er-diagram {
    grid-template-columns: 1fr;
  }

  .flow-diagram span:not(:last-child)::after,
  .network-diagram span:not(:last-child)::after {
    right: auto;
    bottom: -14px;
    transform: rotate(90deg);
  }

  .vocab-row {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .vocab-row p {
    grid-column: 1 / -1;
  }

  .lesson-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .lesson-row em {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .academy {
    min-height: 100vh;
    gap: 10px;
    padding: 10px;
  }

  .academy-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .academy-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .academy-nav .button {
    min-height: 38px;
    padding: 0 8px;
    font-size: 0.82rem;
  }

  .academy-path {
    min-height: 62px;
  }

  .path-step {
    flex-basis: 152px;
    min-height: 56px;
  }

  .path-step strong {
    font-size: 0.78rem;
  }

  .academy-instructions,
  .academy-practice {
    padding: 16px;
  }

  .academy-instructions {
    grid-template-columns: 1fr;
  }

  .academy-instructions h2 {
    font-size: 1.72rem;
    line-height: 1.05;
  }

  .reading-block {
    grid-template-columns: 1fr;
  }

  .reading-block .step-label,
  .reading-block h3,
  .reading-block p,
  .reading-block h4,
  .reading-block ul {
    grid-column: 1;
  }

  .academy-instructions p:not(.eyebrow) {
    font-size: 1rem;
  }

  .example-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mini-example {
    min-height: 170px;
  }

  .academy-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }

  .academy-tabs article {
    flex: 0 0 86%;
    padding: 14px;
    scroll-snap-align: start;
  }

  .academy-tabs article:nth-child(n + 2) {
    display: none;
  }

  .learn-priority {
    justify-self: start;
  }

  .lesson-jumps {
    position: sticky;
    top: 8px;
    z-index: 5;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface), transparent 4%);
    box-shadow: var(--shadow-soft);
  }

  .lesson-jumps button {
    flex: 1;
    justify-content: center;
  }

  .academy-practice.practice-compact {
    display: none;
  }

  .study-chat {
    padding: 14px;
  }

  .study-chat-log {
    max-height: 210px;
  }

  .study-chat-input {
    grid-template-columns: 1fr;
  }

  #lesen,
  #beispiele,
  #ueben {
    scroll-margin-top: 84px;
  }

  .app-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "nav";
    gap: 12px;
  }

  .app-sidebar .sidebar-xp,
  .app-sidebar .daily-goal {
    display: none;
  }

  .brand {
    grid-template-columns: 46px 1fr;
  }

  .brand-mark {
    width: 46px;
    height: 46px;
  }

  .nav-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
  }

  .nav-group {
    display: contents;
  }

  .nav-group-label {
    display: none;
  }

  .nav-item {
    flex: 0 0 calc((100% - 16px) / 3);
    min-width: 0;
    min-height: 58px;
    padding: 8px 6px;
    scroll-snap-align: start;
    justify-content: center;
  }

  .button-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button-row .button {
    width: 100%;
    justify-content: center;
  }

  .learn-main {
    padding: 16px;
  }

  .learn-lesson-header h2 {
    font-size: 1.66rem;
    line-height: 1.1;
  }

  .learn-topic-list {
    grid-template-columns: 1fr;
    max-height: 310px;
  }

  .learn-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .learn-actions .button {
    width: 100%;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    width: 100%;
  }

  .readiness-pill {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .global-search {
    width: 100%;
  }

  .metric-card {
    min-height: 130px;
  }

  .hero-panel h2,
  .lesson-header h2,
  .landing-copy h2,
  .exam-start h2 {
    font-size: 1.9rem;
  }

  .landing-copy p {
    font-size: 1rem;
  }

  .landing-copy .trust-row {
    display: none;
  }

  .demo-device {
    min-height: 300px;
    padding: 18px;
  }

  .quiz-options,
  .answer-input-row {
    grid-template-columns: 1fr;
  }

  .lesson-header,
  .panel,
  .exam-start {
    padding: 14px;
  }

  .diagram-block,
  .quiz-card {
    margin: 0 14px 14px;
  }

  .flash-super-card {
    min-height: 280px;
    padding: 18px;
  }

  .code-editor {
    min-height: 330px;
    font-size: 0.88rem;
  }

  .flash-super-card span {
    font-size: 1.7rem;
  }

  .exam-question,
  .review-row {
    grid-template-columns: 1fr;
  }
}

/* Mistakes (typische Fehler) */

.mistake-list {
  display: grid;
  gap: 10px;
}

.mistake-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.mistake-wrong,
.mistake-fix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.mistake-wrong span {
  color: var(--red);
  font-weight: 800;
}

.mistake-fix span {
  color: var(--green);
  font-weight: 800;
}

.mistake-why {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.mistake-card .button {
  justify-self: start;
  margin-top: 4px;
}

/* FAQ */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.84rem;
  cursor: pointer;
}

.chip:hover {
  border-color: color-mix(in srgb, var(--primary), var(--line) 40%);
}

.chip.active {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

.faq-list {
  display: grid;
  gap: 8px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
}

.faq-item.open .faq-question {
  color: var(--primary);
}

.faq-question em {
  font-style: normal;
  color: var(--muted);
  font-size: 1.1rem;
}

.faq-answer {
  margin: 0;
  padding: 0 14px 14px;
  color: var(--muted);
  line-height: 1.55;
}

/* Achievements / Badges */

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

.badge-tile {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  opacity: 0.55;
}

.badge-tile.unlocked {
  opacity: 1;
  border-color: color-mix(in srgb, var(--primary), var(--line) 35%);
  background: color-mix(in srgb, var(--primary), var(--surface) 92%);
}

.badge-icon {
  font-size: 1.3rem;
  color: var(--primary);
}

.badge-tile small {
  color: var(--muted);
}

.badge-tile em {
  font-style: normal;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.82rem;
}

.button.ghost.small {
  padding: 6px 12px;
  font-size: 0.82rem;
}

@media (max-width: 1180px) {
  .badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .badge-grid {
    grid-template-columns: 1fr;
  }
}

/* Tutor cloud toggle */

.tutor-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat.pending {
  color: var(--muted);
  font-style: italic;
}