@import url("instillious.css?v=20261021");   /* the companion's dock — shared with the console */
/* XFINALE — The Internet Artist Index
   The IMDb formula wearing the station's skin: one dark warm field, amber
   phosphor for signal, red for on-air. Normal document flow — this page must
   compose identically on every machine (the console's fragility is why it
   moved to /console). Layout law: every grid track minmax(0,1fr), every
   flex/grid child min-width:0 — marquee-class content must never inflate
   the page (the mobile-blowout lesson). */

/* tokens.css locks the viewport for the console — the index scrolls */
html:has(body.site) { height: auto; }
body.site {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── atmosphere: the cosmos as flavor, not the map ── */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(255, 176, 32, 0.10), transparent 62%),
    radial-gradient(900px 600px at 8% 112%, rgba(255, 80, 48, 0.07), transparent 60%),
    var(--space-void);
}
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 208, 138, 0.022) 3px 4px);
  pointer-events: none;
}

/* ───────────────────────── TOP BAR ───────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) clamp(var(--s-3), 4vw, var(--s-6));
  background: color-mix(in srgb, var(--space-void) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--space-line);
  min-width: 0;
}
.topbar__brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.05;
  min-width: 0;
}
.topbar__x {
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: 0.18em;
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
}
.topbar__pe {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.topbar__nav {
  display: flex;
  gap: clamp(var(--s-2), 2vw, var(--s-4));
  margin-left: auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar__nav::-webkit-scrollbar { display: none; }
.topbar__nav a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  padding: var(--s-1) 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.topbar__nav a:hover { color: var(--neon-cyan-soft); border-color: var(--neon-cyan); }
.topbar__right { display: flex; align-items: center; gap: var(--s-2); }
.topbar__lang {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.55rem;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--space-line-bright);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.topbar__lang:hover { color: var(--neon-cyan-soft); border-color: var(--neon-cyan); }
.topbar__lang[aria-pressed="true"] { background: var(--neon-cyan); color: #1a1002; border-color: var(--neon-cyan); }
.topbar__console {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--neon-red-soft);
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(255, 80, 48, 0.45);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.topbar__console:hover { color: #fff; border-color: var(--neon-red); box-shadow: var(--glow-red); }

/* ───────────────────────── HERO ───────────────────────── */
.hero {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(var(--s-6), 9vh, var(--s-7)) var(--s-4) var(--s-6);
  text-align: center;
  min-width: 0;
}
.hero__kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--neon-red-soft);
  margin: 0 0 var(--s-3);
}
.hero__title {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0 0 var(--s-3);
  color: var(--ink);
  text-wrap: balance;
}
.hero__title br { display: none; }
@media (min-width: 640px) { .hero__title br { display: block; } }
.hero__sub {
  max-width: 560px;
  margin: 0 auto var(--s-5);
  color: var(--ink-dim);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.45;
  text-wrap: balance;
}

.hero__search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 620px;
  margin: 0 auto;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  background: var(--space-deep);
  border: 1px solid var(--space-line-bright);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  min-width: 0;
}
.hero__search:focus-within { border-color: var(--neon-cyan); box-shadow: var(--glow-cyan), 0 8px 40px rgba(0,0,0,0.5); }
.hero__search svg { color: var(--ink-faint); flex: none; }
.hero__search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.2rem);
}
.hero__search input::placeholder { color: var(--ink-faint); }
.hero__search button {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.62rem 1.1rem;
  background: var(--neon-cyan);
  color: #1a1002;
  border: 0;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast);
}
.hero__search button:hover { box-shadow: var(--glow-cyan); transform: translateY(-1px); }
.hero__search button:active { transform: translateY(0); }

.hero__results {
  list-style: none;
  max-width: 620px;
  margin: var(--s-2) auto 0;
  padding: var(--s-1);
  text-align: left;
  background: var(--space-panel);
  border: 1px solid var(--space-line-bright);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.hero__results a {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.hero__results a:hover, .hero__results a:focus-visible { background: var(--space-line); }
.hero__results img, .hero__results .mono-ava {
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none;
}
.hero__results .r-meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: auto;
  white-space: nowrap;
}
.hero__results .r-none { display: block; padding: var(--s-2); color: var(--ink-dim); }
.hero__results .r-none a { display: inline; padding: 0; color: var(--neon-cyan); text-decoration: underline; }

.hero__secondary { margin-top: var(--s-4); }
.hero__browse {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neon-cyan-soft);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 176, 32, 0.4);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.hero__browse:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.hero__phrase {
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.hero__count {
  margin: var(--s-4) 0 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero__count b { color: var(--neon-cyan); font-weight: 700; }

/* ═══════════ ELLIOT — the guide who keeps the front door ═══════════
   The tube sits beside the copy, not above it: the visitor is greeted by a
   face at eye level, and the one input line below is both the creator search
   and the question he answers. */
.hero--host {
  max-width: 1020px;
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  padding-bottom: var(--s-5);
}
@media (min-width: 880px) {
  .hero--host {
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: center;
    gap: clamp(var(--s-4), 4vw, var(--s-6));
    text-align: left;
    justify-items: stretch;
  }
}
.hero--host .hero__title {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem);
  margin-bottom: var(--s-3);
}
.hero--host .hero__search,
.hero--host .hero__results { margin-inline: auto; }
.host__body { min-width: 0; width: 100%; }

/* ── the cabinet ── */
.host__stage { width: min(264px, 72vw); }
.host__tube {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 28%, #241708, #120a04 56%, var(--screen-bg));
  border: 1px solid var(--space-line-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 50px -22px rgba(0, 0, 0, 0.95),
    var(--glow-soft);
}
/* ── INSTILLIOUS: three portraits stacked, one raised per state ── */
.host__pic {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 260ms var(--ease-out-expo);
}
.host__pic--idle { opacity: 1; }
/* think/talk sit above idle in the DOM — raising one simply covers the calm face */
.host[data-state="listening"] .host__pic--think,
.host[data-state="thinking"] .host__pic--think { opacity: 1; }
.host[data-state="talking"] .host__pic--talk { opacity: 1; }

/* idle — he breathes in the water */
.host[data-state="idle"] .host__pic--idle { animation: host-float 7s ease-in-out infinite; }
@keyframes host-float { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.015) translateY(-2px); } }

/* thinking — the tube's phosphor searches while he considers */
.host[data-state="thinking"] .host__tube::after,
.host[data-state="listening"] .host__tube::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, transparent 42%, rgba(255, 176, 32, 0.16) 50%, transparent 58%);
  animation: host-scan 1.6s ease-in-out infinite;
}
@keyframes host-scan { 0%, 100% { transform: translateY(-42%); } 50% { transform: translateY(42%); } }

/* talking — he brightens and leans in on every sentence */
.host[data-state="talking"] .host__pic--talk { animation: host-talk 0.5s ease-in-out infinite alternate; }
@keyframes host-talk { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.03); filter: brightness(1.14); } }

/* ── the glass ── */
.host__glass { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.host__glass--scan {
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px);
  opacity: 0.5;
}
.host__glass--glare { background: radial-gradient(120% 80% at 22% 8%, rgba(255, 226, 176, 0.16), transparent 58%); }
.host__glass--vignette { box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.62); }

/* ── the nameplate ── */
.host__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.host__plate b { color: var(--ink); font-weight: 700; letter-spacing: 0.22em; }
.host__dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}
.host[data-state="thinking"] .host__dot {
  background: var(--neon-red);
  box-shadow: 0 0 8px var(--neon-red);
  animation: host-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes host-pulse { from { opacity: 0.35; } to { opacity: 1; } }

/* ── his line ── */
.host__say {
  min-height: 3.2em;
  max-width: 46ch;
  margin: 0 auto var(--s-4);
  color: var(--phosphor);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.4;
  text-wrap: pretty;
  text-shadow: 0 0 18px rgba(255, 208, 138, 0.18);
}
.host[data-state="talking"] .host__say::after,
.host[data-state="thinking"] .host__say::after {
  content: "▌";
  margin-left: 1px;
  color: var(--neon-cyan);
  animation: host-caret 0.7s steps(1) infinite;
}
@keyframes host-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── the free questions: answered from the page, never from the archive ── */
.host__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  margin-top: var(--s-3);
}
.host__chip {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  padding: 0.46rem 0.8rem;
  color: var(--ink-dim);
  background: transparent;
  border: 1px dashed var(--space-line-bright);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.host__chip:hover, .host__chip:focus-visible {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  border-style: solid;
  background: rgba(255, 176, 32, 0.06);
}

/* ── the archive row, at the bottom of the results list ── */
.hero__results .r-ask {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--neon-cyan);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
}
.hero__results .r-ask:hover, .hero__results .r-ask:focus-visible { background: var(--space-line); }
.hero__results .r-ask svg { flex: none; width: 17px; height: 17px; }

@media (min-width: 880px) {
  .hero--host .hero__search,
  .hero--host .hero__results { margin-inline: 0; }
  .host__say { margin-inline: 0; }
  .host__chips, .host__plate { justify-content: flex-start; }
}

/* the calm cut: nothing on his face moves, but he still speaks */
@media (prefers-reduced-motion: reduce) {
  .host__pic, .host__dot, .host__say::after { animation: none !important; }
  .host[data-state="thinking"] .host__tube::after,
  .host[data-state="listening"] .host__tube::after { animation: none; opacity: 0.5; }
}

/* ───────────────────────── BANDS ───────────────────────── */
.band {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--s-6) clamp(var(--s-3), 4vw, var(--s-5));
  min-width: 0;
}
.band__title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0 0 var(--s-1);
  color: var(--ink);
}
.band__title::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.45em;
  border-radius: 2px;
  background: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
  transform: rotate(45deg);
}
.band__note {
  margin: 0 0 var(--s-4);
  color: var(--ink-faint);
  font-weight: 300;
}

/* ── today's pattern teaser card ── */
.pattern-card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  background: linear-gradient(120deg, rgba(255, 80, 48, 0.10), rgba(255, 176, 32, 0.06) 55%, transparent);
  border: 1px solid rgba(255, 80, 48, 0.35);
  border-radius: var(--radius);
  min-width: 0;
}
.pattern-card__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon-red-soft);
}
.pattern-card__label::before {
  content: "●";
  color: var(--on-air);
  margin-right: 0.5em;
  animation: pc-pulse 2.2s ease-in-out infinite;
}
@keyframes pc-pulse { 50% { opacity: 0.35; } }
.pattern-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.pattern-card__title:hover { color: var(--neon-cyan-soft); }
.pattern-card__subjects {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

/* ── signals feed ── */
.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--space-line);
  border: 1px solid var(--space-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.feed li { min-width: 0; background: var(--space-deep); }
.feed a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-fast);
  min-width: 0;
}
.feed a:hover { background: var(--space-panel); }
.feed img, .feed .mono-ava { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.feed .f-body { min-width: 0; }
.feed .f-who {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  display: block;
  margin-bottom: 2px;
}
.feed .f-what {
  display: block;
  color: var(--ink-dim);
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── artist rows (the IMDb shelf) ── */
.rowset { margin-bottom: var(--s-5); min-width: 0; }
.rowset__h {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-cyan-soft);
  margin: 0 0 var(--s-2);
}
.rowset__n { color: var(--ink-faint); letter-spacing: 0.08em; }
.row {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  padding: var(--s-1) 2px var(--s-3);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--space-line-bright) transparent;
  min-width: 0;
}
.card {
  flex: 0 0 148px;
  min-width: 0;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--ink);
  background: var(--space-deep);
  border: 1px solid var(--space-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--neon-cyan);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), var(--glow-soft);
}
.card__img { position: relative; aspect-ratio: 3 / 4; background: var(--space-panel); }
.card__img img, .card__img .mono-ava { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__lvl {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(10, 6, 4, 0.82);
  color: var(--neon-cyan);
  border: 1px solid rgba(255, 176, 32, 0.4);
}
.card__body { padding: var(--s-2) var(--s-2) var(--s-3); }
.card__name {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card__class {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the procedural monogram for artists without an approved portrait */
.mono-ava {
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--space-panel), var(--space-line));
  color: var(--neon-cyan-soft);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  text-shadow: var(--glow-cyan);
}

/* ───────────────────────── PLOT ENGINE ───────────────────────── */
.band--engine {
  background: linear-gradient(180deg, transparent, rgba(255, 176, 32, 0.03) 30%, transparent);
  border-top: 1px solid var(--space-line);
  border-bottom: 1px solid var(--space-line);
  max-width: none;
}
.band--engine > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.engine__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.engine__chips .chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.42rem 0.8rem;
  background: var(--space-deep);
  color: var(--ink-dim);
  border: 1px solid var(--space-line-bright);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.engine__chips .chip:hover { border-color: var(--neon-cyan); color: var(--neon-cyan-soft); }
.engine__chips .chip[aria-pressed="true"] {
  background: var(--neon-cyan);
  color: #1a1002;
  border-color: var(--neon-cyan);
  font-weight: 700;
}
.engine__go {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  background: transparent;
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.engine__go:not(:disabled):hover { background: var(--neon-cyan); color: #1a1002; box-shadow: var(--glow-cyan); }
.engine__go:disabled { opacity: 0.4; cursor: not-allowed; }
.engine__out { color: var(--ink-dim); max-width: 720px; line-height: 1.55; }
.engine__out .pattern__tag {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* today's pattern — full transmission */
.pt {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--space-deep);
  border: 1px solid var(--space-line-bright);
  border-radius: var(--radius-lg);
}
.pt__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: var(--neon-red-soft);
}
.pt__title { margin: var(--s-1) 0; font-size: var(--text-lg); }
.pt__subjects { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-dim); margin: 0 0 var(--s-3); }
.pt__instruments { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.pt-ins { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pt-ins__key {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--neon-cyan);
}
.pt-ins__body { color: var(--ink-dim); font-weight: 300; line-height: 1.5; }
.pt-ins__receipts summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pt-ins__receipts a {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--neon-cyan-soft);
  text-decoration: none;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-ins__receipts a:hover { color: var(--neon-cyan); text-decoration: underline; }
.pt__finale-go {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  padding: 0.55rem 1.1rem;
  background: transparent;
  color: var(--neon-red-soft);
  border: 1px solid rgba(255, 80, 48, 0.5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.pt__finale-go:hover { background: var(--neon-red); color: #fff; }
.pt__finale { margin-top: var(--s-3); }
.pt-finale__line {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
  font-size: var(--text-lg);
  font-weight: 300;
  margin: var(--s-2) 0;
}
.pt-finale__line--last { color: var(--neon-cyan); font-weight: 600; }
.pt-finale__line.is-on { opacity: 1; transform: none; }

/* ───────────────────────── SUBMIT ───────────────────────── */
.suggest { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); max-width: 560px; }
.suggest__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.suggest__field span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.suggest__field em { color: var(--ink-faint); font-style: normal; text-transform: none; letter-spacing: 0.02em; }
.suggest__field input {
  padding: 0.7rem 0.9rem;
  background: var(--space-deep);
  border: 1px solid var(--space-line-bright);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  min-width: 0;
}
.suggest__field input:focus { outline: 0; border-color: var(--neon-cyan); box-shadow: var(--glow-soft); }
/* the honeypot lives off-canvas; humans never see it, bots fill it */
.suggest__hp { position: absolute; left: -9999px; top: -9999px; }
.suggest__go {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  background: var(--neon-cyan);
  color: #1a1002;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-snap);
}
.suggest__go:hover { box-shadow: var(--glow-cyan); transform: translateY(-1px); }
.suggest__out { color: var(--neon-cyan-soft); font-family: var(--font-mono); font-size: 0.78rem; min-height: 1.2em; }

/* ───────────────────────── PROFILE PAGE ───────────────────────── */
.profile {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--s-4) clamp(var(--s-3), 4vw, var(--s-5));
  min-width: 0;
}
.profile__back {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
.profile__back:hover { color: var(--neon-cyan-soft); }
.profile__head {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(var(--s-4), 4vw, var(--s-6));
  align-items: start;
  margin: var(--s-4) 0 var(--s-5);
  min-width: 0;
}
.profile__portrait {
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--space-line-bright);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), var(--glow-soft);
  background: var(--space-panel);
}
.profile__portrait img, .profile__portrait .mono-ava { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile__portrait .mono-ava { font-size: 3.4rem; }
.profile__id { min-width: 0; }
.profile__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin: 0 0 var(--s-1);
}
.profile__meta .lvl {
  color: var(--neon-red-soft);
  border: 1px solid rgba(255, 80, 48, 0.45);
  border-radius: 5px;
  padding: 1px 7px;
  margin-left: 0.6em;
}
.profile__name { font-size: var(--text-xl); margin: 0 0 var(--s-2); line-height: 1.05; }
.profile__take { font-size: var(--text-lg); font-weight: 300; color: var(--ink-dim); line-height: 1.5; margin: 0 0 var(--s-4); }
.profile__links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.profile__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.85rem;
  background: var(--space-deep);
  border: 1px solid var(--space-line-bright);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  min-width: 0;
}
.profile__links a:hover { border-color: var(--neon-cyan); color: var(--neon-cyan-soft); box-shadow: var(--glow-soft); }
.profile__links b { color: var(--neon-cyan); font-weight: 700; }
.profile__links .ok { color: var(--neon-cyan); }

.profile__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--s-4);
  min-width: 0;
}
.pcell {
  padding: var(--s-4);
  background: var(--space-deep);
  border: 1px solid var(--space-line);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.pcell--wide { grid-column: 1 / -1; }
.pcell__h {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin: 0 0 var(--s-2);
}
.pcell p { margin: 0; color: var(--ink-dim); font-weight: 300; line-height: 1.55; }
.pcell__sub { font-size: var(--text-sm); color: var(--ink-faint) !important; margin-bottom: var(--s-3) !important; }
.pcell__chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }
.pcell__chips span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--space-line-bright);
  border-radius: 999px;
  color: var(--ink-faint);
}
.rlist { list-style: none; margin: 0; padding: 0; }
.rlist a {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--neon-cyan-soft);
  text-decoration: none;
  padding: 5px 0;
  border-bottom: 1px solid var(--space-line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rlist li:last-child a { border-bottom: 0; }
.rlist a:hover { color: var(--neon-cyan); }

/* video facades — one real player at a time, born on tap */
.vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--s-3);
  min-width: 0;
}
.vfacade {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--space-line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--space-panel);
  padding: 0;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-expo);
  min-width: 0;
}
.vfacade:hover { border-color: var(--neon-cyan); transform: translateY(-2px); }
.vfacade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vfacade::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10, 6, 4, 0.75) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M9 6l10 6-10 6z" fill="%23ffb020"/%3E%3C/svg%3E') center/26px no-repeat;
  border: 1px solid rgba(255, 176, 32, 0.5);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.vfacade:hover::after { transform: scale(1.1); }
.vfacade .vt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 10px 8px;
  background: linear-gradient(transparent, rgba(10, 6, 4, 0.9));
  color: var(--ink);
  font-size: 0.78rem;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vgrid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }
.profile__missing { text-align: center; color: var(--ink-dim); padding: var(--s-6) 0; }
.profile__missing a { color: var(--neon-cyan); }

/* ───────────────────────── THE VIDEO WALL (v3 front door) ───────────────────────── */
.hero--tight { padding-bottom: var(--s-4); }
.hero--tight .hero__title { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem); }
.hero--tight .hero__sub { font-size: var(--text-base); margin-bottom: var(--s-4); }

.band__head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; min-width: 0; }
.band__stamp {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.band__stamp:not(:empty)::before {
  content: "●";
  color: var(--neon-cyan);
  margin-right: 0.5em;
}
.band__empty { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.8rem; }

.vwall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--s-4) var(--s-3);
  min-width: 0;
}
.vcard { min-width: 0; }
.vcard__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--space-panel);
  border: 1px solid var(--space-line);
  transition: border-color var(--dur-fast);
}
.vcard:hover .vcard__player { border-color: var(--neon-cyan); }
.vcard__player .vfacade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; }
.vcard__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vcard__live {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--on-air);
  color: #fff;
  box-shadow: var(--glow-red);
  animation: pc-pulse 2.2s ease-in-out infinite;
}
.vcard--live .vcard__player { border-color: rgba(255, 64, 48, 0.6); box-shadow: 0 0 24px rgba(255, 64, 48, 0.12); }
.vcard__meta {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) 2px 0;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.vcard__meta img, .vcard__meta .mono-ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; font-size: 0.8rem; }
.vcard__txt { min-width: 0; display: flex; flex-direction: column; }
.vcard__title {
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vcard__who {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.vcard__meta:hover .vcard__who { color: var(--neon-cyan-soft); }

.band--live {
  background: linear-gradient(180deg, rgba(255, 64, 48, 0.05), transparent 70%);
  border-top: 1px solid rgba(255, 64, 48, 0.25);
  border-bottom: 1px solid var(--space-line);
  max-width: none;
}
.band--live > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.band__title--live::before { background: var(--on-air); box-shadow: var(--glow-red); }

.row--creators { padding-bottom: var(--s-4); }

/* ── THE LAB — the one small bowl ── */
.lab {
  max-width: 560px;
  margin: var(--s-5) auto var(--s-6);
  padding: var(--s-4);
  border: 1px dashed var(--space-line-bright);
  border-radius: var(--radius-lg);
  background: rgba(31, 19, 8, 0.35);
}
.lab__h {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-cyan-soft);
}
.lab__h sup {
  font-size: 0.55rem;
  color: var(--neon-red-soft);
  border: 1px solid rgba(255, 80, 48, 0.45);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 0.4em;
  letter-spacing: 0.1em;
}
.lab__note { margin: 0 0 var(--s-3); color: var(--ink-faint); font-size: var(--text-sm); font-weight: 300; }
.lab__links { display: flex; flex-direction: column; gap: var(--s-1); }
.lab__links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--space-line);
  transition: color var(--dur-fast), padding-left var(--dur-fast);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lab__links a:last-child { border-bottom: 0; }
.lab__links a:hover { color: var(--neon-cyan-soft); padding-left: 6px; }

/* ───────────────────────── THE PLOT DROP ─────────────────────────
   One daily playable investigation. Homepage gets one heroic card;
   the mission itself lives at /drop as a vertical act sequence. */
.dropcard {
  max-width: 880px;
  margin: 0 auto var(--s-4);
  padding: clamp(var(--s-4), 3vw, var(--s-5));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 80, 48, 0.4);
  background:
    radial-gradient(600px 200px at 85% 0%, rgba(255, 80, 48, 0.10), transparent 70%),
    linear-gradient(160deg, rgba(31, 19, 8, 0.85), rgba(14, 8, 3, 0.9));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  min-width: 0;
}
.dropcard__kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--neon-red-soft);
  margin: 0 0 var(--s-2);
}
.dropcard__kicker::before { content: "●"; color: var(--on-air); margin-right: 0.5em; animation: pc-pulse 2.2s ease-in-out infinite; }
.dropcard__title { font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem); font-weight: 700; line-height: 1.08; margin: 0 0 var(--s-2); }
.dropcard__q { color: var(--ink-dim); font-weight: 300; font-size: var(--text-lg); margin: 0 0 var(--s-3); text-wrap: balance; }
.dropcard__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s-4);
}
.dropcard__go {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  background: var(--neon-red);
  color: #fff;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-snap);
}
.dropcard__go:hover { box-shadow: var(--glow-red); transform: translateY(-1px); }
.dropcard__alts { display: inline-flex; gap: var(--s-3); margin-left: var(--s-3); }
.dropcard__alts a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px dashed var(--space-line-bright);
  padding: 0.4rem 0;
}
.dropcard__alts a:hover { color: var(--neon-cyan-soft); border-color: var(--neon-cyan); }

/* ── the mission page ── */
.drop { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s-4) clamp(var(--s-3), 4vw, var(--s-5)) var(--s-6); min-width: 0; }
.drop__rail { display: flex; gap: 8px; justify-content: center; margin: 0 0 var(--s-4); }
.drop__dot {
  width: 26px; height: 4px; border-radius: 2px;
  background: var(--space-line-bright);
  border: 0; padding: 0; cursor: default;
}
.drop__dot.is-done { background: var(--neon-cyan); cursor: pointer; }
.drop__dot.is-on { background: var(--neon-red); box-shadow: var(--glow-red); }
.act { min-width: 0; }
.act__kicker {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--neon-red-soft); margin: 0 0 var(--s-2);
}
.act__title { font-size: clamp(1.7rem, 1.1rem + 3vw, 3rem); line-height: 1.05; margin: 0 0 var(--s-2); }
.act__q { font-size: var(--text-lg); font-weight: 300; color: var(--ink-dim); margin: 0 0 var(--s-3); text-wrap: balance; }
.act__note { color: var(--ink-faint); font-weight: 300; margin: 0 0 var(--s-4); }
.act__next {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.8rem 1.5rem; background: var(--neon-cyan); color: #1a1002;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-snap);
}
.act__next:hover { box-shadow: var(--glow-cyan); transform: translateY(-1px); }
.act__next:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.act__back { background: transparent; border: 0; color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; cursor: pointer; padding: 0.8rem; }
.act__back:hover { color: var(--neon-cyan-soft); }

.station {
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  background: var(--space-deep);
  border: 1px solid var(--space-line);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.station__role { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.22em; color: var(--neon-red-soft); margin: 0 0 var(--s-2); }
.station__id { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.station__id img, .station__id .mono-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.station__id a { color: var(--ink); font-weight: 600; text-decoration: none; font-size: 1.05rem; }
.station__id a:hover { color: var(--neon-cyan-soft); }
.station__player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--space-line); margin-bottom: var(--s-3); background: var(--space-panel); }
.station__player .vfacade { position: absolute; inset: 0; width: 100%; height: 100%; }
.station__doc {
  aspect-ratio: auto;
  padding: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 90px;
}
.station__fact {
  padding: var(--s-3);
  background: rgba(255, 176, 32, 0.05);
  border-left: 3px solid var(--neon-cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--s-2);
}
.station__fact b { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--neon-cyan); display: block; margin-bottom: 4px; }
.station__fact p { margin: 0; color: var(--ink-dim); font-weight: 300; line-height: 1.5; }
.station__clue {
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--neon-red);
  margin: var(--s-2) 0 0;
  font-style: italic;
  color: var(--neon-red-soft);
  font-weight: 300;
}
.station__receipts summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding: 4px 0; }
.station__receipts a { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--neon-cyan-soft); text-decoration: none; padding: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.station__receipts a:hover { color: var(--neon-cyan); text-decoration: underline; }

/* strings board */
.board { background: var(--space-deep); border: 1px solid var(--space-line); border-radius: var(--radius-lg); padding: var(--s-3); margin-bottom: var(--s-3); }
.board svg { width: 100%; height: auto; display: block; }
.board__node { cursor: pointer; }
.board__node circle { fill: var(--space-panel); stroke: var(--space-line-bright); stroke-width: 1.5; transition: stroke 140ms; }
.board__node.is-picked circle { stroke: #fff; stroke-width: 2.5; }
.board__node.is-shadow circle { stroke-dasharray: 4 4; }
.board__node text { fill: var(--ink-dim); font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-anchor: middle; }
.board__edge { stroke: var(--neon-cyan); stroke-width: 2; opacity: 0.8; cursor: pointer; }
.board__edge:hover { stroke-width: 3.5; }
.board__edge--mine { stroke: #fff; stroke-dasharray: 6 5; opacity: 0.6; }
.board__legend { display: flex; gap: var(--s-4); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--ink-faint); margin-top: var(--s-2); flex-wrap: wrap; }
.board__legend .lg-official::before { content: "──"; color: var(--neon-cyan); margin-right: 0.5em; letter-spacing: -2px; }
.board__legend .lg-mine::before { content: "╌╌"; color: #fff; margin-right: 0.5em; }
.board__edgeinfo { min-height: 3em; padding: var(--s-2) var(--s-3); background: rgba(255, 176, 32, 0.05); border-radius: var(--radius-sm); color: var(--ink-dim); font-weight: 300; }
.board__edgeinfo a { color: var(--neon-cyan-soft); font-family: var(--font-mono); font-size: 0.72rem; }

/* elliot on the case */
.eq { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-3); }
.eq button {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: var(--s-2) var(--s-3);
  background: var(--space-deep);
  color: var(--ink);
  border: 1px solid var(--space-line-bright);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.eq button:hover { border-color: var(--neon-cyan); }
.eq button[aria-expanded="true"] { border-color: var(--neon-cyan); }
.eq__a {
  padding: var(--s-3);
  background: rgba(255, 176, 32, 0.05);
  border-left: 3px solid var(--neon-cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-dim);
  font-weight: 300;
  line-height: 1.55;
  margin: 0 0 var(--s-2);
}
.eq__free { display: flex; gap: var(--s-2); }
.eq__free input {
  flex: 1; min-width: 0;
  padding: 0.7rem 0.9rem;
  background: var(--space-deep);
  border: 1px solid var(--space-line-bright);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-display);
}
.eq__free input:focus { outline: 0; border-color: var(--neon-cyan); }
.eq__free button { flex: none; }

/* theory lock */
.theory { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.theory label {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-3);
  background: var(--space-deep);
  border: 1px solid var(--space-line-bright);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur-fast);
  color: var(--ink-dim);
  font-weight: 300;
}
.theory label:hover { border-color: var(--neon-cyan); }
.theory label:has(input:checked) { border-color: var(--neon-red); background: rgba(255, 80, 48, 0.06); color: var(--ink); }
.theory input[type="radio"] { accent-color: var(--neon-red); margin-top: 3px; flex: none; }
.theory__custom { width: 100%; min-width: 0; padding: 0.7rem 0.9rem; background: var(--space-void); border: 1px solid var(--space-line); border-radius: var(--radius-sm); color: var(--ink); font-family: var(--font-display); margin-top: 6px; }
.theory__custom:focus { outline: 0; border-color: var(--neon-cyan); }
.act__lock {
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.9rem 1.8rem; background: var(--neon-red); color: #fff;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-snap);
}
.act__lock:hover:not(:disabled) { box-shadow: var(--glow-red); transform: translateY(-1px); }
.act__lock:disabled { opacity: 0.4; cursor: not-allowed; }

/* finale cinema inside the tube */
.tvt__cinema {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: clamp(14px, 4vw, 40px);
  background: var(--screen-bg);
  text-align: center;
}
.cine__line {
  position: absolute;
  left: 8%; right: 8%;
  top: 50%;
  transform: translateY(-40%);
  opacity: 0;
  font-size: clamp(1rem, 0.8rem + 1.6vw, 1.7rem);
  font-weight: 300;
  color: var(--phosphor);
  text-shadow: 0 0 18px rgba(255, 208, 138, 0.35);
  transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
}
.cine__line.is-on { opacity: 1; transform: translateY(-50%); }
.cine__line.is-off { opacity: 0; transform: translateY(-62%); }

/* debrief */
.debrief {
  padding: var(--s-4);
  background: var(--space-deep);
  border: 1px solid rgba(255, 176, 32, 0.4);
  border-radius: var(--radius-lg);
  box-shadow: var(--glow-soft);
}
.debrief__rank { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; color: var(--neon-cyan); margin: 0 0 4px; }
.debrief__rank b { font-size: 1.1rem; letter-spacing: 0.14em; }
.debrief__verdict { color: var(--ink); font-weight: 300; font-size: var(--text-lg); line-height: 1.5; margin: var(--s-2) 0 var(--s-3); }
.debrief__row { margin-bottom: var(--s-2); }
.debrief__row b { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--neon-cyan); display: block; margin-bottom: 3px; }
.debrief__row p { margin: 0; color: var(--ink-dim); font-weight: 300; }
.debrief__loop { border-left: 3px solid var(--neon-red); padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; color: var(--neon-red-soft); font-style: italic; }
.debrief__acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.debrief__acts .ghost {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6rem 1rem; background: transparent; color: var(--ink-dim);
  border: 1px solid var(--space-line-bright); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.debrief__acts .ghost:hover { color: var(--neon-cyan-soft); border-color: var(--neon-cyan); }

/* ───────────────────────── THE TV THEATER ─────────────────────────
   The station's CRT cabinet, back from the console — now it's the player.
   The dragon station-ident tunes the set in, then the tape takes the tube. */
body.tvt-open { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; }
.tvt {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(8px, 3vw, 40px);
  background: rgba(6, 3, 2, 0.88);
  backdrop-filter: blur(6px);
}
.tvt__cabinet {
  width: min(1000px, 100%);
  min-width: 0;
  padding: clamp(10px, 2vw, 22px) clamp(10px, 2vw, 22px) clamp(8px, 1.6vw, 14px);
  border-radius: var(--cabinet-radius);
  background:
    linear-gradient(160deg, #4a2f14, #2b1a0a 55%, #1c1006),
    var(--space-panel);
  border: 1px solid #5f451f;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 208, 138, 0.25),
    var(--glow-soft);
}
.tvt__hud {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 4px var(--s-2);
  min-width: 0;
}
.tvt__onair {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--neon-red-soft);
  white-space: nowrap;
}
.tvt__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--on-air);
  box-shadow: var(--glow-red);
  animation: pc-pulse 2.2s ease-in-out infinite;
}
.tvt__who {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neon-cyan-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tvt__close {
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--space-line-bright);
  border-radius: 50%;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.tvt__close:hover { color: #fff; border-color: var(--neon-red); box-shadow: var(--glow-red); }
.tvt__tube {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--screen-bg);
  border: 1px solid #120a04;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.85);
}
.tvt__player, .tvt__ident {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: var(--screen-bg);
}
/* the glass sits over everything, touches nothing */
.tvt__glass { position: absolute; inset: 0; pointer-events: none; }
.tvt__glass--scan {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(6, 3, 2, 0.14) 3px 4px);
  mix-blend-mode: multiply;
}
.tvt__glass--glare {
  background: radial-gradient(60% 45% at 22% 12%, rgba(255, 232, 200, 0.10), transparent 65%);
  mix-blend-mode: screen;
}
.tvt__glass--vignette { box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.55); border-radius: 18px; }
.tvt__title {
  margin: var(--s-2) 4px 0;
  font-size: 0.92rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tvt__plate {
  margin-top: var(--s-2);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  border-top: 1px solid rgba(95, 69, 31, 0.6);
  padding-top: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .tvt { backdrop-filter: none; }
  .tvt__dot { animation: none; }
}

/* ───────────────────────── FOOTER ───────────────────────── */
.foot {
  margin-top: auto;
  padding: var(--s-5) var(--s-4) var(--s-6);
  border-top: 1px solid var(--space-line);
  text-align: center;
}
.foot__law {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s-3);
}
.foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-3); }
.foot__nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: var(--text-sm);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.foot__nav a:hover { color: var(--neon-cyan-soft); border-color: var(--neon-cyan); }
.foot__c { font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-faint); margin: 0; }

.hidden { display: none !important; }

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: var(--s-2); }
  .topbar__nav { order: 3; width: 100%; margin-left: 0; }
  .hero { padding-top: var(--s-5); }
  .hero__search button { padding: 0.62rem 0.8rem; }
  .profile__head { grid-template-columns: minmax(0, 1fr); }
  .profile__portrait { max-width: 240px; }
  .card { flex-basis: 124px; }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-card__label::before { animation: none; }
  .card:hover, .vfacade:hover { transform: none; }
}

/* ── his voice: opt-in, one tap ── */
.host__speak {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--space-line-bright);
  border-radius: 50%; color: var(--ink-faint);
  transition: color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.host__speak:hover, .host__speak:focus-visible { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.host__speak.is-speaking { color: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: var(--glow-cyan); }
@media (prefers-reduced-motion: no-preference) {
  .host__speak.is-speaking { animation: host-voice 1.1s ease-in-out infinite; }
  @keyframes host-voice { 0%,100% { box-shadow: 0 0 6px rgba(255,176,32,.5); } 50% { box-shadow: 0 0 16px rgba(255,176,32,.9); } }
}

/* ══ THE SWIPE — the TikTok generation's door, finite by law ══ */
.swipe-body { overflow: hidden; background: var(--space-void); }
.swipe-deck {
  height: 100dvh; overflow-y: auto; overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none;
}
.swipe-deck::-webkit-scrollbar { display: none; }
.swipe-card {
  position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
}
.swipe-tube { position: relative; display: grid; place-items: center; background: #050301; min-height: 0; }
.swipe-face { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: #050301; }
.swipe-face img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.swipe-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(10, 6, 4, 0.72) no-repeat center / 40% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z' fill='%23ffb020'/></svg>");
  border: 1px solid var(--space-line-bright); box-shadow: var(--glow-soft);
}
.swipe-face:hover .swipe-play, .swipe-face:focus-visible .swipe-play { box-shadow: var(--glow-cyan); }
.swipe-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.swipe-live {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px;
  padding: 4px 10px; border-radius: 999px; background: var(--on-air); color: #fff;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em;
  box-shadow: 0 0 14px rgba(255, 64, 48, 0.6);
}
.swipe-strip {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(10, 6, 4, 0.4), rgba(10, 6, 4, 0.95));
  border-top: 1px solid var(--space-line);
}
.swipe-who { display: flex; align-items: center; gap: var(--s-2); min-width: 0; flex: 1; text-decoration: none; color: var(--ink); }
.swipe-who img, .swipe-who .mono-ava { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex: none; border: 1px solid var(--space-line-bright); }
.swipe-meta { min-width: 0; display: grid; }
.swipe-meta b { font-size: 0.86rem; }
.swipe-meta span { font-size: 0.76rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swipe-meta small { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; color: var(--ink-faint); }
.swipe-share {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: transparent; color: var(--ink-dim); border: 1px solid var(--space-line-bright);
  border-radius: 50%; cursor: pointer;
}
.swipe-share:hover, .swipe-share:focus-visible { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.swipe-hint {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em;
  color: var(--phosphor); text-shadow: 0 0 10px rgba(255, 208, 138, 0.5);
  animation: swipe-nudge 1.8s ease-in-out infinite;
}
@keyframes swipe-nudge { 0%, 100% { transform: translate(-50%, 0); opacity: 0.7; } 50% { transform: translate(-50%, -8px); opacity: 1; } }
.swipe-brand {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 40;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em;
  color: var(--neon-cyan); text-decoration: none; padding: 6px 10px;
  background: rgba(10, 6, 4, 0.55); border: 1px solid var(--space-line); border-radius: 999px;
}
.swipe-guide {
  position: fixed; left: 12px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  width: 46px; height: 46px; padding: 0; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--space-line-bright); background: #0b0703; cursor: pointer;
  box-shadow: var(--glow-soft);
}
.swipe-guide img { width: 100%; height: 100%; object-fit: cover; }
.swipe-take {
  position: fixed; left: 12px; bottom: calc(142px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  max-width: min(78vw, 340px); padding: 10px 12px; border-radius: 12px;
  background: rgba(31, 19, 8, 0.96); border: 1px solid var(--space-line-bright);
  color: var(--phosphor); font-size: 0.8rem; line-height: 1.45;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.swipe-take.hidden { display: none; }
.swipe-card--end, .swipe-card--boot { display: grid; place-items: center; grid-template-rows: none; }
.swipe-boot { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ink-faint); }
.swipe-end { text-align: center; padding: 24px; max-width: 420px; }
.swipe-end__guide { width: 96px; height: 96px; border-radius: 22px; object-fit: cover; border: 1px solid var(--space-line-bright); box-shadow: var(--glow-soft); }
.swipe-end h1 { margin: 16px 0 8px; font-size: 1.7rem; letter-spacing: 0.04em; }
.swipe-end p { color: var(--ink-dim); font-weight: 300; line-height: 1.5; }
.swipe-doors { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.swipe-doors a {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; padding: 0.65rem 1rem; border-radius: 10px;
  color: var(--ink-dim); border: 1px dashed var(--space-line-bright);
}
.swipe-doors a:first-child { color: #1a1002; background: var(--neon-cyan); border-style: solid; font-weight: 700; }
.swipe-doors a:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.swipe-doors a:first-child:hover { color: #1a1002; }
.swipe-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px);
  z-index: 60; padding: 9px 16px; border-radius: 999px; opacity: 0; pointer-events: none;
  background: var(--neon-cyan); color: #1a1002; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.swipe-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .swipe-hint { animation: none; } .swipe-deck { scroll-behavior: auto; } }

/* ══ CONNECTED SIGNALS — the strings on a creator's page ══ */
#pf-related { display: grid; gap: var(--s-2); }
.string-card {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  /* right padding clears the layer chip and the receipt link */
  padding: var(--s-3) 84px var(--s-3) var(--s-3); text-decoration: none; color: var(--ink);
  background: var(--space-panel); border: 1px solid var(--space-line);
  border-radius: var(--radius); transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.string-card:hover { border-color: var(--neon-cyan); transform: translateX(3px); }
.string-card--pattern { border-style: dashed; background: transparent; }
.string-card img, .string-card .mono-ava {
  width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none;
  border: 1px solid var(--space-line-bright);
}
.string-layer {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.string-card--pattern .string-layer { color: var(--neon-violet); }
.string-body { display: grid; min-width: 0; gap: 1px; }
.string-body b { font-size: 0.95rem; }
.string-why { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--neon-cyan-soft); }
.string-body small { font-size: 0.74rem; color: var(--ink-dim); line-height: 1.35; }
.string-receipt {
  position: absolute; bottom: 8px; right: 10px; padding: 3px 6px;
  border: 1px solid var(--space-line); border-radius: 6px; background: var(--space-void);
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em;
  color: var(--ink-faint); text-decoration: none;
}
.string-receipt:hover { color: var(--neon-cyan); }
.strings-none {
  display: grid; gap: 4px; padding: var(--s-4);
  border: 1px dashed var(--space-line-bright); border-radius: var(--radius);
  background: rgba(255, 176, 32, 0.03);
}
.strings-none b { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--neon-cyan-soft); }
.strings-none span { font-size: 0.82rem; color: var(--ink-dim); line-height: 1.5; }

/* ══ DOSSIER 2.0 — the human signal profile ══ */
.pf-take--empty {
  font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.6;
  letter-spacing: 0.04em; color: var(--ink-faint);
  padding: var(--s-3); border: 1px dashed var(--space-line-bright);
  border-radius: var(--radius); background: rgba(255,176,32,0.03);
}
.pf-dossier { display: grid; gap: var(--s-5); margin: var(--s-5) 0; }
.pf-dossier.hidden { display: none; }
.built-card {
  padding: var(--s-3); margin-top: var(--s-2);
  border: 1px solid var(--space-line); border-radius: var(--radius);
  background: var(--space-panel);
}
.built-card b { font-size: 1rem; display: block; }
.built-meta { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--neon-cyan-soft); }
.built-card p { margin: 6px 0 0; font-size: 0.86rem; color: var(--ink-dim); line-height: 1.5; }
.built-effect { color: var(--neon-violet) !important; font-style: italic; }
.built-src { display: inline-block; margin-top: 8px; font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.1em; color: var(--ink-faint); text-decoration: none; }
.built-src:hover { color: var(--neon-cyan); }
.journey-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 2px; }
.journey-list li {
  display: grid; grid-template-columns: 52px 1fr auto; gap: var(--s-2); align-items: baseline;
  padding: 9px 10px; border-left: 2px solid var(--space-line-bright);
}
.journey-list li:hover { border-left-color: var(--neon-cyan); background: rgba(255,176,32,0.04); }
.journey-list b { font-family: var(--font-mono); font-size: 0.74rem; color: var(--neon-cyan); }
.journey-list span { font-size: 0.86rem; color: var(--ink-dim); line-height: 1.45; }
.journey-list a { text-decoration: none; color: var(--ink-faint); font-size: 0.8rem; }
.journey-list a:hover { color: var(--neon-cyan); }
.evidence-room {
  border: 1px solid var(--space-line-bright); border-radius: var(--radius);
  background: var(--space-deep); padding: var(--s-3);
}
.evidence-room summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon-cyan-soft); }
.evidence-legend { margin: var(--s-2) 0; font-family: var(--font-mono); font-size: 0.56rem;
  letter-spacing: 0.1em; color: var(--ink-faint); }
.evidence-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.evidence-list li { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--s-2);
  align-items: baseline; font-size: 0.82rem; color: var(--ink-dim); line-height: 1.45;
  padding-bottom: 6px; border-bottom: 1px solid var(--space-line); }
.ev-mark { font-style: normal; color: var(--neon-cyan); }
.evidence-list a { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.08em;
  color: var(--ink-faint); text-decoration: none; white-space: nowrap; }
.evidence-list a:hover { color: var(--neon-cyan); }

/* ══ INSTILLIOUS, UNBOXED — lives in instillious.css since 2026-10-21, so the
   console (which never loads this file) can seat him too; @imported at the
   top of this file. ══ */

/* ── THE LENS — the world around a creator. Deliberately cooler than the rest
      of the station: this panel is analysis, and it should never wear the
      confidence of a fact. ── */
.pf-lens { margin: 34px 0 8px; padding: 20px 18px 16px; border: 1px solid var(--line);
  border-left: 3px solid #6a86a8; border-radius: 10px; background: linear-gradient(180deg, rgba(106,134,168,.07), transparent 70%); }
.pf-lens.hidden { display: none; }
.lens-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lens-mark { font-family: var(--mono, "Space Mono", monospace); font-size: .58rem; letter-spacing: .22em; color: #8fa6c2; }
.lens-world { display: inline-block; font-family: var(--mono, "Space Mono", monospace); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: #cfe0f2; border: 1px solid #4a627e;
  border-radius: 999px; padding: 5px 14px; margin-bottom: 14px; background: rgba(74,98,126,.18); }
.lens-grid { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 18px; margin: 0 0 14px; }
.lens-grid dt { font-family: var(--mono, "Space Mono", monospace); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: #8fa6c2; padding-top: 3px; }
.lens-grid dd { margin: 0; font-size: .93rem; color: var(--ink, #e8d9c3); line-height: 1.55; }
.lens-reading { margin: 0 0 12px; padding: 12px 14px; border-radius: 8px; background: rgba(0,0,0,.22);
  font-size: .97rem; line-height: 1.6; color: #dce8f4; }
.lens-seen { margin-bottom: 10px; }
.lens-seen summary { cursor: pointer; font-family: var(--mono, "Space Mono", monospace); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: #8fa6c2; }
.lens-seen summary:hover { color: #cfe0f2; }
.lens-seen ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 7px; }
.lens-seen li { font-size: .86rem; color: var(--dim2, #8a744f); line-height: 1.5; }
.lens-seen a { color: #8fa6c2; text-decoration: none; font-size: .78rem; }
.lens-seen a:hover { text-decoration: underline; }
.lens-note { margin: 0; font-size: .72rem; line-height: 1.5; color: #6f7f92; }
@media (max-width: 560px) { .lens-grid { grid-template-columns: 1fr; gap: 3px 0; }
  .lens-grid dd { margin-bottom: 9px; } }
/* a visual string is analysis about staging — it wears the lens's cooler
   register so it can never be mistaken for a recorded, sourced event */
.string-card--visual { border-left-color: #6a86a8; }
.string-card--visual .string-layer { color: #8fa6c2; }
/* the window a reading rests on — nine days and nineteen months are not the
   same claim, and the page says which */
.lens-window { margin: 0 0 6px; font-family: var(--mono, "Space Mono", monospace);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #8fa6c2; }
.lens-window[data-thin] { color: #c2a06a; }
.lens-caveat { margin: 0 0 10px; font-size: .78rem; line-height: 1.5; color: #c2a06a; }

/* ── THEN & NOW — the drift you can see. Warm, editorial, the human hook high
      on the page. Two dated portraits; the station says nothing about the
      change, so the styling stays quiet and lets the faces carry it. ── */
.thennow { margin: 22px 0 6px; padding: 20px 18px 16px; border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,176,32,.06), transparent 70%); }
.thennow.hidden { display: none; }
.tn-title { font-family: var(--mono, "Space Mono", monospace); font-size: .72rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 14px; }
.tn-pair { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 32px); flex-wrap: nowrap; }
.tn-shot { margin: 0; flex: 0 1 320px; min-width: 0; }
.tn-shot img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  filter: saturate(.92); transition: filter var(--duration-normal, 300ms) var(--ease-out-expo, ease); }
.tn-shot:hover img { filter: saturate(1.06); }
.tn-shot figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; text-align: center; }
.tn-shot figcaption b { font-family: var(--mono, "Space Mono", monospace); font-size: 1.05rem; letter-spacing: .08em; color: var(--ink); }
.tn-shot figcaption span { font-size: .8rem; color: var(--dim2, #8a744f); line-height: 1.4; }
.tn-shot figcaption a { font-size: .72rem; color: var(--amber); text-decoration: none; letter-spacing: .06em; }
.tn-shot figcaption a:hover { text-decoration: underline; }
.tn-arrow { flex: 0 0 auto; font-size: 1.6rem; color: var(--amber); opacity: .7; }
.tn-note { margin: 14px 0 0; font-size: .74rem; line-height: 1.5; color: #6f7f92; text-align: center; }
@media (max-width: 520px) {
  .tn-pair { gap: 10px; }
  .tn-arrow { transform: rotate(90deg); font-size: 1.2rem; }   /* points down when stacked-ish */
}
@media (prefers-reduced-motion: reduce) {
  .tn-shot img { transition: none; }
}

/* ── THE CONSTELLATION — a creator's local graph of real, sourced strings.
      The map sits above the receipt cards; same data, made spatial. Only
      appears when there are approved connections (honest-absent otherwise). ── */
.constellation { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 440px;
  margin: 6px 0 20px; border: 1px solid var(--line); border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(255,176,32,.05), rgba(10,6,4,.35) 70%);
  touch-action: manipulation; }
.constellation.hidden { display: none; }
@media (max-width: 520px) { .constellation { aspect-ratio: 4 / 5; max-height: 460px; } }

/* ── THE PULSE — the latest on one person, above the fold of their file.
      A dated ledger, not a card wall: the eye should run down the marks and
      the times, because the ORDER is the story. The mark column is fixed so
      ◆ recorded, ◇ observation and △ analysis line up as a readable column
      rather than floating inside prose. ── */
.pulse { margin: var(--s-5) 0 var(--s-4); }
.pulse.hidden { display: none; }
.pulse__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.pulse__head .band__title { margin-bottom: 0; }
.pulse__feed {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--ink-faint); border: 1px solid var(--space-line-bright);
  border-radius: 999px; padding: 0.3rem 0.7rem;
  transition: color 150ms ease, border-color 150ms ease;
}
.pulse__feed:hover, .pulse__feed:focus-visible { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.pulse__sub { margin: var(--s-1) 0 var(--s-3); font-size: var(--text-sm); color: var(--ink-faint); }

.pulse__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--space-line); border: 1px solid var(--space-line);
  border-radius: var(--radius-lg); overflow: hidden; }
.pulse-row { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); background: var(--space-deep); }
.pulse-row__mark { font-style: normal; line-height: 1.7; color: var(--neon-cyan-soft); text-align: center; }
.pulse-row--live .pulse-row__mark { color: var(--on-air); }
.pulse-row__main { min-width: 0; }
.pulse-row__meta { margin: 0; font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.pulse-row__meta b { color: var(--neon-cyan); letter-spacing: 0.18em; }
.pulse-row--live .pulse-row__meta b { color: var(--on-air); }
.pulse-row__when { display: block; letter-spacing: 0.1em; text-transform: none; color: var(--ink-faint); opacity: 0.85; }
.pulse-row__title { margin: 4px 0 0; color: var(--ink); font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.pulse-row__body { margin: 4px 0 0; font-size: 0.86rem; color: var(--ink-dim); line-height: 1.5; }
.pulse-row__src { display: inline-block; margin-top: 6px; font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.1em; color: var(--ink-faint); text-decoration: none; }
.pulse-row__src:hover, .pulse-row__src:focus-visible { color: var(--neon-cyan); }
@media (max-width: 520px) {
  .pulse-row { grid-template-columns: 1.4rem 1fr; padding: var(--s-3); }
}

/* ── DEAD AIR — the tube stays lit when there is no tape.
      Same static recipe as the CH·404 set, so the station has ONE television,
      not two that nearly match. The only thing that changes per creator is
      --tube-hue, held inside the ember→amber band by dialFor(). ── */
/* the dead tube keeps the tape grid rather than replacing it, so the set is
   EXACTLY the size a tape tile would be — a page with no video and a page
   with video read at the same scale, and there is no magic width to drift */
.vgrid--dead .deadtube { grid-column: span 1; }
.vgrid--dead .deadtube__note,
.vgrid--dead .deadtube__dial { grid-column: 1 / -1; }
.deadtube {
  --tube-hue: 32;
  /* the OSD is sized against THE TUBE, not the viewport: this set is one tape
     tile wide, and the 404's viewport-scaled type wrapped to three lines in
     it. Container units keep the on-screen display legible at any tile size. */
  container-type: inline-size;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; min-width: 0;
  border: 1px solid var(--space-line-bright); border-radius: var(--radius-lg);
  background: var(--screen-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 30px 70px -30px rgba(0, 0, 0, 0.95),
    0 0 24px hsl(var(--tube-hue) 70% 45% / 0.22);
}
.deadtube__static {
  position: absolute; inset: -50%;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 73% 61%, hsl(var(--tube-hue) 90% 75% / 0.08) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
  animation: deadroll 0.18s steps(3) infinite;
}
.deadtube__glow {
  position: absolute; inset: 0;
  background: radial-gradient(80% 70% at 50% 45%, hsl(var(--tube-hue) 95% 55% / 0.12), transparent 70%);
}
/* the slow bar that tells you the set is powered, not frozen */
.deadtube__scan {
  position: absolute; left: 0; right: 0; height: 22%;
  background: linear-gradient(180deg, transparent, hsl(var(--tube-hue) 95% 70% / 0.07), transparent);
  animation: deadscan 5.5s linear infinite;
}
.deadtube__ch {
  position: absolute; top: 10px; right: 14px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em;
  color: hsl(var(--tube-hue) 95% 62%); text-shadow: 0 0 10px hsl(var(--tube-hue) 95% 55% / 0.6);
}
.deadtube__osd { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-2); }
.deadtube__osd b {
  font-size: clamp(0.6rem, 5.4cqw, 0.95rem); letter-spacing: 0.16em;
  text-align: center; text-wrap: balance; color: var(--ink);
  /* the chromatic fringe is 1px here, not the 404's 2px — at tile scale a
     2px split stops reading as CRT bleed and starts reading as a typo */
  text-shadow: 0 0 14px rgba(255, 208, 138, 0.4),
    1px 0 0 rgba(255, 80, 48, 0.28), -1px 0 0 rgba(122, 243, 255, 0.18);
}
.deadtube__note { margin: 0; font-size: var(--text-sm); color: var(--ink-faint) !important; }
.deadtube__dial { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.deadtube__dial a {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--space-line-bright); color: var(--ink-dim);
  transition: color 150ms ease, border-color 150ms ease;
}
.deadtube__dial a:hover, .deadtube__dial a:focus-visible { color: var(--neon-cyan); border-color: var(--neon-cyan); }
@keyframes deadroll { to { transform: translateY(3px); } }
@keyframes deadscan { from { top: -22%; } to { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .deadtube__static, .deadtube__scan { animation: none; }
  .deadtube__scan { top: 39%; }
}