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