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