:root {
  color-scheme: light dark;

  --bg: #f5eddd;
  --surface: #e8dcc5;
  --inner-bg: #ded0b5;
  --fg: #493821;
  --muted: #897653;
  --link: #876022;
  --highlight: #e0b66a;

  --font: "Fira Mono", monospace;
  --font-size: 14px;
  --line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #120f0a;
    --surface: #20190f;
    --inner-bg: #2b2114;
    --fg: #e0b66a;
    --muted: #7e6948;
    --link: #ffca78;
    --highlight: #8c672d;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 1rem;
  background: var(--bg);
  color: var(--fg);
  font: var(--font-size)/var(--line-height) var(--font);
}

h1, h2, h3, h4, h5, h6 {
  margin: 1.5rem 0 0;
  font-size: inherit;
  font-weight: 600;
}

h1:first-child {
  margin-top: 0;
}

h1::before { content: "# "; }
h2::before { content: "## "; }
h3::before { content: "### "; }
h4::before { content: "#### "; }
h5::before { content: "##### "; }
h6::before { content: "###### "; }

h1::before, h2::before, h3::before,
h4::before, h5::before, h6::before {
  color: var(--muted);
  font-weight: 400;
}

p, ul, ol, dl, table, pre, blockquote {
  margin: 0 0 1.5rem;
}

ul, ol {
  padding-left: 1.5rem;
}

ul li::marker {
  content: "∗ ";
  color: var(--muted);
}

a:link, a:visited {
  color: var(--link);
  text-decoration: none;
}

a:hover, a:active, a.active {
  background: var(--link);
  color: var(--bg);
}

pre, code, kbd, samp {
  background: var(--inner-bg);
  color: var(--fg);
  font-family: var(--font);
}

pre {
  overflow-x: auto;
  padding: 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

blockquote {
  margin-left: 1.5rem;
  position: relative;
}

blockquote::before {
  content: ">";
  position: absolute;
  left: -1.5rem;
  color: var(--muted);
}

hr {
  border: 0;
  margin: 0 0 1.5rem;
}

hr::after {
  content: "---";
  color: var(--muted);
}

table {
  border-spacing: 0;
  overflow-wrap: anywhere;
}

th, td {
  padding: 0 .75rem;
  text-align: left;
  vertical-align: top;
}

th:first-child, td:first-child {
  padding-left: 0;
}

img {
  max-width: 100%;
  height: auto;
}

::selection, mark {
  background: var(--highlight);
  color: var(--bg);
}

.gemini-fragment {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  color: var(--muted);
}