/* ==========================================================================
   LensBug — site stylesheet
   Tokens mirror design-system/lensbug/MASTER.md in the app repo. That file
   is the source of truth; if a value changes there, change it here too.

   Dark only, by the design system's own instruction ("light mode
   not-recommended for this style"). Every colour is painted explicitly so the
   page never borrows a host background.
   ========================================================================== */

:root{
  --bg:#0D0D0D;
  --bg-deep:#000000;
  --card:#0C130E;
  --muted:#181818;
  --border:#1F1F1F;

  --green:#00FF41;
  --magenta:#FF00FF;
  --cyan:#00FFFF;
  --red:#FF3333;
  --amber:#FFB000;

  --fg:#E0E0E0;
  --fg-muted:#94A3B8;

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Orbitron","JetBrains Mono",ui-monospace,monospace;

  --gutter:clamp(1.25rem,4vw,2.5rem);
  --measure:64ch;
  --max:1160px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* scanline wash — opacity 0.1 per the effects table, non-interactive */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:200;
  opacity:0.1;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,255,65,0.16) 0px,
    rgba(0,255,65,0.16) 1px,
    transparent 1px,
    transparent 3px);
}

img{max-width:100%;display:block;}

a{color:var(--green);text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--gutter);
}

/* ---------- shared type ------------------------------------------------ */

.eyebrow{
  font-size:0.6875rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--green);
  margin:0;
}

h1,h2,h3{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:0.03em;
  text-wrap:balance;
  margin:0;
}

h1{font-weight:900;font-size:clamp(2.25rem,6.5vw,4.25rem);line-height:1.02;}
h2{font-weight:900;font-size:clamp(1.65rem,3.6vw,2.75rem);line-height:1.1;}
h3{font-weight:700;font-size:1.0625rem;letter-spacing:0.06em;}

p{margin:0;}
.lede{color:var(--fg-muted);max-width:var(--measure);font-size:1.125rem;}

/* ---------- nav -------------------------------------------------------- */

.nav{
  position:sticky;
  top:0;
  z-index:150;
  background:rgba(13,13,13,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}

.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:1rem var(--gutter);
  display:flex;
  align-items:center;
  gap:2rem;
}

.wordmark{
  font-family:var(--display);
  font-weight:900;
  font-size:1rem;
  letter-spacing:0.14em;
  color:var(--fg);
  text-transform:uppercase;
}
.wordmark:hover{text-decoration:none;color:var(--green);}
.wordmark b{color:var(--green);font-weight:900;}

.nav-links{
  display:flex;
  gap:1.75rem;
  margin-left:auto;
  align-items:center;
  flex-wrap:wrap;
}

.nav-links a{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.nav-links a:hover{color:var(--green);text-decoration:none;}

/* ---------- sections --------------------------------------------------- */

section{padding-block:clamp(4rem,9vw,7rem);}
.section-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:3rem;}

.rule{border:0;border-top:1px solid var(--border);margin:0;}

/* ---------- hero ------------------------------------------------------- */

.hero{padding-block:clamp(3rem,6vw,5rem) clamp(3.5rem,8vw,6.5rem);}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2.5rem,6vw,5rem);
  /* Top-aligned, not centred. The phone mock is far taller than the copy, and
     centring pushed the headline halfway down the screen behind a wall of
     empty space. */
  align-items:start;
}

/* Top-aligned, but nudged down so the headline sits against the upper third
   of the phone rather than flush with its bezel. Centring put it far too low;
   flush put it far too high. */
.hero-copy{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
  padding-top:clamp(0rem,3.5vw,3rem);
}

.hero h1 .accent{color:var(--green);}

.badges{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}

/* App Store badge slot — replace the <a> contents with Apple's official
   badge art; Apple requires their supplied asset, not a recreation. */
.badge-slot{
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  border:1px solid var(--border);
  background:var(--card);
  padding:0.75rem 1.25rem;
  color:var(--fg);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.badge-slot:hover{border-color:var(--green);color:var(--green);text-decoration:none;}

.hero-meta{
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.hero-meta b{color:var(--cyan);font-weight:500;}

/* ---------- phone frame + live filter demo ----------------------------- */

.phone{
  position:relative;
  aspect-ratio:1290/2796;
  max-width:330px;
  margin-inline:auto;
  width:100%;
  background:var(--bg-deep);
  border:1px solid var(--border);
  overflow:hidden;
}

.phone-shot{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:filter 220ms ease;
}

/* viewfinder corner ticks — brackets are reserved for exactly this */
.phone::before,.phone::after{
  content:"";
  position:absolute;
  width:22px;height:22px;
  border-color:var(--green);
  opacity:0.5;
  z-index:2;
  pointer-events:none;
}
.phone::before{top:12px;left:12px;border-top:1px solid;border-left:1px solid;}
.phone::after{bottom:12px;right:12px;border-bottom:1px solid;border-right:1px solid;}

.filter-strip{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:center;
  margin-top:1.5rem;
}

.filter-strip button{
  font-family:var(--mono);
  font-size:0.6875rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--fg-muted);
  padding:0.3rem 0.15rem;
  cursor:pointer;
  transition:color 150ms ease;
}
.filter-strip button:hover{color:var(--fg);}
/* selection = green text + 2px green underline. No boxes, no glow. */
.filter-strip button[aria-pressed="true"]{
  color:var(--green);
  border-bottom-color:var(--green);
}

.demo-note{
  text-align:center;
  font-size:0.6875rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--fg-muted);
  margin-top:1rem;
}

/* ---------- feature rows ----------------------------------------------- */

.feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,4.5rem);
  align-items:center;
}
.feature.flip .feature-media{order:-1;}
.feature-copy{display:flex;flex-direction:column;gap:1.25rem;}

.shot-slot{
  aspect-ratio:1290/2796;
  max-width:300px;
  width:100%;
  margin-inline:auto;
  background:var(--card);
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  color:var(--border);
  font-size:0.6875rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
}

.pill{
  align-self:flex-start;
  font-size:0.625rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:0.2rem 0.6rem;
  border:1px solid currentColor;
}
.pill.pro{color:var(--magenta);}
.pill.free{color:var(--green);}

/* ---------- filter catalogue ------------------------------------------- */

.filter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}

.filter-card{
  background:var(--card);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}

.filter-card .row{display:flex;align-items:baseline;gap:0.75rem;}

.filter-card .name{
  font-family:var(--display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.06em;
  color:var(--fg);
}
.filter-card .code{
  font-size:0.6875rem;
  letter-spacing:0.1em;
  color:var(--cyan);
  margin-left:auto;
}
.filter-card p{font-size:0.875rem;color:var(--fg-muted);line-height:1.6;}
.filter-card .param{
  font-size:0.625rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--fg-muted);
  margin-top:auto;
  padding-top:0.75rem;
}
.filter-card .param b{color:var(--amber);font-weight:500;}
.filter-card.is-pro .name{color:var(--magenta);}

/* ---------- tier table -------------------------------------------------- */

.tiers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}

.tier{
  background:var(--card);
  border:1px solid var(--border);
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.tier.is-pro{border-color:rgba(255,0,255,0.35);}

.tier h3{font-size:1.25rem;}
.tier.is-pro h3{color:var(--magenta);}
.tier.is-free h3{color:var(--green);}

.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.75rem;}
.tier li{
  font-size:0.9375rem;
  color:var(--fg-muted);
  padding-left:1.5rem;
  position:relative;
  line-height:1.55;
}
.tier li::before{
  content:"›";
  position:absolute;
  left:0;
  color:var(--green);
}
.tier.is-pro li::before{color:var(--magenta);}
.tier .price{
  font-family:var(--display);
  font-weight:700;
  font-size:0.8125rem;
  letter-spacing:0.1em;
  color:var(--fg-muted);
  text-transform:uppercase;
}

/* ---------- privacy band ------------------------------------------------ */

.band{
  background:var(--card);
  border-block:1px solid var(--border);
}
.band .inner{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(3rem,7vw,5rem) var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.band ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.85rem;}
.band li{font-size:0.9375rem;color:var(--fg-muted);padding-left:1.5rem;position:relative;}
.band li::before{content:"✓";position:absolute;left:0;color:var(--green);}

/* ---------- article pages (privacy / support) --------------------------- */

.doc{max-width:min(72ch,100%);margin-inline:auto;padding-block:clamp(3rem,7vw,5rem);}
.doc h2{margin-top:3rem;margin-bottom:1rem;font-size:1.35rem;}
.doc h2:first-of-type{margin-top:2rem;}
.doc p,.doc li{color:var(--fg-muted);}
.doc p+p{margin-top:1rem;}
.doc ul{padding-left:1.25rem;display:flex;flex-direction:column;gap:0.6rem;margin:1rem 0;}
.doc strong{color:var(--fg);}
.doc .updated{
  font-size:0.6875rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-muted);
}

.faq{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);margin-top:2rem;}
.faq details{background:var(--card);padding:1.25rem 1.5rem;}
.faq summary{
  cursor:pointer;
  font-family:var(--display);
  font-weight:700;
  font-size:0.9375rem;
  letter-spacing:0.04em;
  color:var(--fg);
  text-transform:uppercase;
}
.faq summary::marker{color:var(--green);}
.faq details[open] summary{color:var(--green);}
.faq details p{margin-top:0.85rem;font-size:0.9375rem;}

/* ---------- footer ------------------------------------------------------ */

footer{border-top:1px solid var(--border);padding-block:3rem;}
.footer-inner{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--gutter);
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem 2.5rem;
  align-items:center;
}
.footer-inner a{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.footer-inner a:hover{color:var(--green);text-decoration:none;}
.copyright{
  margin-left:auto;
  font-size:0.75rem;
  letter-spacing:0.08em;
  color:var(--fg-muted);
}

/* ---------- placeholders (delete once real assets land) ----------------- */

.placeholder{
  background:
    linear-gradient(135deg,transparent 48%,var(--border) 48%,var(--border) 52%,transparent 52%),
    var(--muted);
  background-size:14px 14px,auto;
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width:860px){
  .hero-grid,.feature,.band .inner{grid-template-columns:1fr;}
  .phone{max-width:290px;}
  .hero-copy{padding-top:0;}
  .feature.flip .feature-media{order:0;}
  .nav-inner{flex-wrap:wrap;gap:1rem;}
  .nav-links{margin-left:0;gap:1.25rem;}
  .copyright{margin-left:0;width:100%;}
}

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

/* ---------- filter card hover: each card previews its own look ----------- */

.filter-card{position:relative;overflow:hidden;isolation:isolate;transition:background 260ms ease;}
@media (hover:hover){.filter-card:hover{background:#070c08;}}
.filter-card > *{position:relative;z-index:1;}

/* The wash sits behind the text and fades in on hover. Capped well below
   full strength so the card stays readable rather than becoming a swatch. */
.filter-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  transition:opacity 260ms ease;
  pointer-events:none;
}
@media (hover:hover){
  .filter-card:hover::before{opacity:0.38;}
}
.filter-card:focus-within::before{opacity:0.38;}

/* RAW does nothing to the image, so it barely does anything here either */
[data-filter-id="none"]::before{
  background:linear-gradient(160deg,rgba(224,224,224,0.16),transparent 70%);
}
/* green phosphor wash behind scanlines */
[data-filter-id="terminal"]::before{
  background:
    repeating-linear-gradient(to bottom,rgba(0,255,65,0.30) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 50% 38%,rgba(0,255,65,0.45),transparent 72%);
}
/* channels torn apart into offset bands */
[data-filter-id="glitch"]::before{
  background:repeating-linear-gradient(to bottom,
    rgba(255,0,255,0.34) 0 3px,transparent 3px 9px,
    rgba(0,255,255,0.34) 9px 12px,transparent 12px 24px);
}
/* chunky blocks */
[data-filter-id="pixel"]::before{
  background:conic-gradient(from 90deg at 50% 50%,
    rgba(0,255,255,0.34) 0 25%,transparent 0 50%,
    rgba(0,255,255,0.34) 0 75%,transparent 0);
  background-size:16px 16px;
}
/* no grey at all */
[data-filter-id="threshold"]::before{
  background:linear-gradient(104deg,rgba(255,255,255,0.42) 0 46%,rgba(0,0,0,0.92) 46%);
}
/* heat ramp across the luminance range */
[data-filter-id="thermal"]::before{
  background:linear-gradient(118deg,#1a0033,#2b6cff 20%,#00d5a0 40%,
    #ff2fb0 62%,#ff7a00 80%,#ffe000);
}
/* the signal is dying */
[data-filter-id="crtscan"]::before{
  background:repeating-linear-gradient(to bottom,
    rgba(0,255,80,0.34) 0 1px,rgba(0,0,0,0.42) 1px 3px);
}
/* vaporwave */
[data-filter-id="synthskull"]::before{
  background:linear-gradient(158deg,#b400ff,#ff2fb0 55%,#2b6cff);
}
/* vertical neon bars */
[data-filter-id="neonbars"]::before{
  background:repeating-linear-gradient(to right,
    rgba(255,0,180,0.46) 0 6px,transparent 6px 15px,
    rgba(0,229,255,0.46) 15px 21px,transparent 21px 32px);
}
/* iridescent sheen */
[data-filter-id="hologram"]::before{
  background:linear-gradient(115deg,rgba(40,120,255,0.5),rgba(0,255,255,0.45) 28%,
    rgba(180,0,255,0.45) 54%,rgba(255,0,180,0.45) 78%,rgba(0,255,150,0.45));
}
/* the four DMG greens, in order */
[data-filter-id="gameboy"]::before{
  background:linear-gradient(to bottom,rgba(155,188,15,0.62) 0 25%,rgba(139,172,15,0.62) 25% 50%,
    rgba(48,98,48,0.85) 50% 75%,rgba(15,56,15,0.9) 75%);
}
/* dot matrix */
[data-filter-id="ledgrid"]::before{
  background:radial-gradient(circle at center,rgba(255,60,60,0.6) 22%,transparent 24%);
  background-size:11px 11px;
}
/* foliage red under a cyan sky */
[data-filter-id="infra"]::before{
  background:linear-gradient(to bottom,rgba(0,180,255,0.5) 0 36%,rgba(255,30,110,0.55) 36%);
}
/* blown highlight falling off into a vignette */
[data-filter-id="bristle"]::before{
  background:radial-gradient(ellipse at 50% 36%,rgba(255,255,255,0.55),
    rgba(255,120,190,0.45) 44%,rgba(90,20,60,0.7));
}
/* let the hardware fail */
[data-filter-id="circuitbent"]::before{
  background:
    repeating-linear-gradient(115deg,rgba(255,176,0,0.44) 0 4px,transparent 4px 11px),
    repeating-linear-gradient(to bottom,rgba(255,0,180,0.38) 0 2px,transparent 2px 13px);
}

@media (prefers-reduced-motion:reduce){
  .filter-card::before{transition:none;}
}

/* ---------- sign-off tile in the filter grid ---------------------------- */

.mark-tile{
  position:relative;
  display:grid;
  place-items:center;
  align-content:center;
  gap:1.1rem;
  min-height:190px;
  /* A containment field rather than a blank card: a faint measuring grid, a
     glow under the specimen, and a beam that sweeps it. */
  background:
    radial-gradient(ellipse at 50% 42%,rgba(0,255,65,0.11),transparent 64%),
    repeating-linear-gradient(to right,rgba(0,255,65,0.05) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(to bottom,rgba(0,255,65,0.05) 0 1px,transparent 1px 13px),
    var(--card);
  overflow:hidden;
}
.mark-tile::before{content:none;}          /* no hover wash on this one */

/* the sweep */
.mark-tile::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:36%;
  pointer-events:none;
  background:linear-gradient(to bottom,
    transparent,
    rgba(0,255,65,0.14) 42%,
    rgba(0,255,255,0.11) 58%,
    transparent);
  animation:mark-sweep 4.6s linear infinite;
}
@keyframes mark-sweep{from{top:-38%;}to{top:104%;}}

/* cycling readout under the specimen */
.mark-status{
  position:relative;
  width:100%;
  height:1.1em;
  text-align:center;
  font-size:0.625rem;
  font-weight:700;
  letter-spacing:0.14em;
  color:var(--fg-muted);
}
.mark-status span{
  position:absolute;
  inset:0;
  opacity:0;
  animation:mark-readout 10.5s infinite;
}
.mark-status span:nth-child(2){animation-delay:3.5s;}
.mark-status span:nth-child(3){animation-delay:7s;}
@keyframes mark-readout{
  0%,1%{opacity:0;}
  3%,29%{opacity:1;}
  32%,100%{opacity:0;}
}

/* leaning in speeds the whole thing up */
@media (hover:hover){
  .mark-tile:hover::after{animation-duration:1.9s;}
  .mark-tile:hover .ch-m,
  .mark-tile:hover .ch-c,
  .mark-tile:hover .ch-g{animation-duration:1.5s;}
}

.mark-beetle{
  position:relative;
  width:74px;
  height:94px;
}
.mark-beetle svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.ch-m{color:var(--magenta);}
.ch-c{color:var(--cyan);}
.ch-g{color:var(--green);}

/* Three bursts a cycle rather than one, on a shorter loop. Still punctuated
   rather than continuous, because a constant wobble reads as a loose element
   instead of a failing signal. */
@keyframes mark-ch-m{
  0%,16%,25%,50%,59%,80%,91%,100%{transform:translateX(0);opacity:0.5;}
  18%{transform:translateX(-6px);opacity:0.95;}
  21%{transform:translateX(4px);}
  52%{transform:translateX(5px);opacity:0.85;}
  56%{transform:translateX(-3px);}
  82%{transform:translateX(-7px);opacity:1;}
  86%{transform:translateX(3px);}
}
@keyframes mark-ch-c{
  0%,16%,25%,50%,59%,80%,91%,100%{transform:translateX(0);opacity:0.5;}
  18%{transform:translateX(6px);opacity:0.95;}
  22%{transform:translateX(-4px);}
  53%{transform:translateX(-5px);opacity:0.85;}
  57%{transform:translateX(3px);}
  83%{transform:translateX(7px);opacity:1;}
  87%{transform:translateX(-3px);}
}
/* the green copy tears into bands rather than sliding */
@keyframes mark-ch-g{
  0%,17%,24%,51%,58%,81%,90%,100%{clip-path:inset(0 0 0 0);transform:translateX(0);}
  19%{clip-path:inset(26% 0 44% 0);transform:translateX(7px);}
  22%{clip-path:inset(58% 0 16% 0);transform:translateX(-5px);}
  54%{clip-path:inset(8% 0 68% 0);transform:translateX(-6px);}
  56%{clip-path:inset(70% 0 6% 0);transform:translateX(4px);}
  84%{clip-path:inset(38% 0 34% 0);transform:translateX(8px);}
  88%{clip-path:inset(0 0 62% 0);transform:translateX(-4px);}
}
.ch-m{animation:mark-ch-m 3.4s infinite;}
.ch-c{animation:mark-ch-c 3.4s infinite;}
.ch-g{animation:mark-ch-g 3.4s infinite;}

@media (prefers-reduced-motion:reduce){
  .ch-m,.ch-c,.ch-g{animation:none;}
  .ch-m,.ch-c{opacity:0.45;}
  .mark-tile::after{animation:none;opacity:0;}
  .mark-status span{animation:none;opacity:0;}
  .mark-status span:first-child{opacity:1;}
}

/* ---------- feature deck: four panels in one slot ----------------------- */

/* Without JS the panels simply stack, which is what the page used to be.
   The script adds .is-deck and only then do they become a slider, so the
   content is never trapped behind an interaction that failed to load. */
.deck-track{display:flex;flex-direction:column;gap:clamp(3rem,7vw,5rem);}
.deck-head,.deck-edge{display:none;}

.deck.is-deck .deck-head{
  display:flex;
  align-items:baseline;
  gap:1.5rem;
  border-bottom:1px solid var(--border);
  padding-bottom:1rem;
  margin-bottom:clamp(2rem,5vw,3.25rem);
}
.deck-tabs{display:flex;flex-wrap:wrap;gap:1.75rem;}
.deck-tabs button{
  font-family:var(--mono);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--fg-muted);
  padding:0.25rem 0.1rem;
  cursor:pointer;
  transition:color 150ms ease;
}
.deck-tabs button:hover{color:var(--fg);}
/* selection is green text on a 2px green underline, as everywhere else */
.deck-tabs button[aria-selected="true"]{color:var(--green);border-bottom-color:var(--green);}

.deck-count{
  margin-left:auto;
  font-size:0.75rem;
  letter-spacing:0.14em;
  color:var(--fg-muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.deck-count b{color:var(--cyan);font-weight:500;}

.deck.is-deck .deck-stage{position:relative;overflow:hidden;}
.deck.is-deck .deck-track{
  flex-direction:row;
  gap:0;
  transition:transform 440ms cubic-bezier(0.4,0,0.2,1);
  align-items:start;
}
.deck.is-deck .deck-panel{
  flex:0 0 100%;
  min-width:100%;
  /* keeps the copy clear of the edge controls sitting over the stage */
  padding-inline:var(--deck-edge,clamp(48px,6vw,88px));
}

/* Full-height targets on both sides. A slider that moves sideways should be
   driven from its sides; small arrows parked underneath read as pagination. */
.deck.is-deck .deck-edge{
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:0;
  bottom:0;
  width:var(--deck-edge,clamp(48px,6vw,88px));
  z-index:3;
  border:0;
  cursor:pointer;
  font-family:var(--mono);
  font-size:1.9rem;
  line-height:1;
  color:var(--fg-muted);
  transition:color 180ms ease,background 180ms ease;
}
.deck-edge--prev{left:0;background:linear-gradient(to right,rgba(13,13,13,0.9),rgba(13,13,13,0));}
.deck-edge--next{right:0;background:linear-gradient(to left,rgba(13,13,13,0.9),rgba(13,13,13,0));}
.deck-edge:hover{color:var(--green);}
.deck-edge--prev:hover{background:linear-gradient(to right,rgba(0,255,65,0.09),rgba(13,13,13,0));}
.deck-edge--next:hover{background:linear-gradient(to left,rgba(0,255,65,0.09),rgba(13,13,13,0));}

/* On a narrow screen the edges would eat the copy, and the tabs are right
   there anyway, so they step aside. */
@media (max-width:700px){
  .deck.is-deck .deck-edge{display:none;}
  .deck.is-deck .deck-panel{padding-inline:0;}
}

@media (prefers-reduced-motion:reduce){
  .deck.is-deck .deck-track{transition:none;}
}

/* ---------- ground behind the filter index ------------------------------ */

#filters{
  position:relative;
  /* A measuring field the specimens sit on, rather than flat page black. */
  background:
    radial-gradient(ellipse 85% 55% at 50% 42%,rgba(0,255,65,0.07),transparent 72%),
    repeating-linear-gradient(to right,rgba(0,255,65,0.045) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(to bottom,rgba(0,255,65,0.045) 0 1px,transparent 1px 48px),
    var(--bg);
}
/* fade the field out at the top and bottom so it does not cut hard across
   the sections either side of it */
#filters::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,
    var(--bg) 0,
    rgba(13,13,13,0) 14%,
    rgba(13,13,13,0) 86%,
    var(--bg) 100%);
}
#filters > *{position:relative;z-index:1;}

/* cards go slightly translucent so the field reads behind them */
.filter-card{background:rgba(12,19,14,0.88);}
@media (hover:hover){.filter-card:hover{background:rgba(7,12,8,0.94);}}
.mark-tile{background:
  radial-gradient(ellipse at 50% 42%,rgba(0,255,65,0.11),transparent 64%),
  repeating-linear-gradient(to right,rgba(0,255,65,0.05) 0 1px,transparent 1px 13px),
  repeating-linear-gradient(to bottom,rgba(0,255,65,0.05) 0 1px,transparent 1px 13px),
  rgba(12,19,14,0.88);}