/* Universe Digital: original reference geometry with the studio identity. */
@font-face {
  font-family:Sora;
  src:url('/assets/fonts/sora-latin.woff2') format('woff2');
  font-weight:100 800;
  font-style:normal;
  font-display:swap
}
:root {
  --lime: #a78bfa;
  --night: #0a0a12;
  --mist: #f7f7fb;
  --lime-soft: #d7c9ff;
  --night-2: #13131f;
  --night-3: #1b1b2c;
  --night-4: #24243a;
  --moss: #442a6b;
  --moss-2: #8b5cf6;
  --mist-2: #eeecf6;
  --mist-3: #e2def0;
  --night-soft: #656078;
  --line-night: rgb(10 10 18 / .14);
  --line-night-strong: rgb(10 10 18 / .32);
  --line-mist: rgb(247 247 251 / .14);
  --line-mist-strong: rgb(247 247 251 / .34);
  --line-lime: rgb(167 139 250 / .32);
  --grad-evolve: linear-gradient(115deg, var(--night) 0%, #372350 34%, #8b5cf6 64%, var(--lime) 88%, var(--lime-soft) 100%);
  --grad-soft: linear-gradient(90deg, var(--lime) 0%, var(--mist) 100%);
  --grad-lime: linear-gradient(180deg, var(--lime) 0%, #c3adfc 45%, var(--mist) 100%);
  --grad-lime-up: linear-gradient(180deg, var(--mist) 0%, #c3adfc 40%, var(--lime) 100%);
  --angle: 54.3deg;
  --slant: 35.7deg;
  --font-display: "Sora", Arial, sans-serif;
  --font-sans: "Sora", Arial, sans-serif;
  --font-mono: var(--font-sans);
  --fs-mega: clamp(4.5rem, 15vw, 15rem);
  --fs-display: clamp(2.6rem, 5.6vw, 5.8rem);
  --fs-h1: clamp(2.1rem, 4vw, 4.1rem);
  --fs-h2: clamp(1.6rem, 2.6vw, 2.7rem);
  --fs-h3: clamp(1.2rem, 1.5vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 1.15vw, 1.3rem);
  --fs-body: clamp(.98rem, .25vw + .9rem, 1.08rem);
  --fs-small: .875rem;
  --fs-label: .6875rem;
  --lh-tight: .88;
  --lh-snug: 1.06;
  --lh-body: 1.6;
  --track-label: .18em;
  --track-tag: .34em;
  --gutter: clamp(1rem, 4vw, 4rem);
  --container: min(100% - var(--gutter) * 2, 80rem);
  --container-pad: max(var(--gutter), (100% - 80rem) / 2);
  --col-gap: clamp(.75rem, 1.4vw, 1.5rem);
  --section-pad: clamp(5rem, 11vw, 10rem);
  --header-h: 5rem;
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-draw: cubic-bezier(.65, .05, .36, 1);
  --ease-snap: cubic-bezier(.34, 1.36, .64, 1);
  --dur-xs: .16s;
  --dur-s: .32s;
  --dur-m: .64s;
  --dur-l: 1s;
  --z-base: 1;
  --z-stage: 10;
  --z-header: 50;
  --z-menu: 60;
  --z-modal: 70;
  --z-loader: 90;
  --z-cursor: 100;
  --z-grain: 110
}
*,*:before,*:after {
  box-sizing:border-box
}
* {
  margin:0;
  padding:0
}
html {
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--night)
}
html.lenis,html.lenis body {
  height:auto
}
.lenis.lenis-smooth {
  scroll-behavior:auto!important
}
.lenis.lenis-stopped {
  overflow:hidden
}
body {
  min-height:100svh;
  background:var(--night);
  color:var(--mist);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:450;
  line-height:var(--lh-body);
  font-feature-settings:"kern","liga";
  overflow-x:clip
}
html.is-loading,html.is-loading body {
  overflow:hidden
}
img,video,canvas,svg {
  display:block;
  max-width:100%
}
img,video {
  height:auto
}
button {
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
input,textarea {
  font:inherit;
  color:inherit
}
::selection {
  background:var(--lime);
  color:var(--night)
}
:focus-visible {
  outline:2px solid var(--lime);
  outline-offset:4px;
  border-radius:1px
}
.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  top:.75rem;
  left:.75rem;
  z-index:calc(var(--z-loader) + 1);
  padding:.75rem 1rem;
  background:var(--night);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  transform:translateY(-160%);
  transition:transform var(--dur-s) var(--ease-out)
}
.skip-link:focus-visible {
  transform:none
}
.label {
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  font-weight:650;
  line-height:1.3;
  letter-spacing:var(--track-label);
  text-transform:uppercase
}
.label--dim {
  opacity:.56
}
.degree {
  font-family:var(--font-sans);
  font-weight:650;
  font-feature-settings:"tnum";
  letter-spacing:.04em
}
.display,.h1,.h2,.h3 {
  font-family:var(--font-display);
  font-weight:400;
  text-wrap:balance
}
.display {
  font-size:var(--fs-display);
  line-height:.96;
  letter-spacing:-.02em
}
.h1 {
  font-size:var(--fs-h1);
  line-height:1;
  letter-spacing:-.018em
}
.h2 {
  font-size:var(--fs-h2);
  line-height:1.06;
  letter-spacing:-.012em
}
.h3 {
  font-size:var(--fs-h3);
  line-height:1.15;
  letter-spacing:-.005em
}
.lead {
  font-size:var(--fs-lead);
  line-height:1.55;
  font-weight:450;
  letter-spacing:-.005em
}
.hl {
  color:var(--lime)
}
.theme-light .hl,.on-light .hl {
  color:var(--moss-2)
}
.tag {
  font-weight:700;
  letter-spacing:var(--track-tag);
  text-transform:uppercase
}
.mask {
  display:block;
  overflow:hidden;
  padding-bottom:.08em;
  margin-bottom:-.08em
}
.mask>* {
  display:block
}
.scrub-words .w {
  opacity:.14;
  transition:none
}
.wrap {
  width:var(--container);
  margin-inline:auto
}
.grid12 {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--col-gap)
}
.hairline {
  height:1px;
  background:currentColor;
  opacity:.18;
  transform-origin:left
}
.sec-head {
  display:flex;
  align-items:center;
  gap:1rem;
  padding-block:1rem;
  border-top:1px solid var(--line-ink)
}
.sec-head .degree {
  display:inline-flex;
  align-items:center;
  padding:.3rem .6rem .25rem;
  border:1px solid currentColor;
  border-radius:var(--r-pill);
  opacity:.8
}
.theme-dark .sec-head {
  border-top-color:var(--line-paper)
}
.sec-head .degree {
  font-size:var(--fs-label);
  letter-spacing:var(--track-label)
}
.sec-head__rule {
  flex:1
}
.proposal {
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.35em .6em .3em;
  border:1px dashed currentColor;
  font-family:var(--font-mono);
  font-size:.625rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.72;
  white-space:nowrap;
  border-radius:var(--r-pill)
}
.proposal:before {
  content:"";
  width:.45em;
  height:.45em;
  border-radius:50%;
  background:var(--lime)
}
.btn {
  --btn-fg: var(--night);
  --btn-bg: transparent;
  --btn-fill: var(--night);
  --btn-fg-hover: var(--mist);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  padding:.95rem 1.4rem .95rem 1.5rem;
  border:1px solid currentColor;
  border-radius:var(--r-pill);
  color:var(--btn-fg);
  background:var(--btn-bg);
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-s) var(--ease-out)
}
.btn__fill {
  position:absolute;
  left:var(--fx, 50%);
  top:var(--fy, 50%);
  width:0;
  height:0;
  border-radius:50%;
  background:var(--btn-fill);
  transform:translate(-50%,-50%);
  z-index:-1;
  pointer-events:none
}
.btn__text {
  position:relative;
  display:block;
  overflow:hidden;
  height:1.3em;
  line-height:1.3em
}
.btn__text span {
  display:block;
  transition:transform var(--dur-m) var(--ease-out)
}
.btn__text span+span {
  position:absolute;
  inset:0;
  transform:translateY(105%)
}
.btn__arrow {
  position:relative;
  width:1.4em;
  height:.9em;
  overflow:hidden
}
.btn__arrow svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transition:transform var(--dur-m) var(--ease-out)
}
.btn__arrow svg+svg {
  transform:translate(-120%)
}
@media(hover:hover) {
  .btn:hover {
    color:var(--btn-fg-hover)
  }
  .btn:hover .btn__text span:first-child {
    transform:translateY(-105%)
  }
  .btn:hover .btn__text span+span {
    transform:none
  }
  .btn:hover .btn__arrow svg:first-child {
    transform:translate(120%)
  }
  .btn:hover .btn__arrow svg+svg {
    transform:none
  }
}
.theme-dark .btn,.btn--light {
  --btn-fg: var(--mist);
  --btn-fill: var(--lime);
  --btn-fg-hover: var(--night)
}
html.has-cursor,html.has-cursor * {
  cursor:none!important
}
html.has-cursor input[type=range],html.has-cursor [contenteditable] {
  cursor:auto!important
}
.cursor {
  position:fixed;
  left:0;
  top:0;
  z-index:var(--z-cursor);
  pointer-events:none;
  opacity:0;
  transition:opacity var(--dur-s)
}
.cursor.is-on {
  opacity:1
}
.cursor__dot,.cursor__ring {
  position:fixed;
  left:0;
  top:0
}
.cursor__dot {
  width:6px;
  height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:var(--lime);
  transition:transform .2s var(--ease-out),opacity .2s
}
.cursor__ring {
  width:34px;
  height:34px;
  margin:-17px 0 0 -17px;
  display:grid;
  place-items:center
}
.cursor__ring:before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid var(--lime);
  transition:transform .5s var(--ease-out),background .3s,border-color .3s
}
.cursor[data-mode=link] .cursor__ring:before {
  transform:scale(1.6);
  background:#a78bfa1f
}
.cursor[data-mode=label] .cursor__ring:before {
  transform:scale(2.6);
  background:var(--lime);
  border-color:var(--lime)
}
.cursor[data-mode=label] .cursor__dot {
  opacity:0
}
.cursor.on-lime[data-mode=label] .cursor__ring:before {
  background:var(--night);
  border-color:var(--night)
}
.cursor__label {
  position:relative;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--night);
  opacity:0;
  transform:scale(.6);
  transition:opacity .25s,transform .5s var(--ease-out);
  white-space:nowrap
}
.cursor.on-lime .cursor__label {
  color:var(--mist)
}
.cursor[data-mode=label] .cursor__label {
  opacity:1;
  transform:none
}
.cursor.is-down .cursor__ring:before {
  transform:scale(.8)
}
.cursor.is-down[data-mode=label] .cursor__ring:before {
  transform:scale(2.3)
}
.grain {
  position:fixed;
  inset:-50%;
  z-index:var(--z-grain);
  pointer-events:none;
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite
}
@keyframes grain {
  0% {
    transform:translate(0)
  }
  20% {
    transform:translate(-3%,2%)
  }
  40% {
    transform:translate(2%,-4%)
  }
  60% {
    transform:translate(-4%,-1%)
  }
  80% {
    transform:translate(3%,3%)
  }
  to {
    transform:translate(0)
  }
}
@media(prefers-reduced-motion:reduce) {
  .grain {
    animation:none
  }
  *,*:before,*:after {
    transition-duration:1ms!important;
    animation-duration:1ms!important;
    animation-iteration-count:1!important
  }
  .scrub-words .w {
    opacity:1
  }
}
.theme-light {
  background:var(--mist);
  color:var(--night)
}
.theme-lime {
  background:var(--grad-lime);
  color:var(--night)
}
.stk.theme-lime {
  background:var(--grad-lime-up)
}
.theme-dark {
  background:var(--night);
  color:var(--mist)
}
.theme-light .sec-head,.theme-lime .sec-head {
  border-top-color:var(--line-night)
}
.sec-head .degree {
  font-weight:700
}
.curtain {
  position:relative;
  z-index:2;
  margin-top:calc(var(--r-curtain) * -1);
  border-radius:var(--r-curtain) var(--r-curtain) 0 0;
  box-shadow:0 -24px 60px -30px #07070d73;
  --r-curtain: clamp(1.5rem, 3.4vw, 3rem)
}
.ld {
  position:fixed;
  inset:0;
  z-index:var(--z-loader);
  color:var(--mist);
  pointer-events:none
}
html.is-loading .ld {
  pointer-events:auto
}
.ld__svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible
}
.ld__bg {
  position:absolute;
  inset:0;
  background:var(--night);
  will-change:clip-path
}
.ld__cells path {
  fill:none;
  stroke:var(--lime);
  stroke-width:1;
  stroke-linejoin:round;
  opacity:.17
}
.ld__core {
  fill:none;
  stroke:var(--lime);
  stroke-width:1.25;
  stroke-linejoin:round
}
.ld__edge {
  fill:none;
  stroke:var(--lime-soft);
  stroke-width:1.5;
  opacity:0
}
.ld__fill {
  fill:url(#ld-fill)
}
.ld__ui {
  position:absolute;
  inset:0;
  padding:clamp(1rem,2.6vw,2.25rem) var(--gutter)
}
.ld__corner {
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:.45rem
}
.ld__tl {
  top:clamp(1rem,2.6vw,2.25rem);
  left:var(--gutter)
}
.ld__tr {
  top:clamp(1rem,2.6vw,2.25rem);
  right:var(--gutter);
  text-align:right;
  align-items:flex-end
}
.ld__word {
  width:4.6rem;
  fill:var(--mist)
}
.ld__foot {
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:clamp(1.4rem,3.4vw,2.6rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center
}
.ld__msg {
  overflow:hidden;
  font-family:var(--font-display);
  font-size:clamp(1.1rem,1.8vw,1.6rem);
  line-height:1.2;
  color:var(--mist)
}
.ld__msg span {
  display:block
}
.ld__barwrap {
  width:min(22rem,70vw);
  height:2px;
  border-radius:2px;
  background:var(--line-mist);
  overflow:hidden
}
.ld__barwrap i {
  display:block;
  height:100%;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:0 50%;
  border-radius:inherit
}
@media(max-width:640px) {
  .ld__tr {
    display:none
  }
}
.progress {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:2px;
  z-index:calc(var(--z-header) + 1);
  pointer-events:none
}
.progress i {
  display:block;
  height:100%;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:0 50%
}
html.is-loading .progress {
  visibility:hidden
}
.nav {
  position:fixed;
  top:1.1rem;
  left:0;
  right:0;
  z-index:var(--z-header);
  display:flex;
  justify-content:center;
  padding-inline:var(--gutter);
  pointer-events:none
}
html.is-loading .nav {
  visibility:hidden
}
.nav__pill {
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .5rem .5rem 1.7rem;
  border-radius:var(--r-pill);
  color:var(--pill-fg);
  background:var(--pill-bg);
  border:1px solid var(--pill-line);
  -webkit-backdrop-filter:blur(var(--pill-blur)) saturate(140%);
  backdrop-filter:blur(var(--pill-blur)) saturate(140%);
  box-shadow:0 10px 30px -18px #0a0a1280;
  transition:background .6s var(--ease-out),color .6s var(--ease-out),border-color .6s var(--ease-out)
}
.nav[data-theme=dark] {
  --pill-bg: rgb(10 10 18 / .42);
  --pill-fg: var(--mist);
  --pill-line: rgb(247 247 251 / .14);
  --pill-blur: 18px
}
.nav[data-theme=light] {
  --pill-bg: rgb(247 247 251 / .72);
  --pill-fg: var(--night);
  --pill-line: rgb(10 10 18 / .1);
  --pill-blur: 14px
}
.nav[data-theme=lime] {
  --pill-bg: rgb(10 10 18 / .88);
  --pill-fg: var(--mist);
  --pill-line: rgb(10 10 18 / .2);
  --pill-blur: 10px
}
.nav__logo {
  display:flex;
  align-items:center;
  margin-right:1.4rem
}
.nav__word {
  width:4.2rem;
  height:auto;
  overflow:visible
}
.nav__l {
  fill:currentColor
}
.nav__c {
  fill:var(--lime)
}
.nav__links {
  position:relative;
  display:flex;
  align-items:center
}
.nav__hover {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:0;
  border-radius:var(--r-pill);
  background:var(--lime);
  opacity:0;
  pointer-events:none
}
.nav__link {
  position:relative;
  padding:.7rem 1.05rem;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:-.005em;
  border-radius:var(--r-pill);
  opacity:.72;
  transition:opacity var(--dur-s),color var(--dur-s)
}
.nav__link.is-active {
  opacity:1
}
.nav__link.is-active:after {
  content:"";
  position:absolute;
  left:50%;
  bottom:.28rem;
  width:3px;
  height:3px;
  margin-left:-1.5px;
  border-radius:50%;
  background:var(--lime)
}
.nav__link.is-hover {
  opacity:1;
  color:var(--night)
}
.nav__link.is-hover:after {
  opacity:0
}
.nav__txt {
  position:relative;
  display:block;
  overflow:hidden;
  height:1.2em;
  line-height:1.2em
}
.nav__txt span {
  display:block;
  transition:transform .55s var(--ease-out)
}
.nav__txt span+span {
  position:absolute;
  inset:0;
  transform:translateY(105%)
}
@media(hover:hover) {
  .nav__link:hover .nav__txt span:first-child,.nav__cta:hover .nav__txt span:first-child {
    transform:translateY(-105%)
  }
  .nav__link:hover .nav__txt span+span,.nav__cta:hover .nav__txt span+span {
    transform:none
  }
}
.nav__cta {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-left:1rem;
  padding:.78rem 1.25rem .78rem 1.4rem;
  border-radius:var(--r-pill);
  background:var(--lime);
  color:var(--night);
  font-size:.8125rem;
  font-weight:700;
  transition:background var(--dur-s),color var(--dur-s)
}
.nav__cta svg {
  width:1rem;
  height:1rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .55s var(--ease-out)
}
@media(hover:hover) {
  .nav__cta:hover {
    background:var(--mist);
    color:var(--night)
  }
  .nav__cta:hover svg {
    transform:translateY(2px)
  }
}
.nav[data-theme=light] .nav__cta:hover {
  background:var(--night);
  color:var(--mist)
}
.nav__menu {
  display:none;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  place-items:center
}
.nav__burger {
  position:relative;
  width:1.1rem;
  height:.5rem;
  display:block
}
.nav__burger i {
  position:absolute;
  left:0;
  right:0;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transition:transform var(--dur-m) var(--ease-out)
}
.nav__burger i:first-child {
  top:0
}
.nav__burger i:last-child {
  bottom:0
}
.nav__menu[aria-expanded=true] .nav__burger i:first-child {
  transform:translateY(.22rem) rotate(45deg)
}
.nav__menu[aria-expanded=true] .nav__burger i:last-child {
  transform:translateY(-.22rem) rotate(-45deg)
}
.menu {
  position:fixed;
  inset:0;
  z-index:var(--z-menu);
  color:var(--mist);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:6rem var(--gutter) calc(var(--gutter) * 1.2)
}
.menu[hidden] {
  display:none
}
.menu__bg {
  position:absolute;
  inset:0;
  background:var(--night);
  transform-origin:50% 0
}
.menu__list {
  position:relative;
  list-style:none
}
.menu__item {
  border-top:1px solid var(--line-paper)
}
.menu__item a {
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding:.7rem 0 .55rem
}
.menu__deg {
  font-size:.7rem;
  color:var(--lime);
  width:3rem;
  flex:none
}
.menu__name {
  display:block;
  overflow:hidden;
  font-family:var(--font-display);
  font-size:2.2rem;
  letter-spacing:-.01em;
  line-height:1.05
}
.menu__name span {
  display:block
}
.menu__foot {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:2rem
}
.menu__cta {
  padding:.8rem 1.1rem;
  border-radius:var(--r-pill);
  background:var(--lime);
  color:var(--night)
}
@media(max-width:1080px) {
  .nav__links {
    display:none
  }
  .nav__menu {
    display:grid
  }
  .nav__pill {
    width:100%;
    justify-content:space-between
  }
  .nav__cta {
    margin-left:auto
  }
}
@media(max-width:480px) {
  .nav__cta {
    padding:.6rem .85rem;
    font-size:.75rem
  }
}
.card {
  --cw: 420px;
  --t: calc(var(--cw) * .0089);
  position:relative;
  width:var(--cw);
  aspect-ratio:1586 / 1000;
  transform-style:preserve-3d;
  container-type:inline-size;
  --gx: 30%;
  --gy: 20%;
  --ga: .4;
  --shade: 0
}
.card__face,.card__edge {
  position:absolute;
  inset:0;
  border-radius:4.4cqw;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden
}
.card__face {
  overflow:hidden;
  transform:translateZ(calc(var(--t) / 2))
}
.card__back {
  transform:rotateY(180deg) translateZ(calc(var(--t) / 2));
  background:#11111d
}
.card__back img {
  width:100%;
  height:100%;
  object-fit:cover
}
.card__edge {
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  background:linear-gradient(100deg,#252438,#0d0d17 40%,#3d3158 70%,#11111d);
  transform:translateZ(calc(var(--t) * (var(--i) / 8 - .5) * .86))
}
.card__bg {
  position:absolute;
  inset:0;
  background:radial-gradient(60% 85% at 76% 22%,rgb(167 139 250 / .85),transparent 70%),radial-gradient(50% 70% at 96% 70%,rgb(126 90 190 / .7),transparent 72%),radial-gradient(70% 90% at 64% 38%,#5e3b95 0%,transparent 78%),linear-gradient(100deg,#141421,#171725 34%,#312843 58%,#633da1)
}
.card__art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.card__pattern path,.card__ghost {
  fill:none;
  stroke:#a78bfa33;
  stroke-width:.9
}
.card__ghost {
  stroke:#d7c9ff8c;
  opacity:0
}
.card__word path {
  fill:var(--mist)
}
.card__chip {
  position:absolute;
  left:5.8%;
  top:34.5%;
  width:10.6%
}
.card__nfc {
  position:absolute;
  left:17.4%;
  top:39.4%;
  width:3.3%
}
.card__num,.card__name {
  position:absolute;
  left:5.6%;
  font-family:var(--font-sans);
  color:var(--mist);
  white-space:nowrap;
  font-feature-settings:"tnum"
}
.card__num {
  top:72.5%;
  font-size:4.05cqw;
  font-weight:500;
  letter-spacing:.06em
}
.card__name {
  top:84.5%;
  font-size:2.2cqw;
  font-weight:750;
  letter-spacing:.05em
}
.card__visa {
  position:absolute;
  right:9.2%;
  bottom:7.6%;
  width:13.6%
}
.card__glare {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(42% 60% at var(--gx) var(--gy),rgb(255 255 255 / calc(var(--ga) * .55)),transparent 70%),linear-gradient(calc(110deg + var(--gx) * .4),transparent 30%,rgb(221 204 255 / calc(var(--ga) * .18)) 46%,transparent 60%),linear-gradient(rgb(5 5 12 / var(--shade)),rgb(5 5 12 / var(--shade)))
}
.card__rim {
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px #f7f7fb1f,inset 0 1px #ffffff2e
}
.pro {
  position:relative;
  background:var(--night)
}
.pro__stage {
  position:relative;
  height:100svh;
  overflow:hidden;
  isolation:isolate
}
.pro__stage>* {
  position:absolute
}
.pro__light {
  inset:0;
  z-index:0
}
.pro__fallback {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 60% 30%,#6b45b740,transparent 58%),radial-gradient(ellipse at 75% 74%,#6366f123,transparent 62%),var(--night)
}
.pro__gl {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.pro__hero {
  inset:0;
  z-index:1;
  display:grid;
  place-items:center
}
.wm {
  width:min(80vw,76rem);
  margin-top:-6vh;
  overflow:visible
}
.wm__l,.wm__tag {
  fill:var(--mist)
}
.pro__meta {
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  color:var(--mist);
  text-shadow:0 1px 14px rgb(7 7 14 / .55)
}
.pro__meta--tl {
  top:calc(var(--header-h) + 1.5rem);
  left:var(--gutter)
}
.pro__meta--bl {
  bottom:clamp(1.2rem,3vw,2.4rem);
  left:var(--gutter)
}
.pro__cue {
  bottom:clamp(1.2rem,3vw,2.4rem);
  right:var(--gutter);
  position:absolute;
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--mist)
}
.pro__cue svg {
  width:1.1rem;
  height:1.1rem;
  fill:none;
  stroke:var(--lime);
  stroke-width:1.6;
  animation:cue 2.2s var(--ease-in-out) infinite
}
@keyframes cue {
  0%,to {
    transform:translate(0)
  }
  50% {
    transform:translate(3px,3px)
  }
}
.pro__mist {
  inset:0;
  z-index:2;
  background:var(--mist);
  color:var(--night);
  clip-path:polygon(0 0,0 0,0 0)
}
.pro__bigk {
  position:absolute;
  height:150svh;
  width:auto;
  left:46%;
  top:-18svh;
  fill:var(--lime);
  overflow:visible
}
.pro__manifesto {
  position:absolute;
  left:var(--container-pad);
  top:50%;
  width:min(44rem,46vw);
  transform:translateY(-50%)
}
.pro__kicker {
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1.6rem
}
.pro__kicker .degree {
  padding:.28rem .6rem .22rem;
  border:1px solid currentColor;
  border-radius:var(--r-pill);
  font-size:var(--fs-label)
}
.pro__title {
  margin-bottom:1.8rem
}
.pro__em {
  display:inline-block;
  position:relative
}
.pro__em:after {
  content:"";
  position:absolute;
  left:-.06em;
  right:-.08em;
  bottom:.02em;
  height:.34em;
  background:var(--lime);
  z-index:-1;
  transform:scaleX(var(--em, 0));
  transform-origin:0 50%
}
.pro__lead {
  max-width:34rem;
  opacity:.82
}
.pro__night {
  inset:0;
  z-index:3;
  background:var(--grad-lime);
  clip-path:polygon(0 0,0 0,0 0)
}
.card-rig {
  left:50%;
  top:50%;
  z-index:4;
  width:0;
  height:0;
  perspective:1600px;
  perspective-origin:50% 50%
}
.card-drop {
  position:absolute;
  left:0;
  top:0;
  transform-style:preserve-3d
}
.card-float {
  position:absolute;
  left:calc(var(--cw) / -2);
  top:calc(var(--cw) / -2 / 1.586);
  transform-style:preserve-3d;
  --cw: min(28vw, 27rem)
}
.card-float .card {
  --cw: inherit;
  width:var(--cw)
}
.card-shadow {
  position:absolute;
  left:0;
  top:0;
  width:calc(min(28vw,27rem)*.86);
  height:calc(min(28vw,27rem)*.16);
  margin:0 0 0 calc(min(28vw,27rem)*-.43);
  border-radius:50%;
  background:radial-gradient(closest-side,rgb(4 4 10 / .55),transparent);
  filter:blur(14px);
  opacity:0
}
.sym-cam {
  inset:0;
  z-index:5;
  pointer-events:none
}
.sym {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible
}
.sym .c-k {
  fill:var(--night);
  opacity:0
}
.sym .c-ko {
  fill:none;
  stroke:var(--night);
  stroke-width:2;
  stroke-linejoin:round
}
.sym .c-dash {
  fill:none;
  stroke:var(--night);
  stroke-width:1.6;
  stroke-dasharray:8 6
}
.pro__symtxt {
  z-index:6;
  left:var(--container-pad);
  top:50%;
  width:min(30rem,34vw);
  transform:translateY(-50%);
  color:var(--night);
  visibility:hidden
}
.pro__symtxt .display {
  margin-bottom:1.5rem
}
.pro__symtxt .lead {
  max-width:26rem
}
@media(max-width:860px) {
  .card-float {
    --cw: min(72vw, 24rem)
  }
  .card-shadow {
    width:calc(min(72vw,24rem)*.86);
    margin-left:calc(min(72vw,24rem)*-.43)
  }
  .wm {
    width:86vw;
    margin-top:-24vh
  }
  .pro__manifesto {
    width:auto;
    right:var(--gutter);
    top:calc(var(--header-h) + 1.5rem);
    transform:none
  }
  .pro__manifesto .display {
    font-size:clamp(2rem,8.4vw,3rem)
  }
  .pro__lead {
    font-size:.98rem
  }
  .pro__bigk {
    left:18%;
    top:30svh;
    height:110svh
  }
  .pro__symtxt {
    width:auto;
    right:var(--gutter);
    top:calc(var(--header-h) + 1.2rem);
    transform:none
  }
  .pro__symtxt .display {
    font-size:clamp(2rem,9vw,3rem);
    margin-bottom:.8rem
  }
  .pro__symtxt .lead {
    display:none
  }
}
.nm {
  padding-block:var(--section-pad) calc(var(--section-pad) * .8);
  overflow:clip
}
.nm__intro {
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:var(--col-gap);
  align-items:end;
  margin-top:clamp(2.5rem,6vw,5rem)
}
.nm__intro .display {
  max-width:15ch
}
.nm__say {
  justify-self:end;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  align-items:flex-start
}
.nm__ipa {
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  line-height:1
}
.nm__ipa span {
  color:var(--moss-2);
  margin-right:.3em
}
.nm__wave {
  width:1rem;
  height:1rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round
}
.nm__play.is-playing .nm__wave path {
  animation:wave .6s var(--ease-in-out) infinite alternate;
  transform-origin:center;
  transform-box:fill-box
}
.nm__play.is-playing .nm__wave path:nth-child(2n) {
  animation-delay:.15s
}
@keyframes wave {
  to {
    transform:scaleY(.35)
  }
}
.nm__stage {
  margin-block:clamp(2rem,6vw,5rem);
  padding-inline:var(--gutter)
}
.nm__wm {
  width:100%;
  max-width:92rem;
  margin-inline:auto;
  overflow:visible
}
.nm__l {
  fill:var(--night)
}
.nm__d {
  stroke:var(--moss-2);
  stroke-width:1.5;
  fill:none
}
.nm__o {
  fill:var(--lime)
}
.nm__dot {
  fill:var(--night)
}
.nm__tags text {
  font:650 15px/1 var(--font-sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  fill:var(--night);
  opacity:.6;
  text-anchor:middle
}
.nm__facts {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-night)
}
.nm__facts li {
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:1.6rem 1.4rem 0 0
}
.nm__facts li+li {
  padding-left:1.4rem;
  border-left:1px solid var(--line-night)
}
.nm__n {
  font-family:var(--font-display);
  font-size:clamp(3.2rem,6vw,5.5rem);
  line-height:.9
}
.nm__facts p {
  font-size:var(--fs-small);
  opacity:.72;
  max-width:24ch
}
@media(max-width:860px) {
  .nm__intro {
    grid-template-columns:1fr
  }
  .nm__say {
    justify-self:start
  }
  .nm__facts {
    grid-template-columns:1fr 1fr
  }
  .nm__facts li:nth-child(3) {
    padding-left:0;
    border-left:0
  }
  .nm__facts li {
    padding-bottom:1.6rem;
    border-bottom:1px solid var(--line-night)
  }
  .nm__tags text {
    font-size:22px
  }
}
.stk {
  position:relative
}
.stk__stage {
  position:relative;
  height:100svh;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding-top:calc(var(--header-h) + 1.4rem);
  padding-bottom:clamp(1.5rem,4vw,3rem)
}
.stk__head {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.stk__svg {
  width:min(100%,120svh);
  justify-self:center;
  align-self:center;
  height:100%;
  max-height:62svh;
  overflow:visible
}
.stk__l {
  fill:var(--night)
}
.stk__frame rect,.stk__frame path {
  fill:none;
  stroke:var(--night);
  stroke-width:1
}
.stk__frame {
  opacity:0
}
.stk__txt {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--col-gap);
  align-items:end
}
.stk__txt .lead {
  max-width:32rem;
  justify-self:end
}
.stk>.pin-spacer {
  background:var(--grad-lime-up)
}
.vs {
  background:linear-gradient(180deg,var(--lime) 0%,#c3adfc 22%,#efebfa 55%,var(--mist) 100%)
}
.vs__grid {
  min-height:150svh;
  padding-inline:var(--gutter);
  display:grid;
  align-items:start;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--col-gap)
}
.vs__text {
  grid-column:1 / span 5;
  position:sticky;
  top:0;
  height:100svh;
  display:flex;
  flex-direction:column;
  padding-top:calc(var(--header-h) + 1.5rem);
  padding-bottom:calc(var(--gutter) * .9)
}
.vs__text {
  justify-content:center
}
.vs__text .sec-head {
  position:absolute;
  top:calc(var(--header-h) + 1.5rem);
  left:0;
  right:0
}
.vs__title {
  margin-top:0
}
.vs__lead {
  margin-top:1.6rem;
  max-width:32ch;
  opacity:.85
}
.vs__index {
  list-style:none;
  margin-top:2.4rem;
  border-bottom:1px solid var(--line-night-strong)
}
.vs__link {
  width:100%;
  display:grid;
  grid-template-columns:2.6rem 1fr auto 1.2rem;
  align-items:center;
  gap:.8rem;
  padding:.85rem .9rem .85rem .6rem;
  border-top:1px solid var(--line-night-strong);
  border-radius:var(--r-s);
  text-align:left;
  position:relative;
  overflow:hidden;
  cursor:default
}
.vs__link:before {
  content:"";
  position:absolute;
  inset:0;
  background:var(--night);
  transform:scaleY(0);
  transform-origin:50% 100%;
  transition:transform .6s var(--ease-out);
  z-index:0
}
.vs__link>* {
  position:relative;
  z-index:1;
  transition:color var(--dur-s) var(--ease-out),transform .6s var(--ease-out)
}
.vs__link .degree {
  font-size:.75rem
}
.vs__link-t {
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.015em
}
.vs__link svg {
  width:1.1rem;
  height:1.1rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5
}
@media(hover:hover) {
  .vs__link:hover:before {
    transform:scaleY(1)
  }
  .vs__link:hover>* {
    color:var(--mist)
  }
  .vs__link:hover .vs__link-t {
    transform:translate(.6rem)
  }
  .vs__link:hover svg {
    transform:rotate(45deg);
    color:var(--lime)
  }
}
.vs__hint {
  margin-top:1.4rem;
  opacity:.6
}
.vloop {
  grid-column:7 / -1;
  height:100svh;
  position:sticky;
  top:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--col-gap);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%)
}
.vloop__col {
  position:relative;
  overflow:hidden;
  touch-action:pan-x;
  cursor:grab
}
.vloop__col.is-drag {
  cursor:grabbing
}
.vloop__inner {
  display:flex;
  flex-direction:column;
  gap:var(--col-gap);
  will-change:transform
}
.vloop__item {
  position:relative;
  display:grid;
  place-items:center;
  background:var(--bg);
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px #0a0a1224,0 18px 40px -26px #0a0a1273;
  transition:opacity .5s var(--ease-out),transform .9s var(--ease-out)
}
.vloop__item--h {
  aspect-ratio:5 / 4
}
.vloop__item--k,.vloop__item--s {
  aspect-ratio:1
}
.vloop__item svg {
  width:100%;
  height:100%;
  fill:var(--fg);
  pointer-events:none;
  transition:transform 1.2s var(--ease-out)
}
.vloop__cap {
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:.9rem;
  display:flex;
  justify-content:space-between;
  color:var(--fg);
  font-size:.625rem;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s var(--ease-out),transform .6s var(--ease-out)
}
@media(hover:hover) {
  .vloop__item:hover svg {
    transform:scale(1.06)
  }
  .vloop__item:hover .vloop__cap {
    opacity:.8;
    transform:none
  }
}
.vloop[data-focus] .vloop__item {
  opacity:.28
}
.vloop[data-focus=h] .vloop__item--h,.vloop[data-focus=k] .vloop__item--k,.vloop[data-focus=s] .vloop__item--s {
  opacity:1
}
.vloop[data-focus] .vloop__item .vloop__cap {
  opacity:.8;
  transform:none
}
@media(max-width:860px) {
  .stk__svg {
    max-height:50svh;
    width:100%
  }
  .stk__txt {
    grid-template-columns:1fr;
    gap:1rem
  }
  .stk__txt .lead {
    justify-self:start;
    font-size:1rem
  }
  .vs__text {
    grid-column:1 / -1;
    position:relative;
    height:auto;
    padding-bottom:3rem
  }
  .vs__text .sec-head {
    position:static
  }
  .vs__title {
    margin-top:3rem
  }
  .vloop {
    grid-column:1 / -1;
    height:90svh;
    position:relative
  }
}
.ty {
  padding-block:var(--section-pad)
}
.ty__top {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(1.5rem,4vw,4rem);
  margin-top:clamp(2.5rem,5vw,4rem);
  align-items:center
}
.ty__viewer {
  position:relative;
  aspect-ratio:1.15;
  border-radius:var(--r-l);
  background:var(--night-2);
  border:1px solid var(--line-mist);
  display:grid;
  place-items:center;
  overflow:hidden
}
.ty__big {
  position:relative;
  z-index:1;
  font-family:var(--font-display);
  font-size:clamp(9rem,24vw,22rem);
  line-height:1;
  color:var(--lime);
  letter-spacing:-.02em;
  transform:translateY(-.04em)
}
.ty__base {
  position:absolute;
  left:0;
  right:0;
  top:72%;
  height:1px;
  background:var(--line-mist-strong)
}
.ty__base:before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-38%
}
.ty__slant {
  position:absolute;
  left:50%;
  top:-20%;
  width:1px;
  height:140%;
  background:linear-gradient(transparent,rgb(167 139 250 / .5),transparent);
  transform:rotate(35.7deg)
}
.ty__meta {
  position:absolute;
  left:1.2rem;
  right:1.2rem;
  bottom:1rem;
  display:flex;
  justify-content:space-between
}
.ty__copy .h1 {
  margin-bottom:2rem
}
.ty__points {
  list-style:none;
  border-top:1px solid var(--line-mist)
}
.ty__points li {
  padding:1rem 0;
  border-bottom:1px solid var(--line-mist);
  opacity:.8;
  font-size:var(--fs-body)
}
.ty__points b {
  font-weight:750;
  color:var(--mist);
  opacity:1
}
.ty__glyphs {
  list-style:none;
  margin-top:clamp(3rem,6vw,5rem);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(3.6rem,1fr));
  border-top:1px solid var(--line-mist);
  border-left:1px solid var(--line-mist)
}
.ty__glyphs li {
  border-right:1px solid var(--line-mist);
  border-bottom:1px solid var(--line-mist)
}
.ty__glyphs button {
  width:100%;
  aspect-ratio:1;
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--mist);
  transition:background .3s var(--ease-out),color .3s
}
.ty__glyphs button:hover,.ty__glyphs button.is-on {
  background:var(--lime);
  color:var(--night)
}
.ty__tester {
  margin-top:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--line-mist)
}
.ty__tester-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
  gap:1rem;
  flex-wrap:wrap
}
.ty__range {
  display:flex;
  align-items:center;
  gap:.8rem
}
.ty__range output {
  width:2.6rem;
  text-align:right;
  font-feature-settings:"tnum"
}
.ty__range input {
  width:clamp(7rem,16vw,14rem);
  accent-color:var(--lime)
}
.ty__edit {
  font-family:var(--font-display);
  font-size:calc(var(--ty-size, 112) * 1px);
  line-height:1;
  letter-spacing:-.02em;
  padding:.2em 0 .3em;
  outline:none;
  overflow-wrap:anywhere;
  caret-color:var(--lime)
}
.ty__edit:focus {
  color:var(--lime)
}
.ty__scale {
  margin-top:clamp(4rem,8vw,7rem)
}
.ty__scale-head {
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin-bottom:1.5rem;
  flex-wrap:wrap
}
.ty__scale ol {
  list-style:none;
  border-top:1px solid var(--line-mist)
}
.ty__scale li {
  display:grid;
  grid-template-columns:9rem 1fr 9rem;
  gap:var(--col-gap);
  align-items:center;
  padding:1.4rem 0;
  border-bottom:1px solid var(--line-mist)
}
.ty__spec {
  text-align:right;
  line-height:1.6
}
.ty__tag {
  color:var(--lime)
}
.ty__h-display {
  font-family:var(--font-display);
  font-size:clamp(3rem,7vw,6rem);
  line-height:.96
}
.ty__h-1 {
  font-family:var(--font-display);
  font-size:clamp(2.2rem,4.4vw,4rem);
  line-height:1
}
.ty__h-2 {
  font-family:var(--font-display);
  font-size:clamp(1.6rem,2.8vw,2.5rem);
  line-height:1.06
}
.ty__h-body {
  max-width:40rem;
  font-size:1.0625rem;
  line-height:1.6;
  opacity:.85
}
.ty__h-tag {
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.34em;
  text-transform:uppercase
}
@media(max-width:860px) {
  .ty__top {
    grid-template-columns:1fr
  }
  .ty__scale li {
    grid-template-columns:1fr;
    gap:.5rem
  }
  .ty__spec {
    text-align:left
  }
}
.co {
  padding-block:var(--section-pad);
  position:relative
}
.co__intro {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:var(--col-gap);
  align-items:end;
  margin:clamp(2.5rem,5vw,4rem) 0 clamp(2.5rem,5vw,4rem)
}
.co__intro .display {
  max-width:14ch
}
.co__intro .lead {
  opacity:.78
}
.co__strips {
  list-style:none;
  display:flex;
  height:clamp(26rem,70svh,40rem);
  padding-inline:var(--gutter);
  gap:.5rem
}
.co__strip {
  flex:1 1 0;
  min-width:0;
  transition:flex-grow .9s var(--ease-out)
}
.co__strip.is-open {
  flex-grow:2.6
}
.co__strip button {
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  text-align:left;
  padding:clamp(1rem,2vw,1.6rem);
  background:var(--bg);
  color:var(--fg);
  border-radius:var(--r-l);
  box-shadow:inset 0 0 0 1px #0a0a1214;
  overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 3.2rem) 0,100% 4.45rem,100% 100%,0 100%)
}
.co__name {
  white-space:nowrap
}
.co__hexes {
  display:grid;
  align-items:end;
  justify-items:start
}
.co__hex {
  grid-area:1 / 1;
  font-family:var(--font-display);
  line-height:.9;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:opacity .6s var(--ease-out)
}
.co__hex--v {
  font-size:clamp(1.8rem,3.6vw,3.6rem);
  writing-mode:vertical-rl;
  transform:rotate(180deg)
}
.co__hex--h {
  font-size:clamp(2.6rem,6vw,6rem);
  opacity:0
}
.co__strip.is-open .co__hex--v {
  opacity:0;
  transition-duration:.3s
}
.co__strip.is-open .co__hex--h {
  opacity:1;
  transition-delay:.25s
}
.co__more {
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:26rem;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s var(--ease-out),transform .7s var(--ease-out);
  pointer-events:none
}
.co__strip.is-open .co__more {
  opacity:1;
  transform:none;
  transition-delay:.22s
}
.co__role {
  font-size:var(--fs-body);
  line-height:1.45
}
.co__specs {
  display:flex;
  flex-direction:column;
  gap:.35rem
}
.co__specs i {
  font-style:normal;
  opacity:.55;
  display:inline-block;
  width:6.2rem
}
.co__grad {
  position:relative;
  margin-top:clamp(4rem,8vw,7rem);
  height:clamp(16rem,42svh,26rem);
  border-radius:var(--r-l);
  overflow:hidden;
  background:var(--mist-2);
  color:var(--mist)
}
.co__grad-fill {
  position:absolute;
  inset:0;
  background:var(--grad-evolve)
}
.co__grad-txt {
  position:absolute;
  left:clamp(1.2rem,3vw,2.4rem);
  top:clamp(1.2rem,3vw,2.2rem);
  display:flex;
  flex-direction:column;
  gap:1rem
}
.co__grad-ends {
  position:absolute;
  left:clamp(1.2rem,3vw,2.4rem);
  right:clamp(1.2rem,3vw,2.4rem);
  bottom:1.2rem;
  display:flex;
  justify-content:space-between
}
.co__grad-ends span:last-child {
  color:var(--night)
}
.co__prop {
  margin-top:clamp(3rem,6vw,5rem)
}
.co__prop-head {
  display:flex;
  gap:1rem;
  align-items:center;
  margin-bottom:1rem;
  flex-wrap:wrap
}
.co__bar {
  display:flex;
  height:4.2rem;
  border-radius:var(--r-m);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px #0a0a121a
}
.co__bar span {
  flex:var(--w) 1 0;
  background:var(--bg);
  color:var(--fg);
  display:flex;
  align-items:flex-end;
  gap:.4rem;
  padding:.7rem .8rem;
  font-size:var(--fs-small);
  white-space:nowrap;
  overflow:hidden;
  transform-origin:0 50%
}
.co__bar b {
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.4rem;
  line-height:.9
}
.co__note {
  margin-top:1rem;
  text-transform:none;
  letter-spacing:.02em;
  font-weight:500
}
.co__toast {
  position:fixed;
  left:50%;
  bottom:1.6rem;
  z-index:var(--z-modal);
  padding:.8rem 1.1rem;
  border-radius:var(--r-pill);
  background:var(--night);
  color:var(--lime);
  transform:translate(-50%,calc(100% + 3rem));
  visibility:hidden;
  transition:transform .6s var(--ease-out),visibility 0s .6s;
  pointer-events:none
}
.co__toast.is-on {
  transform:translate(-50%);
  visibility:visible;
  transition:transform .6s var(--ease-out)
}
@media(max-width:860px) {
  .co__intro {
    grid-template-columns:1fr
  }
  .co__strips {
    flex-direction:column;
    height:auto
  }
  .co__strip {
    flex:none
  }
  .co__strip button {
    min-height:7rem
  }
  .co__hex--v {
    display:none
  }
  .co__hex--h {
    opacity:1;
    font-size:2rem
  }
  .co__strip.is-open .co__hex--h {
    font-size:3rem
  }
  .co__more {
    display:none
  }
  .co__strip.is-open .co__more {
    display:flex
  }
  .co__bar span:not(:first-child) {
    font-size:0
  }
  .co__bar span:not(:first-child) b {
    font-size:1.1rem
  }
}
.pt {
  position:relative;
  padding-bottom:var(--section-pad)
}
.pt__field {
  position:relative;
  height:clamp(32rem,76svh,46rem);
  overflow:hidden;
  border-radius:inherit;
  background:var(--night)
}
.pt__field canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 80%,transparent 100%)
}
.pt__over {
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:calc(var(--header-h) + 1rem);
  padding-bottom:2rem;
  pointer-events:none
}
.pt__over .sec-head {
  position:absolute;
  top:clamp(1.5rem,3vw,2.5rem);
  left:0;
  right:0
}
.pt__title {
  max-width:14ch
}
.pt__lead {
  max-width:30rem;
  margin-top:1.4rem;
  opacity:.8
}
.pt__over .sec-head,.pt__title,.pt__lead {
  text-shadow:0 2px 30px var(--night)
}
.pt__uses {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--col-gap);
  margin-top:clamp(3rem,6vw,5rem)
}
.pt__use {
  display:flex;
  flex-direction:column;
  gap:.9rem
}
.pt__use figcaption {
  display:flex;
  gap:.8rem;
  align-items:baseline;
  font-size:var(--fs-small)
}
.pt__use figcaption .label {
  color:var(--lime)
}
.pt__art {
  position:relative;
  aspect-ratio:4 / 5;
  border-radius:var(--r-l);
  overflow:hidden
}
.pt__art--img img {
  width:100%;
  height:116%;
  object-fit:cover;
  margin-top:-8%
}
@media(max-width:860px) {
  .pt__uses {
    grid-template-columns:1fr
  }
  .pt__art {
    aspect-ratio:5 / 4
  }
}
.ap__stage {
  position:relative;
  height:100svh;
  overflow:hidden
}
.ap__bigk {
  position:absolute;
  right:-12vw;
  top:-14svh;
  height:130svh;
  width:auto;
  fill:none;
  stroke:var(--night);
  stroke-width:1;
  opacity:.22;
  overflow:visible
}
.ap__txt {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  margin-top:calc(var(--header-h) / 2);
  pointer-events:none
}
.ap__txt .display {
  max-width:10ch;
  margin-top:clamp(1.5rem,4vw,3rem)
}
.ap__notes {
  list-style:none;
  margin-top:2.2rem;
  width:min(26rem,34vw);
  border-top:1px solid var(--line-night)
}
.ap__notes li {
  display:flex;
  gap:1rem;
  padding:.95rem 0;
  border-bottom:1px solid var(--line-night);
  font-size:var(--fs-small);
  opacity:.3;
  transition:opacity .5s var(--ease-out)
}
.ap__notes li.is-on {
  opacity:1
}
.ap__notes .degree {
  font-size:var(--fs-label);
  width:1.8rem;
  flex:none;
  padding-top:.15rem
}
.ap__notes b {
  display:block;
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.35rem;
  line-height:1.1;
  margin-bottom:.25rem
}
.ap__rig {
  position:absolute;
  left:62%;
  top:calc(50% + var(--header-h) / 2);
  width:0;
  height:0;
  perspective:1700px;
  transform-style:preserve-3d
}
.ap__tilt {
  position:absolute;
  left:0;
  top:0;
  transform-style:preserve-3d
}
.ap__shadow {
  position:absolute;
  left:0;
  top:0;
  width:22rem;
  height:4rem;
  margin:0 0 0 -11rem;
  border-radius:50%;
  background:radial-gradient(closest-side,rgb(10 10 18 / .45),transparent);
  filter:blur(16px)
}
.phone {
  --pw: min(21rem, 27vw, 34svh);
  --pt: calc(var(--pw) * .112);
  --pr: calc(var(--pw) * .17);
  position:absolute;
  width:var(--pw);
  aspect-ratio:71.6 / 146.6;
  left:calc(var(--pw) / -2);
  top:calc(var(--pw) * -1.024);
  transform-style:preserve-3d;
  --gx: 30%;
  --ga: .3
}
.phone__face,.phone__edge {
  position:absolute;
  inset:0;
  border-radius:var(--pr)
}
.phone__front {
  transform:translateZ(calc(var(--pt) / 2));
  background:#05050b;
  padding:calc(var(--pw) * .042);
  backface-visibility:hidden;
  box-shadow:inset 0 0 0 1.5px #3f3b4e,inset 0 0 0 3px #0d0d15
}
.phone__screen {
  position:relative;
  width:100%;
  height:100%;
  border-radius:calc(var(--pr) - var(--pw) * .042);
  overflow:hidden;
  background:var(--night)
}
.phone__screen > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.phone__glass {
  position:absolute;
  inset:0;
  background:linear-gradient(calc(118deg + var(--gx) * .3),transparent 32%,rgb(255 255 255 / calc(var(--ga) * .32)) 44%,transparent 58%),radial-gradient(60% 40% at var(--gx) 0%,rgb(255 255 255 / calc(var(--ga) * .18)),transparent 70%);
  pointer-events:none
}
.phone__icon {
  position:absolute;
  inset:0;
  background:radial-gradient(120% 80% at 50% 0%,#272538,var(--night) 70%);
  display:grid;
  place-items:center;
  align-content:center;
  gap:.6rem;
  opacity:0
}
.phone__icon span {
  width:34%;
  aspect-ratio:1;
  border-radius:24%;
  background:var(--lime);
  display:grid;
  place-items:center;
  box-shadow:0 18px 40px -12px #a78bfa73
}
.phone__icon svg {
  width:46%;
  fill:var(--night)
}
.phone__icon i {
  font-style:normal;
  color:var(--mist);
  font-size:calc(var(--pw) * .05);
  font-weight:600
}
.phone__edge {
  backface-visibility:visible;
  background:linear-gradient(90deg,#2d2b3b,#756c87 18%,#25253000 30%,#20202b 50%,#625a71 82%,#2d2b3b);
  background-color:#302d3e;
  box-shadow:inset 0 0 0 1.5px #a19aaf,inset 0 0 0 3px #3f3b4d;
  transform:translateZ(calc(var(--pt) * (var(--i) / 17 - .5) * .9))
}
.phone__back {
  transform:rotateY(180deg) translateZ(calc(var(--pt) / 2));
  background:linear-gradient(140deg,#302b3f,#171722);
  backface-visibility:hidden
}
.phone__cam {
  position:absolute;
  left:7%;
  top:3.5%;
  width:42%;
  aspect-ratio:1;
  border-radius:26%;
  background:#ffffff0d;
  box-shadow:inset 0 0 0 1px #ffffff14
}
.phone__cam i {
  position:absolute;
  width:40%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,#1a203a 30%,#05050b 60%);
  box-shadow:0 0 0 3px #2d2b3b
}
.phone__cam i:nth-child(1) {
  left:6%;
  top:6%
}
.phone__cam i:nth-child(2) {
  left:6%;
  bottom:6%
}
.phone__cam i:nth-child(3) {
  right:6%;
  top:30%
}
.phone__btn {
  position:absolute;
  width:calc(var(--pt) * .55);
  background:linear-gradient(90deg,#514b60,#a49db0,#403b4e);
  border-radius:2px
}
.phone__btn--a,.phone__btn--b,.phone__btn--c {
  left:0;
  transform-origin:0 50%;
  transform:translate(-1px) rotateY(90deg) translate(calc(var(--pt) * -.275))
}
.phone__btn--a {
  top:15%;
  height:4%
}
.phone__btn--b {
  top:22%;
  height:7.5%
}
.phone__btn--c {
  top:31.5%;
  height:7.5%
}
.phone__btn--p {
  right:0;
  top:25%;
  height:11%;
  transform-origin:100% 50%;
  transform:translate(1px) rotateY(-90deg) translate(calc(var(--pt) * .275))
}
@media(max-width:860px) {
  .ap__txt {
    top:calc(var(--header-h) + 1.2rem);
    transform:none;
    margin-top:0
  }
  .ap__rig {
    left:50%;
    top:66%
  }
  .phone {
    --pw: min(46vw, 28svh)
  }
  .ap__notes {
    width:auto;
    margin-top:1rem
  }
  .ap__notes li {
    display:none;
    padding:.6rem 0
  }
  .ap__notes li.is-on {
    display:flex
  }
  .ap__txt .display {
    font-size:clamp(2rem,9vw,3rem);
    margin-top:1rem
  }
  .ap__bigk {
    right:-40vw
  }
}
.ga__stage {
  position:relative;
  height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-top:calc(var(--header-h) + 1.4rem)
}
.ga__count {
  font-feature-settings:"tnum"
}
.ga__track {
  flex:1;
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.4vw,2.2rem);
  padding-inline:var(--container-pad);
  width:max-content;
  will-change:transform
}
.ga__intro {
  width:min(36rem,80vw);
  flex:none;
  padding-right:clamp(1rem,4vw,4rem)
}
.ga__intro .lead {
  margin-top:1.4rem;
  opacity:.75;
  max-width:28rem
}
.ga__drag {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:2rem;
  color:var(--lime)
}
.ga__drag svg {
  width:1.2rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6
}
.ga__item {
  flex:none;
  display:flex;
  flex-direction:column;
  gap:.9rem
}
.ga__item--sq .ga__frame {
  height:min(56svh,36rem);
  aspect-ratio:1
}
.ga__item--tall .ga__frame {
  height:min(64svh,42rem);
  aspect-ratio:1500 / 1872
}
.ga__item:nth-child(odd) {
  transform:translateY(5svh)
}
.ga__frame {
  --c: clamp(2.4rem, 4vw, 4rem);
  position:relative;
  overflow:hidden;
  border-radius:var(--r-m);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% calc(var(--c) * 1.39),100% 100%,var(--c) 100%,0 calc(100% - var(--c) * 1.39));
  background:var(--night-3)
}
.ga__frame img {
  position:absolute;
  top:0;
  left:-8%;
  width:116%;
  max-width:none;
  height:100%;
  object-fit:cover
}
.ga__item figcaption {
  display:flex;
  gap:.9rem
}
.ga__n {
  color:var(--lime)
}
.ga__end {
  flex:none;
  width:min(30vw,22rem);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--line-mist-strong);
  display:grid;
  place-items:center;
  align-content:center;
  gap:.6rem;
  margin-left:4vw
}
.ga__end svg {
  width:2.6rem;
  fill:none;
  stroke:var(--lime);
  stroke-width:1.4
}
.ga__progress {
  height:1px;
  margin:0 var(--gutter) clamp(1.2rem,3vw,2rem);
  background:var(--line-mist)
}
.ga__progress i {
  display:block;
  height:100%;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:0 50%
}
@media(max-width:860px) {
  .ga__item--sq .ga__frame {
    height:44svh
  }
  .ga__item--tall .ga__frame {
    height:50svh
  }
}
.cl {
  position:relative;
  padding-top:var(--section-pad);
  overflow:clip
}
.cl__glow {
  position:absolute;
  left:50%;
  bottom:-30vw;
  width:140vw;
  height:70vw;
  margin-left:-70vw;
  background:radial-gradient(closest-side,rgb(167 139 250 / .32),rgb(139 92 246 / .14) 50%,transparent);
  pointer-events:none
}
.cl__phrase {
  margin-top:clamp(2.5rem,6vw,5rem);
  max-width:22ch;
  font-size:clamp(2.2rem,5vw,5rem);
  line-height:1.02
}
.cl__phrase .w {
  opacity:.14
}
.cl__actions {
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  align-items:center;
  margin-top:clamp(2.5rem,5vw,4rem)
}
.cl__cta {
  background:var(--lime);
  color:var(--night);
  border-color:var(--lime);
  --btn-fill: var(--mist);
  --btn-fg: var(--night);
  --btn-fg-hover: var(--night)
}
.cl__kit {
  flex-basis:100%;
  margin-top:.4rem;
  text-transform:none;
  letter-spacing:.02em;
  font-weight:500
}
.cl__giant {
  position:relative;
  margin-top:clamp(4rem,9vw,7rem);
  padding-inline:var(--container-pad);
  overflow:hidden
}
.cl__giant svg {
  width:clamp(7rem,14vw,11rem);
  overflow:visible;
  fill:var(--mist);
  opacity:.9
}
.cl__foot {
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-block:1.6rem;
  margin-top:1.6rem;
  border-top:1px solid var(--line-mist)
}
/* Brand assets and the browser object replacing the payment card. */
:root {
  --violet:#8B5CF6;
  --indigo:#6366F1;
  --lilac:#A78BFA;
  --cyan:#22D3EE;
  --space:#0A0A12;
  --space-2:#13131F;
  --paper:#F7F7FB;
  --ink:#0F0F1A;
  --muted:#A3A3B7;
  --line-ink:var(--line-night);
  --line-paper:var(--line-mist)
}
.display,.h1,.h2,.h3 {
  font-weight:600
}
.universe-logo {
  display:block;
  width:170px;
  height:auto
}
.nav[data-theme=light] .universe-logo,.nav[data-theme=lime] .universe-logo {
  filter:brightness(0)
}
.nav[data-theme=lime] {
  --pill-bg:rgb(247 247 251 / .78);
  --pill-fg:var(--night);
  --pill-line:rgb(10 10 18 / .1);
  --pill-blur:14px
}
.nav__cta,.menu__cta {
  background:var(--cyan);
  color:var(--night)
}
.nav__hover {
  background:var(--cyan)
}
.cl__cta {
  background:var(--cyan);
  border-color:var(--cyan);
  --btn-fg:var(--night);
  --btn-fg-hover:var(--night)
}
.theme-dark .btn,.btn--light {
  --btn-fill:var(--cyan)
}
.wm text,.nav__word text {
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.065em
}
.browser-ui {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:var(--night-2);
  border-radius:inherit;
  overflow:hidden;
  isolation:isolate
}
.browser-ui__bar {
  height:9.5%;
  min-height:0;
  flex:none;
  display:flex;
  align-items:center;
  gap:2.5cqw;
  padding:0 4cqw;
  background:#171722;
  color:#d5cce9;
  font-family:var(--font-sans);
  font-size:2cqw;
  line-height:1;
  letter-spacing:.035em;
  border-bottom:1px solid #ffffff10;
  white-space:nowrap
}
.browser-ui__bar:before {
  content:'';
  display:block;
  flex:none;
  width:1cqw;
  height:1cqw;
  border-radius:50%;
  background:var(--lilac);
  box-shadow:1.8cqw 0 #8b5cf6,3.6cqw 0 #22d3ee;
  margin-right:3.6cqw
}
.browser-ui__screen {
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  background:var(--mist)
}
.browser-ui__screen img {
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 0;
  display:block
}
.card__back .browser-ui {
  background:var(--night)
}
@media(max-width:1080px) {
  .nav__logo {
    margin-right:.8rem
  }
  .universe-logo {
    width:160px
  }
}
@media(max-width:480px) {
  .nav {
    top:.8rem
  }
  .nav__pill {
    padding-left:1rem;
    gap:.25rem
  }
  .nav__logo {
    margin-right:.2rem
  }
  .universe-logo {
    width:130px
  }
  .nav__cta {
    font-size:.65rem;
    padding:.65rem .8rem;
    gap:.35rem
  }
  .nav__menu {
    width:2.25rem;
    height:2.25rem
  }
}
@media(max-width:360px) {
  .universe-logo {
    width:112px
  }
  .nav__cta {
    font-size:.6rem;
    padding:.65rem .65rem
  }
}