/* Mycelium: a glass petri dish on a black bench. The interface is quiet smoked glass over the specimen:
   an editorial serif for statements, a grotesk for interface, a mono for data. Lean colors after Dasha Plesen. */
:root {
  --ink: #f2efe8;
  --ink-2: rgba(242, 239, 232, 0.72);
  --muted: rgba(242, 239, 232, 0.46);
  --faint: rgba(242, 239, 232, 0.24);
  --hair: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.18);
  --left: #4668ff;
  --lean-left: #2cd6c6;
  --center: #f4ecda;
  --lean-right: #ff54a2;
  --right: #ff3434;
  --unrated: #b2bac2;
  --negative: #96e248;
  --neutral: #6e7680;
  --positive: #ffa430;
  --signal: #ff8a5c;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: #000; color: var(--ink); font: 400 13px/1.5 var(--sans); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; transition: text-decoration-color 200ms; }
a:hover { text-decoration-color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 3px; }

/* Shared material: clear glass. A strong blur and lift on what's behind it, a faint sheen across the face, and an
   edge that catches the light at the top left and fades around the sides, rather than a flat hairline. */
.glass {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) 45%, rgba(255, 255, 255, 0.03));
  border: 0;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.07), 0 24px 70px -18px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(1.04);
  backdrop-filter: blur(26px) saturate(170%) brightness(1.04);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0.5px; pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.07) 28%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.eyebrow { margin: 0; font: 500 10px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

#dish { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; transform-origin: 50% 50%;; transition: opacity 700ms ease; }

/* ---------- Plate label ---------- */
.label { position: fixed; top: 28px; left: 32px; max-width: 380px; pointer-events: none; text-shadow: 0 0 18px #000, 0 0 4px #000; }
.label > * { pointer-events: auto; }
.label .title { margin: 6px 0 6px; font: italic 400 56px/0.92 var(--serif); letter-spacing: -0.02em; }
.specimen { margin: 6px 0 0; color: var(--ink-2); font-size: 13px; }
/* Clear glass under a hard key light, after the cube: a black body, a crisp bright lip along the top, and short
   specular streaks running round the edge. */
.pill {
  position: relative; margin-top: 16px; display: inline-flex; align-items: center; height: 30px; padding: 0 15px; border-radius: 999px;
  font-size: 12px; color: var(--ink-2); text-shadow: none;
  background: radial-gradient(90% 140% at 30% 0%, rgba(255, 255, 255, 0.09), transparent 60%), rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 0.5px rgba(255, 255, 255, 0.28),
    inset 0 0 10px rgba(255, 255, 255, 0.05), 0 10px 24px -10px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: color 200ms, box-shadow 300ms var(--ease);
}
.pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; filter: blur(0.6px);
  background: conic-gradient(from calc(200deg + var(--spin, 0deg)), transparent 0deg, rgba(255, 255, 255, 0.9) 18deg, transparent 40deg 150deg, rgba(255, 255, 255, 0.5) 168deg, transparent 186deg 260deg, rgba(255, 255, 255, 0.35) 280deg, transparent 300deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.pill:hover, .pill[aria-expanded="true"] { color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 0.5px rgba(255, 255, 255, 0.36),
    inset 0 0 14px rgba(255, 255, 255, 0.08), 0 10px 28px -10px rgba(0, 0, 0, 0.9); }

/* ---------- About: a full-page glass sheet that rises over the plate, holding the text in a block of clear glass ---------- */
@property --sweep { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --a { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.sheet {
  position: fixed; inset: 0; z-index: 8; visibility: hidden;
  background: linear-gradient(180deg, rgba(10, 11, 12, 0.78), rgba(2, 2, 3, 0.92));
  -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(100%);
  transition: transform 760ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 760ms;
}
.sheet[data-open="true"] { visibility: visible; transform: none; transition: transform 760ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s; }
/* The plate settles back and dims as the sheet comes over it. */
/* Only while the sheet moves: the intro drives the plate's transform every frame and must not be eased. */
body.sheet-moving #dish { transition: transform 760ms cubic-bezier(0.32, 0.72, 0, 1), filter 760ms ease; }
body.sheet-open #dish { transform: scale(0.94); filter: brightness(0.45); }
body.sheet-open .label, body.sheet-open .legend { opacity: 0.25; }
.sheet-close {
  position: absolute; top: 24px; right: 28px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--ink-2); background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  transition: color 200ms, transform 300ms var(--ease);
}
.sheet-close:hover { color: var(--ink); transform: rotate(90deg); }
.sheet-body { height: 100%; overflow-y: auto; display: grid; place-items: center; padding: 72px 32px; }
.cube-stage { width: min(700px, 100%); perspective: 1600px; }
.sheet[data-open="true"] .cube-stage { animation: cube-in 1100ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both; }
@keyframes cube-in {
  from { opacity: 0; transform: translateY(80px) rotateX(22deg) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* The block: thick clear walls round a black face. The walls are black glass lit hard from the upper left: a crisp
   bright lip, broad soft streaks that sweep round as the block turns, and hot glints on the bevelled corners. */
.cube {
  --wall: 26px;
  position: relative; display: grid; aspect-ratio: 1; padding: var(--wall); border-radius: 52px; color: var(--ink-2);
  background: radial-gradient(130% 100% at 20% 0%, rgba(255, 255, 255, 0.04), transparent 55%), #000;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34), inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 22px rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.8),
    0 60px 160px -30px rgba(0, 0, 0, 1), 0 0 120px -40px rgba(255, 255, 255, 0.18);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), --a 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cube-light {
  position: absolute; inset: 0; border-radius: inherit; padding: var(--wall); pointer-events: none; mix-blend-mode: screen; filter: blur(1.4px);
  /* Mostly dark glass. Narrow rays cross the wall as short hard streaks, and a few hot spots sit where the
     bevel faces the light. */
  background:
    radial-gradient(14% 4% at 26% 2%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(3% 16% at 1.5% 30%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(4% 12% at 98.5% 72%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(18% 3% at 64% 98.5%, rgba(255, 255, 255, 0.35), transparent),
    conic-gradient(from calc(205deg + var(--a) + var(--sweep)), transparent 0deg, rgba(255, 255, 255, 0.85) 4deg, transparent 8deg,
      transparent 70deg, rgba(255, 255, 255, 0.35) 73deg, transparent 76deg, transparent 128deg, rgba(255, 255, 255, 0.5) 131deg, transparent 135deg,
      transparent 196deg, rgba(255, 255, 255, 0.7) 200deg, transparent 204deg, transparent 300deg, rgba(255, 255, 255, 0.3) 303deg, transparent 306deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* A second, fainter contour halfway through the wall, the way thick glass doubles its own edge. */
.cube::after {
  content: ""; position: absolute; inset: calc(var(--wall) * 0.45); border-radius: 40px; pointer-events: none;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.sheet[data-open="true"] .cube-light { animation: sweep 1800ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both; }
@keyframes sweep { from { --sweep: -110deg; } to { --sweep: 0deg; } }
/* Hot glints where the bevel turns the corner toward the light. */
.cube-glint { position: absolute; pointer-events: none; border: 2px solid transparent; filter: blur(0.7px); mix-blend-mode: screen; transition: opacity 600ms ease; }
.g1 { top: 1px; left: 1px; width: 150px; height: 150px; border-radius: 52px 0 0 0; border-top-color: #fff; border-left-color: #fff;
  -webkit-mask: radial-gradient(circle at 18% 18%, #000 20%, transparent 62%); mask: radial-gradient(circle at 18% 18%, #000 20%, transparent 62%); }
.g2 { right: 1px; bottom: 1px; width: 130px; height: 130px; border-radius: 0 0 52px 0; border-bottom-color: rgba(255, 255, 255, 0.8); border-right-color: rgba(255, 255, 255, 0.8);
  -webkit-mask: radial-gradient(circle at 82% 82%, #000 18%, transparent 60%); mask: radial-gradient(circle at 82% 82%, #000 18%, transparent 60%); }
.g3 { top: calc(var(--wall) - 2px); right: calc(var(--wall) - 2px); width: 110px; height: 110px; border-radius: 0 28px 0 0; border-top-color: rgba(255, 255, 255, 0.7); border-right-color: rgba(255, 255, 255, 0.7);
  -webkit-mask: radial-gradient(circle at 80% 20%, #000 15%, transparent 60%); mask: radial-gradient(circle at 80% 20%, #000 15%, transparent 60%); }
.cube-face {
  /* Grows with its copy (the block's square is only a minimum), centered when there is room to spare. */
  position: relative; display: flex; flex-direction: column; justify-content: safe center; padding: 48px 52px;
  border-radius: 28px; font-size: 13.5px; line-height: 1.65;
  background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, 0.045), transparent 60%), #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 22px rgba(255, 255, 255, 0.05);
}
.cube-face h2 { margin: 10px 0 18px; font: italic 400 40px/1.02 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.cube-face p { margin: 0 0 12px; }
.cube-face .cube-sub { margin: 10px 0 6px; padding-top: 16px; border-top: 1px solid var(--hair); }
.cube-face .fine { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); font: 10.5px/1.4 var(--mono); color: var(--muted); }

/* ---------- Legend ---------- */
/* Shaped like a microscope slide: tall and narrow, near-square corners, a ruled label end, and a ground edge
   that catches light all the way around rather than only at one corner. */
.legend { position: fixed; top: 28px; right: 32px; width: 136px; padding: 0 0 24px; border-radius: 4px;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.04), inset 0 0 18px rgba(255, 255, 255, 0.025), 0 24px 70px -18px rgba(0, 0, 0, 0.7); }
.legend::before { background: linear-gradient(170deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.11) 22%, rgba(255, 255, 255, 0.09) 70%, rgba(255, 255, 255, 0.2)); }
.legend-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px 12px; color: var(--ink-2); text-align: left; cursor: default; }
.legend-chevron { display: none; transition: transform 420ms var(--ease); }
.dock .legend[data-collapsed="true"] .legend-chevron { transform: rotate(180deg); }
/* The body folds away on phones; on desktop it simply stays open. */
.legend-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 460ms var(--ease); }
.dock .legend[data-collapsed="true"] .legend-body { grid-template-rows: 0fr; }
.legend-inner { min-height: 0; overflow: hidden; transition: opacity 300ms ease; }
.dock .legend[data-collapsed="true"] .legend-inner { opacity: 0; }
.legend-sub { margin: 22px 0 0; padding: 14px 16px 0; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.09); }
.legend ol { margin: 14px 16px 0; padding: 0; list-style: none; display: grid; gap: 11px; }
/* Every section opens the same way: a full-width hairline, then its label. The plate number heads the slide. */
.legend-inner > .legend-sub:first-child { margin-top: 0; }
.legend ol + .legend-sub { margin-top: 20px; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); cursor: default; outline: none;
  transition: color 260ms ease, opacity 260ms ease; }
.legend li::before { transition: box-shadow 260ms ease, background 260ms ease; }
.legend.focusing li:not(.on) { opacity: 0.32; }
.legend li.on { color: #fff; }
.legend li.on::before { background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 0 10px rgba(255, 255, 255, 0.6); }
.legend .count { margin-left: auto; font: 500 10px/1 var(--mono); color: var(--ink-2); opacity: 0; transform: translateX(-4px); transition: opacity 220ms ease, transform 320ms var(--ease); }
.legend li.on .count { opacity: 1; transform: none; }
.legend li::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c);
}

/* ---------- Tooltip ---------- */
.tip { position: fixed; z-index: 5; width: min(320px, calc(100vw - 24px)); padding: 14px 16px 13px; border-radius: 12px; pointer-events: none; }
.tip .tip-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.tip .lean-chip { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--hair); font: 500 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.tip .lean-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.tip strong { display: block; margin: 9px 0 9px; font: 400 20px/1.15 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.tip .tip-meta { font: 10.5px/1.4 var(--mono); color: var(--muted); }

/* ---------- Dock: a slim bar that opens upward into the controls ---------- */
.dock {
  --gutter: 22px;
  position: fixed; left: 50%; bottom: 24px; z-index: 4; width: min(640px, calc(100vw - 32px));
  transform: translateX(-50%); border-radius: 4px; overflow: hidden;
}
.dock-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 520ms var(--ease); }
.dock[data-open="true"] .dock-panel { grid-template-rows: 1fr; }
.dock-panel-inner { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity 300ms ease, transform 520ms var(--ease); }
.dock[data-open="true"] .dock-panel-inner { opacity: 1; transform: none; transition-delay: 90ms; }
#search { padding: 22px var(--gutter) 0; }
#search .eyebrow { display: block; margin-bottom: 8px; }

/* The panel's hairlines run edge to edge, so the field bleeds out through the form's side padding. */
.field { display: flex; align-items: center; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px; border-bottom: 1px solid var(--hair); }
.field input {
  flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); outline: none;
  font: italic 400 30px/1.15 var(--serif); letter-spacing: -0.015em;
}
.field input::placeholder { color: var(--faint); }
.grow {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 18px; border-radius: 999px;
  background: var(--ink); color: #0a0a0a; font-weight: 500; font-size: 13px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 10px 30px -8px rgba(242, 239, 232, 0.35);
  transition: transform 200ms var(--ease), box-shadow 200ms;
}
.grow:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 14px 34px -8px rgba(242, 239, 232, 0.5); }
.grow:disabled { cursor: progress; transform: none; }
.grow-spin { display: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
.grow[aria-busy="true"] svg { display: none; }
.grow[aria-busy="true"] .grow-spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Culturing: the loader over the dimmed plate while GDELT answers ---------- */
.culturing {
  position: fixed; left: 0; right: 0; top: 0; bottom: 110px; z-index: 3; display: grid; place-content: center; justify-items: center;
  text-align: center; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}
.culturing[data-state="loading"], .culturing[data-state="error"] { opacity: 1; visibility: visible; transition: opacity 500ms ease, visibility 0s; }
#culture-orb { width: 280px; height: 280px; margin-bottom: 6px; transition: opacity 600ms ease, transform 900ms var(--ease); }
.culturing[data-state="loading"] #culture-orb { animation: orb-in 900ms var(--ease) both; }
@keyframes orb-in { from { opacity: 0; transform: scale(0.82); } }
/* On failure the orb melts away in the canvas itself; nothing to dim here. */
.culture-query { margin: 8px 0 6px; font: italic 400 34px/1.05 var(--serif); letter-spacing: -0.015em; color: var(--ink); max-width: min(560px, 86vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.culture-note { margin: 0; min-height: 20px; font-size: 13px; color: var(--muted); transition: color 300ms, opacity 260ms ease, transform 420ms var(--ease); }
.culture-note.swap { opacity: 0; transform: translateY(-4px); }
.culturing[data-state="error"] .eyebrow { color: var(--signal); }
.culturing[data-state="error"] .culture-note { color: var(--ink-2); max-width: min(420px, 86vw); }
.culture-actions { display: none; align-items: center; gap: 16px; margin-top: 18px; pointer-events: auto; }
.culturing[data-state="error"] .culture-actions { display: flex; }
.culture-actions .pill { margin: 0; }
.culture-dismiss { font-size: 12px; color: var(--muted); transition: color 200ms; }
.culture-dismiss:hover { color: var(--ink); }
/* While a new plate cultures, the old one clears away: the colony fades out, the slide slides off to the right,
   and only the title, the loader and the dock (now showing the new search) stay on the black. */
body.culturing-on #dish { opacity: 0; pointer-events: none; }
body.culturing-on .legend { opacity: 0; transform: translateX(calc(100% + 48px)); pointer-events: none; }
.dock[data-loading="true"] #play { pointer-events: none; }
.dock[data-loading="true"] #play svg { opacity: 0; }
.dock[data-loading="true"] #play::after { content: ""; grid-area: 1 / 1; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin 800ms linear infinite; }
.dock[data-loading="true"] #scrub, .dock[data-loading="true"] .timeline::after { opacity: 0; pointer-events: none; }
.dock[data-loading="true"] .timeline::before { opacity: 0; }
.dock[data-loading="true"] #clock { display: none; }
/* In place of the timeline, a loading track: a hairline rail with a glowing tide moving through it, lit in whatever
   color the loader's aura is passing through at that moment. */
.seek { display: none; position: absolute; top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); border-radius: 999px; pointer-events: none; overflow: hidden;
  background: rgba(255, 255, 255, 0.14); }
.seek::after { content: ""; position: absolute; inset: 0; width: 55%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgb(var(--aura, 242, 239, 232)) 50%, transparent);
  box-shadow: 0 0 10px 1px rgba(var(--aura, 242, 239, 232), 0.55); animation: tide 2200ms cubic-bezier(0.55, 0, 0.45, 1) infinite; }
.dock[data-loading="true"] .seek { display: block; }
@keyframes tide { from { transform: translateX(-100%); } to { transform: translateX(225%); } }
#scrub, #clock, .timeline::after, .timeline::before { transition: opacity 300ms ease; }

/* Segmented time window, after a glass toggle: one lit thumb glides to the chosen option. */
.spans { position: relative; display: flex; margin-top: 14px; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px var(--hair); }
.spans button { position: relative; z-index: 1; flex: 1; height: 30px; border-radius: 999px; font-size: 12px; color: var(--muted); transition: color 350ms var(--ease); }
.spans button:hover { color: var(--ink-2); }
.spans button[aria-checked="true"] { color: var(--ink); }
.spans-thumb {
  position: absolute; top: 3px; left: 0; height: 30px; width: var(--w, 0); border-radius: 999px; pointer-events: none;
  transform: translateX(var(--x, 0));
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 520ms cubic-bezier(0.32, 0.72, 0, 1), width 520ms cubic-bezier(0.32, 0.72, 0, 1);
}
.spans-thumb.instant { transition: none; }

/* Readout: what the plate shows, as a small specimen card. */
.readout { margin: 18px 0 0; padding: 16px var(--gutter) 14px; border-top: 1px solid var(--hair); min-height: 20px; }
.readout dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin: 0; }
.readout dt { font: 500 9.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.readout dd { margin: 4px 0 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Lean and headline tone side by side, each a proportion bar over its counts. */
#stats:has(.breakdown) { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: 28px; }
#stats > dl { grid-column: 1 / -1; }
.breakdown { margin-top: 16px; min-width: 0; }
.breakdown .eyebrow { font-size: 9.5px; }
.leanbar { display: flex; height: 4px; margin: 8px 0 10px; gap: 2px; }
.leanbar span { position: relative; min-width: 3px; background: var(--c); box-shadow: 0 0 10px -2px var(--c); outline: none;
  transition: background 260ms ease, box-shadow 260ms ease; }
.leanbar span:first-child { border-radius: 999px 0 0 999px; }
.leanbar span:last-child { border-radius: 0 999px 999px 0; }
.leanbar span:only-child { border-radius: 999px; }
/* A taller invisible hit area, so a 4px band is easy to land on. */
.leanbar span::after { content: ""; position: absolute; inset: -9px -1px; }
.focused .leanbar span:not(.on) { background: rgba(255, 255, 255, 0.13); box-shadow: none; }
.focused .leanbar span.on { box-shadow: 0 0 12px -1px var(--c); }
/* A fixed-height line, so swapping the hint for a reading never changes the dock's height. */
.leanfocus { display: flex; align-items: center; height: 17px; margin: 0; overflow: hidden; white-space: nowrap; font: 11px/17px var(--mono); color: var(--muted); }
.leanfocus .hint { color: var(--faint); }
.leanfocus .item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); animation: focus-in 220ms var(--ease); }
.leanfocus .item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.leanfocus b { font-weight: 500; color: var(--ink); }
.leanfocus .share { color: var(--muted); }
@keyframes focus-in { from { opacity: 0; transform: translateY(2px); } }
.status { margin: 0; font-size: 13px; color: var(--ink-2); }
.status.error { color: var(--signal); }

.dock-bar { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 10px; }
.disc {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: #0a0a0a; box-shadow: 0 8px 24px -8px rgba(242, 239, 232, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: transform 200ms var(--ease);
}
.disc:hover { transform: scale(1.05); }
.disc svg { grid-area: 1 / 1; fill: currentColor; opacity: 0; transform: scale(0.6); transition: opacity 200ms, transform 300ms var(--ease); }
.disc[data-state="pause"] .i-pause, .disc[data-state="play"] .i-play, .disc[data-state="replay"] .i-replay { opacity: 1; transform: none; }
.disc .i-replay { fill: none; }

.summary { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 34%; }
.summary-query { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: italic 400 21px/1.05 var(--serif); letter-spacing: -0.01em; }
.summary-span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 9.5px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color 200ms; }
.summary:hover .summary-span { color: var(--ink-2); }

/* Timeline: a hairline with fine ticks, a lit progress and a slim thumb. */
.timeline { position: relative; flex: 1; min-width: 60px; height: 28px; }
.timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 9px; transform: translateY(-50%); pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 8px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* A soft bloom under the played part of the track, so the line reads as lit, like a filament. */
.timeline::after {
  content: ""; position: absolute; left: 0; top: 50%; width: var(--p, 0%); height: 1px; transform: translateY(-50%); pointer-events: none;
  background: var(--ink);
  box-shadow: 0 0 3px rgba(242, 239, 232, 0.45), 0 0 10px rgba(242, 239, 232, 0.16);
}
#scrub { z-index: 1; -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: pointer; }
#scrub::-webkit-slider-runnable-track {
  height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, var(--ink) 0 var(--p, 0%), rgba(255, 255, 255, 0.14) var(--p, 0%));
}
#scrub::-moz-range-track { height: 1px; background: rgba(255, 255, 255, 0.14); }
#scrub::-moz-range-progress { height: 1px; background: var(--ink); }
#scrub::-webkit-slider-thumb {
  -webkit-appearance: none; width: 4px; height: 18px; margin-top: -8.5px; border-radius: 999px; border: 0;
  background: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6), 0 0 6px rgba(242, 239, 232, 0.5), 0 0 16px 1px rgba(242, 239, 232, 0.15);
}
#scrub::-moz-range-thumb { width: 4px; height: 18px; border-radius: 999px; border: 0; background: var(--ink); box-shadow: 0 0 6px rgba(242, 239, 232, 0.5), 0 0 16px 1px rgba(242, 239, 232, 0.15); }
#clock { flex: none; min-width: 94px; text-align: right; font: 500 11px/1.3 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#clock small { display: block; font-size: 9.5px; letter-spacing: 0.1em; color: var(--muted); }

.icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hair); transition: color 200ms, box-shadow 200ms;
}
.icon:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-strong); }
.icon svg { transition: transform 500ms var(--ease); }
.dock[data-open="true"] .icon svg { transform: rotate(180deg); }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  /* On phones the header compacts to the title with About beside it and the counts beneath; the eyebrow is dropped. */
  .label { top: 16px; left: 20px; right: 20px; max-width: none; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
  .label .eyebrow { display: none; }
  .label .specimen { grid-column: 1 / -1; }
  .label .title { grid-column: 1; margin: 0 0 2px; font-size: 32px; }
  .label #about-toggle { grid-column: 2; grid-row: 1; margin-top: 0; }
  .label .specimen { margin-top: 2px; font-size: 11.5px; }
  .specimen { font-size: 12px; }
  .pill { margin-top: 12px; height: 28px; }
  /* On phones the slide lives inside the dock, as the top of one card: tap its header to fold it down into the
     controls or lift it back out. */
  .dock .legend { position: static; width: auto; padding: 0; border-radius: 0; background: none; box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.09);
    -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; opacity: 1; }
  .dock .legend::before { display: none; }
  .dock .legend-head { padding: 12px 16px 10px; cursor: pointer; }
  .dock .legend-chevron { display: block; color: var(--muted); }
  .legend ol { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 16px 0; }
  .legend-sub, .legend ol + .legend-sub { margin: 12px 0 0; padding: 10px 16px 0; }
  .legend-inner > .legend-sub:first-child { margin-top: 0; }
  .legend-inner { padding-bottom: 14px; }
  .legend li { font-size: 11px; gap: 7px; }
  body.culturing-on .dock .legend { display: none; }
  .sheet-body { place-items: start center; padding: 76px 14px 28px; }
  #culture-orb { width: 220px; height: 220px; }
  .culture-query { font-size: 28px; }
  .culturing { bottom: 110px; }
  .sheet-close { top: 18px; right: 16px; }
  .cube { --wall: 14px; aspect-ratio: auto; border-radius: 32px; }
  .g1, .g2 { border-radius: 32px 0 0 0; width: 100px; height: 100px; }
  .g2 { border-radius: 0 0 32px 0; }
  .g3 { display: none; }
  .cube::after { border-radius: 26px; }
  .cube-face { padding: 28px 22px; border-radius: 19px; font-size: 13px; }
  .cube-face h2 { font-size: 30px; }
  .dock { bottom: 16px; }
  /* Too narrow for one line: the controls sit on top and the timeline gets its own full-width row beneath. */
  .dock-bar { flex-wrap: wrap; gap: 4px 10px; height: auto; padding: 10px 10px 8px; }
  .summary { flex: 1 1 0; max-width: none; }
  .summary-query { font-size: 18px; }
  #clock { min-width: 0; }
  .timeline { order: 10; flex: 1 0 100%; margin: 0 6px; }
  .dock { --gutter: 16px; }
  #search { padding: 18px var(--gutter) 0; }
  .field input { font-size: 24px; }
  .grow { height: 36px; padding: 0 14px; }
  .spans button { font-size: 11px; }
  .readout { margin-top: 14px; padding-bottom: 12px; }
  .readout dl { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #stats:has(.breakdown) { grid-template-columns: minmax(0, 1fr); }
  .breakdown { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dock-panel, .dock-panel-inner, .spans-thumb, .cube { transition: none; }
  .sheet { transform: none; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .sheet[data-open="true"] { opacity: 1; transition: opacity 200ms ease, visibility 0s; }
  .sheet[data-open="true"] .cube-stage, .sheet[data-open="true"] .cube-light { animation: none; }
}

/* ---------- Intro: cover, then the eyepiece ---------- */
.label, .legend, .dock { transition: opacity 900ms ease, transform 900ms var(--ease); }
.intro .label, .intro .legend, .intro .dock { opacity: 0; pointer-events: none; }
.intro .dock { transform: translate(-50%, 16px); }

#scope { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
#scope[hidden] { display: none; }

.cover { position: fixed; inset: 0; z-index: 6; background: #000; transition: opacity 700ms ease; }
.cover[hidden] { display: none; }
.cover.leaving { opacity: 0; pointer-events: none; }
/* The microscope sits right of center on desktop and low on phones; the copy takes the dark space opposite it. */
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 85%; }
.cover-copy { position: absolute; left: clamp(28px, 7vw, 128px); top: calc(46% - 24px); transform: translateY(-60%); max-width: 520px; animation: rise 1200ms var(--ease) both; }
.cover-copy h1 { margin: 14px 0 20px; font: italic 400 clamp(72px, 9vw, 128px)/0.86 var(--serif); letter-spacing: -0.03em; }
.cover-line { margin: 0 0 34px; max-width: 340px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.cover-actions { display: flex; align-items: center; gap: 18px; }
/* "Look inside" is the same black glass as the other pills, just larger, with a light disc for the arrow. */
.enter.pill { margin-top: 0; gap: 14px; height: 48px; padding: 0 6px 0 22px; font-weight: 500; font-size: 14px; color: var(--ink); }
.enter-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #0a0a0a;
  box-shadow: 0 0 18px -4px rgba(242, 239, 232, 0.5); transition: transform 300ms var(--ease); }
.enter:hover .enter-arrow { transform: translateX(2px); }
.enter-hint { font-size: 12px; color: var(--muted); }
.enter-hint kbd { display: inline-block; margin-left: 4px; padding: 3px 7px; border-radius: 6px; font: 500 10px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair-strong); }

@media (max-width: 720px) {
  .cover-copy { left: 24px; right: 24px; top: 12vh; transform: none; }
  .cover-copy h1 { font-size: 72px; }
  .cover-line { margin-bottom: 26px; }
}
@media (hover: none) { .enter-hint { display: none; } }
@media (orientation: portrait) { .cover img { object-position: 50% 100%; } }

/* Panels that carry reading text sit on deeper smoke so the colony behind them never fights the type. */
.dock, .tip { background-color: rgba(8, 9, 10, 0.18); }
.legend { background-color: rgba(8, 9, 10, 0.08); }

/* Capture mode (?capture): the plate alone, for recording video. */
body.capture .label, body.capture .legend, body.capture .dock, body.capture .cover, body.capture .tip,
body.capture .culturing, body.capture .sheet { display: none !important; }
/* Capture with the interface (?capture=ui): the panels stay laid out to be painted onto frames; overlays go. */
body.capture-ui .cover, body.capture-ui .tip, body.capture-ui .culturing, body.capture-ui .sheet { display: none !important; }
/* Frames are stepped on a virtual clock, so real-time CSS transitions would only lag the layout behind it. */
body.capture-ui *, body.capture-ui *::before, body.capture-ui *::after { transition: none !important; animation: none !important; }