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