.homepage-cycle { background: transparent; color-scheme: dark; --embed-text:#f1f0f8; --embed-muted:#b9bdd0; }
.homepage-cycle body { background: transparent; color: var(--embed-text,#f1f0f8); }
.homepage-cycle main { max-width: none; padding: 0; }
.homepage-cycle .toolbar,.homepage-cycle .versions,.homepage-cycle .intro,.homepage-cycle .archive-link,.homepage-cycle .footnote { display: none; }
.homepage-cycle .experience { margin: 0; }
.homepage-cycle .visual { background: transparent; border-radius: 0; padding: 12px 8px 0; color: #f1f0f8; }
.homepage-cycle .step p { color: var(--embed-muted,#aeb2c8); }
.homepage-cycle #reset { display: none; }
.homepage-cycle .compound { padding-bottom: 16px; margin-bottom: 0; }
@media(max-width:850px){.homepage-cycle .story{padding-top:8px}.homepage-cycle .experience{gap:12px}.homepage-cycle .scene-meta{padding-top:8px}}
.homepage-cycle .stage { min-height: 0; width: 100%; }

/* Give the homepage graphic and its supporting copy more reading room. */
.homepage-cycle .experience{grid-template-columns:minmax(0,2.5fr) minmax(300px,1fr);gap:28px}
.homepage-cycle #steps .step-eyebrow{font-size:10px}
.homepage-cycle #steps .step h2{font-size:17px}
.homepage-cycle #steps .step p{font-size:16px}
.homepage-cycle .compound{font-size:14px}
.homepage-cycle .memory-agent-card,.homepage-cycle .memory-agent-copy strong{font-size:12px}
.homepage-cycle .memory-retained-summary strong{font-size:13px}
.homepage-cycle .memory-retained-summary p{font-size:12px}
.homepage-cycle .memory-retained-summary small{font-size:10px}
@media(max-width:850px){.homepage-cycle .experience{grid-template-columns:1fr;gap:16px}}

/* Homepage uses the Study 2 navigation with the existing context illustration. */
.homepage-cycle [data-variant=camera] .step-headline{display:block;opacity:1;visibility:visible;margin-top:0;transition:none}
.homepage-cycle [data-variant=camera] #steps .step-headline h2{margin:7px 0 0;overflow:visible}
.homepage-cycle [data-variant=camera] [aria-expanded=true] .step-phase{visibility:visible}
.homepage-cycle .experience{grid-template-columns:minmax(0,2.5fr) minmax(300px,1fr);margin-top:-40px}
.homepage-cycle .experience>.story{justify-content:flex-start;padding-top:70px}
.homepage-cycle .step-navigation{min-height:500px;padding-bottom:36px}
.homepage-cycle #steps .step>button{padding:21px 8px 21px 18px}
/* The homepage follows the visitor's reduced-motion setting; the study's replay and motion controls stay off. */
.homepage-cycle .visual-footer{display:none}
.homepage-cycle .compound{margin-top:-28px;padding-bottom:8px}
.homepage-cycle [data-secondary-detail]{opacity:.65}
@media(max-width:850px){
 .homepage-cycle .experience{grid-template-columns:1fr;margin-top:-20px}
 .homepage-cycle .experience>.story{padding-top:8px}
 .homepage-cycle .step-navigation{min-height:490px}
 .homepage-cycle .compound{margin-top:-12px}
}

@media(min-width:851px){.homepage-cycle #steps{margin-top:40px}}

.homepage-cycle .experience[data-step="0"] #network #camera{transform:translate(110px,0) scale(.965)}

.homepage-cycle .awaiting-entrance .stage{visibility:hidden}

/* Phones: the graphic comes first, then swipeable step cards that act as the navigation. */
.homepage-cycle .mobile-steps{display:none}
@media(max-width:850px){
 .homepage-cycle,.homepage-cycle body{overflow:clip}
 .homepage-cycle .experience{display:flex;flex-direction:column;gap:0;margin-top:0;padding-bottom:0;position:relative}
 .homepage-cycle .experience>.story{order:1;width:100%;max-width:none;padding:0;min-height:0}
 .homepage-cycle .step-navigation{min-height:0;padding:0;position:static}
 .homepage-cycle #steps{display:none}
 .homepage-cycle .visual{padding:0;width:100%;max-width:none}
 .homepage-cycle .stage{aspect-ratio:740/500;min-height:0;overflow:visible}
 .homepage-cycle .compound{display:none}
 .homepage-cycle .mobile-steps{display:block;margin-top:12px}
 .homepage-cycle .mobile-step-track{position:relative;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:8px;padding:0 8px;overscroll-behavior-x:contain;scrollbar-width:none}
 .homepage-cycle .mobile-step-track::-webkit-scrollbar{display:none}
 .homepage-cycle .mobile-step-card{flex:0 0 calc(100% - 40px);scroll-snap-align:start;display:grid;align-content:start;gap:6px;padding:16px 18px;text-align:left;background:#1b1e29;border:1px solid #343749;border-radius:10px;color:#f1f0f8;opacity:.55;transition:opacity .25s,border-color .25s}
 .homepage-cycle .mobile-step-card[aria-pressed=true]{opacity:1;border-color:color-mix(in srgb,var(--ink) 55%,#343749)}
 .homepage-cycle .mobile-step-title{font-size:17px;line-height:1.35;font-weight:500}
 .homepage-cycle .mobile-step-text{font-size:14px;line-height:1.55;color:#b9bdd0}
 .homepage-cycle .mobile-step-controls{display:flex;align-items:center;gap:8px;padding:12px 8px 0}
 .homepage-cycle .mobile-step-dots{display:flex;gap:6px;margin-right:auto}
 .homepage-cycle .mobile-step-dots i{width:6px;height:6px;border-radius:50%;background:#3d4154;transition:background-color .25s,width .25s}
 .homepage-cycle .mobile-step-dots i.active{width:18px;border-radius:3px;background:#c9c6e4}
 .homepage-cycle .mobile-step-controls{gap:10px;padding-top:16px}
 .homepage-cycle .mobile-step-arrow{width:52px;height:52px;display:grid;place-items:center;padding:0;border:1px solid #4a4e66;border-radius:10px;background:#222533;color:#f1f0f8}
 .homepage-cycle .mobile-step-arrow svg{width:22px;height:22px}
 .homepage-cycle .mobile-step-arrow[data-move="-1"] svg{transform:scaleX(-1)}
 .homepage-cycle .mobile-step-arrow:active:not(:disabled){background:#2c3042}
 .homepage-cycle .mobile-step-arrow:disabled{opacity:.35;cursor:default}
}

/* Phones: the later-step globe shrinks to 80% so the blocks beside it get more room. */
@media(max-width:850px){
 .homepage-cycle .memory-agent-copy p{font-size:14px}
 .homepage-cycle .memory-retained-summary strong{font-size:14px}
 .homepage-cycle .memory-retained-summary p{font-size:13px}
 .homepage-cycle .memory-retained-summary small{font-size:12px}
 .homepage-cycle .experience[data-step="1"] #network #camera{transform:translate(-205px,-85px) scale(.408)}
 .homepage-cycle .experience[data-step="2"] #network #camera{transform:translate(-195px,-70px) scale(.392)}
 .homepage-cycle .experience[data-step="3"] #network #camera{transform:translate(-195px,-100px) scale(.392)}
}