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