:root {
  color-scheme: dark;
  --ink: #f7f2ff;
  --muted: #aaa8c5;
  --deep: #070816;
  --panel: rgba(13, 15, 36, .94);
  --panel-soft: rgba(16, 19, 45, .78);
  --line: rgba(205, 200, 255, .17);
  --violet: #b18cff;
  --cyan: #68e5ff;
  --amber: #ffd166;
  --red: #ff1a1a;
  --green: #66f0b0;
  --focus: #fff4a8;
  --chooser-barnaby: #68e5ff;
  --chooser-tom: #ff9dcc;
  --chooser-robert: #ffe08a;
  --chooser-interlude: #a9acc2;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--deep); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% -10%, rgba(95, 65, 190, .35), transparent 38rem),
    radial-gradient(circle at 92% 20%, rgba(0, 160, 190, .18), transparent 30rem),
    linear-gradient(155deg, #070816 0%, #090b1d 48%, #050610 100%);
  overflow-x: hidden;
}

.stars, .stars::before, .stars::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 35%, rgba(104,229,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 41% 76%, rgba(177,140,255,.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 91% 82%, rgba(255,255,255,.55) 0 1px, transparent 1.5px);
  background-size: 190px 210px, 260px 230px, 320px 290px, 400px 370px;
  opacity: .36;
}
.stars::before { transform: rotate(18deg) scale(1.2); opacity: .38; }
.stars::after { transform: rotate(-11deg) scale(1.35); opacity: .2; }

button, input { font: inherit; }
button {
  color: var(--ink);
  background: rgba(24, 27, 61, .86);
  border: 1px solid rgba(177, 140, 255, .27);
  border-radius: 8px;
  padding: .55rem .82rem;
  cursor: pointer;
}
button:hover, button.active { background: rgba(83, 57, 145, .78); border-color: var(--violet); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--focus);
  color: #15100c;
}
.skip-link:focus { top: 1rem; }

.masthead {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  padding: 1.2rem clamp(1rem, 3vw, 3rem) .75rem;
}
.return-link {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  flex: 0 0 auto;
  padding: .55rem .78rem;
  color: var(--cyan);
  background: rgba(17, 20, 47, .82);
  border: 1px solid rgba(104,229,255,.32);
  border-radius: 999px;
  font-size: .76rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s, background .16s, border-color .16s, transform .16s;
}
.return-link:hover { color: #fff; background: rgba(65, 48, 112, .88); border-color: var(--violet); transform: translateY(-1px); }
.return-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.brand { display: flex; align-items: center; }
.eyebrow { margin: 0 0 .22rem; color: var(--cyan); letter-spacing: .16em; font-size: .72rem; font-weight: 700; }
h1 {
  margin: 0;
  max-width: 100%;
  white-space: nowrap;
  font-family: "Bahnschrift SemiCondensed", "DIN Alternate", "Roboto Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(1.15rem, 2.15vw, 1.95rem);
  font-weight: 700;
  font-stretch: semi-condensed;
  letter-spacing: .085em;
  line-height: 1;
  background: linear-gradient(90deg, #f7f2ff 0%, #a7efff 58%, #c6adff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(104, 229, 255, .08);
}
.archive-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .2rem .55rem;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.archive-stats > span { white-space: nowrap; }
.archive-stats strong { color: var(--ink); font-size: .84rem; }
.stat-divider { margin: 0 .35rem; color: rgba(205, 200, 255, .42); }

main { position: relative; }
.controls-shell {
  margin: .4rem clamp(1rem, 3vw, 3rem) .75rem;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(18px);
}
.controls-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .62rem 1rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 13px;
}
.controls-toggle:hover { color: var(--ink); background: rgba(83, 57, 145, .24); border-color: transparent; }
.controls-toggle[aria-expanded="true"] { border-bottom: 1px solid var(--line); border-radius: 13px 13px 0 0; }
.controls-toggle-title { color: var(--ink); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.controls-toggle-icon {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--cyan);
  background: radial-gradient(circle, rgba(104,229,255,.11), rgba(104,229,255,.025));
  border: 1px solid rgba(104,229,255,.3);
  border-radius: 50%;
  transition: transform .2s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.controls-toggle-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.controls-toggle[aria-expanded="true"] .controls-toggle-icon { transform: rotate(180deg); }
.controls-toggle:hover .controls-toggle-icon { background: rgba(104,229,255,.13); border-color: rgba(104,229,255,.62); box-shadow: 0 0 14px rgba(104,229,255,.12); }
.controls {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) auto auto auto;
  gap: .85rem 1.15rem;
  align-items: end;
  padding: .8rem 1rem;
}
.search-control { display: grid; gap: .34rem; color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.search-control input {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: rgba(5, 6, 18, .8);
  border: 1px solid rgba(177,140,255,.28);
  border-radius: 8px;
  padding: .58rem .7rem;
}
.filter-group { display: flex; flex-wrap: wrap; gap: .45rem .72rem; margin: 0; padding: 0; border: 0; }
.filter-group legend { width: 100%; margin-bottom: .32rem; color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.filter-group label { display: flex; align-items: center; gap: .3rem; font-size: .78rem; white-space: nowrap; }
.filter-group input { accent-color: var(--violet); }
#chooser-filters input[value="barnaby"] { accent-color: var(--chooser-barnaby); }
#chooser-filters input[value="tom"] { accent-color: var(--chooser-tom); }
#chooser-filters input[value="robert"] { accent-color: var(--chooser-robert); }
#chooser-filters input[value="interlude"] { accent-color: var(--chooser-interlude); }
.view-controls { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: .38rem; align-items: center; }
.view-controls button { font-size: .78rem; white-space: nowrap; }

.map-shell {
  position: relative;
  height: clamp(520px, 72vh, 920px);
  min-height: 520px;
  margin: 0 clamp(.4rem, 1vw, 1rem);
  overflow: hidden;
  border-top: 1px solid rgba(104,229,255,.12);
  border-bottom: 1px solid rgba(177,140,255,.14);
  background: radial-gradient(ellipse at center, rgba(25, 25, 62, .3), transparent 65%);
}
#graph { display: block; width: 100%; height: 100%; touch-action: none; }
.map-help { position: absolute; left: 1rem; bottom: .75rem; color: var(--muted); font-size: .72rem; pointer-events: none; }
#empty-state { position: absolute; inset: 48% 0 auto; text-align: center; color: var(--muted); }

.link { stroke-opacity: .43; fill: none; transition: opacity .2s, stroke-width .2s; }
.link.person { stroke: var(--cyan); }
.link.source { stroke: var(--violet); stroke-dasharray: 5 5; }
.link.production { stroke: var(--amber); stroke-dasharray: 2 5; }
.link.theme { stroke: var(--green); stroke-dasharray: 9 4; }
.link.dim { opacity: .07; }
.link.focused { stroke-opacity: .98; stroke-width: 2.8; filter: url(#glow); }

.movie-node { cursor: pointer; outline: none; }
.movie-node .poster-frame { fill: #10132c; stroke-width: 2; transition: opacity .18s, stroke-width .18s; }
.movie-node.normal .poster-frame { stroke: var(--cyan); }
.movie-node.reward .poster-frame { stroke: var(--amber); }
.movie-node.chooser-barnaby .poster-frame { stroke: var(--chooser-barnaby); }
.movie-node.chooser-tom .poster-frame { stroke: var(--chooser-tom); }
.movie-node.chooser-robert .poster-frame { stroke: var(--chooser-robert); }
.movie-node.chooser-interlude .poster-frame { stroke: var(--chooser-interlude); }
.movie-node.punishment .poster-frame { stroke: var(--red); filter: drop-shadow(0 0 4px rgba(255,26,26,.42)); }
.movie-node .node-label-bg { fill: rgba(5, 6, 18, .9); }
.movie-node .node-title { fill: var(--ink); font-size: 11px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.movie-node .node-date { fill: var(--muted); font-size: 9px; text-anchor: middle; pointer-events: none; }
.movie-node.dim { opacity: .15; }
.movie-node.focused .poster-frame, .movie-node:hover .poster-frame, .movie-node:focus .poster-frame { stroke-width: 4; filter: url(#glow); }

.hub-node { cursor: pointer; }
.hub-node circle { fill: rgba(29, 31, 72, .94); stroke: var(--violet); stroke-width: 1.5; }
.hub-node.production circle { stroke: var(--amber); }
.hub-node.source circle { stroke: var(--violet); }
.hub-node.theme circle { stroke: var(--green); fill: rgba(17, 54, 54, .94); }
.hub-node text { fill: var(--ink); font-size: 10px; text-anchor: middle; pointer-events: none; }
.hub-node.dim { opacity: .12; }
.hub-node.focused circle { stroke-width: 3; filter: url(#glow); }

.timeline-line { stroke: rgba(177,140,255,.32); stroke-width: 1.5; }
.timeline-tick { stroke: rgba(177,140,255,.25); }
.timeline-label { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.timeline-track-label { fill: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.timeline-track.punishment .timeline-line, .timeline-track.punishment .timeline-tick { stroke: rgba(255,26,26,.44); }
.timeline-track.punishment .timeline-track-label { fill: var(--red); }
.timeline-event-key { pointer-events: none; }
.timeline-event-key circle { fill: var(--red); filter: drop-shadow(0 0 5px rgba(255,26,26,.5)); }
.timeline-event-key-title { fill: var(--red); font-size: 10px; font-weight: 750; letter-spacing: .09em; }
.timeline-event-marker { cursor: pointer; outline: none; }
.timeline-event-stem { stroke: rgba(104,229,255,.4); stroke-width: 1.5; pointer-events: none; }
.timeline-event-hit { fill: transparent; pointer-events: all; }
.timeline-event-dot {
  fill: var(--red);
  stroke: #310000;
  stroke-width: 2;
  pointer-events: none;
  transition: r .16s ease, stroke-width .16s ease, filter .16s ease;
}
.timeline-event-marker:hover .timeline-event-dot,
.timeline-event-marker:focus .timeline-event-dot,
.timeline-event-marker[aria-expanded="true"] .timeline-event-dot {
  r: 8px;
  stroke: var(--focus);
  stroke-width: 2.5;
  filter: url(#glow);
}
.timeline-event-marker:focus-visible .timeline-event-hit { stroke: var(--focus); stroke-width: 2; }
.timeline-event-popover {
  position: absolute;
  z-index: 5;
  width: min(350px, calc(100% - 20px));
  max-height: calc(100% - 20px);
  overflow: auto;
  padding: 1rem 1.05rem .95rem;
  color: var(--ink);
  background: linear-gradient(155deg, rgba(31, 9, 27, .98), rgba(12, 14, 35, .98) 68%);
  border: 1px solid rgba(255,26,26,.65);
  border-top: 3px solid var(--red);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,.52), 0 0 24px rgba(255,26,26,.12);
  animation: timeline-popover-in .16s ease-out;
}
.timeline-event-popover::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
  content: "";
  pointer-events: none;
}
.timeline-event-popover h3 { margin: .12rem 1.8rem .55rem 0; color: var(--ink); font-size: 1rem; line-height: 1.18; }
.timeline-event-popover p { margin: .52rem 0; color: #ddd8e9; font-size: .78rem; line-height: 1.48; }
.timeline-event-popover .timeline-event-date { margin: 0; color: var(--red); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.timeline-event-popover .timeline-event-response { padding-top: .55rem; color: var(--muted); border-top: 1px solid rgba(255,26,26,.22); }
.timeline-event-close {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
}
.timeline-event-close:hover { color: #fff; background: rgba(255,26,26,.2); border-color: var(--red); }
.timeline-event-sources { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.timeline-event-sources a {
  padding: .34rem .56rem;
  color: var(--cyan);
  background: rgba(104,229,255,.05);
  border: 1px solid rgba(104,229,255,.27);
  border-radius: 999px;
  font-size: .7rem;
  text-decoration: none;
}
.timeline-event-sources a:hover { color: #fff; background: rgba(104,229,255,.12); }
@keyframes timeline-popover-in { from { opacity: 0; transform: translateY(5px); } }

.detail-backdrop {
  position: fixed;
  z-index: 999;
  inset: 0;
  background: rgba(2, 3, 12, .58);
}
.detail-panel {
  position: fixed;
  isolation: isolate;
  z-index: 1000;
  right: clamp(.6rem, 2vw, 1.5rem);
  top: clamp(.6rem, 2vw, 1.5rem);
  bottom: clamp(.6rem, 2vw, 1.5rem);
  width: min(560px, calc(100vw - 1.2rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0d0f24;
  border: 1px solid rgba(177,140,255,.36);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 60px rgba(102,72,180,.17);
}
.detail-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  padding: .65rem .7rem .65rem 1rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: #090b1d;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.detail-toolbar-start { display: flex; align-items: center; gap: .65rem; min-width: 0; }
#detail-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-back {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .35rem;
  min-height: 2.35rem;
  padding: .42rem .62rem;
  color: var(--cyan);
  background: rgba(104,229,255,.06);
  border-color: rgba(104,229,255,.28);
  font-size: .76rem;
  letter-spacing: .02em;
  text-transform: none;
}
.detail-back span { font-size: 1rem; }
.close-detail {
  position: relative;
  z-index: 4;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .42rem;
  min-width: 5.7rem;
  min-height: 2.55rem;
  justify-content: center;
  padding: .48rem .72rem;
  border-radius: 9px;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: none;
  touch-action: manipulation;
  pointer-events: auto;
}
.close-detail span { font-size: 1.35rem; line-height: .8; }
.detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.35rem 1.45rem 2rem;
}
.detail-hero { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 1.2rem; align-items: end; }
.detail-hero img { width: 128px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); }
.detail-panel[data-category="punishment"] .detail-hero img { border: 2px solid var(--red); box-shadow: 0 0 18px rgba(255,26,26,.2); }
.detail-hero h2 { margin: .18rem 0 .35rem; font-size: clamp(1.55rem, 4vw, 2.35rem); line-height: 1; }
.alternate, .detail-meta, .watch-date { margin: .3rem 0; color: var(--muted); font-size: .82rem; }
.watch-date { color: var(--amber); }
.synopsis { margin: 1.35rem 0; color: #dedbed; line-height: 1.62; }
.credits { display: grid; gap: .7rem; margin: 1.1rem 0; }
.credits div { display: grid; grid-template-columns: 95px 1fr; gap: .7rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.credits dt { color: var(--cyan); font-size: .73rem; text-transform: uppercase; letter-spacing: .06em; }
.credits dd { margin: 0; line-height: 1.42; }
.detail-panel h3 { margin: 1.25rem 0 .55rem; color: var(--violet); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.trivia { margin: 0; padding-left: 1.15rem; }
.connection-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.trivia li, .connection-list li { margin: .52rem 0; line-height: 1.43; }
.connection-list { color: #d7d3e7; }
.connection-summary {
  padding: .7rem 0;
  border-top: 1px solid var(--line);
}
.connection-summary:first-child { border-top: 0; }
.connection-summary button {
  margin: 0 0 .4rem;
  padding: .28rem .5rem;
  color: var(--cyan);
  background: transparent;
  border-color: rgba(104,229,255,.28);
}
.connection-summary span { display: block; margin-top: .3rem; color: var(--muted); font-size: .78rem; }
.connection-movie-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .42rem; margin-top: .35rem; }
.connection-movie-line span { display: inline; margin: 0; }
.inline-movie-link,
.movie-record-link {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: .14rem .2rem;
  color: var(--cyan);
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: .78rem;
  line-height: 1.3;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(104,229,255,.45);
  text-underline-offset: 3px;
}
.inline-movie-link:hover,
.movie-record-link:hover { color: #fff; background: rgba(104,229,255,.1); }
.movie-role-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  padding: .68rem 0;
  border-top: 1px solid var(--line);
}
.movie-role-card:first-child { border-top: 0; }
.movie-role-card img {
  width: 120px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  background: #10132c;
}
.movie-role-card.punishment img { border: 2px solid var(--red); }
.movie-role-card strong, .movie-role-card span, .movie-role-card a { display: block; }
.movie-role-card strong { color: var(--ink); }
.movie-role-card span { margin-top: .28rem; color: var(--amber); font-size: .78rem; }
.movie-role-card a { margin-top: .5rem; color: var(--cyan); font-size: .72rem; }
.movie-role-card .movie-record-link { margin: 0 0 .15rem; padding: 0; font-size: .95rem; font-weight: 700; }
.source-links { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; }
.source-links a { color: var(--cyan); border: 1px solid rgba(104,229,255,.28); border-radius: 999px; padding: .38rem .65rem; font-size: .74rem; text-decoration: none; }
.source-links a:hover { background: rgba(104,229,255,.1); }

footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 1rem; padding: .85rem clamp(1rem, 3vw, 3rem) 1.4rem; color: var(--muted); font-size: .72rem; }
footer p { margin: 0; }
.legend-stack { display: grid; gap: .35rem; }
.legend { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.legend-label { min-width: 4.8rem; color: var(--ink); font-weight: 650; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-left: .55rem; }
.legend-label + .dot { margin-left: 0; }
.dot.normal { background: var(--cyan); }
.dot.punishment { background: var(--red); }
.dot.reward { background: var(--amber); }
.dot.barnaby { background: var(--chooser-barnaby); }
.dot.tom { background: var(--chooser-tom); }
.dot.robert { background: var(--chooser-robert); }
.dot.interlude { background: var(--chooser-interlude); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1050px) {
  .controls { grid-template-columns: minmax(200px, 1fr) auto auto; }
  #relation-filters { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .masthead { align-items: flex-start; flex-wrap: wrap; gap: .65rem 1rem; }
  .archive-stats { order: 3; flex: 1 0 100%; justify-content: flex-start; padding-top: .35rem; border-top: 1px solid var(--line); }
  .return-link { margin-left: auto; }
  .controls { grid-template-columns: 1fr 1fr; }
  .search-control, .view-controls { grid-column: 1 / -1; }
  #relation-filters { grid-column: 1 / -1; }
  .map-shell { height: 68vh; min-height: 480px; }
  .detail-panel { left: .6rem; right: .6rem; width: auto; }
  footer { display: block; }
  footer .legend-stack { margin-top: .55rem; }
  footer .legend { flex-wrap: wrap; white-space: normal; }
  footer .legend-label { flex: 0 0 100%; min-width: 0; }
}
@media (max-width: 480px) {
  .masthead { flex-wrap: wrap; padding-top: .9rem; }
  .archive-stats { gap: .14rem .45rem; font-size: .69rem; }
  .archive-stats strong { font-size: .77rem; }
  h1 { font-size: 1.05rem; letter-spacing: .055em; }
  .return-link { margin-left: auto; }
  .controls { grid-template-columns: 1fr; }
  .search-control, .view-controls, #relation-filters { grid-column: auto; }
  .view-controls { flex-wrap: wrap; }
  .detail-panel { border-radius: 14px; }
  .detail-toolbar { gap: .35rem; padding-left: .55rem; }
  .detail-toolbar-start { gap: .35rem; }
  .detail-back { padding-inline: .48rem; }
  #detail-context { max-width: 8.5rem; }
  .detail-scroll { padding-inline: .85rem; }
  .detail-hero { grid-template-columns: 90px 1fr; }
  .detail-hero img { width: 90px; }
  .credits div { grid-template-columns: 82px 1fr; }
  .movie-role-card { grid-template-columns: 96px minmax(0, 1fr); }
  .movie-role-card img { width: 96px; }
  .timeline-event-popover { width: calc(100% - 16px); max-height: calc(100% - 16px); padding: .88rem .9rem .82rem; }
  .timeline-event-popover h3 { font-size: .94rem; }
  .timeline-event-popover p { font-size: .75rem; line-height: 1.42; }
  .map-help { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print {
  body { background: #fff; color: #111; }
  .stars, .controls-shell, .map-help, footer, .detail-panel, .detail-backdrop { display: none !important; }
  .masthead { color: #111; }
  .map-shell { height: 175mm; border: 1px solid #bbb; }
  #graph { background: #090b1d; }
}