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	margin-bottom: 0em;
 25	padding-left: 0.5em;
 26	border-left: 1px solid var(--fg-subtle);
 27}
 28cite {
 29	margin-left: 2em;
 30}
 31table {
 32	display: block;
 33	max-width: 100%;
 34	overflow-x: auto;
 35}
 36a {
 37	color: var(--fg);
 38}
 39form, input, textarea {
 40	font-family: monospace, "Noto Color Emoji";
 41}
 42p {
 43	margin-top: 1em;
 44	margin-bottom: 1em;
 45}
 46input {
 47	background: var(--bg-page);
 48	color: var(--fg);
 49	font-size: 1.0em;
 50	line-height: 1.2em;
 51	padding: 0.4em;
 52}
 53#honkform input {
 54	font-size: 0.8em;
 55}
 56body > header {
 57	margin: 1em auto;
 58	font-size: 1.5em;
 59}
 60body > header span {
 61	margin-left: 2em;
 62}
 63body > header p {
 64	padding: 1em;
 65}
 66header > details {
 67	background: var(--bg-page);
 68	padding: 1em 1em 1em 1em;
 69	position: fixed;
 70	top: 0;
 71	left: 0;
 72	display: inline;
 73	max-height: calc(100% - 1em);
 74	overflow: auto;
 75	opacity: 0.7;
 76	overscroll-behavior: contain;
 77}
 78header > details[open] {
 79	padding: 1em 1em 0em 1em;
 80	background: var(--bg-dark);
 81	border: 1px solid var(--hl);
 82	margin-bottom: 1em;
 83	opacity: 1.0;
 84}
 85header > details summary span {
 86	display: none;
 87}
 88header > details[open] summary span {
 89	display: inline;
 90}
 91header > details li {
 92	margin: 1em 0em 1em 0em;
 93}
 94main {
 95	max-width: 1200px;
 96	margin: auto;
 97	font-size: 1.5em;
 98}
 99hr {
100	border-color: var(--hl);
101}
102.info {
103	background: var(--bg-dark);
104	border: 1px solid var(--hl);
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(--hl);
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: 4em;
144	margin-bottom: 0.5em;
145	box-sizing: border-box;
146	max-width: 100%;
147}
148textarea#honknoise {
149	height: 10em;
150}
151input[type="checkbox"] {
152	position: fixed;
153	top: -9999px;
154}
155input[type="checkbox"] + span:after {
156	content: "no";
157}
158input[type="checkbox"]:checked + span:after {
159	content: "yes";
160}
161input[type="checkbox"]:focus + span:after {
162	outline: 1px solid var(--fg);
163}
164input[type=file] {
165	display: none;
166}
167
168.glow {
169	box-shadow: 0px 0px 16px var(--hl);
170}
171
172.honk {
173	margin: auto;
174	background: var(--bg-dark);
175	border: 1px solid var(--hl);
176	border-radius: 1em;
177	margin-bottom: 1em;
178	padding-left: 1em;
179	padding-right: 1em;
180	padding-top: 0;
181	overflow: hidden;
182}
183
184.chat {
185	border-bottom: 0.5px solid var(--fg-subtle);
186	padding-left: 1em;
187}
188.chat p {
189	margin-top: 0.2em;
190	margin-bottom: 0.2em;
191}
192.chattarget {
193	border-bottom: 1px solid var(--fg-subtle);
194}
195.chatstamp {
196	margin-left: -1em;
197}
198
199.honk	#honkform {
200		padding: 1em;
201		border: 1px solid var(--fg);
202	}
203.honk	a {
204		color: var(--fg);
205	}
206.honk	header {
207		white-space: nowrap;
208		overflow: hidden;
209		text-overflow: ellipsis;
210		font-size: 0.8em;
211		line-height: 1.1;
212		margin-top: 1em;
213		height: 64px;
214	}
215
216.honk	header	.clip a {
217			color: var(--fg-subtle);
218		}
219.honk	header	img {
220			float: left;
221			margin-right: 1em;
222			width: 64px;
223			height: 64px;
224		}
225.honk	header	p {
226			margin-top: 0px;
227		}
228.honk	.actions button {
229		margin-left: 4em;
230		margin-top: 2em;
231	}
232.honk	.noise {
233		line-height: 1.4;
234	}
235
236.honk	.noise	code .kw { font-weight: bold; }
237.honk	.noise	code .bi { font-weight: bold; }
238.honk	.noise	code .st { color: var(--fg-subtle); }
239.honk	.noise	code .nm { color: #ba88ff; }
240.honk	.noise	code .op { color: #ba88ff; }
241.honk	.noise	code .tp { font-weight: bold; }
242.honk	.noise	code .cm { color: var(--fg-subtle); font-style: italic; }
243.honk	.noise	code .al { color: #aaffbb; }
244.honk	.noise	code .dl { color: #ffaabb; }
245
246.honk	details.actions summary {
247		color: var(--fg-subtle);
248}
249.subtle .noise {
250		color: var(--fg-subtle);
251		font-size: 0.8em;
252}
253.subtle .noise a {
254		color: var(--fg-subtle);
255}
256.limited {
257	border: 1px solid var(--fg-limited);
258	color: var(--fg-limited);
259}
260.limited	.glow {
261		box-shadow: 0px 0px 16px var(--fg-limited);
262}
263.limited	.noise {
264		color: var(--fg-limited);
265	}
266.limited	.noise a {
267		color: var(--fg-limited);
268	}
269.limited	details.actions summary {
270		color: var(--fg-limited);
271	}
272details.noise[open] summary {
273	display: none;
274}
275h1, h2 {
276	font-size: 1.2em;
277}
278h3, h4 {
279	font-size: 1.1em;
280}
281
282img:not(.emu) {
283	background: var(--bg-page);
284}
285img, video {
286	max-width: 100%;
287	max-height: 600px;
288}
289.noise img:not(.emu) {
290	display: block;
291}
292img.emu {
293	width: 2em;
294	height: 2em;
295	vertical-align: middle;
296	margin: -2px;
297	object-fit: contain;
298}
299@media screen and (max-width: 740px) {
300	body {
301		font-size: 12px;
302	}
303	.honk header {
304		height: 52px;
305	}
306	.honk header img {
307		width: 48px;
308		height: 48px;
309	}
310	details summary {
311		outline: none;
312	}
313}
314@media print {
315	#topmenu, #topspacer, #infobox, #refreshbox, .actions {
316		display: none;
317	}
318	html {
319		--bg-page: white;
320		--bg-dark: white;
321		--fg: black;
322		--fg-subtle: black;
323		--fg-limited: #a79;
324	}
325}