/* Composition layer. All colors come from the accepted color-test. */
:root {
  --hero-height: 792px;
  --scene-left: calc(50% + 24px);
  --archive-bleed: 88px;
}
.container { width:min(1200px, calc(100% - 112px)); }
main { position:relative; overflow:clip; }
.site-header nav { margin-left:72px; gap:28px; }
.header-account { gap:0; }
.header-install { height:40px; font-size:13px; margin-left:24px; padding:0 16px; }
.hero { height:var(--hero-height); }
.hero-copy { padding-top:136px; }
.hero-product { left:var(--scene-left); top:64px; width:992px; height:710px; }
.sheet-back { inset:-16px -24px 120px 24px; }
.camera-sheet { height:620px; bottom:auto; }
.hero-feed { height:508px; }
.hero-feed img { transform:none; }
.hero-event { left:24px; top:384px; width:420px; }
.hero-event img { width:394px; }
.hero-time-sheet { left:16px; top:592px; width:1056px; padding:12px; }
.hero-time-title { padding-right:0; }
.hero-timeline img { width:1800px; left:-759px; }
.event-time-link { position:absolute; inset:0; width:992px; height:710px; pointer-events:none; z-index:5; }
.event-time-link path { fill:none; stroke:var(--accent); stroke-width:1; }
.scene-handoff { position:absolute; top:0; left:0; width:100%; height:100%; background:none; overflow:visible; }
.scene-handoff path { fill:none; stroke:var(--accent); stroke-width:1; }
.archive-section { padding:32px 0 40px; scroll-margin-top:16px; }
.archive-heading { margin-bottom:40px; }
.archive-stage:before { display:none; }
.archive-layout { grid-template-columns:minmax(0,1fr) 200px; gap:32px; }
.archive-feed { margin-left:calc(-1 * var(--archive-bleed)); width:calc(100% + var(--archive-bleed)); height:560px; }
.archive-feed>img { position:absolute; inset:0; transform:none; transition:opacity 360ms ease-out; }
.frame-archive { opacity:0; }
.archive-stage[data-mode=archive] .frame-live { opacity:0; }
.archive-stage[data-mode=archive] .frame-archive { opacity:1; }
.archive-controls { padding-top:16px; }
.mode-controls { width:200px; margin-top:0; background:var(--paper); }
.time-readout { margin-top:40px; }
.event-jump { margin-top:40px; }
.archive-timeline { width:calc(100% + var(--archive-bleed)); margin:16px 0 0 calc(-1 * var(--archive-bleed)); height:104px; }
.archive-timeline img { width:2380px; }
.fixture-note { margin-top:24px; }
@media (max-width:1360px) {
  :root { --hero-size:62px; --heading-size:48px; --scene-left:calc(50% + 16px); --archive-bleed:40px; }
  .site-header nav { margin-left:56px; gap:24px; }
  .hero-copy h1 { width:600px; }
  .hero-product { top:64px; }
  .hero-time-sheet { width:960px; }
  .archive-heading>p { width:246px; }
  .archive-feed { height:540px; }
  .archive-timeline img { left:calc(50% + 20px); }
}
@media (prefers-reduced-motion:reduce) {
  .archive-feed>img { transition:none; }
}