1html {
  2	--bg-page: #306;
  3	--bg-dark: #002;
  4	--fg: #dcf;
  5	--fg-subtle: #a9c;
  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: 4em;
147	margin-bottom: 0.5em;
148	box-sizing: border-box;
149	max-width: 100%;
150}
151textarea#honknoise {
152	height: 10em;
153}
154input[type="checkbox"] {
155	position: fixed;
156	top: -9999px;
157}
158input[type="checkbox"] + span:after {
159	content: "no";
160}
161input[type="checkbox"]:checked + span:after {
162	content: "yes";
163}
164input[type="checkbox"]:focus + span:after {
165	outline: 1px solid var(--fg);
166}
167input[type=file] {
168	display: none;
169}
170
171.glow {
172	box-shadow: 0px 0px 16px var(--fg);
173}
174
175.honk {
176	margin: auto;
177	background: var(--bg-dark);
178	border: 1px solid var(--fg);
179	border-radius: 1em;
180	margin-bottom: 1em;
181	padding-left: 1em;
182	padding-right: 1em;
183	padding-top: 0;
184	overflow: hidden;
185}
186
187.honk	#honkform {
188		padding: 1em;
189		border: 1px solid var(--fg);
190	}
191.honk	a {
192		color: var(--fg);
193	}
194.honk	header {
195		white-space: nowrap;
196		overflow: hidden;
197		text-overflow: ellipsis;
198		font-size: 0.8em;
199		line-height: 1.1;
200		margin-top: 1em;
201		height: 64px;
202	}
203
204.honk	header	.clip a {
205			color: var(--fg-subtle);
206		}
207.honk	header	img {
208			float: left;
209			margin-right: 1em;
210			width: 64px;
211			height: 64px;
212		}
213.honk	header	p {
214			margin-top: 0px;
215		}
216.honk	.actions button {
217		margin-left: 4em;
218		margin-top: 2em;
219	}
220.honk	.noise {
221		line-height: 1.4;
222	}
223
224.honk	.noise	code .kw { font-weight: bold; }
225.honk	.noise	code .bi { font-weight: bold; }
226.honk	.noise	code .st { color: var(--fg-subtle); }
227.honk	.noise	code .nm { color: #ba88ff; }
228.honk	.noise	code .op { color: #ba88ff; }
229.honk	.noise	code .tp { font-weight: bold; }
230.honk	.noise	code .cm { color: var(--fg-subtle); font-style: italic; }
231.honk	.noise	code .al { color: #aaffbb; }
232.honk	.noise	code .dl { color: #ffaabb; }
233
234.honk	details.actions summary {
235		color: var(--fg-subtle);
236}
237.subtle .noise {
238		color: var(--fg-subtle);
239		font-size: 0.8em;
240}
241.subtle .noise a {
242		color: var(--fg-subtle);
243}
244.limited {
245	border: 1px solid var(--fg-limited);
246	color: var(--fg-limited);
247}
248.limited	.noise {
249		color: var(--fg-limited);
250	}
251.limited	.noise a {
252		color: var(--fg-limited);
253	}
254.limited	details.actions summary {
255		color: var(--fg-limited);
256	}
257details.noise[open] summary {
258	display: none;
259}
260h1, h2 {
261	font-size: 1.2em;
262}
263h3, h4 {
264	font-size: 1.1em;
265}
266
267img:not(.emu) {
268	background: var(--bg-page);
269}
270img, video {
271	max-width: 100%;
272	max-height: 600px;
273}
274.noise img:not(.emu) {
275	display: block;
276}
277img.emu {
278	width: 2em;
279	height: 2em;
280	vertical-align: middle;
281	margin: -2px;
282	object-fit: contain;
283}
284@media screen and (max-width: 740px) {
285	body {
286		font-size: 12px;
287	}
288	.honk header {
289		height: 52px;
290	}
291	.honk header img {
292		width: 48px;
293		height: 48px;
294	}
295}
296@media print {
297	#topmenu, #topspacer, #infobox, #refreshbox, .actions {
298		display: none;
299	}
300	html {
301		--bg-page: white;
302		--bg-dark: white;
303		--fg: black;
304		--fg-subtle: black;
305		--fg-limited: #a79;
306	}
307}