:root {
  --bg: #0f172a;
  --card: #1e293b;
  --accent: #22c55e;
  --text: #e2e8f0;
  --text-soft: #cbd5e1;
  --muted: #94a3b8;
  --border: #334155;

  --font-body: "Avenir Next", "Segoe UI", "Noto Sans", "Helvetica Neue", sans-serif;
  --font-heading: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --step--1: clamp(0.88rem, 0.86rem + 0.12vw, 0.96rem);
  --step-0: clamp(1rem, 0.98rem + 0.16vw, 1.08rem);
  --step-1: clamp(1.14rem, 1.08rem + 0.26vw, 1.28rem);
  --step-2: clamp(1.3rem, 1.2rem + 0.45vw, 1.56rem);
  --step-3: clamp(1.7rem, 1.45rem + 1.1vw, 2.25rem);
}

/* Base layout */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  background: var(--bg);
  color: var(--text);
  max-width: 850px;
  margin: 2rem auto;
  padding: 1.5rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1 {
  font-family: var(--font-heading);
  font-size: var(--step-3);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 1.25rem;
}

h2 {
  font-family: var(--font-heading);
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--font-heading);
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--text-soft);
}

/* Text */
p {
  color: var(--text);
  margin-bottom: 1rem;
  max-width: 65ch;
}

/* Ordered list (questions) */
ol {
  padding-left: 1.2rem;
  max-width: 65ch;
}

/* Answer list */
ul {
  list-style: none;
  padding-left: 1.2rem;
  max-width: 65ch;
}

ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}

/* Checkbox styling */
input[type="checkbox"] {
  accent-color: var(--accent);
  transform: scale(1.2);
  margin-top: 0.2rem;
  pointer-events: none;
}

/* Correct answers */
li:has(input[type="checkbox"]:checked) {
  color: #86efac;
  font-weight: 500;
}

/* Code blocks */
pre {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.6;
  background: #020617;
  padding: 1rem;
  border-radius: 10px;
  overflow-x: auto;
  margin: 1rem 0;
  max-width: 65ch;
}

code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: #020617;
  padding: 2px 6px;
  border-radius: 6px;
}

/* Links */
a {
  color: #93c5fd;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
  text-decoration-color: rgba(147, 197, 253, 0.45);
}

a:hover {
  text-decoration-color: currentColor;
}

/* Optional: make everything feel tighter and nicer */
* {
  box-sizing: border-box;
}