:root { color-scheme: light dark; --bg: #ffffff; --text: #000000; --err: #c4001a; --faint: color-mix(in srgb, var(--text) 45%, var(--bg)); }
@media (prefers-color-scheme: dark) { :root { --bg: #000000; --text: #ffffff; --err: #ff5a4d; } }
::selection { background: color-mix(in srgb, var(--text) 20%, transparent); }
* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  overflow-anchor: none;
  background: var(--bg);
  color: var(--text);
  font: clamp(1.0625rem, .95rem + .6vw, 1.1875rem)/1.55 'Iowan Old Style', 'Sitka Text', Charter, 'Bitstream Charter', Georgia, 'Noto Serif', serif;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  -webkit-text-size-adjust: 100%;
}
main { max-width: calc(27em + 40px); margin: 0 auto; padding: 14vh 20px 40vh; }
.door { cursor: text; }
textarea, .door input {
  display: block; width: 100%; border: 0; outline: 0; padding: 0;
  background: transparent; color: inherit; font: inherit;
  resize: none; overflow: hidden;
}
.msg { margin-bottom: 1.5em; }
.msg[hidden] { display: none; }
.msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; }
.art { font-family: 'DejaVu Sans Mono', 'Adwaita Mono', Menlo, Consolas, 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'Apple Braille', monospace; line-height: 1.15; white-space: pre !important; overflow: hidden; }
.art span { color: transparent; }
textarea.art { font-size: 12px; }
.err { margin: 0; color: var(--err); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.write { position: relative; }
.write textarea { padding-right: 1.6em; }
.cog { position: absolute; right: 0; top: 0; color: var(--faint); cursor: pointer; user-select: none; font-variant-emoji: text; }
.menu { display: flex; flex-wrap: wrap; gap: .3em 1.2em; align-items: center; margin-top: .3em; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); cursor: default; }
.menu span { cursor: pointer; }
.menu b { font-weight: normal; }
.menu .raw { text-transform: none; }
.menu label { display: flex; gap: .45em; align-items: center; }
.menu input { appearance: none; width: .95em; height: .95em; padding: 0; border: 1px solid var(--faint); border-radius: 0; background: none; cursor: pointer; }
.menu input::-webkit-color-swatch-wrapper { padding: 0; }
.menu input::-webkit-color-swatch { border: 0; border-radius: 0; }
.menu input::-moz-color-swatch { border: 0; border-radius: 0; }
.gone { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.echo { margin-bottom: .5em; color: var(--faint); }
.marked, .echo p { text-decoration: underline; text-underline-offset: 4px; }
.echo p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.landed { text-decoration: underline transparent; text-underline-offset: 4px; animation: land 4s ease-in; }
@keyframes land { 0%, 55% { text-decoration-color: currentColor; } }
a { color: inherit; text-decoration: underline var(--faint); text-underline-offset: 3px; }
.embed { display: block; width: 100%; margin-top: .6em; border: 0; cursor: default; }
iframe.embed { aspect-ratio: 16 / 9; }
audio.embed { height: 40px; }