1:root {
  2  --bg-page: #F5EFFF;
  3  --bg-dark: #E5D9F2;
  4  --bg-limited: #CDC1FF;
  5  --fg: #02013C;
  6  --fg-subtle: #3A37FB;
  7  --fg-limited: #E5D9F2;
  8  --hl: #CDC1FF;
  9}
 10
 11::selection {
 12  background: var(--fg-limited);
 13  color: white;
 14}
 15
 16@media (prefers-color-scheme: dark) {
 17  :root {
 18    --bg-page: #111;
 19    --bg-dark: #222;
 20    --fg: #ccc;
 21    --hl: #333;
 22    --fg-subtle: #ccc;
 23    --fg-limited: #509c93;
 24    --bg-limited: #333;
 25  }
 26}
 27
 28* {
 29  font-size: 14px !important;
 30}
 31
 32body {
 33  padding: 0px;
 34  margin: 0px;
 35  background: var(--bg-page);
 36  color: var(--fg);
 37  font-size: 14px !important;
 38  word-wrap: break-word;
 39  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
 40  line-height: 1.2;
 41  overscroll-behavior-y: contain;
 42}
 43pre, code {
 44  white-space: pre-wrap;
 45}
 46blockquote {
 47  margin-left: 0em;
 48  margin-bottom: 0em;
 49  padding-left: 0.5em;
 50  border-left: 1px solid var(--fg-subtle);
 51}
 52cite {
 53  margin-left: 2em;
 54}
 55table {
 56  display: block;
 57  max-width: 100%;
 58  overflow-x: auto;
 59}
 60a {
 61  color: var(--fg);
 62}
 63
 64a:hover {
 65  background: var(--bg-limited);
 66}
 67
 68form, input, textarea {
 69  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
 70}
 71p {
 72  margin-top: 1em;
 73  margin-bottom: 1em;
 74}
 75input {
 76  background: var(--bg-page);
 77  color: var(--fg);
 78  font-size: 1.0em;
 79  line-height: 1.2em;
 80  padding: 0.4em;
 81}
 82#honkform input {
 83  font-size: 0.8em;
 84}
 85body > header {
 86  max-width: 100%;
 87  margin: 0px;
 88  padding: 1em 0em 2em 0em;
 89  font-size: 1.5em;
 90  color: white !important;
 91}
 92body > header span {
 93  margin-left: 2em;
 94}
 95
 96header > a {
 97  text-decoration: none !important;
 98}
 99
100header > details {
101  padding: 1em 1em 1em 1em;
102  color: var(--fg);
103  position: fixed;
104  top: 0;
105  left: 0;
106  display: inline;
107  max-height: calc(100% - 1em);
108  overflow: auto;
109  opacity: 1;
110  overscroll-behavior: contain;
111  z-index: 2;
112}
113header > details[open] {
114  padding: 1em 1em 0em 1em;
115  background: var(--bg-dark);
116  margin-bottom: 1em;
117  opacity: 1.0;
118}
119header > details summary span {
120  display: none;
121}
122header > details[open] summary span {
123  display: inline;
124}
125header > details li {
126  margin: 1em 0em 1em 0em;
127}
128details summary {
129  cursor: pointer;
130}
131main {
132  max-width: 655px;
133  margin: auto;
134  font-size: 1.5em;
135}
136hr {
137  border-color: var(--hl);
138}
139.info {
140  background: var(--bg-dark);
141  border: 1px solid var(--bg-dark);
142  margin-bottom: 1em;
143  padding: 0em 1em 0em 1em;
144  margin-top: 1em;
145}
146.info div {
147  margin-top: 1em;
148  margin-bottom: 1em;
149}
150label {
151  font-size: 0.8em;
152}
153label.button, button, select {
154  border: 1px solid var(--hl);
155  font-size: 14px;
156  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
157  color: var(--fg);
158  padding: 0.2em;
159  background: var(--bg-dark);
160  white-space: nowrap;
161}
162
163button:hover {
164  background: var(--bg-limited);
165}
166
167.buttonarray {
168  margin-top: -2.0em;
169}
170.buttonarray button, .buttonarray > span {
171  margin-top: 2.0em;
172  display: inline-block;
173}
174button a {
175  text-decoration: none;
176}
177button {
178  cursor: pointer;
179}
180form {
181  margin-top: 1em;
182}
183textarea {
184  padding: 0.5em;
185  font-size: 1em;
186  background: var(--bg-page);
187  color: var(--fg);
188  width: 600px;
189  height: 4em;
190  margin-bottom: 0.5em;
191  box-sizing: border-box;
192  max-width: 100%;
193}
194textarea#honknoise {
195  height: 10em;
196}
197input[type="checkbox"] {
198  position: fixed;
199  top: -9999px;
200}
201input[type="checkbox"] + span:after {
202  content: "no";
203}
204input[type="checkbox"]:checked + span:after {
205  content: "yes";
206}
207input[type="checkbox"]:focus + span:after {
208  outline: 1px solid var(--fg);
209}
210input[type=file] {
211  display: none;
212}
213
214.glow {
215  box-shadow: 0px 0px 16px var(--hl);
216}
217.honk {
218  margin: auto;
219  background: var(--bg-dark);
220  border: 0px solid var(--hl);
221  margin-bottom: 1em;
222  border-radius: 0em !important;
223  padding-left: 1em;
224  padding-right: 1em;
225  padding-top: 0;
226  overflow: hidden;
227}
228
229.level1 {
230	margin-left: 0.5em;
231}
232.level1::before {
233	position: absolute;
234	content: ">";
235}
236.level2 {
237	margin-left: 1.0em;
238}
239.level2::before {
240	position: absolute;
241	content: ">>";
242}
243.level3 {
244	margin-left: 1.5em;
245}
246.level3::before {
247	position: absolute;
248	content: ">>>";
249}
250.level4 {
251	margin-left: 2.0em;
252}
253.level4::before {
254	position: absolute;
255	content: ">>>>";
256}
257
258.chat {
259  border-bottom: 0.5px solid var(--fg-subtle);
260  padding-left: 1em;
261}
262.chat p {
263  margin-top: 0.2em;
264  margin-bottom: 0.2em;
265}
266.chattarget {
267  border-bottom: 1px solid var(--fg-subtle);
268}
269.chatstamp {
270  margin-left: -1em;
271}
272
273.honk #honkform {
274  padding: 1em;
275  border: 1px solid var(--fg);
276}
277.honk a {
278  color: var(--fg);
279}
280.honk header {
281  white-space: nowrap;
282  overflow: hidden;
283  text-overflow: ellipsis;
284  font-size: 0.8em;
285  line-height: 1.1;
286  margin-top: 1em;
287}
288
289.honk header  .clip a {
290  color: var(--fg-subtle);
291}
292
293.clip {
294  text-transform: lowercase;
295}
296
297.honk header img {
298  float: left;
299  margin-right: 1em;
300  border-radius: 10%;
301  width: 64px;
302  height: 64px;
303}
304.honk header  p {
305  margin-top: 0px;
306}
307
308.honk .noise {
309  line-height: 1.4;
310}
311
312.honk .noise  code .kw { font-weight: bold; }
313.honk .noise  code .bi { font-weight: bold; }
314.honk .noise  code .st { color: var(--fg-subtle); }
315.honk .noise  code .nm { color: #ba88ff; }
316.honk .noise  code .op { color: #ba88ff; }
317.honk .noise  code .tp { font-weight: bold; }
318.honk .noise  code .cm { color: var(--fg-subtle); font-style: italic; }
319.honk .noise  code .al { color: #aaffbb; }
320.honk .noise  code .dl { color: #ffaabb; }
321
322summary::marker {
323  content: '\2192';
324}
325
326.honk details.actions summary {
327  color: var(--fg-subtle);
328}
329
330#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 5px var(--fg-subtle);text-align:center;display:none;}
331#emupicker img{margin:0;}
332.emuload{background:var(--bg-page);padding:0.5em;}
333
334.subtle .noise {
335  color: var(--fg-subtle);
336  font-size: 0.8em;
337}
338.subtle .noise a {
339  color: var(--fg-subtle);
340}
341.limited {
342  background: var(--bg-limited);
343  border: 0px solid var(--fg-limited);
344  color: var(--fg-subtle);
345}
346.limited  .glow {
347  box-shadow: 0px 0px 16px var(--fg-limited);
348}
349.limited  .noise {
350  color: var(--fg-subtle);
351}
352.limited  .noise a {
353  color: var(--fg-limited);
354}
355.limited  details.actions summary {
356  color: var(--fg-limited);
357}
358details.noise[open] summary {
359  display: none;
360}
361h1, h2 {
362  font-size: 1.2em;
363}
364h3, h4 {
365  font-size: 1.1em;
366}
367
368#topmenu ul {
369  list-style: none;
370  padding-left: 1em;
371}
372
373.honkmeta {
374  color: var(--fg-subtle);
375  float: right;
376  display: inline-flex;
377  padding: 0;
378  margin: 0;
379  list-style: none;
380}
381
382.honkmeta a {
383  color: var(--fg-subtle);
384}
385
386.honkmeta li:after {
387  content: '\00B7';
388  padding-right: 2px;
389  padding-left: 2px;
390}
391
392.honkmeta li:last-child:after {
393  content: '';
394}
395
396.honkmeta li {
397  padding-left: 2px;
398  display: inline-block;
399}
400
401nav {
402  float: right;
403  max-width: 100%;
404}
405
406nav ul {
407  padding: 0;
408  margin: 0;
409  list-style: none;
410  padding-bottom: 20px;
411}
412
413nav ul li {
414  padding-right: 10px;
415  display: inline-block;
416}
417
418img:not(.emu) {
419  background: var(--bg-page);
420}
421img, video {
422  max-width: 100%;
423  max-height: 600px;
424}
425.noise img:not(.emu) {
426  display: block;
427}
428img.emu {
429  width: 2em;
430  height: 2em;
431  vertical-align: middle;
432  margin: -2px;
433  object-fit: contain;
434}
435.nophone {
436  position: fixed;
437  opacity: 0.7;
438  cursor: pointer;
439}
440
441#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 1px var(--fg-subtle);text-align:center;}
442#emupicker img{margin:0;}
443
444@media screen and (max-width: 1360px) {
445  .nophone {
446    display: none;
447  }
448}
449@media screen and (max-width: 740px) {
450  body {
451    font-size: 12px;
452  }
453
454  main {
455    margin: 0 -0.6rem;
456  }
457
458  .honk header img {
459    width: 48px;
460    height: 48px;
461    border-radius: 10%;
462  }
463  details summary {
464    outline: none;
465  }
466}
467@media print {
468  #topmenu, #topspacer, #infobox, #refreshbox, .actions {
469    display: none;
470  }
471  html {
472    --bg-page: white;
473    --bg-dark: white;
474    --fg: black;
475    --fg-subtle: black;
476    --fg-limited: #a79;
477  }
478}
479
480/*
481 * CSP: style-src: self
482 */
483
484li.details {
485	list-style-type: none;
486	margin-left: -1em;
487}
488
489.left1em {
490	margin-left: 1em;
491}
492
493.hide {
494	display: none;
495}
496
497.textright {
498	text-align: right;
499}
500
501.font08em {
502	font-size: 0.8em;
503}
504
505.font18em {
506	font-size: 1.8em;
507}
508
509.wsnowrap {
510	white-space: nowrap;
511}
512
513.skinny main {
514	max-width: 700px;
515}
516
517.fontmonospace {
518	font-family: monospace;
519}