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
201.level1 {
202	margin-left: 0.5em;
203}
204.level1::before {
205	position: absolute;
206	content: ">";
207}
208.level2 {
209	margin-left: 1.0em;
210}
211.level2::before {
212	position: absolute;
213	content: ">>";
214}
215.level3 {
216	margin-left: 1.5em;
217}
218.level3::before {
219	position: absolute;
220	content: ">>>";
221}
222.level4 {
223	margin-left: 2.0em;
224}
225.level4::before {
226	position: absolute;
227	content: ">>>>";
228}
229
230.chat {
231	border-bottom: 0.5px solid var(--fg-subtle);
232	padding-left: 1em;
233}
234.chat p {
235	margin-top: 0.2em;
236	margin-bottom: 0.2em;
237}
238.chattarget {
239	border-bottom: 1px solid var(--fg-subtle);
240}
241.chatstamp {
242	margin-left: -1em;
243}
244
245.honk	#honkform {
246		padding: 1em;
247		border: 1px solid var(--fg);
248	}
249.honk	a {
250		color: var(--fg);
251	}
252.honk	header {
253		white-space: nowrap;
254		overflow: hidden;
255		text-overflow: ellipsis;
256		font-size: 0.8em;
257		line-height: 1.1;
258		margin-top: 1em;
259		height: 64px;
260	}
261
262.honk	header	.clip a {
263			color: var(--fg-subtle);
264		}
265.honk	header	img {
266			float: left;
267			margin-right: 1em;
268			width: 64px;
269			height: 64px;
270		}
271.honk	header	p {
272			margin-top: 0px;
273		}
274.honk	.actions button {
275		margin-left: 4em;
276		margin-top: 2em;
277	}
278.honk	.noise {
279		line-height: 1.4;
280	}
281
282.honk	.noise	code .kw { font-weight: bold; }
283.honk	.noise	code .bi { font-weight: bold; }
284.honk	.noise	code .st { color: var(--fg-subtle); }
285.honk	.noise	code .nm { color: #ba88ff; }
286.honk	.noise	code .op { color: #ba88ff; }
287.honk	.noise	code .tp { font-weight: bold; }
288.honk	.noise	code .cm { color: var(--fg-subtle); font-style: italic; }
289.honk	.noise	code .al { color: #aaffbb; }
290.honk	.noise	code .dl { color: #ffaabb; }
291
292.honk	details.actions summary {
293		color: var(--fg-subtle);
294}
295
296#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 5px var(--fg-subtle);text-align:center;display:none;}
297#emupicker img{margin:0;}
298.emuload{background:var(--bg-page);padding:0.5em;}
299
300.subtle .noise {
301		color: var(--fg-subtle);
302}
303.subtle details.noise {
304		font-size: 0.8em;
305}
306.subtle .noise a {
307		color: var(--fg-subtle);
308}
309.limited {
310	border: 1px solid var(--fg-limited);
311	color: var(--fg-limited);
312}
313.limited	.glow {
314		box-shadow: 0px 0px 16px var(--fg-limited);
315}
316.limited	.noise {
317		color: var(--fg-limited);
318	}
319.limited	.noise a {
320		color: var(--fg-limited);
321	}
322.limited	details.actions summary {
323		color: var(--fg-limited);
324	}
325details.noise[open] summary.noise {
326	display: none;
327}
328h1, h2 {
329	font-size: 1.2em;
330}
331h3, h4 {
332	font-size: 1.1em;
333}
334
335img:not(.emu) {
336	background: var(--bg-page);
337}
338img, video {
339	max-width: 100%;
340}
341.noise img:not(.emu) {
342	display: block;
343}
344.noise img.donk {
345	max-height: 400px;
346	max-width: 48%;
347	display: inline;
348}
349img.emu {
350	height: 2em;
351	vertical-align: middle;
352	object-fit: contain;
353}
354.nophone {
355	position: fixed;
356	opacity: 0.7;
357	cursor: pointer;
358}
359@media screen and (max-width: 1360px) {
360	.nophone {
361		display: none;
362	}
363}
364@media screen and (max-width: 740px) {
365	body {
366		font-size: 12px;
367	}
368	.honk header {
369		height: 52px;
370	}
371	.honk header img {
372		width: 48px;
373		height: 48px;
374	}
375	details summary {
376		outline: none;
377	}
378	.noise img.donk {
379		max-height: 100px;
380		display: inline;
381	}
382}
383@media print {
384	#topmenu, #topspacer, #infobox, #refreshbox, .actions {
385		display: none;
386	}
387	html {
388		--bg-page: white;
389		--bg-dark: white;
390		--fg: black;
391		--fg-subtle: black;
392		--fg-limited: #a79;
393	}
394}
395
396/*
397 * CSP: style-src: self
398 */
399
400li.details {
401	list-style-type: none;
402	margin-left: -1em;
403}
404
405.left1em {
406	margin-left: 1em;
407}
408
409.hide {
410	display: none;
411}
412
413.text-left {
414	text-align: left;
415}
416.text-right {
417	text-align: right;
418}
419.text-center {
420	text-align: center;
421}
422
423.font08em {
424	font-size: 0.8em;
425}
426
427.font18em {
428	font-size: 1.8em;
429}
430
431.wsnowrap {
432	white-space: nowrap;
433}
434
435.skinny main {
436	max-width: 700px;
437}
438
439.fontmonospace {
440	font-family: monospace;
441}