:root {
  --crss-cyan: #32fff3;
  --crss-cyan-soft: rgba(50, 255, 243, 0.42);
  --crss-magenta: #ff2b6d;
  --crss-ink: #010304;
  --crss-edge: rgba(210, 255, 251, 0.18);
}

html,
body.crss-body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  overflow: hidden;
  background: var(--crss-ink);
}

body.crss-body {
  min-height: 100vh;
  min-height: 100svh;
  color: #fff;
  cursor: crosshair;
  overscroll-behavior: none;
}

body.crss-body::before {
  z-index: 90;
  background:
    radial-gradient(circle at 50% 43%, transparent 12%, rgba(0, 8, 9, 0.2) 42%, rgba(0, 0, 0, 0.92) 100%),
    radial-gradient(circle at 50% 43%, rgba(50, 255, 243, 0.05), transparent 34%);
  animation: crss-flicker 8s infinite steps(1);
}

body.crss-body::after {
  z-index: 91;
  opacity: 0.22;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.06) 0,
    rgba(255, 255, 255, 0.06) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: screen;
  animation: scanline 0.2s infinite steps(1);
}

@keyframes crss-flicker {
  0%, 9%, 11%, 31%, 33%, 70%, 72%, 100% { opacity: 0.94; }
  10%, 32%, 71% { opacity: 0.82; }
}

.crss-shell,
.crss-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.crss-shell {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 43%, rgba(0, 84, 83, 0.15) 0%, rgba(0, 15, 17, 0.06) 30%, transparent 60%),
    linear-gradient(145deg, #020607 0%, #000 56%, #020305 100%);
}

.crss-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.crss-header {
  position: fixed;
  inset: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) auto max(22px, env(safe-area-inset-left));
  z-index: 30;
  width: auto;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.crss-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.76rem;
  font-weight: 560;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  pointer-events: auto;
}

.crss-brand img {
  display: block;
  width: clamp(138px, 15vw, 198px);
  height: auto;
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.24));
  transition: filter 180ms ease, transform 180ms ease;
}

.crss-brand:hover img,
.crss-brand:focus-visible img {
  filter: drop-shadow(-2px 0 6px var(--crss-magenta)) drop-shadow(2px 0 8px var(--crss-cyan));
  transform: translateX(2px);
}

.crss-brand:focus-visible {
  outline: 1px solid var(--crss-cyan);
  outline-offset: 7px;
}

.crss-header-meta {
  display: grid;
  justify-items: end;
  color: rgba(201, 255, 251, 0.48);
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-align: right;
}

.crss-grid {
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: -37%;
  z-index: 0;
  height: 72%;
  opacity: 0.17;
  transform: perspective(520px) rotateX(66deg);
  transform-origin: center top;
  background-image:
    linear-gradient(rgba(50, 255, 243, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50, 255, 243, 0.22) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 63%, transparent 86%);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 63%, transparent 86%);
}

.crss-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.crss-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  filter: saturate(1.08) contrast(1.04);
}

.crss-fallback {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 1;
  width: min(46vw, 320px);
  height: min(62vh, 520px);
  transform: translate(-50%, -50%) rotate(-2deg);
  filter: drop-shadow(0 0 22px rgba(50, 255, 243, 0.32));
  animation: crss-fallback-float 5s ease-in-out infinite;
  transition: opacity 500ms ease;
}

.webgl-ready .crss-fallback {
  opacity: 0;
}

.crss-fallback__vertical,
.crss-fallback__horizontal,
.crss-fallback__core {
  position: absolute;
  display: block;
  border: 2px solid rgba(184, 255, 249, 0.56);
  background: rgba(4, 22, 23, 0.86);
  box-shadow:
    inset 0 0 22px rgba(50, 255, 243, 0.26),
    0 0 14px rgba(50, 255, 243, 0.34);
}

.crss-fallback__vertical {
  top: 0;
  bottom: 0;
  left: 39%;
  width: 22%;
}

.crss-fallback__horizontal {
  top: 27%;
  left: 0;
  width: 100%;
  height: 22%;
}

.crss-fallback__core {
  top: 30%;
  left: 42%;
  width: 16%;
  height: 16%;
  border-color: #eaffff;
  background: var(--crss-cyan);
  box-shadow: 0 0 25px var(--crss-cyan), 0 0 70px rgba(50, 255, 243, 0.5);
}

@keyframes crss-fallback-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
  50% { transform: translate(-50%, calc(-50% - 10px)) rotate(2deg); }
}

.crss-reticle {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 3;
  width: min(64vw, 690px);
  aspect-ratio: 1;
  border: 1px solid rgba(50, 255, 243, 0.055);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.crss-reticle::before,
.crss-reticle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(50, 255, 243, 0.08);
  transform: translate(-50%, -50%);
}

.crss-reticle::before {
  width: calc(100% + 12vw);
  height: 1px;
}

.crss-reticle::after {
  width: 1px;
  height: calc(100% + 12vw);
}

.crss-reticle span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(50, 255, 243, 0.34);
  border-style: solid;
}

.crss-reticle span:nth-child(1) { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.crss-reticle span:nth-child(2) { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.crss-reticle span:nth-child(3) { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.crss-reticle span:nth-child(4) { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }

.crss-copy {
  position: absolute;
  left: 50%;
  bottom: clamp(44px, 7.5vh, 92px);
  z-index: 12;
  width: min(94vw, 1180px);
  padding: 0 24px;
  background: transparent;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.crss-eyebrow {
  margin: 0 0 0.35rem;
  color: rgba(213, 255, 252, 0.58);
  font-size: clamp(0.66rem, 1vw, 0.82rem);
  font-weight: 520;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.crss-title {
  position: relative;
  display: inline-block;
  margin: 0;
  color: #f4fffe;
  font-size: clamp(3.4rem, 10vw, 9.2rem);
  font-variation-settings: "wght" 640, "ELGR" 1, "ELSH" 4;
  font-weight: 640;
  line-height: 0.8;
  letter-spacing: 0.105em;
  text-indent: 0.105em;
  white-space: nowrap;
  text-shadow:
    0 0 2px #fff,
    0 0 10px rgba(50, 255, 243, 0.92),
    0 0 32px rgba(50, 255, 243, 0.3);
  animation: crss-title-breathe 4.6s infinite steps(1);
}

.crss-title::before,
.crss-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  color: #fff;
  pointer-events: none;
}

.crss-title::before {
  left: 3px;
  color: var(--crss-cyan);
  text-shadow: -2px 0 var(--crss-cyan);
  clip-path: inset(12% 0 56% 0);
}

.crss-title::after {
  left: -3px;
  color: var(--crss-magenta);
  text-shadow: 2px 0 var(--crss-magenta);
  clip-path: inset(62% 0 10% 0);
}

.is-glitching .crss-title::before {
  opacity: 0.78;
  animation: crss-title-slice-a 120ms steps(2, end) 1;
}

.is-glitching .crss-title::after {
  opacity: 0.68;
  animation: crss-title-slice-b 120ms steps(2, end) 1;
}

@keyframes crss-title-breathe {
  0%, 16%, 18%, 48%, 50%, 82%, 84%, 100% { opacity: 1; }
  17%, 49%, 83% { opacity: 0.88; }
}

@keyframes crss-title-slice-a {
  0% { transform: translate(0, 0); clip-path: inset(14% 0 62% 0); }
  35% { transform: translate(-9px, 1px); clip-path: inset(66% 0 8% 0); }
  70% { transform: translate(6px, -1px); clip-path: inset(38% 0 37% 0); }
  100% { transform: translate(0, 0); clip-path: inset(8% 0 76% 0); }
}

@keyframes crss-title-slice-b {
  0% { transform: translate(0, 0); clip-path: inset(68% 0 8% 0); }
  40% { transform: translate(8px, -1px); clip-path: inset(20% 0 55% 0); }
  75% { transform: translate(-5px, 1px); clip-path: inset(52% 0 22% 0); }
  100% { transform: translate(0, 0); clip-path: inset(78% 0 4% 0); }
}

.crss-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1.7vw, 22px);
  margin: 1rem 0 0;
  color: rgba(211, 255, 252, 0.5);
  font-size: clamp(0.66rem, 1.15vw, 0.88rem);
  letter-spacing: 0.32em;
}

.crss-subtitle i {
  display: block;
  width: clamp(18px, 3vw, 42px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crss-cyan), transparent);
  box-shadow: 0 0 7px var(--crss-cyan);
}

.crss-readout {
  position: absolute;
  z-index: 16;
  bottom: max(18px, env(safe-area-inset-bottom));
  color: rgba(184, 255, 250, 0.42);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.crss-readout--left {
  left: max(24px, env(safe-area-inset-left));
  display: grid;
}

.crss-readout--right {
  right: max(24px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 8px;
}

.crss-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--crss-cyan);
  box-shadow: 0 0 8px var(--crss-cyan);
  animation: crss-status-pulse 1.8s infinite steps(1);
}

@keyframes crss-status-pulse {
  0%, 72%, 100% { opacity: 1; }
  73%, 82% { opacity: 0.15; }
}

.crss-frame {
  position: fixed;
  inset: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  z-index: 20;
  border: 1px solid rgba(149, 255, 247, 0.09);
  pointer-events: none;
}

.crss-frame > span {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: rgba(50, 255, 243, 0.42);
  border-style: solid;
}

.crss-frame__tl { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.crss-frame__tr { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.crss-frame__bl { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.crss-frame__br { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }

.crss-noscript {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 50;
  padding: 8px 12px;
  border: 1px solid var(--crss-cyan);
  background: #000;
  color: var(--crss-cyan);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  transform: translate(-50%, -50%);
}

@media (max-width: 720px) {
  .crss-header {
    inset-inline: max(17px, env(safe-area-inset-left));
  }

  .crss-brand {
    gap: 9px;
    font-size: 0.62rem;
  }

  .crss-brand img {
    width: 126px;
  }

  .crss-header-meta span:first-child,
  .crss-readout--left {
    display: none;
  }

  .crss-header-meta {
    font-size: 0.58rem;
  }

  .crss-reticle {
    top: 43%;
    width: 86vw;
  }

  .crss-copy {
    bottom: max(58px, calc(env(safe-area-inset-bottom) + 42px));
    width: 100%;
    padding: 0 10px;
  }

  .crss-title {
    font-size: clamp(3rem, 16.6vw, 5.6rem);
    letter-spacing: 0.055em;
    text-indent: 0.055em;
  }

  .crss-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.25em;
  }

  .crss-subtitle {
    margin-top: 0.75rem;
    font-size: 0.58rem;
    letter-spacing: 0.22em;
  }

  .crss-readout--right {
    right: 20px;
    font-size: 0.56rem;
  }

  .crss-frame {
    inset: max(9px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .crss-header {
    top: 12px;
  }

  .crss-brand img {
    width: 116px;
  }

  .crss-copy {
    bottom: 27px;
  }

  .crss-eyebrow,
  .crss-subtitle,
  .crss-readout {
    display: none;
  }

  .crss-title {
    font-size: clamp(2.8rem, 11.5vh, 5rem);
  }
}

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

  .crss-fallback {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}