/* The home page's own: the moving figure in each story card and Watch it
 * work (the drawn app playing six jobs, with buttons). The colours are
 * site.css's variables, so Light and Dark (site-theme.css) carry through; the
 * story is read over the night town and stays night. The app frame and the
 * figures themselves are static/dx/dx.css. Hand-written. */

/* ── the figures in the story's cards ────────────────────────────────────── */
.story .dx-fig, body[data-fig-theme="night"] .dx-fig { --dx-soft: #9fb2cc; --dx-line: rgba(140, 170, 220, 0.2); }
.story.has-gl .story-art.dx-fig { display: block; }
.story-art.dx-fig { margin: 18px 0 0; padding: 12px 12px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(140, 170, 220, 0.14); }
.story-art.dx-fig canvas { aspect-ratio: 16 / 8.5; }
@media (max-width: 899px) {
  .story-art.dx-fig { margin-top: 12px; padding: 8px 8px 4px; }
  .story-art.dx-fig canvas { aspect-ratio: 2.3 / 1; }
  .story-art.dx-fig .dx-fig-cap { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) { .story.has-gl .story-art.dx-fig { display: none; } }

/* ── Watch it work: the app playing the six jobs, with buttons ──────────── */
.hv-watch { position: relative; z-index: 2; padding: clamp(70px, 9vw, 120px) 0; background: var(--bg); color: var(--ink); }
/* (Dark: the night of the story above shades into it.) */
html[data-theme="dark"] .hv-watch::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: linear-gradient(180deg, rgba(5, 8, 15, 0.35), transparent); pointer-events: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .hv-watch::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: linear-gradient(180deg, rgba(5, 8, 15, 0.35), transparent); pointer-events: none; }
}
.hv-watch-in { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; grid-template-rows: auto auto 1fr auto; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
.hv-watch-head { grid-column: 1; grid-row: 1; }
.hv-watch-head .lede { margin-top: 14px; }
.hv-watch-stage { grid-column: 2; grid-row: 1 / span 4; position: relative; height: min(640px, calc(100vh - 160px)); height: min(640px, calc(100svh - 160px)); }
.hv-watch-stage .dx-device { height: 100%; }
.hv-picks { grid-column: 1; grid-row: 2; display: grid; gap: 8px; margin-top: 26px; }
.hv-picks button { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 13px 16px 15px; border: 0; border-radius: 14px; background: var(--card); color: var(--ink-soft); font: 600 15px/1.25 var(--font); text-align: left; cursor: pointer; box-shadow: 0 0 0 1px var(--line-soft); transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.hv-picks button::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background 0.3s ease, box-shadow 0.3s ease; }
.hv-picks button:hover { color: var(--ink); }
.hv-picks button[aria-pressed="true"] { color: var(--ink); box-shadow: 0 0 0 1.5px var(--accent); }
.hv-picks button[aria-pressed="true"]::before { background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
.hv-picks button i { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--line-soft); opacity: 0; }
.hv-picks button[aria-pressed="true"] i { opacity: 1; }
.hv-picks button i::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.hv-watch-cap { grid-column: 1; grid-row: 3; min-height: 4.5em; margin: 18px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.hv-note { grid-column: 1; grid-row: 4; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 899px) {
  .hv-watch-in { display: block; }
  .hv-watch-head { margin-bottom: 22px; }
  .hv-watch-stage { height: 62vh; height: 62svh; }
  .hv-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .hv-picks button { padding: 9px 12px 11px; font-size: 13px; border-radius: 999px; }
  .hv-picks button::before { display: none; }
  .hv-picks button i { left: 12px; right: 12px; bottom: 4px; }
  .hv-watch-cap { margin-top: 12px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .hv-picks button { transition: none; } }