/* The folded receiver is not a media menu: it is the surface aperture of a private collection. */
.crossroad-hero > .trailer-archive .trailer-preview-action {
  gap: 8px;
  letter-spacing: .085em;
}

.crossroad-hero > .trailer-archive .trailer-preview-action b {
  font-size: 7px;
}

.crossroad-hero > .trailer-archive .trailer-preview-action em {
  opacity: .76;
}

.crossroad-hero > .trailer-archive.has-surface-art .trailer-preview-image.is-depth-0 {
  filter: brightness(.76) saturate(.78) contrast(1.04);
}

.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image.is-depth-0,
.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image.is-depth-0 {
  filter: brightness(.93) saturate(.94) contrast(1.02);
}

.trailer-archive-body {
  position: relative;
}

.collection-room {
  display: none;
}

/* The room is a viewport overlay. Its fixed geometry must settle in the click
   frame; the authored window transition itself runs on transform and opacity. */
.crossroad-hero > .trailer-archive:is(.is-collection-opening, .is-depth-mode) {
  transition: opacity 180ms ease-out !important;
}

.crossroad-hero > .trailer-archive:is(.is-collection-opening, .is-depth-mode) .trailer-archive-inner,
.crossroad-hero > .trailer-archive:is(.is-collection-opening, .is-depth-mode) .trailer-archive-body {
  transition: none !important;
}

/* Rear cards still read as a stack, but remain smaller LCP candidates than the
   front surface when IndexedDB-backed artwork becomes available later. */
.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-image.is-depth-1 {
  width: var(--trailer-depth-1-w, 187px) !important;
  height: var(--trailer-depth-1-h, 105px) !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-image.is-depth-2 {
  width: var(--trailer-depth-2-w, 179px) !important;
  height: var(--trailer-depth-2-h, 101px) !important;
}

.trailer-archive.is-depth-mode.is-collection-threshold .trailer-archive-body {
  max-height: none !important;
  min-height: min(688px, calc(100svh - 32px));
  overflow: visible;
}

/* Only the left field is a tap-to-return target. The collection surface owns
   the full viewport height, so no return gutter remains above or below it. */
.crossroad-hero > .trailer-archive.is-depth-mode.is-collection-threshold:not(.is-collapsed) {
  height: 100svh !important;
  max-height: none !important;
}

.trailer-archive:is(.is-collection-opening, .is-collection-threshold) .trailer-archive-head,
.trailer-archive:is(.is-collection-opening, .is-collection-threshold) .trailer-wall,
.trailer-archive:is(.is-collection-opening, .is-collection-threshold) .trailer-archive-rail,
.trailer-archive:is(.is-collection-opening, .is-collection-threshold) .trailer-depth-index,
.trailer-archive:is(.is-collection-opening, .is-collection-threshold) .trailer-collapsed-preview,
.trailer-archive:is(.is-collection-opening, .is-collection-threshold) .trailer-preview-motion,
.trailer-archive:is(.is-collection-opening, .is-collection-threshold) .trailer-ambient-glow {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
}

.trailer-archive.is-collection-threshold .trailer-settings-float {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.trailer-archive.is-collection-threshold .collection-room {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: block;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(147, 211, 244, .34) transparent;
  overscroll-behavior: contain;
  overflow-anchor: none;
  color: #e6eef4;
  background: #020a11;
  box-shadow: none;
  transform-origin: 50% 48%;
  animation: collectionRoomEnter 720ms cubic-bezier(.22, .72, .18, 1) both;
}

html .trailer-archive[data-collection-entry-effect^="window-"].is-collection-threshold .collection-room {
  animation: none !important;
  transition: none !important;
  transform-origin: 0 0;
  backface-visibility: hidden;
}

html .trailer-archive[data-collection-entry-effect^="window-"] .collection-room-shell {
  transform: none;
}

html .trailer-archive[data-collection-entry-effect^="window-"].is-collection-entering .collection-room-shell {
  opacity: 0;
}

html .trailer-archive[data-collection-entry-effect^="window-"].is-collection-entering .trailer-archive-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
}

.collection-window-depth-surface {
  position: fixed;
  z-index: 130;
  display: none;
  overflow: hidden;
  pointer-events: none;
  background: #020a11;
  transform-origin: 0 0;
  backface-visibility: hidden;
  contain: strict;
}

.collection-window-depth-surface.is-active {
  display: block;
}

.collection-window-still-image {
  position: fixed;
  z-index: 131;
  display: none;
  pointer-events: none;
  object-fit: cover;
  backface-visibility: hidden;
  filter: none;
}

.collection-window-still-image.is-active {
  display: block;
}

.trailer-archive:is(.is-collection-entering, .is-collection-exiting) .collection-room {
  will-change: transform, opacity;
}

.trailer-archive.is-collection-exiting .collection-room {
  animation: collectionRoomExit 720ms cubic-bezier(.22, .72, .18, 1) both;
  pointer-events: none;
}

.trailer-archive.is-collection-threshold .collection-room::-webkit-scrollbar {
  width: 4px;
}

.trailer-archive.is-collection-threshold .collection-room::-webkit-scrollbar-track {
  background: transparent;
}

.trailer-archive.is-collection-threshold .collection-room::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(170, 224, 250, .08), rgba(156, 217, 247, .52), rgba(170, 224, 250, .08));
  box-shadow: 0 0 9px rgba(124, 202, 243, .16);
}

.trailer-archive.is-collection-threshold .collection-room::-webkit-scrollbar-button,
.trailer-archive.is-collection-threshold .collection-room::-webkit-scrollbar-corner {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

.collection-room::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(1040px, calc(100% - 72px));
  pointer-events: none;
  background: #020a11;
  transform: translateX(-50%);
}

.collection-room-shell { position: relative; z-index: 2; }

/* The exposed veil is the tap-to-return area. Keep it opaque and visibly
   separate from the collection surface so the previous screen cannot show
   through as visual noise. */
.crossroad-hero.is-trailer-depth > .trailer-focus-veil {
  inset: 0 0 0 calc(-1 * var(--rail-w)) !important;
  background: linear-gradient(180deg, #03090f 0%, #02070c 42%, #010408 100%) !important;
  backdrop-filter: none;
}

/* Collection view: the exposed left field remains a solid return target. */
.crossroad-hero.is-trailer-depth:has(> .trailer-archive.is-collection-threshold) > .trailer-focus-veil {
  background: linear-gradient(180deg, #03090f 0%, #02070c 42%, #010408 100%) !important;
  backdrop-filter: none;
  cursor: pointer;
}

.collection-z-gate {
  position: fixed;
  z-index: 90;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

/* Keep the Z path on one motion budget while ambient scene loops pause. */
html.is-collection-z-motion-quiet .world::before,
html.is-collection-z-motion-quiet .world::after,
html.is-collection-z-motion-quiet .crossroad-hero > :not(.trailer-archive),
html.is-collection-z-motion-quiet .crossroad-hero > :not(.trailer-archive)::before,
html.is-collection-z-motion-quiet .crossroad-hero > :not(.trailer-archive)::after,
html.is-collection-z-motion-quiet .crossroad-hero > :not(.trailer-archive) *,
html.is-collection-z-motion-quiet .crossroad-hero > :not(.trailer-archive) *::before,
html.is-collection-z-motion-quiet .crossroad-hero > :not(.trailer-archive) *::after,
html.is-collection-z-motion-quiet .ambient-art-layer *,
html.is-collection-z-motion-quiet .ambient-art-layer *::before,
html.is-collection-z-motion-quiet .ambient-art-layer *::after {
  animation-play-state: paused !important;
}

.collection-z-aperture {
  position: absolute;
  z-index: 1;
  left: var(--ap-x, 72%);
  top: var(--ap-y, 8%);
  width: var(--ap-w, 190px);
  height: var(--ap-h, 108px);
  overflow: hidden;
  border: 1px solid rgba(155, 215, 245, .36);
  background: #030a10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24), 0 0 18px rgba(130, 205, 252, .08);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
}

.collection-z-aperture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(.72) saturate(.72);
}

.collection-z-refraction {
  position: fixed;
  z-index: 5;
  left: var(--tap-x, 50vw);
  top: var(--tap-y, 50vh);
  width: 78px;
  height: 78px;
  border: 1px solid rgba(155, 215, 245, .22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116, 193, 231, .1), rgba(116, 193, 231, .025) 48%, transparent 70%);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.72);
}

.collection-z-baseline {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 68%;
  width: 100%;
  height: 1px;
  transform-origin: var(--ap-cx, 50%) 50%;
  background: rgba(130, 205, 252, .82);
  box-shadow: 0 0 8px rgba(130, 205, 252, .12);
  opacity: 0;
}

.collection-z-gate.is-active {
  animation: collectionZGateRelease 720ms linear both;
}

.collection-z-gate.is-active .collection-z-aperture {
  animation: collectionZAperture 260ms cubic-bezier(.22, .72, .18, 1) both;
  will-change: transform, opacity;
}

.collection-z-gate.is-active .collection-z-aperture img {
  animation: collectionZApertureImage 260ms ease both;
}

.collection-z-gate.is-active .collection-z-refraction {
  animation: collectionZRefraction 120ms cubic-bezier(.22, .72, .18, 1) both;
}

.collection-z-gate.is-active .collection-z-baseline {
  animation: collectionZBaseline 720ms cubic-bezier(.22, .72, .18, 1) both;
}

.collection-z-gate.is-active.is-exiting {
  animation-duration: 720ms;
}

.collection-z-gate.is-active.is-exiting .collection-z-aperture {
  animation: collectionZApertureExit 240ms cubic-bezier(.22, .72, .18, 1) 420ms both;
}

.collection-z-gate.is-active.is-exiting .collection-z-aperture img {
  animation: collectionZApertureImageExit 240ms ease 420ms both;
}

.collection-z-gate.is-active.is-exiting .collection-z-refraction {
  animation: none;
}

@keyframes collectionZBaseline {
  0% { transform: scaleX(.18); opacity: 0; }
  18% { transform: scaleX(.72); opacity: .72; }
  54% { transform: scaleX(1); opacity: .28; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes collectionZAperture {
  0% { opacity: .94; transform: translate3d(0, 0, 0) scale(1); border-color: rgba(155, 215, 245, .4); }
  46% { opacity: .82; transform: translate3d(0, 0, 0) scale(1.015); border-color: rgba(155, 215, 245, .28); }
  100% { opacity: 0; transform: translate3d(0, 0, 0) scale(1.015); border-color: rgba(155, 215, 245, 0); }
}

@keyframes collectionZApertureImage {
  0%, 46% { opacity: .92; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.006); }
}

@keyframes collectionZGateRelease {
  0%, 86% { visibility: visible; opacity: 1; }
  100% { visibility: hidden; opacity: 0; }
}

@keyframes collectionZRefraction {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.72); }
  42% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.22); }
}

@keyframes collectionZApertureExit {
  from { opacity: 0; transform: translate3d(0, 0, 0) scale(1.015); border-color: rgba(155, 215, 245, 0); }
  to { opacity: .92; transform: translate3d(0, 0, 0) scale(1); border-color: rgba(155, 215, 245, .32); }
}

@keyframes collectionZApertureImageExit {
  from { opacity: 0; transform: scale(1.006); }
  to { opacity: .88; transform: scale(1); }
}

.crossroad-hero > .trailer-archive.is-depth-mode.is-collection-threshold:not(.is-collapsed) > .trailer-archive-inner > .trailer-archive-toggle {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.crossroad-hero > .trailer-archive.is-depth-mode.is-collection-threshold:not(.is-collapsed) > .trailer-archive-inner > .trailer-archive-toggle:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: transparent !important;
}

.collection-room-shell {
  width: min(1040px, calc(100% - 72px));
  min-height: 0;
  margin: 0 auto;
  padding: clamp(18px, 2.5svh, 26px) 0 clamp(20px, 3svh, 30px);
}

.collection-room-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 0;
}

.collection-room-kicker {
  margin: 0 0 6px;
  color: rgba(137, 201, 237, .72);
  font: 700 8px/1 var(--mono);
  letter-spacing: .26em;
}

.collection-room-head h2 {
  margin: 0;
  color: rgba(238, 246, 250, .96);
  font-family: var(--jp);
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: .055em;
  outline: none;
}

.collection-room-state {
  display: grid;
  justify-items: end;
  gap: 5px;
  padding-bottom: 4px;
  color: rgba(139, 201, 234, .7);
  font: 700 8px/1 var(--mono);
  letter-spacing: .2em;
}

.collection-room-state strong {
  color: rgba(224, 241, 249, .82);
  font: 300 clamp(28px, 3.2vw, 42px)/.85 var(--display);
  letter-spacing: .04em;
}

.collection-room-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 176px;
  gap: clamp(14px, 1.8vw, 24px);
}

.collection-room-card-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.collection-room-card-shell > .collection-room-card {
  width: 100%;
  height: 100%;
}

.collection-bundle-top {
  position: absolute;
  z-index: 6;
  top: 9px;
  right: 9px;
  min-height: 28px;
  border: 1px solid rgba(202, 228, 242, .28);
  background: rgba(3, 11, 18, .76);
  padding: 0 9px;
  color: rgba(210, 230, 241, .72);
  font: 700 8px/1 var(--mono);
  letter-spacing: .12em;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.collection-bundle-top:hover,
.collection-bundle-top:focus-visible {
  border-color: rgba(210, 237, 251, .7);
  color: #eef9ff;
  outline: none;
}

.collection-bundle-top.is-active {
  border-color: rgba(185, 226, 248, .76);
  background: rgba(190, 228, 247, .9);
  color: #07131d;
}

.collection-room-card,
.collection-room-add {
  position: relative;
  min-width: 0;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(2, 8, 13, .42);
  color: #e6eef4;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .16);
  transition: transform 300ms cubic-bezier(.16, .78, .24, 1), filter 260ms ease, box-shadow 300ms ease;
}

.collection-room-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(134, 196, 229, .16);
  background: linear-gradient(138deg, rgba(226, 245, 253, .055), transparent 26%, rgba(0, 0, 0, .18));
  transition: border-color 260ms ease, background 260ms ease;
}

.collection-room-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(var(--collection-art-thumb-brightness, .70)) saturate(.72) contrast(1.05);
  transform: scale(1.015);
  transition: filter 300ms ease, transform 520ms cubic-bezier(.16, .78, .24, 1);
}

.collection-room-card > span {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  align-items: end;
  padding: 28px 13px 12px;
  background: linear-gradient(180deg, transparent, rgba(2, 8, 13, .88) 58%, rgba(2, 8, 13, .96));
}

.collection-room-card small {
  grid-column: 1 / -1;
  color: rgba(143, 204, 237, .72);
  font: 700 10px/1 var(--mono);
  letter-spacing: .16em;
}

.collection-room-card strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(231, 240, 246, .88);
  font-family: var(--jp);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-room-card time {
  color: rgba(155, 174, 187, .64);
  font: 650 10px/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
}

.collection-room-card:hover,
.collection-room-card:focus-visible {
  z-index: 3;
  outline: none;
  transform: translateY(-5px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .3), 0 0 24px rgba(130, 205, 252, .055);
}

.collection-room-card:hover::after,
.collection-room-card:focus-visible::after {
  border-color: rgba(153, 215, 247, .42);
  background: linear-gradient(138deg, rgba(226, 245, 253, .1), transparent 30%, rgba(0, 0, 0, .12));
}

.collection-room-card:hover img,
.collection-room-card:focus-visible img {
  filter: brightness(.88) saturate(.9) contrast(1.03);
  transform: scale(1.045);
}

.trailer-archive.has-collected-art .collection-room-card-shell:first-child {
  --collection-art-thumb-brightness: .78;
  grid-column: span 2;
  grid-row: span 2;
  height: auto;
}

.trailer-archive.has-collected-art .collection-room-card-shell:first-child .collection-room-card strong {
  font-size: clamp(17px, 1.35vw, 21px);
}

/* The featured art uses the same media-then-copy hierarchy as the video hero. */
.trailer-archive.has-collected-art .collection-room-card-shell:first-child .collection-room-card {
  height: auto;
  display: grid;
  grid-template-rows: auto 112px;
  overflow: hidden;
  background: #02070b;
}

.trailer-archive.has-collected-art .collection-room-card-shell:first-child .collection-room-card img {
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transform: none;
}

.trailer-archive.has-collected-art .collection-room-card-shell:first-child .collection-room-card > span {
  position: static;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(44px, auto);
  gap: 6px 12px;
  align-items: start;
  min-height: 112px;
  box-sizing: border-box;
  padding: 12px 14px;
  border-top: 1px solid rgba(137, 194, 225, .13);
  background: linear-gradient(135deg, rgba(4, 14, 21, .98), rgba(3, 10, 16, .94));
}

.trailer-archive.has-collected-art .collection-room-card-shell:first-child .collection-room-card small {
  grid-column: 1;
  grid-row: 1;
  color: rgba(151, 216, 249, .82);
  font-size: 8px;
  letter-spacing: .2em;
}

.trailer-archive.has-collected-art .collection-room-card-shell:first-child .collection-room-card time {
  grid-column: 2;
  grid-row: 1;
  display: block;
  color: rgba(173, 194, 207, .7);
  font-size: 8px;
  letter-spacing: .12em;
}

.trailer-archive.has-collected-art .collection-room-card-shell:first-child .collection-room-card strong {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  color: rgba(244, 249, 252, .95);
  font: 720 clamp(18px, 1.8vw, 24px)/1.25 var(--jp);
  letter-spacing: .04em;
  text-wrap: balance;
  white-space: normal;
  text-overflow: clip;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.trailer-archive.has-collected-art .collection-room-card-shell:first-child .collection-room-card:not(.has-art-title) {
  grid-template-rows: auto 54px;
}

.trailer-archive.has-collected-art .collection-room-card-shell:first-child .collection-room-card:not(.has-art-title) > span {
  grid-template-rows: auto;
  min-height: 54px;
  padding-block: 12px;
}

.collection-room-add {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  min-height: 154px;
  border: 1px solid rgba(135, 197, 230, .15);
  background: rgba(7, 17, 25, .3);
  color: rgba(158, 205, 231, .7);
  text-align: center;
  box-shadow: none;
}

.collection-room-add span {
  font: 200 28px/1 var(--mono);
}

.collection-room-add strong {
  font-family: var(--jp);
  font-size: 14px;
  letter-spacing: .08em;
}

.collection-room-add small {
  color: rgba(120, 150, 168, .58);
  font: 650 10px/1.35 var(--jp);
  letter-spacing: .12em;
}

.collection-room-add:hover,
.collection-room-add:focus-visible {
  outline: none;
  transform: translateY(-3px);
  border-color: rgba(147, 211, 244, .42);
  background: rgba(12, 28, 40, .54);
  color: rgba(220, 239, 249, .88);
}

.collection-art-focus {
  position: fixed;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 62px);
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(2, 8, 13, .985);
  transform: translateZ(0) scale(.985);
  transition: opacity 340ms ease, visibility 340ms, transform 420ms cubic-bezier(.16, .78, .24, 1);
}

.collection-art-edit {
  position: absolute;
  z-index: 5;
  top: auto;
  right: 0;
  bottom: calc(100% + 8px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #e2f0f8;
  font: 20px/1 sans-serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .82), 0 0 12px rgba(130, 205, 252, .24);
  cursor: pointer;
}

.collection-art-edit:is(:hover, :focus-visible) {
  background: rgba(2, 9, 14, .28);
  color: #fff;
  outline: none;
}

.trailer-archive.is-collection-art-focus .collection-art-focus {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.collection-art-focus figure {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0;
  line-height: 0;
}

.collection-art-media {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: calc(100svh - 112px);
  line-height: 0;
}

.collection-art-focus img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 112px);
  object-fit: contain;
  object-position: center;
  filter: brightness(.9) saturate(.9);
}

.collection-art-focus figcaption {
  position: absolute;
  z-index: 5;
  top: auto;
  left: 0;
  bottom: calc(100% + 8px);
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 0;
  white-space: nowrap;
}

.collection-art-caption-primary {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.collection-art-published {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.collection-art-focus figcaption span,
.collection-art-focus figcaption time {
  color: rgba(139, 194, 224, .62);
  font: 700 8px/1 var(--mono);
  letter-spacing: .17em;
}

.collection-art-focus figcaption strong {
  color: rgba(235, 243, 248, .92);
  font-family: var(--jp);
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 680;
  line-height: 1.3;
  letter-spacing: .04em;
}

.collection-art-focus figcaption strong:empty {
  display: none;
}

@keyframes collectionRoomEnter {
  0%, 14% { opacity: 0; transform: translate3d(0, 0, 0) scale(.975); }
  58% { opacity: .62; transform: translate3d(0, 0, 0) scale(.988); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes collectionRoomExit {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  42% { opacity: .5; transform: translate3d(0, 0, 0) scale(.988); }
  to { opacity: 0; transform: translate3d(0, 0, 0) scale(.975); }
}

@media (max-width: 760px) {
  .trailer-archive.is-depth-mode.is-collection-threshold .trailer-archive-body {
    min-height: calc(100svh - 20px);
  }

  .collection-room-shell {
    width: calc(100% - 28px);
    padding: 68px 0 36px;
  }


  .collection-room-head {
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 17px;
  }

  .collection-room-head h2 { font-size: clamp(27px, 9vw, 38px); }
  .collection-room-state strong { font-size: 28px; }

  .collection-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 142px;
    gap: 11px;
  }

  .trailer-archive.has-collected-art .collection-room-card-shell:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .collection-room-card > span { padding: 24px 10px 10px; }
  .collection-room-card strong { font-size: 13px; }
  .collection-room-card time { display: none; }
  .collection-room-add { min-height: 142px; }

  .collection-art-focus { padding: 70px 16px 28px; }
  .collection-art-focus img { max-height: 72svh; object-position: center; }
  .collection-art-media { max-height: 72svh; }
  .collection-art-focus figcaption { gap: 6px; }
  .collection-art-caption-primary { gap: 12px; }
  .collection-art-edit { right: 0; bottom: calc(100% + 8px); }
}

/* Top-header composition: one calm vertical reading column. */
@media (max-width: 760px) {
  .collection-room-shell {
    width: 100%;
    margin: 0;
    padding: 36px 24px 40px;
    box-sizing: border-box;
  }

  .collection-room-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 30px;
    padding: 0 0 22px;
  }

  .collection-room-kicker {
    margin-bottom: 15px;
    font-size: 10px;
    letter-spacing: .25em;
  }

  .collection-room-head h2 {
    font-size: clamp(34px, 8vw, 42px);
    line-height: 1;
  }

  .collection-room-head-actions {
    justify-content: flex-start;
    gap: 0;
  }

  .collection-room-state {
    min-width: 0;
    justify-items: start;
    grid-template-columns: repeat(2, minmax(104px, auto));
    gap: 48px;
  }

  .collection-room-state > span {
    justify-items: start;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 9px;
  }

  .collection-room-state strong {
    font-size: 30px;
  }

  .collection-room-state small {
    font-size: 9px;
    letter-spacing: .18em;
  }

  .collection-room-columns {
    width: 100%;
  }

  .collection-section-head {
    margin-bottom: 24px;
  }

  .collection-official-title-group {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }

  .collection-section-head h3 {
    font-size: 22px;
  }

  .collection-section-head .collection-official-embed-note {
    font-size: 10px;
  }

  .collection-official-stage {
    width: 100%;
    max-width: none;
  }

  .collection-official-copy {
    min-height: 128px;
    grid-template-rows: auto minmax(42px, 1fr);
    padding: 17px 0 16px;
    border-right: 0;
    border-left: 0;
    background: transparent;
  }

  .collection-official-copy strong {
    font-size: 20px;
    line-height: 1.45;
  }

  .collection-official-transport {
    min-height: 64px;
    margin-top: 0;
    border-right: 0;
    border-left: 0;
  }

  .collection-official-transport button,
  .collection-official-transport a,
  .collection-official-volume,
  .collection-official-autonext {
    min-height: 62px;
  }

  .collection-official-rail {
    grid-auto-columns: calc((100vw - 72px) / 3);
    gap: 12px;
    margin-top: 17px;
  }

  .collection-official-index {
    width: auto;
    height: 102px;
  }

  .collection-official-index img {
    height: 82px;
  }

  .collection-official-index span {
    height: 18px;
    padding-top: 5px;
  }

  .collection-personal {
    padding-top: 48px;
  }

  .collection-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .trailer-archive.is-collection-threshold .collection-room {
    animation: collectionRoomEnterFallback 420ms cubic-bezier(.22, .72, .18, 1) 80ms both;
  }

  .trailer-archive.is-collection-exiting .collection-room {
    animation: collectionRoomExitFallback 340ms ease both;
  }

  .collection-z-refraction {
    display: none;
  }

  .collection-z-gate.is-active { animation-duration: 520ms; }
  .collection-z-gate.is-active .collection-z-aperture,
  .collection-z-gate.is-active .collection-z-aperture img { animation-duration: 220ms; }
  .collection-z-gate.is-active.is-exiting { animation-duration: 420ms; }
  .collection-z-gate.is-active.is-exiting .collection-z-aperture {
    animation: collectionZApertureExit 180ms ease 200ms both;
  }
  .collection-z-gate.is-active.is-exiting .collection-z-aperture img {
    animation: collectionZApertureImageExit 180ms ease 200ms both;
  }
}

@keyframes collectionRoomEnterFallback {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes collectionRoomExitFallback {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.99); }
}

@media (prefers-reduced-motion: reduce) {
  .trailer-archive.is-collection-threshold .collection-room {
    animation: collectionRoomReduced 200ms ease both;
    filter: none;
    transform: none;
  }
  .trailer-archive.is-collection-exiting .collection-room {
    animation-direction: reverse;
    animation-duration: 180ms;
  }
  .collection-z-gate { display: none; }
  .collection-z-continuity::after,
  .collection-z-continuity i { animation: none; transform: none; opacity: 1; }
  .collection-room-card,
  .collection-room-card img,
  .collection-art-focus { transition: none; }
  .trailer-archive.is-inline-autorun .collection-room-card-shell,
  .trailer-archive.is-inline-autorun .collection-room-card-shell img { animation: none !important; }
}

@keyframes collectionRoomReduced {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The room has two provenances: fixed official light and movable personal fragments. */
.collection-room-head-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 14px;
}

@media (min-width: 761px) {
  .collection-room-head-actions {
    padding-right: 60px;
  }
}

.collection-autorun-start {
  min-width: 132px;
  display: grid;
  grid-template: auto auto / 1fr auto;
  align-content: center;
  gap: 6px 16px;
  border: 1px solid rgba(147, 211, 244, .28);
  padding: 9px 12px;
  background: linear-gradient(135deg, rgba(15, 39, 55, .72), rgba(4, 13, 21, .58));
  color: rgba(226, 242, 250, .9);
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, transform 260ms ease;
}

.collection-autorun-start small {
  grid-column: 1 / -1;
  color: rgba(133, 200, 236, .7);
  font: 700 7px/1 var(--mono);
  letter-spacing: .22em;
}

.collection-autorun-start strong {
  font-family: var(--jp);
  font-size: 14px;
  letter-spacing: .08em;
}

.collection-autorun-start span { color: var(--actual); font: 400 17px/1 var(--mono); }
.collection-autorun-start:hover,
.collection-autorun-start:focus-visible { outline: none; transform: translateY(-2px); border-color: rgba(160, 220, 250, .62); background: rgba(15, 39, 55, .82); }

.collection-autorun-start.is-active {
  border-color: rgba(154, 218, 250, .62);
  background: linear-gradient(135deg, rgba(22, 62, 84, .88), rgba(6, 22, 33, .84));
  box-shadow: inset 0 0 0 1px rgba(145, 213, 247, .08), 0 0 18px rgba(82, 174, 221, .08);
}

.collection-autorun-start.is-active strong,
.collection-autorun-start.is-active span { color: #e9f7fe; }

.trailer-archive.is-inline-autorun .collection-room-card-shell.is-autorun-current {
  border-color: rgba(154, 218, 250, .72);
  box-shadow: 0 0 0 1px rgba(154, 218, 250, .16), 0 16px 38px rgba(0, 0, 0, .24);
}

.trailer-archive.is-inline-autorun .collection-room-card-shell.is-autorun-current img {
  animation: collectionInlineArtFocus 5.2s ease-out both;
}

.trailer-archive.is-inline-autorun .collection-room-grid.is-autorun-shifting .collection-room-card-shell {
  animation: collectionInlineArtArrive .58s cubic-bezier(.2, .72, .24, 1) both;
}

.trailer-archive.is-inline-autorun .collection-room-grid.is-autorun-shifting .collection-room-card-shell:nth-child(2) { animation-delay: 45ms; }
.trailer-archive.is-inline-autorun .collection-room-grid.is-autorun-shifting .collection-room-card-shell:nth-child(3) { animation-delay: 80ms; }
.trailer-archive.is-inline-autorun .collection-room-grid.is-autorun-shifting .collection-room-card-shell:nth-child(n+4) { animation-delay: 110ms; }

@keyframes collectionInlineArtFocus {
  0% { opacity: .58; transform: scale(1.035); filter: brightness(.72) saturate(.72); }
  18% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: brightness(.9) saturate(.86); }
}

@keyframes collectionInlineArtArrive {
  from { opacity: .25; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.collection-room-state {
  min-width: 116px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: end;
  gap: 18px;
  padding: 0;
}

.collection-room-state > span { display: grid; justify-items: end; gap: 5px; }
.collection-room-state strong { font-size: clamp(24px, 2.6vw, 36px); }
.collection-room-state small { color: rgba(166, 211, 235, .78); font: 700 9px/1 var(--mono); letter-spacing: .12em; }

@media (min-width: 761px) {
  .collection-room-state > span {
    position: relative;
    display: block;
  }

  .collection-room-state strong {
    display: block;
  }

  .collection-room-state small {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    white-space: nowrap;
  }
}

.collection-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 8px;
}

.collection-section-head p { margin: 0 0 7px; color: rgba(131, 196, 231, .58); font: 700 7px/1 var(--mono); letter-spacing: .2em; }
.collection-section-head h3 { margin: 0; color: rgba(230, 241, 247, .9); font: 680 18px/1 var(--jp); letter-spacing: .08em; }
.collection-official-head-tools { display: flex; align-items: center; gap: 14px; }
.collection-official-head-tools > span { color: rgba(128, 153, 169, .62); font: 600 10px/1 var(--jp); letter-spacing: .06em; }
.collection-video-pin { display: none; min-height: 22px; align-self: flex-end; align-items: flex-end; gap: 8px; padding: 0 3px; color: rgba(166, 194, 210, .72); font: 650 10px/1 var(--jp); letter-spacing: .06em; white-space: nowrap; cursor: pointer; }
.collection-art-autoplay { display: none; }
.collection-video-pin input { width: 14px; height: 14px; margin: 0; accent-color: #8fd5f8; cursor: pointer; }
.collection-video-pin:has(input:checked) { color: rgba(226, 242, 250, .94); }
.collection-official-head-tools button { border: 0; padding: 0; background: transparent; color: rgba(205, 229, 241, .82); cursor: pointer; }
.collection-official-head-tools button:hover,
.collection-official-head-tools button:focus-visible { outline: none; color: #edf8fd; }

.collection-official-wall {
  position: relative;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(137, 194, 225, .13);
}

.collection-official-title-group {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  min-width: 0;
}

.collection-section-head .collection-official-embed-note {
  margin: 0;
  color: rgba(168, 188, 201, .7);
  font-family: var(--jp);
  font-size: 9px;
  font-weight: 450;
  line-height: 1;
  letter-spacing: .08em;
}

.collection-section-settings {
  width: 40px;
  height: 32px;
  flex: 0 0 40px;
  align-self: flex-end;
  display: grid;
  place-items: end center;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(205, 229, 241, .78);
  font: 22px/1 sans-serif;
  cursor: pointer;
  transform: translateY(2px);
  transition: color 180ms ease, text-shadow 180ms ease;
}

.collection-section-edit {
  width: auto;
  min-width: 68px;
  height: 38px;
  flex-basis: auto;
  border: 1px solid rgba(148, 207, 238, .34);
  padding: 0 16px;
  background: rgba(4, 14, 22, .72);
  color: rgba(225, 239, 247, .9);
  font: 700 14px/1 var(--jp);
  letter-spacing: .08em;
}

.collection-section-settings:hover,
.collection-section-settings:focus-visible {
  outline: none;
  color: #edf8fd;
  text-shadow: 0 0 12px rgba(130, 205, 252, .22);
}

.collection-z-continuity {
  position: relative;
  height: 13px;
  margin: 0 0 clamp(12px, 1.5svh, 16px);
  overflow: hidden;
  pointer-events: none;
}

.collection-z-continuity::after,
.collection-z-continuity i {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  transform-origin: 50% 50%;
}

.collection-z-continuity::after {
  content: "";
  bottom: 0;
  background: rgba(130, 205, 252, .7);
  box-shadow: 0 0 8px rgba(130, 205, 252, .1);
  animation: collectionDepthBaselineArrive 920ms cubic-bezier(.18, .72, .24, 1) 360ms both;
}

.collection-z-continuity i {
  bottom: calc(var(--z-step) * 2.5px);
  display: block;
  background: rgba(143, 205, 236, .08);
  animation: collectionDepthPlaneArrive 860ms cubic-bezier(.18, .72, .24, 1) calc(390ms + var(--z-step) * 34ms) both;
}

.collection-z-continuity i:nth-child(1) { background: rgba(143, 205, 236, .155); }
.collection-z-continuity i:nth-child(2) { background: rgba(143, 205, 236, .125); }
.collection-z-continuity i:nth-child(3) { background: rgba(143, 205, 236, .1); }

@keyframes collectionDepthBaselineArrive {
  0% { opacity: 0; transform: scaleX(.16); }
  48% { opacity: .92; }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes collectionDepthPlaneArrive {
  0% { opacity: 0; transform: scaleX(.16); }
  46% { opacity: .22; }
  100% { opacity: 1; transform: scaleX(1); }
}

.collection-official-stage {
  --collection-video-height: clamp(240px, 33svh, 330px);
  position: relative;
  width: 100%;
  height: var(--collection-video-height);
  display: grid;
  grid-template-columns: calc(var(--collection-video-height) * 16 / 9) minmax(250px, 1fr);
  max-width: 1100px;
  overflow: hidden;
  border: 1px solid rgba(154, 215, 246, .28);
  padding: 0;
  background: #02070b;
  color: #fff;
  text-align: left;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .3), inset 0 0 40px rgba(130, 205, 252, .035);
}

.collection-official-media { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #01060a; }
.collection-official-media > img { width: 100%; height: 100%; display: block; object-fit: contain; filter: brightness(.86) saturate(.82) contrast(1.04); transition: opacity 260ms ease, filter 420ms ease; }
.collection-official-player { position: absolute; inset: 0; visibility: hidden; opacity: 0; background: #000; transition: opacity 260ms ease, visibility 260ms; }
.collection-official-player iframe { width: 100%; height: 100%; display: block; border: 0; pointer-events: none; }
.collection-official-playmark { position: absolute; z-index: 3; left: 50%; top: 50%; width: 62px; height: 62px; border: 1px solid rgba(210, 235, 247, .62); border-radius: 50%; padding: 0; background: rgba(2, 9, 13, .42); color: rgba(238, 247, 251, .92); transform: translate(-50%, -50%); cursor: pointer; backdrop-filter: blur(5px); transition: border-color 180ms ease, background 180ms ease, opacity 180ms ease; }
.collection-official-playmark span { display: block; margin-left: 4px; font: 22px/1 sans-serif; }
.collection-official-playmark:hover,
.collection-official-playmark:focus-visible { outline: none; border-color: rgba(231, 248, 255, .95); background: rgba(4, 18, 27, .68); }
.collection-official-stage.is-loading .collection-official-playmark { opacity: .58; cursor: wait; }
.collection-official-stage.is-loading .collection-official-playmark span { visibility: hidden; }
.collection-official-stage.is-loading .collection-official-playmark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -12px 0 0 -12px; border: 2px solid rgba(214, 239, 250, .24); border-top-color: rgba(238, 249, 253, .94); border-radius: 50%; animation: collectionOfficialLoading 720ms linear infinite; }
.collection-official-playback-status { position: absolute; z-index: 5; left: 50%; top: 50%; width: min(280px, calc(100% - 36px)); box-sizing: border-box; display: grid; justify-items: center; gap: 12px; padding: 18px 20px; border: 1px solid rgba(154, 215, 246, .28); background: rgba(2, 9, 14, .9); color: rgba(222, 238, 247, .86); text-align: center; transform: translate(-50%, -50%); }
.collection-official-playback-status[hidden] { display: none; }
.collection-official-playback-status span { font: 650 11px/1.55 var(--jp); letter-spacing: .06em; }
.collection-official-playback-status button { min-width: 108px; min-height: 40px; border: 1px solid rgba(154, 215, 246, .42); background: rgba(130, 205, 252, .08); color: rgba(226, 243, 251, .94); font: 700 10px/1 var(--jp); letter-spacing: .08em; cursor: pointer; }
.collection-official-playback-status button:hover,
.collection-official-playback-status button:focus-visible { outline: none; border-color: rgba(220, 242, 253, .86); background: rgba(130, 205, 252, .16); }
.collection-official-stage.is-error .collection-official-playmark { visibility: hidden; opacity: 0; pointer-events: none; }
@keyframes collectionOfficialLoading { to { transform: rotate(360deg); } }
.collection-official-stage.is-playing .collection-official-media > img { opacity: 0; }
.collection-official-stage.is-playing .collection-official-player { visibility: visible; opacity: 1; }
.collection-official-stage.is-playing .collection-official-playmark { visibility: hidden; opacity: 0; pointer-events: none; }
.collection-official-hover-controls { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; min-height: 54px; box-sizing: border-box; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; padding: 12px 14px 8px; visibility: hidden; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0, 5, 9, .9)); transition: opacity 180ms ease, visibility 180ms; }
.collection-official-stage.is-playing .collection-official-media:hover .collection-official-hover-controls,
.collection-official-stage.is-playing .collection-official-hover-controls:focus-within,
.collection-official-media.is-fullscreen:hover .collection-official-hover-controls,
.collection-official-media.is-fullscreen .collection-official-hover-controls:focus-within { visibility: visible; opacity: 1; pointer-events: auto; }
.collection-official-hover-controls button { width: 40px; height: 36px; border: 1px solid rgba(190, 225, 243, .38); padding: 0; background: rgba(1, 8, 13, .66); color: rgba(239, 249, 253, .94); font: 700 16px/1 sans-serif; cursor: pointer; }
.collection-official-hover-controls button:hover,
.collection-official-hover-controls button:focus-visible { outline: none; border-color: rgba(226, 246, 255, .9); background: rgba(10, 28, 39, .86); }
.collection-official-hover-controls input[type="range"] { width: 100%; min-width: 0; height: 28px; margin: 0; accent-color: #8fd5f8; cursor: pointer; }
.collection-official-hover-controls output { min-width: 76px; color: rgba(218, 235, 244, .78); font: 700 9px/1 var(--mono); letter-spacing: .04em; text-align: right; white-space: nowrap; }
.collection-official-media:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; background: #000; }
.collection-official-media:fullscreen .collection-official-player,
.collection-official-media:fullscreen .collection-official-player iframe { width: 100%; height: 100%; }
@media (hover: none), (pointer: coarse) {
  .collection-official-stage.is-playing .collection-official-hover-controls { visibility: visible; opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .collection-official-stage.is-loading .collection-official-playmark::after { animation-duration: 1400ms; }
}
.collection-official-copy { position: relative; z-index: 2; width: 100%; min-height: 0; box-sizing: border-box; overflow: hidden; padding: 12px 14px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; align-content: stretch; justify-items: start; gap: 6px; border-left: 1px solid rgba(137, 194, 225, .13); background: linear-gradient(135deg, rgba(4, 14, 21, .98), rgba(3, 10, 16, .94)); }
.collection-official-copy small { color: rgba(151, 216, 249, .82); font: 700 8px/1 var(--mono); letter-spacing: .2em; }
.collection-official-copy strong { align-self: start; display: -webkit-box; min-height: 0; overflow: hidden; color: rgba(244, 249, 252, .95); font: 720 clamp(18px, 1.8vw, 24px)/1.25 var(--jp); letter-spacing: .04em; text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.collection-official-copy time { color: rgba(173, 194, 207, .7); font: 650 8px/1 var(--mono); letter-spacing: .12em; }
.collection-official-transport { width: 100%; margin-top: 6px; display: grid; grid-template-columns: 42px 42px minmax(76px, 1fr) auto 42px 42px; align-items: stretch; gap: 0; border: 1px solid rgba(145, 211, 246, .28); background: rgba(1, 7, 11, .48); }
.collection-official-transport button,
.collection-official-transport a { min-width: 0; min-height: 42px; box-sizing: border-box; display: grid; place-items: center; border: 0; padding: 0 10px; background: transparent; color: rgba(194, 218, 231, .76); font: 800 13px/1.1 var(--mono); letter-spacing: .055em; text-decoration: none; cursor: pointer; }
.collection-official-transport button:nth-child(-n+3) { font-size: 20px; letter-spacing: 0; }
.collection-official-transport [data-official-prev],
.collection-official-transport [data-official-next] { border-right: 1px solid rgba(145, 211, 246, .18); }
.collection-official-transport button:hover,
.collection-official-transport button:focus-visible,
.collection-official-transport a:hover,
.collection-official-transport a:focus-visible { outline: none; background: rgba(130, 205, 252, .09); color: #eef9ff; }
.collection-official-transport button:disabled { opacity: .46; cursor: default; }
.collection-official-volume { grid-column: 3; min-width: 0; min-height: 42px; display: grid; grid-template-columns: 24px minmax(52px, 1fr); align-items: center; gap: 7px; padding: 0 10px; border-right: 1px solid rgba(145, 211, 246, .18); color: rgba(194, 218, 231, .76); }
.collection-official-volume svg { width: 18px; height: 18px; overflow: visible; fill: currentColor; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.collection-official-volume svg path:first-child { stroke: none; }
.collection-official-volume .volume-mute-slash { display: none; fill: none; stroke-width: 2; }
.collection-official-volume.is-muted .volume-waves { display: none; }
.collection-official-volume.is-muted .volume-mute-slash { display: block; }
.collection-official-volume input[type="range"] { width: 100%; min-width: 52px; height: 42px; margin: 0; accent-color: #8fd5f8; cursor: pointer; }
.collection-official-autonext { grid-column: 4; min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-right: 1px solid rgba(145, 211, 246, .18); color: rgba(194, 218, 231, .76); font: 700 9px/1 var(--mono); letter-spacing: .08em; white-space: nowrap; cursor: pointer; }
.collection-official-autonext input { width: 14px; height: 14px; margin: 0; accent-color: #8fd5f8; cursor: pointer; }
.collection-official-autonext:has(input:checked) { color: #eaf8ff; background: rgba(130, 205, 252, .07); }
.collection-official-fullscreen { color: rgba(194, 218, 231, .76); }
.collection-official-fullscreen svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.collection-official-fullscreen .fullscreen-exit { display: none; }
.collection-official-media.is-fullscreen .collection-official-fullscreen .fullscreen-enter { display: none; }
.collection-official-media.is-fullscreen .collection-official-fullscreen .fullscreen-exit { display: block; }
.collection-official-transport > .collection-official-fullscreen { grid-column: 5; border-right: 1px solid rgba(145, 211, 246, .18); padding: 0; }
.collection-official-transport [data-official-youtube] { position: relative; grid-column: 6; grid-row: 1; border-left: 0; padding: 0; }
.collection-official-transport [data-official-youtube] svg { width: 24px; height: 24px; overflow: visible; }
.collection-official-transport [data-official-youtube] rect { fill: none; stroke: currentColor; stroke-width: 1.25; }
.collection-official-transport [data-official-youtube] path { fill: currentColor; }
.collection-official-transport [data-official-youtube] span { position: absolute; top: 5px; right: 5px; font: 700 8px/1 var(--mono); opacity: .62; }
.collection-official-stage:focus-within { border-color: rgba(165, 225, 253, .62); }
.collection-official-stage:not(.is-playing):hover .collection-official-media > img { filter: brightness(.94) saturate(.9) contrast(1.03); }

@media (max-width: 520px) {
  .collection-official-transport { grid-template-columns: 42px 42px minmax(52px, 1fr) auto 38px 38px; }
  .collection-official-volume { grid-template-columns: 18px minmax(46px, 1fr); gap: 4px; padding-inline: 7px; }
  .collection-official-volume svg { width: 15px; height: 15px; }
  .collection-official-autonext { gap: 5px; padding-inline: 7px; font-size: 8px; letter-spacing: .04em; }
  .collection-official-autonext input { width: 12px; height: 12px; }
  .collection-official-transport > .collection-official-fullscreen,
  .collection-official-transport [data-official-youtube] { width: 38px; min-width: 38px; }
}

.collection-official-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78px;
  gap: 8px;
  margin-top: 6px;
  padding: 0 0 3px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 190, 223, .34) transparent;
  scroll-snap-type: x proximity;
}

.collection-official-rail::-webkit-scrollbar { height: 3px; }
.collection-official-rail::-webkit-scrollbar-track { background: transparent; }
.collection-official-rail::-webkit-scrollbar-thumb { background: rgba(128, 190, 223, .3); }

.collection-official-index {
  position: relative;
  width: 78px;
  height: 50px;
  border: 1px solid rgba(137, 196, 228, .12);
  padding: 0;
  overflow: hidden;
  background: #02070b;
  opacity: .42;
  cursor: pointer;
  scroll-snap-align: center;
  transition: opacity 220ms ease, border-color 220ms ease, transform 240ms ease;
}

.collection-official-index img { width: 100%; height: 37px; display: block; object-fit: cover; filter: brightness(.72) saturate(.7); }
.collection-official-index span { display: block; height: 13px; box-sizing: border-box; padding: 3px 5px 0; background: #030b11; color: rgba(206, 232, 246, .8); font: 700 6px/1 var(--mono); text-align: right; }
.collection-official-index[aria-current="true"] { opacity: 1; border-color: rgba(154, 218, 250, .7); transform: translateY(-2px); }
.collection-official-index:hover,
.collection-official-index:focus-visible { outline: none; opacity: .86; border-color: rgba(154, 218, 250, .46); }

.collection-personal { padding-top: 10px; }

.collection-room-columns { min-width: 0; }

@media (min-width: 981px) {
  .collection-video-pin { display: inline-flex; }

  .collection-room-columns {
    --collection-column-gap: clamp(18px, 2vw, 26px);
    display: grid;
    grid-template-columns: calc(50% - var(--collection-column-gap)) 50%;
    align-items: start;
    gap: var(--collection-column-gap);
  }

  .collection-official-wall {
    min-width: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .collection-official-wall.is-video-pinned {
    position: sticky;
    z-index: 4;
    top: clamp(14px, 2.5svh, 26px);
    align-self: start;
  }

  .collection-personal {
    min-width: 0;
    padding: 0 0 0 var(--collection-column-gap);
    border-left: 1px solid rgba(137, 194, 225, .13);
  }

  .trailer-archive.is-art-autoplay .collection-personal {
    overflow: hidden;
  }

  .trailer-archive.is-art-autoplay .collection-room-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-rows: auto;
    gap: 14px;
  }

  .trailer-archive.is-art-autoplay .collection-room-card-shell,
  .trailer-archive.is-art-autoplay.has-collected-art .collection-room-card-shell:first-child {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: auto;
  }

  .trailer-archive.is-art-autoplay .collection-room-card-shell .collection-room-card,
  .trailer-archive.is-art-autoplay.has-collected-art .collection-room-card-shell:first-child .collection-room-card {
    display: grid;
    grid-template-rows: auto 84px;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #02070b;
  }

  .trailer-archive.is-art-autoplay .collection-room-card-shell .collection-room-card img,
  .trailer-archive.is-art-autoplay.has-collected-art .collection-room-card-shell:first-child .collection-room-card img {
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transform: none;
  }

  .trailer-archive.is-art-autoplay .collection-room-card-shell .collection-room-card > span,
  .trailer-archive.is-art-autoplay.has-collected-art .collection-room-card-shell:first-child .collection-room-card > span {
    position: static;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(32px, auto);
    gap: 5px 12px;
    align-items: start;
    min-height: 84px;
    padding: 11px 13px;
    border-top: 1px solid rgba(137, 194, 225, .13);
    background: linear-gradient(135deg, rgba(4, 14, 21, .98), rgba(3, 10, 16, .94));
  }

  .trailer-archive.is-art-autoplay .collection-room-card small,
  .trailer-archive.is-art-autoplay.has-collected-art .collection-room-card-shell:first-child .collection-room-card small {
    grid-column: 1;
    grid-row: 1;
    font-size: 8px;
  }

  .trailer-archive.is-art-autoplay .collection-room-card time,
  .trailer-archive.is-art-autoplay.has-collected-art .collection-room-card-shell:first-child .collection-room-card time {
    grid-column: 2;
    grid-row: 1;
    display: block;
    font-size: 8px;
  }

  .trailer-archive.is-art-autoplay .collection-room-card strong,
  .trailer-archive.is-art-autoplay.has-collected-art .collection-room-card-shell:first-child .collection-room-card strong {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    font: 700 clamp(16px, 1.35vw, 20px)/1.25 var(--jp);
    white-space: normal;
  }

  .trailer-archive.is-art-autoplay .collection-room-card-shell.is-art-autoplay-clone {
    pointer-events: none;
  }

  .trailer-archive.is-art-autoplay .collection-room-add {
    display: none;
  }

  .collection-official-section-head,
  .collection-personal > .collection-section-head {
    min-height: 42px;
  }

  .collection-official-stage {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .collection-official-media {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .collection-official-copy {
    min-height: 112px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(44px, auto);
    border-top: 1px solid rgba(137, 194, 225, .13);
    border-left: 0;
  }

  .collection-official-copy small { grid-column: 1; grid-row: 1; }
  .collection-official-copy time { grid-column: 2; grid-row: 1; }
  .collection-official-copy strong { grid-column: 1 / -1; grid-row: 2; font-size: clamp(17px, 1.35vw, 21px); }
  .trailer-archive.has-collected-art .collection-room-card-shell:first-child .collection-room-card strong { font-size: clamp(17px, 1.35vw, 21px); }
  .collection-official-transport { margin-top: 12px; }

  .collection-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 12px;
  }

  .collection-room-card-shell {
    height: 152px;
  }

  .trailer-archive.has-collected-art .collection-room-card-shell:first-child {
    height: auto;
    aspect-ratio: auto;
    grid-row: auto;
  }

  .collection-official-rail { margin-top: 12px; }
}

/* One level deeper: an authored drift through official chapters and private fragments. */
.collection-autorun {
  position: absolute;
  z-index: 70;
  inset: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: #01060a;
  color: #fff;
  transition: opacity 520ms ease, visibility 520ms;
}

.trailer-archive.is-collection-autorun .collection-autorun { visibility: visible; opacity: 1; pointer-events: auto; }
.trailer-archive.is-collection-autorun .collection-room { overflow: hidden; }
.trailer-archive.is-collection-autorun > .trailer-archive-inner > .trailer-archive-toggle { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.trailer-archive:not(.is-collection-autorun).is-collection-threshold > .trailer-archive-inner > .trailer-archive-toggle,
.trailer-archive:not(.is-collection-autorun).is-collapsed > .trailer-archive-inner > .trailer-archive-toggle { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
.collection-autorun-visual { position: relative; min-height: 0; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 72% 82% at 50% 48%, #071724, #01060a 72%); }
.collection-autorun-visual img,
.collection-autorun-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.collection-autorun-visual > img { z-index: 0; inset: 50% auto auto 50%; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; filter: blur(18px) brightness(.24) saturate(.7); transform: translate(-50%, -50%) scale(1.12); transition: opacity 1100ms ease, transform 8s cubic-bezier(.2, .55, .3, 1); }
.collection-autorun-visual > img.is-active { opacity: .52; transform: translate(-50%, -50%) scale(1.18); }
.collection-autorun-visual img.is-immediate { transition-duration: 1ms, 8s; }
.collection-autorun-player { position: absolute; z-index: 1; inset: 7% 15% 8%; display: grid; place-items: center; }
.collection-autorun-player iframe { width: 100%; height: 100%; border: 0; background: #01060a; box-shadow: 0 26px 80px rgba(0,0,0,.46),0 0 48px rgba(130,205,252,.06); }
.collection-autorun-ambient { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; contain: layout paint; }
.collection-autorun-ambient figure { position: absolute; left: var(--ambient-x); top: var(--ambient-y); width: clamp(82px,11vw,190px); margin: 0; opacity: .18; mix-blend-mode: screen; filter: blur(.45px) saturate(.72) brightness(.78); animation: collectionAmbientDrift var(--ambient-duration) ease-in-out var(--ambient-delay) infinite alternate; will-change: transform, opacity; }
.collection-autorun-ambient figure:nth-child(3n+2) { opacity: .11; filter: blur(1px) saturate(.62) brightness(.68); }
.collection-autorun-ambient figure:nth-child(3n) { opacity: .24; }
.collection-autorun-ambient img { position: static; display: block; width: 100%; height: auto; max-height: 25vh; object-fit: contain; }
.collection-autorun-vignette { z-index: 3; pointer-events: none; background: radial-gradient(ellipse 62% 76% at 50% 48%, transparent 42%, rgba(1,5,8,.38) 76%,rgba(1,5,8,.7)); }
@keyframes collectionAmbientDrift { 0%{transform:translate3d(-12px,18px,0) scale(.95);opacity:.06} 50%{opacity:.24} 100%{transform:translate3d(14px,-20px,0) scale(1.025);opacity:.06} }
.collection-autorun-top { position: relative; z-index: 3; display: flex; justify-content: space-between; padding: 20px 28px; border-bottom: 1px solid rgba(137, 194, 225, .13); background: #030a0f; color: rgba(170, 213, 236, .64); font: 700 7px/1 var(--mono); letter-spacing: .22em; }
.collection-autorun-copy { position: relative; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px 18px; padding: 20px 28px 18px; border-top: 1px solid rgba(137, 194, 225, .13); background: #030a0f; }
.collection-autorun-copy small { color: rgba(149, 213, 246, .8); font: 700 8px/1 var(--mono); letter-spacing: .22em; }
.collection-autorun-copy h3 { grid-column: 1 / 3; margin: 0; color: rgba(244, 249, 252, .96); font: 730 clamp(22px, 3vw, 40px)/1.2 var(--jp); letter-spacing: .045em; text-wrap: balance; }
.collection-autorun-copy time { color: rgba(178, 203, 217, .72); font: 650 9px/1 var(--mono); letter-spacing: .12em; }
.collection-autorun-controls { position: relative; z-index: 4; display: flex; justify-content: flex-end; gap: 7px; padding: 0 28px 22px; background: #030a0f; }
.collection-autorun-controls button { min-height: 36px; border: 1px solid rgba(148, 207, 238, .25); padding: 9px 12px; background: rgba(2, 9, 14, .66); color: rgba(210, 232, 243, .8); font: 650 8px/1 var(--jp); letter-spacing: .07em; cursor: pointer; backdrop-filter: blur(7px); }
.collection-autorun-controls button:hover,
.collection-autorun-controls button:focus-visible { outline: none; border-color: rgba(161, 222, 252, .62); color: #f1f8fb; }
.collection-autorun-controls button[hidden] { display: none; }
.trailer-archive.is-autorun-paused .collection-autorun-visual img.is-active { animation-play-state: paused; }
.trailer-archive.is-autorun-paused .collection-autorun-ambient figure { animation-play-state: paused; }

@media (max-width: 760px) {
  html.is-trailer-depth:has(.trailer-archive.is-collection-threshold),
  html.is-trailer-depth:has(.trailer-archive.is-collection-threshold) body {
    overflow: hidden !important;
  }

  html.is-trailer-depth:has(.trailer-archive.is-collection-threshold) {
    scrollbar-gutter: auto !important;
  }

  html .crossroad-hero > .trailer-archive.is-depth-mode.is-collection-threshold:not(.is-collapsed) {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    transform: none !important;
  }

  html .crossroad-hero.is-trailer-depth:has(> .trailer-archive.is-collection-threshold) > .trailer-focus-veil {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .trailer-archive.is-collection-threshold .collection-room {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    scrollbar-gutter: stable;
  }

  .collection-room-head { grid-template-columns: 1fr; align-items: stretch; }
  .collection-room-head-actions { justify-content: space-between; gap: 12px; }
  .collection-autorun-start { min-width: 132px; }
  .collection-room-state { min-width: 102px; gap: 12px; }
  .collection-room-state strong { font-size: 25px; }
  .collection-official-head-tools > span { display: none; }
  .collection-official-title-group { align-items: flex-start; flex-direction: column; gap: 5px; }
  .collection-section-head .collection-official-embed-note { font-size: 9px; line-height: 1.3; }
  .collection-section-settings { width: 38px; height: 30px; flex-basis: 38px; font-size: 20px; }
  .collection-section-edit { width: auto; min-width: 64px; height: 36px; flex-basis: auto; padding: 0 13px; font-size: 14px; }
  .collection-official-stage { height: auto; max-width: 720px; grid-template-columns: minmax(0, 1fr); }
  .collection-official-media { aspect-ratio: 16 / 9; }
  .collection-official-media > img { max-height: none; }
  .collection-official-media { aspect-ratio: 16 / 9; }
  .collection-official-copy { grid-template-columns: 1fr auto; grid-template-rows: auto minmax(42px, 1fr) auto auto; min-height: 192px; padding: 14px 16px 16px; }
  .collection-official-copy { border-top: 1px solid rgba(137, 194, 225, .13); border-left: 0; }
  .collection-official-copy small { grid-column: 1; }
  .collection-official-copy time { grid-column: 2; grid-row: 1; }
  .collection-official-copy strong { grid-column: 1 / -1; }
  .collection-official-transport { grid-column: 1 / -1; grid-row: auto; }
  .collection-official-copy strong { font-size: 17px; }
  .collection-official-rail { grid-auto-columns: 104px; }
  .collection-official-index { width: 104px; height: 75px; }
  .collection-official-index img { height: 59px; }
  .collection-personal { padding-top: 30px; }
  .collection-autorun-top { padding: 16px 18px; }
  .collection-autorun-copy { grid-template-columns: 1fr auto; padding: 15px 18px 13px; }
  .collection-autorun-copy small { grid-column: 1; }
  .collection-autorun-copy time { grid-column: 2; grid-row: 1; }
  .collection-autorun-copy h3 { grid-column: 1 / -1; font-size: clamp(20px, 6.5vw, 30px); }
  .collection-autorun-controls { padding: 0 16px 16px; display: grid; grid-template-columns: repeat(2, 1fr); }
  .collection-autorun-controls button { padding-inline: 8px; }
  .collection-autorun-player { inset: 10% 4% 9%; }
  .collection-autorun-ambient figure { width: clamp(64px,24vw,128px); }
}

@media (prefers-reduced-motion: reduce) {
  .collection-autorun,
  .collection-autorun-visual img,
  .collection-official-media > img { transition: none; }
  .collection-autorun-visual img.is-active { transform: none; }
  .collection-autorun-ambient figure { animation: none; }
}

/* Final top-header override; kept last because the legacy mobile block above is broader. */
@media (max-width: 760px) {
  .collection-room-shell { width: 100%; margin: 0; padding: 36px 24px 40px; box-sizing: border-box; }
  .collection-room-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; margin-bottom: 22px; padding: 0 0 16px; border-bottom: 0; }
  .collection-room-head h2 { font-size: clamp(30px, 8vw, 42px); white-space: nowrap; }
  .collection-room-head-actions { justify-content: flex-end; gap: 0; }
  .collection-room-state { min-width: 0; align-self: end; justify-items: end; grid-template-columns: repeat(2, auto); gap: 18px; padding-bottom: 1px; }
  .collection-room-state > span { justify-items: end; grid-template-columns: auto auto; align-items: baseline; gap: 7px; }
  .collection-room-state strong { font-size: 25px; line-height: 1; }
  .collection-room-state small { font-size: 8px; }
  .collection-official-title-group { flex-direction: row; align-items: baseline; gap: 12px; }
  .collection-section-head { margin-bottom: 20px; }
  .collection-official-stage { width: 100%; max-width: none; }
  .collection-official-copy { min-height: 128px; grid-template-rows: auto minmax(42px, 1fr); padding: 17px 14px 16px; border-right: 0; border-left: 0; background: transparent; }
  .collection-official-copy strong { font-size: 20px; line-height: 1.45; }
  .collection-official-transport { min-height: 64px; margin-top: 0; border-right: 0; border-left: 0; }
  .collection-official-transport button,
  .collection-official-transport a,
  .collection-official-volume,
  .collection-official-autonext { min-height: 62px; }
  .collection-official-rail { grid-auto-columns: calc((100vw - 72px) / 3); gap: 12px; margin-top: 17px; }
  .collection-official-index { width: auto; height: 102px; }
  .collection-official-index img { height: 82px; }
  .collection-official-index span { height: 18px; padding-top: 5px; }
  .collection-personal { padding-top: 48px; }
  .collection-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
  .collection-room-card-shell { height: 142px; }
  .trailer-archive.has-collected-art .collection-room-card-shell:first-child {
    grid-row: auto;
    height: auto;
    margin-bottom: 24px;
  }
}