base.css

1/* RESET */23*, *::before, *::after { box-sizing: border-box; margin: 0; }4html { -webkit-text-size-adjust: 100%; }5body { background: var(--bg); color: var(--fg); font: var(--text)/1.55 var(--face, var(--sans)); min-height: 100dvh; -webkit-font-smoothing: antialiased; }6[hidden] { display: none !important; }7img, canvas, svg, video { max-width: 100%; }8svg { height: auto; }9button, input, select, textarea { font: inherit; color: inherit; }10button { cursor: pointer; }11[id] { scroll-margin-top: calc(var(--head) + var(--s4)); }1213/* TEXT */1415h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.01em; font-weight: 650; }16h1 { font-size: 1.75rem; }17@media (max-width: 40rem) { h1 { font-size: 1.4rem; } }18h2 { font-size: 1.25rem; }19h3 { font-size: 1.05rem; }20.lead { color: var(--dim); max-width: var(--read); margin-top: var(--s2); }21.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }22.mono { font-family: var(--mono); }23.dim { color: var(--dim); }24.fine { color: var(--dim); font-size: 0.8rem; }2526/* LINKS */2728a { color: var(--accent); text-decoration: none; }29a:hover { text-decoration: underline; }30:focus-visible { outline: var(--ring); outline-offset: 2px; border-radius: var(--r1); }3132/* PROSE */3334.prose { font: var(--read-text)/1.6 var(--face, var(--serif)); font-variant-numeric: tabular-nums; max-width: var(--read); margin-inline: auto; }35.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--face, var(--serif)); margin: 1.6em 0 0.6em; }36.prose h1 { font-size: 1.85em; margin-top: 0.2em; }37.prose h2 { font-size: 1.35em; }38.prose h3 { font-size: 1.1em; }39.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose .table { margin: 0 0 1em; }40.prose ul, .prose ol { padding-left: 1.4em; }41.prose li { margin: 0.25em 0; }42.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 0.15em; }43.prose a:hover { text-decoration-color: currentColor; }44.prose code { font: 0.85em/1.4 var(--mono); background: var(--deep); padding: 0.1em 0.3em; border-radius: var(--r1); }45.prose pre { background: var(--deep); padding: var(--s3) var(--s4); border-radius: var(--r2); overflow-x: auto; font: 0.8em/1.6 var(--mono); }46.prose pre code { background: none; padding: 0; font-size: inherit; }47.prose blockquote { border-left: 3px solid var(--line); padding-left: var(--s4); color: var(--dim); }48.prose figure { margin: 1.6em 0; }49.prose figure img { display: block; height: auto; margin: 0 auto; }50.prose figcaption { font-size: 0.85em; line-height: 1.45; color: var(--dim); margin-top: var(--s3); }51.prose .table { overflow-x: auto; }52.prose table { width: auto; border-collapse: collapse; font-size: 0.84em; line-height: 1.4; }53.prose th, .prose td { padding: 5px 10px; border-bottom: var(--hair); text-align: left; vertical-align: top; }54.prose th { color: inherit; font-size: inherit; font-weight: 650; border-bottom: 2px solid var(--line); }55.prose td code, .prose th code { white-space: nowrap; }56.prose .right { text-align: right; }57.prose .center { text-align: center; }58.prose .meta { color: var(--dim); font: 13px/1.6 var(--mono); margin: 0 0 1.4em; }59.prose .meta a { color: var(--dim); }60.prose math { font-size: 1.05em; }61.prose math[display="block"] { display: block; max-width: 100%; overflow-x: auto; margin: 1em 0; }62.prose code, .prose li, .prose p { overflow-wrap: anywhere; }6364/* FIGURES */6566img.dark { display: var(--show-dark) !important; }67img.light { display: var(--show-light) !important; }6869/* MOTION */7071@media (prefers-reduced-motion: reduce) {72  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }73}7475/* PRINT */7677@media print {78  @page { margin: 20mm; }79  body { background: #fff; color: #000; font-size: 11pt; }80  a { color: inherit; text-decoration: underline; }81  a[href^="http"]::after, a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }82  img.dark { display: none !important; }83  img.light { display: block !important; }84  .prose { max-width: none; }85  .prose pre { white-space: pre-wrap; overflow: visible; background: none; padding: 0; }86  .prose code { background: none; }87  .prose math[display="block"] { overflow: visible; }88  h1, h2, h3, h4 { break-after: avoid; }89  figure, table, pre, li, math[display="block"] { break-inside: avoid; }90}