:root {
  --bg:#071015;--panel:rgba(13,29,36,.84);--line:rgba(194,239,231,.16);
  --text:#edf8f3;--muted:#94aaa7;--glow:#b8ffdb;--glow-strong:#70f2c1;
  --danger:#ff9b9b;--warm:#ffd7a1;--radius:22px;--shadow:0 24px 80px rgba(0,0,0,.3);--secBG:#31434791;--secLine:rgba(194, 239, 231, 0.19);
}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at 18% 18%,rgba(54,126,117,.18),transparent 35%),radial-gradient(circle at 82% 76%,rgba(52,91,122,.15),transparent 38%),var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}button{color:inherit}a{color:inherit}#swarmCanvas{position:fixed;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none;z-index:0}.shell{width:min(1180px,calc(100% - 36px));margin-inline:auto;position:relative;z-index:1}.topbar{min-height:76px;display:flex;align-items:center;gap:24px;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;text-decoration:none;font-weight:800;letter-spacing:.12em}.brand-mark{color:var(--glow);filter:drop-shadow(0 0 10px rgba(112,242,193,.8))}nav{display:flex;gap:8px;flex-wrap:wrap}nav a{color:var(--muted);text-decoration:none;padding:9px 11px;border-radius:999px}nav a:hover,nav a.active{color:var(--text);background:rgba(255,255,255,.055)}.connection{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 11px;border-radius:999px;border:1px solid var(--line)}.connection.online{color:var(--glow)}.connection.offline{color:var(--danger)}main{padding:72px 0 54px}.view{display:none;animation:surface .4s ease}.view.active{display:block}@keyframes surface{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.hero{max-width:880px;padding:42px 0 48px}.eyebrow{color:var(--glow-strong);font-size:.72rem;letter-spacing:.18em;font-weight:800;text-transform:uppercase}h1,h2,p{margin-top:0}h1{font-size:clamp(3rem,8vw,7rem);line-height:.93;letter-spacing:-.065em;margin-bottom:24px}h2{font-size:clamp(1.35rem,3vw,2rem);letter-spacing:-.03em}.lede{max-width:720px;color:#c6d6d2;font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.62}.panel p,.section-heading>p{color:var(--muted);line-height:1.65}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.button{border:1px solid var(--line);border-radius:999px;padding:13px 18px;text-decoration:none;cursor:pointer;background:rgba(255,255,255,.04);transition:.18s ease}.button:hover{transform:translateY(-2px);border-color:rgba(184,255,219,.45)}.button:disabled{opacity:.4;cursor:not-allowed;transform:none}.button.primary{background:var(--glow);color:#062017;border-color:transparent;font-weight:800}.button.ghost{background:transparent}.button.small{padding:10px 14px}.grid{display:grid;gap:16px}.stats-grid{grid-template-columns:repeat(4,1fr)}.two-column{grid-template-columns:1fr 1fr;margin-top:16px}.panel{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.016)),var(--panel);backdrop-filter:blur(16px);box-shadow:var(--shadow)}.stat span{display:block;color:var(--muted);font-size:.78rem;margin-bottom:12px}.stat strong{font-size:clamp(1.65rem,4vw,2.5rem);letter-spacing:-.045em}.plain-list{padding-left:18px;color:var(--muted);line-height:1.8}.meter{height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.07);margin:18px 0}.meter span{height:100%;display:block;background:linear-gradient(90deg,var(--glow-strong),var(--warm));transition:width .35s ease}.text-link{color:var(--glow);text-decoration:none;font-weight:700}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}.section-heading h1{font-size:clamp(2.7rem,6vw,5.5rem);margin-bottom:0}.section-heading>p{max-width:420px;margin-bottom:8px}.badge{color:var(--glow);border:1px solid var(--line);border-radius:999px;padding:8px 11px;font-size:.72rem;letter-spacing:.12em}.mission-stage{padding:30px}.mission-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px}.mission-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 16px}.mission-choice{min-height:190px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025);padding:20px;text-align:left;cursor:pointer}.mission-choice:hover,.mission-choice.selected{border-color:var(--glow-strong);background:rgba(184,255,219,.055)}.feedback{min-height:28px;color:var(--glow);margin:10px 0 16px}.feedback.bad{color:var(--danger)}.covenant-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.covenant-card span{color:var(--glow-strong);font-size:.75rem;letter-spacing:.16em}.covenant-card h2{margin-top:18px}footer{min-height:90px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.secondary {
    background: var(--secBG);
    border: 1px solid var(--secLine);
}
@media(max-width:850px){.topbar{align-items:flex-start;padding:18px 0}.connection{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}.two-column,.covenant-grid{grid-template-columns:1fr}.mission-choices{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.shell{width:min(100% - 22px,1180px)}.topbar{display:block}nav{margin-top:14px}nav a{padding-left:0;margin-right:12px}main{padding-top:32px}.hero{padding-top:30px}.stats-grid{grid-template-columns:1fr 1fr}.panel{padding:19px}footer{align-items:flex-start;flex-direction:column;justify-content:center}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}#swarmCanvas{display:none}}


.pool-preview {
  margin-top: clamp(4rem, 9vw, 8rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pool-preview-heading {
  align-items: flex-end;
  margin-bottom: 1.5rem;
}

.pool-preview-heading h2 {
  max-width: 760px;
  margin-bottom: 0;
}

.pool-preview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.preview-state {
  color: var(--muted, #8fa3ad);
  font-size: 0.78rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preview-state::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.55rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 1rem currentColor;
  vertical-align: 0.08em;
}

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

.pool-current-card {
  position: relative;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.pool-current-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(110, 225, 203, 0.1),
      transparent 38%
    );
}

.pool-current-card:hover {
  transform: translateY(-3px);
  border-color: rgba(145, 239, 220, 0.28);
}

.pool-current-topline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}

.current-type,
.current-status {
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.current-type {
  color: var(--accent, #91efdc);
}

.current-status {
  color: var(--muted, #8fa3ad);
  text-align: right;
}

.pool-current-card h3 {
  position: relative;
  margin: 0 0 0.8rem;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.15;
}

.pool-current-card h3 a {
  color: inherit;
  text-decoration: none;
}

.pool-current-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pool-current-card > p {
  position: relative;
  margin: 0;
  color: var(--muted, #9aacb5);
  line-height: 1.65;
}

.pool-current-meter {
  position: relative;
  height: 0.28rem;
  margin-top: auto;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.pool-current-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(113, 210, 216, 0.72),
    rgba(154, 242, 208, 0.95)
  );
}

.pool-current-meta {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted, #8fa3ad);
  font-size: 0.77rem;
}

.pool-current-meta span:last-child {
  text-align: right;
}

.pool-current-meta small {
  display: block;
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.45);
}

.current-join-link {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  color: var(--accent, #91efdc);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}

.current-join-link:hover {
  text-decoration: underline;
}

.pool-preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.25rem;
  padding: 1rem 0;
}

.pool-preview-footer p {
  max-width: 700px;
  margin: 0;
  color: var(--muted, #8fa3ad);
  font-size: 0.9rem;
  line-height: 1.6;
}

.pool-preview-loading,
.pool-preview-empty {
  grid-column: 1 / -1;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
}

.pool-preview-empty {
  flex-direction: column;
}

.preview-pulse {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--accent, #91efdc);
  box-shadow: 0 0 1.25rem rgba(145, 239, 220, 0.7);
  animation: pool-preview-pulse 1.8s ease-in-out infinite;
}

@keyframes pool-preview-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.75);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 900px) {
  .pool-preview-grid {
    grid-template-columns: 1fr;
  }

  .pool-current-card {
    min-height: 280px;
  }
}

@media (max-width: 680px) {
  .pool-preview-heading,
  .pool-preview-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .pool-preview-actions {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pool-current-card,
  .preview-pulse {
    transition: none;
    animation: none;
  }
}