:root {
  color-scheme: dark light;
  --bg: #0e0f13;
  --bg-raised: #161821;
  --bg-sunk: #0a0b0e;
  --line: #262a36;
  --text: #e8e9ee;
  --text-dim: #949aa8;
  --accent: #f0b429;
  --accent-dim: #6b5418;
  --actor: #7aa2f7;
  --actor-bg: #182135;
  --movie: #c9a227;
  --movie-bg: #241f12;
  --edge: #39405270;
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #faf9f7; --bg-raised: #fff; --bg-sunk: #f0eee9; --line: #e0ddd6;
    --text: #1b1c20; --text-dim: #6b6e78; --accent: #a8730a; --accent-dim: #e8d9b0;
    --actor: #2f5eb8; --actor-bg: #e8eef9; --movie: #8a6d11; --movie-bg: #f7f0dc;
    --edge: #c3c0b850;
  }
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only `display: none` in the UA stylesheet, so any
   author `display` rule silently beats it -- which is how .query (grid), .mode
   and .pz-done (flex) all stayed visible while hidden was set. */
[hidden] { display: none !important; }
body {
  margin: 0; padding: 0 1.25rem 4rem;
  background: var(--bg); color: var(--text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  max-width: 1180px; margin-inline: auto;
}
a { color: inherit; }

/* --- header ------------------------------------------------------------- */
.top { padding: 2.5rem 0 1.25rem; }
.wordmark {
  margin: 0; font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
}
/* The same path as favicon.svg, so the mark in the title and the mark in the
   tab cannot drift apart. viewBox is cropped to the glyph's inked bounds
   (stroke included) so `height` lines up with the ascender of the text beside
   it rather than to empty padding. */
/* The glyph replaced a literal "6", and an inline <svg role="img" aria-label>
   does not reliably feed the heading's accessible name -- Chrome announced the
   heading as just "acon". A hidden text node restores it dependably. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.wordmark .six {
  /* Because the viewBox is cropped to inked bounds, the SVG's bottom edge *is*
     the glyph baseline -- so default baseline alignment is already correct and
     any nudge just pushes it off. .78em puts the ascender where a real "b"
     would sit beside lowercase "acon". */
  height: .78em; width: auto; color: var(--accent);
  vertical-align: baseline; margin-right: .02em;
}
.tagline {
  margin: .6rem 0 0; color: var(--text-dim); max-width: 52ch;
  /* Keeps the last line from being a single orphaned word. The &nbsp; before
     "films." guarantees it even where text-wrap: pretty is unsupported. */
  text-wrap: pretty;
}
.tagline em { color: var(--text); font-style: italic; }

/* --- query -------------------------------------------------------------- */
.query {
  display: grid; gap: .75rem; align-items: end;
  grid-template-columns: 1fr auto 1fr auto;
  padding: 1rem; margin-top: 1.5rem;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
@media (max-width: 760px) {
  .query { grid-template-columns: 1fr; }
  .arrow { display: none; }
}
.field { position: relative; min-width: 0; }
.field label {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-dim); margin-bottom: .3rem;
}
.field input {
  width: 100%; padding: .6rem .7rem; font: inherit;
  background: var(--bg-sunk); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.arrow { color: var(--text-dim); padding-bottom: .55rem; font-size: 1.2rem; }
.actions { display: flex; gap: .5rem; }
/* The required-film row spans the whole grid, under the two actor fields. */
.field.via { grid-column: 1 / -1; }
.field.via .opt { text-transform: none; letter-spacing: 0; opacity: .75; }
.mode select {
  font: inherit; padding: .15rem .35rem; border-radius: 5px;
  background: var(--bg-sunk); color: var(--text); border: 1px solid var(--line);
}
.sep-dot { color: var(--line); }
.via-note {
  display: inline-block; margin-left: .5rem; padding: .1rem .45rem;
  border-radius: 999px; font-size: .78rem;
  background: var(--movie-bg); color: var(--movie); border: 1px solid var(--line);
}
button {
  font: inherit; padding: .6rem 1rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-sunk); color: var(--text);
}
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #18140a; font-weight: 600; }
button.ghost:hover:not(:disabled), button.primary:hover:not(:disabled) { filter: brightness(1.12); }

.suggest {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: .25rem 0 0;
  padding: .25rem; list-style: none; max-height: 15rem; overflow-y: auto;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 7px; box-shadow: 0 12px 32px #0006;
}
.suggest li {
  padding: .4rem .55rem; border-radius: 5px; cursor: pointer;
  display: flex; justify-content: space-between; gap: 1rem;
}
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--actor-bg); }
.suggest small { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* --- view switcher ------------------------------------------------------- */
.views { display: flex; gap: .4rem; margin: 1.5rem 0 1rem; }
.view {
  font: inherit; padding: .45rem .9rem; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--text-dim);
}
.view.on { background: var(--bg-raised); color: var(--text); border-color: var(--accent-dim); }
.view:hover:not(.on) { color: var(--text); }

/* --- daily puzzle -------------------------------------------------------- */
.puzzle-pane { max-width: 42rem; }
.pz-bar {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .9rem;
}
.pz-levels { display: flex; gap: .3rem; }
.lvl {
  font: inherit; font-size: .86rem; padding: .3rem .7rem; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text-dim);
}
.lvl.on { background: var(--bg-raised); color: var(--text); border-color: var(--accent-dim); }
.lvl:hover:not(.on) { color: var(--text); }
.pz-dates { display: flex; gap: .3rem; align-items: center; margin-left: auto; }
button.sm { font-size: .82rem; padding: .3rem .55rem; }
#pz-date {
  font: inherit; font-size: .84rem; padding: .25rem .4rem; border-radius: 6px;
  background: var(--bg-sunk); color: var(--text); border: 1px solid var(--line);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { #pz-date { color-scheme: light; } }
.pz-head {
  padding: 1rem 1.15rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.pz-pair { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1.15rem; font-weight: 600; }
.pz-actor { text-decoration: none; }
.pz-actor:hover { text-decoration: underline; }
.pz-arrow { color: var(--text-dim); }
.pz-rule { margin: .45rem 0 0; color: var(--text-dim); font-size: .92rem; }
.pz-rule b { color: var(--movie); font-weight: 600; }
/* Deliberately quiet: how others did is context, not part of the puzzle. */
.pz-stats {
  margin: .3rem 0 0; color: var(--text-dim); font-size: .8rem;
  font-variant-numeric: tabular-nums; opacity: .8;
}

.chain { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.chain li {
  display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .6rem; align-items: start;
  padding: .6rem .8rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: 8px; border-left: 3px solid var(--line);
}
.chain li.ok      { border-left-color: var(--accent); }
.chain li.offpar  { border-left-color: #8a7b3a; }
.chain li.bad     { border-left-color: #b4453a; }
.chain .n { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: .9rem; }
.chain .title { font-weight: 600; }
.chain .sub { color: var(--text-dim); font-size: .82rem; margin-top: .15rem; }
.chain .sub.err { color: #e08d84; }
.chain .drop {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 .2rem;
}
.chain .drop:hover { color: var(--text); }

.pz-add { margin-top: .75rem; max-width: 26rem; }
.pz-done { margin-top: 1.25rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pz-grid { font-size: 1.4rem; letter-spacing: .12em; margin: 0; }
.pz-score { margin: 0; color: var(--text-dim); }
.pz-fallback {
  display: block; width: 100%; max-width: 26rem; margin-top: .6rem; resize: none;
  font: inherit; padding: .5rem .6rem; border-radius: 7px;
  background: var(--bg-sunk); color: var(--text); border: 1px solid var(--line);
}

.mode { display: flex; gap: 1.1rem; margin: .9rem .2rem; color: var(--text-dim); font-size: .9rem; }
.mode label { display: flex; gap: .35rem; align-items: center; cursor: pointer; }
.status { color: var(--text-dim); margin: 1rem .2rem; min-height: 1.4em; }
.loadbar {
  height: 3px; margin: -.5rem .2rem 1rem; border-radius: 2px;
  background: var(--bg-raised); overflow: hidden; max-width: 22rem;
}
.loadbar-fill {
  height: 100%; width: 0; background: var(--accent);
  transition: width .18s linear;
}

/* --- guess -------------------------------------------------------------- */
.guess { padding: 1.25rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.guess p { margin: 0 0 .8rem; }
.guess-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.guess-buttons button { min-width: 3rem; font-variant-numeric: tabular-nums; }

/* --- summary ------------------------------------------------------------ */
.summary { display: flex; gap: 1.25rem; align-items: center; margin: 1.5rem 0 1rem; }
.degree {
  display: grid; place-items: center; width: 5.2rem; height: 5.2rem; flex: none;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.degree span { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--accent); }
.degree small { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.meta p { margin: 0 0 .3rem; }
.shown { color: var(--text-dim); font-size: .88rem; }
.verdict { font-weight: 600; }
.verdict.good { color: var(--accent); }

.picks { display: grid; gap: .65rem; grid-template-columns: 1fr 1fr; margin-bottom: 1.25rem; }
@media (max-width: 760px) { .picks { grid-template-columns: 1fr; } }
.pick {
  padding: .7rem .85rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-left: 3px solid var(--accent-dim); border-radius: 7px;
}
.pick h3 {
  margin: 0 0 .3rem; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-dim); font-weight: 600;
}
.pick .route { font-size: .92rem; }
.pick .route b { font-weight: 600; }
.pick .why { color: var(--text-dim); font-size: .82rem; margin-top: .25rem; }

/* --- graph -------------------------------------------------------------- */
.canvas-wrap {
  /* Both axes scroll. Fully expanded, a popular pair lays out ~5000px tall,
     which would otherwise push the rest of the page off into the distance;
     bounding it keeps the graph scannable and the page finite. */
  overflow: auto; max-height: 74vh;
  background: var(--bg-sunk);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem;
  overscroll-behavior: contain;
}
.canvas { position: relative; }
.canvas svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.node {
  position: absolute; width: 168px; padding: .45rem .55rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-raised);
  font-size: .8rem; line-height: 1.3; text-decoration: none; color: inherit;
  display: block; transition: transform .12s, box-shadow .12s;
}
.node:hover { transform: translateY(-1px); box-shadow: 0 6px 18px #0005; z-index: 5; }
/* Actor cards become a two-column flex: badge, then text. Movie cards keep
   the original single-column layout. */
.node.actor { display: flex; gap: .45rem; align-items: center; }
.node-body { min-width: 0; }

.badge {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--bg-sunk); color: var(--text-dim);
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--line);
}
.badge img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.node .name { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.node .sub { color: var(--text-dim); font-size: .72rem; font-variant-numeric: tabular-nums; margin-top: .1rem; }
.node.actor { border-left: 3px solid var(--actor); background: var(--actor-bg); }
.node.movie { border-left: 3px solid var(--movie); background: var(--movie-bg); }
.node.endpoint { outline: 2px solid var(--accent); }
.canvas path { fill: none; stroke: var(--edge); stroke-width: 1.5; }

.longer-actions { margin: 1.25rem 0; display: flex; gap: .5rem; flex-wrap: wrap; }
#longer section { margin-top: 1.75rem; }
#longer h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim); border-top: 1px solid var(--line); padding-top: 1rem;
}
.routelist { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.routelist li {
  padding: .6rem .8rem; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 7px; font-size: .9rem;
}
.routelist .sep { color: var(--text-dim); padding: 0 .35rem; }

.foot { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
        color: var(--text-dim); font-size: .8rem; }
.foot p { margin: .3rem 0; }
.stats { font-family: var(--mono); font-size: .74rem; }