@font-face {
  font-family: Aeonik;
  src: url("assets/copilot/fonts/Aeonik.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: Rustea;
  src: url("assets/copilot/fonts/Rustea.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Zen Tokyo Zoo";
  src: url("assets/fonts/ZenTokyoZoo-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --accent: #f28c51;
  --accent-soft: rgba(242, 140, 81, 0.45);
  --gradient: linear-gradient(180deg, #5a2043 0%, #5a2043 35%, #77204b 55%, #a83271 100%);
  --frame: clamp(16px, 2.7vw, 40px);
  --page-progress: 0;
  --nav-bottom: clamp(14px, 2.1vw, 24px);
  --designer-bg-brightness: 1;
  --designer-bg-saturation: 1;
  --designer-bg-blur: 0px;
  --designer-bg-dim: 0;
  --designer-cloud-opacity: 0.42;
  --designer-star-opacity: 0.82;
  --designer-cloud-speed: 38s;
  --designer-star-speed: 7s;
  --designer-marquee-speed: 70s;
  --designer-float-speed: 6s;
  --designer-planet-spin-speed: 260s;
  --designer-product-scale: 1;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: #05050c;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: #fff;
  background: #05050c;
  font-family: Manrope, Aeonik, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body[data-page="products"] {
  height: 100vh;
  overflow: hidden;
}

body[data-page="landing"] {
  min-height: 200vh;
  overflow-y: auto;
  background: #020205;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

body[data-page="landing"]::-webkit-scrollbar {
  display: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

a {
  text-decoration: none;
}

button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  body.site-cursor-ready,
  body.site-cursor-ready * {
    cursor: none !important;
  }

  .site-cursor {
    position: fixed;
    z-index: 1200;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-140px, -140px, 0);
    transition: opacity 0.16s ease;
    will-change: transform, opacity;
  }

  .site-cursor.is-visible {
    opacity: 1;
  }

  .site-cursor-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.38));
    transform-origin: center center;
    transition: transform 0.14s ease, opacity 0.14s ease;
  }

  .site-cursor.is-hovering .site-cursor-icon {
    opacity: 1;
  }

  .site-cursor.is-pressed .site-cursor-icon {
    transform: scale(0.9);
  }
}

.site {
  min-height: 100vh;
  isolation: isolate;
}

body.loader-running {
  overflow: hidden;
}

.loading-screen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: #020503;
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease, visibility 0.8s;
}

body.loader-done .loading-screen {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4vh) scale(1.03);
  filter: blur(18px);
  pointer-events: none;
}

.loader-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 44% 42%, rgba(236, 177, 78, 0.2), transparent 25%),
    radial-gradient(circle at 66% 18%, rgba(42, 100, 78, 0.16), transparent 28%),
    linear-gradient(180deg, #030908 0%, #08120f 46%, #050403 100%);
}

.loader-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 228, 160, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.5));
  mix-blend-mode: normal;
}

.loader-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  opacity: 0.86;
  filter: saturate(1.08) contrast(1.06) brightness(0.78);
  animation: loaderCloud 10s ease-in-out infinite alternate;
  background: #020503;
}

.loader-center {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 24px;
  margin-top: 7vh;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.82);
}

.loader-counter {
  font-family: Aeonik, Manrope, sans-serif;
  font-size: clamp(16px, 2.1vw, 26px);
  font-weight: 900;
  letter-spacing: 0;
}

.loader-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(360px, 58vw);
  gap: 0;
  overflow: hidden;
  line-height: 1;
}

.loader-logo::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.8) 50%, transparent 80%);
  transform: translateX(-130%);
  animation: loaderShine 2.8s ease-in-out infinite;
  mix-blend-mode: overlay;
}

.loader-mark {
  width: clamp(48px, 5vw, 76px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loader-logo-image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.52));
}

.loader-bar {
  position: relative;
  z-index: 2;
  width: min(520px, calc(100vw - 64px));
  height: 4px;
  margin-bottom: 10vh;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.loader-bar span {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.12s linear;
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 22px;
  right: var(--frame);
  left: var(--frame);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  pointer-events: none;
}

.tagline,
.back-home,
.about-toggle,
.sound-toggle {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  text-transform: uppercase;
  font-family: Manrope, Aeonik, sans-serif;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 800;
  line-height: 1.05;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.28);
}

.tagline {
  justify-self: start;
}

.back-home {
  display: none;
  justify-self: start;
}

body:not([data-page="products"]) .back-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body:not([data-page="products"]) .back-home::before {
  content: "<";
  font-weight: 700;
}

body:not([data-page="products"]) .tagline {
  display: none;
}

body[data-page="landing"] .back-home,
body[data-page="landing"] .site-header,
body[data-page="landing"] .about-toggle,
body[data-page="landing"] .product-nav,
body[data-page="landing"] .designer-toggle,
body[data-page="landing"] .designer-console,
body[data-page="landing"] .about-overlay,
body[data-page="landing"] .about-popup {
  display: none !important;
}

body:not([data-page="products"]):not([data-page="landing"]) .site-header {
  z-index: 70;
}

body:not([data-page="products"]):not([data-page="landing"]) .sound-toggle {
  z-index: 71;
}

.brand {
  display: flex;
  grid-column: 2;
  align-items: center;
  justify-self: center;
  width: clamp(134px, 12vw, 198px);
  gap: 0;
  pointer-events: auto;
  line-height: 1;
  letter-spacing: 0;
}

.brand-image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.35));
}

.brand-mark {
  width: clamp(42px, 4vw, 60px);
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-toggle {
  justify-self: end;
  height: 42px;
  overflow: hidden;
}

.about-toggle span {
  display: block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.about-toggle span + span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
}

.about-open .about-toggle span:first-child {
  opacity: 0;
  transform: translateY(-12px);
}

.about-open .about-toggle span + span {
  opacity: 1;
  transform: translateY(0);
}

.sound-toggle {
  position: fixed;
  z-index: 51;
  right: var(--frame);
  bottom: 33px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sound-toggle svg {
  width: 44px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.sound-off {
  display: none;
}

.sound-muted .sound-on {
  display: none;
}

.sound-muted .sound-off {
  display: block;
}

.designer-toggle {
  position: fixed;
  z-index: 92;
  right: var(--frame);
  bottom: 78px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(8, 10, 18, 0.32);
  color: #fff;
  backdrop-filter: blur(16px);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.designer-toggle::before,
.designer-toggle::after,
.designer-toggle span {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

.designer-toggle::before {
  transform: translateY(-6px);
}

.designer-toggle::after {
  transform: translateY(6px);
}

body.console-open .designer-toggle {
  border-color: var(--accent);
  background: rgba(8, 10, 18, 0.68);
  transform: translateX(-338px);
}

.designer-console {
  position: fixed;
  z-index: 91;
  top: 82px;
  right: var(--frame);
  display: grid;
  gap: 16px;
  width: min(336px, calc(100vw - 32px));
  max-height: calc(100vh - 118px);
  padding: 18px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 68%, rgba(255, 255, 255, 0.36));
  background: rgba(7, 10, 18, 0.78);
  color: #fff;
  box-shadow: 0 26px 88px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(22px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

body.console-open .designer-console {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.designer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.designer-head h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
}

.designer-actions {
  display: flex;
  gap: 8px;
}

.designer-actions button,
.designer-console input,
.designer-console output {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

.designer-actions button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.designer-section {
  display: grid;
  gap: 10px;
}

.designer-section h3 {
  margin: 2px 0 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.designer-field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  font-size: 12px;
  font-weight: 780;
}

.designer-field.text,
.designer-field.color {
  grid-template-columns: 92px minmax(0, 1fr);
}

.designer-field input[type="text"] {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  outline: none;
}

.designer-field input[type="color"] {
  width: 100%;
  min-height: 34px;
  padding: 3px;
}

.designer-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.designer-field output {
  min-width: 42px;
  padding: 5px 6px;
  border-radius: 2px;
  font-size: 11px;
  text-align: center;
}

.second-console-toggle {
  position: fixed;
  z-index: 86;
  right: 24px;
  bottom: 96px;
  min-width: 94px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 4px;
  background: rgba(4, 8, 14, 0.58);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
  transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease;
}

.second-console-toggle:hover {
  border-color: var(--second-control-accent, #e57cff);
  background: rgba(7, 12, 20, 0.78);
}

body.second-console-open .second-console-toggle {
  transform: translateX(-332px);
}

.second-console {
  position: fixed;
  z-index: 85;
  right: 24px;
  bottom: 142px;
  display: grid;
  gap: 14px;
  width: min(326px, calc(100vw - 32px));
  max-height: calc(100vh - 172px);
  padding: 16px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--second-control-accent, #e57cff) 62%, rgba(255, 255, 255, 0.34));
  border-radius: 6px;
  background: rgba(4, 8, 15, 0.78);
  color: #fff;
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px) scale(0.98);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

body.second-console-open .second-console {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.second-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.second-console-head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1;
  text-transform: uppercase;
}

.second-console-actions {
  display: flex;
  gap: 8px;
}

.second-console-actions button,
.second-console select,
.second-console input,
.second-console output {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

.second-console-actions button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.second-console-section {
  display: grid;
  gap: 9px;
}

.second-console-section h3 {
  margin: 0;
  color: var(--second-control-accent, #e57cff);
  font-size: 12px;
  font-weight: 900;
}

.second-console select {
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 2px;
  outline: none;
}

.second-console .designer-field {
  grid-template-columns: 76px minmax(0, 1fr) 48px;
}

.second-console .designer-field.color {
  grid-template-columns: 76px minmax(0, 1fr);
}

.home-text-console-toggle {
  position: fixed;
  z-index: 88;
  right: 24px;
  bottom: 144px;
  min-width: 94px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 4px;
  background: rgba(4, 8, 14, 0.58);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
  transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease;
}

.home-text-console-toggle:hover {
  border-color: #fff;
  background: rgba(7, 12, 20, 0.78);
}

body.home-text-console-open .home-text-console-toggle {
  transform: translateX(-332px);
}

.home-text-console {
  position: fixed;
  z-index: 87;
  right: 24px;
  bottom: 190px;
  display: grid;
  gap: 14px;
  width: min(326px, calc(100vw - 32px));
  max-height: calc(100vh - 220px);
  padding: 16px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: rgba(4, 8, 15, 0.78);
  color: #fff;
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px) scale(0.98);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

body.home-text-console-open .home-text-console {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.home-text-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-text-console-head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1;
  text-transform: uppercase;
}

.home-text-console-actions {
  display: flex;
  gap: 8px;
}

.home-text-console-actions button,
.home-text-console select,
.home-text-console input,
.home-text-console output {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

.home-text-console-actions button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-text-console-section {
  display: grid;
  gap: 9px;
}

.home-text-console-section h3 {
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.home-text-console select {
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 2px;
  outline: none;
}

.home-text-console .designer-field {
  grid-template-columns: 76px minmax(0, 1fr) 48px;
}

.home-text-console .designer-field.text,
.home-text-console .designer-field.color {
  grid-template-columns: 76px minmax(0, 1fr);
}

.about-overlay {
  position: fixed;
  z-index: 70;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  transition: opacity 0.25s ease;
}

.about-open .about-overlay {
  pointer-events: auto;
  opacity: 1;
}

.about-popup {
  position: fixed;
  z-index: 71;
  top: 90px;
  right: clamp(24px, 3vw, 40px);
  width: min(440px, calc(100vw - 48px));
  pointer-events: none;
  opacity: 0;
  filter: blur(30px);
  transform: scale(1.18);
  transform-origin: center;
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.about-open .about-popup {
  pointer-events: auto;
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.about-popup h2,
.panel-title {
  position: relative;
  z-index: 2;
  width: 58%;
  min-height: 72px;
  margin: 0 0 -32px auto;
  padding: 18px 28px;
  clip-path: polygon(0 0, 84% 0, 100% 44%, 100% 100%, 0 100%);
  border: 1px solid color-mix(in srgb, var(--accent), #fff 35%);
  background: rgba(33, 12, 20, 0.48);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.panel-inner {
  clip-path: polygon(0 0, calc(100% - 52px) 0, 100% 56px, 100% 100%, 54px 100%, 0 calc(100% - 62px));
  border: 1px solid color-mix(in srgb, var(--accent), #fff 30%);
  background: linear-gradient(180deg, rgba(28, 13, 26, 0.64), rgba(26, 8, 10, 0.48));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 90px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
  padding: 74px 46px 42px;
}

.panel-inner h3 {
  margin: 0 0 20px;
  font-size: 18px;
  text-transform: uppercase;
}

.panel-inner p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.55;
}

.app {
  min-height: 100vh;
}

body[data-page="landing"] .app {
  min-height: 200vh;
}

.home-video-page,
.home-second-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.home-video-page {
  display: grid;
  place-items: center;
  background: #020205;
  isolation: isolate;
}

.home-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 0;
  background: #020205;
  pointer-events: none;
}

.home-video-page::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 62%, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.4px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: screen;
}

.home-video::-webkit-media-controls {
  display: none !important;
}

.home-video-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 38%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.48) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 24%, rgba(0, 0, 0, 0.24));
}

.home-ui {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  color: #f7f7f4;
  font-family: Aeonik, Manrope, system-ui, sans-serif;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.home-ui a {
  pointer-events: auto;
}

.home-text-unit {
  --home-text-x: 0px;
  --home-text-y: 0px;
  --home-text-scale: 1;
  --home-text-spacing: 0px;
  display: inline-block;
  letter-spacing: var(--home-text-spacing);
  transform: translate3d(var(--home-text-x), var(--home-text-y), 0) scale(var(--home-text-scale));
  transform-origin: 50% 50%;
  will-change: transform, letter-spacing;
}

.home-brand-logo {
  position: absolute;
  top: clamp(22px, 3.1vw, 46px);
  left: clamp(22px, 3vw, 44px);
  width: clamp(126px, 10.8vw, 178px);
  opacity: 0.96;
  mix-blend-mode: screen;
}

.home-brand-logo img {
  width: 100%;
  filter: drop-shadow(0 1px 12px rgba(0, 0, 0, 0.28));
}

.home-menu {
  position: absolute;
  top: clamp(26px, 3.2vw, 48px);
  left: clamp(230px, 19vw, 380px);
  right: clamp(300px, 26vw, 520px);
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: clamp(28px, 5vw, 86px);
  align-items: start;
}

.home-menu-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.home-menu-group h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px;
  color: #fff;
  font-size: clamp(16px, 1.18vw, 24px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.home-menu-group a {
  width: fit-content;
  border-bottom: 1px solid rgba(255, 255, 255, 0.82);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(15px, 1.1vw, 22px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -0.055em;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.home-menu-group a:hover,
.home-discover:hover,
.home-contact:hover {
  opacity: 0.7;
}

.home-glyph {
  flex: 0 0 auto;
  display: inline-block;
  width: 17px;
  height: 17px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.16);
}

.home-glyph.triangle {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.home-glyph.circle {
  border-radius: 50%;
}

.home-time {
  position: absolute;
  top: clamp(28px, 3.2vw, 48px);
  right: clamp(190px, 24vw, 470px);
  display: grid;
  gap: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.03em;
}

.home-time span {
  width: fit-content;
  padding: 4px 5px 3px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 4px;
}

.home-time strong {
  font-size: 13px;
}

.home-discover {
  position: absolute;
  top: clamp(30px, 3.2vw, 50px);
  right: clamp(28px, 3.6vw, 60px);
  padding-right: clamp(20px, 2vw, 32px);
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  min-height: 98px;
  color: #fff;
  font-size: clamp(13px, 0.86vw, 16px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.home-contact {
  position: absolute;
  left: clamp(18px, 2vw, 32px);
  bottom: clamp(88px, 13vh, 168px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 164px;
  min-height: 68px;
  padding: 0 22px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: clamp(16px, 1.02vw, 20px);
  font-weight: 900;
  letter-spacing: -0.05em;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
}

.home-contact::before,
.home-contact::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid transparent;
  pointer-events: none;
}

.home-contact::before {
  border-top-color: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.78);
  clip-path: polygon(0 0, 8px 0, 8px 100%, 0 100%, 0 0, calc(100% - 8px) 0, 100% 0, 100% 100%, calc(100% - 8px) 100%, calc(100% - 8px) 0);
}

.home-contact::after {
  border-right-color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.78);
  clip-path: polygon(0 0, 100% 0, 100% 8px, 0 8px, 0 0, 0 calc(100% - 8px), 100% calc(100% - 8px), 100% 100%, 0 100%);
}

.home-contact strong {
  font-size: 0;
  line-height: 1;
}

.home-contact strong::before {
  content: "->";
  font-size: 26px;
}

.home-headline {
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 7vh, 82px);
  width: min(720px, calc(100vw - 48px));
  min-height: 226px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
}

.home-headline h1 {
  margin: 0;
  font-size: clamp(31px, 2.55vw, 48px);
  font-weight: 950;
  line-height: 1.06;
  letter-spacing: -0.075em;
}

.home-headline-line {
  display: block;
}

.home-headline p {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(28px, 2.15vw, 42px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.075em;
}

.home-headline > p:not(.home-year-line) {
  display: none;
}

.home-headline .corner {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
}

.corner-tl {
  top: 64px;
  left: 0;
}

.corner-tr {
  top: 64px;
  right: 0;
}

.corner-bl {
  bottom: 1px;
  left: 0;
}

.corner-br {
  right: 0;
  bottom: 1px;
}

.home-equalizer {
  position: absolute;
  right: clamp(24px, 3vw, 48px);
  bottom: clamp(32px, 3.5vw, 54px);
  display: flex;
  align-items: end;
  gap: 3px;
  height: 16px;
  opacity: 0.46;
}

.home-equalizer span {
  display: block;
  width: 2px;
  height: 6px;
  background: #fff;
  animation: homeEqualizer 1.25s ease-in-out infinite;
}

.home-equalizer span:nth-child(2) {
  height: 12px;
  animation-delay: -0.25s;
}

.home-equalizer span:nth-child(3) {
  height: 9px;
  animation-delay: -0.48s;
}

.home-equalizer span:nth-child(4) {
  height: 15px;
  animation-delay: -0.72s;
}

.home-second-page {
  background:
    radial-gradient(circle at 50% 44%, rgba(56, 96, 128, 0.44), transparent 34%),
    radial-gradient(circle at 50% 72%, rgba(255, 190, 92, 0.11), transparent 24%),
    linear-gradient(180deg, #020205 0%, #06111a 48%, #020205 100%);
  isolation: isolate;
}

.home-second-placeholder {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.second-galaxy {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: saturate(1.08) contrast(1.08);
}

.second-galaxy.is-fallback {
  opacity: 0;
}

.second-stars {
  position: absolute;
  z-index: 1;
  inset: -8%;
  pointer-events: none;
  opacity: 0.24;
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 74% 38%, rgba(125, 190, 255, 0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 72%, rgba(255, 207, 132, 0.5) 0 1px, transparent 1.5px);
  background-size: 86px 86px, 132px 132px, 108px 108px;
  animation: secondStarDrift 28s linear infinite;
}

.second-editorial-copy {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  color: rgba(218, 238, 246, 0.86);
  font-family: "Zen Tokyo Zoo", Aeonik, Manrope, system-ui, sans-serif;
  letter-spacing: 0;
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.42);
}

.second-editorial-copy::before,
.second-editorial-copy::after {
  content: "";
  position: absolute;
  top: clamp(138px, 18vh, 178px);
  bottom: clamp(86px, 9vh, 122px);
  width: 1px;
  background: rgba(218, 238, 246, 0.72);
  opacity: 0.88;
}

.second-editorial-copy::before {
  left: clamp(34px, 3.2vw, 62px);
}

.second-editorial-copy::after {
  right: clamp(34px, 3.2vw, 62px);
}

.second-editorial-text-unit {
  --second-text-x: 0px;
  --second-text-y: 0px;
  --second-text-scale: 1;
  --second-text-spacing: 0px;
  letter-spacing: var(--second-text-spacing);
  transform: translate3d(var(--second-text-x), var(--second-text-y), 0) scale(var(--second-text-scale));
  transform-origin: 50% 50%;
  will-change: transform, letter-spacing;
}

.second-editorial-title {
  position: absolute;
  top: clamp(-42px, -3vw, -18px);
  left: 50%;
  width: 106vw;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 38px);
  color: rgba(218, 238, 246, 0.72);
  font-size: clamp(78px, 13.2vw, 232px);
  font-weight: 400;
  line-height: 0.72;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
}

.second-editorial-title .second-editorial-text-unit {
  display: inline-block;
}

.second-editorial-note {
  position: absolute;
  margin: 0;
  max-width: 240px;
  color: rgba(218, 238, 246, 0.78);
  font-family: "Zen Tokyo Zoo", Aeonik, Manrope, system-ui, sans-serif;
  font-size: clamp(15px, 1.22vw, 24px);
  font-weight: 650;
  line-height: 1.52;
}

.second-editorial-note-left {
  top: clamp(164px, 23vh, 230px);
  left: clamp(92px, 8.2vw, 154px);
}

.second-editorial-note-right {
  top: clamp(134px, 17.2vh, 188px);
  right: clamp(84px, 7vw, 144px);
  max-width: 300px;
  font-size: clamp(17px, 1.45vw, 29px);
  font-weight: 400;
  line-height: 1.15;
  text-align: right;
  font-style: italic;
}

.second-editorial-year {
  position: absolute;
  bottom: clamp(28px, 2.4vh, 46px);
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.12vw, 2px) rgba(218, 238, 246, 0.86);
  text-stroke: clamp(1px, 0.12vw, 2px) rgba(218, 238, 246, 0.86);
  font-size: clamp(94px, 13.2vw, 232px);
  font-weight: 400;
  line-height: 0.74;
  text-transform: uppercase;
  opacity: 0.82;
}

.second-editorial-year-left {
  left: clamp(34px, 3.2vw, 62px);
}

.second-editorial-year-right {
  right: clamp(34px, 3.2vw, 62px);
}

.second-editorial-prompt {
  position: absolute;
  right: 0;
  bottom: clamp(22px, 2.4vh, 34px);
  left: 0;
  margin: 0 auto;
  width: fit-content;
  color: rgba(218, 238, 246, 0.82);
  font-size: clamp(11px, 0.76vw, 14px);
  font-weight: 800;
  line-height: 1;
}

.second-stage {
  --planet-accent: #e57cff;
  --second-planet-x: 50%;
  --second-planet-y: 75%;
  --second-planet-size: 25%;
  --second-planet-glow-opacity: 0.9;
  --second-planet-brightness-filter: brightness(1);
  --second-planet-hue-filter: hue-rotate(0deg);
  --second-left-hand-x: 41.7%;
  --second-left-hand-y: 66.2%;
  --second-left-hand-size: 28.4%;
  --second-left-hand-rotate: 0deg;
  --second-left-hand-filter: brightness(1) saturate(1) hue-rotate(0deg);
  --second-right-hand-x: 58.2%;
  --second-right-hand-y: 66.5%;
  --second-right-hand-size: 28.6%;
  --second-right-hand-rotate: 0deg;
  --second-right-hand-filter: brightness(1) saturate(1) hue-rotate(0deg);
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.second-stage::before,
.second-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.second-stage::before {
  inset: auto auto -32vh 50%;
  width: min(88vw, 860px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--planet-accent) 28%, transparent), transparent 62%);
  filter: blur(28px);
  opacity: 0.66;
  transition: background 0.42s ease;
}

.second-stage::after {
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, transparent 0 30%, rgba(0, 0, 0, 0.28) 72%, rgba(0, 0, 0, 0.74) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 28%, rgba(0, 0, 0, 0.34));
}

.second-astronaut-wrap {
  position: absolute;
  z-index: 1;
  bottom: -2vh;
  left: 50%;
  height: min(104vh, 940px);
  aspect-ratio: 3 / 2;
  transform: translateX(-50%);
  transform-origin: 50% 64%;
  animation: secondAstronautBreath 7.4s ease-in-out infinite;
}

.second-astronaut {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 24px 80px rgba(0, 0, 0, 0.52));
}

.second-helmet-reflection {
  position: absolute;
  z-index: 2;
  top: 33.2%;
  left: 50%;
  width: 14%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.54;
  mix-blend-mode: screen;
  filter: blur(0.8px) saturate(1.15);
  mask-image: radial-gradient(circle, black 0 58%, transparent 76%);
  pointer-events: none;
}

.second-helmet-reflection img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: secondPlanetSpin 24s linear infinite reverse;
  transition: opacity 0.22s ease, transform 0.42s ease;
}

.second-astronaut-wrap.is-helmet-active .second-helmet-reflection {
  opacity: var(--helmet-reflection-opacity, 0.16);
  filter: blur(0.9px) saturate(0.42) brightness(0.68);
}

.second-helmet-fx {
  --helmet-active: 0;
  --helmet-spot-x: 50%;
  --helmet-spot-y: 50%;
  --helmet-face-x: 44.2%;
  --helmet-face-y: 53.5%;
  --helmet-face-size: 88%;
  --helmet-face-opacity: 0.78;
  --helmet-face-idle-brightness: 0.3;
  --helmet-face-brightness: 0.36;
  --helmet-face-saturation: 0.3;
  --helmet-face-grayscale: 0.58;
  --helmet-face-hue: 178deg;
  --helmet-reveal-size: 30%;
  --helmet-reveal-size-y: 34%;
  --helmet-reflection-opacity: 0.16;
  position: absolute;
  z-index: 2;
  top: 31.8%;
  left: 50%;
  width: 18.2%;
  aspect-ratio: 1.06;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 46% 46% 44% 44% / 36% 36% 42% 42%;
  pointer-events: auto;
  cursor: crosshair;
  isolation: isolate;
}

.second-helmet-fx::before {
  content: none;
}

.second-helmet-fx::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 2% 2% 8%;
  border-radius: 46% 46% 44% 44% / 36% 36% 42% 42%;
  background:
    linear-gradient(132deg, rgba(180, 220, 238, 0.16) 0 10%, transparent 24% 100%),
    radial-gradient(ellipse at 62% 18%, rgba(255, 255, 255, 0.18) 0 7%, transparent 16%),
    radial-gradient(ellipse at 52% 80%, rgba(191, 135, 74, 0.12) 0 18%, transparent 52%);
  mix-blend-mode: screen;
  opacity: calc(0.2 + (var(--helmet-active) * 0.08));
  pointer-events: none;
}

.second-helmet-face {
  position: absolute;
  z-index: 1;
  top: var(--helmet-face-y);
  left: var(--helmet-face-x);
  width: var(--helmet-face-size);
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  transform: translate(-50%, -50%) scale(0.985);
  transform-origin: 50% 50%;
  opacity: calc(var(--helmet-active) * var(--helmet-face-opacity));
  filter: grayscale(0.66) contrast(1.12) brightness(var(--helmet-face-idle-brightness)) saturate(0.24) sepia(0.03) hue-rotate(var(--helmet-face-hue));
  -webkit-mask-image:
    radial-gradient(ellipse var(--helmet-reveal-size) var(--helmet-reveal-size-y) at var(--helmet-spot-x) var(--helmet-spot-y), black 0 42%, rgba(0, 0, 0, 0.72) 62%, transparent 100%);
  mask-image:
    radial-gradient(ellipse var(--helmet-reveal-size) var(--helmet-reveal-size-y) at var(--helmet-spot-x) var(--helmet-spot-y), black 0 42%, rgba(0, 0, 0, 0.72) 62%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition:
    opacity 0.68s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.68s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.68s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, filter;
  pointer-events: none;
  user-select: none;
}

.second-helmet-fx.is-active .second-helmet-face {
  transform: translate(-50%, -50%) scale(1);
  filter: grayscale(var(--helmet-face-grayscale)) contrast(1.15) brightness(var(--helmet-face-brightness)) saturate(var(--helmet-face-saturation)) sepia(0.03) hue-rotate(var(--helmet-face-hue));
}

.helmet-console-toggle {
  position: fixed;
  z-index: 96;
  right: 24px;
  top: 96px;
  min-width: 108px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(220, 238, 255, 0.56);
  border-radius: 4px;
  background: rgba(4, 8, 14, 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
}

.helmet-console {
  position: fixed;
  z-index: 95;
  right: 24px;
  top: 144px;
  display: grid;
  gap: 10px;
  width: min(304px, calc(100vw - 32px));
  max-height: calc(100vh - 176px);
  padding: 14px;
  overflow: auto;
  border: 1px solid rgba(188, 219, 236, 0.45);
  border-radius: 6px;
  background: rgba(3, 8, 14, 0.82);
  color: #fff;
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px) scale(0.98);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.helmet-console.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.helmet-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.helmet-console-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
}

.helmet-console-actions {
  display: flex;
  gap: 8px;
}

.helmet-console-actions button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.helmet-console-field {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
  min-height: 28px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 11px;
  font-weight: 800;
}

.helmet-console-field input {
  width: 100%;
  accent-color: #bcddec;
}

.helmet-console-field output {
  min-width: 44px;
  padding: 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-align: center;
}

.second-planet-link {
  position: absolute;
  z-index: 3;
  top: var(--second-planet-y);
  left: var(--second-planet-x);
  width: var(--second-planet-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  border-radius: 50%;
  cursor: pointer;
  touch-action: pan-y;
  filter: var(--second-planet-brightness-filter) var(--second-planet-hue-filter);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), filter 0.42s ease;
}

.second-planet-link:hover,
.second-planet-link:focus-visible {
  transform: translate(-50%, -50%) scale(1.13);
  filter: var(--second-planet-brightness-filter) var(--second-planet-hue-filter) saturate(1.14) brightness(1.08);
}

.second-planet-glow {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--planet-accent) 72%, transparent), transparent 66%);
  filter: blur(22px);
  opacity: var(--second-planet-glow-opacity);
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.42s ease;
}

.second-planet-link:hover .second-planet-glow,
.second-planet-link:focus-visible .second-planet-glow {
  opacity: 1;
  transform: scale(1.16);
}

.second-planet-orbit {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  animation: secondPlanetFloat 5.8s ease-in-out infinite;
}

.second-planet-orbit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px color-mix(in srgb, var(--planet-accent) 72%, transparent))
    drop-shadow(0 0 46px color-mix(in srgb, var(--planet-accent) 58%, transparent));
  animation: secondPlanetSpin 32s linear infinite;
  transition: opacity 0.24s ease, transform 0.42s ease, filter 0.42s ease;
  user-select: none;
}

.second-stage.is-switching .second-planet-orbit img,
.second-stage.is-switching .second-helmet-reflection img {
  opacity: 0.12;
  transform: scale(0.82) rotate(18deg);
}

.second-hand {
  position: absolute;
  z-index: 4;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.second-hand-left {
  top: var(--second-left-hand-y);
  left: var(--second-left-hand-x);
  width: var(--second-left-hand-size);
  transform: translate(-50%, 0) rotate(var(--second-left-hand-rotate));
  transform-origin: 68% 48%;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.46)) var(--second-left-hand-filter);
}

.second-hand-right {
  top: var(--second-right-hand-y);
  left: var(--second-right-hand-x);
  width: var(--second-right-hand-size);
  transform: translate(-50%, 0) rotate(var(--second-right-hand-rotate));
  transform-origin: 32% 48%;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.46)) var(--second-right-hand-filter);
}

.landing-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: #1d1a1c;
  background:
    radial-gradient(circle at calc(50% + var(--mx, 0px)) calc(27% + var(--my, 0px)), rgba(238, 231, 224, 0.54), transparent 31%),
    radial-gradient(circle at calc(48% - var(--mx, 0px)) calc(67% - var(--my, 0px)), rgba(205, 156, 177, 0.18), transparent 35%),
    radial-gradient(circle at calc(31% + var(--mx, 0px)) calc(12% + var(--my, 0px)), rgba(182, 216, 199, 0.12), transparent 30%),
    linear-gradient(180deg, #beb1ad 0%, #b5a7a4 47%, #9e9094 100%);
  cursor: auto;
  isolation: isolate;
}

.landing-stage::before,
.landing-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.landing-stage::before {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 7.5vw 7.5vw;
  opacity: 0.055;
  mix-blend-mode: soft-light;
  mask-image: radial-gradient(circle at 50% 52%, black, transparent 72%);
}

.landing-stage::after {
  z-index: 7;
  background:
    radial-gradient(circle at 50% 46%, rgba(214, 202, 196, 0.2) 0 27%, rgba(184, 168, 164, 0.36) 58%, rgba(105, 86, 93, 0.28) 100%),
    linear-gradient(180deg, rgba(238, 232, 226, 0.58), rgba(193, 178, 174, 0.36) 52%, rgba(128, 108, 119, 0.34));
  mix-blend-mode: normal;
  opacity: 0.68;
}

.landing-stage.has-custom-cursor,
.landing-stage.has-custom-cursor * {
  cursor: none !important;
}

.landing-ambient {
  position: absolute;
  z-index: 1;
  inset: -12%;
  overflow: hidden;
  pointer-events: none;
  filter: saturate(0.88);
}

.ambient-orb,
.ambient-grain {
  position: absolute;
  pointer-events: none;
}

.ambient-orb {
  border-radius: 50%;
  filter: blur(58px);
  mix-blend-mode: screen;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  animation: landingOrbDrift 18s ease-in-out infinite alternate;
}

.orb-a {
  top: 2%;
  left: 10%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, rgba(255, 220, 206, 0.24), rgba(255, 207, 185, 0) 64%);
}

.orb-b {
  right: 4%;
  bottom: 3%;
  width: 48vw;
  height: 48vw;
  background: radial-gradient(circle, rgba(186, 170, 190, 0.22), rgba(172, 197, 255, 0) 64%);
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}

.orb-c {
  top: 36%;
  right: 22%;
  width: 28vw;
  height: 28vw;
  background: radial-gradient(circle, rgba(222, 235, 218, 0.18), rgba(255, 244, 211, 0) 66%);
  animation-duration: 15s;
}

.ambient-grain {
  inset: -20%;
  opacity: 0.08;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.4px),
    radial-gradient(circle at 38% 74%, rgba(88, 68, 78, 0.24) 0 1px, transparent 1.8px),
    linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  background-size: 42px 42px, 58px 58px, 36px 36px, 100% 100%;
  transform: translate3d(calc(var(--mx, 0px) * -0.24), calc(var(--my, 0px) * -0.24), 0);
  animation: landingGrain 9s steps(2, end) infinite;
}

.landing-canvas,
.landing-fallback {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
}

.landing-canvas {
  opacity: 0;
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
  filter: blur(2.35px) saturate(0.82) contrast(0.72) brightness(1.1);
  transform: scale(1.045);
}

.landing-stage.is-3d-ready .landing-canvas {
  opacity: 0.84;
}

.landing-fallback {
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.8s ease;
}

.landing-stage.is-3d-ready .landing-fallback {
  opacity: 0;
}

.landing-fallback-orb {
  width: min(58vh, 58vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.82), transparent 8%),
    radial-gradient(circle at 50% 48%, rgba(255, 229, 207, 0.88), rgba(172, 149, 158, 0.44) 44%, rgba(92, 98, 126, 0.08) 68%);
  filter: blur(0.5px) drop-shadow(0 26px 80px rgba(255, 211, 188, 0.32));
  animation: landingBreath 6.5s ease-in-out infinite;
}

.landing-cursor {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 92px;
  height: 92px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-120px, -120px, 0);
  transition: opacity 0.22s ease, width 0.28s cubic-bezier(0.16, 1, 0.3, 1), height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, width, height;
}

.landing-cursor.is-visible {
  opacity: 1;
}

.landing-cursor-core,
.landing-cursor-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.landing-cursor-core {
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  background: rgba(255, 250, 244, 0.72);
  box-shadow:
    0 0 18px rgba(255, 236, 220, 0.75),
    0 0 54px rgba(255, 196, 170, 0.38);
  mix-blend-mode: screen;
  transition: width 0.26s ease, height 0.26s ease, background 0.26s ease;
}

.landing-cursor-ring {
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(255, 247, 240, 0.46);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.13),
    0 16px 44px rgba(76, 52, 64, 0.18);
  backdrop-filter: blur(10px) saturate(130%);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.landing-cursor.is-hovering {
  width: 132px;
  height: 54px;
}

.landing-cursor.is-hovering .landing-cursor-core {
  width: 9px;
  height: 9px;
  background: rgba(255, 245, 229, 0.92);
}

.landing-cursor.is-hovering .landing-cursor-ring {
  width: 132px;
  height: 54px;
  border-color: rgba(255, 247, 239, 0.78);
  background: rgba(255, 255, 255, 0.16);
}

.landing-cursor.is-pressed .landing-cursor-ring {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.22);
}

.landing-hero {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  width: min(760px, calc(100vw - 44px));
  transform: translate(-50%, -50%);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 16px 48px rgba(0, 0, 0, 0.36);
}

.landing-kicker,
.landing-subtitle {
  font-family: Manrope, Aeonik, sans-serif;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.landing-kicker {
  color: rgba(255, 255, 255, 0.68);
}

.landing-title {
  margin: 6px 0 8px;
  color: rgba(255, 255, 255, 0.94);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(84px, 16vw, 260px);
  font-weight: 900;
  line-height: 0.76;
  letter-spacing: 0;
  mix-blend-mode: screen;
}

.landing-subtitle {
  width: min(430px, 78vw);
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.35;
}

.landing-entry-pill {
  top: 70.5%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-width: 166px;
  min-height: 26px;
  padding: 5px 13px 4px;
  border: 1px solid rgba(115, 107, 106, 0.18);
  border-radius: 999px;
  background: rgba(225, 220, 215, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 9px 24px rgba(66, 53, 56, 0.13);
  color: rgba(20, 19, 21, 0.9);
  font-family: "Courier New", Consolas, monospace;
  font-size: clamp(10px, 0.7vw, 12px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: none;
  mix-blend-mode: normal;
  backdrop-filter: blur(18px) saturate(92%);
  transition: background 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}

.landing-entry-pill:hover {
  background: rgba(239, 235, 230, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 12px 30px rgba(66, 53, 56, 0.17);
}

.landing-entry-pill strong {
  display: inline-block;
  margin-left: -2px;
  font-size: 15px;
  font-weight: 900;
  line-height: 0.8;
}

.landing-panel {
  position: fixed;
  z-index: 20;
  top: calc(50% - 34px);
  left: var(--frame);
  width: min(390px, calc(100vw - 2 * var(--frame)));
  transform: translate3d(var(--panel-x, 0px), var(--panel-y, 0px), 0);
  color: rgba(255, 255, 255, 0.88);
  pointer-events: none;
}

.landing-panel-grip {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 132px;
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(22px) contrast(88%) brightness(118%);
  color: #fff;
  pointer-events: auto;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
  cursor: grab;
}

.landing-panel-grip:active {
  cursor: grabbing;
}

.landing-panel-grip strong {
  font-size: 21px;
  line-height: 1;
}

.landing-panel-body {
  width: 100%;
  max-height: min(520px, calc(100vh - 160px));
  margin-top: 10px;
  padding: 19px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(28px) contrast(88%) brightness(122%);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-panel.is-open {
  pointer-events: auto;
}

.landing-panel.is-open .landing-panel-body {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.landing-panel-head,
.landing-panel-actions,
.landing-panel-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.landing-panel-head {
  margin-bottom: 18px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
}

.landing-panel-head button {
  opacity: 0.72;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
}

.landing-panel p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.5;
}

.landing-panel-actions {
  margin-bottom: 18px;
}

.landing-panel-actions a,
.landing-panel-actions button {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.82);
  color: #111017;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
}

.landing-panel-actions button {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.landing-panel-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-panel-list li {
  padding: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
}

.landing-panel-list span {
  color: rgba(255, 255, 255, 0.52);
}

.landing-panel-list strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  text-transform: uppercase;
}

body.landing-exiting .landing-stage {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(16px);
  transition: opacity 0.68s ease, transform 0.68s cubic-bezier(0.16, 1, 0.3, 1), filter 0.68s ease;
}

.scene-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--gradient);
  filter: brightness(var(--designer-bg-brightness)) saturate(var(--designer-bg-saturation)) blur(var(--designer-bg-blur));
  isolation: isolate;
  transition: background 0.5s ease, filter 0.35s ease;
}

.scene-bg::before,
.scene-bg::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.scene-bg::before {
  z-index: 2;
  inset: -22% -42%;
  opacity: var(--designer-cloud-opacity);
  background:
    radial-gradient(ellipse at 8% 68%, rgba(255, 255, 255, 0.28) 0 9%, transparent 27%),
    radial-gradient(ellipse at 22% 72%, rgba(255, 255, 255, 0.2) 0 12%, transparent 32%),
    radial-gradient(ellipse at 52% 60%, color-mix(in srgb, var(--slide-accent, var(--accent)) 28%, rgba(255, 255, 255, 0.24)) 0 10%, transparent 30%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.2) 0 11%, transparent 31%),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 48%, transparent 100%);
  filter: blur(8px);
  mix-blend-mode: screen;
  transform: translate3d(-7%, 0, 0);
  animation: cloudDrift var(--designer-cloud-speed) linear infinite;
  will-change: transform;
}

.scene-bg::after {
  z-index: 3;
  inset: 0;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 18%, rgba(255, 255, 255, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 44%, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), transparent 36%),
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.12));
  background-size: auto, auto, auto, auto, auto;
  opacity: var(--designer-star-opacity);
  animation: starDust var(--designer-star-speed) ease-in-out infinite alternate;
}

.bg-layer {
  position: absolute;
  z-index: 1;
  inset: -58px;
  width: calc(100% + 116px);
  height: calc(100% + 116px);
  object-fit: cover;
  object-position: var(--object-position, center center);
  opacity: var(--layer-opacity, 0.56);
  transform: translate3d(var(--shift-x, 0), var(--shift-y, 0), 0) scale(var(--scale, 1));
  transform-origin: center center;
  will-change: transform, opacity;
}

.products-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #160b22;
  --planet-y: 0px;
  --planet-scale: 1;
  --planet-anchor-y: clamp(88px, 15.5vh, 140px);
}

.product-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  filter: blur(18px);
  transform: translate3d(6vw, 0, 0) scale(0.985);
  transition: opacity 0.72s ease, filter 0.72s ease, transform 0.78s cubic-bezier(0.16, 1, 0.3, 1);
}

.products-stage[data-direction="prev"] .product-slide {
  transform: translate3d(-6vw, 0, 0) scale(0.985);
}

.product-slide.is-active {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.product-slide.is-prev {
  transform: translate3d(-7vw, 0, 0) scale(0.975);
}

.product-slide.is-next {
  transform: translate3d(7vw, 0, 0) scale(0.975);
}

.product-slide.is-exiting {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  filter: blur(18px);
}

.product-slide .scene-bg {
  background: var(--slide-gradient, var(--gradient));
  transform: scale(1.03);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s ease;
}

.product-slide.is-active .scene-bg {
  transform: scale(1.06);
  filter: brightness(var(--designer-bg-brightness)) saturate(var(--designer-bg-saturation)) blur(var(--designer-bg-blur));
}

.product-slide.is-active .scene-bg::before,
.product-slide.is-active .scene-bg::after {
  animation-play-state: running;
}

.product-slide:not(.is-active) .scene-bg::before,
.product-slide:not(.is-active) .scene-bg::after {
  animation-play-state: paused;
}

.products-stage::after,
.detail-fixed::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, var(--designer-bg-dim)), rgba(0, 0, 0, var(--designer-bg-dim))),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.12));
}

.marquee {
  position: absolute;
  z-index: 2;
  top: 38%;
  left: 0;
  display: flex;
  width: max-content;
  animation: marquee var(--designer-marquee-speed) linear infinite;
  opacity: 0.38;
  mix-blend-mode: soft-light;
  transition: opacity 0.62s ease, transform 0.74s ease;
}

.product-slide:not(.is-active) .marquee {
  opacity: 0;
}

.marquee span {
  padding-right: 3vw;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.72);
  font-family: Aeonik, Impact, sans-serif;
  font-size: clamp(150px, 19vw, 290px);
  font-weight: 900;
  line-height: 0.78;
  text-transform: uppercase;
  white-space: nowrap;
}

.products-planet {
  position: absolute;
  z-index: 3;
  top: calc(50% + var(--planet-anchor-y));
  left: 50%;
  width: min(1360px, 104vw);
  max-width: none;
  transform: translate3d(-50%, calc(var(--planet-y, 0px) + 7vh), 0) scale(0.9);
  opacity: 0.88;
  transition: opacity 0.72s ease, transform 0.78s cubic-bezier(0.16, 1, 0.3, 1), filter 0.72s ease;
  filter: drop-shadow(0 -28px 70px color-mix(in srgb, var(--accent) 26%, transparent));
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.products-planet img {
  display: block;
  width: 100%;
  max-width: none;
  animation: spin var(--designer-planet-spin-speed) linear infinite;
  will-change: rotate;
}

.product-slide.is-active .products-planet {
  opacity: 0.92;
  filter: blur(0) drop-shadow(0 -34px 88px color-mix(in srgb, var(--accent) 32%, transparent));
  transform: translate3d(-50%, var(--planet-y, 0px), 0) scale(var(--planet-scale, 1));
}

.product-slide:not(.is-active) .products-planet {
  opacity: 0;
  filter: blur(18px);
  transform: translate3d(-50%, calc(var(--planet-y, 0px) + 11vh), 0) scale(0.82);
}

.products-stage[data-direction="next"] .product-slide.is-active .products-planet {
  transform: translate3d(-50%, var(--planet-y, 0px), 0) scale(var(--planet-scale, 1));
}

.products-stage[data-direction="prev"] .product-slide.is-active .products-planet {
  transform: translate3d(-50%, var(--planet-y, 0px), 0) scale(var(--planet-scale, 1));
}

.product-box {
  position: absolute;
  z-index: 8;
  top: 49%;
  left: 50%;
  width: clamp(150px, 21vh, 205px);
  opacity: 0;
  transform: translate(calc(-50% + 7vw), -50%) scale(0.88) rotate(-5deg);
  filter: blur(12px);
  animation: floatBox var(--designer-float-speed) ease-in-out infinite;
  transition: opacity 0.62s ease, transform 0.78s cubic-bezier(0.16, 1, 0.3, 1), filter 0.62s ease, scale 0.35s ease, rotate 0.35s ease;
}

.products-stage[data-direction="prev"] .product-box {
  transform: translate(calc(-50% - 7vw), -50%) scale(0.88) rotate(5deg);
}

.product-slide.is-active .product-box {
  opacity: 1;
  transform: translate(-50%, -50%) scale(var(--designer-product-scale)) rotate(0deg);
  filter: blur(0);
}

.product-slide.is-exiting.is-prev .product-box {
  transform: translate(calc(-50% - 8vw), -50%) scale(0.86) rotate(-6deg);
}

.product-slide.is-exiting.is-next .product-box {
  transform: translate(calc(-50% + 8vw), -50%) scale(0.86) rotate(6deg);
}

.product-box:hover {
  scale: 1.04;
  rotate: 2deg;
}

.product-box img {
  width: 100%;
  max-height: 66vh;
  object-fit: contain;
  filter: drop-shadow(0 30px 28px rgba(0, 0, 0, 0.24));
}

.side-cue {
  position: absolute;
  z-index: 20;
  top: 50%;
  width: 90px;
  color: var(--accent);
  font-size: 16px;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

.side-cue.left {
  right: calc(50% + clamp(160px, 17vw, 270px));
}

.side-cue.right {
  left: calc(50% + clamp(160px, 17vw, 270px));
}

.product-nav {
  position: fixed;
  z-index: 52;
  right: 50%;
  bottom: var(--nav-bottom);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: min(920px, calc(100vw - 2 * var(--frame)));
  min-height: 80px;
  padding: 14px 24px 11px;
  transform: translateX(50%);
  color: currentColor;
  clip-path: polygon(0 18px, 18px 8px, 106px 8px, 116px 0, calc(100% - 18px) 0, 100% 20px, 100% calc(100% - 30px), calc(100% - 44px) 100%, 0 100%);
  border: 2px solid var(--accent);
  background: rgba(30, 13, 15, 0.47);
  backdrop-filter: blur(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.product-nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--page-progress) * 100%);
  height: 5px;
  background: var(--accent);
  opacity: 0.55;
  transition: width 0.1s linear;
}

body[data-page="products"] .product-nav::after {
  display: none;
}

.product-nav a,
.product-nav button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  color: rgba(255, 255, 255, 0.48);
  font-family: Manrope, Aeonik, sans-serif;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
  transition: color 0.22s ease, opacity 0.22s ease;
}

.product-nav a:hover,
.product-nav button:hover,
.product-nav .active {
  color: var(--accent);
}

.product-nav .active {
  pointer-events: none;
}

body.detail-tail-active .product-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateX(50%) translateY(26px);
}

body.detail-tail-shop-active .site-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
}

.detail-page {
  --detail-tail-start: 4050px;
  position: relative;
  min-height: calc(var(--detail-tail-start) + 100vh);
  background: #05050c;
}

.detail-fixed {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--gradient);
}

.detail-art,
.detail-product,
.detail-planet {
  position: absolute;
  z-index: 4;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
}

.detail-art {
  opacity: var(--art-opacity, 1);
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.18));
  will-change: transform, opacity, filter;
}

.detail-art.ship,
.detail-art.spaceship {
  z-index: 3;
  animation: detailShipFloat 8s ease-in-out infinite;
}

.detail-art.planet {
  z-index: 2;
  mix-blend-mode: screen;
}

.detail-art.floor {
  z-index: 5;
}

.detail-art.astronaut {
  z-index: 9;
  animation: detailCharacterFloat 5.8s ease-in-out infinite;
}

.detail-art.cloud {
  z-index: 6;
  opacity: var(--art-opacity, 0.82);
  animation: detailCloudFloat 22s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.detail-art.layered-clouds,
.detail-art.layered-ground,
.detail-art.layered-character {
  inset: -58px;
  width: calc(100% + 116px);
  height: calc(100% + 116px);
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

.detail-art.layered-clouds {
  z-index: 3;
  opacity: var(--art-cloud-opacity, 0.86);
  transform: translate3d(var(--art-cloud-x, 0px), calc(var(--detail-bg-shift-y, 0px) + var(--art-cloud-y, 0px)), 0) scale(var(--detail-bg-scale, 1));
  animation: detailCloudFloat 24s ease-in-out infinite alternate;
}

.detail-art.layered-ground {
  z-index: 5;
  opacity: var(--art-ground-opacity, 0.94);
  transform: translate3d(0, calc(var(--detail-bg-shift-y, 0px) + var(--art-floor-y, 0px)), 0) scale(var(--detail-bg-scale, 1));
}

.detail-art.layered-character {
  z-index: 7;
  opacity: var(--art-character-opacity, 1);
  transform: translate3d(0, calc(var(--detail-bg-shift-y, 0px) + var(--art-character-y, 0px) + var(--detail-role-y, 0px)), 0) scale(var(--detail-bg-scale, 1)) rotate(var(--art-character-rotate, 0deg));
  animation: detailCharacterFloat 6.4s ease-in-out infinite;
}

.detail-page .scene-bg::before,
.detail-page .scene-bg::after {
  display: none;
}

.detail-page .detail-planet {
  display: none;
}

.detail-planet {
  z-index: 2;
  bottom: -62vh;
  left: 50%;
  width: min(1450px, 112vw);
  opacity: var(--detail-planet-opacity, 0.62);
  transform: translate3d(-50%, var(--detail-planet-y, 0px), 0) scale(var(--detail-planet-scale, 0.98));
  filter: blur(0) drop-shadow(0 -28px 92px color-mix(in srgb, var(--accent) 28%, transparent));
  animation: spin 300s linear infinite;
  mix-blend-mode: screen;
  transform-origin: center center;
  will-change: transform, opacity, rotate;
}

.detail-product {
  z-index: 8;
  top: 49%;
  left: 50%;
  width: clamp(142px, 11.5vw, 196px);
  opacity: var(--detail-product-opacity, 1);
  transform: translate(-50%, calc(-50% + var(--detail-product-y, 0px) + var(--detail-role-y, 0px))) scale(var(--detail-product-scale, 1)) rotate(var(--detail-product-rotate, 0deg));
  filter: blur(var(--detail-product-blur, 0px)) drop-shadow(0 28px 26px rgba(0, 0, 0, 0.28));
  will-change: transform, opacity, filter;
}

.detail-fixed .bg-layer {
  transform: translate3d(var(--shift-x, 0), calc(var(--shift-y, 0px) + var(--detail-bg-shift-y, 0px)), 0) scale(var(--detail-bg-scale, var(--scale, 1)));
  transition: transform 0.18s ease-out, opacity 0.35s ease;
}

.detail-title {
  position: absolute;
  z-index: 6;
  top: 43%;
  left: 50%;
  width: 100vw;
  transform: translate(-50%, -50%);
  color: var(--accent);
  font-family: Aeonik, Impact, sans-serif;
  font-size: clamp(72px, 10.6vw, 170px);
  font-weight: 900;
  line-height: 0.8;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.detail-metrics {
  position: absolute;
  z-index: 9;
  top: 39.5%;
  right: 16.5vw;
  left: 16.5vw;
  display: flex;
  justify-content: space-between;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 900;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.detail-headline {
  position: absolute;
  z-index: 7;
  top: 43%;
  left: 50%;
  width: min(760px, 84vw);
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.96);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 4.1vw, 62px);
  font-weight: 900;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 12px 50px rgba(0, 0, 0, 0.25);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.detail-page[data-phase="story"] .detail-title,
.detail-page[data-phase="cards"] .detail-title,
.detail-page[data-phase="story"] .detail-metrics,
.detail-page[data-phase="cards"] .detail-metrics {
  opacity: 0;
  transform: translate(-50%, -60%) scale(0.86);
  filter: blur(10px);
}

.detail-page[data-phase="story"] .detail-product {
  opacity: var(--detail-product-opacity, 0.42);
}

.detail-page[data-phase="cards"] .detail-product {
  opacity: 0;
  transform: translate(-50%, calc(-68% + var(--detail-product-y, 0px) + var(--detail-role-y, 0px))) scale(0.72) rotate(var(--detail-product-rotate, 0deg));
  filter: blur(12px) drop-shadow(0 28px 26px rgba(0, 0, 0, 0.18));
}

.detail-page[data-phase="story"] .detail-headline,
.detail-page[data-phase="cards"] .detail-headline {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.detail-cards {
  position: absolute;
  z-index: 12;
  top: 1720px;
  right: 10vw;
  left: 10vw;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(280px, 360px);
  justify-content: space-between;
  gap: 70px;
  padding-bottom: 160px;
}

.detail-card {
  color: rgba(255, 255, 255, 0.78);
}

.detail-card .panel-title {
  width: 62%;
  margin: 0 0 -32px auto;
}

.detail-card.copy-card .panel-title {
  margin-right: 0;
}

.detail-card.spec-card .panel-title {
  width: min(82%, 300px);
  margin-left: 0;
  margin-right: auto;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 0 56%);
}

.detail-card.copy-card {
  align-self: start;
}

.detail-card.spec-card {
  align-self: end;
  margin-top: 120px;
}

.detail-card .panel-inner {
  padding: 86px 46px 46px;
}

.detail-card p {
  font-size: 16px;
  font-weight: 700;
}

.detail-tail {
  position: absolute;
  z-index: 53;
  top: var(--detail-tail-start);
  right: 0;
  left: 0;
  display: grid;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 0;
  background: #020205;
  color: #fff;
  isolation: isolate;
}

.detail-tail::before,
.detail-tail::after {
  content: "";
  position: absolute;
  pointer-events: none;
  display: none;
}

.detail-tail-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #020205;
  border: 0;
  opacity: 1;
  pointer-events: none;
}

.detail-tail.is-ended .detail-tail-video {
  opacity: 1;
  filter: none;
}

.detail-tail-video-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: none;
}

.detail-tail::before {
  z-index: 2;
  inset: -22%;
  opacity: 0;
  background: none;
  animation: none;
}

.detail-tail::after {
  z-index: 2;
  inset: 0;
  background: none;
  mask-image: none;
  opacity: 0;
}

.detail-tail.is-ended::before,
.detail-tail.is-ended::after {
  display: none;
}

.detail-tail-orbit {
  position: absolute;
  z-index: 1;
  width: min(74vw, 820px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, rgba(255, 255, 255, 0.2));
  border-radius: 50%;
  opacity: 0.58;
  transform: scale(calc(0.9 + var(--detail-tail-progress, 0) * 0.12));
  filter: drop-shadow(0 0 36px color-mix(in srgb, var(--accent) 38%, transparent));
  animation: spin 140s linear infinite;
}

.detail-tail-orbit::before,
.detail-tail-orbit::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.detail-tail-orbit::after {
  inset: 34%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 72%, white), transparent 68%);
  border: 0;
  opacity: 0.3;
  filter: blur(18px);
}

.detail-tail-frame {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(760px, 86vw);
  min-height: min(420px, 56vh);
  place-items: center;
  padding: clamp(34px, 5vw, 58px);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent) 56%, rgba(255, 255, 255, 0.28));
  background: rgba(5, 8, 22, 0.44);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
  clip-path: polygon(0 22px, 22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px));
  opacity: calc(0.58 + var(--detail-tail-progress, 0) * 0.42);
  transform: translateY(calc((1 - var(--detail-tail-progress, 0)) * 34px)) scale(calc(0.96 + var(--detail-tail-progress, 0) * 0.04));
}

.detail-tail-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.detail-tail h2 {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(64px, 11vw, 150px);
  font-weight: 900;
  line-height: 0.8;
}

.detail-tail p {
  max-width: 540px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

.detail-tail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.detail-tail-actions a {
  min-width: 136px;
  padding: 14px 22px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--accent) 78%, white);
  background: rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.detail-tail-actions a:hover,
.detail-tail-actions a:focus-visible {
  color: #05050c;
  background: var(--accent);
  transform: translateY(-2px);
}

.detail-tail-word {
  position: absolute;
  z-index: 2;
  right: -4vw;
  bottom: 3vh;
  max-width: 110vw;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
  font-family: Aeonik, Impact, sans-serif;
  font-size: clamp(96px, 18vw, 260px);
  font-weight: 900;
  line-height: 0.78;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.68;
  transform: translateX(calc((1 - var(--detail-tail-progress, 0)) * 7vw));
}

.detail-tail-shop {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  --tail-gold: #d7ad72;
  --tail-gold-bright: #f1c989;
  --tail-edge-x: clamp(42px, 5vw, 92px);
  --tail-top-y: clamp(18px, 2.4vw, 38px);
  --tail-bottom-y: clamp(34px, 6vh, 62px);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(28px);
  transition: opacity 0.78s ease, transform 0.78s ease;
  isolation: isolate;
}

.detail-tail.is-ended .detail-tail-shop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.detail-tail.is-ended .detail-tail-video-vignette {
  background: none;
}

.detail-tail-shop::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  display: none;
  background: none;
}

.detail-tail-shop::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  display: none;
  opacity: 0;
  background: none;
}

.detail-tail-topbar,
.detail-tail-copy,
.detail-tail-lanyard-root,
.detail-tail-cans,
.detail-tail-story-badges,
.detail-tail-buy {
  position: absolute;
  z-index: 1;
}

.detail-tail-lanyard-root {
  z-index: 2;
  top: calc(var(--tail-top-y) - 28px);
  right: clamp(-86px, -4.8vw, -48px);
  width: clamp(340px, 30vw, 460px);
  height: clamp(500px, 66vh, 720px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(18px, -38px, 0) scale(0.96);
  transition: opacity 0.72s ease 0.18s, transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
}

.detail-tail.is-ended .detail-tail-lanyard-root {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.lanyard-wrapper {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lanyard-hovered body,
body.lanyard-hovered {
  cursor: grab;
}

body.lanyard-dragging {
  cursor: grabbing;
}

.detail-tail-promo {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 60px);
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
}

.detail-tail-promo-video {
  width: min(980px, 92vw);
  max-height: 82vh;
  border: 1px solid rgba(241, 201, 137, 0.7);
  background: #000;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.48);
}

.detail-tail-promo-close {
  position: fixed;
  top: 24px;
  right: 28px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(0, 0, 0, 0.45);
}

.detail-tail-topbar {
  top: var(--tail-top-y);
  right: var(--tail-edge-x);
  left: var(--tail-edge-x);
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(250px, 1fr);
  align-items: start;
  min-height: 54px;
  color: #fff;
}

.detail-tail-menu a,
.detail-tail-menu button,
.detail-tail-back,
.detail-tail-brand,
.detail-tail-cta,
.detail-tail-card {
  text-decoration: none;
}

.detail-tail-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(12px, 0.95vw, 17px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.detail-tail-back span {
  color: #fff;
  font-size: 1.18em;
  line-height: 0.75;
}

.detail-tail-brand {
  justify-self: center;
  display: grid;
  justify-items: center;
  width: clamp(86px, 7.5vw, 140px);
  opacity: 0.96;
}

.detail-tail-brand img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.16));
}

.detail-tail-menu {
  justify-self: end;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(22px, 2.1vw, 38px);
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(12px, 0.95vw, 17px);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-tail-menu a,
.detail-tail-menu button {
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.detail-tail-cart-mini {
  position: relative;
  width: 34px;
  height: 28px;
}

.detail-tail-cart-mini span,
.tail-icon-cart {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 22px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
}

.detail-tail-cart-mini span::before,
.tail-icon-cart::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 1px;
  width: 19px;
  height: 12px;
  border: 2px solid currentColor;
  border-top: 0;
}

.detail-tail-cart-mini span::after,
.tail-icon-cart::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -20px 0 0 currentColor;
}

.detail-tail-cart-mini em {
  position: absolute;
  top: -18px;
  right: -13px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #0b0805;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  border-radius: 999px;
  background: #d7ad72;
}

.detail-tail-copy {
  top: clamp(98px, 13vh, 132px);
  left: var(--tail-edge-x);
  display: grid;
  justify-items: start;
  gap: clamp(11px, 1.1vw, 18px);
  width: clamp(360px, 29vw, 520px);
  max-width: min(520px, 34vw);
}

.detail-tail-copy h2 {
  margin: 0;
  color: #edc584;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(90px, 9.9vw, 176px);
  font-weight: 500;
  line-height: 0.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 34px rgba(215, 173, 114, 0.28);
}

.detail-tail-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.97);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.05vw, 39px);
  font-weight: 500;
  letter-spacing: 0.44em;
  line-height: 1;
  text-transform: uppercase;
}

.detail-tail-rule {
  position: relative;
  width: min(330px, 100%);
  height: 18px;
}

.detail-tail-rule::before,
.detail-tail-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 43%;
  height: 2px;
  background: rgba(255, 255, 255, 0.68);
}

.detail-tail-rule::before {
  left: 0;
}

.detail-tail-rule::after {
  right: 0;
}

.detail-tail-rule {
  background: radial-gradient(circle at center, var(--tail-gold-bright) 0 2px, transparent 3px);
}

.detail-tail-copy h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2vw, 36px);
  font-weight: 560;
  letter-spacing: 0.08em;
}

.detail-tail-copy .detail-tail-body {
  max-width: 430px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(13px, 1.05vw, 18px);
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: none;
}

.detail-tail-cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: clamp(4px, 0.65vw, 12px);
  padding: 13px 20px;
  min-width: clamp(164px, 12vw, 214px);
  min-height: 46px;
  color: var(--tail-gold-bright);
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--tail-gold);
  background: rgba(8, 6, 3, 0.28);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.detail-tail-cta span {
  font-size: 20px;
}

.detail-tail-cta:hover,
.detail-tail-cta:focus-visible,
.detail-tail-cart-button:hover,
.detail-tail-cart-button:focus-visible {
  color: #090704;
  background: var(--tail-gold);
  transform: translateY(-2px);
}

.detail-tail-cans {
  left: var(--tail-edge-x);
  bottom: clamp(116px, 15vh, 142px);
  display: block;
  width: clamp(360px, 32vw, 460px);
  height: clamp(220px, 30vh, 272px);
  overflow: visible;
  touch-action: pan-y;
  --tail-card-drag-x: 0px;
  --tail-card-drag-y: 0px;
  --tail-card-drag-rotate: 0deg;
  --tail-card-rotate-x: 0deg;
  --tail-card-rotate-y: 0deg;
}

.detail-tail-card-track {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 600px;
  transform-style: preserve-3d;
}

.detail-tail-card {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: clamp(330px, 30vw, 430px);
  aspect-ratio: 16 / 9;
  padding: 16px 18px;
  color: #fff;
  border: 1px solid rgba(241, 201, 137, 0.86);
  background: rgba(7, 5, 4, 0.42);
  box-shadow: 0 22px 38px rgba(0, 0, 0, 0.36);
  cursor: grab;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  transform-origin: 90% 90%;
  transition:
    transform 0.52s cubic-bezier(0.2, 0.9, 0.18, 1),
    opacity 0.3s ease,
    filter 0.2s ease;
  isolation: isolate;
  will-change: transform, opacity;
}

.detail-tail-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.detail-tail-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 36%, rgba(0, 0, 0, 0.68) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, transparent 62%);
}

.detail-tail-card-kicker {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--tail-gold-bright);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.detail-tail-card-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
}

.detail-tail-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: none;
}

.detail-tail-card-copy {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 16px;
  left: 18px;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.detail-tail-card-copy strong,
.detail-tail-card-copy em,
.detail-tail-card-copy small {
  display: block;
}

.detail-tail-card-copy strong {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 2.9vw, 45px);
  font-weight: 500;
  line-height: 0.94;
}

.detail-tail-card-copy em {
  color: var(--tail-gold-bright);
  font-size: clamp(12px, 1vw, 15px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.detail-tail-card-copy small {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 650;
  letter-spacing: 0.06em;
}

.detail-tail-card[data-offset="0"] {
  z-index: 6;
  opacity: 1;
  pointer-events: auto;
  transform:
    translate3d(var(--tail-card-drag-x), var(--tail-card-drag-y), 0)
    rotateX(var(--tail-card-rotate-x))
    rotateY(var(--tail-card-rotate-y))
    rotateZ(var(--tail-card-drag-rotate))
    scale(1);
}

.detail-tail-card[data-offset="1"] {
  z-index: 5;
  opacity: 0.86;
  transform: translate3d(20px, -12px, -8px) rotateZ(4deg) scale(0.94);
}

.detail-tail-card[data-offset="2"] {
  z-index: 4;
  opacity: 0.68;
  transform: translate3d(38px, -24px, -16px) rotateZ(8deg) scale(0.88);
}

.detail-tail-card[data-offset="3"] {
  z-index: 3;
  opacity: 0.46;
  transform: translate3d(54px, -34px, -24px) rotateZ(12deg) scale(0.82);
}

.detail-tail-card[data-offset="4"] {
  z-index: 2;
  opacity: 0.2;
  transform: translate3d(68px, -42px, -32px) rotateZ(16deg) scale(0.76);
}

.detail-tail-card[data-offset="5"] {
  z-index: 1;
  opacity: 0;
  transform: translate3d(82px, -48px, -40px) rotateZ(20deg) scale(0.7);
}

.detail-tail-cans.is-dragging .detail-tail-card[data-offset="0"] {
  cursor: grabbing;
  transition: none;
}

.detail-tail-card[data-offset="0"]:hover,
.detail-tail-card[data-offset="0"]:focus-visible {
  filter: drop-shadow(0 0 18px rgba(241, 201, 137, 0.26));
}

.detail-tail-card-nav {
  position: absolute;
  z-index: 8;
  top: 50%;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--tail-gold-bright);
  font-size: 29px;
  line-height: 1;
  border: 1px solid rgba(241, 201, 137, 0.72);
  background: rgba(7, 5, 4, 0.36);
  transform: translateY(-50%);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.detail-tail-card-prev {
  left: -18px;
}

.detail-tail-card-next {
  right: 28px;
}

.detail-tail-card-nav:hover,
.detail-tail-card-nav:focus-visible {
  color: #090704;
  background: var(--tail-gold-bright);
  transform: translateY(-50%) scale(1.04);
}

.detail-tail-story-badges {
  left: var(--tail-edge-x);
  bottom: var(--tail-bottom-y);
  display: grid;
  grid-template-columns: repeat(3, minmax(128px, 1fr));
  gap: clamp(20px, 2.3vw, 44px);
  width: min(700px, 48vw);
  margin: 0;
  padding: 0;
  color: var(--tail-gold-bright);
  list-style: none;
}

.detail-tail-story-badges li {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.detail-tail-story-badges li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: calc(clamp(20px, 2.3vw, 44px) * -0.5);
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.46);
}

.detail-tail-story-badges strong,
.detail-tail-story-badges em {
  display: block;
  line-height: 1.18;
}

.detail-tail-story-badges strong {
  color: var(--tail-gold-bright);
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.detail-tail-story-badges em {
  margin-top: 4px;
  color: #fff;
  font-size: clamp(10px, 0.78vw, 13px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detail-tail-buy {
  right: var(--tail-edge-x);
  bottom: clamp(56px, 8vh, 94px);
  display: grid;
  justify-items: start;
  width: clamp(282px, 20vw, 370px);
  gap: clamp(13px, 1.6vw, 26px);
  color: #fff;
}

.detail-tail-buy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(15px, 1.26vw, 22px);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: none;
}

.detail-tail-price {
  color: #fff;
  font-size: clamp(38px, 3.4vw, 58px);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: 0.02em;
}

.detail-tail-price span {
  display: inline-block;
  margin-right: 8px;
  font-size: 0.44em;
  transform: translateY(-0.22em);
}

.detail-tail-price small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.32em;
  font-weight: 500;
}

.detail-tail-cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 1.8vw, 28px);
  width: min(320px, 100%);
  min-height: 66px;
  padding: 16px 24px;
  color: var(--tail-gold-bright);
  font-size: clamp(18px, 1.45vw, 25px);
  font-weight: 650;
  letter-spacing: 0.08em;
  border: 1px solid var(--tail-gold);
  background: rgba(31, 19, 8, 0.48);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.detail-tail-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1vw, 18px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-tail-benefits li {
  display: grid;
  justify-items: center;
  gap: 9px;
  color: var(--tail-gold-bright);
  text-align: center;
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 650;
  letter-spacing: 0.05em;
}

.tail-icon {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 32px;
  color: currentColor;
}

.tail-icon-selected::before {
  content: "";
  position: absolute;
  inset: 2px 9px 4px 9px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 48% 48%;
  transform: rotate(-18deg);
}

.tail-icon-selected::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 17px;
  width: 2px;
  height: 22px;
  background: currentColor;
  transform: rotate(33deg);
}

.tail-icon-crafted::before {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 0 0 9px 9px;
}

.tail-icon-crafted::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 15px;
  width: 6px;
  height: 17px;
  border: 2px solid currentColor;
  border-top: 0;
  border-bottom: 0;
}

.tail-icon-inspired::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 19px;
  height: 19px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.tail-icon-inspired::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 3px;
  width: 29px;
  height: 15px;
  border-bottom: 2px solid currentColor;
  border-radius: 50%;
  transform: rotate(-22deg);
}

.tail-icon-quality::before {
  content: "";
  position: absolute;
  inset: 2px 7px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 44% 44%;
  transform: rotate(-18deg);
}

.tail-icon-quality::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 17px;
  width: 2px;
  height: 20px;
  background: currentColor;
  transform: rotate(35deg);
}

.tail-icon-delivery::before {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 9px;
  width: 26px;
  height: 13px;
  border: 2px solid currentColor;
}

.tail-icon-delivery::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -21px 0 0 currentColor;
}

.tail-icon-exchange::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
}

.tail-icon-exchange::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(34deg);
}

.spec-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spec-list li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  font-weight: 800;
}

.spec-list span {
  color: var(--accent);
}

.detail-art.takeoff.ship {
  top: -52%;
  left: 50%;
  height: 140vh;
  transform: translate3d(calc(-50% + var(--art-ship-x, 0px)), var(--art-ship-y, 0px), 0) rotate(var(--art-ship-rotate, 0deg)) scale(1.02);
}

.detail-art.takeoff.floor {
  right: 50%;
  bottom: -54%;
  height: 92vh;
  transform: translate3d(52%, var(--art-floor-y, 0px), 0) scale(var(--art-floor-scale, 1));
}

.detail-art.takeoff.astronaut {
  bottom: 8%;
  left: 50%;
  height: 32vh;
  transform: translate3d(-45%, calc(var(--art-character-y, 0px) + var(--detail-role-y, 0px)), 0) scale(var(--art-character-scale, 1)) rotate(var(--art-character-rotate, 0deg));
}

.detail-art.touchdown.planet {
  top: -20%;
  right: -4%;
  height: 100vh;
  transform: translate3d(0, var(--art-backdrop-y, 0px), 0) scale(var(--art-backdrop-scale, 1));
}

.detail-art.touchdown.floor {
  bottom: -18%;
  left: -11%;
  height: 82vh;
  transform: translate3d(0, var(--art-floor-y, 0px), 0) scale(var(--art-floor-scale, 1));
}

.detail-art.touchdown.astronaut {
  bottom: 2%;
  left: 49%;
  height: 42vh;
  transform: translate3d(-50%, calc(var(--art-character-y, 0px) + var(--detail-role-y, 0px)), 0) scale(var(--art-character-scale, 1)) rotate(var(--art-character-rotate, 0deg));
}

.detail-art.highpoint.planet {
  top: -52%;
  left: 20%;
  height: 112vh;
  transform: translate3d(0, var(--art-backdrop-y, 0px), 0) scale(var(--art-backdrop-scale, 1));
}

.detail-art.highpoint.spaceship {
  top: -15%;
  right: -2%;
  height: 96vh;
  transform: translate3d(var(--art-ship-x, 0px), var(--art-ship-y, 0px), 0) rotate(var(--art-ship-rotate, 0deg)) scale(1.02);
}

.detail-art.highpoint.cloud {
  top: 6%;
  left: -2%;
  height: 43vh;
  transform: translate3d(var(--art-cloud-x, 0px), var(--art-cloud-y, 0px), 0);
}

.detail-art.highpoint.cloud-right {
  right: -4%;
  left: auto;
  height: 34vh;
  animation-duration: 26s;
}

.detail-art.highpoint.floor {
  right: -13%;
  bottom: -16%;
  height: 86vh;
  transform: translate3d(0, var(--art-floor-y, 0px), 0) scale(var(--art-floor-scale, 1));
}

.detail-art.highpoint.astronaut {
  bottom: -3%;
  left: 50%;
  height: 43vh;
  transform: translate3d(-50%, calc(var(--art-character-y, 0px) + var(--detail-role-y, 0px)), 0) scale(var(--art-character-scale, 1)) rotate(var(--art-character-rotate, 0deg));
}

.detail-page[data-phase="cards"] .detail-art.takeoff.astronaut,
.detail-page[data-phase="cards"] .detail-art.touchdown.astronaut,
.detail-page[data-phase="cards"] .detail-art.highpoint.astronaut {
  transform: translate3d(-50%, calc(-4vh + var(--art-character-y, 0px)), 0) scale(1.12) rotate(var(--art-character-rotate, 0deg));
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes spin {
  to {
    rotate: -360deg;
  }
}

@keyframes cloudDrift {
  0% {
    transform: translate3d(-7%, -1%, 0) scale(1.02);
  }

  50% {
    transform: translate3d(2%, 1.4%, 0) scale(1.05);
  }

  100% {
    transform: translate3d(8%, -0.4%, 0) scale(1.03);
  }
}

@keyframes starDust {
  0% {
    opacity: 0.72;
    filter: brightness(0.96);
  }

  100% {
    opacity: 0.92;
    filter: brightness(1.12);
  }
}

@keyframes detailShipFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -1.8%;
  }
}

@keyframes detailCharacterFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -2.4%;
  }
}

@keyframes detailCloudFloat {
  0% {
    translate: -2% 0;
  }

  100% {
    translate: 4% -2%;
  }
}

@keyframes floatBox {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 3%;
  }
}

@keyframes loaderCloud {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1.02);
  }

  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.06);
  }
}

@keyframes loaderShine {
  0%,
  35% {
    transform: translateX(-130%);
  }

  80%,
  100% {
    transform: translateX(130%);
  }
}

@keyframes landingBreath {
  0%,
  100% {
    transform: scale(0.98);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes landingOrbDrift {
  0% {
    translate: -1.8% -1.2%;
  }

  50% {
    translate: 2.4% 1.8%;
  }

  100% {
    translate: -0.8% 2.6%;
  }
}

@keyframes landingGrain {
  0%,
  100% {
    background-position: 0 0, 0 0, 0 0, center;
  }

  50% {
    background-position: 16px -12px, -10px 14px, 8px 8px, center;
  }
}

@keyframes homeEqualizer {
  0%,
  100% {
    transform: scaleY(0.45);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes secondStarDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-86px, -132px, 0);
  }
}

@keyframes secondAstronautBreath {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }

  50% {
    transform: translateX(-50%) translateY(-0.8%) scale(1.012);
  }
}

@keyframes secondPlanetFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -2.2%, 0);
  }
}

@keyframes secondPlanetSpin {
  100% {
    rotate: 360deg;
  }
}

@media (hover: none), (pointer: coarse) {
  body[data-page="landing"] {
    scroll-snap-type: none;
  }

  .landing-stage.has-custom-cursor,
  .landing-stage.has-custom-cursor * {
    cursor: auto !important;
  }

  .landing-cursor {
    display: none;
  }
}

@media (max-width: 900px) {
  .home-brand-logo {
    top: 22px;
    left: 20px;
    width: 116px;
  }

  .home-menu,
  .home-time {
    display: none;
  }

  .home-discover {
    top: 28px;
    right: 18px;
    min-height: 54px;
    padding-right: 14px;
  }

  .home-contact {
    bottom: 22px;
    left: 18px;
    min-width: 142px;
    min-height: 54px;
    padding: 0 18px;
    font-size: 15px;
  }

  .home-headline {
    bottom: 94px;
    min-height: 182px;
    width: calc(100vw - 38px);
  }

  .home-headline h1 {
    font-size: clamp(28px, 8.4vw, 44px);
  }

  .home-headline p {
    font-size: clamp(25px, 7.2vw, 38px);
  }

  .corner-tl,
  .corner-tr {
    top: 44px;
  }

  .second-astronaut-wrap {
    bottom: -1vh;
    height: min(102vh, 920px);
  }

  .second-stage {
    --second-planet-y: 75.4%;
    --second-planet-size: 23%;
    --second-left-hand-y: 66.3%;
    --second-left-hand-size: 28.4%;
    --second-right-hand-y: 66.6%;
    --second-right-hand-size: 28.6%;
  }

  .second-planet-link {
    top: var(--second-planet-y);
    width: var(--second-planet-size);
  }

  .second-helmet-reflection {
    top: 33.3%;
    width: 13.5%;
  }

  .second-stars {
    opacity: 0.26;
  }

  .second-editorial-copy::before,
  .second-editorial-copy::after {
    top: 118px;
    bottom: 102px;
  }

  .second-editorial-copy::before {
    left: 24px;
  }

  .second-editorial-copy::after {
    right: 24px;
  }

  .second-editorial-title {
    top: -18px;
    width: 118vw;
    font-size: clamp(64px, 16vw, 138px);
    line-height: 0.78;
  }

  .second-editorial-note-left {
    top: 134px;
    left: 48px;
    max-width: 190px;
    font-size: 14px;
  }

  .second-editorial-note-right {
    top: 112px;
    right: 42px;
    max-width: 220px;
    font-size: 16px;
  }

  .second-editorial-year {
    bottom: 54px;
    font-size: clamp(70px, 18vw, 140px);
  }

  .second-editorial-year-left {
    left: 24px;
  }

  .second-editorial-year-right {
    right: 24px;
  }

  .products-stage {
    --planet-anchor-y: clamp(106px, 16vh, 142px);
  }

  .site-header {
    top: 22px;
    right: 24px;
    left: 24px;
    align-items: center;
  }

  .brand {
    grid-column: 1 / 3;
    justify-self: start;
    width: 128px;
    gap: 0;
  }

  .brand-mark {
    width: 38px;
  }

  .tagline,
  .back-home {
    display: none !important;
  }

  .about-toggle {
    grid-column: 3;
  }

  .products-planet {
    width: 980px;
  }

  .landing-title {
    font-size: clamp(78px, 25vw, 150px);
  }

  .landing-subtitle {
    width: min(330px, 80vw);
  }

  .landing-panel {
    top: auto;
    right: 18px;
    bottom: 24px;
    left: 18px;
    width: auto;
    transform: none;
  }

  .landing-panel-grip {
    min-width: 100%;
    justify-content: space-between;
    cursor: pointer;
  }

  .landing-panel-body {
    max-height: min(420px, calc(100vh - 190px));
    transform-origin: bottom center;
  }

  .landing-entry-pill {
    top: 70.5%;
    min-width: 162px;
    min-height: 26px;
  }

  .product-box {
    top: 50%;
    width: min(150px, 38vw);
  }

  .marquee {
    top: 40%;
  }

  .marquee span {
    font-size: 38vw;
  }

  .side-cue {
    display: none;
  }

  .product-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    bottom: 72px;
    width: calc(100vw - 20px);
    min-height: 106px;
    padding: 10px 14px 8px;
  }

  .product-nav a,
  .product-nav button {
    min-height: 38px;
    font-size: 11px;
  }

  .sound-toggle {
    right: 24px;
    bottom: 24px;
  }

  .sound-toggle svg {
    width: 26px;
  }

  .designer-toggle {
    right: 24px;
    bottom: 66px;
  }

  body.console-open .designer-toggle {
    transform: translateY(-52vh);
  }

  .designer-console {
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    max-height: 54vh;
    padding: 14px;
    transform: translateY(18px) scale(0.98);
  }

  body.console-open .designer-console {
    transform: translateY(0) scale(1);
  }

  .designer-head {
    align-items: flex-start;
  }

  .designer-head h2 {
    font-size: 22px;
  }

  .designer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .designer-field {
    grid-template-columns: 78px minmax(0, 1fr) 42px;
  }

  .designer-field.text,
  .designer-field.color {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .about-popup {
    top: 82px;
    right: 18px;
    width: calc(100vw - 36px);
  }

  .panel-inner {
    padding: 72px 36px 38px;
  }

  .detail-page {
    --detail-tail-start: 3600px;
    min-height: calc(var(--detail-tail-start) + 100vh);
  }

  .detail-title {
    top: 43%;
    font-size: 18vw;
  }

  .detail-product {
    width: min(150px, 38vw);
  }

  .detail-planet {
    bottom: -38vh;
    width: 980px;
  }

  .detail-metrics {
    top: 41%;
    right: 7vw;
    left: 7vw;
    font-size: 18px;
  }

  .detail-headline {
    top: 39%;
    font-size: clamp(32px, 10vw, 46px);
  }

  .detail-cards {
    top: 1620px;
    right: 18px;
    left: 18px;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .detail-card.spec-card {
    margin-top: 0;
  }

  .detail-card .panel-title {
    width: 68%;
  }

  .detail-card .panel-inner {
    padding: 80px 36px 42px;
  }

  .detail-tail {
    padding: 0;
  }

  .detail-tail-shop {
    --tail-edge-x: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 22px 16px 26px;
    overflow-y: auto;
  }

  .detail-tail-topbar,
  .detail-tail-copy,
  .detail-tail-lanyard-root,
  .detail-tail-cans,
  .detail-tail-story-badges,
  .detail-tail-buy {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: none;
  }

  .detail-tail-topbar {
    grid-row: 1;
    grid-template-columns: auto minmax(52px, 1fr) auto;
    min-height: 46px;
    align-items: start;
  }

  .detail-tail-back {
    gap: 7px;
    font-size: 10px;
    white-space: nowrap;
  }

  .detail-tail-brand {
    width: 72px;
  }

  .detail-tail-menu {
    justify-self: end;
    gap: 12px;
    font-size: 10px;
  }

  .detail-tail-cart-mini {
    width: 26px;
    height: 22px;
  }

  .detail-tail-cart-mini span {
    width: 22px;
    height: 17px;
  }

  .detail-tail-cart-mini em {
    top: -14px;
    right: -10px;
    width: 18px;
    height: 18px;
    font-size: 9px;
  }

  .detail-tail-copy {
    grid-row: 2;
    gap: 9px;
  }

  .detail-tail-copy h2 {
    font-size: clamp(64px, 21vw, 108px);
  }

  .detail-tail-subtitle {
    font-size: clamp(14px, 4vw, 22px);
    letter-spacing: 0.25em;
  }

  .detail-tail-rule {
    width: min(310px, 92vw);
  }

  .detail-tail-copy h3 {
    font-size: clamp(20px, 6vw, 31px);
  }

  .detail-tail-lanyard-root {
    grid-row: 3;
    justify-self: center;
    width: min(210px, 72vw);
    height: 300px;
    transform: translateY(-18px) scale(0.96);
  }

  .detail-tail.is-ended .detail-tail-lanyard-root {
    transform: translateY(0) scale(1);
  }

  .detail-tail-buy {
    grid-row: 4;
    align-self: start;
    gap: 14px;
  }

  .detail-tail-cans {
    grid-row: 5;
    display: flex;
    width: 100%;
    height: auto;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 10px;
  }

  .detail-tail-card-track {
    display: flex;
    gap: 12px;
    width: max-content;
    height: auto;
  }

  .detail-tail-card {
    position: relative;
    bottom: auto;
    left: auto;
    flex: 0 0 136px;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(100px, 1fr) auto;
    gap: 8px;
    width: 136px;
    height: 184px;
    padding: 10px;
    opacity: 1;
    pointer-events: auto;
    transform: none !important;
  }

  .detail-tail-card-nav {
    display: none;
  }

  .detail-tail-card-kicker {
    grid-column: 1;
    font-size: 9px;
  }

  .detail-tail-card-media img {
    height: 112px;
  }

  .detail-tail-card-copy {
    gap: 4px;
  }

  .detail-tail-card-copy strong {
    font-size: 18px;
  }

  .detail-tail-card-copy em,
  .detail-tail-card-copy small {
    font-size: 9px;
  }

  .detail-tail-story-badges {
    grid-row: 6;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .detail-tail-story-badges li {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }

  .detail-tail-story-badges li:not(:last-child)::after {
    top: 7px;
    right: -5px;
    height: 58px;
  }

  .detail-tail-story-badges strong {
    font-size: 11px;
  }

  .detail-tail-story-badges em {
    font-size: 9px;
  }

  .detail-tail-cart-button {
    padding: 16px 20px;
    min-height: 62px;
  }

  .detail-tail-benefits {
    gap: 10px;
  }

  .detail-art.takeoff.ship {
    top: -18%;
    height: 94vh;
  }

  .detail-art.takeoff.floor {
    bottom: -15%;
    height: 66vh;
  }

  .detail-art.takeoff.astronaut {
    bottom: 8%;
    height: 27vh;
  }

  .detail-art.touchdown.planet {
    top: -16%;
    right: -64%;
    height: 76vh;
  }

  .detail-art.touchdown.floor {
    bottom: 0;
    left: -60%;
    height: 58vh;
  }

  .detail-art.touchdown.astronaut {
    bottom: 0;
    height: 42vh;
  }

  .detail-art.highpoint.planet {
    top: -25%;
    left: -35%;
    height: 78vh;
  }

  .detail-art.highpoint.spaceship {
    top: -4%;
    right: -48%;
    height: 65vh;
  }

  .detail-art.highpoint.floor {
    right: -72%;
    bottom: -4%;
    height: 60vh;
  }

  .detail-art.highpoint.astronaut {
    height: 42vh;
  }
}

@media (max-width: 460px) {
  .products-stage {
    --planet-anchor-y: clamp(108px, 15vh, 128px);
  }

  .detail-tail-shop {
    padding: 22px 16px 24px;
  }

  .detail-tail-copy h2 {
    font-size: clamp(50px, 20vw, 80px);
  }

  .detail-tail-buy {
    width: 100%;
  }

  .detail-tail-cans {
    gap: 10px;
  }

  .detail-tail-card-track {
    gap: 10px;
  }

  .detail-tail-card {
    flex-basis: 124px;
    width: 124px;
    height: 176px;
  }

  .detail-tail-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-tail-benefits li {
    font-size: 11px;
  }

  .brand {
    width: 116px;
  }

  .about-toggle,
  .sound-toggle,
  .product-nav a,
  .product-nav button {
    font-size: 10px;
  }

  .product-box {
    top: 48%;
  }

  .landing-stage::before {
    background-size: 18vw 18vw;
  }

  .landing-hero {
    top: 43%;
  }

  .landing-entry-pill {
    top: 69%;
    min-width: 156px;
    font-size: 10px;
  }

  .landing-title {
    font-size: clamp(74px, 28vw, 122px);
  }

  .landing-kicker,
  .landing-subtitle {
    font-size: 10px;
  }

  .landing-panel {
    right: 12px;
    bottom: 14px;
    left: 12px;
  }

  .landing-panel-body {
    padding: 15px;
  }

  .landing-panel-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-panel-actions a,
  .landing-panel-actions button {
    display: grid;
    place-items: center;
    width: 100%;
  }

  .second-astronaut-wrap {
    bottom: 0;
    height: 102vh;
  }

  .second-stage {
    --second-planet-y: 75.6%;
    --second-planet-size: 20%;
    --second-left-hand-y: 66.5%;
    --second-left-hand-size: 29%;
    --second-right-hand-y: 66.8%;
    --second-right-hand-size: 29.2%;
  }

  .second-planet-link {
    top: var(--second-planet-y);
    width: var(--second-planet-size);
  }

  .second-helmet-reflection {
    top: 33.4%;
    width: 12%;
  }

  .second-editorial-copy::before,
  .second-editorial-copy::after {
    top: 94px;
    bottom: 98px;
    opacity: 0.62;
  }

  .second-editorial-copy::before {
    left: 16px;
  }

  .second-editorial-copy::after {
    right: 16px;
  }

  .second-editorial-title {
    top: -8px;
    width: 136vw;
    font-size: clamp(54px, 21vw, 92px);
    line-height: 0.8;
  }

  .second-editorial-note {
    max-width: 152px;
    font-size: 12px;
    line-height: 1.42;
  }

  .second-editorial-note-left {
    top: 114px;
    left: 34px;
  }

  .second-editorial-note-right {
    top: 82px;
    right: 30px;
    max-width: 168px;
    font-size: 13px;
  }

  .second-editorial-year {
    bottom: 62px;
    font-size: clamp(58px, 24vw, 94px);
    opacity: 0.66;
  }

  .second-editorial-year-left {
    left: 14px;
    bottom: 136px;
  }

  .second-editorial-year-right {
    right: 14px;
  }

  .second-editorial-prompt {
    bottom: 44px;
    font-size: 10px;
  }

  .products-planet {
    width: 920px;
  }

  .detail-planet {
    bottom: -34vh;
    width: 880px;
  }

  .product-nav {
    bottom: 72px;
  }

  .detail-cards {
    top: 1520px;
  }

  .spec-list li {
    grid-template-columns: 0.85fr 1fr;
    gap: 18px;
  }
}

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

  .second-stars,
  .second-astronaut-wrap,
  .second-planet-orbit,
  .second-planet-orbit img,
  .second-helmet-reflection img,
  .detail-tail::before,
  .detail-tail-orbit {
    animation: none !important;
  }
}
  font-family: "Zen Tokyo Zoo", Aeonik, Manrope, system-ui, sans-serif;
  font-family: "Zen Tokyo Zoo", Aeonik, Manrope, system-ui, sans-serif;