/* Shared by the notebook front page and the studies. The living scope notes carry their own styles.
   Light is the Tidepool scheme, dark is Observatory (both are shown in the scope notes). */
:root {
  --bg: #EDF2F4; --surface: #F8FBFC; --ink: #16242E; --muted: #5C6E7B; --rule: #C6D2D9;
  --accent: #0E6B75; --accent-soft: #D7EAEA; --typ: #3A4DB5; --agent: #C9431C; --agent-soft: #FAE2D9;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0E121B; --surface: #151B28; --ink: #E7ECF5; --muted: #8E9AAF; --rule: #2C3548;
  --accent: #7FD6E8; --accent-soft: #15303A; --typ: #BBA8FF; --agent: #FFC24B; --agent-soft: #3A2D10;
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0E121B; --surface: #151B28; --ink: #E7ECF5; --muted: #8E9AAF; --rule: #2C3548;
  --accent: #7FD6E8; --accent-soft: #15303A; --typ: #BBA8FF; --agent: #FFC24B; --agent-soft: #3A2D10;
  color-scheme: dark }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 40px 96px; }
main { max-width: 64rem; margin: 0 auto; display: flex; flex-direction: column; gap: 52px; }
section { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col { max-width: 46rem; display: flex; flex-direction: column; gap: 14px; }
h1 { font: 700 clamp(2rem, 5vw, 2.9rem)/1.08 var(--sans); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h2 { font: 700 1.45rem/1.2 var(--sans); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h3 { font: 600 1.05rem/1.3 var(--sans); margin: 0; }
p, ul, ol { margin: 0; }
ul, ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.eyebrow { font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: 1.15rem; line-height: 1.5; }
.muted { color: var(--muted); }
code, .mono { font-family: var(--mono); font-size: 0.88em; }
code { background: var(--accent-soft); padding: 0.05em 0.35em; border-radius: 4px; }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; min-width: 620px; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
th { font: 500 0.72rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
td:first-child { font-weight: 600; }
.note { background: var(--agent-soft); border-radius: 8px; padding: 12px 16px; font-size: 0.95rem; max-width: 46rem; }
.tag { display: inline-block; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.04em; padding: 4px 7px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.tag.wait { background: var(--agent-soft); color: var(--agent); }