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 /* the snapshots fade over this layer: transparent, it shows a white canvas
21 for a frame when the new page is a little late */
22 ::view-transition { background: var(--bg-canvas); }
23 @media (prefers-reduced-motion: reduce) {
24 @view-transition { navigation: none; }
25 }
26
27 html { background: var(--bg-canvas); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
28 body {
29 min-height: 100dvh;
30 display: flex; flex-direction: column;
31 font: var(--fs) / var(--lh) var(--font);
32 color: var(--ink);
33 background: var(--bg-canvas);
34 tab-size: 4;
35 -webkit-font-smoothing: antialiased;
36 }
37 h1, h2, h3, h4 { font-family: var(--mono); font-weight: 700; color: var(--ink-hi); letter-spacing: -.01em; }
38 h1 { font-size: 22px; line-height: 30px; }
39 h2 { font-size: 17px; line-height: 26px; }
40 h3, h4 { font-size: var(--fs); }
41 b, strong { font-weight: 700; }
42 small { font-size: var(--fs-s); }
43 code, pre, kbd, samp { font-family: var(--mono); }
44 a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
45 a:hover { text-decoration-color: var(--accent); color: var(--ink-hi); }
46 hr { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; }
47 ::selection { background: var(--ink-hi); color: var(--on-ink); }
48
49 :focus { outline: none; }
50 :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
51
52 [hidden] { display: none !important; }
53
54 kbd {
55 display: inline-block; min-width: 20px; padding: 0 5px;
56 font: 600 var(--fs-xs) / 18px var(--mono); text-align: center; color: var(--ink-dim);
57 background: var(--bg-canvas); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px;
58 }
59
60 .skip {
61 position: absolute; left: var(--s2); top: var(--s2); z-index: 30; padding: var(--s1) var(--s3);
62 background: var(--ink-hi); color: var(--on-ink); border-radius: var(--r-s);
63 transform: translateY(-200%);
64 }
65 .skip:focus { transform: none; }
66
67 main { min-width: 0; }
68 main:focus-visible { outline: none; }
69
70 @media (prefers-reduced-motion: no-preference) {
71 a, button, tr, li, summary, .btn { transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease; }
72 }
73}
74
75@layer utilities {
76 /* what does nothing without scripts waits for ermite.js, which sets html.js */
77 html:not(.js) [data-js], html:not(.js) .filter { display: none; }
78 .dim { color: var(--ink-dim); }
79 .mute { color: var(--ink-mute); }
80 .nowrap { white-space: nowrap; }
81 .num { text-align: right; font-variant-numeric: tabular-nums; }
82 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
83 .rule { border-top: 1px solid var(--border); }
84}