1@import "tailwindcss";
2
3/* `dark:` utilities key off the .dark class, not the OS. */
4@custom-variant dark (&:where(.dark, .dark *));
5
6/*
7 * Semantic tokens, GitHub-Primer-derived. `@theme inline` maps utility
8 * names (bg-canvas, text-fg-muted, …) directly onto the raw variables
9 * below, which :root defines for light and .dark overrides. The .dark
10 * class on <html> is the single source of truth — system preference is
11 * applied by the pre-paint script in index.html, never by CSS @media.
12 *
13 * NOTE: never nest @theme inside @media — Tailwind v4 hoists it and
14 * unconditionally merges it over the base theme (verified v4.3.3).
15 */
16@theme inline {
17 --color-canvas: var(--canvas);
18 --color-canvas-subtle: var(--canvas-subtle);
19 --color-border-muted: var(--border-muted);
20 --color-fg-default: var(--fg-default);
21 --color-fg-muted: var(--fg-muted);
22 --color-fg-on-emphasis: var(--fg-on-emphasis);
23 --color-accent: var(--accent);
24 --color-success: var(--success);
25 --color-success-emphasis: var(--success-emphasis);
26 --color-success-emphasis-hover: var(--success-emphasis-hover);
27 --color-danger: var(--danger);
28 --color-danger-emphasis: var(--danger-emphasis);
29 --color-danger-emphasis-hover: var(--danger-emphasis-hover);
30 --color-attention: var(--attention);
31 --color-done: var(--done);
32 --color-done-emphasis: var(--done-emphasis);
33 --color-folder: var(--folder);
34 --color-tab-active: var(--tab-active);
35}
36
37:root {
38 color-scheme: light;
39
40 --canvas: #ffffff;
41 --canvas-subtle: #f6f8fa;
42 --border-muted: #d1d9e0;
43 --fg-default: #1f2328;
44 --fg-muted: #59636e;
45 --fg-on-emphasis: #ffffff;
46 --accent: #0969da;
47 --success: #1a7f37;
48 --success-emphasis: #1f883d;
49 --success-emphasis-hover: #1c8139;
50 --danger: #d1242f;
51 --danger-emphasis: #cf222e;
52 --danger-emphasis-hover: #a40e26;
53 --attention: #9a6700;
54 --done: #8250df;
55 --done-emphasis: #8250df;
56 --folder: #54aeff;
57 --tab-active: #fd8c73;
58
59 /* highlight.js — GitHub light syntax palette */
60 --hl-comment: #59636e;
61 --hl-keyword: #cf222e;
62 --hl-string: #0a3069;
63 --hl-literal: #0550ae;
64 --hl-title: #6639ba;
65 --hl-attr: #953800;
66 --hl-tag: #116329;
67}
68
69.dark {
70 color-scheme: dark;
71
72 --canvas: #0d1117;
73 --canvas-subtle: #151b23;
74 --border-muted: #3d444d;
75 --fg-default: #f0f6fc;
76 --fg-muted: #9198a1;
77 --fg-on-emphasis: #ffffff;
78 --accent: #4493f8;
79 --success: #3fb950;
80 --success-emphasis: #238636;
81 --success-emphasis-hover: #29903b;
82 --danger: #f85149;
83 --danger-emphasis: #da3633;
84 --danger-emphasis-hover: #b62324;
85 --attention: #d29922;
86 --done: #ab7df8;
87 --done-emphasis: #8957e5;
88 --folder: #58a6ff;
89 --tab-active: #f78166;
90
91 /* highlight.js — GitHub dark syntax palette */
92 --hl-comment: #9198a1;
93 --hl-keyword: #ff7b72;
94 --hl-string: #a5d6ff;
95 --hl-literal: #79c0ff;
96 --hl-title: #d2a8ff;
97 --hl-attr: #ffa657;
98 --hl-tag: #7ee787;
99}
100
101body {
102 background-color: var(--canvas);
103 color: var(--fg-default);
104}
105
106/* README rendering (marked output). */
107.markdown-body {
108 font-size: 0.875rem;
109 line-height: 1.6;
110 word-wrap: break-word;
111}
112.markdown-body h1,
113.markdown-body h2 {
114 font-size: 1.5em;
115 font-weight: 600;
116 margin: 1em 0 0.5em;
117 padding-bottom: 0.3em;
118 border-bottom: 1px solid var(--color-border-muted);
119}
120.markdown-body h2 {
121 font-size: 1.25em;
122}
123.markdown-body h3,
124.markdown-body h4,
125.markdown-body h5 {
126 font-weight: 600;
127 margin: 1em 0 0.5em;
128}
129.markdown-body p,
130.markdown-body ul,
131.markdown-body ol,
132.markdown-body blockquote {
133 margin: 0 0 0.75em;
134}
135.markdown-body ul {
136 list-style: disc;
137 padding-left: 1.5em;
138}
139.markdown-body ol {
140 list-style: decimal;
141 padding-left: 1.5em;
142}
143.markdown-body a {
144 color: var(--color-accent);
145}
146.markdown-body a:hover {
147 text-decoration: underline;
148}
149.markdown-body code {
150 background-color: color-mix(in srgb, var(--color-fg-muted) 15%, transparent);
151 border-radius: 4px;
152 padding: 0.15em 0.35em;
153 font-size: 0.85em;
154}
155.markdown-body pre {
156 background-color: var(--color-canvas-subtle);
157 border-radius: 6px;
158 padding: 1em;
159 overflow-x: auto;
160 margin: 0 0 0.75em;
161}
162.markdown-body pre code {
163 background: none;
164 padding: 0;
165}
166.markdown-body blockquote {
167 border-left: 4px solid var(--color-border-muted);
168 padding-left: 1em;
169 color: var(--color-fg-muted);
170}
171.markdown-body table {
172 border-collapse: collapse;
173 margin: 0 0 0.75em;
174}
175.markdown-body th,
176.markdown-body td {
177 border: 1px solid var(--color-border-muted);
178 padding: 0.3em 0.75em;
179}
180.markdown-body img {
181 max-width: 100%;
182}
183
184/* highlight.js token classes — colors flip with the .dark class above. */
185.hljs-comment,
186.hljs-quote {
187 color: var(--hl-comment);
188 font-style: italic;
189}
190.hljs-keyword,
191.hljs-selector-tag,
192.hljs-type,
193.hljs-doctag,
194.hljs-meta .hljs-keyword {
195 color: var(--hl-keyword);
196}
197.hljs-string,
198.hljs-regexp,
199.hljs-meta .hljs-string {
200 color: var(--hl-string);
201}
202.hljs-number,
203.hljs-literal,
204.hljs-built_in,
205.hljs-symbol,
206.hljs-meta,
207.hljs-selector-id,
208.hljs-selector-class,
209.hljs-operator {
210 color: var(--hl-literal);
211}
212.hljs-title,
213.hljs-title.class_,
214.hljs-title.function_,
215.hljs-section {
216 color: var(--hl-title);
217}
218.hljs-attr,
219.hljs-attribute,
220.hljs-variable,
221.hljs-template-variable,
222.hljs-params {
223 color: var(--hl-attr);
224}
225.hljs-name,
226.hljs-tag,
227.hljs-bullet,
228.hljs-addition {
229 color: var(--hl-tag);
230}
231.hljs-deletion {
232 color: var(--hl-keyword);
233}
234.hljs-emphasis {
235 font-style: italic;
236}
237.hljs-strong {
238 font-weight: 600;
239}
240
241/*
242 * @pierre/diffs styling bridge. The diff/file components render into
243 * Shadow DOM, so Tailwind never reaches them — the only styling channel
244 * is inherited `--diffs-*` custom properties. Plain :root on purpose
245 * (consumed by the shadow root, not by Tailwind's @theme).
246 */
247:root {
248 --diffs-font-family:
249 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
250 --diffs-font-size: 12px;
251 --diffs-line-height: 1.5;
252 --diffs-tab-size: 2;
253 --diffs-header-font-family: ui-sans-serif, system-ui, sans-serif;
254}