@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Libre+Caslon+Text:wght@400;700&display=swap");

:root {
  color-scheme: light;
  --paper: oklch(0.975 0.012 108);
  --surface: oklch(0.992 0.006 115);
  --surface-strong: oklch(0.95 0.018 109);
  --ink: oklch(0.22 0.035 246);
  --muted: oklch(0.44 0.038 238);
  --line: oklch(0.83 0.027 104);
  --accent: oklch(0.48 0.105 183);
  --accent-ink: oklch(0.23 0.065 190);
  --rose: oklch(0.54 0.13 28);
  --gold: oklch(0.72 0.13 82);
  --green: oklch(0.54 0.105 145);
  --shadow: 0 18px 50px oklch(0.3 0.04 230 / 0.11);
  --radius: 8px;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --font-body: "Atkinson Hyperlegible", Verdana, sans-serif;
  --font-display: "Libre Caslon Text", Georgia, serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: oklch(0.18 0.03 238);
  --surface: oklch(0.23 0.034 238);
  --surface-strong: oklch(0.28 0.04 238);
  --ink: oklch(0.93 0.018 95);
  --muted: oklch(0.75 0.025 101);
  --line: oklch(0.39 0.044 238);
  --accent: oklch(0.72 0.105 178);
  --accent-ink: oklch(0.92 0.05 175);
  --rose: oklch(0.73 0.13 28);
  --gold: oklch(0.8 0.12 84);
  --green: oklch(0.74 0.11 145);
  --shadow: 0 18px 50px oklch(0.09 0.03 238 / 0.42);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--line) 36%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(color-mix(in oklch, var(--line) 26%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--gold) 70%, var(--paper));
  outline-offset: 3px;
}

.skip-link {
  left: var(--space-md);
  position: absolute;
  top: -100px;
  z-index: 20;
}

.skip-link:focus {
  top: var(--space-md);
}

.topbar {
  backdrop-filter: blur(18px);
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  align-items: center;
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1180px;
  padding: var(--space-sm) var(--space-md);
}

.brand {
  color: var(--ink);
  display: grid;
  font-weight: 700;
  line-height: 1.05;
  min-width: 9rem;
  text-decoration: none;
}

.brand span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
}

.nav {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav a,
.pill-button,
.ghost-button,
.copy-button,
.topic-filter,
.jump-link {
  align-items: center;
  background: color-mix(in oklch, var(--surface) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.9rem;
  gap: var(--space-xs);
  min-height: 2.4rem;
  padding: 0.45rem 0.8rem;
  text-decoration: none;
  white-space: nowrap;
}

.nav a[aria-current="page"],
.topic-filter.is-active,
.pill-button {
  background: color-mix(in oklch, var(--accent) 22%, var(--surface));
  border-color: color-mix(in oklch, var(--accent) 70%, var(--line));
  color: var(--accent-ink);
}

.ghost-button:hover,
.nav a:hover,
.copy-button:hover,
.topic-filter:hover,
.jump-link:hover {
  background: color-mix(in oklch, var(--gold) 20%, var(--surface));
}

.theme-toggle {
  flex: 0 0 auto;
}

.shell {
  margin: 0 auto;
  max-width: 1180px;
  padding: var(--space-xl) var(--space-md) var(--space-3xl);
}

.hero {
  align-items: center;
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  padding: var(--space-xl) 0 var(--space-2xl);
}

.hero h1,
.page-header h1 {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.05;
  margin: 0;
  max-width: 12ch;
}

.page-header h1 {
  max-width: 18ch;
}

.lede {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 66ch;
}

.eyebrow {
  color: var(--rose);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-sm);
  text-transform: uppercase;
}

.hero-panel,
.study-card,
.quick-panel,
.formula,
.answer-card,
.practice-item,
.checkpoint,
.source-note,
.solution-card,
.exam-answer,
.worked-block {
  background: color-mix(in oklch, var(--surface) 92%, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-panel {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.hero-panel img {
  aspect-ratio: 16 / 10;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: block;
  height: auto;
  width: 100%;
}

.signal-caption {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.cta-row,
.cluster,
.topic-filters,
.card-actions,
.solution-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.study-grid,
.resource-grid,
.formula-grid,
.answer-grid,
.practice-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.study-card,
.quick-panel,
.answer-card,
.practice-item,
.checkpoint,
.source-note,
.solution-card,
.exam-answer,
.worked-block {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.study-card h2,
.study-card h3,
.quick-panel h2,
.quick-panel h3,
.answer-card h3,
.practice-item h3,
.checkpoint h3,
.solution-card h2,
.solution-card h3,
.solution-card h4,
.exam-answer h3,
.exam-answer h4,
.worked-block h3,
.worked-block h4,
.section h2,
.section h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0;
}

.study-card p,
.quick-panel p,
.answer-card p,
.practice-item p,
.checkpoint p,
.section p,
.source-note p,
.solution-card p,
.exam-answer p,
.worked-block p {
  margin: 0;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tag {
  background: color-mix(in oklch, var(--surface-strong) 75%, var(--paper));
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
}

.study-layout {
  align-items: start;
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 250px minmax(0, 1fr);
}

.toc {
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: calc(100vh - 6rem);
  overflow: auto;
  padding: var(--space-md);
  position: sticky;
  top: 5rem;
}

.toc strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
}

.toc a {
  border-radius: 6px;
  color: var(--muted);
  display: block;
  padding: 0.28rem 0.35rem;
  text-decoration: none;
}

.toc a:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

.article {
  display: grid;
  gap: var(--space-xl);
  min-width: 0;
}

.page-header {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-xl) 0 var(--space-md);
}

.section {
  display: grid;
  gap: var(--space-md);
  scroll-margin-top: 6rem;
}

.section h2 {
  font-size: 2rem;
}

.section h3 {
  font-size: 1.35rem;
}

.section ul,
.section ol {
  margin: 0;
  padding-left: 1.3rem;
}

.section li + li {
  margin-top: var(--space-xs);
}

.comparison,
.data-table {
  border-collapse: collapse;
  width: 100%;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0.8rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: color-mix(in oklch, var(--surface-strong) 70%, var(--surface));
  font-size: 0.86rem;
}

tr:last-child td {
  border-bottom: 0;
}

.formula {
  box-shadow: none;
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.formula code {
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  white-space: normal;
}

.copy-button {
  justify-self: start;
  min-height: 2rem;
}

.note-band {
  background: color-mix(in oklch, var(--gold) 18%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--gold) 60%, var(--line));
  border-radius: var(--radius);
  padding: var(--space-md);
}

.mistake-band {
  background: color-mix(in oklch, var(--rose) 12%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--rose) 45%, var(--line));
  border-radius: var(--radius);
  padding: var(--space-md);
}

.step-list {
  counter-reset: step;
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
}

.step-list li {
  align-items: start;
  background: color-mix(in oklch, var(--surface) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: 2rem 1fr;
  padding: var(--space-md);
}

.step-list li::before {
  align-items: center;
  background: var(--ink);
  border-radius: 999px;
  color: var(--paper);
  content: counter(step);
  counter-increment: step;
  display: inline-flex;
  font-weight: 700;
  height: 1.65rem;
  justify-content: center;
  margin-top: 0.12rem;
  width: 1.65rem;
}

details {
  background: color-mix(in oklch, var(--surface) 92%, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md);
}

details + details {
  margin-top: var(--space-sm);
}

summary {
  cursor: pointer;
  font-weight: 700;
}

details > *:not(summary) {
  margin-top: var(--space-sm);
}

.progress-list {
  display: grid;
  gap: var(--space-sm);
}

.progress-list label {
  align-items: start;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: auto 1fr;
}

.progress-list input {
  accent-color: var(--accent);
  height: 1.1rem;
  margin-top: 0.32rem;
  width: 1.1rem;
}

.search-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  min-height: 2.7rem;
  padding: 0.6rem 0.8rem;
  width: min(100%, 34rem);
}

.practice-item[hidden] {
  display: none;
}

.solution-card {
  scroll-margin-top: 6rem;
}

.solution-card h2 {
  font-size: 1.65rem;
}

.question-text {
  color: var(--muted);
  font-weight: 700;
}

.marks-split,
.solution-note {
  color: var(--muted);
  font-size: 0.92rem;
}

.exam-answer,
.worked-block {
  box-shadow: none;
}

.exam-answer h4,
.worked-block h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  margin: 0;
}

.math-line {
  background: color-mix(in oklch, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 38%, var(--line));
  border-radius: var(--radius);
  color: var(--accent-ink);
  font-weight: 700;
  padding: var(--space-sm) var(--space-md);
}

.answer-flow,
.compact-list {
  display: grid;
  gap: var(--space-sm);
}

.answer-flow li + li {
  margin-top: var(--space-sm);
}

.wide-table th,
.wide-table td {
  font-size: 0.9rem;
  min-width: 7rem;
}

.wide-table td:first-child,
.wide-table th:first-child {
  min-width: 5rem;
}

.final-box {
  background: color-mix(in oklch, var(--green) 15%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--green) 55%, var(--line));
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  margin-top: var(--space-3xl);
  padding: var(--space-lg) 0 0;
}

.footer p {
  margin: 0;
}

@media (max-width: 860px) {
  .topbar-inner {
    align-items: stretch;
    flex-direction: column;
  }

  .hero,
  .study-layout {
    grid-template-columns: 1fr;
  }

  .toc {
    max-height: none;
    position: static;
  }

  .hero h1,
  .page-header h1 {
    font-size: 2.25rem;
  }
}

@media (max-width: 560px) {
  .shell {
    padding-inline: var(--space-sm);
  }

  .hero-panel,
  .study-card,
  .quick-panel,
  .answer-card,
  .practice-item,
  .checkpoint,
  .source-note,
  .solution-card,
  .exam-answer,
  .worked-block {
    padding: var(--space-md);
  }

  th,
  td {
    padding: 0.55rem;
  }
}

@media print {
  body {
    background: oklch(0.99 0.004 110);
    color: oklch(0.18 0.02 240);
    font-size: 11pt;
  }

  .topbar,
  .toc,
  .theme-toggle,
  .copy-button,
  .cta-row,
  .topic-filters,
  .search-box,
  .footer {
    display: none !important;
  }

  .shell {
    max-width: none;
    padding: 0;
  }

  .study-layout,
  .hero {
    display: block;
  }

  .study-card,
  .quick-panel,
  .formula,
  .answer-card,
  .practice-item,
  .checkpoint,
  .source-note,
  .solution-card,
  .exam-answer,
  .worked-block,
  details {
    box-shadow: none;
    break-inside: avoid;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}