1html {
  2	--bg-page: #305;
  3	--bg-dark: #002;
  4	--fg: #dde;
  5	--fg-subtle: #aab;
  6	--fg-limited: #a79;
  7}
  8
  9body {
 10	background: var(--bg-page);
 11	color: var(--fg);
 12	font-size: 1em;
 13	word-wrap: break-word;
 14	font-family: sans-serif, "Noto Color Emoji";
 15	line-height: 1.2;
 16}
 17pre, code {
 18	white-space: pre-wrap;
 19}
 20blockquote {
 21	margin-left: 0em;
 22	padding-left: 0.5em;
 23	border-left: 1px solid var(--fg-subtle);
 24}
 25table {
 26	display: block;
 27	max-width: 100%;
 28	overflow-x: auto;
 29}
 30a {
 31	color: var(--fg);
 32}
 33form, input, textarea {
 34	font-family: monospace, "Noto Color Emoji";
 35}
 36p {
 37	margin-top: 1em;
 38	margin-bottom: 1em;
 39}
 40input {
 41	background: var(--bg-page);
 42	color: var(--fg);
 43	font-size: 1.0em;
 44	line-height: 1.2em;
 45	padding: 0.4em;
 46}
 47#honkform input {
 48	font-size: 0.8em;
 49}
 50body > header {
 51	margin: 1em auto;
 52	font-size: 1.5em;
 53}
 54body > header span {
 55	margin-left: 2em;
 56}
 57body > header p {
 58	padding: 1em;
 59}
 60header > details {
 61	background: var(--bg-page);
 62	padding: 1em 1em 1em 1em;
 63	position: fixed;
 64	top: 0;
 65	left: 0;
 66	display: inline;
 67	max-height: calc(100% - 1em);
 68	overflow: auto;
 69	opacity: 0.7;
 70}
 71header > details[open] {
 72	padding: 1em 1em 0em 1em;
 73	background: var(--bg-dark);
 74	border: 1px solid var(--fg);
 75	margin-bottom: 1em;
 76	opacity: 1.0;
 77}
 78header > details li {
 79	margin: 1em 0em 1em 0em;
 80}
 81details summary {
 82	display: inline;
 83}
 84@supports (-moz-appearance:none) {
 85	details summary {
 86		display: list-item;
 87	}
 88}
 89main {
 90	max-width: 1200px;
 91	margin: auto;
 92	font-size: 1.5em;
 93}
 94.info {
 95	background: var(--bg-dark);
 96	border: 1px solid var(--fg);
 97	margin-bottom: 1em;
 98	padding: 0em 1em 0em 1em;
 99}
100.info div {
101	margin-top: 1em;
102	margin-bottom: 1em;
103}
104label {
105	font-size: 0.8em;
106}
107label.button, button, select {
108	font-size: 16px;
109	font-family: monospace;
110	color: var(--fg);
111	background: var(--bg-page);
112	border: 1px solid var(--fg);
113	padding: 0.5em;
114	white-space: nowrap;
115}
116.buttonarray {
117	margin-top: -2.0em;
118}
119.buttonarray button, .buttonarray > span {
120	margin-top: 2.0em;
121	display: inline-block;
122}
123button a {
124	text-decoration: none;
125}
126form {
127	margin-top: 1em;
128}
129textarea {
130	padding: 0.5em;
131	font-size: 1em;
132	background: var(--bg-page);
133	color: var(--fg);
134	width: 600px;
135	height: 8em;
136	margin-bottom: 0.5em;
137	box-sizing: border-box;
138	max-width: 100%;
139}
140input[type="checkbox"] {
141	position: fixed;
142	top: -9999px;
143}
144input[type="checkbox"] + span:after {
145	content: "no";
146}
147input[type="checkbox"]:checked + span:after {
148	content: "yes";
149}
150input[type="checkbox"]:focus + span:after {
151	outline: 1px solid var(--fg);
152}
153input[type=file] {
154	display: none;
155}
156
157.glow {
158	box-shadow: 0px 0px 16px var(--fg);
159}
160
161.honk {
162	margin: auto;
163	background: var(--bg-dark);
164	border: 1px solid var(--fg);
165	border-radius: 1em;
166	margin-bottom: 1em;
167	padding-left: 1em;
168	padding-right: 1em;
169	padding-top: 0;
170	overflow: hidden;
171}
172
173.honk	#honkform {
174		padding: 1em;
175		border: 1px solid var(--fg);
176	}
177.honk	a {
178		color: var(--fg);
179	}
180.honk	header {
181		white-space: nowrap;
182		overflow: hidden;
183		text-overflow: ellipsis;
184		font-size: 0.8em;
185		line-height: 1.1;
186		margin-top: 1em;
187		height: 64px;
188	}
189
190.honk	header	.clip a {
191			color: var(--fg-subtle);
192		}
193.honk	header	img {
194			float: left;
195			margin-right: 1em;
196			width: 64px;
197			height: 64px;
198		}
199.honk	header	p {
200			margin-top: 0px;
201		}
202.honk	.actions button {
203		margin-left: 4em;
204		margin-top: 2em;
205	}
206.honk	.noise {
207		line-height: 1.4;
208	}
209
210.honk	.noise	code .kw { font-weight: bold; }
211.honk	.noise	code .bi { font-weight: bold; }
212.honk	.noise	code .st { color: var(--fg-subtle); }
213.honk	.noise	code .nm { color: #ba88ff; }
214.honk	.noise	code .op { color: #ba88ff; }
215.honk	.noise	code .tp { font-weight: bold; }
216.honk	.noise	code .cm { color: var(--fg-subtle); font-style: italic; }
217.honk	.noise	code .al { color: #aaffbb; }
218.honk	.noise	code .dl { color: #ffaabb; }
219
220.honk	details.actions summary {
221		color: var(--fg-subtle);
222}
223.subtle .noise {
224		color: var(--fg-subtle);
225		font-size: 0.8em;
226}
227.subtle .noise a {
228		color: var(--fg-subtle);
229}
230.limited {
231	border: 1px solid var(--fg-limited);
232	color: var(--fg-limited);
233}
234.limited	.noise {
235		color: var(--fg-limited);
236	}
237.limited	.noise a {
238		color: var(--fg-limited);
239	}
240.limited	details.actions summary {
241		color: var(--fg-limited);
242	}
243details.noise[open] summary {
244	display: none;
245}
246h1, h2 {
247	font-size: 1.2em;
248}
249h3, h4 {
250	font-size: 1.1em;
251}
252
253img:not(.emu) {
254	background: var(--bg-page);
255}
256img, video {
257	max-width: 100%;
258	max-height: 600px;
259}
260.noise img:not(.emu) {
261	display: block;
262}
263img.emu {
264	width: 2em;
265	height: 2em;
266	vertical-align: middle;
267	margin: -2px;
268	object-fit: contain;
269}
270@media screen and (max-width: 740px) {
271	body {
272		font-size: 12px;
273	}
274	.honk header {
275		height: 52px;
276	}
277	.honk header img {
278		width: 48px;
279		height: 48px;
280	}
281}