* { box-sizing: border-box; margin: 0; padding: 0; }

:root { --column: 720px; }

html { background: var(--ramp-0); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--ramp-0);
}
html:has(body:not(.writeup)), body:not(.writeup) { height: 100%; overflow: hidden; overscroll-behavior: none; }
.gl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.win {
  position: absolute;
  width: min(var(--w, 360px), 100% - 32px);
  height: var(--h, auto);
  max-height: calc(100% - 32px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--map-ink) transparent;
}
.win[data-fit] { width: fit-content; max-width: min(var(--max-w, 640px), 100% - 32px); }
.win[data-place="center"] { left: 50%; top: 50%; translate: -50% -50%; }
.win:focus { outline: none; }

:is(.win, .article, .cite) ::selection { background: var(--map-ink); color: var(--map-bg); }

.txt {
  min-height: 100%;
  padding: 40px 44px;
  font-size: 14px;
  line-height: 1.6;
}
.txt :is(h1, h2) { display: block; margin-bottom: 6px; font-size: 20px; font-weight: 500; line-height: inherit; }
.txt > :first-child { padding-right: 28px; }
.txt :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 0.75em; }
.txt :is(ul, ol) { padding-left: 1.2em; }
.win a { color: inherit; }
.win img { display: block; max-width: 100%; }
.icon { display: inline-block; width: 1em; height: 1em; margin-right: 0.35em; vertical-align: -0.15em; fill: currentColor; }

.back {
  position: absolute;
  top: 40px;
  right: 44px;
  width: 20px;
  height: 20px;
  padding: 5px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.back[hidden] { display: none; }
.back svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.back:focus-visible { outline: 1px solid var(--map-ink); }

.cite {
  position: fixed;
  left: 24px;
  top: 24px;
  z-index: 10;
  width: min(340px, 100% - 48px);
  color: var(--map-ink);
  font-size: 14px;
  line-height: 1.6;
  text-shadow: 0 0 12px color-mix(in srgb, var(--map-ink) 45%, transparent);
  pointer-events: none;
}
.cite[hidden] { display: none; }

.win[data-popup] .txt { padding: 8px; }
.win[data-popup] .txt > :first-child { padding-right: 0; }
.message-row { position: relative; }
.message-box textarea {
  display: block;
  width: 100%;
  max-height: calc(2lh + 12px);
  padding: 6px 30px 6px 10px;
  overflow-y: auto;
  border: 0;
  border-radius: 10px;
  resize: none;
  font: inherit;
  color: var(--map-ink);
  caret-color: var(--map-ink);
  background: color-mix(in srgb, var(--map-ink) 8%, transparent);
  outline: none;
}
@supports (-webkit-touch-callout: none) {
  .message-box textarea { font-size: 16px; }
}
.message-box textarea::placeholder { color: color-mix(in srgb, var(--map-ink) 45%, transparent); }
.message-box textarea:focus { background: color-mix(in srgb, var(--map-ink) 12%, transparent); }
.win[data-fading] .message-box textarea { color: transparent; background: transparent; caret-color: transparent; }
.win[data-fading] .message-box textarea::placeholder { color: transparent; }
.llms { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.message-box .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.message-box button { position: absolute; right: 9px; bottom: 9px; width: 13px; height: 13px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.message-box button svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.message-box button:disabled { cursor: default; }
.message-box button:focus-visible { outline: 1px solid var(--map-ink); outline-offset: 2px; }
.message-status { margin-top: 0.5em; font-size: 13px; }
.message-status:empty { display: none; }
.cite a { color: inherit; }
.cite-n { margin-right: 0.4em; }

.gl .win { color: transparent; }
.gl .win img { visibility: hidden; }

html:not(.gl) .win {
  background: var(--map-bg);
  color: var(--map-ink);
  border-radius: 12px;
  box-shadow: 0 0 calc(var(--halo-size) * 1.5) calc(var(--halo-size) * 0.3) var(--map-halo);
}

.writeup .stage { position: fixed; inset: 0; height: auto; min-height: 0; }
.win[data-shape="column"] {
  top: 0;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: min(var(--column), 100% - 32px);
  max-height: none;
}
html:not(.gl) .win[data-shape="column"] { border-radius: 0; }

.article {
  position: relative;
  width: min(var(--column), 100% - 32px);
  margin: 0 auto;
  padding: 72px 32px 120px;
  color: var(--map-ink);
  font-size: 17px;
  line-height: 1.65;
}
.article a { color: inherit; text-underline-offset: 0.15em; }
.article .home { display: inline-block; margin-bottom: 48px; font-size: 14px; text-decoration: none; opacity: 0.8; }
.article h1 { margin-bottom: 0.8em; font-size: 2rem; font-weight: 500; line-height: 1.2; }
.article h2 { margin: 2em 0 0.6em; font-size: 1.3rem; font-weight: 500; line-height: 1.3; }
.article h3 { margin: 1.6em 0 0.5em; font-size: 1.05rem; font-weight: 600; }
.article :is(p, ul, ol, blockquote, figure, pre) { margin-bottom: 1.1em; max-width: 65ch; }
.article :is(ul, ol) { padding-left: 1.3em; }
.article blockquote { padding-left: 1em; border-left: 2px solid currentColor; opacity: 0.85; }
.article img { display: block; max-width: 100%; height: auto; margin: 1.6em 0; }
.js .article img:not([data-mapped]) { visibility: hidden; }
:is(.article, .txt) sup { line-height: 0; }
:is(.article, .txt) [data-footnote-ref] { padding: 0 0.15em; text-decoration: none; }
:is(.article, .txt) [data-footnote-backref] { text-decoration: none; }
:is(.article, .txt) .footnotes { margin-top: 4em; padding-top: 1.5em; border-top: 1px solid currentColor; font-size: 14px; }
:is(.article, .txt) .footnotes h2 { margin: 0 0 0.4em; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
:is(.article, .txt) .footnotes li { margin-bottom: 0.6em; }
.txt .footnotes { display: none; }