/* Numb — page-specific layer on top of assets/100k31d.css */

:root {
  --accent: #557c6f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #9ebbaf;
  }
}

/* The demo carries the page, so it gets the wider half of the split — but
   only once the columns are actually side by side. Unwrapped, this would
   load after the system's own @media (max-width: 860px) stacking rule and
   permanently defeat it, no matter how narrow the viewport got. */
@media (min-width: 860.02px) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1.16fr);
  }
}

/* icon.png's own cream background sits a shade off --paper, so the floating
   hero icon can read as edgeless on its own. 22% approximates the icon's
   baked-in squircle radius (measured off the PNG's alpha) so the ring
   actually follows its corners instead of squaring off past them. */
.hero-icon {
  border-radius: 22%;
  box-shadow:
    0 0 0 1px rgba(28, 30, 27, 0.09),
    0 12px 26px rgba(28, 30, 27, 0.08);
}

@media (prefers-color-scheme: dark) {
  .hero-icon {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.12),
      0 12px 26px rgba(0, 0, 0, 0.3);
  }
}

.stage {
  padding: 0;
  border-radius: 18px;
  background: #22241f;
}

.stage-video {
  width: 100%;
  height: auto;
  display: block;
}