html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: #e8e6df;
  font-family: "Geist", "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(28,72,108,0.55) 0%, rgba(8,18,30,0) 60%),
    radial-gradient(ellipse 70% 50% at 85% 30%, rgba(20,56,92,0.5) 0%, rgba(6,14,24,0) 60%),
    radial-gradient(ellipse 90% 70% at 50% 90%, rgba(12,40,72,0.45) 0%, rgba(4,10,18,0) 65%),
    radial-gradient(ellipse 100% 100% at 50% 0%, #061523 0%, #030912 55%, #02060d 100%);
  background-attachment: fixed;
  background-color: #02060d;
}

body {
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Seapunk sparkles — cyan + magenta + white. */
  --w2-spk-w: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0 L5.4 4.6 L10 5 L5.4 5.4 L5 10 L4.6 5.4 L0 5 L4.6 4.6 Z' fill='white'/></svg>");
  --w2-spk-c: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0 L5.4 4.6 L10 5 L5.4 5.4 L5 10 L4.6 5.4 L0 5 L4.6 4.6 Z' fill='%235cf0ff'/></svg>");
  --w2-spk-p: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0 L5.4 4.6 L10 5 L5.4 5.4 L5 10 L4.6 5.4 L0 5 L4.6 4.6 Z' fill='%23ff8ad6'/></svg>");
  background-image:
    var(--w2-spk-c), var(--w2-spk-p), var(--w2-spk-w), var(--w2-spk-c),
    var(--w2-spk-p), var(--w2-spk-w), var(--w2-spk-c), var(--w2-spk-p);
  background-position:
    12% 18%, 78% 24%, 22% 48%, 88% 64%,
    38% 72%, 62% 86%, 8% 78%, 92% 88%;
  background-size:
    8px, 9px, 7px, 7px,
    8px, 6px, 7px, 7px;
  background-repeat: no-repeat;
  opacity: 0.3;
}

#root {
  position: relative;
  z-index: 1;
}


* {
  box-sizing: border-box;
}

::selection {
  background: #5cd7ff;
  color: #000;
}

a {
  color: inherit;
}

@media (max-width: 900px) {
  .w2-recurrence { grid-template-columns: 1fr !important; gap: 32px !important; }
  .w2-recurrence > div:first-child { order: 1 !important; }
  .w2-recurrence > div:last-child { order: 2 !important; }
  .w2-phones { grid-template-columns: 1fr !important; }
  .w2-features { grid-template-columns: 1fr !important; }
}

/* command tab strip: keep pills in one row on phones */
@media (max-width: 600px) {
  .w2-cmd-tabs {
    gap: 8px !important;
  }
  .w2-cmd-tabs > button {
    padding: 7px 16px !important;
    font-size: 12px !important;
  }
}

/* patched ticker: lock 2 lines on phone — same height for 1↔3-line pairs,
   anything past line 2 gets clipped so the page never jumps. */
@media (max-width: 720px) {
  .w2-patched-wrap {
    min-height: 3.2em !important;
    max-height: 3.2em !important;
    overflow: hidden !important;
  }
}