/* The crystal archive lives only in page mastheads; working and reading areas stay calm. */
.scene-page-hero {
  position: relative;
  isolation: isolate;
  --scene-paper: #f8fcfe;
  --scene-paper-rgb: 248, 252, 254;
  --scene-copy-rgb: 255, 255, 255;
}
.scene-page-backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--scene-paper);
  pointer-events: none;
}
.scene-page-backdrop > picture,
.scene-page-backdrop img,
.scene-page-video {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-page-backdrop img,
.scene-page-backdrop .scene-page-video { object-fit: cover; object-position: 70% center; }
.scene-page-backdrop .scene-page-video { aspect-ratio: auto; background: transparent; }
.scene-page-video { opacity: 0; transition: opacity 300ms ease; }
.scene-page-hero[data-video-state="playing"] .scene-page-video { opacity: 1; }
.scene-page-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--scene-paper-rgb), .96) 0%, rgba(var(--scene-paper-rgb), .84) 35%, rgba(var(--scene-paper-rgb), .35) 64%, rgba(var(--scene-paper-rgb), .14) 100%), linear-gradient(0deg, rgba(var(--scene-paper-rgb), .8), transparent 28%);
}
.scene-page-copy {
  position: relative;
  z-index: 2;
  padding: 22px 26px;
  border: 1px solid rgba(155, 204, 220, .45);
  border-radius: 18px;
  background: linear-gradient(115deg, rgba(var(--scene-copy-rgb), .98), rgba(var(--scene-copy-rgb), .91));
  box-shadow: 0 8px 28px rgba(22, 68, 95, .06);
}
.scene-page-hero > .mascot-companion { z-index: 3; }
.docs-hero.scene-page-hero .page-hero-inner:focus-within { z-index: 4; }
.scene-page-controls { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.scene-page-controls button,
.learn-app .scene-page-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  color: var(--theme-text);
  background: var(--theme-surface);
  font: 600 11px/1.4 var(--sans);
  cursor: pointer;
}
.scene-page-controls button > [aria-hidden="true"] { color: var(--theme-cyan); }
.scene-page-controls button:hover { border-color: var(--theme-cyan); }
.scene-page-controls button:focus-visible { outline: 3px solid var(--theme-cyan); outline-offset: 3px; }
.scene-page-controls button[aria-pressed="true"] { border-color: var(--theme-cyan); }

/* The backdrop alone clips. The command finder can open beyond its masthead. */
.docs-hero.scene-page-hero { overflow: visible; padding-bottom: 32px; }
.docs-hero.scene-page-hero .page-hero-inner { max-width: 840px; }
.docs-hero.scene-page-hero .command-search-shell { margin-top: 25px; }
.docs-hero.scene-page-hero .scene-page-backdrop { top: var(--header); }
.docs-hero.scene-page-hero .mascot-companion { align-self: center; }

.patch-release-hero.scene-page-hero { padding: 20px; border: 1px solid var(--theme-border); border-radius: 24px; }
.patch-release-hero.scene-page-hero .patch-hero-copy { min-width: 0; }
.patch-hero-copy.scene-page-copy > p:not(.kicker) { max-width: 54ch; margin: 18px 0 0; color: var(--theme-muted); font-size: 15px; line-height: 1.6; }
.patch-release-hero.scene-page-hero .patch-mascot { margin-right: 8px; }

.learn-app .learn-hero.scene-page-hero { margin-bottom: 34px; padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--theme-border); }
.learn-app .learn-hero.scene-page-hero::before { content: none; }
.learn-app .learn-hero-copy { max-width: 690px; }
.learn-app .learn-hero-copy > p:not(.eyebrow):not(.resume-note) { font-size: 14px; color: var(--theme-muted); line-height: 1.9; }
.learn-app .learn-hero-copy .hero-actions { gap: 18px; }
.learn-app .learn-hero-copy .scene-page-controls { margin-top: 14px; }
.learn-app .learn-hero.scene-page-hero .learn-guide-mascot { bottom: 42px; }

:root[data-theme="dark"] .scene-page-hero {
  --scene-paper: #0d2a35;
  --scene-paper-rgb: 13, 42, 53;
  --scene-copy-rgb: 13, 42, 53;
}
:root[data-theme="dark"] .scene-page-copy { border-color: rgba(69, 163, 186, .55); box-shadow: 0 8px 28px rgba(0, 0, 0, .12); }
:root[data-theme="dark"] .scene-page-backdrop::after { background: linear-gradient(90deg, rgba(var(--scene-paper-rgb), .97), rgba(var(--scene-paper-rgb), .83) 35%, rgba(var(--scene-paper-rgb), .5) 66%, rgba(var(--scene-paper-rgb), .36)), linear-gradient(0deg, rgba(var(--scene-paper-rgb), .85), transparent 30%); }

@media (max-width: 760px) {
  .scene-page-copy { padding: 18px; border-radius: 14px; }
  .scene-page-backdrop::after { background: linear-gradient(90deg, rgba(var(--scene-paper-rgb), .84), rgba(var(--scene-paper-rgb), .4)), linear-gradient(0deg, rgba(var(--scene-paper-rgb), .8), transparent 48%); }
  .docs-hero.scene-page-hero .page-hero-inner { padding: 18px; }
  .docs-hero.scene-page-hero .docs-guide-mascot { right: 24px; top: calc(var(--header) + 55px); width: 80px; height: 128px; }
  .docs-hero.scene-page-hero .page-hero-inner > .kicker,
  .docs-hero.scene-page-hero .page-hero-inner > h1 { max-width: calc(100% - 84px); }
  .docs-hero.scene-page-hero h1 { font-size: clamp(29px, 5.4vw, 40px); }
  .docs-hero.scene-page-hero .scene-page-copy { background: linear-gradient(110deg, rgba(var(--scene-copy-rgb), .98) 15%, rgba(var(--scene-copy-rgb), .94) 68%, rgba(var(--scene-copy-rgb), .62)); }
  .docs-hero.scene-page-hero .scene-page-controls { margin-top: 12px; }
  .patch-release-hero.scene-page-hero { padding: 12px; gap: 8px; border-radius: 18px; }
  .patch-release-hero.scene-page-hero .patch-hero-copy { padding: 16px 12px; }
  .patch-release-hero.scene-page-hero .patch-mascot { margin-right: 0; width: 82px; height: 145px; margin-top: 18px; }
  .patch-release-hero.scene-page-hero h1 { font-size: clamp(32px, 7vw, 44px); }
  .patch-hero-copy.scene-page-copy > p:not(.kicker) { font-size: 12px; }
  .learn-app .learn-hero.scene-page-hero { padding: 20px 110px 20px 16px; }
  .learn-app .learn-hero-copy { padding: 18px 15px; }
  .learn-app .learn-hero-copy h1 { font-size: clamp(30px, 6vw, 36px); }
  .learn-app .learn-hero-copy > p:not(.eyebrow):not(.resume-note) { font-size: 12px; }
  .learn-app .learn-hero-copy .hero-actions { margin-right: 0; align-items: flex-start; gap: 8px 16px; }
  .learn-app .learn-hero.scene-page-hero .learn-guide-mascot { top: 48px; bottom: auto; right: 8px; width: 96px; height: 162px; }
}
@media (max-width: 420px) {
  .patch-release-hero.scene-page-hero { display: block; }
  .patch-release-hero.scene-page-hero .patch-hero-copy > .kicker,
  .patch-release-hero.scene-page-hero .patch-hero-copy > h1 { max-width: calc(100% - 78px); }
  .patch-release-hero.scene-page-hero .patch-mascot { position: absolute; right: 18px; top: 22px; width: 72px; height: 105px; margin-top: 0; }
  .patch-release-hero.scene-page-hero .patch-hero-copy > p:not(.kicker) { margin-top: 26px; }
  .learn-app .learn-hero.scene-page-hero { padding-right: 96px; }
  .learn-app .learn-hero.scene-page-hero .learn-guide-mascot { width: 80px; height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-page-video { transition: none; }
}