.universe {
  --universe-ink:#f4f0e3;
  --universe-muted:#c0c9b7;
  position:relative;
  margin:36px 0 0;
  padding:48px;
  color:var(--universe-ink);
  background:radial-gradient(ellipse at 24% 48%,#3b4b35 0,transparent 54%),#172b26;
  border-radius:3px;
  overflow:hidden;
}
.universe [hidden] {
  display:none !important;
}
.universe a:hover {
  color:#efc488;
}
.universe :is(button,a,input):focus-visible {
  outline-color:#efc488;
  outline-offset:5px;
}
.universe .eyebrow {
  color:var(--universe-muted);
}
.universe-nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px 0 26px;
}
.universe button {
  cursor:pointer;
  border:1px solid #8c9f8980;
  background:transparent;
  color:inherit;
  padding:12px 18px;
  min-height:44px;
  border-radius:3px;
  transition:background-color 160ms ease-out,scale 160ms ease-out;
}
.universe button:active {
  scale:.96;
}
.universe button:hover {
  background:#ffffff0c;
}
.universe-nav button {
  flex:1;
  text-align:left;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px;
}
.universe-nav button>span {
  color:#c5ab83;
  font:11px var(--mono);
}
.universe-nav button[aria-pressed="true"] {
  background:#e7e4d7;
  color:#1c3129;
  border-color:#e7e4d7;
}
.universe-nav button[aria-pressed="true"]>span {
  color:#765c37;
}
.universe-stage {
  position:relative;
  padding:12px 0 32px;
}
.universe-stage::before {
  content:"";
  position:absolute;
  left:-15%;
  top:40%;
  width:75%;
  height:30%;
  border:1px solid #d5d8b51c;
  border-radius:50%;
  transform:rotate(-19deg);
  pointer-events:none;
}
.universe-window {
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:56px;
  min-height:560px;
  margin:0;
}
.universe-window+.universe-window {
  margin-top:54px;
}
.universe-ready .universe-window {
  margin-top:0;
}
.universe-visual {
  display:grid;
  place-items:center;
  min-width:0;
}
.universe-phone {
  position:relative;
  width:245px;
  aspect-ratio:390 / 780;
  max-width:100%;
  border:8px solid #171c18;
  border-radius:34px;
  box-shadow:0 3px 0 #67715d,0 24px 45px #0006;
  overflow:hidden;
  background:#142823;
}
.universe-phone>img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.universe-phone>video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
}
.universe-device {
  width:100%;
  padding:9px;
  border:1px solid #a2b2a147;
  border-radius:18px;
  background:#101c19;
  box-shadow:0 24px 40px #0005;
}
.universe-device>img {
  width:100%;
  height:auto;
  display:block;
  border-radius:9px;
}
.universe-research {
  width:100%;
  padding:28px 12px;
  background:#e8ebdf;
  border-radius:4px;
  transform:rotate(-2deg);
  box-shadow:0 20px 40px #0004;
}
.universe-research>img {
  display:block;
  width:100%;
  height:auto;
}
.universe figcaption {
  max-width:35ch;
}
.universe figcaption h3 {
  margin:18px 0 22px;
  font:clamp(34px,3.5vw,48px)/1.1 var(--serif);
  letter-spacing:-.035em;
  text-wrap:balance;
}
.universe figcaption>p {
  color:var(--universe-muted);
  font-size:16px;
}
.universe .universe-caption {
  margin-top:24px;
  font:11px/1.7 var(--mono);
  color:#b9c2af;
}
.universe-motion {
  margin-top:22px;
}
.universe-motion[aria-pressed="true"] {
  border-color:#e8c393;
  background:#e8c39312;
}
.universe-status {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.universe audio {
  display:none;
}
@media(max-width:1000px) {
  .universe {
    padding:34px;
  }
  .universe-window {
    gap:30px;
    min-height:530px;
  }
}
@media(max-width:700px) {
  .universe {
    margin:28px 0 0;
    padding:27px 20px;
  }
  .universe-nav {
    gap:6px;
    padding-top:25px;
  }
  .universe-nav button {
    flex:1 1 100%;
    padding:11px 14px;
  }
  .universe-window {
    grid-template-columns:1fr;
    gap:32px;
    min-height:0;
  }
  .universe-phone {
    width:226px;
  }
  .universe figcaption {
    max-width:none;
  }
  .universe figcaption h3 {
    margin-top:12px;
  }
  .universe figcaption>p {
    font-size:15px;
  }
  .universe-window:not(:first-child) .universe-visual {
    min-height:250px;
  }
  .universe-research {
    transform:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  .universe button {
    transition:none;
  }
  .universe button:active {
    scale:1;
  }
}