/* AlgoLearn: paper and ink, one teal accent (the Dailies house palette), so the videos and the site match. */
:root {
  --paper: #f6f1e7; --surface: #fffdf8; --surface2: #ebe2d1; --ink: #1f1c17; --dim: #3d372f; --mute: #6b6255;
  --rule: #a89c86; --line: #d6ccb9; --teal: #1f5f5b; --teal-mid: #6fa39d; --teal-soft: #dde9e6; --mark: #f1d58a;
  --bad: #a3392b; --bad-soft: #f4dcd5;
  --display: Newsreader, Georgia, serif; --body: "Public Sans", -apple-system, system-ui, sans-serif; --mono: "JetBrains Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171512; --surface: #211e1a; --surface2: #2d2924; --ink: #efe8db; --dim: #d6cdbd; --mute: #a39887;
    --rule: #6d6354; --line: #3d372f; --teal: #7cc0b8; --teal-mid: #4f8e87; --teal-soft: #22403d; --mark: #6b5a26;
    --bad: #e88a7a; --bad-soft: #4a2620; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #171512; --surface: #211e1a; --surface2: #2d2924; --ink: #efe8db; --dim: #d6cdbd; --mute: #a39887;
  --rule: #6d6354; --line: #3d372f; --teal: #7cc0b8; --teal-mid: #4f8e87; --teal-soft: #22403d; --mark: #6b5a26;
  --bad: #e88a7a; --bad-soft: #4a2620; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--body); }
a { color: var(--teal); }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 16px; }
.top { display: flex; align-items: baseline; gap: 16px; padding: 18px 0 8px; }
.brand { font: 600 20px var(--display); color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.top nav { color: var(--mute); font-size: 14px; }
h1 { font: 500 40px/1.15 var(--display); margin: 12px 0 6px; }
h2 { font: 500 28px/1.2 var(--display); margin: 40px 0 10px; }
.lede { font: 19px/1.5 var(--display); color: var(--dim); max-width: 760px; margin: 0 0 20px; }
.prose { max-width: 760px; font-size: 16px; }
.prose p, .prose li { color: var(--dim); }
.prose code, .mono { font-family: var(--mono); font-size: .92em; }
.formula-block { font: 17px var(--mono); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; overflow-x: auto; }
footer { color: var(--mute); font-size: 13px; padding: 48px 0 32px; }

/* topic index */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 24px 0; }
.topic { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; color: inherit; text-decoration: none; }
.topic:hover { border-color: var(--teal-mid); }
.topic h3 { font: 500 22px var(--display); margin: 0 0 6px; }
.topic p { margin: 0; color: var(--dim); }
.topic.soon { opacity: .6; pointer-events: none; }
.topic .kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.topic img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 10px; display: block; }

/* video block */
.watch { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.watch video { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #000; display: block; }
.watch .missing { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed var(--rule); border-radius: 12px; color: var(--mute); }
@media (max-width: 860px) { .watch { grid-template-columns: 1fr; } }