/* Colour values and visual hierarchy follow the selected lecture slides. */
:root {
  --paper: #ffffff;
  --white: #ffffff;
  --ink: #111111;
  --muted: #646464;
  --green: #cc0000;
  --line: #d8d8d8;
  --mint: #f2f2f2;
  --shadow: none;
  --lecture-blue: #3333b3;
  font-family: "Latin Modern Sans", "Arial", "Helvetica", sans-serif;
}
body { background: white; color: #111; }
.sidebar { background: #f2f2f2; border-color: #d9d9d9; }
.brand { color: #cc0000; letter-spacing: -.3px; }
.brand-mark { color: #cc0000; border-color: #cc0000; border-radius: 0; }
.brand small { color: #595959; font-size: 9px; letter-spacing: 1px; }
.sidebar-intro { font: 22px/1.4 Arial, sans-serif; color: #3333b3; }
.nav-caption { color: #555; font-size: 11px; }
.topic-button { color: #222; border-left: 3px solid transparent; border-radius: 0; font-size: 14px; padding: 11px 9px; }
.topic-button:hover { background: #e8e8e8; }
.topic-button.active { background: white; color: #3333b3; border-left-color: #cc0000; font-weight: 600; }
.topic-count { font-size: 11px; color: inherit; }
.sidebar-bottom, .sidebar-bottom strong { color: #555; font-size: 11px; }
.small-dot { background: #0000ff; }
.topbar { height: 75px; }
.tab { color: #555; font-size: 16px; }
.tab.active { color: #cc0000; }
.tab.active:after { background: #cc0000; }
.download-link { color: #3333b3; font-size: 15px; }
.page-intro { padding: 29px 0 23px; }
.eyebrow { color: #3333b3; font-size: 11px; letter-spacing: 1.1px; }
h1 { color: #cc0000; font-family: Arial, Helvetica, sans-serif; font-size: 39px; letter-spacing: -.4px; line-height: 1.2; }
.intro-copy { color: #333; font-size: 16px; line-height: 1.6; max-width: 640px; }
.deck-stamp strong { font-family: Arial, sans-serif; color: #cc0000; font-size: 36px; }
.deck-stamp span { color: #444; font-size: 12px; }
.progress-panel { background: #f2f2f2; border-radius: 0; padding: 16px 20px; }
.progress-copy, .progress-copy strong { font-size: 14px; color: #222; }
.progress-copy>span { color: #222; }
.progress-track { background: #dedee8; height: 5px; }
.progress-track>div { background: #3333b3; }
.progress-meta { color: #555; font-size: 12px; }
.filter { color: #555; font-size: 14px; border-radius: 2px; }
.filter.active { border-color: #3333b3; color: #3333b3; background: white; box-shadow: none; }
.search { background: #fff; border-color: #bdbdbd; border-radius: 2px; height: 40px; }
.search input { color: #111; font-size: 14px; width: 170px; }
.search input::placeholder { color: #737373; }
.search>span { color: #3333b3; }
.icon-button { color: #3333b3; border-color: #bdbdbd; border-radius: 2px; font-size: 14px; }
.icon-button[aria-pressed=true] { color: #3333b3; background: #eeeeff; border-color: #3333b3; }
.flashcard { border: 1px solid #cfcfcf; border-radius: 0; box-shadow: none; background: white; }
.card-top { background: #f2f2f2; padding: 17px 26px 0; }
.topic-chip { color: #3333b3; background: none; padding: 0; border-radius: 0; font-size: 13px; }
.card-number { color: #555; font-size: 12px; letter-spacing: .6px; }
.question-area { background: #f2f2f2; padding: 21px 26px 23px; text-align: left; }
.question-label { display: none; }
.question-area h2 { color: #cc0000; font-family: Arial, Helvetica, sans-serif; font-size: clamp(29px, 3vw, 40px); font-weight: 400; letter-spacing: -.3px; line-height: 1.25; max-width: none; margin: 0 0 14px; }
.recall-hint { color: #555; font-size: 16px; }
.recall-hint strong { color: #3333b3; }
.reveal-actions { justify-content: flex-start; padding: 23px 26px; }
.primary { background: #cc0000; border-color: #cc0000; border-radius: 2px; font-size: 16px; padding: 12px 25px; }
.primary:hover { background: #ad0000; }
.secondary { color: #3333b3; border-color: #9999cc; border-radius: 2px; font-size: 15px; padding: 12px 18px; }
.secondary:hover { background: #f2f2ff; }
.answer-area { background: white; padding: 22px 27px; border-top: 1px solid #ddd; }
.answer-heading { margin-bottom: 13px; }
.answer-heading h3 { color: #cc0000; font-size: 16px; letter-spacing: 0; font-weight: 500; }
.answer-heading span { color: #555; font-size: 13px; }
.answer-list li { color: #3333b3; font-size: 21px; line-height: 1.55; padding: 11px 0 11px 29px; }
.answer-list li strong { color: #3333b3; font-weight: 600; }
.answer-list li+li { border-top: 0; }
.answer-list li:before { content: ""; width: 11px; height: 11px; top: 23px; left: 0; border-radius: 50%; background: radial-gradient(circle at 32% 27%, #b9b9ff 0%, #3333e0 40%, #0000a0 90%); }
.source-note { color: #444; background: #f2f2f2; font-size: 14px; line-height: 1.6; border-radius: 0; padding: 13px 15px; }
.source-line { display: flex; gap: 0; align-items: stretch; flex-wrap: wrap; padding: 0; background: #e6e6e6; font-size: 12px; color: #3333b3; }
.source-course { background: #b30000; color: white; padding: 9px 13px; }
.source-page { color: #0000ff; padding: 9px 13px; }
.source-status { color: #555; padding: 9px 13px; margin-left: auto; }
.card-bottom { background: white; padding: 17px 25px; }
.rating { color: #3333b3; border-color: #a7a7c2; border-radius: 2px; font-size: 14px; padding: 10px 13px; }
.rating.learned { color: #3333b3; border-color: #9999cc; background: #f2f2ff; }
.rating.again { color: #b30000; background: white; }
.rating kbd { font-size: 10px; }
.skip { color: #3333b3; font-size: 14px; }
.under-card { color: #555; font-size: 12px; }
.under-card .text-button { font-size: 13px; }
.text-button { color: #3333b3; font-size: 12px; }
.key-hints kbd { color: #444; background: #f2f2f2; border-color: #ccc; }
.page-footer { color: #555; font-size: 12px; }
.page-footer strong { color: #cc0000; }
.page-footer a { color: #3333b3; }
.page-footer .footnote { color: #666; font-size: 11px; }
.empty { border-radius: 0; }
.empty h2, .browse-heading h2 { color: #cc0000; font-family: Arial, sans-serif; font-size: 29px; }
.empty p { color: #333; font-size: 17px; }
.library-item { border-radius: 0; }
.library-item summary { font-size: 19px; color: #cc0000; }
.library-item summary:after { color: #3333b3; }
.library-number { color: #3333b3; font-size: 13px; }
.library-meta { color: #555; font-size: 13px; line-height: 1.6; }
.library-status { color: #3333b3; font-size: 13px; }
#toast { background: #3333b3; font-size: 14px; border-radius: 2px; }
@media(max-width:1120px) { .tools .search input { width: 100%; } }
@media(max-width:760px) {
  .sidebar { padding: 16px 18px; }
  .brand { font-size: 20px; }
  .mobile-topics { background: white; color: #3333b3; border-color: #b9b9cc; border-radius: 2px; font-size: 14px; }
  main { padding: 0 14px 22px; }
  .topbar { height: 63px; }
  .tab { font-size: 15px; }
  .download-link { font-size: 13px; }
  .page-intro { padding: 23px 0 16px; }
  .page-intro h1 { font-size: 31px; margin-bottom: 0; }
  .intro-copy { display: none; }
  .eyebrow { font-size: 10px; margin-bottom: 9px; }
  .progress-panel { padding: 14px 15px; }
  .progress-copy, .progress-copy strong { font-size: 13px; }
  .progress-meta { font-size: 11px; }
  .filter { font-size: 13px; padding: 8px 9px; }
  .icon-button, .search input { font-size: 14px; }
  .card-top { padding: 15px 18px 0; }
  .topic-chip { font-size: 12px; }
  .card-number { font-size: 10px; }
  .question-area { padding: 19px 18px 20px; }
  .question-area h2 { font-size: 30px; }
  .recall-hint { font-size: 15px; }
  .reveal-actions { padding: 19px 18px; }
  .primary { font-size: 15px; padding: 12px 21px; }
  .secondary { font-size: 14px; padding: 12px 14px; }
  .answer-area { padding: 20px 18px; }
  .answer-list li { font-size: 18px; line-height: 1.6; padding-left: 24px; }
  .answer-list li:before { width: 9px; height: 9px; top: 22px; }
  .source-note { font-size: 13px; }
  .source-line { font-size: 11px; }
  .source-course, .source-page, .source-status { padding: 8px 10px; }
  .source-status { margin-left: 0; }
  .card-bottom { padding: 14px 15px; flex-wrap: wrap; }
  .rating { font-size: 13px; padding: 10px 11px; }
  .skip { font-size: 13px; }
  .page-footer { font-size: 11px; }
  .page-footer .footnote { font-size: 10px; }
  .library-item summary { font-size: 18px; }
  .library-meta { font-size: 12px; }
}