html {
  background: oklch(0.985 0.006 120);
  color: oklch(0.22 0.018 235);
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: oklch(0.985 0.006 120);
}

.main-container {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 34px clamp(18px, 4vw, 48px) 56px;
}

.main-container > div + div {
  margin-top: 2.2rem;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.8em;
  color: oklch(0.17 0.02 235);
  font-weight: 800;
  line-height: 1.2;
}

h2 {
  padding-top: 0.35em;
  border-top: 1px solid oklch(0.82 0.025 210);
  font-size: clamp(1.45rem, 3vw, 2rem);
}

h3 {
  font-size: clamp(1.16rem, 2vw, 1.45rem);
}

p,
ul,
ol {
  margin: 0 0 1.05rem;
}

a {
  color: oklch(0.48 0.14 155);
  font-weight: 700;
}

pre {
  width: 100%;
  max-width: 100%;
  margin: 1rem 0 1.35rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 14px 16px;
  border: 1px solid oklch(0.34 0.028 235);
  border-radius: 6px;
  background: oklch(0.2 0.025 230);
  color: oklch(0.94 0.018 130);
  font-size: 0.86rem;
  line-height: 1.55;
}

code {
  font-family: "JetBrains Mono", Consolas, ui-monospace, monospace;
}

img,
svg,
canvas,
.html-widget,
.plotly,
.plot-container {
  max-width: 100%;
}

.html-widget,
.plotly {
  margin: 1.25rem 0;
}

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

th,
td {
  padding: 7px 10px;
  border: 1px solid oklch(0.82 0.025 210);
}

@media (max-width: 640px) {
  html {
    font-size: 15px;
  }

  .main-container {
    padding-block: 24px 42px;
  }
}