:root {
  --paper: #F6F7F2;
  --card: #FFFFFF;
  --sunk: #EFF1E9;
  --ink: #26362C;
  --ink-2: #5E685F;
  --ink-3: #676F65;
  --rule: #E0E5DA;
  --rule-2: #C9C5BB;
  --blue: #2F6F8F;
  --blue-soft: #DDEAF0;
  --brick: #B3553E;
  --brick-soft: #F3E1DC;
  --moss: #5B7959;
  --moss-soft: #E2EAE0;
  --grid-on: #232A33;
  --shadow: rgba(30, 34, 41, 0.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15171B; --card: #1D2025; --sunk: #24272D;
    --ink: #E8E6E1; --ink-2: #B2B9AF; --ink-3: #9AA398;
    --rule: #2E323A; --rule-2: #3C414A;
    --blue: #6FB0CD; --blue-soft: #1B333F;
    --brick: #DC8A73; --brick-soft: #3A241E;
    --moss: #9BBE98; --moss-soft: #1E2A1D;
    --grid-on: #E8E6E1; --shadow: rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] {
  --paper: #15171B; --card: #1D2025; --sunk: #24272D;
  --ink: #E8E6E1; --ink-2: #B2B9AF; --ink-3: #9AA398;
  --rule: #2E323A; --rule-2: #3C414A;
  --blue: #6FB0CD; --blue-soft: #1B333F;
  --brick: #DC8A73; --brick-soft: #3A241E;
  --moss: #9BBE98; --moss-soft: #1E2A1D;
  --grid-on: #E8E6E1; --shadow: rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 940px; margin: 0 auto; padding: 48px 24px 96px; }

a { color: var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

.eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px;
}
h1 {
  font-family: Georgia, "Songti SC", "Noto Serif SC", serif;
  font-weight: 600; font-size: 32px; line-height: 1.35;
  margin: 0 0 14px; text-wrap: balance; letter-spacing: -0.01em;
}
h2 {
  font-family: Georgia, "Songti SC", "Noto Serif SC", serif;
  font-weight: 600; font-size: 21px; margin: 0 0 10px; text-wrap: balance;
}
h3 { font-size: 16px; font-weight: 500; margin: 0 0 8px; }
.lede { color: var(--ink-2); max-width: 62ch; margin: 0 0 36px; }

.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px var(--shadow);
}
.sec { margin-top: 56px; }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 12px; color: var(--ink-2); }
.prose p strong { color: var(--ink); font-weight: 500; }
.prose ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); }
.prose li { margin-bottom: 6px; }
.pos { color: var(--blue); font-weight: 500; }
.neg { color: var(--brick); font-weight: 500; }

.btn {
  font-family: inherit; font-size: 13px; padding: 7px 12px;
  border: 1px solid var(--rule-2); border-radius: 6px;
  background: var(--card); color: var(--ink); cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.btn:hover { border-color: var(--ink-3); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary {
  font-family: inherit; cursor: pointer; border: 1px solid;
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  font-size: 15px; padding: 11px 22px; border-radius: 8px;
}
.btn-primary:hover { opacity: 0.88; border-color: var(--ink); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.panel-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}

.gate {
  max-width: 380px; margin: 15vh auto; text-align: center;
}
.gate input {
  width: 100%; font-family: inherit; font-size: 16px; padding: 11px 13px;
  border: 1px solid var(--rule-2); border-radius: 8px;
  background: var(--card); color: var(--ink); margin: 14px 0 12px;
}
.err { color: var(--brick); font-size: 14px; min-height: 21px; }

.today {
  background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
  padding: 22px 24px; box-shadow: 0 1px 2px var(--shadow);
}
.today-date {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
  color: var(--ink-3); margin-bottom: 6px;
}
.today-task { font-size: 19px; font-weight: 500; margin-bottom: 8px; text-wrap: balance; }
.today-meta { font-size: 14px; color: var(--ink-2); }

.subrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px 18px; margin-top: 18px; background: var(--sunk);
}
.subrow-t { font-size: 14px; color: var(--ink-2); }

.weeks { display: grid; gap: 10px; }
.week {
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--card); overflow: hidden;
}
.week > summary {
  cursor: pointer; padding: 13px 18px; list-style: none;
  display: flex; align-items: baseline; gap: 12px;
}
.week > summary::-webkit-details-marker { display: none; }
.week-n {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
  color: var(--ink-3); min-width: 34px;
}
.week-t { font-size: 15px; }
.week-c {
  margin-left: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--ink-3);
}
.days { border-top: 1px solid var(--rule); }
.day {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 18px; border-bottom: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-2); text-decoration: none;
}
.day:last-child { border-bottom: 0; }
.day-d {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
  color: var(--ink-3); min-width: 54px;
}
.day-t { flex: 1; }
.day.live { color: var(--ink); }
.day.live:hover { background: var(--sunk); }
.day.today-row { background: var(--blue-soft); }
.tag {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px;
  padding: 1px 7px; border-radius: 4px; white-space: nowrap;
}
.tag.done { background: var(--moss-soft); color: var(--moss); }
.tag.open { background: var(--sunk); color: var(--ink-3); }

.q { margin-bottom: 26px; }
.q-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.q-n {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
  color: var(--ink-3); min-width: 22px;
}
.q-t { font-size: 16px; flex: 1; }
textarea {
  width: 100%; min-height: 96px; resize: vertical;
  font-family: inherit; font-size: 15px; line-height: 1.7;
  padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: 8px;
  background: var(--card); color: var(--ink);
}
textarea:disabled { background: var(--sunk); color: var(--ink-2); }
.count {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px;
  color: var(--ink-3); text-align: right; margin-top: 4px;
}

.notice {
  padding: 13px 16px; border-radius: 8px; font-size: 14px; line-height: 1.65;
  margin-top: 16px; border: 1px solid transparent;
}
.notice.warn { background: var(--brick-soft); color: var(--brick); border-color: var(--brick); }
.notice.ok { background: var(--moss-soft); color: var(--moss); border-color: var(--moss); }
.notice.info { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }

.past { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 20px; }
.past-item { margin-bottom: 22px; }
.past-when {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
  color: var(--ink-3); margin-bottom: 8px;
}
.past-a {
  background: var(--sunk); border-left: 2px solid var(--rule-2);
  border-radius: 0; padding: 10px 14px; margin-bottom: 8px;
  font-size: 14px; color: var(--ink-2); white-space: pre-wrap;
}
.past-r {
  background: var(--blue-soft); border-left: 2px solid var(--blue);
  border-radius: 0; padding: 10px 14px;
  font-size: 14px; color: var(--ink); white-space: pre-wrap;
}

footer {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-3);
}
.nav { margin-bottom: 28px; font-size: 14px; }
.nav a { text-decoration: none; }

/* Reading pages keep the experiments and answer flow in a focused column. */
.chapter .wrap { max-width: 1060px; padding-top: 28px; }
.chapter .nav { display: flex; align-items: center; border-bottom: 1px solid var(--rule); padding: 0 0 22px; margin-bottom: 40px; }
.chapter .nav a { color: var(--ink-2); font-size: 16px; }
.chapter .nav::after { content: "THE LEARNING ARCHIVE"; margin-left: auto; color: var(--ink-3); font: 10px ui-monospace, monospace; letter-spacing: .12em; }
.chapter #app > h1 { font-size: 40px; letter-spacing: .02em; margin-bottom: 20px; }
.chapter #app > .lede { border-left: 3px solid var(--moss); padding-left: 20px; max-width: 78ch; font-size: 18px; }
.chapter .sec { margin-top: 44px; }
.chapter h2 { font-family: inherit; font-size: 24px; margin-bottom: 16px; }
.chapter .prose { max-width: 78ch; }
.chapter { font-size: 18px; }
.chapter .prose p, .chapter .prose li { line-height: 1.95; }
.chapter .eyebrow, .chapter .panel-label, .chapter .count, .chapter .past-when { font-size: 14px; }
.chapter h3, .chapter .q-t { font-size: 18px; }
.chapter .btn, .chapter .notice, .chapter .past-a, .chapter .past-r { font-size: 16px; }
.chapter .btn-primary { font-size: 18px; }
.chapter .q-n, .chapter footer { font-size: 15px; }
.chapter .rtable, .chapter .rtable th { font-size: 15px; }
.chapter .slider-head, .chapter .bigrow .k { font-size: 16px; }
.chapter .recap, .chapter .qkv, .chapter .wtable, .chapter .angle-d, .chapter .attbar-head,
.chapter .row .k, .chapter .row2 .k, .chapter .verdict-box { font-size: 16px; }
.chapter .recap th, .chapter .recap td:first-child, .chapter .wtable th,
.chapter .legend, .chapter .meter-ax, .chapter .reqlabel { font-size: 14px; }
.chapter .angle-t, .chapter .formula { font-size: 18px; }
.chapter .formula code, .chapter .counter-hint { font-size: 16px; }
.chapter .counter { gap: 10px; flex-wrap: wrap; }
.chapter .prose p strong { font-weight: 600; }
.chapter .bench, .chapter .card { border-radius: 12px; box-shadow: 0 4px 16px var(--shadow); }
.chapter .q { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); }
.chapter .q:last-child { border-bottom: 0; margin-bottom: 0; }
.chapter textarea { background: var(--paper); padding: 16px; font-size: 18px; line-height: 1.85; }
.chapter textarea:focus { background: var(--card); }
.chapter .q-n { color: var(--moss); font-weight: 600; }
.chapter .past-r { border-radius: 0 8px 8px 0; padding: 16px 20px; }
.chapter .gate { background: var(--card); padding: 30px; border: 1px solid var(--rule); border-radius: 14px; }
@media (max-width: 640px) {
  .chapter .wrap { padding-top: 22px; }
  .chapter .nav { margin-bottom: 28px; }
  .chapter .nav::after { display: none; }
  .chapter #app > h1 { font-size: 30px; }
  .chapter #app > .lede { font-size: 18px; padding-left: 14px; }
  .chapter h2 { font-size: 22px; }
  .chapter .card, .chapter .bench { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 640px) { .wrap { padding: 32px 18px 72px; } h1 { font-size: 26px; } }