@font-face {
  font-family: "Box Stalinist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/boxcreate/fonts/stalinist-one-latin.woff2") format("woff2");
}

@layer reset, base, layout, motion, responsive;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    color-scheme: dark;
    background: #0b0a0d;
    scroll-behavior: smooth;
  }

  body,
  h1,
  p {
    margin: 0;
  }

  button,
  a {
    color: inherit;
    font: inherit;
  }

  a {
    text-decoration: none;
  }

  button {
    border: 0;
  }
}

@layer base {
  :root {
    --ink: #0b0a0d;
    --paper: #f7f6f2;
    --grey: #9a97a3;
    --line: rgb(247 246 242 / 14%);
    --teal: #12b3a6;
    --violet: #6c4ce6;
    --blue: #2e6bff;
    --coral: #ff6a3d;
    --amber: #f5b301;
    --accent: var(--teal);
    --accent-rgb: 18 179 166;
    --portal-radius: 22%;
    --portal-rotate: -2deg;
    --portal-scale: 1;
    --display: "Space Grotesk", sans-serif;
    --display-tracking: -.04em;
    --logo: "Box Stalinist", sans-serif;
    --logo-tracking: -.01em;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.77, 0, .18, 1);
  }

  body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    background: var(--ink);
    color: var(--paper);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  ::selection {
    background: var(--accent);
    color: var(--ink);
  }

  :focus-visible {
    outline: 2px solid var(--paper);
    outline-offset: 5px;
  }

  .skip-link {
    position: fixed;
    z-index: 200;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    background: var(--paper);
    color: var(--ink);
    font-size: .72rem;
    transform: translateY(-180%);
    transition: transform .2s ease;
  }

  .skip-link:focus {
    transform: translateY(0);
  }
}

@layer layout {
  .page-field {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .page-field::before {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 50%, rgb(var(--accent-rgb) / 4%), transparent 40%),
      radial-gradient(circle at 50% 50%, transparent 45%, rgb(0 0 0 / 38%) 100%);
    content: "";
    transition: background 1.2s ease;
  }

  .field-grid {
    position: absolute;
    inset: -12%;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: clamp(48px, 5vw, 84px) clamp(48px, 5vw, 84px);
    opacity: .22;
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
    transform: perspective(600px) rotateX(2deg) scale(1.05);
  }

  .field-coordinate {
    position: absolute;
    color: rgb(247 246 242 / 22%);
    font-size: .57rem;
    letter-spacing: .12em;
  }

  .field-coordinate--x {
    top: 30%;
    left: 1.4rem;
    writing-mode: vertical-rl;
  }

  .field-coordinate--y {
    right: 1.4rem;
    bottom: 27%;
    writing-mode: vertical-rl;
  }

  .top-rail,
  .bottom-rail {
    position: fixed;
    z-index: 30;
    left: 0;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-inline: clamp(18px, 3vw, 50px);
    font-size: clamp(.56rem, .65vw, .72rem);
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .top-rail {
    top: 0;
    height: 72px;
    border-bottom: 1px solid var(--line);
  }

  .bottom-rail {
    bottom: 0;
    justify-content: flex-end;
    height: 56px;
    border-top: 1px solid var(--line);
    color: var(--grey);
  }

  .wordmark {
    display: inline-flex;
    width: max-content;
    align-items: baseline;
    font-family: var(--logo);
    font-size: clamp(.72rem, .9vw, .92rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--logo-tracking);
    text-transform: lowercase;
  }

  .wordmark-create {
    color: var(--grey);
  }

  .wordmark-atom {
    display: inline-block;
    width: .52em;
    height: .52em;
    margin: 0 .16em 0 .2em;
    border-radius: 28%;
    background:
      radial-gradient(circle at 25% 22%, var(--amber), transparent 38%),
      linear-gradient(135deg, var(--coral), var(--violet) 50%, var(--teal));
    background-size: 220% 220%;
    transform: none;
    overflow: hidden;
    animation: portal-aurora 4.5s linear infinite;
  }

  .wordmark:hover .wordmark-atom {
    animation-duration: 2.2s;
  }

  .rail-link {
    transition: color .25s ease;
  }

  .rail-links {
    display: inline-flex;
    align-items: center;
    gap: 18px;
  }

  .rail-link:hover {
    color: var(--accent);
  }

  .studio {
    position: relative;
    z-index: 2;
    height: 100vh;
    height: 100svh;
    isolation: isolate;
  }

  .stage {
    position: absolute;
    inset: 72px 0 56px;
    overflow: hidden;
  }

  .studio-hero {
    position: absolute;
    z-index: 9;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 0 clamp(16px, 4vw, 48px);
    text-align: center;
    pointer-events: none;
    transition:
      opacity .4s var(--ease-out),
      transform .4s var(--ease-out),
      filter .4s var(--ease-out);
  }

  .hero-wordmark {
    position: relative;
    display: inline-flex;
    max-width: min(92vw, 980px);
    align-items: baseline;
    justify-content: center;
    margin: 0;
    font-family: var(--logo);
    font-size: clamp(1.85rem, 6.4vw, 4.8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--logo-tracking);
    text-transform: lowercase;
    --atom-travel: -1.89em;
  }

  .hero-box-letters {
    display: inline-flex;
    align-items: baseline;
  }

  .hero-box-letters .letter {
    display: inline-block;
  }

  .hero-create {
    color: var(--grey);
  }

  .hero-atom {
    position: relative;
    z-index: 2;
    display: inline-block;
    flex: 0 0 auto;
    width: .52em;
    height: .52em;
    margin: 0 .14em 0 .16em;
    border-radius: 28%;
    background:
      radial-gradient(circle at 25% 22%, var(--amber), transparent 38%),
      linear-gradient(135deg, var(--coral), var(--violet) 50%, var(--teal));
    background-size: 220% 220%;
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 16%),
      0 10px 40px rgb(18 179 166 / 18%);
    transform: none;
    overflow: hidden;
    will-change: background-position;
  }

  body:not(.is-booting) .hero-atom {
    animation: portal-aurora 4.5s linear infinite;
  }

  body.is-booting .letter-o,
  body.is-booting .letter-x {
    opacity: 0;
  }

  body.is-booting .hero-create {
    opacity: 0;
  }

  body.is-booting .hero-line,
  body.is-booting .hero-hint {
    opacity: 0;
  }

  body.is-booting:not(.is-logo-ready) .hero-wordmark {
    visibility: hidden;
  }

  /* Park the atom beside "b" until the travel keyframes start. */
  body.is-booting:not(.is-logo-intro) .hero-atom {
    transform: translate3d(var(--atom-travel), 0, 0);
  }

  body.is-booting.is-logo-intro .hero-atom {
    animation: boot-atom-travel 1.65s cubic-bezier(.22, .61, .36, 1) forwards;
  }

  body.is-booting.is-logo-intro .letter-o {
    animation: boot-letter-in 1.65s ease-out forwards;
  }

  body.is-booting.is-logo-intro .letter-x {
    animation: boot-letter-in-x 1.65s ease-out forwards;
  }

  body.is-booting.is-logo-intro .hero-create {
    animation: boot-create-in 1.65s ease-out forwards;
  }

  .hero-line {
    margin-top: clamp(18px, 3vh, 34px);
    color: rgb(247 246 242 / 72%);
    font-family: var(--display);
    font-size: clamp(.75rem, 1.2vw, 1.05rem);
    font-weight: 500;
    letter-spacing: calc(var(--display-tracking) * .5);
    transition: opacity .55s ease;
  }

  .hero-line span {
    color: var(--accent);
  }

  .hero-hint {
    margin-top: 14px;
    color: rgb(247 246 242 / 34%);
    font-size: clamp(.55rem, .7vw, .68rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: opacity .55s ease;
  }

  .portal {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    display: block;
    width: min(47vw, 65vh);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--portal-radius);
    background: #111015;
    transform:
      translate3d(calc(-50% + var(--pointer-x, 0px)), calc(-50% + var(--pointer-y, 0px)), 0)
      rotate(var(--portal-rotate))
      scale(var(--portal-scale));
    transform-origin: center;
    transition:
      border-radius 1.1s var(--ease-out),
      transform 1.1s var(--ease-out),
      width 1.1s var(--ease-out),
      opacity .45s ease,
      filter .45s ease,
      padding 1.1s var(--ease-out);
    will-change: transform, border-radius;
  }

  /* Home: keep the wordmark clear — no aurora behind it */
  body.is-home .portal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body:not(.is-home) .portal {
    padding: 0;
    -webkit-mask: none;
    mask: none;
  }

  body.is-home .portal-enter {
    opacity: 0 !important;
  }

  body.is-home .studio-hero {
    z-index: 8;
  }

  body:not(.is-home) .studio-hero {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-18px) scale(.96);
    filter: blur(6px);
    pointer-events: none;
  }

  body:not(.is-home) .stage-copy {
    display: block;
  }

  body.is-home .stage-copy {
    display: none;
  }

  body.is-home .product-index .product-option.is-active {
    color: rgb(247 246 242 / 34%);
  }

  body.is-home .product-index .product-option.is-active img {
    opacity: .55;
    transform: none;
  }

  body.is-home .product-index .product-option.is-active i {
    width: 5px;
    height: 5px;
    border-color: currentColor;
    background: transparent;
  }

  .portal::before {
    position: absolute;
    z-index: 5;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(circle at 50% 47%, transparent 35%, rgb(0 0 0 / 24%) 100%),
      linear-gradient(150deg, rgb(255 255 255 / 14%), transparent 35%);
    content: "";
    pointer-events: none;
  }

  #aurora,
  .aurora-fallback,
  .portal-grain,
  .portal-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  #aurora {
    z-index: 1;
    display: block;
  }

  .aurora-fallback {
    z-index: 0;
    background:
      radial-gradient(circle at 18% 20%, var(--amber), transparent 31%),
      radial-gradient(circle at 78% 26%, var(--violet), transparent 38%),
      radial-gradient(circle at 48% 88%, var(--teal), transparent 42%),
      linear-gradient(135deg, var(--coral), var(--blue) 46%, var(--ink));
    background-size: 140% 140%;
    animation: fallback-drift 11s ease-in-out infinite alternate;
  }

  .portal.has-webgl .aurora-fallback {
    opacity: 0;
  }

  .portal-grain {
    z-index: 3;
    opacity: .11;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
    pointer-events: none;
  }

  .portal-frame {
    z-index: 6;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: inherit;
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 5%),
      inset 0 0 80px rgb(255 255 255 / 8%);
    pointer-events: none;
  }

  .portal-enter {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--paper);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: 1;
    pointer-events: none;
    text-shadow: 0 2px 18px rgb(0 0 0 / 35%);
    transform: none;
  }

  .portal-enter i {
    display: grid;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 50%;
    background: rgb(0 0 0 / 22%);
    backdrop-filter: blur(6px);
    place-items: center;
    font-style: normal;
  }

  .stage-copy {
    position: absolute;
    z-index: 8;
    bottom: clamp(68px, 9vh, 110px);
    left: clamp(20px, 4vw, 68px);
    width: min(50rem, 66vw);
    opacity: 1;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    transition:
      opacity .34s var(--ease-out),
      transform .34s var(--ease-out),
      filter .34s var(--ease-out);
    will-change: opacity, transform, filter;
  }

  .project-kicker {
    display: flex;
    margin-bottom: 13px;
    gap: 10px;
    color: var(--accent);
    font-size: clamp(.59rem, .7vw, .72rem);
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    transition: color .7s ease;
  }

  .stage-copy h2 {
    margin: 0;
    line-height: 0;
  }

  .project-logo {
    display: block;
    width: auto;
    max-width: min(52vw, 420px);
    height: auto;
    object-fit: contain;
    object-position: left center;
  }

  .project-logo--wordmark {
    height: clamp(42px, 7.2vw, 88px);
    filter: brightness(0) invert(1);
  }

  .project-logo--mark {
    width: clamp(88px, 14vw, 168px);
    height: clamp(88px, 14vw, 168px);
    border-radius: 22%;
    box-shadow: 0 18px 50px rgb(0 0 0 / 28%);
  }

  .project-logo--wide {
    height: clamp(48px, 7.4vw, 92px);
  }

  .stage-copy > p:last-child {
    width: min(34rem, 56vw);
    margin-top: clamp(18px, 2.2vh, 28px);
    color: rgb(247 246 242 / 72%);
    font-family: var(--display);
    font-size: clamp(.78rem, 1.05vw, 1.05rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: calc(var(--display-tracking) * .45);
    text-wrap: balance;
  }

  .stage-copy > p:last-child::before {
    content: "“";
  }

  .stage-copy > p:last-child::after {
    content: "”";
  }

  .stage-marker {
    position: absolute;
    z-index: 5;
    left: 50%;
    display: flex;
    width: min(47vw, 65vh);
    align-items: center;
    gap: 10px;
    color: rgb(247 246 242 / 36%);
    font-size: .52rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: translateX(-50%);
  }

  .stage-marker i {
    height: 1px;
    flex: 1;
    background: currentColor;
  }

  .stage-marker--top {
    top: clamp(18px, 3vh, 36px);
  }

  .stage-marker--bottom {
    bottom: clamp(16px, 2.5vh, 30px);
  }

  .product-index {
    position: fixed;
    z-index: 15;
    top: 50%;
    right: clamp(18px, 3vw, 48px);
    display: grid;
    width: clamp(118px, 12vw, 160px);
    transform: translateY(-50%);
  }

  .product-option {
    display: grid;
    grid-template-columns: 28px 42px 14px;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: rgb(247 246 242 / 34%);
    font-size: .6rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .35s ease, opacity .35s ease;
  }

  .product-option span {
    font-size: .52rem;
  }

  .product-option img {
    width: 42px;
    height: 42px;
    border-radius: 22%;
    object-fit: cover;
    opacity: .55;
    transition: opacity .35s ease, transform .35s var(--ease-out);
  }

  .product-option i {
    width: 5px;
    height: 5px;
    justify-self: end;
    border: 1px solid currentColor;
    border-radius: 30%;
    transition: width .5s var(--ease-out), height .5s var(--ease-out), background .3s ease;
  }

  .product-option:hover,
  .product-option.is-active {
    color: var(--paper);
  }

  .product-option:hover img,
  .product-option.is-active img {
    opacity: 1;
    transform: scale(1.04);
  }

  .product-option.is-active i {
    width: 11px;
    height: 11px;
    border-color: var(--accent);
    background: var(--accent);
  }

  .project-controls {
    position: fixed;
    z-index: 18;
    right: clamp(18px, 3vw, 48px);
    bottom: 76px;
    display: none;
    align-items: center;
    gap: 12px;
  }

  .project-controls button {
    display: grid;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgb(255 255 255 / 3%);
    cursor: pointer;
    place-items: center;
  }

  .project-controls span {
    color: var(--grey);
    font-size: .58rem;
    letter-spacing: .1em;
  }

  .project-controls b {
    color: var(--paper);
    font-weight: 500;
  }

  .boot-sequence {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--ink);
    opacity: 1;
    pointer-events: none;
    transition: opacity .28s var(--ease-out), visibility .28s;
  }

  .boot-atom {
    width: clamp(34px, 4.5vw, 54px);
    aspect-ratio: 1;
    border-radius: 28%;
    background:
      radial-gradient(circle at 25% 22%, var(--amber), transparent 38%),
      linear-gradient(135deg, var(--coral), var(--violet) 50%, var(--teal));
    background-size: 220% 220%;
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 16%),
      0 18px 70px rgb(18 179 166 / 22%);
    transform: none;
    animation: portal-aurora 1.6s linear infinite;
  }

  body.is-loader-done .boot-sequence,
  body.is-ready .boot-sequence {
    opacity: 0;
    visibility: hidden;
  }

  body.is-booting .studio-hero {
    position: fixed;
    z-index: 110;
    inset: 72px 0 56px;
    display: grid;
    align-content: center;
    justify-items: center;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: none;
  }

  body.is-booting .top-rail,
  body.is-booting .bottom-rail,
  body.is-booting .product-index,
  body.is-booting .stage-marker,
  body.is-booting .project-controls,
  body.is-booting .portal,
  body.is-booting .stage-copy {
    opacity: 0 !important;
    pointer-events: none;
  }

  .departure {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    overflow: hidden;
    visibility: hidden;
    place-items: center;
    pointer-events: none;
  }

  .departure span {
    width: 20px;
    height: 20px;
    border-radius: 24%;
    background: var(--accent);
    transform: scale(0);
    animation: none;
  }

  .is-departing .departure {
    visibility: visible;
  }

  .is-departing .departure span {
    animation: depart .78s var(--ease-in-out) forwards;
  }

  .noscript-panel {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: grid;
    align-content: center;
    padding: 10vw;
    gap: 20px;
    background: var(--ink);
    font-family: var(--display);
  }

  .noscript-panel a {
    width: max-content;
    border-bottom: 1px solid currentColor;
  }

}

@layer motion {
  @keyframes portal-aurora {
    0% {
      background-position: 0% 40%;
    }
    50% {
      background-position: 100% 60%;
    }
    100% {
      background-position: 0% 40%;
    }
  }

  @keyframes boot-atom-travel {
    from {
      transform: translate3d(var(--atom-travel), 0, 0);
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes boot-letter-in {
    0%,
    8% {
      opacity: 0;
    }
    36%,
    100% {
      opacity: 1;
    }
  }

  @keyframes boot-letter-in-x {
    0%,
    22% {
      opacity: 0;
    }
    52%,
    100% {
      opacity: 1;
    }
  }

  @keyframes boot-create-in {
    0%,
    52% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fallback-drift {
    from {
      background-position: 0% 0%;
      filter: saturate(1.05) hue-rotate(-5deg);
      transform: scale(1.08) rotate(-2deg);
    }
    to {
      background-position: 100% 100%;
      filter: saturate(1.25) hue-rotate(12deg);
      transform: scale(1.18) rotate(3deg);
    }
  }

  @keyframes boot-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }

  @keyframes scene-in {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes portal-in {
    from {
      opacity: 0;
      clip-path: inset(18% round 30%);
      filter: saturate(.5);
    }
    to {
      opacity: 1;
      clip-path: inset(0 round var(--portal-radius));
      filter: saturate(1);
    }
  }

  @keyframes portal-shift {
    0%,
    100% {
      clip-path: inset(0 round var(--portal-radius));
    }
    42% {
      clip-path: inset(46% 0 round 4px);
    }
    55% {
      clip-path: inset(46% 0 round 4px);
    }
  }

  @keyframes depart {
    0% {
      border-radius: 25%;
      transform: scale(0);
    }
    58% {
      border-radius: 22%;
    }
    100% {
      border-radius: 0;
      transform: scale(120);
    }
  }

  body.is-ready .top-rail,
  body.is-ready .bottom-rail,
  body.is-ready .product-index,
  body.is-ready .stage-marker {
    animation: scene-in .9s var(--ease-out) .15s both;
  }

  body.is-ready .studio-hero {
    animation: none;
  }

  body.is-ready .hero-line,
  body.is-ready .hero-hint {
    animation: scene-in .7s var(--ease-out) .1s both;
  }

  body.is-ready .stage-copy {
    animation: none;
  }

  body.is-ready .portal {
    animation: portal-in 1.2s var(--ease-out) .25s both;
  }

  body.is-shifting .stage-copy,
  body.is-shifting .studio-hero {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(4px);
  }

  body.is-shifting .portal {
    animation: portal-shift .6s var(--ease-in-out) both;
  }
}

@layer responsive {
  @media (hover: none), (max-width: 840px) {
    .project-controls {
      display: flex;
    }
  }

  @media (max-width: 840px) {
    .stage {
      inset: 64px 0 50px;
    }

    .top-rail {
      height: 64px;
    }

    .bottom-rail {
      height: 50px;
    }

    .portal {
      top: 42%;
      width: min(76vw, 54vh);
    }

    .stage-copy {
      bottom: 86px;
      width: calc(100vw - 40px);
    }

    .project-logo--wordmark,
    .project-logo--wide {
      max-width: min(78vw, 340px);
      height: clamp(36px, 9vw, 64px);
    }

    .project-logo--mark {
      width: clamp(76px, 22vw, 120px);
      height: clamp(76px, 22vw, 120px);
    }

    .stage-copy > p:last-child {
      width: min(29rem, 78vw);
      font-size: .68rem;
      line-height: 1.6;
    }

    .hero-wordmark {
      max-width: 92vw;
      font-size: clamp(1.55rem, 7.2vw, 2.8rem);
    }

    .hero-line {
      font-size: .72rem;
    }

    .stage-marker {
      display: none;
    }

    .product-index {
      top: auto;
      right: 20px;
      bottom: 124px;
      width: auto;
      transform: none;
    }

    .product-option {
      display: none;
    }

    .product-option.is-active {
      display: grid;
      min-width: 112px;
      border: 0;
    }

    .project-controls {
      right: 20px;
      bottom: 67px;
    }
  }

  @media (max-width: 540px) {
    .top-rail,
    .bottom-rail {
      padding-inline: 16px;
    }

    .field-coordinate {
      display: none;
    }

    .portal {
      top: 39%;
      width: min(82vw, 47vh);
    }

    .hero-wordmark {
      max-width: 94vw;
      font-size: clamp(1.35rem, 8vw, 2.2rem);
    }

    .hero-line {
      margin-top: 14px;
      font-size: .64rem;
    }

    .stage-copy {
      bottom: 132px;
      left: 16px;
    }

    .stage-copy > p:last-child {
      width: 82vw;
      margin-top: 12px;
      font-size: .62rem;
    }

    .project-kicker {
      margin-bottom: 9px;
    }

    .product-index {
      right: 16px;
      bottom: 108px;
    }

    .project-controls {
      right: 16px;
      bottom: 59px;
    }

    .project-controls button {
      width: 36px;
      height: 36px;
    }
  }

  @media (max-height: 680px) and (min-width: 841px) {
    .portal {
      width: min(43vw, 58vh);
    }

    .stage-copy {
      bottom: 45px;
    }

    .hero-wordmark {
      font-size: clamp(1.7rem, 5.2vw, 3.6rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-delay: 0s !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }

    .boot-sequence {
      display: none;
    }

    .wordmark-atom,
    .hero-atom,
    .boot-atom {
      animation: none;
      transform: none;
    }

    .portal {
      --pointer-x: 0px !important;
      --pointer-y: 0px !important;
    }
  }
}