1html {
  2	--bg-page: #306;
  3	--bg-dark: #002;
  4	--fg: #dcf;
  5	--hl: #dcf;
  6	--fg-subtle: #a9c;
  7	--fg-limited: #a79;
  8}
  9@media (prefers-color-scheme: dark) {
 10.noise img:not(.emu) {
 11	opacity: .5;
 12	transition: opacity .5s ease-in-out;
 13}
 14.noise img:not(.emu):hover {
 15	opacity: 1;
 16}
 17}
 18
 19body {
 20	background: var(--bg-page);
 21	color: var(--fg);
 22	font-size: 1em;
 23	word-wrap: break-word;
 24	font-family: sans-serif, "Noto Color Emoji";
 25	line-height: 1.2;
 26	overscroll-behavior-y: contain;
 27}
 28pre, code {
 29	white-space: pre-wrap;
 30}
 31blockquote {
 32	margin-left: 0em;
 33	margin-bottom: 0em;
 34	padding-left: 0.5em;
 35	border-left: 1px solid var(--fg-subtle);
 36}
 37cite {
 38	margin-left: 2em;
 39}
 40table {
 41	display: block;
 42	max-width: 100%;
 43	overflow-x: auto;
 44}
 45a {
 46	color: var(--fg);
 47}
 48form, input, textarea {
 49	font-family: monospace, "Noto Color Emoji";
 50}
 51p {
 52	margin-top: 1em;
 53	margin-bottom: 1em;
 54}
 55input {
 56	background: var(--bg-page);
 57	color: var(--fg);
 58	font-size: 1.0em;
 59	line-height: 1.2em;
 60	padding: 0.4em;
 61	box-sizing: border-box;
 62	width: 100%;
 63}
 64#honkform input {
 65	font-size: 0.8em;
 66}
 67body > header {
 68	margin: 1em auto;
 69	font-size: 1.5em;
 70}
 71body > header span {
 72	margin-left: 2em;
 73}
 74body > header p {
 75	padding: 1em;
 76}
 77header > details {
 78	background: var(--bg-page);
 79	padding: 1em 1em 1em 1em;
 80	position: fixed;
 81	top: 0;
 82	left: 0;
 83	display: inline;
 84	max-height: calc(100% - 1em);
 85	overflow: auto;
 86	opacity: 0.7;
 87	overscroll-behavior: contain;
 88	z-index: 2;
 89}
 90header > details[open] {
 91	padding: 1em 1em 0em 1em;
 92	background: var(--bg-dark);
 93	border: 1px solid var(--hl);
 94	margin-bottom: 1em;
 95	opacity: 1.0;
 96}
 97header > details summary span {
 98	display: none;
 99}
100header > details[open] summary span {
101	display: inline;
102}
103header > details li {
104	margin: 1em 0em 1em 0em;
105}
106details summary {
107	cursor: pointer;
108}
109main {
110	max-width: 1200px;
111	margin: auto;
112	font-size: 1.5em;
113}
114hr {
115	border-color: var(--hl);
116}
117.info {
118	background: var(--bg-dark);
119	border: 1px solid var(--hl);
120	margin-bottom: 1em;
121	padding: 0em 1em 0em 1em;
122}
123.info div {
124	margin-top: 1em;
125	margin-bottom: 1em;
126}
127label {
128	font-size: 0.8em;
129}
130label.button, button, select {
131	font-size: 16px;
132	font-family: monospace;
133	color: var(--fg);
134	background: var(--bg-page);
135	border: 1px solid var(--hl);
136	padding: 0.5em;
137	white-space: nowrap;
138}
139.buttonarray {
140	margin-top: -2.0em;
141}
142.buttonarray button, .buttonarray > span {
143	margin-top: 2.0em;
144	display: inline-block;
145}
146button a {
147	text-decoration: none;
148}
149button {
150	cursor: pointer;
151}
152form {
153	margin-top: 1em;
154}
155textarea {
156	padding: 0.5em;
157	font-size: 1em;
158	background: var(--bg-page);
159	color: var(--fg);
160	width: 100%;
161	height: 4em;
162	margin-bottom: 0.5em;
163	box-sizing: border-box;
164	max-width: 100%;
165}
166textarea#honknoise {
167	height: 10em;
168}
169input[type="checkbox"] {
170	position: fixed;
171	top: -9999px;
172}
173input[type="checkbox"] + span:after {
174	content: "no";
175}
176input[type="checkbox"]:checked + span:after {
177	content: "yes";
178}
179input[type="checkbox"]:focus + span:after {
180	outline: 1px solid var(--fg);
181}
182input[type=file] {
183	display: none;
184}
185
186.glow {
187	box-shadow: 0px 0px 16px var(--hl);
188}
189.honk {
190	margin: auto;
191	background: var(--bg-dark);
192	border: 1px solid var(--hl);
193	border-radius: 1em;
194	margin-bottom: 1em;
195	padding-left: 1em;
196	padding-right: 1em;
197	padding-top: 0;
198	overflow: hidden;
199}
200.honk {
201	max-height: 120vh;
202	overflow-y: scroll;
203}
204
205.level1 {
206	margin-left: 0.5em;
207}
208.level1::before {
209	position: absolute;
210	content: ">";
211}
212.level2 {
213	margin-left: 1.0em;
214}
215.level2::before {
216	position: absolute;
217	content: ">>";
218}
219.level3 {
220	margin-left: 1.5em;
221}
222.level3::before {
223	position: absolute;
224	content: ">>>";
225}
226.level4 {
227	margin-left: 2.0em;
228}
229.level4::before {
230	position: absolute;
231	content: ">>>>";
232}
233
234.chat {
235	border-bottom: 0.5px solid var(--fg-subtle);
236	padding-left: 1em;
237}
238.chat p {
239	margin-top: 0.2em;
240	margin-bottom: 0.2em;
241}
242.chattarget {
243	border-bottom: 1px solid var(--fg-subtle);
244}
245.chatstamp {
246	margin-left: -1em;
247}
248
249.honk	#honkform {
250		padding: 1em;
251		border: 1px solid var(--fg);
252	}
253.honk	a {
254		color: var(--fg);
255	}
256.honk	header {
257		white-space: nowrap;
258		overflow: hidden;
259		text-overflow: ellipsis;
260		font-size: 0.8em;
261		line-height: 1.1;
262		margin-top: 1em;
263		height: 64px;
264	}
265
266.honk	header	.clip a {
267			color: var(--fg-subtle);
268		}
269.honk	header	img {
270			float: left;
271			margin-right: 1em;
272			width: 64px;
273			height: 64px;
274		}
275.honk	header	p {
276			margin-top: 0px;
277		}
278.honk	.actions button {
279		margin-left: 4em;
280		margin-top: 2em;
281	}
282.honk	.noise {
283		line-height: 1.4;
284	}
285
286.honk	.noise	code .kw { font-weight: bold; }
287.honk	.noise	code .bi { font-weight: bold; }
288.honk	.noise	code .st { color: var(--fg-subtle); }
289.honk	.noise	code .nm { color: #ba88ff; }
290.honk	.noise	code .op { color: #ba88ff; }
291.honk	.noise	code .tp { font-weight: bold; }
292.honk	.noise	code .cm { color: var(--fg-subtle); font-style: italic; }
293.honk	.noise	code .al { color: #aaffbb; }
294.honk	.noise	code .dl { color: #ffaabb; }
295
296.honk	details.actions summary {
297		color: var(--fg-subtle);
298}
299
300#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 5px var(--fg-subtle);text-align:center;display:none;}
301#emupicker img{margin:0;}
302.emuload{background:var(--bg-page);padding:0.5em;}
303
304.subtle .noise {
305		color: var(--fg-subtle);
306}
307.subtle details.noise {
308		font-size: 0.8em;
309}
310.subtle .noise a {
311		color: var(--fg-subtle);
312}
313.limited {
314	border: 1px solid var(--fg-limited);
315	color: var(--fg-limited);
316}
317.limited	.glow {
318		box-shadow: 0px 0px 16px var(--fg-limited);
319}
320.limited	.noise {
321		color: var(--fg-limited);
322	}
323.limited	.noise a {
324		color: var(--fg-limited);
325	}
326.limited	details.actions summary {
327		color: var(--fg-limited);
328	}
329details.noise[open] summary.noise {
330	display: none;
331}
332h1, h2 {
333	font-size: 1.2em;
334}
335h3, h4 {
336	font-size: 1.1em;
337}
338
339img:not(.emu) {
340	background: var(--bg-page);
341}
342img, video {
343	max-width: 100%;
344	object-fit: scale-down;
345	width: auto;
346	height: auto;
347}
348.noise img:not(.emu) {
349	display: block;
350}
351.noise img.donk {
352	max-height: 400px;
353	max-width: 48%;
354	display: inline;
355}
356img.emu {
357	height: 2em;
358	vertical-align: middle;
359}
360.nophone {
361	position: fixed;
362	opacity: 0.7;
363	cursor: pointer;
364}
365@media screen and (max-width: 1360px) {
366	.nophone {
367		display: none;
368	}
369	.honk {
370		max-height: 85vh;
371	}
372}
373@media screen and (max-width: 740px) {
374	body {
375		font-size: 12px;
376	}
377	.honk header {
378		height: 52px;
379	}
380	.honk header img {
381		width: 48px;
382		height: 48px;
383	}
384	details summary {
385		outline: none;
386	}
387	.noise img.donk {
388		max-height: 100px;
389		display: inline;
390	}
391}
392@media print {
393	#topmenu, #topspacer, #infobox, #refreshbox, .actions {
394		display: none;
395	}
396	html {
397		--bg-page: white;
398		--bg-dark: white;
399		--fg: black;
400		--fg-subtle: black;
401		--fg-limited: #a79;
402	}
403	.honk {
404		max-height: 100%;
405	}
406}
407
408/*
409 * CSP: style-src: self
410 */
411
412li.details {
413	list-style-type: none;
414	margin-left: -1em;
415}
416
417.left1em {
418	margin-left: 1em;
419}
420
421.hide {
422	display: none;
423}
424
425.text-left {
426	text-align: left;
427}
428.text-right {
429	text-align: right;
430}
431.text-center {
432	text-align: center;
433}
434
435.font08em {
436	font-size: 0.8em;
437}
438
439.font18em {
440	font-size: 1.8em;
441}
442
443.wsnowrap {
444	white-space: nowrap;
445}
446
447.skinny main {
448	max-width: 700px;
449}
450
451.fontmonospace {
452	font-family: monospace;
453}