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