*, *::before, *::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body, h1, h2, p, figure, dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}
ol, ul {
  list-style: none;
}
img, video {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button, input {
  font: inherit;
  color: inherit;
}
:root {
  --ink: #0b0b0d;
  --ink-2: #101014;
  --steel: #17171c;
  --steel-2: #1e1e24;
  --line: #2a2a31;
  --line-soft: #22222a;
  --ash: #8b8b93;
  --ash-dim: #64646d;
  --bone: #d8d5cf;
  --bone-dim: #a9a69f;
  --rust: #b5451f;
  --ember: #e2621c;
  --blood: #7e1f16;
  --cyan: #c8fbff;
  --cyan-deep: #7fe9f2;
  --font: "Helvetica Neue", "Arial Narrow", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, sans-serif;
  --gap: 10px;
  --pad: 12px;
}
html {
  background: var(--ink);
}
body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--bone-dim);
  background:
    radial-gradient(120% 70% at 18% 0%, rgba(226, 98, 28, 0.06), transparent 60%),
    radial-gradient(90% 60% at 90% 100%, rgba(126, 31, 22, 0.07), transparent 65%),
    var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.014) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9, 9, 11, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.header-rail {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 7px 14px;
  max-width: 1480px;
  margin: 0 auto;
}
.site-brand {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
  border-left: 3px solid var(--ember);
  padding-left: 8px;
}
a[data-contract="site-name"] {
  color: var(--bone);
  text-decoration: none;
}
a[data-contract="site-name"]:hover {
  color: var(--ember);
}
.categories-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
a.runtime-category {
  display: inline-block;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  color: var(--ash);
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--ink-2);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
a.runtime-category:hover {
  color: var(--cyan);
  border-color: var(--cyan-deep);
  background: #10171a;
}
.page-main {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 14px 26px;
  display: block;
}
.page-main > section {
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 0 18px;
}
.page-main > section:last-child {
  border-bottom: 0;
}
.hero-gear {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas:
    "gear side"
    "gear poster"
    "title poster"
    "title details"
    "status details"
    "synopsis details";
  gap: var(--gap);
  align-items: start;
  padding-top: 18px;
}
.gear-cross-section {
  grid-area: gear;
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 620px;
  background:
    radial-gradient(circle at 50% 50%, #1a1a20 0%, #0d0d10 62%, #08080a 100%);
  border: 1px solid var(--line);
  overflow: hidden;
}
.gear-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid #2f2f38;
  background:
    conic-gradient(
      from 0deg,
      #1c1c22 0deg 12deg,
      #101014 12deg 24deg,
      #191920 24deg 36deg,
      #0e0e12 36deg 48deg,
      #1c1c22 48deg 60deg,
      #101014 60deg 72deg,
      #191920 72deg 84deg,
      #0e0e12 84deg 96deg,
      #1c1c22 96deg 108deg,
      #101014 108deg 120deg,
      #191920 120deg 132deg,
      #0e0e12 132deg 144deg,
      #1c1c22 144deg 156deg,
      #101014 156deg 168deg,
      #191920 168deg 180deg,
      #0e0e12 180deg 192deg,
      #1c1c22 192deg 204deg,
      #101014 204deg 216deg,
      #191920 216deg 228deg,
      #0e0e12 228deg 240deg,
      #1c1c22 240deg 252deg,
      #101014 252deg 264deg,
      #191920 264deg 276deg,
      #0e0e12 276deg 288deg,
      #1c1c22 288deg 300deg,
      #101014 300deg 312deg,
      #191920 312deg 324deg,
      #0e0e12 324deg 336deg,
      #1c1c22 336deg 348deg,
      #101014 348deg 360deg
    );
  box-shadow:
    inset 0 0 0 22px #0a0a0c,
    inset 0 0 0 58px #131318,
    inset 0 0 70px rgba(226, 98, 28, 0.16),
    0 0 40px rgba(0, 0, 0, 0.9);
}
.gear-ring::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, #26262e 0%, #131318 55%, #08080a 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.95),
    0 0 24px rgba(181, 69, 31, 0.2);
}
.gear-tooth-slot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.silhouette {
  position: absolute;
  width: 34px;
  height: 52px;
  font-size: 0;
  color: transparent;
  background: linear-gradient(180deg, #050506 0%, #0a0a0d 70%, #131318 100%);
  border-radius: 45% 45% 30% 30% / 60% 60% 40% 40%;
  box-shadow: 0 0 0 1px #24242c, 0 0 14px rgba(226, 98, 28, 0.18);
}
.silhouette::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #040405;
  box-shadow: 0 0 0 1px #2a2a33;
}
.silhouette-1 {
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
}
.silhouette-2 {
  right: 6%;
  top: 26%;
  transform: translateX(0) rotate(60deg);
}
.silhouette-3 {
  right: 16%;
  bottom: 12%;
  transform: rotate(120deg);
}
.silhouette-4 {
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%) rotate(180deg);
}
.silhouette-5 {
  left: 6%;
  bottom: 24%;
  transform: rotate(240deg);
}
.silhouette-6 {
  left: 16%;
  top: 12%;
  transform: rotate(300deg);
}
.gear-glow-seam {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(
      from 20deg,
      transparent 0deg 40deg,
      rgba(226, 98, 28, 0.5) 52deg,
      rgba(126, 31, 22, 0.55) 62deg,
      transparent 74deg 160deg,
      rgba(226, 98, 28, 0.42) 172deg,
      rgba(126, 31, 22, 0.5) 182deg,
      transparent 194deg 300deg,
      rgba(226, 98, 28, 0.34) 312deg,
      rgba(126, 31, 22, 0.44) 322deg,
      transparent 334deg 360deg
    );
  filter: blur(9px);
  mix-blend-mode: screen;
  animation: gear-breathe 7s ease-in-out infinite;
}
@keyframes gear-breathe {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}
.hero-side-column {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: stretch;
}
.cast-vertical-strip {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 8px 10px 10px;
}
.cast-strip-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: var(--ember);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
  margin-bottom: 6px;
}
.cast-roster {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cast-entry {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--bone-dim);
  padding: 2px 0 2px 10px;
  border-left: 1px solid var(--line);
  position: relative;
}
.cast-entry::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  width: 3px;
  height: 3px;
  transform: translateY(-50%);
  background: var(--rust);
}
.countdown-block {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #131318, #0c0c0f);
  padding: 9px 10px 10px;
}
.countdown-digits {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(226, 98, 28, 0.4);
}
.countdown-caption {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ash-dim);
}
.poster-column {
  grid-area: poster;
  align-self: start;
}
.poster-shell {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 4px;
  width: 100%;
}
.poster-shell img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.72) contrast(1.06) brightness(0.94);
}
.title-unit {
  grid-area: title;
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 10px 12px 12px;
}
.movie-title {
  font-size: clamp(30px, 5.4vw, 62px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-transform: none;
  text-shadow: 0 0 26px rgba(181, 69, 31, 0.28);
}
.movie-tagline {
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ember);
  border-left: 2px solid var(--rust);
  padding-left: 8px;
}
.movie-seo {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--ash);
  max-width: 62ch;
}
.episode-status {
  grid-area: status;
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 7px 11px;
  font-variant-numeric: tabular-nums;
}
.status-current {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ember);
}
.status-divider {
  color: var(--line);
  font-size: 14px;
}
.status-total {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ash);
}
.synopsis-block {
  grid-area: synopsis;
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 10px 12px 12px;
}
.synopsis-heading, .episode-heading, .hex-heading, .comment-heading, .timeline-heading, .strip-heading {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4em;
  color: var(--ash);
  text-transform: uppercase;
  padding-bottom: 6px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.synopsis-heading::before, .episode-heading::before, .hex-heading::before, .comment-heading::before, .timeline-heading::before, .strip-heading::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--ember);
  box-shadow: 0 0 8px rgba(226, 98, 28, 0.5);
}
.synopsis-paragraph {
  font-size: 12px;
  line-height: 1.72;
  color: var(--ash);
  margin-bottom: 7px;
}
.synopsis-paragraph:last-child {
  margin-bottom: 0;
}
.detail-grid {
  grid-area: details;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.detail-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ink-2);
  padding: 6px 9px;
  min-width: 0;
}
.detail-key {
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--ash-dim);
  text-transform: uppercase;
}
.detail-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--bone);
  word-break: break-word;
}
.player-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player-frame {
  width: 100%;
  border: 1px solid var(--line);
  background: #000;
  padding: 4px;
  position: relative;
}
.player-frame video {
  width: 100%;
  display: block;
  background: #000;
}
.player-stage.is-light-off .player-frame {
  filter: brightness(0.42) contrast(1.15);
}
.player-stage.is-theater {
  background: #050506;
  border: 1px solid var(--rust);
  padding: 10px;
  box-shadow: inset 0 0 60px rgba(126, 31, 22, 0.22);
}
.player-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 7px 9px;
}
.player-controls button {
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 9px;
  cursor: pointer;
  color: var(--bone-dim);
  background: var(--steel);
  border: 1px solid var(--line);
  white-space: nowrap;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.player-controls button:hover {
  color: var(--cyan);
  border-color: var(--cyan-deep);
  background: #0f1619;
}
.player-controls button.play, .player-controls button.pause {
  color: var(--ember);
  border-color: var(--rust);
}
.player-controls input[type="range"] {
  flex: 1 1 120px;
  min-width: 90px;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--steel-2);
  border: 1px solid var(--line);
  cursor: pointer;
}
.player-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ember);
  border: 1px solid #2a1109;
  box-shadow: 0 0 8px rgba(226, 98, 28, 0.7);
}
.player-controls input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ember);
  border: 1px solid #2a1109;
}
.player-controls input[type="range"].progress, .player-controls input[type="range"].volume {
  accent-color: var(--ember);
}
.player-stage.is-playing .player-frame {
  border-color: #3a2418;
}
.player-stage.is-muted .player-controls button.mute, .player-stage.is-muted .player-controls button.volume {
  color: var(--ash-dim);
  border-color: var(--line);
}
.timeline-ruler {
  display: flex;
  flex-direction: column;
}
.timeline-scale {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
}
.timeline-tick {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--ink-2);
  padding: 7px 9px 8px;
  min-width: 0;
  position: relative;
  transition: background 0.18s ease;
}
.timeline-tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--ember), transparent);
  opacity: 0.35;
}
.timeline-tick:hover {
  background: #141419;
}
.timeline-tick:hover .tick-timecode {
  color: var(--cyan);
}
.tick-timecode {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.tick-label {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ash);
}
.episode-stack {
  display: flex;
  flex-direction: column;
}
.episode-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  align-items: start;
}
.episode-card {
  background: var(--ink-2);
  min-width: 0;
  transition: background 0.18s ease;
}
.episode-card:hover {
  background: #141419;
}
.episode-card-face {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}
.episode-card-face::-webkit-details-marker {
  display: none;
}
.gear-index {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ember);
  border: 1px solid var(--rust);
  padding: 2px 5px;
  white-space: nowrap;
  background: #150c08;
}
.episode-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.episode-duration {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ash-dim);
  white-space: nowrap;
}
.episode-summary {
  font-size: 11.5px;
  line-height: 1.66;
  color: var(--ash);
  padding: 0 10px 10px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 8px;
}
.episode-card-inversion {
  background: #0d1516;
  box-shadow: inset 0 0 0 1px var(--cyan-deep);
}
.episode-card-inversion .episode-card-face {
  border-left: 3px solid var(--cyan);
}
.episode-card-inversion .gear-index {
  color: #06181a;
  background: var(--cyan);
  border-color: var(--cyan);
  text-shadow: none;
}
.episode-card-inversion .episode-title {
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(200, 251, 255, 0.55);
}
.episode-card-inversion .episode-summary {
  color: #9fd6da;
  border-top-color: #1c3336;
}
.cast-hex-grid {
  display: flex;
  flex-direction: column;
}
.hex-cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.hex-cell {
  position: relative;
  aspect-ratio: 1 / 1.12;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, #26262e, #101014);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hex-cell::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ink-2);
}
.hex-cell::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%) rotate(24deg);
  background: var(--ink);
  box-shadow: -1px 0 0 var(--rust);
}
.hex-face {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
  text-align: center;
  padding: 0 4px;
}
.hex-cell:hover .hex-face {
  color: var(--ember);
}
.comment-mosaic {
  display: flex;
  flex-direction: column;
}
.comment-masonry {
  columns: 2;
  column-gap: 10px;
}
.comment-note {
  break-inside: avoid;
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 8px 10px 9px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 2px solid var(--steel-2);
}
.comment-short {
  margin-left: 14%;
  border-left-color: var(--ember);
}
.comment-long {
  border-left-color: var(--rust);
  background: #121216;
}
.comment-nickname {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ember);
}
.comment-long .comment-nickname {
  color: var(--bone);
}
.comment-text {
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--ash);
}
.comment-long .comment-text {
  color: var(--bone-dim);
}
.recommend-strip {
  display: flex;
  flex-direction: column;
}
.strip-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}
.strip-heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.strip-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rust) var(--ink-2);
}
.strip-track::-webkit-scrollbar {
  height: 5px;
}
.strip-track::-webkit-scrollbar-track {
  background: var(--ink-2);
}
.strip-track::-webkit-scrollbar-thumb {
  background: var(--rust);
}
a.strip-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--ink-2);
  padding: 6px 7px 8px;
  min-width: 0;
  color: var(--bone-dim);
  text-decoration: none;
  transition: background 0.16s ease;
}
a.strip-item:hover {
  background: #15151a;
}
[data-runtime="recommendation"] {
  align-self: start;
}
[data-runtime="recommendation"] img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #000;
  border: 1px solid var(--line);
  filter: saturate(0.7) contrast(1.05) brightness(0.9);
  transition: filter 0.2s ease;
}
[data-runtime="recommendation"]:hover img {
  filter: saturate(1) contrast(1.08) brightness(1);
}
.strip-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip-blurb {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ash-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.site-footer {
  border-top: 1px solid var(--line);
  background: #08080a;
  padding: 14px 14px 22px;
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-disclaimer {
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ash-dim);
  max-width: 92ch;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.footer-nav a {
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 4px 9px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  transition: color 0.15s ease, border-color 0.15s ease;
}
a[data-contract="footer-home"] {
  color: var(--bone-dim);
  text-decoration: none;
}
a[data-contract="footer-home"]:hover {
  color: var(--ember);
  border-color: var(--rust);
}
a[data-contract="footer-sitemap"] {
  color: var(--ash);
  text-decoration: none;
}
a[data-contract="footer-sitemap"]:hover {
  color: var(--cyan);
  border-color: var(--cyan-deep);
}
.friend-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.friend-links-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ash-dim);
  text-transform: uppercase;
  margin-right: 3px;
}
a.runtime-friend-link {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ash);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
  padding: 1px 0;
}
a.runtime-friend-link:hover {
  color: var(--ember);
  border-bottom-color: var(--rust);
}
.player .is-playing, .player.is-playing {
  color: var(--ember);
}
.click, .input, .timeupdate, .volume, .progress, .speed, .mute, .play, .pause, .pip, .fullscreen, .theater, .light {
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.is-muted {
  opacity: 0.96;
}
.is-theater .player-controls {
  border-color: var(--rust);
}
.is-light-off .player-controls {
  border-color: #1c1c22;
}
@media (max-width: 1180px) {.hero-gear {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
      "gear side"
      "gear poster"
      "title poster"
      "title details"
      "status details"
      "synopsis synopsis";
  }
.timeline-scale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.episode-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.hex-cells {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }}
@media (max-width: 860px) {.hero-gear {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "gear"
      "side"
      "poster"
      "title"
      "status"
      "synopsis"
      "details";
  }
.gear-cross-section {
    max-height: none;
  }
.poster-column {
    max-width: 320px;
  }
.comment-masonry {
    columns: 1;
  }
.comment-short {
    margin-left: 0;
  }
.detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}
@media (max-width: 620px) {body {
    font-size: 12.5px;
  }
.header-rail {
    padding: 6px 10px;
    gap: 9px;
  }
.page-main {
    padding: 0 10px 20px;
  }
.page-main > section {
    padding: 12px 0 14px;
  }
.timeline-scale {
    grid-template-columns: minmax(0, 1fr);
  }
.episode-cards {
    grid-template-columns: minmax(0, 1fr);
  }
.episode-card-face {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 4px;
  }
.episode-duration {
    grid-column: 2;
    justify-self: start;
  }
.hex-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.strip-track {
    grid-auto-columns: minmax(140px, 74%);
  }
.player-controls button {
    padding: 5px 7px;
    font-size: 10.5px;
  }
.player-controls input[type="range"] {
    flex: 1 1 100%;
  }
.poster-column {
    max-width: 260px;
  }
.countdown-digits {
    font-size: 22px;
  }
.site-footer {
    padding: 12px 10px 20px;
  }}
@media (max-width: 420px) {.detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
.strip-track {
    grid-auto-columns: minmax(130px, 82%);
  }}

footer{text-align:center!important}
footer *{justify-content:center!important}
footer :is(div,nav,ul,ol,p,section,address){margin-left:auto!important;margin-right:auto!important}