/* ahotml v1 — raw source stays legible without javascript */
ahotml { display: block; white-space: pre-wrap; }
ahotml[data-ahotml-parsed="true"] { white-space: normal; }
ahotml .ahotml-blank { min-block-size: 1lh; margin: 0; }

.ahotml-random {
  --ahotml-ink: currentColor;
  --ahotml-wash: transparent;
  border: .12em solid var(--ahotml-ink);
  background: var(--ahotml-wash);
  color: var(--ahotml-ink);
  margin-block: 1.5em;
  padding: 1em;
}

.ahotml-random[data-tone="sun"] { --ahotml-ink: #8a3e00; --ahotml-wash: #fff2bf; }
.ahotml-random[data-tone="sea"] { --ahotml-ink: #005b73; --ahotml-wash: #d7f6ff; }
.ahotml-random[data-tone="leaf"] { --ahotml-ink: #175f32; --ahotml-wash: #dff8d7; }
.ahotml-random[data-tone="night"] { --ahotml-ink: #e6e7ff; --ahotml-wash: #1f2046; }

.ahotml-random button {
  background: transparent;
  border: .12em solid currentColor;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: .45em .7em;
}

.ahotml-random button:focus-visible { outline: .18em solid currentColor; outline-offset: .18em; }
.ahotml-random button:active { transform: scale(.97); }
.ahotml-random p { margin-block: .7em; }

@media (prefers-reduced-motion: no-preference) {
  .ahotml-random { transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out; }
}