.universe { position: relative; background: var(--accent); color: var(--black); }
.universe-stage { position: relative; min-height: 760px; overflow: hidden; isolation: isolate; padding: 100px var(--gutter) 130px; }
.universe-title { font: normal clamp(46px, 9vw, 132px)/1 var(--font-heading); letter-spacing: -.055em; max-width: 12ch; }
.universe-title em { font-family: var(--font-serif); font-weight: normal; }
.universe-sweep { display: none; }
.universe-mask { position: absolute; inset: 0; background: var(--black); clip-path: circle(0% at 50% 45%); z-index: -1; }
.universe-model { width: min(470px, 88vw); aspect-ratio: 1; margin: 36px auto; pointer-events: none; }
.universe-fallback { position: relative; width: 100%; height: 100%; }
.universe-fallback img { position: absolute; display: block; object-fit: contain; }
.universe-fallback-main { width: 67%; height: 67%; top: 16.5%; left: 16.5%; }
.universe-fallback-small { width: 18%; height: 18%; }
.universe-fallback-small:nth-child(2) { top: 3%; left: 41%; }
.universe-fallback-small:nth-child(3) { top: 72%; left: 3%; }
.universe-fallback-small:nth-child(4) { top: 72%; right: 3%; }
.universe-model canvas { display: block; width: 100%; height: 100%; }
.universe-model.is-ready .universe-fallback { display: none; }
.universe-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1050px; margin-inline: auto; }
.universe-note h3 { font: normal clamp(24px, 2.5vw, 34px)/1.15 var(--font-heading); letter-spacing: -.03em; margin-bottom: 14px; }
.universe-note p { font-size: 17px; line-height: 1.5; max-width: 30ch; opacity: .7; }
.universe-hint { display: none; }
.universe.is-enhanced { height: 340svh; }
.universe.is-enhanced .universe-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; padding: 0; }
.is-enhanced .universe-title, .is-enhanced .universe-sweep { position: absolute; top: 44%; left: 0; transform: translate3d(var(--universe-title-x, 0%), -50%, 0); padding-inline: var(--gutter); max-width: none; white-space: nowrap; font: normal clamp(64px, 12vw, 180px)/1.1 var(--font-heading); letter-spacing: -.055em; }
.is-enhanced .universe-sweep { display: block; color: #fff; transform: translate3d(var(--universe-sweep-x, 110vw), -50%, 0); }
.is-enhanced .universe-model { position: absolute; z-index: 2; width: min(66vw, 690px); height: min(72svh, 690px); top: 55%; left: 50%; margin: 0; transform: translate(-50%, -50%); }
.is-enhanced .universe-notes { position: absolute; inset: auto var(--gutter) 125px; color: #fff; gap: 42%; max-width: none; }
.is-enhanced .universe-note { overflow: hidden; }
.is-enhanced .universe-note > * { transform: translateY(130%); opacity: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.is-enhanced .universe-note.is-visible > * { transform: translateY(0); opacity: 1; }
.is-enhanced .universe-note.is-visible p { opacity: .7; transition-delay: .1s; }
.is-enhanced .universe-hint { display: block; position: absolute; top: 100px; left: var(--gutter); font-size: 14px; opacity: var(--universe-hint-opacity, .6); }
@media (max-width: 767px) {
  .universe-stage { min-height: 0; }
  .universe-notes { grid-template-columns: 1fr; gap: 28px; }
  .universe.is-enhanced { height: 300svh; }
  .is-enhanced .universe-title, .is-enhanced .universe-sweep { top: 34%; font-size: clamp(64px, 15vw, 105px); }
  .is-enhanced .universe-model { width: min(92vw, 440px); height: min(58svh, 440px); top: 46%; }
  .is-enhanced .universe-notes { inset: auto var(--gutter) 105px; grid-template-columns: 1fr 1fr; gap: 24px; }
  .universe-note h3 { font-size: 23px; }
  .universe-note p { font-size: 15px; }
}
@media (max-width: 420px) {
  .is-enhanced .universe-notes { grid-template-columns: 1fr; gap: 20px; }
  .universe-note h3 { margin-bottom: 8px; font-size: 21px; }
  .universe-note p { max-width: 36ch; }
}
@media (prefers-reduced-motion: reduce) {
  .universe *, .universe *::before { transition: none !important; }
}