@font-face {
  font-family: 'Cygnito Mono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('./assets/cygnito-mono.woff2') format('woff2');
}

:root {
  --bg: #464646;        /* the dark ground the logo sits on in Figma */
  --ink: #464646;       /* text on the silver */
  --u: 1px;             /* one logo unit, in CSS px (set by main.js) */
}

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

.stage {
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage.is-over { cursor: pointer; }
.stage.is-dragging { cursor: grabbing; }

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* the stage hit-tests the balls itself */
}

.menu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A page's name, written along its tube (placed and turned by main.js). */
.page {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 50%;
  color: #929497; /* the logo's grey */
  text-decoration: none;
  font: calc(12.5 * var(--u)) / 1 'Cygnito Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  outline: none;
}

/* The dot, stretched into a silver bar with the filters (main.js sets its
   place and how far it's out). */
.filters {
  position: absolute;
  left: 0;
  top: 0;
  height: calc(19 * var(--u));
  overflow: hidden;
  border-radius: calc(2 * var(--u));
  /* The logo's moving gradient (Figma 397:24275); main.js sizes and slides
     it so it lines up with the logo's. */
  background-image: linear-gradient(126.53592591910896deg, #fff 0%, #929497 23.478%, #fff 43.478%, #929497 66.957%, #fff 86.957%);
  background-repeat: no-repeat;
  background-color: #fff;
  pointer-events: auto;
}
.bar {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  height: 100%;
  padding: 0 calc(8 * var(--u));
  font: calc(11 * var(--u)) / 1 'Cygnito Mono', ui-monospace, monospace;
  text-transform: uppercase;
  color: #929497; /* the logo's grey */
  white-space: nowrap;
}
.chip {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.chip:first-child { cursor: default; }
/* No underlines: a chip that's on is darker. */
button.chip:hover { color: #6f7073; }
button.chip[aria-pressed='true'] { color: #3f4042; }