:root {
  --ks-yellow: #e4ff36;
  --ks-cyan: #6ffcff;
  --ks-dark: #050708;
  --ks-panel: rgba(8, 12, 14, .62);
  --ks-panel-strong: rgba(10, 16, 18, .82);
  --ks-line: rgba(228, 255, 54, .28);
  --ks-white: rgba(245, 255, 255, .92);
  --ks-dim: rgba(245, 255, 255, .56);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #020303;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ks-white);
}

button {
  font-family: inherit;
}

.ks-bg,
.ks-bg-video,
.ks-bg-fallback,
.ks-scanlines,
.ks-noise,
.ks-vignette {
  position: fixed;
  inset: 0;
}

.ks-bg {
  z-index: 0;
  background: radial-gradient(circle at center, #253331 0%, #060808 52%, #000 100%);
}

.ks-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.25) contrast(.82) brightness(.44) blur(1px);
  opacity: .48;
  transform: scale(1.035);
}

.ks-bg-fallback {
  background:
    radial-gradient(circle at 25% 20%, rgba(111,252,255,.16), transparent 24%),
    radial-gradient(circle at 75% 70%, rgba(228,255,54,.12), transparent 26%),
    linear-gradient(120deg, rgba(5,8,9,.95), rgba(12,23,25,.72), rgba(0,0,0,.95));
  animation: bgShift 9s ease-in-out infinite alternate;
}

@keyframes bgShift {
  from { transform: scale(1) translate3d(0,0,0); opacity: .58; }
  to { transform: scale(1.08) translate3d(-2%,1%,0); opacity: .82; }
}

.ks-scanlines {
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0,
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: .28;
  mix-blend-mode: screen;
}

.ks-noise {
  pointer-events: none;
  opacity: .08;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 37px 41px;
  animation: noiseDrift 2.8s steps(3) infinite;
}

@keyframes noiseDrift {
  0% { transform: translate(0,0); }
  33% { transform: translate(-8px,5px); }
  66% { transform: translate(5px,-6px); }
  100% { transform: translate(0,0); }
}

.ks-vignette {
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78), transparent 22%, transparent 78%, rgba(0,0,0,.78)),
    radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.96) 100%);
}

.ks-app {
  position: relative;
  z-index: 1;
  height: 100vh;
  padding: 34px 42px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ks-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 112px;
}

.ks-kicker {
  color: var(--ks-cyan);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .78;
}

h1 {
  margin: 4px 0 0;
  font-size: clamp(64px, 8vw, 132px);
  line-height: .78;
  letter-spacing: -.08em;
  color: var(--ks-yellow);
  text-shadow:
    0 0 18px rgba(228,255,54,.22),
    0 0 44px rgba(111,252,255,.08);
}

.ks-subtitle {
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: .5em;
  color: var(--ks-white);
  opacity: .82;
}

.ks-topnav {
  display: flex;
  gap: 8px;
  padding-bottom: 10px;
}

.ks-nav {
  height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.34);
  color: var(--ks-dim);
  letter-spacing: .12em;
  font-size: 12px;
  cursor: pointer;
  transform: skew(-12deg);
}

.ks-nav span,
.ks-nav {
  text-transform: uppercase;
}

.ks-nav.active,
.ks-nav:hover {
  border-color: var(--ks-yellow);
  color: #000;
  background: var(--ks-yellow);
}

.ks-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 290px 1fr 300px;
  gap: 20px;
}

.ks-panel {
  border: 1px solid var(--ks-line);
  background: var(--ks-panel);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}

.ks-panel-title {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(228,255,54,.18);
  color: var(--ks-yellow);
  font-size: 11px;
  letter-spacing: .24em;
}

.ks-side,
.ks-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ks-status {
  padding-bottom: 10px;
}

.ks-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.ks-row span {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--ks-dim);
}

.ks-row strong {
  color: var(--ks-white);
  font-size: 18px;
  letter-spacing: .04em;
}

.ks-telemetry {
  padding-bottom: 16px;
}

.ks-meter {
  margin: 18px 16px 14px;
  height: 7px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}

.ks-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ks-yellow), var(--ks-cyan));
  box-shadow: 0 0 18px rgba(228,255,54,.35);
}

.ks-mini {
  margin: 9px 16px;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--ks-dim);
}

.ks-main {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(135deg, rgba(228,255,54,.08), transparent 22%),
    linear-gradient(180deg, rgba(7,12,14,.42), rgba(0,0,0,.18));
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.ks-main:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(111,252,255,.11) 50%, transparent 100%);
  opacity: .26;
  transform: translateX(-100%);
  animation: sweep 6s ease-in-out infinite;
}

@keyframes sweep {
  0%, 58% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.ks-screen {
  position: absolute;
  inset: 0;
  padding: 34px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}

.ks-screen.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ks-section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
}

.ks-section-head span {
  color: var(--ks-cyan);
  font-size: 13px;
  letter-spacing: .28em;
}

.ks-section-head h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 76px);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.ks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 14px;
}

.ks-card {
  position: relative;
  min-height: 136px;
  padding: 18px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.34);
  color: var(--ks-white);
  cursor: pointer;
  overflow: hidden;
}

.ks-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(228,255,54,.14), transparent 44%);
  opacity: 0;
}

.ks-card:hover:before,
.ks-card.selected:before {
  opacity: 1;
}

.ks-card.selected {
  border-color: var(--ks-yellow);
  box-shadow: inset 0 0 0 1px rgba(228,255,54,.26), 0 0 32px rgba(228,255,54,.09);
}

.ks-card.locked {
  opacity: .42;
}

.ks-card small {
  display: block;
  margin-bottom: 22px;
  color: var(--ks-cyan);
  letter-spacing: .2em;
  font-size: 10px;
}

.ks-card strong {
  display: block;
  font-size: 22px;
  letter-spacing: -.02em;
}

.ks-card em {
  display: block;
  margin-top: 8px;
  color: var(--ks-dim);
  font-style: normal;
  font-size: 12px;
}

.ks-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.ks-pill {
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.42);
  color: var(--ks-white);
  letter-spacing: .14em;
  font-size: 12px;
  cursor: pointer;
}

.ks-pill.selected,
.ks-pill:hover {
  border-color: var(--ks-yellow);
  background: var(--ks-yellow);
  color: #030303;
}

.ks-team-stage {
  height: 280px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at center, rgba(228,255,54,.12), transparent 35%),
    rgba(0,0,0,.28);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ks-logo-orbit {
  width: 280px;
  height: 180px;
  border: 1px solid rgba(228,255,54,.24);
  display: grid;
  place-items: center;
  transform: perspective(600px) rotateX(58deg) rotateZ(-18deg);
  animation: orbit 7s linear infinite;
}

@keyframes orbit {
  from { transform: perspective(600px) rotateX(58deg) rotateZ(-18deg); }
  to { transform: perspective(600px) rotateX(58deg) rotateZ(342deg); }
}

.ks-logo-name {
  transform: rotateZ(18deg);
  color: var(--ks-yellow);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.04em;
  text-align: center;
  text-shadow: 0 0 24px rgba(228,255,54,.28);
}

.ks-track-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.ks-track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 66px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: var(--ks-white);
  cursor: pointer;
  text-align: left;
}

.ks-track b {
  font-size: 18px;
  letter-spacing: -.02em;
}

.ks-track span {
  color: var(--ks-dim);
  font-size: 11px;
  letter-spacing: .14em;
}

.ks-track.selected,
.ks-track:hover {
  border-color: var(--ks-yellow);
  background: rgba(228,255,54,.13);
}

.ks-preview {
  flex: 1;
  padding-bottom: 18px;
}

.ks-ship-wire {
  position: relative;
  height: 180px;
  margin: 22px 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(circle at center, rgba(111,252,255,.16), transparent 40%);
  overflow: hidden;
}

.ks-wire-core,
.ks-wire-left,
.ks-wire-right {
  position: absolute;
  background: transparent;
  border: 2px solid var(--ks-yellow);
  filter: drop-shadow(0 0 10px rgba(228,255,54,.32));
}

.ks-wire-core {
  width: 110px;
  height: 42px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) skew(-18deg);
}

.ks-wire-left {
  width: 82px;
  height: 32px;
  left: 38px;
  top: 76px;
  transform: skew(-28deg);
}

.ks-wire-right {
  width: 82px;
  height: 32px;
  right: 38px;
  top: 76px;
  transform: skew(28deg);
}

.ks-preview p {
  margin: 0 18px;
  color: var(--ks-dim);
  font-size: 12px;
  line-height: 1.55;
}

.ks-launch {
  height: 112px;
  border: 0;
  background: var(--ks-yellow);
  color: #020202;
  cursor: pointer;
  text-align: left;
  padding: 18px 22px;
  box-shadow: 0 0 38px rgba(228,255,54,.22);
}

.ks-launch span {
  display: block;
  font-size: 12px;
  letter-spacing: .36em;
}

.ks-launch b {
  display: block;
  font-size: 46px;
  line-height: .9;
  letter-spacing: -.08em;
}

.ks-footer {
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.45);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .ks-app {
    padding: 24px;
  }

  .ks-layout {
    grid-template-columns: 230px 1fr;
  }

  .ks-right {
    display: none;
  }

  .ks-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}