:root {
  --void: #05060a;
  --absolute: #000000;
  --graphite: #15132d;
  --graphite-2: #1e2353;
  --panel: #090d18;
  --panel-raised: #11182a;

  --ice: #e0f0fa;
  --frost: #a0d8f6;
  --slate: #93a8e1;
  --slate-deep: #465a94;
  --cyan: #53b8e0;
  --cyan-hot: #6de5f1;
  --blue: #6197dd;
  --ultraviolet: #22368f;
  --magenta: #ae57b8;
  --coral: #962d61;

  --alert: #ff345f;
  --pulse-red: #e33152;
  --pulse-hot: #ff2d55;
  --pulse-deep: #670a22;
  --ability-red: #f02d50;

  --text: #e0f0fa;
  --muted: #9baacb;
  --muted-2: #65749a;
  --line: rgba(160, 216, 246, 0.16);
  --line-strong: rgba(160, 216, 246, 0.34);
  --line-red: rgba(240, 45, 80, 0.52);
  --header-height: 4.25rem;
  --page-pad: clamp(1rem, 4vw, 4.75rem);
  --content-width: 92.5rem;
  --font-display: "Oxanium", "Arial Narrow", sans-serif;
  --font-interface: "Rajdhani", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cut: cubic-bezier(0.77, 0, 0.18, 1);
  --motion-fast: 0.32s;
  --motion-medium: 0.82s;
  --motion-slow: 7.2s;
  --glitch-offset: 0.042em;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--absolute);
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  background:
    radial-gradient(circle at 10% 5%, rgba(240, 45, 80, 0.24), transparent 31rem),
    radial-gradient(circle at 58% 18%, color-mix(in srgb, var(--pulse-deep) 30%, transparent), transparent 37rem),
    radial-gradient(circle at 91% 9%, rgba(83, 184, 224, 0.15), transparent 27rem),
    radial-gradient(circle at 72% 61%, color-mix(in srgb, var(--ultraviolet) 18%, transparent), transparent 38rem),
    linear-gradient(132deg, var(--absolute), var(--void) 42%, var(--graphite) 79%, var(--absolute));
  color: var(--text);
  font-family: var(--font-interface);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-x: none;
  overflow-x: clip;
}

body::before {
  animation: scanline-roll 11s linear infinite;
  background:
    repeating-linear-gradient(0deg, rgba(224, 240, 250, 0.024) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(240, 45, 80, 0.035), transparent 28%, transparent 78%, rgba(83, 184, 224, 0.025));
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 60;
}

body::after {
  animation: vignette-breathe 8s ease-in-out infinite;
  background:
    linear-gradient(90deg, rgba(103, 10, 34, 0.22), transparent 12%, transparent 88%, rgba(34, 54, 143, 0.14)),
    radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.33));
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 59;
}

::selection {
  background: var(--ability-red);
  color: var(--ice);
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  font: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--alert);
  outline-offset: 4px;
}

h1,
h2,
h3,
h4,
p {
  overflow-wrap: anywhere;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.contents {
  display: contents;
}

.skip-link {
  background: var(--ability-red);
  color: var(--ice);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  left: 1rem;
  padding: 0.8rem 1rem;
  position: fixed;
  top: -5rem;
  z-index: 1000;
}

.skip-link:focus {
  top: 1rem;
}

.boot-gate {
  align-content: center;
  animation: boot-gate-exit 1.55s var(--ease-cut) both;
  background:
    linear-gradient(90deg, rgba(103, 10, 34, 0.34), transparent 36%, rgba(34, 54, 143, 0.2)),
    var(--absolute);
  display: grid;
  gap: 0.85rem;
  inset: 0;
  justify-items: center;
  pointer-events: none;
  position: fixed;
  z-index: 999;
}

.boot-gate::before {
  animation: boot-scan 0.72s steps(7) both;
  background: linear-gradient(90deg, transparent, rgba(240, 45, 80, 0.62), var(--ice), rgba(83, 184, 224, 0.54), transparent);
  box-shadow: 0 0 2rem rgba(240, 45, 80, 0.35);
  content: "";
  height: 1px;
  inset: 50% 0 auto;
  position: absolute;
  transform-origin: left;
}

.boot-gate__mark {
  animation: boot-mark-lock 0.88s steps(6) both;
  color: var(--ice);
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 10vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.8;
  text-shadow: var(--glitch-offset) 0 var(--ability-red), calc(var(--glitch-offset) * -1) 0 var(--cyan);
}

.boot-gate__track {
  background: rgba(224, 240, 250, 0.08);
  height: 2px;
  overflow: hidden;
  width: min(17rem, 54vw);
}

.boot-gate__track i {
  animation: boot-progress 0.9s 0.08s var(--ease-cut) both;
  background: linear-gradient(90deg, var(--ability-red) 0 58%, var(--ice) 58% 70%, var(--cyan) 70% 86%, var(--magenta));
  box-shadow: 0 0 1rem rgba(240, 45, 80, 0.5);
  display: block;
  height: 100%;
  transform-origin: left;
}

.boot-gate__copy {
  animation: boot-copy-lock 0.78s 0.16s steps(5) both;
  color: var(--frost);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gui {
  display: block;
  pointer-events: none;
  user-select: none;
}

.icon {
  height: 1rem;
  fill: none;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5;
  width: 1rem;
}

.micro-label {
  color: var(--ability-red);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  margin: 0 0 0.9rem;
  text-transform: uppercase;
}

.site-header {
  align-items: center;
  backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, 0.82);
  border-bottom: 1px solid rgba(240, 45, 80, 0.3);
  display: grid;
  grid-template-areas: "brand nav state";
  grid-template-columns: 1fr auto 1fr;
  height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  inset: 0 0 auto;
  padding: env(safe-area-inset-top, 0px) max(var(--page-pad), env(safe-area-inset-right, 0px)) 0 max(var(--page-pad), env(safe-area-inset-left, 0px));
  position: fixed;
  z-index: 80;
}

.site-header::before {
  animation: spectrum-flow 8s linear infinite;
  background: linear-gradient(
    90deg,
    var(--ability-red) 0 38%,
    var(--pulse-hot) 38% 48%,
    var(--ice) 48% 57%,
    var(--cyan) 57% 70%,
    var(--blue) 70% 80%,
    var(--slate) 80% 89%,
    var(--magenta) 89% 96%,
    transparent 96%
  );
  content: "";
  background-size: 180% 100%;
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.site-header::after {
  background: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 6px);
  bottom: -0.45rem;
  content: "";
  height: 0.45rem;
  left: max(var(--page-pad), env(safe-area-inset-left, 0px));
  opacity: 0.75;
  position: absolute;
  width: 4.5rem;
}

.brand-mark {
  align-items: center;
  display: inline-flex;
  gap: 0.65rem;
  grid-area: brand;
  justify-self: start;
  min-height: 2.75rem;
}

.brand-mark svg {
  animation: brand-current 4.8s ease-in-out infinite;
  color: var(--ability-red);
  filter: drop-shadow(0 0 0.6rem rgba(240, 45, 80, 0.4));
  height: 2rem;
  overflow: visible;
  width: 2rem;
}

.brand-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
}

.brand-mark path:last-child {
  stroke: var(--ice);
}

.brand-mark span {
  color: var(--frost);
  font-family: var(--font-mono);
  font-size: 0.59rem;
  letter-spacing: 0.16em;
}

.site-header nav {
  align-items: center;
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.75rem);
  grid-area: nav;
}

.site-header nav a {
  color: var(--muted);
  font-family: var(--font-interface);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  min-height: 2.75rem;
  padding-top: 0.95rem;
  position: relative;
  text-transform: uppercase;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.site-header nav a::after {
  background: linear-gradient(90deg, var(--ability-red) 0 60%, var(--ice) 60% 74%, var(--cyan));
  bottom: 0.15rem;
  box-shadow: 0 0 0.7rem rgba(240, 45, 80, 0.36);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease-cut);
  width: 100%;
}

.site-header nav a:hover,
.site-header nav a[aria-current="location"] {
  color: var(--ice);
  text-shadow: 1px 0 var(--ability-red), -1px 0 var(--cyan);
}

.site-header nav a:hover::after,
.site-header nav a[aria-current="location"]::after {
  transform: scaleX(1);
}

.header-state {
  align-items: center;
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  gap: 0.55rem;
  grid-area: state;
  justify-self: end;
  letter-spacing: 0.08em;
}

.language-switcher {
  align-items: center;
  background: rgba(17, 24, 42, 0.72);
  border: 1px solid var(--line);
  display: inline-flex;
  gap: 0.32rem;
  min-height: 2rem;
  padding: 0 0.46rem;
}

.language-switcher a {
  align-items: center;
  color: var(--muted-2);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  min-height: 1.85rem;
  text-transform: uppercase;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.language-switcher a:hover,
.language-switcher a:focus-visible,
.language-switcher a[aria-current="page"] {
  color: var(--ice);
  text-shadow: 1px 0 var(--ability-red), -1px 0 var(--cyan);
}

.language-switcher a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--ability-red);
  text-underline-offset: 0.28rem;
}

.language-switcher > span {
  color: var(--line-red);
}

.header-state__label {
  color: var(--muted-2);
  text-transform: uppercase;
}

.header-state time {
  color: var(--frost);
  min-width: 4.75rem;
}

.state-dot {
  animation: state-flicker 3.8s steps(1) infinite;
  background: var(--pulse-hot);
  box-shadow: 0 0 0.75rem var(--ability-red);
  height: 0.38rem;
  transform: rotate(45deg);
  width: 0.38rem;
}

.menu-toggle {
  background: rgba(240, 45, 80, 0.08);
  border: 1px solid var(--line-red);
  clip-path: polygon(0 0, 73% 0, 100% 27%, 100% 100%, 27% 100%, 0 73%);
  cursor: pointer;
  display: none;
  grid-area: menu;
  height: 2.75rem;
  justify-self: end;
  position: relative;
  width: 2.75rem;
}

.menu-toggle span {
  background: var(--ice);
  height: 1px;
  left: 0.72rem;
  position: absolute;
  transition: transform 0.24s ease, top 0.24s ease, width 0.24s ease;
  width: 1.15rem;
}

.menu-toggle span:first-child {
  top: 1rem;
}

.menu-toggle span:last-child {
  top: 1.62rem;
  width: 0.8rem;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  top: 1.34rem;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  top: 1.34rem;
  transform: rotate(-45deg);
  width: 1.15rem;
}

.site-shell {
  --parallax-x: 0px;
  --parallax-y: 0px;
  --pointer-x: 72vw;
  --pointer-y: 18vh;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
  padding-left: max(var(--page-pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--page-pad), env(safe-area-inset-right, 0px));
  position: relative;
}

.site-shell::before {
  background-image:
    radial-gradient(circle, rgba(240, 45, 80, 0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(83, 184, 224, 0.4) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(147, 168, 225, 0.28) 0 1px, transparent 1.4px);
  background-position: 0 0, 4rem 7rem, 11rem 2rem;
  background-size: 17rem 19rem, 23rem 29rem, 31rem 27rem;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, #000 0 72%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 72%, transparent 98%);
  opacity: 0.2;
  pointer-events: none;
  position: fixed;
  transform: translate3d(calc(var(--parallax-x) * -0.18), calc(var(--parallax-y) * -0.18), 0);
  transition: transform 0.5s var(--ease-out);
  z-index: -3;
}

.site-shell::after {
  animation: data-rain 18s linear infinite;
  background:
    repeating-linear-gradient(90deg, transparent 0 8.5rem, rgba(240, 45, 80, 0.07) 8.5rem 8.56rem, transparent 8.56rem 14rem),
    repeating-linear-gradient(90deg, transparent 0 13rem, rgba(83, 184, 224, 0.045) 13rem 13.05rem, transparent 13.05rem 21rem);
  content: "";
  inset: -12rem 0;
  mask-image: linear-gradient(90deg, #000, transparent 18%, transparent 82%, #000);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 18%, transparent 82%, #000);
  opacity: 0.34;
  pointer-events: none;
  position: fixed;
  z-index: -3;
}

.ambient-grid {
  animation: grid-drift 16s linear infinite;
  background-image:
    linear-gradient(rgba(240, 45, 80, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 45, 80, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(83, 184, 224, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 184, 224, 0.022) 1px, transparent 1px);
  background-size: 5rem 5rem, 5rem 5rem, 1rem 1rem, 1rem 1rem;
  inset: -4rem;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  transform: translate3d(calc(var(--parallax-x) * -0.32), calc(var(--parallax-y) * -0.32), 0);
  transition: transform 0.55s var(--ease-out);
  z-index: -2;
}

.ambient-grid::before {
  animation: grid-sweep 9s linear infinite;
  background: linear-gradient(to bottom, transparent 0 46%, rgba(240, 45, 80, 0.13) 49.6%, rgba(224, 240, 250, 0.12) 50%, rgba(83, 184, 224, 0.1) 50.4%, transparent 54%);
  content: "";
  inset: -30vh 0;
  pointer-events: none;
  position: fixed;
}

.ambient-grid::after {
  animation: telemetry-dash 6.4s steps(8) infinite;
  background: linear-gradient(90deg, var(--ability-red), var(--ice) 55%, var(--cyan), transparent);
  box-shadow: 0 0 0.8rem rgba(240, 45, 80, 0.3);
  content: "";
  height: 1px;
  left: 0;
  opacity: 0.52;
  position: fixed;
  top: 38%;
  width: 18vw;
}

.pointer-light {
  animation: pointer-breathe 5s ease-in-out infinite;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(240, 45, 80, 0.1), transparent 15rem),
    radial-gradient(circle at calc(var(--pointer-x) + 8rem) calc(var(--pointer-y) - 5rem), rgba(83, 184, 224, 0.055), transparent 12rem);
  inset: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.hero {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 4vw, 4.75rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.92fr);
  margin: 0 auto;
  max-width: var(--content-width);
  min-height: max(48rem, 100dvh);
  padding: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 4.25rem) 0 5.75rem;
  position: relative;
}

.hero::before {
  animation: signal-sweep 6.4s linear infinite;
  background: linear-gradient(90deg, var(--ability-red) 0 53%, var(--ice) 53% 65%, var(--cyan) 65% 83%, var(--magenta) 83% 92%, transparent 92%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
  content: "";
  background-size: 220% 100%;
  height: 0.4rem;
  left: 0;
  position: absolute;
  top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 1.55rem);
  width: clamp(9rem, 22vw, 19rem);
}

.hero::after {
  border-top: 1px solid var(--line);
  content: "";
  position: absolute;
  right: 0;
  top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 1.75rem);
  width: calc(100% - clamp(11rem, 25vw, 22rem));
}

.hero__rail {
  align-items: center;
  color: var(--muted-2);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  gap: 0.9rem;
  letter-spacing: 0.13em;
  position: absolute;
  text-transform: uppercase;
  transform: rotate(-90deg);
  transform-origin: left top;
}

.hero__rail--left {
  left: -2.4rem;
  top: 55%;
}

.hero__rail i {
  background: linear-gradient(90deg, var(--ability-red), var(--cyan));
  height: 1px;
  width: 3rem;
}

.hero__copy {
  min-width: 0;
  position: relative;
  z-index: 2;
}

.eyebrow {
  align-items: center;
  color: var(--frost);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  gap: 0.8rem;
  letter-spacing: 0.13em;
  margin-bottom: 1.75rem;
  text-transform: uppercase;
}

.eyebrow__line {
  animation: line-charge 3.2s var(--ease-cut) infinite;
  background: linear-gradient(90deg, var(--ability-red), var(--pulse-hot));
  box-shadow: 0 0 0.75rem rgba(240, 45, 80, 0.45);
  height: 2px;
  width: 3.5rem;
}

.eyebrow__index {
  border-left: 1px solid var(--line-strong);
  color: var(--ability-red);
  margin-left: 0.25rem;
  padding-left: 1rem;
}

.hero__handle {
  animation: decode-lock 1.05s 0.5s steps(7) both;
  color: var(--cyan-hot);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  margin: 0 0 0.8rem;
  text-transform: uppercase;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(4.8rem, 8.4vw, 8.9rem);
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.7;
  margin: 0;
  text-transform: uppercase;
}

.hero h1 > span {
  display: block;
  position: relative;
  width: max-content;
}

.hero h1 > span:nth-child(n)::before,
.hero h1 > span:nth-child(n)::after {
  content: attr(data-text);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.hero h1 > span::before {
  animation: title-glitch-cyan 7.6s 0.08s steps(1, end) infinite;
  clip-path: inset(8% 0 63% 0);
  color: var(--cyan-hot);
  text-shadow: calc(var(--glitch-offset) * -1) 0 var(--blue);
}

.hero h1 > span::after {
  animation: title-glitch-red 7.6s steps(1, end) infinite;
  clip-path: inset(61% 0 9% 0);
  color: var(--pulse-hot);
  text-shadow: var(--glitch-offset) 0 var(--magenta);
}

.hero h1 > span[data-text="VIOLENT"] {
  color: var(--ice);
  text-shadow: 0.02em 0 var(--slate), -0.018em 0 rgba(83, 184, 224, 0.7);
}

.hero h1 > span[data-text="AVRO"] {
  color: var(--ability-red);
  margin-left: clamp(1.4rem, 4vw, 4rem);
  text-shadow: 0 0 1.6rem rgba(240, 45, 80, 0.28), 0.018em 0 var(--pulse-hot), -0.012em 0 var(--magenta);
}

.hero__statement {
  border-left: 3px solid var(--ability-red);
  color: var(--ice);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.3;
  margin: 2.2rem 0 0;
  max-width: 38rem;
  padding-left: 1rem;
  text-transform: uppercase;
}

.hero__intro {
  color: var(--muted);
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  line-height: 1.55;
  margin: 1rem 0 0;
  max-width: 43rem;
}

.main-link-hub {
  background:
    linear-gradient(110deg, rgba(240, 45, 80, 0.11), transparent 38%),
    linear-gradient(290deg, rgba(83, 184, 224, 0.08), transparent 42%),
    rgba(9, 13, 24, 0.88);
  border: 1px solid rgba(160, 216, 246, 0.22);
  clip-path: polygon(0 0, calc(100% - 0.65rem) 0, 100% 0.65rem, 100% 100%, 0.65rem 100%, 0 calc(100% - 0.65rem));
  margin-top: 1.2rem;
  overflow: hidden;
  padding: 0.7rem;
  position: relative;
}

.main-link-hub::before {
  background: linear-gradient(90deg, var(--ability-red) 0 48%, var(--ice) 48% 62%, var(--cyan) 62% 82%, var(--magenta));
  content: "";
  height: 2px;
  inset: 0 0 auto;
  position: absolute;
}

.main-link-hub__header {
  align-items: end;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.15rem 0.25rem 0.65rem;
}

.main-link-hub__header .micro-label {
  margin-bottom: 0.28rem;
}

.main-link-hub__header strong {
  color: var(--ice);
  display: block;
  font-family: var(--font-display);
  font-size: 0.96rem;
  line-height: 1;
  text-transform: uppercase;
}

.main-link-hub__header > span {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-link-hub__grid {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.main-link {
  align-items: center;
  background: rgba(17, 24, 42, 0.82);
  border: 1px solid var(--line);
  color: var(--ice);
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 4rem;
  padding: 0.6rem 0.65rem;
  position: relative;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.25s var(--ease-out);
}

.main-link::before {
  background: var(--cyan);
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  transform: scaleY(0.3);
  transform-origin: bottom;
  transition: transform 0.25s var(--ease-cut);
  width: 2px;
}

.main-link:hover,
.main-link:focus-visible {
  background: linear-gradient(110deg, rgba(240, 45, 80, 0.16), rgba(83, 184, 224, 0.06));
  border-color: var(--line-red);
  transform: translateX(0.14rem);
}

.main-link:hover::before,
.main-link:focus-visible::before {
  transform: scaleY(1);
}

.main-link__symbol {
  align-items: center;
  color: var(--cyan-hot);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  justify-content: center;
  min-width: 1.35rem;
}

.main-link__copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.main-link__copy small {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.39rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.main-link__copy strong {
  color: var(--frost);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.main-link__arrow {
  color: var(--frost);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.main-link--private {
  border-color: rgba(240, 45, 80, 0.52);
}

.main-link--private::before {
  background: var(--ability-red);
}

.main-link--x .main-link__symbol,
.main-link--x .main-link__copy small {
  color: var(--ice);
}

.main-link--throne {
  background: linear-gradient(105deg, rgba(250, 218, 22, 0.18), rgba(17, 24, 42, 0.88));
  border-color: rgba(250, 218, 22, 0.58);
}

.main-link--throne::before,
.main-link--throne .main-link__symbol,
.main-link--throne .main-link__copy small,
.main-link--throne .main-link__arrow {
  color: #fada16;
}

.main-link--throne::before {
  background: #fada16;
}

.main-link--throne:hover,
.main-link--throne:focus-visible {
  border-color: #fada16;
}

.first-visit-guide {
  background:
    linear-gradient(110deg, rgba(240, 45, 80, 0.1), transparent 38%),
    linear-gradient(290deg, rgba(83, 184, 224, 0.07), transparent 42%),
    rgba(9, 13, 24, 0.82);
  border: 1px solid rgba(160, 216, 246, 0.2);
  clip-path: polygon(0 0, calc(100% - 0.65rem) 0, 100% 0.65rem, 100% 100%, 0.65rem 100%, 0 calc(100% - 0.65rem));
  margin-top: 1.35rem;
  overflow: hidden;
  padding: 0.7rem;
  position: relative;
}

.first-visit-guide::before {
  background: linear-gradient(90deg, var(--ability-red) 0 58%, var(--ice) 58% 70%, var(--cyan) 70% 88%, var(--magenta));
  content: "";
  height: 2px;
  inset: 0 0 auto;
  position: absolute;
}

.first-visit-guide__intro {
  align-items: baseline;
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
  padding: 0.2rem 0.25rem 0.65rem;
}

.first-visit-guide__intro strong {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: 0.92rem;
  text-transform: uppercase;
}

.first-visit-guide__intro span {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: uppercase;
}

.first-visit-guide__routes {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.first-visit-route {
  align-items: center;
  background: rgba(17, 24, 42, 0.78);
  border: 1px solid var(--line);
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 4.5rem;
  padding: 0.55rem;
  position: relative;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.25s var(--ease-out);
}

.first-visit-route::before {
  background: var(--ability-red);
  content: "";
  inset: 0 auto 0 0;
  transform: scaleY(0.28);
  transform-origin: bottom;
  transition: transform 0.25s var(--ease-cut);
  width: 2px;
}

.first-visit-route:hover,
.first-visit-route.is-active {
  background: linear-gradient(110deg, rgba(240, 45, 80, 0.15), rgba(83, 184, 224, 0.05));
  border-color: rgba(240, 45, 80, 0.48);
  transform: translateY(-0.1rem);
}

.first-visit-route:hover::before,
.first-visit-route.is-active::before {
  transform: scaleY(1);
}

.first-visit-route--start {
  border-color: rgba(83, 184, 224, 0.42);
}

.first-visit-route--start::before {
  background: linear-gradient(var(--ability-red), var(--cyan));
}

.first-visit-route__index {
  color: var(--ability-red);
  font-family: var(--font-mono);
  font-size: 0.42rem;
}

.first-visit-route__copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.first-visit-route__copy strong {
  color: var(--frost);
  font-family: var(--font-display);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.first-visit-route__copy small {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.36rem;
  line-height: 1.35;
}

.first-visit-route__badge {
  background: var(--ability-red);
  color: var(--ice);
  font-family: var(--font-mono);
  font-size: 0.34rem;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.34rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.first-visit-route > .icon {
  color: var(--cyan);
  height: 0.9rem;
  width: 0.9rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.65rem;
}

:is(.button, .copy-button) {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 600;
  gap: 0.7rem;
  justify-content: center;
  letter-spacing: 0.08em;
  min-height: 3.25rem;
  min-width: 12.5rem;
  isolation: isolate;
  overflow: hidden;
  padding: 0.75rem 1.3rem;
  position: relative;
  text-transform: uppercase;
  touch-action: manipulation;
  transition: color 0.2s ease, filter 0.2s ease, transform 0.25s var(--ease-out);
}

:is(.button, .copy-button)::before {
  background: linear-gradient(105deg, transparent 28%, rgba(224, 240, 250, 0.28) 47%, rgba(83, 184, 224, 0.16) 53%, transparent 72%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-125%);
  z-index: 1;
}

:is(.button--primary, .copy-button)::before {
  animation: control-sweep 4.8s 1.1s var(--ease-cut) infinite;
}

.button:hover,
.copy-button:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.button > span,
.button > .icon,
.button > .gui-arrow,
.copy-button > span,
.copy-button > .icon {
  position: relative;
  z-index: 2;
}

.button > span {
  white-space: nowrap;
}

.button--primary {
  background: linear-gradient(105deg, rgba(240, 45, 80, 0.96), rgba(227, 49, 82, 0.86));
  color: var(--ice);
  box-shadow: 0 0 1.7rem rgba(240, 45, 80, 0.17);
}

.button--ghost {
  background: linear-gradient(105deg, rgba(224, 240, 250, 0.08), rgba(83, 184, 224, 0.08));
  color: var(--frost);
  min-width: 14rem;
}

.gui-button-shell {
  height: 100%;
  inset: 0;
  object-fit: fill;
  opacity: 0.42;
  position: absolute;
  transition: filter var(--motion-fast) ease, opacity var(--motion-fast) ease, transform var(--motion-medium) var(--ease-out);
  width: 100%;
}

.button--primary .gui-button-shell {
  animation: shell-current 4.2s ease-in-out infinite;
  filter: drop-shadow(0 0 0.4rem rgba(255, 45, 85, 0.5));
  opacity: 0.74;
}

.gui-arrow {
  animation: arrow-nudge 1.8s steps(4) infinite;
  height: 1rem;
  object-fit: contain;
  transform: rotate(-90deg);
  width: 0.85rem;
}

.hero__status {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  margin-top: 1.25rem;
}

.hero__status span:last-child {
  display: grid;
  gap: 0.15rem;
}

.hero__status small {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.47rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__status strong {
  color: var(--frost);
  font-size: 0.8rem;
  font-weight: 600;
}

.status-pulse {
  background: var(--ability-red);
  box-shadow: 0 0 0.8rem var(--ability-red);
  height: 0.5rem;
  position: relative;
  transform: rotate(45deg);
  width: 0.5rem;
}

.status-pulse::after {
  animation: pulse-ring 2.2s ease-out infinite;
  border: 1px solid var(--pulse-red);
  content: "";
  inset: -0.35rem;
  position: absolute;
}

.hero__visual {
  align-self: center;
  background: none;
  border: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  z-index: 61;
}

.hero__visual.reveal {
  filter: none;
}

.signal-portrait {
  background: none;
  border: 0;
  margin: 0;
  max-width: 44rem;
  padding: 0;
  width: 100%;
}

.signal-portrait__art {
  display: block;
  filter: none;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.identity-deck {
  background:
    linear-gradient(100deg, rgba(240, 45, 80, 0.13), transparent 24%),
    linear-gradient(280deg, rgba(83, 184, 224, 0.08), rgba(34, 54, 143, 0.1) 35%, transparent 62%),
    rgba(5, 6, 10, 0.9);
  border: 1px solid rgba(240, 45, 80, 0.34);
  clip-path: polygon(0 0, 37% 0, 39% 0.45rem, 77% 0.45rem, 79% 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 0.9rem), calc(100% - 0.9rem) 100%, 1rem 100%, 0 calc(100% - 1rem));
  grid-column: 1 / -1;
  margin-top: -0.65rem;
  overflow: hidden;
  padding: 1rem 1.1rem 1.1rem;
  position: relative;
}

.identity-deck > summary {
  cursor: pointer;
  list-style: none;
}

.identity-deck > summary::-webkit-details-marker {
  display: none;
}

.identity-deck > summary::after {
  color: var(--cyan);
  content: "+";
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-left: 0.75rem;
}

.identity-deck[open] > summary::after {
  content: "−";
}

.identity-deck::before {
  animation: spectrum-flow 10s linear infinite;
  background: linear-gradient(90deg, var(--ability-red) 0 42%, var(--pulse-hot) 42% 51%, var(--ice) 51% 60%, var(--cyan) 60% 76%, var(--slate) 76% 88%, var(--magenta) 88% 95%, transparent 95%);
  content: "";
  background-size: 190% 100%;
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.gui-panel-plate--identity {
  animation: gui-breathe 6.4s ease-in-out infinite;
  height: 100%;
  inset: 0;
  object-fit: fill;
  opacity: 0.07;
  position: absolute;
  width: 100%;
}

.identity-deck__header {
  align-items: center;
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  justify-content: space-between;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  position: relative;
  text-transform: uppercase;
}

.identity-deck__header span {
  color: var(--ability-red);
}

.identity-deck__header strong {
  color: var(--cyan-hot);
  font-weight: 500;
}

.identity-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  position: relative;
}

.identity-grid > div {
  animation: data-node-pulse 7s ease-in-out infinite;
  background: rgba(224, 240, 250, 0.035);
  border-left: 2px solid var(--ability-red);
  min-height: 3.25rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
}

.identity-grid > div:nth-child(4n + 2) {
  animation-delay: -1.4s;
  border-left-color: var(--cyan);
}

.identity-grid > div:nth-child(4n + 3) {
  animation-delay: -2.8s;
  border-left-color: var(--slate);
}

.identity-grid > div:nth-child(4n) {
  animation-delay: -4.2s;
  border-left-color: var(--magenta);
}

.identity-grid dt {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.43rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.identity-grid dd {
  color: var(--frost);
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  font-weight: 700;
  line-height: 1.12;
  margin: 0.25rem 0 0;
  text-transform: uppercase;
}

.hero__system-strip {
  align-items: center;
  border-top: 1px solid rgba(240, 45, 80, 0.26);
  color: var(--muted-2);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.45rem;
  gap: clamp(0.65rem, 2vw, 1.5rem);
  grid-column: 1 / -1;
  letter-spacing: 0.1em;
  margin-top: -1.35rem;
  padding-top: 0.7rem;
  text-transform: uppercase;
}

.hero__system-strip i {
  animation: strip-node 2.7s steps(4) infinite;
  background: var(--line-strong);
  height: 0.35rem;
  transform: rotate(45deg);
  width: 0.35rem;
}

.hero__system-strip i:nth-of-type(1) {
  background: var(--ability-red);
}

.hero__system-strip i:nth-of-type(2) {
  animation-delay: -0.9s;
  background: var(--cyan);
}

.hero__system-strip i:nth-of-type(3) {
  animation-delay: -1.8s;
  background: var(--slate);
}

.gui-status--hero {
  animation: gui-telemetry 3.2s steps(5) infinite;
  filter: drop-shadow(0 0 0.45rem rgba(240, 45, 80, 0.35));
  height: 0.75rem;
  object-fit: fill;
  opacity: 0.68;
  width: 6rem;
}

.scroll-cue {
  align-items: center;
  bottom: 1.4rem;
  color: var(--muted-2);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.45rem;
  gap: 0.6rem;
  letter-spacing: 0.12em;
  position: absolute;
  right: 0;
  text-transform: uppercase;
}

.scroll-cue i {
  animation: scroll-pulse 1.8s ease-in-out infinite;
  border-bottom: 1px solid var(--ability-red);
  border-right: 1px solid var(--ability-red);
  height: 0.5rem;
  transform: rotate(45deg);
  width: 0.5rem;
}

.gui-scroll-shell {
  height: 0.55rem;
  opacity: 0.65;
  width: 3.1rem;
}

.section-selector {
  margin: 0 auto;
  max-width: var(--content-width);
  padding: clamp(3.2rem, 6vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  scroll-margin-top: calc(var(--header-height) + 0.75rem);
}

.section-selector::before {
  animation: spectrum-flow 11s linear infinite;
  background: linear-gradient(90deg, var(--ability-red) 0 47%, var(--ice) 47% 57%, var(--cyan) 57% 72%, var(--blue) 72% 82%, var(--slate) 82% 90%, var(--magenta) 90% 96%, transparent 96%);
  content: "";
  background-size: 190% 100%;
  height: 2px;
  inset: 0 0 auto;
  position: absolute;
}

:is(.selector-heading, .section-heading) {
  align-items: end;
  display: grid;
  gap: clamp(1.35rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.46fr);
}

.selector-heading {
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}

:is(.selector-heading h2, .section-heading h2, .connect__intro h2) {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.9;
  margin: 0;
  text-transform: uppercase;
}

.selector-heading > p,
.section-heading > p {
  border-left: 2px solid var(--ability-red);
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  max-width: 32rem;
  padding-left: 1rem;
}

.selector-grid {
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid rgba(240, 45, 80, 0.28);
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  padding: 0.35rem;
  position: sticky;
  top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 0.55rem);
  z-index: 30;
}

.selector-grid::before {
  animation: selector-radar 5.4s linear infinite;
  background: linear-gradient(90deg, transparent, rgba(240, 45, 80, 0.12), rgba(224, 240, 250, 0.07), transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-110%);
  width: 42%;
  z-index: 2;
}

.selector-tab {
  align-content: space-between;
  background:
    linear-gradient(145deg, rgba(240, 45, 80, 0.055), transparent 48%),
    color-mix(in srgb, var(--panel-raised) 90%, var(--graphite-2));
  border: 1px solid rgba(160, 216, 246, 0.09);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  gap: 0.65rem 0.75rem;
  grid-template-columns: auto 1fr;
  min-height: 7rem;
  overflow: hidden;
  padding: 1rem;
  position: relative;
  text-align: left;
  touch-action: manipulation;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-out);
}

.selector-tab::before {
  background: linear-gradient(var(--ability-red) 0 64%, var(--ice) 64% 76%, var(--cyan));
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease-cut);
  width: 3px;
}

.selector-tab::after {
  background: linear-gradient(90deg, transparent, rgba(240, 45, 80, 0.28), var(--ice), rgba(83, 184, 224, 0.2), transparent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  transform: translateX(-100%);
  width: 72%;
}

.selector-tab:hover,
.selector-tab.is-active {
  background:
    linear-gradient(120deg, rgba(240, 45, 80, 0.18), rgba(147, 168, 225, 0.07) 62%, rgba(83, 184, 224, 0.07)),
    rgba(9, 13, 24, 0.98);
  border-color: rgba(240, 45, 80, 0.5);
  color: var(--ice);
  transform: translateY(-0.12rem);
}

.selector-tab:hover::before,
.selector-tab.is-active::before {
  transform: scaleY(1);
}

.selector-tab.is-active::after {
  animation: selector-tab-scan 2.8s var(--ease-cut) infinite;
  opacity: 1;
}

.selector-tab__index {
  color: var(--ability-red);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  padding-top: 0.18rem;
}

.selector-tab__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.selector-tab__copy strong {
  color: var(--frost);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.selector-tab__copy small {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.45rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin-top: 0.28rem;
  text-transform: uppercase;
}

.selector-tab__meta {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.43rem;
  grid-column: 2;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.selector-tab.is-active .selector-tab__meta {
  color: var(--cyan);
}

.selector-status {
  align-items: center;
  color: var(--muted-2);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.47rem;
  gap: 0.65rem;
  justify-content: flex-end;
  letter-spacing: 0.1em;
  margin: 0.75rem 0 0;
  text-transform: uppercase;
}

.selector-status strong {
  color: var(--ability-red);
  font-weight: 500;
}

.selector-status::before {
  animation: status-beacon 1.9s steps(3) infinite;
  background: var(--ability-red);
  box-shadow: 0 0 0.7rem rgba(240, 45, 80, 0.65);
  content: "";
  height: 0.35rem;
  transform: rotate(45deg);
  width: 0.35rem;
}

.content-panel[hidden] {
  display: none !important;
}

.content-panel:not([hidden]) {
  animation: panel-enter 0.42s var(--ease-out) both;
}

.section-frame {
  border-top: 1px solid rgba(240, 45, 80, 0.2);
  margin: 0 auto;
  max-width: var(--content-width);
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  position: relative;
  scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 0.85rem);
}

.section-frame::before {
  animation: line-charge 4.6s var(--ease-cut) infinite;
  background: linear-gradient(90deg, var(--ability-red), var(--pulse-hot));
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: -1px;
  width: clamp(6rem, 15vw, 13rem);
}

.section-frame::after {
  border-right: 1px solid var(--cyan);
  border-top: 1px solid var(--cyan);
  content: "";
  height: 0.75rem;
  position: absolute;
  right: 0;
  top: -1px;
  width: 0.75rem;
}

.section-heading {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.project-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-card {
  --card-accent: var(--ability-red);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 11%, transparent), transparent 40%),
    linear-gradient(315deg, rgba(34, 54, 143, 0.08), transparent 42%),
    rgba(9, 13, 24, 0.94);
  border: 1px solid color-mix(in srgb, var(--card-accent) 44%, var(--line));
  clip-path: polygon(0 0, calc(100% - 1.15rem) 0, 100% 1.15rem, 100% calc(100% - 0.9rem), calc(100% - 0.9rem) 100%, 0 100%);
  display: flex;
  flex-direction: column;
  min-height: 28rem;
  overflow: hidden;
  padding: 1.1rem;
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.35s var(--ease-out);
}

.project-card::before {
  animation: signal-sweep 7.4s linear infinite;
  background: linear-gradient(90deg, var(--ability-red) 0 58%, var(--ice) 58% 67%, var(--cyan) 67% 84%, var(--card-accent) 84% 95%, transparent 95%);
  content: "";
  background-size: 210% 100%;
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
  z-index: 3;
}

.project-card::after {
  animation: card-beacon 2.4s steps(4) infinite;
  background: var(--card-accent);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--card-accent) 50%, transparent);
  content: "";
  height: 0.4rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  transform: rotate(45deg);
  width: 0.4rem;
}

.project-card:hover {
  border-color: color-mix(in srgb, var(--card-accent) 72%, var(--ice));
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.28), 0 0 2rem color-mix(in srgb, var(--card-accent) 8%, transparent);
  transform: translateY(-0.3rem);
}

.project-card:hover .project-card__scan {
  animation-duration: 1.35s;
  opacity: 0.68;
}

.project-card--red {
  --card-accent: var(--ability-red);
}

.project-card--violet {
  --card-accent: var(--slate);
}

.project-card--cyan {
  --card-accent: var(--cyan);
}

.project-card--coral {
  --card-accent: var(--coral);
}

.gui-panel-plate {
  animation: gui-breathe 6.8s ease-in-out infinite;
  inset: 0;
  object-fit: fill;
  opacity: 0.055;
  position: absolute;
  width: 100%;
}

.project-card > .gui-panel-plate {
  height: 9.5rem;
}

.project-card__scan {
  animation: card-scan 6s linear infinite;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--card-accent) 23%, transparent), transparent);
  height: 4rem;
  inset: -5rem 0 auto;
  opacity: 0.35;
  pointer-events: none;
  position: absolute;
}

.project-card__header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.project-card__identity {
  align-items: center;
  display: flex;
  gap: 0.7rem;
}

.project-card__index {
  color: var(--card-accent);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.project-card__identity .micro-label {
  margin: 0;
}

.status-chip {
  align-items: center;
  border: 1px solid rgba(240, 45, 80, 0.34);
  color: var(--ice);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.44rem;
  gap: 0.5rem;
  letter-spacing: 0.08em;
  padding: 0.42rem 0.55rem;
  text-transform: uppercase;
}

.status-chip i {
  animation: status-beacon 1.8s steps(3) infinite;
  background: var(--ability-red);
  box-shadow: 0 0 0.55rem var(--ability-red);
  height: 0.32rem;
  transform: rotate(45deg);
  width: 0.32rem;
}

.gui-status {
  object-fit: fill;
}

.gui-status--project {
  animation: gui-telemetry 3.4s calc(var(--card-index, 0) * -0.38s) steps(5) infinite;
  filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--card-accent) 35%, transparent));
  height: 0.65rem;
  margin-top: 1.1rem;
  opacity: 0.56;
  width: 8rem;
}

.project-card__body {
  margin-top: 3.4rem;
  position: relative;
  z-index: 2;
}

.project-card__body::before {
  background: var(--card-accent);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: -1.2rem;
  width: 2.5rem;
}

.project-card__category {
  color: var(--card-accent);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.11em;
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.project-card h3 {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.project-card__body > p:last-child {
  color: var(--muted);
  line-height: 1.55;
  margin: 1rem 0 0;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  position: relative;
  z-index: 2;
}

.tag-list li {
  background: color-mix(in srgb, var(--slate-deep) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 26%, var(--line));
  color: var(--frost);
  font-family: var(--font-mono);
  font-size: 0.43rem;
  letter-spacing: 0.07em;
  padding: 0.4rem 0.5rem;
  text-transform: uppercase;
}

.progress {
  margin-top: auto;
  padding-top: 1.5rem;
  position: relative;
  z-index: 2;
}

.progress__meta {
  color: var(--muted-2);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.45rem;
  justify-content: space-between;
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.progress__track {
  background: rgba(224, 240, 250, 0.08);
  height: 3px;
  overflow: hidden;
}

.progress__track span {
  background: linear-gradient(90deg, var(--ability-red), var(--card-accent), var(--cyan-hot));
  box-shadow: 0 0 0.8rem var(--card-accent);
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.progress__track span::after {
  animation: progress-charge 2.8s var(--ease-cut) infinite;
  background: linear-gradient(90deg, transparent, rgba(224, 240, 250, 0.9), transparent);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-120%);
}

.project-stage {
  border-left: 2px solid var(--ability-red);
  display: grid;
  gap: 0.2rem;
  margin-top: auto;
  padding: 1.25rem 0 0 0.75rem;
  position: relative;
  z-index: 2;
}

.project-stage span {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.44rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-stage strong {
  color: var(--frost);
  font-size: 0.9rem;
  font-weight: 600;
}

.project-card__actions {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-top: 1.35rem;
  min-height: 3rem;
  padding-top: 0.7rem;
  position: relative;
  z-index: 2;
}

.text-link {
  align-items: center;
  color: var(--ice);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.49rem;
  gap: 0.65rem;
  letter-spacing: 0.08em;
  min-height: 2.75rem;
  text-transform: uppercase;
}

.icon-link {
  align-items: center;
  border: 1px solid var(--line);
  color: var(--card-accent);
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.is-placeholder {
  cursor: not-allowed;
  opacity: 0.58;
}

.upcoming-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.open-slot {
  align-items: flex-start;
  background:
    linear-gradient(145deg, rgba(240, 45, 80, 0.07), transparent 40%),
    linear-gradient(315deg, rgba(83, 184, 224, 0.07), transparent 44%),
    rgba(5, 6, 10, 0.72);
  border: 1px dashed rgba(147, 168, 225, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 28rem;
  overflow: hidden;
  padding: 1.25rem;
  position: relative;
}

.gui-status--empty {
  animation: gui-telemetry 4.1s steps(6) infinite reverse;
  height: 0.65rem;
  left: 1.25rem;
  opacity: 0.4;
  position: absolute;
  top: 1.25rem;
  width: 8rem;
}

.open-slot__orbit {
  animation: orbit-spin 18s linear infinite;
  border: 1px solid rgba(83, 184, 224, 0.22);
  border-radius: 50%;
  height: 10rem;
  left: 50%;
  position: absolute;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 10rem;
}

.open-slot__orbit span {
  animation: orbit-counterspin 11s linear infinite;
  border: 1px solid rgba(240, 45, 80, 0.35);
  border-radius: 50%;
  border-style: dashed;
  inset: 1.5rem;
  position: absolute;
}

.open-slot__orbit i {
  animation: orbit-beacon 2.2s ease-in-out infinite;
  background: var(--ability-red);
  box-shadow: 0 0 1rem var(--ability-red);
  height: 0.45rem;
  left: 50%;
  position: absolute;
  top: -0.22rem;
  transform: rotate(45deg);
  width: 0.45rem;
}

.open-slot h3 {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
}

.open-slot > p:last-child {
  color: var(--muted);
  line-height: 1.5;
  margin: 0.8rem 0 0;
}

.about-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.about-copy {
  background:
    linear-gradient(125deg, rgba(240, 45, 80, 0.13), transparent 36%),
    linear-gradient(310deg, rgba(83, 184, 224, 0.08), transparent 40%),
    rgba(9, 13, 24, 0.93);
  border: 1px solid rgba(240, 45, 80, 0.36);
  clip-path: polygon(0 0, 48% 0, 51% 0.55rem, calc(100% - 1rem) 0.55rem, 100% 1.55rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%);
  grid-column: span 7;
  min-height: 27rem;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  position: relative;
}

.about-copy::before {
  animation: signal-sweep 8.2s linear infinite;
  background: linear-gradient(90deg, var(--ability-red) 0 62%, var(--ice) 62% 73%, var(--cyan));
  background-size: 210% 100%;
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
  z-index: 2;
}

.gui-panel-plate--about {
  height: 100%;
  opacity: 0.05;
}

.about-copy__index {
  color: var(--ability-red);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.13em;
  margin: 0;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.about-copy h3 {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 4.1rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.98;
  margin: 4.5rem 0 0;
  max-width: 12ch;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.about-copy > p:nth-of-type(2) {
  color: var(--muted);
  line-height: 1.6;
  margin: 1.35rem 0 0;
  max-width: 40rem;
  position: relative;
  z-index: 1;
}

.about-copy__signature {
  align-items: center;
  bottom: 1.5rem;
  color: var(--frost);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  gap: 0.7rem;
  left: clamp(1.4rem, 3vw, 2.5rem);
  letter-spacing: 0.09em;
  position: absolute;
  text-transform: uppercase;
  z-index: 1;
}

.about-copy__signature i {
  animation: line-charge 3.8s var(--ease-cut) infinite;
  background: linear-gradient(90deg, var(--ability-red), var(--cyan));
  height: 1px;
  width: 3rem;
}

.fact-grid {
  display: grid;
  gap: 1px;
  grid-column: span 5;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fact {
  background: rgba(17, 24, 42, 0.78);
  border: 1px solid var(--line);
  min-height: 8rem;
  padding: 1rem;
  position: relative;
}

.fact::after {
  animation: fact-meter 4.8s ease-in-out infinite;
  background: var(--ability-red);
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  width: 42%;
  position: absolute;
}

.fact:nth-child(3n + 2)::after {
  background: var(--cyan);
}

.fact:nth-child(3n)::after {
  background: var(--slate);
}

.fact__number {
  color: var(--ability-red);
  font-family: var(--font-mono);
  font-size: 0.45rem;
}

.fact p {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.43rem;
  letter-spacing: 0.07em;
  margin: 1rem 0 0.25rem;
  text-transform: uppercase;
}

.fact strong {
  color: var(--frost);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

.about-orbit {
  align-items: center;
  background: linear-gradient(90deg, rgba(240, 45, 80, 0.07), rgba(34, 54, 143, 0.07), rgba(83, 184, 224, 0.05));
  border: 1px solid var(--line);
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  min-height: 10rem;
  overflow: hidden;
  padding: 1rem 2rem;
  position: relative;
}

.about-orbit::before {
  animation: orbit-wave 8s linear infinite;
  background: repeating-linear-gradient(90deg, transparent 0 1.3rem, rgba(240, 45, 80, 0.16) 1.3rem 1.36rem, transparent 1.36rem 2.4rem, rgba(83, 184, 224, 0.1) 2.4rem 2.46rem);
  content: "";
  height: 48%;
  inset: 26% 0 auto;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: 0.32;
  position: absolute;
}

.about-orbit::after {
  animation: orbit-scan 5.6s var(--ease-cut) infinite;
  background: linear-gradient(90deg, transparent, var(--ability-red), var(--ice), var(--cyan), transparent);
  box-shadow: 0 0 1rem rgba(240, 45, 80, 0.28);
  content: "";
  height: 1px;
  inset: 50% 0 auto;
  position: absolute;
  transform: translateX(-105%);
  width: 34%;
}

.about-orbit > div {
  height: 8rem;
  position: relative;
  width: 8rem;
}

.gui-profile-frame--about {
  animation: profile-frame-pulse 6s ease-in-out infinite;
  height: 100%;
  inset: 0;
  object-fit: contain;
  opacity: 0.18;
  position: absolute;
  width: 100%;
}

.about-orbit > div span {
  animation: diamond-spin 15s linear infinite;
  border: 1px solid rgba(240, 45, 80, 0.36);
  inset: 1.3rem;
  position: absolute;
  transform: rotate(45deg);
}

.about-orbit > div span:nth-child(3) {
  animation: diamond-spin-reverse 10s linear infinite;
  border-color: rgba(83, 184, 224, 0.44);
  inset: 2.25rem;
  transform: rotate(-12deg);
}

.about-orbit i {
  animation: orbit-core 2.1s ease-in-out infinite;
  background: var(--ability-red);
  box-shadow: 0 0 1rem var(--ability-red);
  height: 0.45rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.45rem;
}

.about-orbit p {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.profile-archive,
.music-console {
  background:
    linear-gradient(120deg, rgba(240, 45, 80, 0.08), transparent 28%),
    linear-gradient(300deg, rgba(83, 184, 224, 0.06), transparent 32%),
    rgba(5, 6, 10, 0.82);
  border: 1px solid rgba(240, 45, 80, 0.24);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  margin-top: 1.5rem;
  overflow: hidden;
  padding: clamp(1.1rem, 2.5vw, 2rem);
  position: relative;
}

.profile-archive::before,
.music-console::before {
  animation: spectrum-flow 10.5s linear infinite;
  background: linear-gradient(90deg, var(--ability-red) 0 48%, var(--ice) 48% 58%, var(--cyan) 58% 73%, var(--slate) 73% 84%, var(--magenta) 84% 93%, transparent 93%);
  background-size: 190% 100%;
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.profile-archive::after,
.music-console::after {
  animation: pattern-flicker 4.6s steps(4) infinite;
  background: repeating-linear-gradient(135deg, rgba(240, 45, 80, 0.3) 0 1px, transparent 1px 5px);
  content: "";
  height: 2.5rem;
  opacity: 0.34;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 3rem;
}

.profile-archive__header,
.music-console__header {
  align-items: end;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.4fr);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.profile-archive__header h3,
.music-console__header h3 {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}

.profile-archive__header > p,
.music-console__header > p {
  border-left: 2px solid var(--ability-red);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0;
  padding-left: 1rem;
}

.profile-topology {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 0.7fr);
}

:is(.typology-panel, .color-panel, .game-library, .genre-matrix) {
  background: rgba(9, 13, 24, 0.84);
  border: 1px solid var(--line);
}

.archive-panel__header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.45rem;
  justify-content: space-between;
  letter-spacing: 0.08em;
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
  text-transform: uppercase;
}

.archive-panel__header span {
  color: var(--ability-red);
}

.archive-panel__header strong {
  color: var(--muted-2);
  font-weight: 500;
}

.typology-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.typology-grid > div {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 7rem;
  padding: 0.9rem;
}

.typology-grid > div:nth-child(3n) {
  border-right: 0;
}

.typology-grid > div:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.typology-grid dt {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.43rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.typology-grid dd {
  color: var(--frost);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  margin: 0.7rem 0 0;
}

.typology-grid small {
  color: var(--slate);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.42rem;
  line-height: 1.4;
  margin-top: 0.35rem;
}

.color-stack {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.color-stack li {
  align-items: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--favorite-color) 20%, transparent), transparent 68%);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto 1fr auto;
  min-height: 4.65rem;
  padding: 0.8rem;
  position: relative;
}

.color-stack li:last-child {
  border-bottom: 0;
}

.color-stack li::before {
  background: var(--favorite-color);
  content: "";
  height: 100%;
  inset: 0 auto 0 0;
  width: 3px;
}

.color-stack span,
.color-stack small {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.43rem;
}

.color-stack strong {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
}

.preference-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
}

.preference-card {
  background: rgba(17, 24, 42, 0.66);
  border: 1px solid var(--line);
  min-height: 18rem;
  padding: 1rem;
}

.preference-card header {
  border-bottom: 1px solid var(--line);
  min-height: 5rem;
  padding-bottom: 0.8rem;
}

.preference-card header span {
  color: var(--ability-red);
  font-family: var(--font-mono);
  font-size: 0.44rem;
  letter-spacing: 0.08em;
}

.preference-card h4,
.game-library__grid h4,
.genre-matrix__grid h4 {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0.5rem 0 0;
  text-transform: uppercase;
}

.preference-card ul,
.game-library__grid ul,
.genre-matrix__grid ul {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.preference-card li,
.game-library__grid li,
.genre-matrix__grid li {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0.3rem 0 0.3rem 0.85rem;
  position: relative;
}

.preference-card li::before,
.game-library__grid li::before,
.genre-matrix__grid li::before {
  color: var(--ability-red);
  content: ">";
  font-family: var(--font-mono);
  left: 0;
  position: absolute;
}

.game-library,
.genre-matrix {
  margin-top: 1rem;
}

.game-library__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-library__grid > section {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 15rem;
  padding: 1rem;
}

.game-library__grid > section:nth-child(3n) {
  border-right: 0;
}

.game-library__grid > section:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.game-library__grid header span {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.43rem;
}

.genre-matrix__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.genre-matrix__grid > section {
  border-right: 1px solid var(--line);
  min-height: 16rem;
  padding: 1rem;
}

.genre-matrix__grid > section:last-child {
  border-right: 0;
}

.music-console__body {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.34fr);
  position: relative;
  z-index: 1;
}

.track-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.track-tile {
  --track-accent: var(--ability-red);
  aspect-ratio: 1;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--track-accent) 17%, transparent), transparent 50%),
    rgba(17, 24, 42, 0.76);
  border: 1px solid color-mix(in srgb, var(--track-accent) 42%, var(--line));
  color: var(--ice);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 0.75rem;
  position: relative;
  text-align: left;
  touch-action: manipulation;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.28s var(--ease-out);
}

.track-tile::before {
  animation: signal-sweep 6.8s linear infinite;
  background: linear-gradient(90deg, var(--ability-red) 0 58%, var(--track-accent) 58% 88%, transparent 88%);
  background-size: 220% 100%;
  content: "";
  height: 2px;
  inset: 0 0 auto;
  position: absolute;
}

.track-tile::after {
  background: var(--ice);
  box-shadow: 0 0 0.55rem rgba(224, 240, 250, 0.4);
  content: "";
  height: 0.3rem;
  opacity: 0;
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  transform: rotate(45deg);
  transition: opacity 0.2s ease;
  width: 0.3rem;
}

.track-tile:hover,
.track-tile.is-active {
  animation: active-track-pulse 3.2s ease-in-out infinite;
  border-color: color-mix(in srgb, var(--track-accent) 82%, var(--ice));
  box-shadow: 0 0 1.6rem color-mix(in srgb, var(--track-accent) 12%, transparent);
  transform: translateY(-0.18rem);
}

.track-tile.is-active::after {
  animation: card-beacon 1.8s steps(4) infinite;
  opacity: 1;
}

.track-tile--red {
  --track-accent: var(--ability-red);
}

.track-tile--ice {
  --track-accent: var(--ice);
}

.track-tile--cyan {
  --track-accent: var(--cyan);
}

.track-tile--violet {
  --track-accent: var(--magenta);
}

.track-tile__index {
  color: var(--track-accent);
  font-family: var(--font-mono);
  font-size: 0.45rem;
}

.track-tile__glyph {
  align-items: end;
  display: flex;
  gap: 0.18rem;
  height: 2.7rem;
  margin: auto 0 0.7rem;
}

.track-tile__glyph i {
  background: linear-gradient(to top, var(--ability-red), var(--track-accent));
  height: 52%;
  transform: scaleY(0.45);
  transform-origin: bottom;
  width: 0.22rem;
}

.track-tile:hover .track-tile__glyph i,
.track-tile.is-active .track-tile__glyph i {
  animation: equalize 1.3s ease-in-out infinite alternate;
}

.track-tile__glyph i:nth-child(2) {
  animation-delay: -0.6s;
  height: 82%;
}

.track-tile__glyph i:nth-child(3) {
  animation-delay: -0.3s;
  height: 35%;
}

.track-tile__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.track-tile__copy strong {
  display: -webkit-box;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.2vw, 0.95rem);
  font-weight: 600;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.1;
  overflow: hidden;
  text-transform: uppercase;
}

.track-tile__copy small {
  color: var(--muted-2);
  display: -webkit-box;
  font-family: var(--font-mono);
  font-size: 0.38rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
  margin-top: 0.3rem;
  overflow: hidden;
}

.track-tile__state {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.38rem;
  letter-spacing: 0.08em;
  margin-top: 0.65rem;
  text-transform: uppercase;
}

.track-tile.is-active .track-tile__state {
  color: var(--ability-red);
}

.player-dock {
  align-self: start;
  background:
    linear-gradient(140deg, rgba(240, 45, 80, 0.12), transparent 42%),
    rgba(9, 13, 24, 0.9);
  border: 1px solid rgba(240, 45, 80, 0.35);
  overflow: hidden;
  padding: 0.8rem;
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}

.player-dock::before {
  animation: player-scan 4.2s var(--ease-cut) infinite;
  background: linear-gradient(90deg, transparent, var(--ability-red), var(--ice), var(--cyan), transparent);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  width: 54%;
}

.player-dock__status {
  border-left: 2px solid var(--ability-red);
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
  padding-left: 0.65rem;
}

.player-dock__status span {
  color: var(--ability-red);
  font-family: var(--font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-dock__status strong {
  color: var(--frost);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
}

.player-dock iframe {
  border: 0;
  display: block;
  height: 152px;
  width: 100%;
}

.player-dock__consent {
  align-content: center;
  background:
    linear-gradient(115deg, rgba(240, 45, 80, 0.2), transparent 48%),
    linear-gradient(300deg, rgba(83, 184, 224, 0.12), transparent 45%),
    rgba(17, 24, 42, 0.86);
  border: 1px solid var(--line-strong);
  color: var(--ice);
  cursor: pointer;
  display: grid;
  gap: 0.45rem;
  height: 152px;
  justify-items: center;
  padding: 1rem;
  text-align: center;
  width: 100%;
}

.player-dock__consent:hover {
  border-color: var(--line-red);
}

.player-dock__consent span {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
}

.player-dock__consent small {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.42rem;
  line-height: 1.45;
  text-transform: uppercase;
}

.player-dock__link {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.42rem;
  gap: 0.45rem;
  justify-content: space-between;
  letter-spacing: 0.05em;
  min-height: 2.75rem;
  padding-top: 0.55rem;
  text-transform: uppercase;
}

.player-dock__link:hover {
  color: var(--cyan-hot);
}

.support-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-card {
  align-items: center;
  background:
    linear-gradient(110deg, rgba(240, 45, 80, 0.12), transparent 32%),
    rgba(17, 24, 42, 0.72);
  border: 1px solid rgba(240, 45, 80, 0.26);
  clip-path: polygon(0 0, calc(100% - 0.8rem) 0, 100% 0.8rem, 100% 100%, 0 100%);
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto 1fr auto;
  min-height: 9rem;
  overflow: hidden;
  padding: 1rem;
  position: relative;
  transition: border-color 0.25s ease, transform 0.3s var(--ease-out);
}

.support-card::after {
  animation: support-current 4.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--ability-red) 0 72%, var(--cyan));
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 58%;
}

.support-card:not(.is-placeholder):hover {
  border-color: var(--line-red);
  transform: translateY(-0.2rem);
}

.gui-status--support {
  animation: gui-telemetry 3.8s steps(5) infinite;
  bottom: 0.65rem;
  height: 0.55rem;
  left: 1rem;
  opacity: 0.28;
  position: absolute;
  width: 7rem;
}

.support-card__index {
  color: var(--ability-red);
  font-family: var(--font-mono);
  font-size: 0.48rem;
}

.support-card__copy {
  display: grid;
  gap: 0.2rem;
}

.support-card__copy strong {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
}

.support-card__copy small {
  color: var(--muted);
  font-size: 0.72rem;
}

.support-card__action {
  align-items: center;
  color: var(--cyan);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.44rem;
  gap: 0.4rem;
  text-transform: uppercase;
}

.connect {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(17rem, 0.55fr) minmax(0, 1fr);
}

.connect__intro {
  align-self: start;
  position: relative;
}

.connect__intro h2 {
  font-size: clamp(2.4rem, 3.75vw, 4rem);
  max-width: 12ch;
  overflow-wrap: normal;
}

.connect__intro > p:nth-of-type(2) {
  color: var(--muted);
  line-height: 1.55;
  max-width: 28rem;
}

.copy-button {
  background: linear-gradient(105deg, rgba(240, 45, 80, 0.88), rgba(150, 45, 97, 0.76));
  color: var(--ice);
  margin-top: 1rem;
}

.copy-button.is-copied {
  background: linear-gradient(105deg, rgba(83, 184, 224, 0.78), rgba(34, 54, 143, 0.72));
}

.throne-spotlight {
  background:
    linear-gradient(105deg, rgba(250, 218, 22, 0.16), transparent 68%),
    rgba(17, 24, 42, 0.72);
  border: 1px solid rgba(250, 218, 22, 0.48);
  display: grid;
  gap: 0.25rem;
  margin-top: 0.8rem;
  max-width: 29rem;
  padding: 0.75rem 0.85rem;
  position: relative;
  transition: border-color 0.25s ease, transform 0.3s var(--ease-out);
}

.throne-spotlight::after {
  background: #fada16;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 34%;
}

.throne-spotlight:hover {
  border-color: #fada16;
  transform: translateX(0.2rem);
}

.throne-spotlight__label,
.throne-spotlight__action {
  color: #fada16;
  font-family: var(--font-mono);
  font-size: 0.43rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.throne-spotlight strong {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
}

.throne-spotlight__action {
  color: var(--frost);
}

.social-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.social-card {
  align-items: center;
  background: rgba(17, 24, 42, 0.68);
  border: 1px solid var(--line);
  color: var(--ice);
  cursor: pointer;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto 1fr auto;
  min-height: 6.5rem;
  overflow: hidden;
  padding: 0.85rem;
  position: relative;
  text-align: left;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.3s var(--ease-out);
  width: 100%;
}

.social-card::before {
  background: var(--ability-red);
  content: "";
  height: 100%;
  inset: 0 auto 0 0;
  transform: scaleY(0.28);
  transform-origin: bottom;
  transition: transform 0.28s var(--ease-cut);
  width: 2px;
}

.social-card::after {
  background: linear-gradient(90deg, rgba(240, 45, 80, 0.11), rgba(83, 184, 224, 0.04));
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.25s ease;
}

.social-card:not(.is-placeholder):hover {
  border-color: var(--line-red);
  transform: translateX(0.2rem);
}

.social-card:not(.is-placeholder):hover::before {
  transform: scaleY(1);
}

.social-card:not(.is-placeholder):hover::after {
  opacity: 1;
}

.social-card--primary {
  animation: primary-channel 5.4s ease-in-out infinite;
  background: linear-gradient(105deg, rgba(240, 45, 80, 0.23), rgba(17, 24, 42, 0.82));
  border-color: rgba(240, 45, 80, 0.54);
  grid-column: 1 / -1;
}

.gui-button-shell--social {
  animation: gui-breathe 5.8s ease-in-out infinite;
  opacity: 0.08;
}

.social-card__brand {
  align-items: center;
  color: var(--ability-red);
  display: inline-flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.social-card__brand .icon {
  height: 1.2rem;
  width: 1.2rem;
}

.social-card__main {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.social-card__main small {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.43rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.social-card__main strong {
  font-size: 0.88rem;
  font-weight: 600;
}

.social-card__contact {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.39rem;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
  text-transform: uppercase;
}

.social-card__action {
  color: var(--frost);
  display: inline-flex;
  position: relative;
  z-index: 1;
}

.social-card__action .icon {
  height: 0.95rem;
  width: 0.95rem;
}

.social-card--copy.is-copied {
  border-color: rgba(83, 184, 224, 0.6);
}

.safe-inbox {
  background:
    linear-gradient(118deg, rgba(240, 45, 80, 0.1), transparent 27%),
    linear-gradient(302deg, rgba(83, 184, 224, 0.08), transparent 31%),
    rgba(5, 6, 10, 0.82);
  border: 1px solid rgba(240, 45, 80, 0.28);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  overflow: hidden;
  padding: clamp(1rem, 2.4vw, 1.75rem);
  position: relative;
}

.safe-inbox::before {
  animation: spectrum-flow 9.5s linear infinite;
  background: linear-gradient(90deg, var(--ability-red) 0 52%, var(--ice) 52% 62%, var(--cyan) 62% 78%, var(--slate) 78% 89%, var(--magenta) 89% 96%, transparent 96%);
  background-size: 190% 100%;
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.safe-inbox__header {
  align-items: end;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.48fr);
  margin-bottom: 1.25rem;
}

.safe-inbox__header h3 {
  color: var(--ice);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.35vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin: 0;
  max-width: 14ch;
  text-transform: uppercase;
}

.safe-inbox__header > p {
  border-left: 2px solid var(--cyan);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0;
  padding-left: 1rem;
}

.submission-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.submission-card {
  background:
    linear-gradient(140deg, rgba(240, 45, 80, 0.09), transparent 42%),
    rgba(9, 13, 24, 0.9);
  border: 1px solid var(--line);
  min-width: 0;
  overflow: hidden;
  padding: clamp(0.9rem, 2vw, 1.25rem);
  position: relative;
}

.submission-card::before {
  background: var(--ability-red);
  content: "";
  height: 2px;
  inset: 0 auto auto 0;
  position: absolute;
  width: 42%;
}

.submission-card--image {
  background:
    linear-gradient(220deg, rgba(83, 184, 224, 0.1), transparent 44%),
    rgba(9, 13, 24, 0.9);
}

.submission-card--image::before {
  background: linear-gradient(90deg, var(--ability-red), var(--ice), var(--cyan));
}

.submission-card > header {
  min-height: 9.5rem;
}

.submission-card__code {
  color: var(--ability-red);
  font-family: var(--font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.submission-card h4 {
  color: var(--frost);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 600;
  margin: 0.5rem 0;
  text-transform: uppercase;
}

.submission-card header p {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0;
}

.submission-card form {
  display: grid;
  gap: 0.75rem;
}

.submission-card form > label:not(.consent-check, .image-drop) {
  color: var(--frost);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.submission-card textarea {
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ice);
  font: 500 0.84rem/1.5 var(--font-interface);
  min-height: 9.5rem;
  padding: 0.8rem;
  resize: vertical;
  width: 100%;
}

.submission-card textarea::placeholder {
  color: var(--muted-2);
}

.submission-card textarea:focus-visible,
.image-drop:focus-within {
  border-color: var(--ability-red);
  box-shadow: 0 0 0 1px var(--ability-red), 0 0 1.2rem rgba(240, 45, 80, 0.12);
  outline: 0;
}

.field-meta {
  color: var(--muted-2);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.4rem;
  gap: 0.6rem;
  justify-content: space-between;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.consent-check {
  align-items: flex-start;
  background: rgba(224, 240, 250, 0.025);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  font-size: 0.67rem;
  gap: 0.65rem;
  grid-template-columns: auto 1fr;
  line-height: 1.45;
  min-height: 3.25rem;
  padding: 0.65rem;
}

.consent-check input {
  accent-color: var(--ability-red);
  height: 1rem;
  margin: 0.1rem 0 0;
  width: 1rem;
}

.secure-action {
  align-items: center;
  background: linear-gradient(105deg, rgba(240, 45, 80, 0.92), rgba(150, 45, 97, 0.82));
  border: 1px solid rgba(255, 52, 95, 0.7);
  color: var(--ice);
  cursor: pointer;
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 600;
  gap: 0.65rem;
  justify-content: space-between;
  letter-spacing: 0.06em;
  min-height: 3.25rem;
  padding: 0.75rem 0.9rem;
  text-transform: uppercase;
}

.secure-action:hover {
  filter: brightness(1.1);
}

.secure-action:disabled {
  cursor: not-allowed;
  filter: grayscale(0.65);
  opacity: 0.48;
}

.secure-action .icon {
  height: 1rem;
  width: 1rem;
}

.form-status {
  color: var(--frost);
  font-family: var(--font-mono);
  font-size: 0.45rem;
  line-height: 1.45;
  margin: 0;
  min-height: 1.3em;
}

.form-status[data-state="success"] {
  color: var(--cyan-hot);
}

.form-status[data-state="error"] {
  color: var(--pulse-hot);
}

.message-receipt {
  background: rgba(83, 184, 224, 0.08);
  border: 1px solid rgba(83, 184, 224, 0.34);
  color: var(--ice);
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
}

.message-receipt[hidden] {
  display: none;
}

.message-receipt strong {
  color: var(--cyan-hot);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.message-receipt span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.message-receipt__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.2rem;
}

.message-receipt__actions a,
.message-receipt__actions button {
  background: transparent;
  border: 0;
  color: var(--cyan);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.44rem;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: rgba(83, 184, 224, 0.35);
  text-underline-offset: 0.25rem;
}

.message-receipt__actions a:hover,
.message-receipt__actions button:hover {
  color: var(--ice);
}

.text-fallback,
.image-fallbacks a {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.44rem;
  min-height: 2.75rem;
  padding-block: 0.65rem;
  text-decoration: underline;
  text-decoration-color: rgba(83, 184, 224, 0.35);
  text-underline-offset: 0.25rem;
  width: fit-content;
}

.image-drop {
  align-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(83, 184, 224, 0.035) 0 1px, transparent 1px 8px),
    rgba(0, 0, 0, 0.38);
  border: 1px dashed rgba(83, 184, 224, 0.45);
  cursor: pointer;
  display: grid;
  justify-items: center;
  min-height: 9.5rem;
  padding: 1rem;
  position: relative;
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.image-drop.is-dragging {
  background-color: rgba(83, 184, 224, 0.1);
  border-color: var(--cyan-hot);
}

.image-drop input {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.image-drop__mark {
  color: var(--ability-red);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.image-drop strong {
  color: var(--frost);
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
}

.image-drop small {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.4rem;
  margin-top: 0.35rem;
  text-transform: uppercase;
}

.image-preview {
  align-items: center;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid var(--line);
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 5rem minmax(0, 1fr);
  min-height: 5rem;
  padding: 0.5rem;
}

.image-preview[hidden] {
  display: none;
}

.image-preview img {
  height: 4rem;
  object-fit: cover;
  width: 5rem;
}

.image-preview span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.42rem;
  line-height: 1.5;
}

.image-fallbacks {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.image-fallbacks[hidden] {
  display: none;
}

.privacy-protocol {
  background: rgba(17, 24, 42, 0.48);
  border: 1px solid var(--line);
  margin-top: 0.8rem;
}

.privacy-protocol summary {
  color: var(--frost);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  min-height: 3.25rem;
  padding: 0.85rem;
  text-transform: uppercase;
}

.privacy-protocol[open] summary {
  border-bottom: 1px solid var(--line);
  color: var(--cyan-hot);
}

.privacy-protocol > div {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.9rem;
}

.privacy-protocol p {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.55;
  margin: 0;
}

.clipboard-proxy {
  height: 1px;
  left: -9999px;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 1px;
}

.site-footer {
  align-items: center;
  background: var(--absolute);
  border-top: 1px solid rgba(240, 45, 80, 0.3);
  color: var(--muted-2);
  display: grid;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  gap: 2rem;
  grid-template-columns: 1fr auto 1fr;
  letter-spacing: 0.07em;
  min-height: 8rem;
  overflow: hidden;
  padding: 1.5rem max(var(--page-pad), env(safe-area-inset-right, 0px)) max(1.5rem, env(safe-area-inset-bottom, 0px)) max(var(--page-pad), env(safe-area-inset-left, 0px));
  position: relative;
  text-transform: uppercase;
}

.site-footer::before {
  animation: spectrum-flow 9s linear infinite;
  background: linear-gradient(90deg, var(--ability-red) 0 42%, var(--pulse-hot) 42% 50%, var(--ice) 50% 58%, var(--cyan) 58% 72%, var(--blue) 72% 82%, var(--slate) 82% 90%, var(--magenta) 90% 96%, transparent 96%);
  background-size: 180% 100%;
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.gui-footer-shell {
  animation: footer-drift 7s ease-in-out infinite;
  height: 3rem;
  left: 50%;
  opacity: 0.045;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18rem;
}

.site-footer__brand {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.site-footer__brand strong {
  color: var(--ice);
  font-weight: 600;
}

.site-footer p {
  margin: 0;
  text-align: center;
}

.site-footer__links {
  display: flex;
  gap: 1rem;
  justify-self: end;
}

.site-footer__links a:hover {
  color: var(--ability-red);
}

.reveal {
  filter: blur(0.38rem);
  opacity: 0;
  transform: translateY(1rem);
  transition: filter 0.72s ease, opacity 0.7s ease, transform 0.8s var(--ease-out);
  transition-delay: calc(var(--card-index, 0) * 70ms);
}

.reveal.is-visible {
  filter: none;
  opacity: 1;
  transform: translateY(0);
}

@keyframes scanline-roll {
  to {
    background-position: 0 12px, 0 0;
  }
}

@keyframes vignette-breathe {
  0%,
  100% {
    opacity: 0.84;
  }
  50% {
    opacity: 1;
  }
}

@keyframes boot-gate-exit {
  0%,
  64% {
    opacity: 1;
    visibility: visible;
  }
  78% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  100% {
    clip-path: inset(49.8% 0 49.8% 0);
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes boot-scan {
  0% {
    opacity: 0;
    transform: scaleX(0.05);
  }
  22%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes boot-mark-lock {
  0% {
    opacity: 0;
    transform: translateX(-0.28rem) skewX(-8deg);
  }
  24% {
    opacity: 0.78;
    transform: translateX(0.18rem) skewX(4deg);
  }
  42% {
    opacity: 0.38;
    transform: translateX(-0.08rem);
  }
  62%,
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

@keyframes boot-progress {
  from {
    transform: scaleX(0.03);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes boot-copy-lock {
  0%,
  32% {
    opacity: 0;
  }
  46% {
    opacity: 0.35;
    transform: translateX(0.16rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes spectrum-flow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 180% 0;
  }
}

@keyframes brand-current {
  0%,
  100% {
    filter: drop-shadow(0 0 0.45rem rgba(240, 45, 80, 0.32));
  }
  48% {
    filter: drop-shadow(0 0 0.85rem rgba(240, 45, 80, 0.55)) drop-shadow(-0.18rem 0 0.5rem rgba(83, 184, 224, 0.2));
  }
}

@keyframes data-rain {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 28rem 12rem, -21rem 18rem;
  }
}

@keyframes grid-drift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 5rem 5rem, 5rem 5rem, 1rem 1rem, 1rem 1rem;
  }
}

@keyframes grid-sweep {
  from {
    transform: translateY(-42vh);
  }
  to {
    transform: translateY(62vh);
  }
}

@keyframes telemetry-dash {
  0%,
  12% {
    opacity: 0;
    transform: translateX(-115%);
  }
  20%,
  72% {
    opacity: 0.52;
  }
  84%,
  100% {
    opacity: 0;
    transform: translateX(650%);
  }
}

@keyframes pointer-breathe {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@keyframes signal-sweep {
  from {
    background-position: 170% 0;
  }
  to {
    background-position: -35% 0;
  }
}

@keyframes line-charge {
  0%,
  100% {
    opacity: 0.58;
    transform: scaleX(0.42);
    transform-origin: left;
  }
  52% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes decode-lock {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translateX(-0.25rem);
  }
  38% {
    clip-path: inset(0 24% 0 0);
    opacity: 0.7;
  }
  54% {
    clip-path: inset(0 58% 0 0);
    transform: translateX(0.12rem);
  }
  100% {
    clip-path: inset(0);
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes title-glitch-cyan {
  0%,
  82%,
  88%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }
  83% {
    clip-path: inset(12% 0 63% 0);
    opacity: 0.68;
    transform: translateX(calc(var(--glitch-offset) * -1));
  }
  85% {
    clip-path: inset(48% 0 29% 0);
    opacity: 0.34;
    transform: translateX(calc(var(--glitch-offset) * 1.4));
  }
  87% {
    clip-path: inset(72% 0 7% 0);
    opacity: 0.55;
    transform: translateX(calc(var(--glitch-offset) * -0.6));
  }
}

@keyframes title-glitch-red {
  0%,
  81%,
  87%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }
  82% {
    clip-path: inset(63% 0 9% 0);
    opacity: 0.62;
    transform: translateX(var(--glitch-offset));
  }
  84% {
    clip-path: inset(27% 0 50% 0);
    opacity: 0.28;
    transform: translateX(calc(var(--glitch-offset) * -1.2));
  }
  86% {
    clip-path: inset(7% 0 75% 0);
    opacity: 0.5;
    transform: translateX(calc(var(--glitch-offset) * 0.7));
  }
}

@keyframes control-sweep {
  0%,
  66% {
    transform: translateX(-125%);
  }
  84%,
  100% {
    transform: translateX(125%);
  }
}

@keyframes shell-current {
  0%,
  100% {
    opacity: 0.68;
    transform: scaleX(0.99);
  }
  50% {
    opacity: 0.84;
    transform: scaleX(1.012);
  }
}

@keyframes arrow-nudge {
  0%,
  100% {
    transform: translateX(0) rotate(-90deg);
  }
  50% {
    transform: translateX(0.22rem) rotate(-90deg);
  }
}

@keyframes gui-breathe {
  0%,
  100% {
    filter: brightness(0.82);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.28) drop-shadow(0 0 0.32rem rgba(83, 184, 224, 0.22));
    transform: scale(1.004);
  }
}

@keyframes data-node-pulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 rgba(240, 45, 80, 0);
  }
  50% {
    box-shadow: inset 0 0 1.4rem rgba(240, 45, 80, 0.055);
  }
}

@keyframes strip-node {
  0%,
  100% {
    filter: brightness(0.72);
    opacity: 0.46;
  }
  50% {
    filter: brightness(1.45);
    opacity: 1;
  }
}

@keyframes gui-telemetry {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    filter: brightness(0.72);
    transform: scaleX(0.96);
    transform-origin: left;
  }
  42% {
    clip-path: inset(0 18% 0 0);
    filter: brightness(1.4) drop-shadow(0 0 0.35rem rgba(240, 45, 80, 0.28));
    transform: scaleX(1);
    transform-origin: left;
  }
  48% {
    clip-path: inset(0 3% 0 0);
  }
}

@keyframes selector-radar {
  0%,
  12% {
    opacity: 0;
    transform: translateX(-110%);
  }
  20%,
  72% {
    opacity: 1;
  }
  84%,
  100% {
    opacity: 0;
    transform: translateX(350%);
  }
}

@keyframes selector-tab-scan {
  0%,
  16% {
    transform: translateX(-100%);
  }
  76%,
  100% {
    transform: translateX(180%);
  }
}

@keyframes status-beacon {
  0%,
  100% {
    opacity: 0.42;
    transform: rotate(45deg) scale(0.72);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.12);
  }
}

@keyframes card-beacon {
  0%,
  100% {
    opacity: 0.48;
    transform: rotate(45deg) scale(0.78);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.16);
  }
}

@keyframes progress-charge {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}

@keyframes orbit-spin {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes orbit-counterspin {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes orbit-beacon {
  0%,
  100% {
    opacity: 0.45;
    transform: rotate(45deg) scale(0.72);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.28);
  }
}

@keyframes fact-meter {
  0%,
  100% {
    opacity: 0.48;
    transform: scaleX(0.34);
    transform-origin: left;
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes orbit-wave {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 12rem 0;
  }
}

@keyframes orbit-scan {
  0%,
  14% {
    opacity: 0;
    transform: translateX(-105%);
  }
  24%,
  72% {
    opacity: 0.9;
  }
  86%,
  100% {
    opacity: 0;
    transform: translateX(310%);
  }
}

@keyframes profile-frame-pulse {
  0%,
  100% {
    filter: brightness(0.75);
    opacity: 0.12;
  }
  50% {
    filter: brightness(1.35) drop-shadow(0 0 0.7rem rgba(83, 184, 224, 0.28));
    opacity: 0.3;
  }
}

@keyframes diamond-spin {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(405deg);
  }
}

@keyframes diamond-spin-reverse {
  from {
    transform: rotate(-12deg);
  }
  to {
    transform: rotate(-372deg);
  }
}

@keyframes orbit-core {
  0%,
  100% {
    opacity: 0.65;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.78);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1.24);
  }
}

@keyframes pattern-flicker {
  0%,
  100% {
    opacity: 0.2;
  }
  48% {
    opacity: 0.42;
  }
  52% {
    opacity: 0.26;
  }
}

@keyframes active-track-pulse {
  0%,
  100% {
    box-shadow: 0 0 1rem color-mix(in srgb, var(--track-accent) 8%, transparent);
  }
  50% {
    box-shadow: 0 0 2.2rem color-mix(in srgb, var(--track-accent) 18%, transparent);
  }
}

@keyframes player-scan {
  0%,
  12% {
    opacity: 0;
    transform: translateX(-100%);
  }
  24%,
  74% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0;
    transform: translateX(285%);
  }
}

@keyframes support-current {
  0%,
  100% {
    opacity: 0.56;
    transform: scaleX(0.42);
    transform-origin: left;
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes primary-channel {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(240, 45, 80, 0);
  }
  50% {
    box-shadow: 0 0 2rem rgba(240, 45, 80, 0.1), inset 0 0 1.6rem rgba(83, 184, 224, 0.035);
  }
}

@keyframes footer-drift {
  0%,
  100% {
    opacity: 0.035;
    transform: translate(-50%, -50%) scaleX(0.92);
  }
  50% {
    opacity: 0.09;
    transform: translate(-50%, -50%) scaleX(1.08);
  }
}

@keyframes state-flicker {
  0%,
  93%,
  100% {
    opacity: 1;
  }
  94%,
  96% {
    opacity: 0.3;
  }
}

@keyframes pulse-ring {
  from {
    opacity: 0.8;
    transform: scale(0.65);
  }
  to {
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes scroll-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(-0.15rem) rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: translateY(0.2rem) rotate(45deg);
  }
}

@keyframes card-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  18% {
    opacity: 0.48;
  }
  82% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: translateY(34rem);
  }
}

@keyframes equalize {
  from {
    transform: scaleY(0.45);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes panel-enter {
  from {
    clip-path: inset(0 0 100% 0);
    filter: blur(0.25rem);
    opacity: 0;
    transform: translateX(-0.4rem) skewX(-0.4deg);
  }
  to {
    clip-path: inset(0);
    filter: none;
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr);
  }

  .hero h1 {
    font-size: clamp(4.5rem, 9vw, 7.2rem);
  }

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

  .identity-grid > div:nth-child(3n + 1) {
    border-left-color: var(--ability-red);
  }

  .identity-grid > div:nth-child(3n + 2) {
    border-left-color: var(--cyan);
  }

  .identity-grid > div:nth-child(3n) {
    border-left-color: var(--slate);
  }

  .project-grid,
  .upcoming-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-grid .project-card:last-child,
  .open-slot {
    grid-column: 1 / -1;
    min-height: 22rem;
  }

  .about-copy {
    grid-column: span 6;
  }

  .fact-grid {
    grid-column: span 6;
  }

  .profile-topology {
    grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.72fr);
  }

  .game-library__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-library__grid > section {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }

  .game-library__grid > section:nth-child(2n) {
    border-right: 0;
  }

  .game-library__grid > section:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .genre-matrix__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .genre-matrix__grid > section {
    border-bottom: 1px solid var(--line);
  }

  .genre-matrix__grid > section:nth-child(3n) {
    border-right: 0;
  }

  .genre-matrix__grid > section:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .music-console__body {
    grid-template-columns: 1fr;
  }

  .player-dock {
    position: relative;
    top: auto;
  }
}

@media (max-width: 860px) {
  :root {
    --glitch-offset: 0.026em;
    --page-pad: clamp(0.9rem, 4vw, 1.35rem);
  }

  html {
    scroll-behavior: auto;
  }

  body::before {
    animation-duration: 18s;
  }

  body::after {
    animation-duration: 12s;
  }

  .site-shell::before {
    opacity: 0.12;
    transform: none;
  }

  .site-shell::after {
    animation-duration: 30s;
    opacity: 0.16;
  }

  .ambient-grid {
    animation-duration: 24s;
    opacity: 0.27;
    transform: none;
  }

  .ambient-grid::before {
    animation-duration: 14s;
    opacity: 0.68;
  }

  .ambient-grid::after {
    animation-duration: 9s;
    width: 28vw;
  }

  .pointer-light {
    display: none;
  }

  .hero h1 > span::before,
  .hero h1 > span::after {
    animation-duration: 9.4s;
  }

  .selector-grid::before {
    animation-duration: 8s;
    opacity: 0.65;
  }

  .project-card__scan {
    animation-duration: 8.5s;
  }

  .about-orbit::before {
    opacity: 0.2;
  }

  .identity-grid > div {
    animation: none;
  }

  .reveal {
    filter: blur(0.18rem);
  }

  .site-header {
    grid-template-areas: "brand state menu";
    grid-template-columns: auto 1fr auto;
  }

  .site-header nav {
    background:
      linear-gradient(135deg, rgba(240, 45, 80, 0.16), transparent 38%),
      linear-gradient(315deg, rgba(83, 184, 224, 0.08), transparent 36%),
      rgba(0, 0, 0, 0.97);
    border: 1px solid rgba(240, 45, 80, 0.5);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.58);
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    left: max(var(--page-pad), env(safe-area-inset-left, 0px));
    opacity: 0;
    padding: 0.55rem;
    pointer-events: none;
    position: fixed;
    right: max(var(--page-pad), env(safe-area-inset-right, 0px));
    top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 0.65rem);
    transform: translateY(-0.8rem);
    transition: opacity 0.22s ease, transform 0.28s var(--ease-out), visibility 0s linear 0.28s;
    visibility: hidden;
  }

  .site-header nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
    visibility: visible;
  }

  .site-header nav a {
    align-items: center;
    background: rgba(17, 24, 42, 0.76);
    border: 1px solid var(--line);
    display: flex;
    font-size: 0.74rem;
    min-height: 3.75rem;
    padding: 0.8rem;
  }

  .site-header nav a::after {
    bottom: 0;
  }

  .menu-toggle {
    display: block;
  }

  .header-state {
    margin-right: 0.75rem;
  }

  .hero {
    align-items: start;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 4.5rem;
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 3.75rem);
  }

  .hero::after {
    width: calc(100% - 11rem);
  }

  .hero__rail {
    display: none;
  }

  .hero__copy {
    max-width: 44rem;
  }

  .hero h1 {
    font-size: clamp(4.1rem, 16vw, 7.5rem);
  }

  .hero h1 > span:last-child {
    margin-left: clamp(1rem, 8vw, 3.5rem);
  }

  .hero__visual {
    justify-self: center;
    max-width: 44rem;
    width: 100%;
  }

  .safe-inbox__header,
  .submission-grid {
    grid-template-columns: 1fr;
  }

  .safe-inbox__header {
    align-items: start;
    gap: 0.8rem;
  }

  .safe-inbox__header h3 {
    max-width: 16ch;
  }

  .submission-card > header {
    min-height: 0;
    padding-bottom: 1rem;
  }

  .identity-deck {
    margin-top: 0;
  }

  .hero__system-strip {
    margin-top: 0;
  }

  .scroll-cue {
    bottom: 1.2rem;
  }

  .selector-heading,
  .section-heading {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .selector-heading h2,
  .section-heading h2 {
    font-size: clamp(2.5rem, 10vw, 4.2rem);
  }

  .selector-grid {
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
    top: auto;
  }

  .selector-tab {
    min-height: 6rem;
    padding: 0.8rem;
  }

  .selector-status {
    justify-content: flex-start;
  }

  .project-grid,
  .upcoming-grid {
    grid-template-columns: 1fr;
  }

  .project-card,
  .project-grid .project-card:last-child,
  .open-slot {
    grid-column: auto;
    min-height: 0;
  }

  .project-card__body {
    margin-top: 2.8rem;
  }

  .about-copy,
  .fact-grid {
    grid-column: 1 / -1;
  }

  .about-orbit {
    min-height: 8rem;
  }

  .about-orbit > div {
    height: 6rem;
    width: 6rem;
  }

  .profile-archive__header,
  .music-console__header,
  .profile-topology {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .typology-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .typology-grid > div:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .typology-grid > div:nth-child(2n) {
    border-right: 0;
  }

  .typology-grid > div:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .typology-grid > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .preference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preference-card:last-child {
    grid-column: 1 / -1;
    min-height: 0;
  }

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

  .support-grid {
    grid-template-columns: 1fr;
  }

  .support-card {
    min-height: 6.75rem;
  }

  .connect {
    grid-template-columns: 1fr;
  }

  .connect__intro {
    position: relative;
    top: auto;
  }

  .connect__intro h2 {
    max-width: 12ch;
  }

  .site-footer {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .site-footer p {
    text-align: left;
  }

  .site-footer__links {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 17px;
  }

  .boot-gate {
    animation-duration: 1.2s;
    gap: 0.65rem;
  }

  .boot-gate__mark {
    font-size: 3.8rem;
  }

  .boot-gate__copy {
    font-size: 0.4rem;
    letter-spacing: 0.11em;
  }

  .site-shell::after {
    display: none;
  }

  .ambient-grid::after {
    opacity: 0.32;
    width: 36vw;
  }

  .selector-tab.is-active::after {
    animation-duration: 4.2s;
  }

  .open-slot__orbit {
    animation-duration: 24s;
  }

  .track-tile.is-active {
    animation-duration: 4.6s;
  }

  .site-header::after {
    width: 3rem;
  }

  .brand-mark span {
    display: none;
  }

  .header-state__label {
    display: none;
  }

  .header-state time {
    display: none;
  }

  .site-header nav {
    grid-template-columns: 1fr 1fr;
  }

  .site-header nav a {
    min-height: 3.5rem;
  }

  .hero {
    gap: 1.2rem;
    padding-bottom: 4rem;
  }

  .eyebrow {
    font-size: 0.46rem;
    gap: 0.55rem;
    margin-bottom: 1.4rem;
  }

  .eyebrow__line {
    width: 2rem;
  }

  .eyebrow__index {
    padding-left: 0.55rem;
  }

  .hero__handle {
    font-size: 0.58rem;
  }

  .hero h1 {
    font-size: clamp(3.7rem, 20vw, 6.2rem);
    line-height: 0.72;
  }

  .hero__statement {
    font-size: 1rem;
    margin-top: 1.65rem;
  }

  .hero__intro {
    font-size: 0.82rem;
  }

  .main-link-hub__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }

  .main-link-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-link {
    min-height: 4.25rem;
    padding: 0.55rem;
  }

  .main-link__copy strong {
    font-size: 0.66rem;
  }

  .main-link__copy small {
    font-size: 0.34rem;
  }

  .first-visit-guide__intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .first-visit-guide__intro span {
    text-align: left;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
  }

  .hero__status {
    align-items: flex-start;
  }

  .identity-deck {
    clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% 0.75rem, 100% calc(100% - 0.75rem), calc(100% - 0.75rem) 100%, 0 100%);
    padding: 0.75rem;
  }

  .identity-deck__header {
    align-items: flex-start;
    gap: 0.6rem;
  }

  .identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .identity-grid > div,
  .identity-grid > div:nth-child(3n + 1),
  .identity-grid > div:nth-child(3n + 2),
  .identity-grid > div:nth-child(3n) {
    min-height: 3.15rem;
    padding: 0.48rem 0.5rem;
  }

  .identity-grid > div:nth-child(2n + 1) {
    border-left-color: var(--ability-red);
  }

  .identity-grid > div:nth-child(2n) {
    border-left-color: var(--cyan);
  }

  .identity-grid dd {
    font-size: 0.66rem;
  }

  .hero__system-strip {
    display: grid;
    grid-template-columns: auto auto 1fr;
  }

  .hero__system-strip span:nth-of-type(3),
  .hero__system-strip span:nth-of-type(4),
  .hero__system-strip i:nth-of-type(2),
  .hero__system-strip i:nth-of-type(3) {
    display: none;
  }

  .section-selector {
    padding-top: 2.75rem;
  }

  .selector-heading {
    gap: 0.9rem;
    margin-bottom: 1.1rem;
  }

  .selector-heading h2,
  .section-heading h2 {
    font-size: clamp(2.25rem, 12vw, 3.35rem);
  }

  .selector-heading > p,
  .section-heading > p {
    font-size: 0.78rem;
  }

  .selector-grid {
    padding: 0.3rem;
  }

  .selector-tab {
    gap: 0.45rem;
    min-height: 5.6rem;
    padding: 0.68rem;
  }

  .selector-tab__copy strong {
    font-size: 0.96rem;
  }

  .selector-tab__copy small {
    font-size: 0.38rem;
  }

  .selector-tab__meta {
    display: none;
  }

  .section-frame {
    padding-block: 3.7rem;
  }

  .project-card {
    padding: 0.9rem;
  }

  .project-card__body {
    margin-top: 2.4rem;
  }

  .project-card h3 {
    font-size: 1.7rem;
  }

  .open-slot {
    min-height: 23rem;
  }

  .about-copy {
    min-height: 0;
    padding: 1.15rem;
  }

  .about-copy h3 {
    font-size: clamp(2rem, 11vw, 3rem);
    margin-top: 3.4rem;
  }

  .about-copy__signature {
    bottom: auto;
    flex-wrap: wrap;
    left: auto;
    margin-top: 1.4rem;
    position: relative;
  }

  .fact {
    min-height: 7rem;
    padding: 0.75rem;
  }

  .about-orbit {
    padding: 0.75rem;
  }

  .about-orbit p {
    max-width: 14rem;
    text-align: right;
  }

  .profile-archive,
  .music-console {
    margin-left: calc(0px - var(--page-pad) + 0.3rem);
    margin-right: calc(0px - var(--page-pad) + 0.3rem);
    padding: 0.9rem;
  }

  .profile-archive__header,
  .music-console__header {
    gap: 0.8rem;
  }

  .profile-archive__header h3,
  .music-console__header h3 {
    font-size: clamp(1.8rem, 10vw, 2.65rem);
  }

  .profile-archive__header > p,
  .music-console__header > p {
    font-size: 0.7rem;
  }

  .typology-grid > div {
    min-height: 6rem;
    padding: 0.7rem;
  }

  .typology-grid dd {
    font-size: 1.25rem;
  }

  .preference-grid,
  .game-library__grid,
  .genre-matrix__grid {
    grid-template-columns: 1fr;
  }

  .preference-card,
  .preference-card:last-child {
    grid-column: auto;
    min-height: 0;
  }

  .preference-card header {
    min-height: 0;
  }

  .game-library__grid > section,
  .game-library__grid > section:nth-child(2n),
  .game-library__grid > section:nth-child(3n) {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    min-height: 0;
  }

  .game-library__grid > section:last-child {
    border-bottom: 0;
  }

  .genre-matrix__grid > section,
  .genre-matrix__grid > section:nth-child(3n) {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    min-height: 0;
  }

  .genre-matrix__grid > section:last-child {
    border-bottom: 0;
  }

  .track-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .track-tile {
    padding: 0.65rem;
  }

  .track-tile__glyph {
    height: 2.15rem;
  }

  .track-tile__copy strong {
    font-size: 0.72rem;
  }

  .player-dock {
    padding: 0.65rem;
  }

  .support-card {
    min-height: 6rem;
    padding: 0.8rem;
  }

  .social-grid {
    grid-template-columns: 1fr;
  }

  .social-card,
  .social-card--primary {
    grid-column: auto;
    min-height: 5.7rem;
  }

  .copy-button {
    width: 100%;
  }

  .safe-inbox {
    padding: 0.85rem;
  }

  .safe-inbox__header h3 {
    font-size: clamp(1.8rem, 10vw, 2.65rem);
  }

  .privacy-protocol > div {
    grid-template-columns: 1fr;
  }

  .site-footer__links {
    flex-wrap: wrap;
  }
}

@media (max-width: 390px) {
  .header-state {
    margin-right: 0.45rem;
  }

  .site-header nav a {
    font-size: 0.67rem;
    padding: 0.65rem;
  }

  .hero h1 {
    font-size: clamp(3.35rem, 19vw, 4.55rem);
  }

  .hero__statement {
    font-size: 0.92rem;
  }

  .first-visit-guide__routes {
    grid-template-columns: 1fr;
  }

  .first-visit-route {
    min-height: 4.2rem;
  }

  .identity-deck__header strong {
    display: none;
  }

  .identity-grid dd {
    font-size: 0.61rem;
  }

  .selector-tab {
    min-height: 5.2rem;
    padding: 0.58rem;
  }

  .selector-tab__index {
    font-size: 0.42rem;
  }

  .selector-tab__copy strong {
    font-size: 0.88rem;
  }

  .fact {
    min-height: 6.2rem;
  }

  .about-orbit > div {
    height: 5rem;
    width: 5rem;
  }

  .about-orbit p {
    font-size: 0.4rem;
    max-width: 9rem;
  }

  .track-tile__copy strong {
    font-size: 0.66rem;
  }

  .track-tile__copy small {
    font-size: 0.34rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .site-shell::before,
  .ambient-grid {
    transform: none;
    transition: none;
  }

  .pointer-light {
    display: none;
  }

  .project-card__scan {
    animation: none;
    opacity: 0.16;
    transform: translateY(9rem);
  }

  .button,
  .copy-button,
  .menu-toggle,
  .site-header nav a,
  .text-link,
  .icon-link,
  .player-dock__link,
  .player-dock__consent,
  .first-visit-route,
  .secure-action,
  .text-fallback,
  .image-fallbacks a,
  .privacy-protocol summary {
    min-height: 2.75rem;
  }

  .button:hover,
  .copy-button:hover,
  .project-card:hover,
  .selector-tab:hover,
  .social-card:not(.is-placeholder):hover,
  .support-card:not(.is-placeholder):hover,
  .track-tile:hover {
    filter: none;
    transform: none;
  }

  .selector-tab:hover:not(.is-active) {
    background: color-mix(in srgb, var(--panel-raised) 90%, var(--graphite-2));
    border-color: rgba(160, 216, 246, 0.09);
  }

  .selector-tab:hover:not(.is-active)::before {
    transform: scaleY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    filter: none;
    opacity: 1;
    transform: none;
  }

  .boot-gate,
  .pointer-light {
    display: none;
  }

  .hero h1 > span::before,
  .hero h1 > span::after {
    content: none;
  }

  .ambient-grid::before,
  .ambient-grid::after,
  .selector-grid::before,
  .selector-tab::after,
  .about-orbit::after,
  .player-dock::before,
  :is(.button, .copy-button)::before {
    display: none;
  }
}

.selector-reference {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  justify-content: center;
  margin: 1rem auto 0;
  max-width: 70rem;
}

.selector-reference strong,
.selector-reference span {
  border: 1px solid var(--line);
  font-size: 0.68rem;
  padding: 0.38rem 0.55rem;
}

.selector-reference strong {
  background: var(--ability-red);
  border-color: var(--ability-red);
  color: var(--ice);
}

@media (max-width: 620px) {
  .selector-reference {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .selector-reference strong {
    grid-column: 1 / -1;
  }
}