1html {
  2	--bg-page: #305;
  3	--bg-dark: #002;
  4	--fg: #dde;
  5	--fg-subtle: #aab;
  6	--fg-limited: #a79;
  7}
  8
  9body {
 10	background: var(--bg-page);
 11	color: var(--fg);
 12	font-size: 1em;
 13	word-wrap: break-word;
 14	font-family: sans-serif, "Noto Color Emoji";
 15	line-height: 1.2;
 16	overscroll-behavior-y: contain;
 17}
 18pre, code {
 19	white-space: pre-wrap;
 20}
 21blockquote {
 22	margin-left: 0em;
 23	padding-left: 0.5em;
 24	border-left: 1px solid var(--fg-subtle);
 25}
 26blockquote cite {
 27	margin-left: 2em;
 28}
 29table {
 30	display: block;
 31	max-width: 100%;
 32	overflow-x: auto;
 33}
 34a {
 35	color: var(--fg);
 36}
 37form, input, textarea {
 38	font-family: monospace, "Noto Color Emoji";
 39}
 40p {
 41	margin-top: 1em;
 42	margin-bottom: 1em;
 43}
 44input {
 45	background: var(--bg-page);
 46	color: var(--fg);
 47	font-size: 1.0em;
 48	line-height: 1.2em;
 49	padding: 0.4em;
 50}
 51#honkform input {
 52	font-size: 0.8em;
 53}
 54body > header {
 55	margin: 1em auto;
 56	font-size: 1.5em;
 57}
 58body > header span {
 59	margin-left: 2em;
 60}
 61body > header p {
 62	padding: 1em;
 63}
 64header > details {
 65	background: var(--bg-page);
 66	padding: 1em 1em 1em 1em;
 67	position: fixed;
 68	top: 0;
 69	left: 0;
 70	display: inline;
 71	max-height: calc(100% - 1em);
 72	overflow: auto;
 73	opacity: 0.7;
 74	overscroll-behavior: contain;
 75}
 76header > details[open] {
 77	padding: 1em 1em 0em 1em;
 78	background: var(--bg-dark);
 79	border: 1px solid var(--fg);
 80	margin-bottom: 1em;
 81	opacity: 1.0;
 82}
 83header > details summary span {
 84	display: none;
 85}
 86header > details[open] summary span {
 87	display: inline;
 88}
 89header > details li {
 90	margin: 1em 0em 1em 0em;
 91}
 92details summary {
 93	display: inline;
 94}
 95@supports (-moz-appearance:none) {
 96	details summary {
 97		display: list-item;
 98	}
 99}
100main {
101	max-width: 1200px;
102	margin: auto;
103	font-size: 1.5em;
104}
105.info {
106	background: var(--bg-dark);
107	border: 1px solid var(--fg);
108	margin-bottom: 1em;
109	padding: 0em 1em 0em 1em;
110}
111.info div {
112	margin-top: 1em;
113	margin-bottom: 1em;
114}
115label {
116	font-size: 0.8em;
117}
118label.button, button, select {
119	font-size: 16px;
120	font-family: monospace;
121	color: var(--fg);
122	background: var(--bg-page);
123	border: 1px solid var(--fg);
124	padding: 0.5em;
125	white-space: nowrap;
126}
127.buttonarray {
128	margin-top: -2.0em;
129}
130.buttonarray button, .buttonarray > span {
131	margin-top: 2.0em;
132	display: inline-block;
133}
134button a {
135	text-decoration: none;
136}
137form {
138	margin-top: 1em;
139}
140textarea {
141	padding: 0.5em;
142	font-size: 1em;
143	background: var(--bg-page);
144	color: var(--fg);
145	width: 600px;
146	height: 8em;
147	margin-bottom: 0.5em;
148	box-sizing: border-box;
149	max-width: 100%;
150}
151input[type="checkbox"] {
152	position: fixed;
153	top: -9999px;
154}
155input[type="checkbox"] + span:after {
156	content: "no";
157}
158input[type="checkbox"]:checked + span:after {
159	content: "yes";
160}
161input[type="checkbox"]:focus + span:after {
162	outline: 1px solid var(--fg);
163}
164input[type=file] {
165	display: none;
166}
167
168.glow {
169	box-shadow: 0px 0px 16px var(--fg);
170}
171
172.honk {
173	margin: auto;
174	background: var(--bg-dark);
175	border: 1px solid var(--fg);
176	border-radius: 1em;
177	margin-bottom: 1em;
178	padding-left: 1em;
179	padding-right: 1em;
180	padding-top: 0;
181	overflow: hidden;
182}
183
184.honk	#honkform {
185		padding: 1em;
186		border: 1px solid var(--fg);
187	}
188.honk	a {
189		color: var(--fg);
190	}
191.honk	header {
192		white-space: nowrap;
193		overflow: hidden;
194		text-overflow: ellipsis;
195		font-size: 0.8em;
196		line-height: 1.1;
197		margin-top: 1em;
198		height: 64px;
199	}
200
201.honk	header	.clip a {
202			color: var(--fg-subtle);
203		}
204.honk	header	img {
205			float: left;
206			margin-right: 1em;
207			width: 64px;
208			height: 64px;
209		}
210.honk	header	p {
211			margin-top: 0px;
212		}
213.honk	.actions button {
214		margin-left: 4em;
215		margin-top: 2em;
216	}
217.honk	.noise {
218		line-height: 1.4;
219	}
220
221.honk	.noise	code .kw { font-weight: bold; }
222.honk	.noise	code .bi { font-weight: bold; }
223.honk	.noise	code .st { color: var(--fg-subtle); }
224.honk	.noise	code .nm { color: #ba88ff; }
225.honk	.noise	code .op { color: #ba88ff; }
226.honk	.noise	code .tp { font-weight: bold; }
227.honk	.noise	code .cm { color: var(--fg-subtle); font-style: italic; }
228.honk	.noise	code .al { color: #aaffbb; }
229.honk	.noise	code .dl { color: #ffaabb; }
230
231.honk	details.actions summary {
232		color: var(--fg-subtle);
233}
234.subtle .noise {
235		color: var(--fg-subtle);
236		font-size: 0.8em;
237}
238.subtle .noise a {
239		color: var(--fg-subtle);
240}
241.limited {
242	border: 1px solid var(--fg-limited);
243	color: var(--fg-limited);
244}
245.limited	.noise {
246		color: var(--fg-limited);
247	}
248.limited	.noise a {
249		color: var(--fg-limited);
250	}
251.limited	details.actions summary {
252		color: var(--fg-limited);
253	}
254details.noise[open] summary {
255	display: none;
256}
257h1, h2 {
258	font-size: 1.2em;
259}
260h3, h4 {
261	font-size: 1.1em;
262}
263
264img:not(.emu) {
265	background: var(--bg-page);
266}
267img, video {
268	max-width: 100%;
269	max-height: 600px;
270}
271.noise img:not(.emu) {
272	display: block;
273}
274img.emu {
275	width: 2em;
276	height: 2em;
277	vertical-align: middle;
278	margin: -2px;
279	object-fit: contain;
280}
281@media screen and (max-width: 740px) {
282	body {
283		font-size: 12px;
284	}
285	.honk header {
286		height: 52px;
287	}
288	.honk header img {
289		width: 48px;
290		height: 48px;
291	}
292}
293@media print {
294	#topmenu, #topspacer, #infobox, #refreshbox, .actions {
295		display: none;
296	}
297	html {
298		--bg-page: white;
299		--bg-dark: white;
300		--fg: black;
301		--fg-subtle: black;
302		--fg-limited: #a79;
303	}
304}