/* /assets/styles-space.css (BASE / GLOBAL) */
/* tokens + global/background/header/page/hero/below rules */
:root {
  --bg0: #05060c;
  --bg1: #070b18;
  --ink: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);

  --neonA: rgba(60, 255, 220, 0.9);
  --neonB: rgba(160, 90, 255, 0.85);
  --neonC: rgba(80, 140, 255, 0.85);

  --glassFill: rgba(255, 255, 255, 0.07);
  --glassEdge: rgba(255, 255, 255, 0.18);

  --headerH: 64px;
  --sceneMaxW: 780px;
  --sceneH: clamp(360px, 56vh, 560px);

  --bubbleSize: clamp(70px, 7.5vw, 108px);
  --bubbleActiveBoost: 1.18;

  --panelPad: 16px;
  --panelBottomReserve: 64px;

  --ctrlSize: 30px;
  --ctrlFont: 18px;
  --ctrlGap: 10px;

  --paneGap: 14px;
  --paneRadius: 18px;

  --paneBtnFont: 11px;
  --paneBtnPadY: 5px;
  --paneBtnPadX: 7px;
  --paneBtnRadius: 10px;

}

* { box-sizing: border-box; }
html { background: var(--bg0); }
body { min-height: 100vh; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(900px 600px at 30% 20%, rgba(120, 90, 255, 0.16), transparent 60%),
    radial-gradient(900px 600px at 70% 70%, rgba(60, 255, 220, 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

/* Header */
.siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--headerH);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.0));
  backdrop-filter: blur(6px);
}

.brand {
  width: min(1100px, 92vw);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
}

.brandMark {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background:
    radial-gradient(12px 12px at 35% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.0) 55%),
    radial-gradient(18px 18px at 70% 70%, rgba(60,255,220,0.55), rgba(60,255,220,0.0) 60%),
    radial-gradient(22px 22px at 40% 75%, rgba(160,90,255,0.55), rgba(160,90,255,0.0) 65%),
    rgba(255,255,255,0.06);
  box-shadow:
    0 0 22px rgba(160, 90, 255, 0.22),
    0 0 22px rgba(60, 255, 220, 0.14);
  border: 1px solid rgba(255,255,255,0.16);
}

.brandName {
  font-weight: 700;
  letter-spacing: 0.2px;
  text-shadow:
    0 0 10px rgba(160, 90, 255, 0.14),
    0 0 10px rgba(60, 255, 220, 0.10);
}

.page { padding-top: var(--headerH); }

.hero { padding: 0px 0 8px; }

.heroInner {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

.heroTitle {
  margin: 0;
  font-size: clamp(22px, 3vw, 34px);
}

.heroSub {
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.45;
}

/* Below */
.below { padding: 14px 0 80px; }

.belowInner {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.55;
}