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	padding-left: 0.5em;
 25	border-left: 1px solid var(--fg-subtle);
 26}
 27blockquote cite {
 28	margin-left: 2em;
 29}
 30table {
 31	display: block;
 32	max-width: 100%;
 33	overflow-x: auto;
 34}
 35a {
 36	color: var(--fg);
 37}
 38form, input, textarea {
 39	font-family: monospace, "Noto Color Emoji";
 40}
 41p {
 42	margin-top: 1em;
 43	margin-bottom: 1em;
 44}
 45input {
 46	background: var(--bg-page);
 47	color: var(--fg);
 48	font-size: 1.0em;
 49	line-height: 1.2em;
 50	padding: 0.4em;
 51}
 52#honkform input {
 53	font-size: 0.8em;
 54}
 55body > header {
 56	margin: 1em auto;
 57	font-size: 1.5em;
 58}
 59body > header span {
 60	margin-left: 2em;
 61}
 62body > header p {
 63	padding: 1em;
 64}
 65header > details {
 66	background: var(--bg-page);
 67	padding: 1em 1em 1em 1em;
 68	position: fixed;
 69	top: 0;
 70	left: 0;
 71	display: inline;
 72	max-height: calc(100% - 1em);
 73	overflow: auto;
 74	opacity: 0.7;
 75	overscroll-behavior: contain;
 76}
 77header > details[open] {
 78	padding: 1em 1em 0em 1em;
 79	background: var(--bg-dark);
 80	border: 1px solid var(--hl);
 81	margin-bottom: 1em;
 82	opacity: 1.0;
 83}
 84header > details summary span {
 85	display: none;
 86}
 87header > details[open] summary span {
 88	display: inline;
 89}
 90header > details li {
 91	margin: 1em 0em 1em 0em;
 92}
 93details summary {
 94	display: inline;
 95}
 96@supports (-moz-appearance:none) {
 97	details summary {
 98		display: list-item;
 99	}
100}
101main {
102	max-width: 1200px;
103	margin: auto;
104	font-size: 1.5em;
105}
106hr {
107	border-color: var(--hl);
108}
109.info {
110	background: var(--bg-dark);
111	border: 1px solid var(--hl);
112	margin-bottom: 1em;
113	padding: 0em 1em 0em 1em;
114}
115.info div {
116	margin-top: 1em;
117	margin-bottom: 1em;
118}
119label {
120	font-size: 0.8em;
121}
122label.button, button, select {
123	font-size: 16px;
124	font-family: monospace;
125	color: var(--fg);
126	background: var(--bg-page);
127	border: 1px solid var(--hl);
128	padding: 0.5em;
129	white-space: nowrap;
130}
131.buttonarray {
132	margin-top: -2.0em;
133}
134.buttonarray button, .buttonarray > span {
135	margin-top: 2.0em;
136	display: inline-block;
137}
138button a {
139	text-decoration: none;
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: 600px;
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
179.honk {
180	margin: auto;
181	background: var(--bg-dark);
182	border: 1px solid var(--hl);
183	border-radius: 1em;
184	margin-bottom: 1em;
185	padding-left: 1em;
186	padding-right: 1em;
187	padding-top: 0;
188	overflow: hidden;
189}
190
191.honk	#honkform {
192		padding: 1em;
193		border: 1px solid var(--fg);
194	}
195.honk	a {
196		color: var(--fg);
197	}
198.honk	header {
199		white-space: nowrap;
200		overflow: hidden;
201		text-overflow: ellipsis;
202		font-size: 0.8em;
203		line-height: 1.1;
204		margin-top: 1em;
205		height: 64px;
206	}
207
208.honk	header	.clip a {
209			color: var(--fg-subtle);
210		}
211.honk	header	img {
212			float: left;
213			margin-right: 1em;
214			width: 64px;
215			height: 64px;
216		}
217.honk	header	p {
218			margin-top: 0px;
219		}
220.honk	.actions button {
221		margin-left: 4em;
222		margin-top: 2em;
223	}
224.honk	.noise {
225		line-height: 1.4;
226	}
227
228.honk	.noise	code .kw { font-weight: bold; }
229.honk	.noise	code .bi { font-weight: bold; }
230.honk	.noise	code .st { color: var(--fg-subtle); }
231.honk	.noise	code .nm { color: #ba88ff; }
232.honk	.noise	code .op { color: #ba88ff; }
233.honk	.noise	code .tp { font-weight: bold; }
234.honk	.noise	code .cm { color: var(--fg-subtle); font-style: italic; }
235.honk	.noise	code .al { color: #aaffbb; }
236.honk	.noise	code .dl { color: #ffaabb; }
237
238.honk	details.actions summary {
239		color: var(--fg-subtle);
240}
241.subtle .noise {
242		color: var(--fg-subtle);
243		font-size: 0.8em;
244}
245.subtle .noise a {
246		color: var(--fg-subtle);
247}
248.limited {
249	border: 1px solid var(--fg-limited);
250	color: var(--fg-limited);
251}
252.limited	.noise {
253		color: var(--fg-limited);
254	}
255.limited	.noise a {
256		color: var(--fg-limited);
257	}
258.limited	details.actions summary {
259		color: var(--fg-limited);
260	}
261details.noise[open] summary {
262	display: none;
263}
264h1, h2 {
265	font-size: 1.2em;
266}
267h3, h4 {
268	font-size: 1.1em;
269}
270
271img:not(.emu) {
272	background: var(--bg-page);
273}
274img, video {
275	max-width: 100%;
276	max-height: 600px;
277}
278.noise img:not(.emu) {
279	display: block;
280}
281img.emu {
282	width: 2em;
283	height: 2em;
284	vertical-align: middle;
285	margin: -2px;
286	object-fit: contain;
287}
288@media screen and (max-width: 740px) {
289	body {
290		font-size: 12px;
291	}
292	.honk header {
293		height: 52px;
294	}
295	.honk header img {
296		width: 48px;
297		height: 48px;
298	}
299}
300@media print {
301	#topmenu, #topspacer, #infobox, #refreshbox, .actions {
302		display: none;
303	}
304	html {
305		--bg-page: white;
306		--bg-dark: white;
307		--fg: black;
308		--fg-subtle: black;
309		--fg-limited: #a79;
310	}
311}