/* Biodex website design system: frames, keys, cards, type, the pixel unit.
   Ported from the app repository, _website/_style/prototype/css/biodex.css (the commented original). */
@font-face { font-family: "Biodex Pixel"; src: url(../assets/fonts/PressStart2P-Regular.ttf) format("truetype");
             font-display: block; }
@font-face { font-family: "Biodex Pixel"; src: url(../assets/fonts/BiodexDigits-Regular.ttf) format("truetype");
             unicode-range: U+0030-0039; font-display: block; }
@font-face { font-family: "Biodex Prose"; font-weight: 400; src: url(../assets/fonts/PixelifySans-Regular.ttf) format("truetype"); }
@font-face { font-family: "Biodex Prose"; font-weight: 500; src: url(../assets/fonts/PixelifySans-Medium.ttf) format("truetype"); }

@font-face { font-family: "Biodex Prose"; font-weight: 400; src: url(../assets/fonts/Silkscreen-Regular.ttf) format("truetype");
             unicode-range: U+0030-0039, U+00A9; }
@font-face { font-family: "Biodex Prose"; font-weight: 500; src: url(../assets/fonts/Silkscreen-Regular.ttf) format("truetype");
             unicode-range: U+0030-0039, U+00A9; }

:root {

  --u: 1.5px; --dpr: 1; --page-w: 100vw;
  --col: 0;
  --col-x: 0;

  --ground: #E8DCC0; --panel: #DCCDA9; --well: #CDBB93; --card: #F7EFDD;
  --border: #6B5233; --band: #A8875A; --band-light: #CBAA7B;
  --ink: #3A2E1F;    --ink-soft: #7A6647;

  --leaf-bevel: #B4CE86; --leaf: #8AAC57; --leaf-shade: #65853C; --leaf-border: #3D5226;
  --on-leaf: #F4EFDC;

  --off: #C6B694; --off-border: #8A7551; --off-ink: #4E3F2A;
  --dead: #A8A39C; --dead-border: #6E6A64; --dead-ink: #4A4640;

  --close: #B0442F;
  --alert: #C0392B;

  --cast-paper: rgba(58,46,31,.40);
  --cast-sheet: #1A150E;
  --cast-picture: rgba(0,0,0,.55);
  --sheet: #3A2E1F;

  --medal-bronze: #C77B3B;   --medal-bronze-lit: #DCAD85;
  --medal-silver: #9BA7B2;   --medal-silver-lit: #C1C8CF;
  --medal-gold: #E8A821;     --medal-gold-lit: #F1C975;
  --medal-platinum: #3FBECB; --medal-platinum-lit: #88D7DF;
  --medal-diamond: #6C8CFF;  --medal-diamond-lit: #A4B8FF;
  --iucn-ex: #5a5a5a; --iucn-ew: #7a3b8f; --iucn-cr: #c7402f; --iucn-en: #d9772b;
  --iucn-vu: #d0a02a; --iucn-nt: #8aa72f; --iucn-lc: #4c9a52; --iucn-ne: #8a94a6;
  --yes: #3f9a3a;
  --tab-animals-bg: #FAEEDA; --tab-animals-ink: #412402;
  --tab-plants-bg:  #EAF3DE; --tab-plants-ink:  #173404;
  --tab-other-bg:   #F1EFE8; --tab-other-ink:   #2C2C2A;
  --halo: rgba(247,239,221,.96);
  --veil: rgba(247,239,221,.25);
  --scrim: rgba(0,0,0,.6);

  --ground-cast: var(--cast-paper);
  --ground-ring: var(--ink);
}

:root[data-theme="dark"] {  }

*, *::before, *::after { box-sizing: border-box; }
* { font-synthesis: none; font-kerning: none; letter-spacing: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink);
       font-family: "Biodex Prose", system-ui, sans-serif; font-size: var(--prose-size); line-height: var(--prose-lh); }
:root {

  --digit-step: 0.01px;
  --prose-size: max(round(up, calc(1rem - 0.001px), var(--digit-step)),
                    min(round(nearest, clamp(1rem, calc(12 * var(--u)), 1.25rem), var(--digit-step)),
                        round(down, calc(1.25rem + 0.001px), var(--digit-step))));
  --prose-small: round(up, calc(1rem - 0.001px), var(--digit-step));

  --prose-lh: round(up, calc(1.5 * var(--prose-size)), var(--u));
}
img { display: block; }
a { color: inherit; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
* { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
h1, h2 { text-wrap: balance; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.sprite { image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }
.s16 { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.s16x2 { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.s32 { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.s32x2 { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
.s32x3 { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }

.pixel, .t8, .t16, .t24, .t32, h1, h2, h3, .h1, .h2, .h3, .label, .key-label {
  font-family: "Biodex Pixel", monospace; font-weight: 400; text-transform: uppercase; }
.t8  { font-size: calc(8 * var(--u));  line-height: calc(10 * var(--u)); }
.t16 { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
.t24 { font-size: calc(24 * var(--u)); line-height: calc(28 * var(--u)); }
.t32 { font-size: calc(32 * var(--u)); line-height: calc(36 * var(--u)); }
.lh8 { line-height: calc(8 * var(--u)); }
.lh12 { line-height: calc(12 * var(--u)); }

h1, .h1 { font-size: calc(24 * var(--u)); line-height: calc(28 * var(--u)); color: var(--ink); }
:root[data-narrow] h1, :root[data-narrow] .h1 { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
:root[data-tier="M"] h1, :root[data-tier="L"] h1,
:root[data-tier="M"] .h1, :root[data-tier="L"] .h1 { font-size: calc(32 * var(--u)); line-height: calc(36 * var(--u)); }
h2, .h2 { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); color: var(--ink); }
h2.big, .h2.big { font-size: calc(24 * var(--u)); line-height: calc(28 * var(--u)); }
:root[data-narrow] h2.big { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
h3, .h3 { font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); }

.label { font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); color: var(--on-leaf);
         text-shadow: var(--u) var(--u) 0 var(--ink); }

.prose, :where(p) { font-family: "Biodex Prose", system-ui, sans-serif; font-size: var(--prose-size);
            line-height: var(--prose-lh); text-transform: none; max-width: 34rem; }
.prose-strong { font-weight: 500; }
p.px, p.plate, p.plan-head, p.t8, p.t16, p.t24, p.h1, p.h2 { max-width: none; }

.latin { font-family: "Biodex Prose", system-ui, sans-serif; font-style: italic; font-synthesis: style;
         font-size: var(--prose-size); line-height: var(--prose-lh); text-transform: none; }
.k-card .latin, .on-card .latin { color: var(--ink-soft); }

:root[data-lowdensity] .t8, :root[data-lowdensity] h3, :root[data-lowdensity] .h3,
:root[data-lowdensity] .label { font-size: calc(16 * var(--u)); line-height: calc(18 * var(--u)); }

:root[data-lowdensity] :is(.statrow dt, .statrow dd, .statrow .sr-label, .statrow .sr-value,
  .plate, .hero-free, .ph .ph-label) {
  font-size: calc(16 * var(--u)); line-height: calc(18 * var(--u)); }
:root[data-lowdensity] .statrow { min-height: calc(22 * var(--u)); }
:root[data-lowdensity] .banner { padding-block: calc(4 * var(--u)); }
:root[data-lowdensity] .banner.two-line { min-height: calc(44 * var(--u)); }
:root[data-lowdensity] .t16, :root[data-lowdensity] h2, :root[data-lowdensity] .h2 { font-size: calc(24 * var(--u)); line-height: calc(28 * var(--u)); }

.col { width: min(calc(480 * var(--u)), calc(100% - 16 * var(--u))); margin-inline: auto; }
:root[data-k] .col { width: calc(var(--col) * var(--u)); margin-left: calc(var(--col-x) * var(--u)); margin-right: 0; }
.band { width: 100%; }
.section { padding-top: calc(40 * var(--u)); scroll-margin-top: calc(48 * var(--u)); }
.stack > * + * { margin-top: calc(8 * var(--u)); }
.stack-4 > * + * { margin-top: calc(4 * var(--u)); }
.center { text-align: center; }
.center > p, p.center { margin-inline: auto; }
.row { display: flex; gap: calc(4 * var(--u)); align-items: flex-start; }
.gap8 { gap: calc(8 * var(--u)); }

.rail { display: none; }
:root[data-tier="L"] .rail { display: block; position: fixed; z-index: 5; top: calc(48 * var(--u));
  width: calc(104 * var(--u)); left: calc(var(--rail-x, 0) * var(--u)); }

.g-sheet   { background: var(--sheet); color: var(--on-leaf); --ground-cast: var(--cast-sheet); --ground-ring: var(--on-leaf); }
.g-sheet h2, .g-sheet .h2 { color: var(--on-leaf); text-shadow: var(--u) var(--u) 0 var(--cast-sheet); }
.g-sheet p, .g-sheet .prose { color: var(--on-leaf); }
.g-sheet .credit { color: var(--band-light); }

.g-sheet .k-banner { --f-line: var(--cast-sheet); }
.g-picture { --ground-cast: var(--cast-picture); --ground-ring: var(--on-leaf); }

.k-panel, .k-card, .k-well, .k-subpanel, .k-sheet6 { color: var(--ink); --ground-ring: var(--ink); }
.k-panel h2, .k-card h2, .k-panel p, .k-card p, .k-subpanel p { color: var(--ink); text-shadow: none; }

.px { position: relative; isolation: isolate; padding: calc(6 * var(--u));
      --f-lit: var(--k-lit); --f-shade: var(--k-shade); --f-cast: var(--ground-cast); --f-ring: var(--ground-ring); }
.fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: -1;
      pointer-events: none; shape-rendering: crispEdges; }
.fx-cast { transform: translate(calc(var(--f-off, 2) * var(--u)), calc(var(--f-off, 2) * var(--u))); }
.fx-ring { display: none; }

.k-panel    { --f-line: var(--border); --k-shade: var(--band); --k-lit: var(--band-light); --f-face: var(--panel); }
.k-sheet6   { --f-line: var(--border); --k-shade: var(--band); --k-lit: var(--band-light); --f-face: var(--panel);
              padding: calc(10 * var(--u)); }
.k-card     { --f-line: var(--border); --k-shade: var(--band); --k-lit: var(--band-light); --f-face: var(--card); }
.k-leaf     { --f-line: var(--leaf-border); --k-shade: var(--leaf); --k-lit: var(--leaf-bevel); --f-face: var(--leaf-bevel); color: var(--ink); }
.k-well     { --f-line: var(--border); --k-shade: var(--band); --k-lit: var(--band-light); --f-face: var(--well); }
.k-off      { --f-line: var(--off-border); --k-shade: var(--off); --k-lit: var(--off); --f-face: var(--off); color: var(--off-ink); }
.k-dead     { --f-line: var(--dead-border); --k-shade: var(--dead); --k-lit: var(--dead); --f-face: var(--dead); color: var(--dead-ink); }
.k-banner   { --f-line: var(--ink); --f-face: var(--border); color: var(--on-leaf); }
.k-subpanel { --f-line: var(--border); --f-face: var(--panel); }
.k-door     { --f-line: var(--leaf-border); --k-shade: var(--leaf-shade); --k-lit: var(--leaf-bevel); --f-face: var(--leaf);
              --f-off: 3; color: var(--ink); }
.k-door.k-red { --f-line: var(--ink); --k-shade: #8A3424; --k-lit: #CC6A55; --f-face: var(--close); color: var(--on-leaf); }
.k-close    { --f-line: var(--ink); --f-face: var(--close); color: var(--on-leaf); }

.medal-bronze   { --k-shade: var(--medal-bronze);   --k-lit: var(--medal-bronze-lit); }
.medal-silver   { --k-shade: var(--medal-silver);   --k-lit: var(--medal-silver-lit); }
.medal-gold     { --k-shade: var(--medal-gold);     --k-lit: var(--medal-gold-lit); }
.medal-platinum { --k-shade: var(--medal-platinum); --k-lit: var(--medal-platinum-lit); }
.medal-diamond  { --k-shade: var(--medal-diamond);  --k-lit: var(--medal-diamond-lit); }

a.px { display: block; }
a.px, button.px, label.px, summary.px, .press { cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.px:focus, button.px:focus, summary.px:focus { outline: none; }
.px:focus-visible > .fx .fx-ring, .px.is-focus > .fx .fx-ring { display: inline; }

a.px:active, button.px:active, .px.is-pressed, label.px:active {
  transform: translate(calc(var(--f-off, 2) * var(--u)), calc(var(--f-off, 2) * var(--u)));
  --f-lit: var(--k-shade); --f-shade: var(--k-lit); }
a.px:active > .fx .fx-cast, button.px:active > .fx .fx-cast, .px.is-pressed > .fx .fx-cast,
label.px:active > .fx .fx-cast { display: none; }

.plaque { position: sticky; top: 0; z-index: 10; background: var(--panel); height: calc(40 * var(--u));
          padding-top: calc(4 * var(--u)); }
.plaque-row { display: flex; align-items: flex-start; justify-content: space-between; height: calc(30 * var(--u)); }
.plaque-edge { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(4 * var(--u)); display: block;
               shape-rendering: crispEdges; }
.brand { display: flex; align-items: flex-start; gap: calc(4 * var(--u)); text-decoration: none; color: var(--ink);
         padding-top: calc(7 * var(--u)); }
.brand-sm { padding-top: 0; }
.wordmark { display: block; width: calc(94 * var(--u)); height: calc(14 * var(--u)); fill: var(--ink);
            margin-top: var(--u); shape-rendering: crispEdges; }
.wordmark-8 { width: calc(47 * var(--u)); height: calc(7 * var(--u)); margin-top: 0; }

.plaque-door { display: block; width: calc(88 * var(--u)); height: calc(28 * var(--u)); padding: calc(6 * var(--u)) 0 0;
               text-align: center; color: var(--ink); }
.plaque-door .key-label { font-size: calc(8 * var(--u)); line-height: calc(8 * var(--u)); }
:root[data-tier="M"] .plaque-door, :root[data-tier="L"] .plaque-door { width: calc(144 * var(--u)); height: calc(24 * var(--u));
  padding-top: calc(8 * var(--u)); margin-top: calc(2 * var(--u)); }
:root[data-tier="M"] .plaque-door br, :root[data-tier="L"] .plaque-door br { display: none; }
.plaque[data-state="a"] .plaque-door { visibility: hidden; }

.plaque-door::before, .brand::before { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: max(100%, 44px); transform: translateY(-50%); }
.brand { position: relative; }

.channels { padding: calc(4 * var(--u)) 0; }
.channels ul { display: grid; gap: calc(4 * var(--u));
  grid-template-columns: repeat(var(--keys, 3), round(down, calc((100% - (var(--keys, 3) - 1) * 4 * var(--u)) / var(--keys, 3)), calc(2 * var(--u)))); }
:root[data-tier="L"] .channels { display: none; }
.channels[data-unfit] { display: none; }
.ckey { display: flex; flex-direction: column; align-items: center; height: calc(50 * var(--u));
        padding: calc(6 * var(--u)) calc(6 * var(--u)) 0; text-align: center; }
.ckey .sprite { margin: 0 auto; }
.key-label { display: block; font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); height: calc(20 * var(--u));
             width: 100%; display: flex; align-items: center; justify-content: center; }
.ckey .key-label { margin-top: calc(2 * var(--u)); }
.ckey.k-off .key-label { color: var(--off-ink); }
.ckey.k-leaf .key-label { color: var(--ink); }
.rail ul { display: grid; gap: calc(4 * var(--u)); }
.rail .ckey { width: calc(104 * var(--u)); }

a.px.door, button.px.door { display: flex; }
.door { display: flex; align-items: center; justify-content: center; height: calc(40 * var(--u));
        padding: 0 calc(7 * var(--u)); font-size: calc(8 * var(--u)); line-height: calc(8 * var(--u));
        width: 100%; margin-bottom: calc(3 * var(--u)); }
.door .key-label { height: auto; width: auto; }
:root[data-tier="M"] .door.door-page, :root[data-tier="L"] .door.door-page { width: calc(176 * var(--u)); }
.door.door-32 { height: calc(32 * var(--u)); }

.door::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }
.door.door-center { margin-inline: auto; }

.tlink { font-family: "Biodex Prose", system-ui, sans-serif; color: var(--ink); text-decoration: underline;
         text-decoration-thickness: var(--u); text-underline-offset: calc(2 * var(--u));
         display: inline-flex; align-items: center; gap: calc(3 * var(--u)); min-height: 24px; position: relative; }

.tlink::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.tlink:focus-visible { outline: calc(2 * var(--u)) solid var(--ground-ring); outline-offset: calc(2 * var(--u)); }
.g-sheet .tlink { color: var(--on-leaf); }
.tri { display: inline-block; fill: currentColor; flex: none; }
.tri-r, .tri-l { width: calc(4 * var(--u)); height: calc(8 * var(--u)); }
.tri-d, .tri-u { width: calc(8 * var(--u)); height: calc(4 * var(--u)); }

.key-chip { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(28 * var(--u));
            padding: 0 calc(8 * var(--u)) 0 calc(6 * var(--u)); flex: none; color: var(--off-ink); }
a.px.key-chip { display: inline-flex; }
.key-chip .key-label { height: auto; width: auto; display: block; color: var(--off-ink); }
.key-chip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }

.banner { display: flex; align-items: center; gap: calc(4 * var(--u)); min-height: calc(16 * var(--u));
          padding: calc(3 * var(--u)) calc(6 * var(--u)); }
.banner.has-icon { min-height: calc(24 * var(--u)); padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); }
.banner.two-line { min-height: calc(28 * var(--u)); padding-block: calc(4 * var(--u)); }
.banner.centered { justify-content: center; text-align: center; }
.banner .label { flex: 1 1 auto; }
.banner.centered .label { flex: 0 1 auto; }
.banner .count { margin-left: auto; flex: none; }

.ptitle { text-align: center; color: var(--ink); }
.ptitle + .rule { margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); }

.shadowed { margin-right: calc(2 * var(--u)); margin-bottom: calc(2 * var(--u)); }
.list-well { padding: calc(10 * var(--u)); }
.list-well > * + * { margin-top: calc(4 * var(--u)); }

.readout { padding: calc(4 * var(--u)); }

.readout-grid { display: grid; grid-template-columns: round(down, calc((100% - var(--u)) / 2), var(--u)) 1fr;
                gap: var(--u); background: var(--border); }
:root[data-tier="M"] .readout-grid, :root[data-tier="L"] .readout-grid {
  grid-template-columns: calc(124 * var(--u)) repeat(2, round(down, calc((100% - 127 * var(--u)) / 3), var(--u))) 1fr; }
.readout-cell { background: var(--panel); padding: calc(6 * var(--u)); display: flex; flex-direction: column;
                align-items: center; justify-content: center; text-align: center; min-height: calc(40 * var(--u)); }
.readout-cell .value { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
.readout-cell .caption { font-size: calc(8 * var(--u)); line-height: calc(12 * var(--u)); }
.credit { font-size: var(--prose-small); line-height: round(up, calc(1.5 * var(--prose-small)), var(--u)); }

.statrows { display: grid; gap: 0; }
.statrow { display: flex; align-items: flex-end; min-height: calc(14 * var(--u)); padding-bottom: calc(2 * var(--u)); }
.statrow dt, .statrow .sr-label { font-family: "Biodex Pixel", monospace; text-transform: uppercase; color: var(--ink-soft);
  font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); flex: 0 1 auto; }
.statrow dd, .statrow .sr-value { font-family: "Biodex Pixel", monospace; text-transform: uppercase; color: var(--ink);
  font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); margin: 0; flex: none; text-align: right;
  display: flex; align-items: center; gap: calc(3 * var(--u)); }

.statrow .leader { flex: 1 1 calc(12 * var(--u)); min-width: calc(12 * var(--u)); height: var(--u);
  margin: 0 calc(3 * var(--u)) var(--u);
  background-image: linear-gradient(to right, var(--ink-soft) var(--u), transparent var(--u));
  background-size: calc(3 * var(--u)) var(--u); background-repeat: repeat-x; align-self: flex-end; }

.scard { display: flex; flex-direction: column; align-items: center; padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u));
         min-height: calc(76 * var(--u)); width: calc(var(--cw, 112) * var(--u)); height: calc(var(--ch, 140) * var(--u)); }
.scard.w160 { --cw: 160; --ch: 200; }
.scard.w112 { --cw: 112; --ch: 140; }
.scard.fluid { width: auto; }
.scard-photo { position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u)); right: calc(4 * var(--u)); bottom: calc(4 * var(--u));
               overflow: hidden; z-index: 0; }
.scard-photo img { width: 100%; height: 100%; object-fit: cover; }
.scard-photo::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.scard-cap { position: relative; z-index: 1; text-align: center; max-width: 100%; padding-top: calc(2 * var(--u)); }
.scard.has-photo .scard-cap { background: var(--halo); padding: var(--u) calc(3 * var(--u));
  border: var(--u) solid var(--border); margin-top: calc(2 * var(--u)); }
.scard-name { display: block;
              font-family: "Biodex Pixel", monospace; text-transform: uppercase; color: var(--ink);
              font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); }
.scard .latin { display: block; font-size: 1rem; line-height: round(up, 1.25rem, var(--u)); color: var(--ink-soft); }
.scard-sprite { position: relative; z-index: 1; margin: auto 0; }

.scard:not(.has-photo) .scard-cap { align-self: stretch; }
.scard-tab { position: absolute; z-index: 2; left: 50%; bottom: calc(-4 * var(--u)); transform: translateX(-50%);
             padding: calc(3 * var(--u)) calc(5 * var(--u)); white-space: nowrap;
             font-family: "Biodex Pixel", monospace; text-transform: uppercase; font-size: calc(8 * var(--u)); line-height: calc(8 * var(--u)); }
.k-tab { --f-line: var(--border); --f-face: var(--tab-animals-bg); color: var(--tab-animals-ink); }
.k-tab.tab-plants { --f-face: var(--tab-plants-bg); color: var(--tab-plants-ink); }
.k-tab.tab-other  { --f-face: var(--tab-other-bg); color: var(--tab-other-ink); }

.scard-back { justify-content: center; gap: calc(6 * var(--u)); padding-bottom: calc(4 * var(--u)); }
.scard-back .wordmark-8 { margin-bottom: var(--u); }

.scard.is-squashed > :not(.fx) { visibility: hidden; }
.reveal-seat { height: calc(var(--ch, 140) * var(--u) + 24 * var(--u)); display: flex; justify-content: center; align-items: flex-end; }

.record { width: 100%; padding: calc(8 * var(--u)); }
:root[data-tier="M"] .record, :root[data-tier="L"] .record { width: calc(240 * var(--u)); }
.record-name { text-align: center; }
.record-name .latin { display: block; text-align: center; }
.plates { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(4 * var(--u)) calc(8 * var(--u)); margin: calc(8 * var(--u)) 0; }
.plate { display: inline-flex; align-items: center; gap: calc(4 * var(--u));    font-family: "Biodex Pixel", monospace;
         text-transform: uppercase; font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); color: var(--ink); }
.rule { height: var(--u); background: var(--band-light); margin: calc(4 * var(--u)) 0; }

.fact h3 { text-align: center; color: var(--ink); }
.fact h3 .gem { vertical-align: top; margin: calc(2 * var(--u)) calc(3 * var(--u)) 0 0; }
.fact .rule { margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); }

.gem { display: inline-block; flex: none; width: calc(6 * var(--u)); height: calc(6 * var(--u)); shape-rendering: crispEdges; }
.gem.bronze   { --gem: var(--medal-bronze); }   .gem.silver   { --gem: var(--medal-silver); }
.gem.gold     { --gem: var(--medal-gold); }     .gem.platinum { --gem: var(--medal-platinum); }
.gem.diamond  { --gem: var(--medal-diamond); }  .gem.alert    { --gem: var(--alert); }
.gem.iucn-ex { --gem: var(--iucn-ex); } .gem.iucn-ew { --gem: var(--iucn-ew); } .gem.iucn-cr { --gem: var(--iucn-cr); }
.gem.iucn-en { --gem: var(--iucn-en); } .gem.iucn-vu { --gem: var(--iucn-vu); } .gem.iucn-nt { --gem: var(--iucn-nt); }
.gem.iucn-lc { --gem: var(--iucn-lc); } .gem.iucn-ne { --gem: var(--iucn-ne); }
.g-sheet .gem { --gem-line: var(--ink); }
.medals { display: grid; gap: calc(8 * var(--u)) calc(4 * var(--u));
          grid-template-columns: repeat(3, round(down, calc((100% - 8 * var(--u)) / 3), calc(2 * var(--u)))); }
.medal { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); text-align: center;
         font-family: "Biodex Pixel", monospace; text-transform: uppercase; font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); }
.medal .name { font-size: calc(8 * var(--u)); }

.vmark { font-family: "Biodex Pixel", monospace; font-size: calc(8 * var(--u)); line-height: calc(8 * var(--u)); color: var(--yes); }
.dash { display: inline-block; width: calc(4 * var(--u)); height: var(--u); background: var(--ink); vertical-align: middle; }
.bullet-list li { display: flex; gap: calc(6 * var(--u)); align-items: baseline; }
.bullet-list li + li { margin-top: calc(4 * var(--u)); }
.bullet { flex: none; display: inline-block; width: calc(2 * var(--u)); height: calc(2 * var(--u)); background: var(--ink);
          transform: translateY(calc(-3 * var(--u))); }
.pause { width: calc(6 * var(--u)); height: calc(6 * var(--u)); fill: currentColor; }

.plan-sheet { width: 100%; }
:root[data-tier="M"] .plan-sheet, :root[data-tier="L"] .plan-sheet { width: calc(400 * var(--u)); margin-inline: auto; }
.plan-sheet > .k-card { padding: calc(8 * var(--u)); }
.plans-table { width: 100%; border-collapse: separate; border-spacing: var(--u); background: var(--border); table-layout: fixed; }
.plans-table col.c-feature { width: calc(160 * var(--u)); }
.plans-table col.c-plan { width: calc(72 * var(--u)); }
.plans-table th, .plans-table td { background: var(--card); padding: calc(4 * var(--u)); text-align: center; vertical-align: middle; }
.plans-table thead th { font-family: "Biodex Pixel", monospace; text-transform: uppercase; font-size: calc(8 * var(--u));
                        line-height: calc(10 * var(--u)); font-weight: 400; padding: calc(2 * var(--u)); }
.plans-table th[scope="row"] { text-align: left; font-weight: 400; font-family: "Biodex Prose", system-ui, sans-serif;
                               font-size: var(--prose-size); line-height: var(--prose-lh); }
.plans-table td { font-family: "Biodex Pixel", monospace; font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); }
.plans-table td .cellstack { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); }

.plans-table thead th { background: var(--panel); }
.colhead { display: block; padding: calc(4 * var(--u)) calc(2 * var(--u)); color: var(--ink); }

.plans-free col.c-feature { width: auto; }
.plans-free col.c-plan { width: calc(72 * var(--u)); }
.plans-free thead td { background: var(--card); }
:root[data-tier="M"] .plan-sheet-free, :root[data-tier="L"] .plan-sheet-free { width: calc(288 * var(--u)); }

.plan-head { background: var(--panel); text-align: center; padding: calc(4 * var(--u)); margin-bottom: var(--u);
             font-family: "Biodex Pixel", monospace; text-transform: uppercase; font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); }

:root[data-tier="S"] .plans-table:not(.plans-free), :root:not([data-tier]) .plans-table:not(.plans-free) { display: grid; gap: var(--u); padding: 0;
  grid-template-columns: repeat(2, round(down, calc((100% - 2 * var(--u)) / 3), var(--u))) 1fr; }
:root[data-tier="S"] .plans-table:not(.plans-free) colgroup, :root:not([data-tier]) .plans-table:not(.plans-free) colgroup { display: none; }
:root[data-tier="S"] .plans-table:not(.plans-free) :is(thead, tbody, tr), :root:not([data-tier]) .plans-table:not(.plans-free) :is(thead, tbody, tr) { display: contents; }
:root[data-tier="S"] .plans-table:not(.plans-free) thead td, :root:not([data-tier]) .plans-table:not(.plans-free) thead td { display: none; }
:root[data-tier="S"] .plans-table:not(.plans-free) th[scope="row"], :root:not([data-tier]) .plans-table:not(.plans-free) th[scope="row"] { grid-column: 1 / -1; }

.rule-sheet { width: min(calc(320 * var(--u)), 100%); margin-inline: auto; }
.rule-sheet h3 { text-align: center; }
.rule-rows { display: grid; gap: var(--u); background: var(--border); margin-top: calc(6 * var(--u)); }

.rule-rows > div { background: var(--card); display: flex; align-items: flex-start; gap: calc(6 * var(--u));
                   padding: calc(6 * var(--u)); font-family: "Biodex Prose", system-ui, sans-serif;
                   font-size: var(--prose-size); line-height: var(--prose-lh); }
.rule-rows .vmark { line-height: var(--prose-lh); }
.rule-sign { display: flex; justify-content: flex-end; align-items: center; gap: calc(3 * var(--u)); margin-top: calc(6 * var(--u)); }

.faq > details + details { margin-top: calc(4 * var(--u)); }
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary.banner { min-height: max(calc(24 * var(--u)), round(up, 44px, calc(2 * var(--u))));
                      padding: calc(7 * var(--u)) calc(6 * var(--u)); align-items: center; }
.faq summary h3 { color: var(--on-leaf); text-shadow: var(--u) var(--u) 0 var(--ink); }
.faq summary .tri { color: var(--on-leaf); }
.faq summary .tri-open { display: none; }

.faq summary .tri-closed { margin-right: calc(4 * var(--u)); }
.faq details[open] summary .tri-open { display: inline-block; }
.faq details[open] summary .tri-closed { display: none; }
.faq summary.banner:focus-visible > .fx .fx-ring { display: inline; }
.faq .answer { margin: calc(4 * var(--u)) 0 0 calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)); }

.dialog { padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible;
          width: min(calc(224 * var(--u)), calc(100% - 16 * var(--u))); max-width: none; }
.dialog::backdrop { background: var(--scrim); }
.dialog-panel { padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); }
.dialog-panel > * + * { margin-top: calc(8 * var(--u)); }
.close-key { position: absolute; top: calc(6 * var(--u)); right: calc(6 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u));
             padding: calc(4 * var(--u)); font-family: "Biodex Pixel", monospace; font-size: calc(8 * var(--u)); line-height: calc(8 * var(--u));
             color: var(--on-leaf); text-align: center; --f-off: 0; }
.close-key::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
                     width: max(calc(24 * var(--u)), 44px); height: max(calc(24 * var(--u)), 44px); }
.close-key:active { transform: none; }
.field-label { display: block; font-family: "Biodex Pixel", monospace; text-transform: uppercase;
               font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.field { display: block; height: max(calc(24 * var(--u)), 40px); padding: 0 calc(6 * var(--u)); }
.field input { position: relative; display: block; width: 100%; height: 100%; border: 0; background: transparent; outline: none;
               color: var(--ink); font-family: "Biodex Prose", system-ui, sans-serif; font-size: max(1rem, calc(12 * var(--u))); padding: 0; }
.field:focus-within > .fx .fx-ring { display: inline; }
.check { display: flex; gap: calc(6 * var(--u)); align-items: flex-start; cursor: pointer; min-height: 44px; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); padding: calc(4 * var(--u)); display: flex;
              align-items: center; justify-content: center; }
.check .box .vmark { visibility: hidden; color: var(--ink); }
.check input:checked + .box { --f-line: var(--leaf-border); --k-shade: var(--leaf); --k-lit: var(--leaf-bevel); --f-face: var(--leaf-bevel); }
.check input:checked + .box .vmark { visibility: visible; }
.check input:focus-visible + .box > .fx .fx-ring { display: inline; }
.check .prose { font-size: var(--prose-small); line-height: round(up, calc(1.5 * var(--prose-small)), var(--u)); }
.error { display: flex; gap: calc(4 * var(--u)); align-items: center; font-size: var(--prose-small); }

.toast { position: fixed; left: calc((var(--col-x) + var(--col) / 2) * var(--u)); top: round(44vh, var(--u));
         transform: translateX(-50%); pointer-events: none; z-index: 30; }
:root:not([data-k]) .toast { left: 50%; }
.toast.inline { position: relative; left: auto; top: auto; transform: none; display: inline-flex; }

.seat { position: relative; width: 100%; }
:root[data-tier="M"] .seat, :root[data-tier="L"] .seat { width: calc(176 * var(--u)); margin-inline: auto; }
.loadbar { position: absolute; left: 0; top: 0; width: 100%; height: calc(40 * var(--u)); padding: calc(5 * var(--u));
           pointer-events: none; z-index: 2; }

.loadbar-blocks { display: grid; grid-template-columns: repeat(20, round(down, calc((100% - 19 * var(--u)) / 20), var(--u)));
                  gap: var(--u); height: 100%; }
.loadbar-blocks i { background: var(--well); }
.loadbar-blocks i.on { background: var(--leaf); }
.seat.is-loading .door { visibility: hidden; }

.mount { display: inline-block; padding: calc(4 * var(--u)); }
.mount .shot { image-rendering: pixelated; }

.ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u));
      width: calc(var(--pw, 72) * var(--u)); height: calc(var(--ph, 120) * var(--u)); max-width: 100%;
      background: var(--well);
      text-align: center; padding: calc(4 * var(--u)); }
.ph .ph-label { font-family: "Biodex Pixel", monospace; text-transform: uppercase; font-size: calc(8 * var(--u));
                line-height: calc(10 * var(--u)); color: var(--ink); background: var(--card); padding: calc(2 * var(--u)) calc(3 * var(--u)); }
.ph .ph-size { font-family: "Biodex Pixel", monospace; font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); color: var(--ink);
               background: var(--card); padding: 0 calc(3 * var(--u)); }
figure.depicted { display: flex; flex-direction: column; align-items: center; }

.slot.collapses { display: none !important; }
.slot.fallback .ph { width: auto; height: auto; padding: calc(8 * var(--u)); }
.slot.fallback .ph :is(.ph-label, .ph-size) { display: none; }

.clip { display: block; position: relative; padding: calc(4 * var(--u)); width: calc(var(--clw, 176) * var(--u)); max-width: 100%; }
.clip-pic { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--sheet); }
.clip-pic img, .clip-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-key { position: absolute; z-index: 3; top: calc(8 * var(--u)); right: calc(8 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u));
            padding: 0; display: flex; align-items: center; justify-content: center; color: var(--off-ink); }
.clip-key::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
                    width: max(calc(24 * var(--u)), 44px); height: max(calc(24 * var(--u)), 44px); }
.clip-key:active { transform: translate(var(--u), var(--u)); }
.clip-key .pause { display: none; }
.clip.is-playing .clip-key .pause { display: block; }
.clip.is-playing .clip-key .tri { display: none; }

.backdrop { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; }
.backdrop img, .backdrop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.skip { position: absolute; z-index: 50; left: calc(8 * var(--u)); top: calc(-80 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u));
        font-family: "Biodex Pixel", monospace; text-transform: uppercase; font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); color: var(--ink); }
.skip:focus { top: calc(8 * var(--u)); }

.footer { background: var(--well); position: relative; padding: calc(4 * var(--u) + 16 * var(--u)) 0 calc(24 * var(--u)); margin-top: calc(40 * var(--u)); }
.footer-edge { position: absolute; left: 0; top: 0; width: 100%; height: calc(4 * var(--u)); display: block; shape-rendering: crispEdges; }

.link-rows { display: grid; gap: var(--u); padding: var(--u); margin: calc(8 * var(--u)) 0;
             grid-template-columns: round(down, calc((100% - 3 * var(--u)) / 2), var(--u)) 1fr; }
:root[data-tier="M"] .link-rows, :root[data-tier="L"] .link-rows {
  grid-template-columns: repeat(3, round(down, calc((100% - 5 * var(--u)) / 4), var(--u))) 1fr; }
.link-rows > li { background: var(--card); outline: var(--u) solid var(--border); }
.link-rows a { display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--u));
               min-height: max(calc(24 * var(--u)), round(up, 44px, var(--u))); padding: calc(2 * var(--u)) calc(6 * var(--u));
               color: var(--ink); text-decoration: none; font-family: "Biodex Prose", system-ui, sans-serif; }
.link-rows a .tri { color: var(--border); }
.link-rows a:focus-visible { outline: calc(2 * var(--u)) solid var(--ink); outline-offset: 0; }
.link-rows a:active { background: var(--panel); }
.footer .credit { margin-top: calc(4 * var(--u)); }

.pixel, .t8, .t16, .t24, .t32, h1, h2, h3, .h1, .h2, .h3, .label, .key-label, .scard-name, .statrow dt, .statrow dd,
.plate, .medal, .vmark, .field-label, .readout-cell, .colhead, .plan-head, .scard-tab, .rule-rows > div, .skip, .cap,
:where(p), .prose, .latin, .tlink, .credit, .plans-table th, .plans-table td { filter: opacity(1); }

* { transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }