1@layer reset {
2 *, *::before, *::after { box-sizing: border-box; }
3 html { -webkit-text-size-adjust: 100%; }
4 body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre { margin: 0; }
5 ul, ol { padding: 0; list-style: none; }
6 table { border-collapse: collapse; border-spacing: 0; }
7 th, td { padding: 0; text-align: left; font-weight: inherit; }
8 button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
9 button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
10 input { background: transparent; border: 0; }
11 summary { cursor: pointer; }
12 dialog { color: inherit; border: 0; padding: 0; max-width: none; max-height: none; }
13 img { max-width: 100%; }
14}
15
16@layer base {
17 /* a cross-document fade between pages, where the browser has it */
18 @view-transition { navigation: auto; }
19 ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
20 @media (prefers-reduced-motion: reduce) {
21 @view-transition { navigation: none; }
22 }
23
24 html { background: var(--bg-canvas); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
25 body {
26 min-height: 100dvh;
27 display: flex; flex-direction: column;
28 font: var(--fs) / var(--lh) var(--font);
29 color: var(--ink);
30 background: var(--bg-canvas);
31 tab-size: 4;
32 -webkit-font-smoothing: antialiased;
33 }
34 h1, h2, h3, h4 { font-family: var(--mono); font-weight: 700; color: var(--ink-hi); letter-spacing: -.01em; }
35 h1 { font-size: 22px; line-height: 30px; }
36 h2 { font-size: 17px; line-height: 26px; }
37 h3, h4 { font-size: var(--fs); }
38 b, strong { font-weight: 700; }
39 small { font-size: var(--fs-s); }
40 code, pre, kbd, samp { font-family: var(--mono); }
41 a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
42 a:hover { text-decoration-color: currentColor; color: var(--ink-hi); }
43 hr { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; }
44 ::selection { background: var(--ink-hi); color: var(--on-ink); }
45
46 :focus { outline: none; }
47 :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
48
49 [hidden] { display: none !important; }
50
51 kbd {
52 display: inline-block; min-width: 20px; padding: 0 5px;
53 font: 600 var(--fs-xs) / 18px var(--mono); text-align: center; color: var(--ink-dim);
54 background: var(--bg-canvas); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px;
55 }
56
57 .skip {
58 position: absolute; left: var(--s2); top: var(--s2); z-index: 30; padding: var(--s1) var(--s3);
59 background: var(--ink-hi); color: var(--on-ink); border-radius: var(--r-s);
60 transform: translateY(-200%);
61 }
62 .skip:focus { transform: none; }
63
64 main { min-width: 0; }
65 main:focus-visible { outline: none; }
66
67 @media (prefers-reduced-motion: no-preference) {
68 a, button, tr, li, summary, .btn { transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease; }
69 }
70}
71
72@layer utilities {
73 /* what does nothing without scripts waits for ermite.js, which sets html.js */
74 html:not(.js) [data-js], html:not(.js) .filter { display: none; }
75 .dim { color: var(--ink-dim); }
76 .mute { color: var(--ink-mute); }
77 .nowrap { white-space: nowrap; }
78 .num { text-align: right; font-variant-numeric: tabular-nums; }
79 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
80 .rule { border-top: 1px solid var(--border); }
81}