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