:root {
  --bg: #000000;                       /* the page */
  --ink: #f1ece3;                      /* the words, the button and the beam */
  --muted: #8d877c;                    /* the notes under the words */
  --line: rgba(241, 236, 227, 0.2);    /* the range rings and the cross */
  --tick: rgba(241, 236, 227, 0.34);   /* the ticks on the bezel */
  --glow: 241, 236, 227;               /* the phosphor trail behind the beam (r, g, b) */
  --accent: #ff6a2b;                   /* signal orange: the page you are on and the north mark */
  --focus: #f1ece3;                    /* the keyboard focus ring */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
}

body {
  font-family: 'Mona Sans Variable', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
}

/* the frame: its size comes from the script (--d is the scope's diameter), so the open menu always fits */
.radar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap, 18px);
  width: calc(var(--d, 300px) + 24px);
  height: calc(var(--d, 300px) + var(--gap, 18px) + 54px);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- the button */
.toggle {
  position: relative;
  z-index: 5;
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 54px;
  padding: 0 22px 0 18px;
  border: 1px solid rgba(241, 236, 227, 0.26);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s ease;
}

.toggle:focus-visible {
  outline: 1.5px solid var(--focus);
  outline-offset: 3px;
}

@media (hover: hover) {
  .toggle:hover { border-color: rgba(241, 236, 227, 0.6); }
}

.toggle__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.toggle__icon svg { overflow: visible; }

.toggle__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: 0.55;
}

.toggle__ring--in { opacity: 0.35; }

.toggle__beam {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.toggle__words {
  position: relative;
  display: grid;
  height: 22px;
  overflow: hidden;
}

.toggle__word {
  grid-area: 1 / 1;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.02em;
  font-variation-settings: 'wght' var(--wght, 430), 'wdth' var(--wdth, 100);
}


/* ---------------------------------------------------------------- the scope */
.menu {
  position: relative;
  flex: none;
  width: var(--d, 300px);
  height: var(--d, 300px);
}

.scope {
  position: absolute;
  inset: 0;
}

.scope__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scope__ring,
.scope__cross {
  fill: none;
  stroke: var(--line);
  stroke-width: var(--hair, 0.7);
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.scope__ring--edge { stroke: rgba(241, 236, 227, 0.34); }

.scope__tick {
  stroke: var(--tick);
  stroke-width: var(--hair, 0.7);
  opacity: 0;
}

.scope__north {
  fill: none;
  stroke: var(--accent);
  stroke-width: calc(var(--hair, 0.7) * 1.6);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

/* the trail: a conic gradient that ends at the beam, turned by the script; clipped to the round screen */
.scope__sweep {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--glow), 0) 0deg 292deg, rgba(var(--glow), 0.02) 318deg, rgba(var(--glow), 0.13) 360deg);
  opacity: 0;
  will-change: transform;
}

.scope__beam {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 1px;
  height: 48%;
  margin-left: -0.5px;
  background: linear-gradient(to top, rgba(var(--glow), 0.15), rgba(var(--glow), 0.9));
  transform-origin: 50% 100%;
  opacity: 0;
  will-change: transform;
}

/* ---------------------------------------------------------------- the links */
.blips {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the li is placed by the script (left, top); GSAP moves nothing on it, the link inside carries the look */
.blip {
  position: absolute;
  width: 0;
  height: 0;
}

.blip__link {
  position: absolute;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 6px 8px;
  margin: -12px 0 0 -13px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
}

/* links on the left half grow towards the centre from their mark: the mark stays on its point */
.blip--left .blip__link {
  flex-direction: row-reverse;
  margin: -12px -13px 0 0;
  right: 0;
  text-align: right;
}

.blip--left .blip__text { align-items: flex-end; }

/* on a narrow screen the notes are left out: the words alone fit inside the box */
.radar.is-narrow .blip__note { display: none; }

.blip__link:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 1px;
}

.blip__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 11px;
  height: 11px;
  margin-top: 6px;
}

.blip__mark svg {
  width: 11px;
  height: 11px;
  overflow: visible;
}

.blip__mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
}

.blip__text {
  display: flex;
  flex-direction: column;
}

.blip__word {
  font-size: var(--word, 17px);
  line-height: 1.25;
  font-variation-settings: 'wght' var(--wght, 300), 'wdth' var(--wdth, 84);
}

.blip__note {
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: var(--note, 0);
}

.blip__link[aria-current='page'] .blip__word,
.blip__link[aria-current='page'] .blip__mark { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .scope__sweep, .scope__beam { display: none; }
}