/* The site's paper, ink and terracotta (site/style.css). Every element marked `drawable` becomes a
   texture on the map exactly as it is styled here, so cards carry no shadows or outlines: anything
   outside an element's border box is cut off when it is drawn into the canvas. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
}

:root {
  --paper: #fdfcf9;
  --paper-2: #f6f2eb;
  --ink: #221c16;
  --ink-2: #615548;
  --rule: #221c161f;
  --accent: #9e4f2c;
  --dusk: #231d2e;
  --dusk-ink: #ece4d6;
  --gold: #e7c17f;
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "Source Sans 3", -apple-system, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --quick: 200ms;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font: 400 17px/1.5 var(--body); }
html[data-depth] { background: #dccab2; overflow: hidden; }

/* The timeline as a page: a hero, then one column of eras and entries with the years in a gutter
   on a line down the left. Every drawable element is a child of #timeline (on the map they must be
   the canvas's own children), so the layout is one grid and the cards place their own parts. The
   page's styles stop at the map: there, .timeline[data-depth] cards keep the compact look below. */
.timeline {
  --gutter: 148px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 18px;
  max-width: 860px;
  margin-inline: auto;
  padding: 0 24px 0 calc(24px + 220px);
  box-sizing: content-box;
}
.timeline[data-depth] { display: block; height: 100vh; max-width: none; padding: 0; }
.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* The hero spans the page, wider than the column. */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 48px;
  margin: 0 0 8px calc(-220px);
  padding: 128px 0 24px;
  /* Over the timeline's line, which starts with the entries. */
  background: var(--paper);
}
.intro .kicker { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.intro h1 { margin: 12px 0 14px; font: 350 76px/0.98 var(--display); letter-spacing: -0.03em; }
.intro .lede { margin: 0; max-width: 26ch; font: italic 400 24px/1.35 var(--display); color: var(--ink-2); }
.intro .facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 22px 0 0; color: var(--ink-2); font-size: 15px; }
.intro .facts b { font: 400 26px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.intro .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.intro .open-3d { padding: 14px 26px; font: 600 17px var(--body); color: var(--paper); background: var(--accent); border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 80%, black); transition: transform 0.2s, box-shadow 0.2s; }
.intro .open-3d:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--accent) 90%, black); }
.intro .open-3d:focus-visible, .intro .read:focus-visible, .intro-map:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.intro .read { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px; }
.intro .read:hover { text-decoration-color: var(--accent); }
.intro .note { margin: 18px 0 0; max-width: 46ch; font-size: 14px; color: var(--ink-2); }
.intro .note a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.intro-map { all: unset; display: block; cursor: pointer; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 0 var(--rule), 0 30px 60px -30px #221c1680; transition: transform 0.3s var(--ease); }
.intro-map:hover { transform: translateY(-3px) rotate(-0.4deg); }
.intro-map img { display: block; width: 100%; height: auto; }
.timeline[data-depth] .intro { display: none; }

/* An era: its number, name and years, in its colour. */
.era-title {
  display: grid;
  grid-template-columns: var(--gutter) 1fr;
  align-items: baseline;
  margin: 64px 0 10px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--e);
  font-weight: 400;
}
.era-title .num { font: 600 14px var(--body); letter-spacing: 0.08em; color: var(--e); font-variant-numeric: tabular-nums; }
.era-title .name { font: 400 44px/1.05 var(--display); letter-spacing: -0.02em; }
.era-title small { grid-column: 2; margin-top: 6px; font: 400 15px/1.3 var(--body); color: var(--ink-2); }

/* A card on the page: the year in the gutter, a dot on the line, the text on paper to the right. */
.card { position: relative; isolation: isolate; color: var(--ink); transition: opacity var(--quick) var(--ease); }
.card h3 { margin: 0; font: 400 26px/1.15 var(--display); letter-spacing: -0.01em; }
.card .where { margin: 2px 0 6px; font-size: 14px; color: var(--ink-2); }
.card .where::before { content: "⌖ "; color: var(--theme); }
.card .text { margin: 0; color: var(--ink-2); }
.card .meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin: 10px 0 0; }
.card .refs { font: italic 400 16px/1.3 var(--display); color: var(--ink); }
.card .tags { display: flex; gap: 6px; }
.card .tag { font: 600 12px/1 var(--body); color: color-mix(in srgb, var(--c) 70%, #000); padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); }
.card .art { display: block; width: 58px; height: 58px; }
.card .art-wrap { color: var(--theme); }
.card .when > * + * { margin-left: 0.25em; }
.card.prophet .line { margin: 0; font: italic 400 18px/1.35 var(--display); color: var(--ink); }
.card.dim { opacity: 0.25; }
.timeline[data-depth] .card.dim { opacity: 1; }

.timeline:not([data-depth]) .card {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr) 64px;
  grid-template-areas:
    "when title art"
    "when where art"
    "when text text"
    "when meta meta"
    "when map map";
  column-gap: 0;
  padding: 18px 22px 18px 0;
}
/* The paper behind the text, starting after the gutter, with the theme's stripe. */
.timeline:not([data-depth]) .card::before {
  content: "";
  position: absolute;
  inset: 0 0 0 calc(var(--gutter) - 22px);
  z-index: -1;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: inset 4px 0 0 var(--theme);
  transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.timeline:not([data-depth]) .card:hover::before { border-color: color-mix(in srgb, var(--theme) 50%, var(--rule)); box-shadow: inset 4px 0 0 var(--theme), 0 12px 30px -20px #221c1666; }
/* The line down the gutter, and the entry's dot on it. */
.timeline:not([data-depth]) .card::after {
  content: "";
  position: absolute;
  left: calc(var(--gutter) - 44px);
  top: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--theme);
  box-shadow: 0 0 0 4px var(--paper);
}
.timeline:not([data-depth]) .card.prophet::after { background: var(--paper); border: 2.5px solid var(--theme); box-sizing: border-box; }
.timeline:not([data-depth]) { background: linear-gradient(var(--rule), var(--rule)) calc(244px + var(--gutter) - 39px) 0 / 1px 100% no-repeat; }
.timeline:not([data-depth]) .card .when { grid-area: when; margin: 2px 0 0; padding-right: 64px; text-align: right; color: var(--ink); }
.timeline:not([data-depth]) .card .when .about { display: block; margin: 0 0 2px; font: 600 12px var(--body); letter-spacing: 0.04em; color: var(--ink-2); }
.timeline:not([data-depth]) .card .when b { display: block; margin: 0; font: 400 28px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.timeline:not([data-depth]) .card .when .bc { display: block; margin: 2px 0 0; font: 600 11px var(--body); letter-spacing: 0.08em; color: var(--ink-2); }
.timeline:not([data-depth]) .card.prophet .when b { font-size: 19px; white-space: nowrap; }
.timeline:not([data-depth]) .card .when .about { white-space: nowrap; }
.timeline:not([data-depth]) .card .art-wrap { grid-area: art; justify-self: end; }
.timeline:not([data-depth]) .card h3 { grid-area: title; }
.timeline:not([data-depth]) .card .where { grid-area: where; }
.timeline:not([data-depth]) .card :is(.text, .line) { grid-area: text; max-width: 60ch; }
.timeline:not([data-depth]) .card .meta { grid-area: meta; }
.timeline:not([data-depth]) .card.prophet::before { background: var(--paper-2); }
.timeline:not([data-depth]) .card.prophet h3 { font-size: 22px; }
.on-map { grid-area: map; justify-self: start; margin-top: 10px; padding: 0; border: 0; background: none; font: 600 14px var(--body); color: var(--accent); cursor: pointer; }
.on-map::after { content: " →"; }
.on-map:hover { text-decoration: underline; text-underline-offset: 4px; }
.on-map:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.timeline[data-depth] .on-map { display: none; }

/* A card on the map: compact, the year small above the title, the drawing floated right. */
.timeline[data-depth] .card {
  width: 340px;
  padding: 16px 20px 16px 24px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  /* The stripe is inset, so it is inside the border box and drawn into the canvas. */
  box-shadow: inset 5px 0 0 var(--theme);
}
.timeline[data-depth] .card .art-wrap { float: right; margin: 0 -4px 4px 12px; }
.timeline[data-depth] .card .when { margin: 0 0 4px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.timeline[data-depth] .card .when b { font-weight: 600; }
.timeline[data-depth] .card .meta { clear: both; }
.timeline[data-depth] .card.prophet { width: 300px; background: var(--paper-2); }
.timeline[data-depth] :is(.era-title, .coda) { display: none; }

.coda { margin: 72px 0 0; padding: 24px 0 160px calc(var(--gutter)); background: var(--paper); }
.coda h2 { font: 400 44px/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 12px; }
.coda p { font: italic 400 20px/1.45 var(--display); color: var(--ink-2); margin: 0; max-width: 36ch; }

/* The rail: every era down the left of the page, the one you are reading marked. */
.era-rail {
  position: fixed;
  top: 50%;
  left: max(24px, calc(50% - 552px));
  translate: 0 -50%;
  z-index: 1;
  display: grid;
  gap: 2px;
  width: 180px;
}
html[data-depth] .era-rail { display: none; }
.era-rail { transition: opacity var(--quick) var(--ease); }
.era-rail[data-away] { opacity: 0; pointer-events: none; }
.era-rail a { display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; padding: 5px 8px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 14px; line-height: 1.25; }
.era-rail a::before { content: ""; grid-row: 1 / 3; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--e); opacity: 0.45; transition: transform var(--quick) var(--ease), opacity var(--quick) var(--ease); }
.era-rail .years { grid-column: 2; font-size: 12px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.era-rail a:hover { background: var(--paper-2); color: var(--ink); }
.era-rail a[aria-current] { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--e) 12%, transparent); }
.era-rail a[aria-current]::before { opacity: 1; transform: scale(1.4); }

/* Only the map shows these: place names standing over their places, and region names on the land. */
.place, .region { display: none; }
.timeline[data-depth] :is(.place, .region) { display: block; width: fit-content; }
.place {
  padding: 3px 10px 4px;
  border-radius: 999px;
  background: #fdfcf9ee;
  font: 600 15px/1.2 var(--body);
  color: var(--ink);
  white-space: nowrap;
}
.place[data-current] { background: var(--c); color: #fff; }
.place[data-hover] { background: var(--ink); color: var(--paper); }
.region {
  font: italic 500 30px/1 var(--display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3b3122;
  white-space: nowrap;
}
.region.sea { color: #d9e8ec; letter-spacing: 0.3em; }
.region.big { font-size: 56px; }

@media (max-width: 1180px) {
  .timeline { padding-left: 24px; max-width: 760px; }
  .timeline:not([data-depth]) { background-position: calc(24px + var(--gutter) - 39px) 0; }
  .intro { margin-left: 0; grid-template-columns: 1fr; padding-top: 40px; }
  .era-rail { display: none; }
}
@media (max-width: 640px) {
  .timeline { --gutter: 92px; }
  .intro h1 { font-size: 54px; }
  .timeline:not([data-depth]) .card .when { padding-right: 30px; }
  .timeline:not([data-depth]) .card .when b { font-size: 21px; }
  .timeline:not([data-depth]) .card::after { left: calc(var(--gutter) - 26px); }
  .timeline:not([data-depth]) { background-position: calc(24px + var(--gutter) - 21px) 0; }
  .timeline:not([data-depth]) .card::before { left: calc(var(--gutter) - 12px); }
  .era-title .name { font-size: 32px; }
}

/* Chrome around the map */

.hud {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  pointer-events: none;
}
html:not([data-depth]) .hud { background: linear-gradient(var(--paper) 65%, transparent); }
.hud > * { pointer-events: auto; }
.brand { font: 400 18px var(--display); color: inherit; text-decoration: none; }
.hud .actions { display: flex; gap: 8px; }
.hud button {
  font: 600 14px var(--body);
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 10px 7px 16px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.hud .help-button { padding: 0; width: 36px; }
kbd { font: 500 12px ui-monospace, monospace; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, currentColor 10%, transparent); }

.readout {
  position: fixed;
  left: 24px;
  top: 72px;
  z-index: 2;
  max-width: 24em;
  padding: 14px 18px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--rule);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.readout p { margin: 0; }
.readout .year { font: 300 40px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.readout .event { font: italic 400 22px/1.25 var(--display); margin-top: 6px; }
.readout .where { margin-top: 6px; font-size: 14px; color: var(--ink-2); }

/* Themes: a key, a colour and a name. On the page they sit in the top bar; on the map, above the
   ribbon. */
.legend {
  position: fixed;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--rule);
  backdrop-filter: blur(8px);
}
html:not([data-depth]) .legend { top: 12px; bottom: auto; }
html:not([data-depth]) .legend::after { bottom: auto; top: calc(100% + 8px); }
@media (max-width: 1180px) {
  html:not([data-depth]) .legend { position: static; translate: none; width: fit-content; margin: 76px auto 0; }
}
html[data-depth] .legend { bottom: 190px; background: color-mix(in srgb, var(--dusk) 82%, transparent); border-color: #ffffff1c; color: var(--dusk-ink); }
.legend button {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 6px;
  border-radius: 999px;
  font: 600 13px var(--body);
  color: inherit;
}
.legend button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.legend button kbd { order: 2; padding: 0; background: none; opacity: 0.55; font-size: 11px; }
.legend button[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 30%, transparent); }
.legend button:focus-visible { outline: 2px solid var(--c); }
.legend::after {
  content: attr(data-note);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  font: italic 400 16px var(--display);
  padding: 4px 14px;
  border-radius: 999px;
  background: inherit;
  border: inherit;
}
.legend[data-note=""]::after, .legend:not([data-note])::after { display: none; }

/* The ribbon of time: era bands, then events (dots) and prophets (rings) on one line, then the
   controls. The current step's label stands over it; another's shows while pointed at. */
.ribbon {
  position: fixed;
  inset: auto 0 0;
  z-index: 2;
  padding: 14px 32px 12px;
  background: color-mix(in srgb, var(--dusk) 95%, transparent);
  color: var(--dusk-ink);
  backdrop-filter: blur(10px);
}
.ribbon .bands { position: relative; height: 40px; }
.ribbon .band {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  display: grid;
  place-content: center;
  padding: 0 4px;
  border: 1px solid var(--dusk);
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--e) 55%, var(--dusk));
  color: #fff;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.ribbon .band .name { font: 600 12px/1.15 var(--body); letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.ribbon .band .years { font: 500 11px/1.2 var(--body); font-variant-numeric: tabular-nums; opacity: 0.7; }
.ribbon .band:hover { background: color-mix(in srgb, var(--e) 75%, var(--dusk)); }
.ribbon .band[data-current] { background: var(--e); box-shadow: inset 0 0 0 2px #fff; }
.ribbon .band:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.ribbon .track { position: relative; height: 58px; }
.ribbon .segment { position: absolute; top: 37px; height: 3px; background: color-mix(in srgb, var(--e) 70%, var(--dusk)); }
.ribbon :where(.track button) { all: unset; position: absolute; cursor: pointer; }
.ribbon .event, .ribbon .prophet {
  top: 30px;
  width: 17px;
  height: 17px;
  margin-left: -8.5px;
  border-radius: 50%;
  transition: transform var(--quick) var(--ease), opacity var(--quick) var(--ease);
}
.ribbon .event { background: var(--c); box-shadow: 0 0 0 2px var(--dusk); }
.ribbon .prophet { box-sizing: border-box; background: var(--dusk); border: 3px solid var(--c); }
.ribbon :is(.event, .prophet):hover, .ribbon :is(.event, .prophet):focus-visible { transform: scale(1.3); }
.ribbon :is(.event, .prophet)[data-current] { transform: scale(1.35); box-shadow: 0 0 0 2px var(--dusk), 0 0 0 4px #fff; }
.ribbon :is(.event, .prophet).dim { opacity: 0.2; }
/* The label: the current step's always, another's while pointed at or focused. */
.ribbon :is(.event, .prophet)::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  translate: -50% 0;
  scale: calc(1 / 1.35);
  transform-origin: bottom center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--dusk);
  font: 600 13px/1.3 var(--body);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--quick) var(--ease);
}
.ribbon [data-align="start"]::after { left: -6px; translate: 0 0; transform-origin: bottom left; }
.ribbon [data-align="end"]::after { left: auto; right: -6px; translate: 0 0; transform-origin: bottom right; }
.ribbon :is(.event, .prophet):is([data-current], :hover, :focus-visible)::after { opacity: 1; }
.ribbon .track:has(button:hover) [data-current]:not(:hover)::after { opacity: 0; }
.ribbon :is(.event, .prophet):is(:hover, :focus-visible) { z-index: 1; }

.ribbon .controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 2px; }
.ribbon .controls button { all: unset; display: flex; align-items: center; gap: 12px; cursor: pointer; color: var(--dusk-ink); border-radius: 12px; padding: 4px 8px; }
.ribbon .controls button:disabled { opacity: 0.3; cursor: default; }
.ribbon .controls button:not(:disabled):hover { background: #ffffff12; }
.ribbon .controls button:focus-visible { outline: 2px solid var(--gold); }
.ribbon .next { justify-self: end; text-align: right; }
.ribbon .arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ffffff3a; font: 400 22px/1 var(--body); }
.ribbon .dir { display: block; font: 600 12px var(--body); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.ribbon .what { display: block; font: italic 400 17px/1.2 var(--display); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ribbon .play { flex-direction: column; gap: 2px; }
.ribbon .play .icon { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.ribbon .play .icon::before { content: ""; margin-left: 4px; border-left: 13px solid var(--dusk); border-block: 8px solid transparent; }
.ribbon .play[aria-pressed="true"] .icon::before { margin: 0; width: 4px; height: 14px; border: 0; border-inline: 4px solid var(--dusk); }
.ribbon .play .what { font: 600 12px var(--body); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }

.help {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: #0008;
  backdrop-filter: blur(4px);
}
.help .panel { width: min(560px, 100% - 32px); padding: 28px 32px; border-radius: 18px; background: var(--paper); color: var(--ink); }
.help h2 { font: 400 32px var(--display); margin: 0 0 12px; }
.help dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.help dt { white-space: nowrap; }
.help dd { margin: 0; color: var(--ink-2); }
.help p { margin: 18px 0 0; font: italic 400 17px var(--display); }

.credit { position: fixed; right: 12px; bottom: 190px; z-index: 1; margin: 0; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: var(--ink-2); background: color-mix(in srgb, var(--paper) 82%, transparent); }
.credit a { color: inherit; }
html:not([data-depth]) .credit { display: none; }

[hidden] { display: none !important; }