:root {
  --big-size: 30dvw;
  --orb-size: 2.5rem;
  --gap: 40dvw;
  --marker-size: 0.6rem;
  --shift: 17dvw;
  --panel-width: 25dvw;
  --panel-height: 80dvh;
  --panel-offset: 10dvh;
  
  /* defaults for theme tokens (overridden in themes.css) */
  --bg-0: #1a1a1a;
  --bg-1: linear-gradient(180deg, #272727, #202020);
  --card-bg: #37ac5a0e;
  --text: #dbeafe;
  --muted: rgba(255, 255, 255, 0.85);
  --accent-0: #37ac5a;
  --accent-1: #37ac5a;
  --control-bg: #37ac5a;
  --marker-color: rgba(199, 227, 255, 0.95);
  --marker-active-color: #37ac5a;
  --text-box: #ffffff05;
}

/* Basic resets & typography */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
    Arial;
  background: var(--bg-0);
  color: var(--text);
}
a {
  color: inherit;
}
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* utility */
.fade-enter {
  opacity: 0;
  transform: translateY(6px) scale(0.995);
}
.fade-active {
  transition: opacity 320ms ease, transform 320ms ease;
  opacity: 1;
  transform: translateY(0) scale(1);
}

#big, #orb {
  will-change: transform;
}