/* Reset, typography and lesson-text ("prose") styles. */

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

html {
  font-size: calc(100% * var(--font-scale, 1));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brand); }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: 2px dashed var(--hair); margin: var(--s6) 0; }
strong, b { font-weight: 700; }
::selection { background: var(--yellow); color: #1D1B26; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--s4); left: var(--s4);
  z-index: 1000;
  padding: var(--s3) var(--s4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r);
  font-weight: 700;
}
.skip-link:not(:focus) {
  width: 1px; height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------ text utilities */
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; }
.nowrap { white-space: nowrap; }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* themed text + figure colours (also produced by \blue{…} in math) */
.tc-blue { color: var(--blue-text); }
.tc-red { color: var(--red-text); }
.tc-green { color: var(--green-text); }
.tc-orange { color: var(--orange-text); }
.tc-violet { color: var(--violet-text); }
.tc-teal { color: var(--teal-text); }
.tc-pink { color: var(--pink-text); }
.tc-yellow { color: var(--yellow-text); }
.tc-gray { color: var(--gray-text); }
span[class^='tc-'] { font-weight: 700; }

/* ------------------------------------------------------- lesson prose */
.md { font-size: var(--fs-lg); line-height: 1.6; }
.md > * + * { margin-top: 0.85em; }
.md ul, .md ol { padding-left: 1.4em; }
.md li + li { margin-top: 0.35em; }
.md li > ul, .md li > ol { margin-top: 0.35em; }
.md li::marker { color: var(--ink-3); font-weight: 700; }
.md .md-h { margin-top: 1.2em; font-size: var(--fs-xl); }
.md h4.md-h { font-size: var(--fs-lg); }
.md h5.md-h, .md h6.md-h { font-size: var(--fs-md); font-family: var(--font-body); font-weight: 800; letter-spacing: 0; }
.md a { color: var(--blue-text); font-weight: 600; }
.md mark {
  background: linear-gradient(transparent 55%, var(--yellow) 55%);
  color: inherit;
  padding: 0 0.1em;
}
:root[data-theme='dark'] .md mark { background: linear-gradient(transparent 60%, rgba(255, 211, 92, 0.45) 60%); }
.md code, code {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-size: 0.88em;
  background: var(--sunken);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}
.md blockquote {
  margin: 0;
  padding: var(--s2) var(--s4);
  border-left: 4px solid var(--hair);
  color: var(--ink-2);
}
.md-table-wrap { overflow-x: auto; }
.md-table {
  border-collapse: collapse;
  font-size: var(--fs-md);
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
}
.md-table th, .md-table td { padding: 0.45em 0.9em; border-bottom: 1px solid var(--hair); text-align: left; }
.md-table th, .md-table thead td { font-weight: 800; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.md-table tbody tr:last-child td { border-bottom: 0; }

.math-display { overflow-x: auto; overflow-y: hidden; padding: 0.3em 0; text-align: center; }
.katex { font-size: 1.12em; }
.math-display .katex { font-size: 1.25em; }
.math-error { color: var(--red-text); }

pre.code {
  margin: 0;
  padding: var(--s4);
  background: var(--sunken);
  border: var(--bw) solid var(--hair);
  border-radius: var(--r);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-size: 0.92rem;
  line-height: 1.6;
  tab-size: 4;
  position: relative;
}
pre.code code { background: none; border: 0; padding: 0; font-size: inherit; }
pre.code[data-lang]::after {
  content: attr(data-lang);
  position: absolute;
  top: 6px; right: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* on a phone the language tag would sit on top of the first line of code */
@media (max-width: 520px) { pre.code[data-lang]::after { display: none; } }
.tok-kw { color: var(--violet-text); font-weight: 600; }
.tok-str { color: var(--green-text); }
.tok-num { color: var(--orange-text); }
.tok-com { color: var(--ink-3); font-style: italic; }
.tok-fn { color: var(--blue-text); }
.tok-builtin { color: var(--teal-text); }

.callout {
  border: var(--bw) solid var(--hair);
  border-left-width: 6px;
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  font-size: var(--fs-md);
}
.callout-title {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.3em;
}
.callout-body > * + * { margin-top: 0.6em; }
.callout-tip { border-color: var(--green); background: var(--green-soft); }
.callout-tip .callout-title { color: var(--green-text); }
.callout-key { border-color: var(--orange); background: var(--orange-soft); }
.callout-key .callout-title { color: var(--orange-text); }
.callout-warn { border-color: var(--red); background: var(--red-soft); }
.callout-warn .callout-title { color: var(--red-text); }
.callout-note, .callout-fun { border-color: var(--blue); background: var(--blue-soft); }
.callout-note .callout-title, .callout-fun .callout-title { color: var(--blue-text); }
.callout-example, .callout-think { border-color: var(--violet); background: var(--violet-soft); }
.callout-example .callout-title, .callout-think .callout-title { color: var(--violet-text); }

/* ------------------------------------------------------------ motion */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: none; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 138, 31, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(255, 138, 31, 0); }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.rise-in { animation: rise-in 0.4s var(--ease-out) both; }
.pop-in { animation: pop-in 0.35s var(--ease-spring) both; }
.fade-in { animation: fade-in 0.3s ease both; }
.shake { animation: shake 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='full']) *, :root:not([data-motion='full']) *::before, :root:not([data-motion='full']) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion='reduce'] *, :root[data-motion='reduce'] *::before, :root[data-motion='reduce'] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 900;
}