.legacy-page { background: radial-gradient(ellipse at 70% 0%, #14261e 0, transparent 52%), var(--bg); }
.legacy-shell { width: min(1280px, 90%); margin: auto; padding: 64px 0 32px; }
.legacy-introduction { max-width: 740px; margin-bottom: 42px; }
.eyebrow { color: var(--gold); font: 500 0.7rem/1.6 var(--font-ui); letter-spacing: 0.15em; text-transform: uppercase; }
.legacy-introduction h1 { margin: 14px 0 22px; color: var(--gold-bright); font-size: clamp(2.4rem, 4.5vw, 3.6rem); font-weight: 400; line-height: 1.1; }
.lead { color: var(--muted); font: 1.05rem/1.8 var(--font-ui); margin: 0; }
.preview-section { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--forest); }
.preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 28px; }
.preview-heading h2 { font-size: 1.25rem; font-weight: 400; margin: 0; }
.preview-label { flex-shrink: 0; color: var(--gold); font: 0.7rem var(--font-ui); }
.preview-stage { aspect-ratio: 16 / 9; position: relative; isolation: isolate; background: #080e0e; }
.preview-scenery { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 73% 50%; z-index: -2; }
.preview-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 14, 12, .86), rgba(4, 14, 12, .5) 50%, rgba(4, 14, 12, .22)); z-index: -1; }
.preview-poster { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(24px, 5vw, 64px); }
.preview-poster p { max-width: 400px; }
.poster-title { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; margin: 14px 0; }
.preview-poster > p:not(.eyebrow):not(.poster-title) { color: var(--muted); font: .9rem/1.6 var(--font-ui); margin: 0 0 24px; }
.preview-poster > .download-note { margin: 16px 0 0 !important; max-width: 290px; font-size: .75rem !important; }
.preview-frame { position: absolute; inset: 0; }
.preview-frame:empty { pointer-events: none; }
.preview-frame iframe { width: 100%; height: 100%; display: block; border: 0; background: #080e0e; }
.preview-frame iframe:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: -3px; }
.preview-support { padding: 20px 28px 24px; }
.session-status { margin: 0; color: var(--muted); font: .85rem/1.6 var(--font-ui); }
.session-status.is-error { color: #ffe3a0; }
.preview-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 28px 20px; }
.preview-controls .back-link { margin-right: auto; }
.legacy-page .button { cursor: pointer; }
.legacy-page .button:focus-visible { color: #161c15; }
.legacy-page .button.secondary:focus-visible { color: var(--gold-bright); }
.legacy-page .button:disabled { cursor: not-allowed; opacity: .65; }
.standalone-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 4px; color: var(--gold-bright); font: .85rem/1.5 var(--font-ui); text-underline-offset: 5px; }
.preview-support > .standalone-link { margin-top: 12px; }
.session-help, .small-note { color: var(--muted); font: .8rem/1.7 var(--font-ui); }
.session-help { margin-top: 12px; border-top: 1px solid var(--line); }
.session-help summary { display: list-item; width: fit-content; min-height: 48px; padding: 12px 4px; cursor: pointer; color: var(--gold-bright); }
.session-help summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.session-help p { margin: 0 0 12px; max-width: 72ch; }
.legacy-details { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 36px 0 28px; }
.legacy-details h2 { font-size: 1.25rem; font-weight: 400; margin: 0 0 12px; }
.legacy-details p { color: var(--muted); font: .9rem/1.8 var(--font-ui); margin: 0; }
.legacy-details .small-note { margin-top: 12px; font-size: .78rem; }
.appearance-notice { margin: 0; padding: 22px 0; border-top: 1px solid var(--line); color: var(--muted); font: .8rem/1.7 var(--font-ui); }
.portrait-pause { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 24px; background: var(--forest); font: 1rem/1.7 var(--font-ui); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.not-found .legacy-introduction { margin-bottom: 24px; }
@media (max-width: 767px) {
  .legacy-shell { width: calc(100% - 40px); padding-top: 40px; }
  .legacy-introduction { margin-bottom: 30px; }
  .legacy-introduction h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .lead { font-size: .95rem; }
  .preview-heading { padding: 18px 20px; flex-wrap: wrap; gap: 8px; }
  .preview-heading h2 { font-size: 1.1rem; }
  .preview-support { padding: 20px; }
  .preview-poster { padding: 28px 22px; }
  .legacy-details { grid-template-columns: 1fr; gap: 28px; padding-top: 30px; }
  .preview-controls { align-items: stretch; }
  .preview-controls { padding: 0 20px 20px; }
  .preview-controls .button { flex: 1 1 130px; }
  .standalone-link { width: 100%; }
  html:not(.js) .legacy-page .site-header .nav-shell { flex-wrap: wrap; }
  html:not(.js) .legacy-page #site-navigation { position: static; width: 100%; padding: 0 0 16px; border: 0; background: transparent; }
  .js .legacy-page #site-navigation:not(.collapsible) { display: none; }
}
@media (max-width: 767px) and (orientation: portrait) {
  .preview-stage { aspect-ratio: auto; min-height: 350px; }
  .preview-frame { visibility: hidden; }
}