/* Deep-blue night stage: the canvas fills the window; the header, trail and panel float over it. */
:root {
  --bg: #060f2c;
  --bg-2: #10245a;
  --fg: #eef2ff;
  --muted: #a9b8dc;
  --line: rgba(170, 195, 255, 0.16);
  --glass: rgba(9, 21, 58, 0.84);
  --accent: #7fe0c4;
  --display: "Newsreader", Georgia, serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --panel-w: 400px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 40% 40%, var(--bg-2), var(--bg) 75%);
  color: var(--fg);
  font: 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }

/* Sized by app.js to exactly the window it draws for. 100vh is the height with the browser's toolbar hidden,
   so on Android (toolbar at the bottom) it stretched the whole chart downward into the hint. */
#stage { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }

/* Header */
.top {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 20px;
  padding: 14px 20px 6px;
  pointer-events: none;
  z-index: 20;
}
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { width: 30px; height: 44px; color: var(--fg); flex: none; margin: -4px 0; }
.brand h1 { font: 600 24px/1 var(--display); margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
.count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.views {
  display: flex; gap: 2px; padding: 3px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  backdrop-filter: blur(8px);
}
.views button {
  border: 0; background: none; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  color: var(--muted); font-weight: 500; transition: color .2s, background .2s;
}
.views button:hover { color: var(--fg); }
.views button[aria-selected="true"] { background: rgba(255,255,255,0.12); color: var(--fg); }

.wander {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line); font-weight: 500;
  backdrop-filter: blur(8px);
}
.wander svg { width: 18px; height: 18px; }
.wander.lang { color: var(--fg); text-decoration: none; font-size: 13px; letter-spacing: 0.06em; padding: 7px 12px; }
.wander.lang:hover { background: rgba(255,255,255,0.08); }
.wander:hover { border-color: rgba(255,255,255,0.3); }
.wander[aria-pressed="true"] { background: var(--accent); color: #062019; border-color: var(--accent); }

/* Search */
.search { position: relative; margin-left: auto; width: 280px; }
.search input {
  width: 100%; font: inherit; font-size: 14px; color: var(--fg);
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px 7px 34px; outline: none; backdrop-filter: blur(8px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a9b8dc' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px 50%;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--accent); }
.results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10;
  list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto;
  background: rgba(7, 17, 48, 0.97); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.results[hidden] { display: none; }
.results li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.results li[aria-selected="true"], .results li:hover { background: rgba(170,195,255,0.12); }
.results li i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.results li span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.results li b { font-weight: 600; }
.results li b.sci { font: italic 600 16px var(--display); }
.results li em { font: italic 13.5px var(--display); color: var(--muted); }
.results li small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.results li.none { color: var(--muted); cursor: default; }

/* Credits */
.foot-links { position: fixed; right: calc(var(--panel-w) + 40px); bottom: 12px; display: flex; align-items: center; gap: 16px; }
.share-link {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--line); background: var(--glass); color: var(--fg); border-radius: 999px; padding: 4px 12px 4px 10px;
}
.share-link svg { width: 15px; height: 15px; }
.share-link:hover, .share-link[aria-expanded="true"] { border-color: rgba(255,255,255,0.3); }
.share-menu {
  position: fixed; right: calc(var(--panel-w) + 40px); bottom: 50px; z-index: 30; min-width: 220px; max-width: calc(100vw - 32px);
  background: var(--glass); border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
}
.share-menu[hidden] { display: none; }
.share-menu p { margin: 4px 10px 6px; font-size: 13px; color: var(--fg); }
.share-menu p small { display: block; color: var(--muted); font-size: 12px; }
.share-menu button { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.share-menu button:hover, .share-menu button:focus-visible { background: rgba(255,255,255,0.08); outline: none; }
.toast {
  position: fixed; left: 50%; bottom: 64px; z-index: 40; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--accent); color: #062019; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 999px;
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.credits-link {
  border: 0; background: none; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.credits-link:hover { color: var(--fg); }
.credits {
  width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); overflow-y: auto;
  background: #0a1840; color: var(--fg); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px;
}
/* The close button stays at the top of the dialog while its text scrolls. */
.credits .close { position: sticky; top: 0; float: right; margin: -14px -18px 0 8px; }
.credits::backdrop { background: rgba(3, 8, 24, 0.6); backdrop-filter: blur(3px); }
.credits h2 { font: 600 28px var(--display); margin: 0 0 10px; }
.credits h3 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; }
.credits dl { margin: 0; display: grid; gap: 12px; }
.credits dt { font-weight: 600; }
.credits dd { margin: 2px 0 0; color: #d5ddf3; }
.credits p { margin: 0 0 8px; }
.credits a { color: var(--accent); text-underline-offset: 3px; }

/* Trail */
.trail {
  position: fixed; top: 58px; left: 20px; right: calc(var(--panel-w) + 40px);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 14px;
}
.trail li { display: flex; align-items: center; gap: 4px; }
.trail li + li::before { content: "›"; color: var(--muted); margin: 0 2px; }
.trail button {
  border: 0; background: none; padding: 3px 6px; border-radius: 6px; cursor: pointer; color: var(--muted);
}
.trail small { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.trail .sci { font: italic 16px var(--display); }
.trail button:hover { color: var(--fg); background: rgba(255,255,255,0.06); }
.trail li:last-child button { color: var(--fg); font-weight: 500; cursor: default; background: none; }

.hint {
  position: fixed; left: 20px; bottom: 16px; right: calc(var(--panel-w) + 260px);
  color: var(--muted); font-size: 13.5px; pointer-events: none;
  transition: opacity .4s;
}

/* Country strip (world view) */
.countries {
  position: fixed; left: 20px; right: calc(var(--panel-w) + 40px); bottom: 58px;
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
}
.countries button {
  flex: none; border: 1px solid var(--line); background: var(--glass); border-radius: 999px;
  padding: 4px 10px; cursor: pointer; font-size: 12.5px; white-space: nowrap;
  backdrop-filter: blur(6px);
}
.countries button:hover { border-color: rgba(255,255,255,0.35); }
.countries button.on { border-color: var(--accent); }
.countries b { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; color: var(--accent); }

/* Side panel: collection summary, or the species card */
.panel {
  position: fixed; top: 64px; right: 16px; bottom: 16px; width: var(--panel-w);
  background: var(--glass); border: 1px solid var(--line); border-radius: 16px;
  backdrop-filter: blur(14px);
  overflow-y: auto; padding: 22px 24px;
  scrollbar-width: thin;
}
.panel h2 { font: 600 30px/1.1 var(--display); margin: 0 0 6px; }
.panel h2.sci { font-style: italic; color: var(--fg); font-size: 32px; }
.kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.panel h3 {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; margin: 24px 0 10px;
}
.panel p { margin: 0 0 8px; }
.panel .sci { font-family: var(--display); font-style: italic; }
.panel .sci.big { font-size: 19px; color: var(--muted); }
.panel .es { color: var(--muted); font-size: 14px; }
.panel .lede { color: var(--muted); }
/* The close button sits over the photo's corner so the photo can use the panel's full width. */
.close {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  border: 0; background: rgba(6,14,40,0.72); width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 16px; line-height: 1; backdrop-filter: blur(6px);
}
.close:hover { background: rgba(6,14,40,0.92); }
.hero { position: relative; }

.swatch {
  width: 100%; height: 140px; border-radius: 12px; margin: 0 0 14px;
  position: relative; overflow: hidden;
}
/* Photos are shown whole (never cropped), letterboxed on a dark frame. */
.photo { margin: 0 0 14px; }
.pframe { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.25); }
.pmedia { position: absolute; inset: 0; }
.pframe img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.pframe iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Macaulay's embed includes its own caption under the photo, so its frame is taller and white. */
.pframe.ml { aspect-ratio: 4 / 4.4 !important; background: #fff; }
.pzoom {
  position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(5,13,38,0.7); color: #fff; font-size: 16px; line-height: 1; opacity: 0; transition: opacity .2s;
}
.pframe:hover .pzoom, .pzoom:focus-visible, .pframe.ml .pzoom { opacity: 0.85; }
@media (hover: none) { .pzoom { opacity: 0.85; } }
.pnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(5,13,38,0.7); color: #fff; font-size: 22px; line-height: 1; padding-bottom: 3px;
  opacity: 0.85; transition: opacity .2s, background .2s;
}
.pnav:hover { opacity: 1; background: rgba(5,13,38,0.9); }
.pnav.prev { left: 8px; } .pnav.next { right: 8px; }
.pcount { position: absolute; right: 10px; bottom: 8px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(5,13,38,0.7); }
.photo figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.photo figcaption a { color: var(--muted); }
.photo figcaption a:hover { color: var(--fg); }
.swatch canvas { width: 100%; height: 100%; display: block; }
.swatch .photo-note {
  position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: rgba(255,255,255,0.6);
}

.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.status { color: var(--st); font-weight: 500; }
.panel .report { margin: 22px 0 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); color: var(--muted); font-size: 13px; }
.report a { color: var(--accent); }
.stnote { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 3px; }
.status::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--st); margin-right: 7px; vertical-align: 1px; }
.links, .panel .links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 16px 0 0; }
.ext { color: var(--accent); font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(127,224,196,0.4); }
.ext:hover { border-bottom-color: var(--accent); }
.endemic {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,200,90,0.14); color: #ffd27a; font-size: 13.5px; font-weight: 500;
}
.wandernote {
  margin: 0 0 14px; padding: 8px 12px; border-radius: 10px;
  background: rgba(127,224,196,0.12); color: var(--accent); font-size: 14px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.04);
  padding: 5px 11px 5px 8px; border-radius: 999px; cursor: pointer; font-size: 13.5px; text-align: left;
}
.chip:hover { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); }
.chip i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chip small { color: var(--muted); }
.empty { color: var(--muted); font-size: 14px; }

.legend { display: grid; gap: 4px; }
.legend button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; padding: 6px 8px; border-radius: 8px; cursor: pointer; text-align: left;
}
.legend button:hover { background: rgba(255,255,255,0.06); }
.legend i.lg { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.legend span { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.legend span b { font-size: 17px; font-weight: 600; }
.legend span em { font: italic 13.5px var(--display); color: var(--muted); }
.legend small { color: var(--muted); font-variant-numeric: tabular-nums; }


.action {
  display: inline-block; margin-top: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.06);
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.action:hover { border-color: rgba(255,255,255,0.35); }

/* Tooltip */
.tip {
  position: fixed; pointer-events: none; z-index: 5;
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(5, 13, 38, 0.95); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; font-size: 14px; max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.tip b { font-size: 17px; font-weight: 600; }
.tip .tip-img { width: 220px; height: auto; max-height: 200px; object-fit: contain; border-radius: 6px; margin: 2px 0 6px; }
.tip b.sci { font: italic 600 18px var(--display); }
.tip em { font: italic 15px var(--display); color: var(--muted); }
.tip span { color: var(--muted); font-size: 13px; }
.tip .tip-end { color: #ffd27a; }
.tip small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.loading {
  position: fixed; inset: 0; display: grid; place-items: center;
  font: italic 20px var(--display); color: var(--muted); pointer-events: none;
  transition: opacity .6s;
}
.loading.done { opacity: 0; }

/* On wider screens search is a magnifier button; the box opens over the header when clicked
   (or with "/"), so the header stays on one row. Phones keep the full-width box on its own row. */
.search-toggle { display: none; }
@media (min-width: 801px) {
  .search { width: auto; }
  .search-toggle { display: inline-flex; padding: 7px 10px; }
  .search input, .search .results { position: absolute; right: 0; width: min(340px, 60vw); }
  .search input { top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 2; }
  .search .results { left: auto; }
  .search.open input { opacity: 1; pointer-events: auto; background-color: #0b1a48; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
  .search.open .search-toggle { visibility: hidden; }
}
.views button { white-space: nowrap; }

/* Medium screens: a narrower panel and a more compact header, so it stays on one row. */
@media (min-width: 801px) and (max-width: 1240px) {
  :root { --panel-w: 330px; }
  .top { gap: 14px; }
  .count { display: none; }
  .views button { padding: 6px 11px; }
  .panel { padding: 20px; }
  .panel h2 { font-size: 27px; }
}
@media (min-width: 801px) and (max-width: 1120px) {
  :root { --panel-w: 290px; }
  .top { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .brand { gap: 8px; }
  .brand h1 { font-size: 21px; }
  .brand .logo { width: 26px; height: 38px; }
  .views button { padding: 6px 9px; font-size: 14px; }
  /* Wander shows only its icon; the word stays available to screen readers. */
  .wander { padding: 7px 10px; }
  .wander span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .trail { left: 16px; }
  /* Room for the language switch: the name stays on one line, the tabs and buttons tighten. */
  .brand h1 { white-space: nowrap; }
  .wander.lang { padding: 7px 9px; }
  .panel { padding: 18px; right: 12px; }
  .ladder li, .place { grid-template-columns: 76px 1fr; }
  .place { grid-template-columns: 76px auto 1fr; }
}

/* Phone: the panel becomes a bottom sheet that only appears for a species */
@media (max-width: 800px) {
  :root { --panel-w: 0px; }
  .top { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px 4px; }
  .brand h1 { font-size: 20px; }
  .brand .logo { width: 24px; height: 34px; }
  .count { display: none; }
  .views { order: 3; width: 100%; justify-content: space-between; }
  .views button { padding: 6px 4px; font-size: 13px; flex: 1; white-space: nowrap; }
  .wander { padding: 6px 10px; margin-left: auto; }
  .wander + .wander { margin-left: 0; }
  .search { order: 4; width: 100%; margin-left: 0; }
  .trail { top: 146px; left: 16px; right: 16px; }
  .foot-links { right: 16px; bottom: 10px; gap: 12px; }
  .share-link { padding: 6px; }
  .share-link span { display: none; }
  .share-menu { right: 16px; bottom: 50px; }
  .countries { left: 16px; right: 16px; bottom: 52px; }
  /* A card covers the bottom of the screen: the hint, the country strip and the credits link hide behind it. */
  body.card-open .hint, body.card-open .countries, body.card-open .foot-links { visibility: hidden; }
  .hint { left: 16px; right: 160px; bottom: 12px; }
  .panel {
    top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 58vh;
    transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .panel.open { transform: none; }
}

.countries[hidden] { display: none; }

/* Rank ladder: Family → Subfamily → Tribe → Genus → Species */
.ladder { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.ladder::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.ladder li { position: relative; display: grid; grid-template-columns: 84px 1fr; align-items: baseline; padding: 5px 0 5px 22px; }
/* The dot hangs off the rank label, so it stays level with the label however tall the name beside it is. */
.ladder .rank::before { content: ""; position: absolute; left: -21px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--muted); box-sizing: border-box; }
.ladder li.here .rank::before { background: var(--accent); border-color: var(--accent); }
.ladder .rank { position: relative; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ladder button, .ladder .val { text-align: left; border: 0; background: none; padding: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ladder button { cursor: pointer; }
.ladder button:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ladder b { font-size: 17px; font-weight: 600; }
.ladder em { font: italic 14px var(--display); color: var(--muted); }
.ladder .pending { color: var(--muted); font-size: 13.5px; }

.note { color: var(--fg); background: rgba(170,195,255,0.07); border-left: 2px solid var(--accent); padding: 8px 12px; border-radius: 0 8px 8px 0; margin: 0 0 10px; }
.shared { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.shared small { color: var(--muted); }

.places { display: grid; gap: 4px; margin-bottom: 10px; }
.place {
  display: grid; grid-template-columns: 84px auto 1fr; align-items: baseline; gap: 8px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.03); border-radius: 8px; padding: 6px 10px; cursor: pointer; text-align: left;
}
.place:hover { border-color: rgba(170,195,255,0.4); }
.place .rank { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.place b { font-size: 16px; font-weight: 600; }
.place em { font: italic 14px var(--display); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip[hidden] { display: none; }

/* Full-screen photo viewer */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(3, 8, 24, 0.94); color: var(--fg);
}
.lightbox[open] { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lightbox::backdrop { background: rgba(3, 8, 24, 0.6); }
.lightbox figure { margin: 0; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 0; min-width: 0; }
.lightbox iframe { width: min(100%, 1100px); height: min(calc(100dvh - 110px), calc(min(92vw, 1100px) * 0.82)); border: 0; border-radius: 6px; background: #fff; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 110px); object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox figcaption { text-align: center; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.lightbox figcaption b { color: var(--fg); font: 600 18px var(--display); }
.lightbox figcaption a { color: var(--muted); }
.lb-close { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.1); color: #fff; font-size: 22px; cursor: pointer; z-index: 1; }
.lb-nav { justify-self: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.1); color: #fff; font-size: 28px; line-height: 1; padding-bottom: 4px; cursor: pointer; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox.single .lb-nav { visibility: hidden; }
@media (max-width: 800px) {
  .lightbox[open] { grid-template-columns: 44px 1fr 44px; }
  .lb-nav { width: 36px; height: 36px; font-size: 22px; }
}

/* The flying 3D Red-tailed Comet (comet.js). Hidden between visits; the panel stays on top of it. */
.comet {
  position: fixed; left: 0; top: 0; z-index: 4; background: transparent; --poster-color: transparent;
  opacity: 0; pointer-events: none; transition: opacity .6s; cursor: pointer;
}
.comet.on { opacity: 1; pointer-events: auto; }
.comet:focus { outline: none; }

/* Anatomy page (anatomy.js): the 3D bird with numbered dots, and a card for the chosen part. */
.anatomy {
  width: min(1180px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 48px)); max-width: none; max-height: none;
  padding: 0; overflow: hidden; display: none; flex-direction: column;
  background: #0a1840; color: var(--fg); border: 1px solid var(--line); border-radius: 18px;
}
.anatomy[open] { display: flex; }
.anatomy::backdrop { background: rgba(3, 8, 24, 0.65); backdrop-filter: blur(3px); }
.an-top { display: flex; align-items: center; gap: 18px; padding: 16px 20px 12px 26px; border-bottom: 1px solid var(--line); }
.an-top h2 { font: 600 26px var(--display); margin: 0; }
.an-switch { display: inline-flex; background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.an-switch button { border: 0; background: none; color: var(--muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; font: inherit; }
.an-switch button[aria-pressed="true"] { background: rgba(255,255,255,0.14); color: var(--fg); }
.an-switch button:disabled { cursor: default; opacity: .6; }
.an-switch small { font-size: 11px; margin-left: 3px; }
.an-close { position: static; margin-left: auto; }
.an-body { flex: 1; display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
.an-stage { position: relative; min-height: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(127,180,255,0.16), transparent 65%); }
.an-stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.an-credit { position: absolute; left: 16px; bottom: 10px; margin: 0; font-size: 12px; color: var(--muted); z-index: 1; }
.an-credit a { color: var(--muted); }
.an-dot {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; padding: 0; cursor: pointer;
  background: rgba(10, 24, 64, 0.82); color: #fff; font: 600 13px "IBM Plex Sans", sans-serif;
  box-shadow: 0 0 0 4px rgba(127,224,196,0.25); transition: transform .2s, background .2s;
  --min-hotspot-opacity: 0.2;
}
.an-dot:hover { transform: scale(1.15); }
.an-dot.on { background: var(--accent); color: #062019; transform: scale(1.2); box-shadow: 0 0 0 6px rgba(127,224,196,0.35); }
.an-dot[data-visible] { opacity: 1; }
.an-dot:not([data-visible]) { opacity: 0.25; }
.an-card { overflow-y: auto; padding: 22px 26px 24px; border-left: 1px solid var(--line); font-size: 16px; line-height: 1.55; }
.an-card h3 { font: 600 26px var(--display); margin: 6px 0 10px; display: flex; align-items: center; gap: 10px; }
.an-card h3 span, .an-list span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #062019; font: 600 13px "IBM Plex Sans", sans-serif; flex: none; }
.an-card p { margin: 0 0 12px; }
.an-lede { color: var(--muted); }
.an-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.an-list button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--fg); cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.an-list button:hover { background: rgba(255,255,255,0.09); }
.an-wow { background: rgba(127,224,196,0.1); border: 1px solid rgba(127,224,196,0.3); border-radius: 12px; padding: 12px 14px; margin: 4px 0 14px; }
.an-wow b { color: var(--accent); }
.an-see { color: var(--muted); font-size: 14px; margin-bottom: 8px !important; }
.an-meets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.an-meet { font: 500 14px "IBM Plex Sans", sans-serif; color: var(--fg); cursor: pointer; border-radius: 999px; padding: 6px 12px;
  background: rgba(255,255,255,0.07); border: 1px solid var(--line); }
.an-meet:hover { border-color: var(--accent); }
.an-src { font-size: 12px; color: var(--muted); line-height: 1.5; }
.an-src a { color: var(--muted); }
.an-back { border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; padding: 0; }
.an-back:hover { color: var(--fg); }
.an-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.an-steps { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.an-steps button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.05); color: var(--fg); font-size: 18px; cursor: pointer; }
@media (max-width: 800px) {
  .anatomy { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .an-top { padding: 12px 14px 10px 16px; gap: 10px; flex-wrap: wrap; }
  .an-top h2 { font-size: 20px; }
  .an-switch { order: 3; }
  .an-body { grid-template-columns: 1fr; grid-template-rows: 46% 1fr; }
  .an-card { border-left: 0; border-top: 1px solid var(--line); padding: 16px 18px 20px; font-size: 15px; }
  .anatomy-btn span { display: none; }
  /* Wander shows only its icon on phones, so it fits next to the site name; screen readers still get the word. */
  .wander span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wander { padding: 6px 9px; }
  .an-dot { width: 22px; height: 22px; font-size: 11px; border-width: 1.5px; box-shadow: 0 0 0 3px rgba(127,224,196,0.25); }
  .an-credit { font-size: 11px; right: 16px; }
}
/* Anatomy loading screen: the logo bird hovers while the model downloads. */
.an-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; z-index: 2;
  pointer-events: none; transition: opacity .6s; color: var(--fg); }
.an-loading.done { opacity: 0; }
.an-loading svg { width: 78px; height: 112px; color: var(--accent); animation: an-hover 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(127,224,196,0.45)); }
.an-loading p { margin: 0; color: var(--muted); font-size: 15px; }
.an-loading b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.an-loadbar { width: 180px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.an-loadbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
@keyframes an-hover {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .an-loading svg { animation: none; } }
.an-model { font-size: 15px; color: var(--muted); }
.an-model b { color: var(--fg); font-weight: 600; }
.an-model .an-meet { margin-top: 8px; display: inline-block; }

/* Narrow phones: tighten the header so the logo, the two icon buttons and the language switch share one row. */
@media (max-width: 420px) {
  .top { column-gap: 7px; }
  .brand { gap: 8px; }
  .brand h1 { font-size: 18px; }
  .wander { padding: 6px 8px; }
  .wander.lang { padding: 6px 9px; font-size: 12px; }
}

/* Narrowest desktop widths: tighter tabs so the header still fits on one row. */
@media (min-width: 801px) and (max-width: 900px) {
  .top { gap: 8px; }
  .brand h1 { font-size: 19px; }
  .views button { padding: 6px 7px; font-size: 13px; }
  .wander { padding: 7px 8px; }
}