@font-face {
  font-family: "Cygnito Mono";
  src: url("assets/cygnito-mono.woff2") format("woff2");
  font-display: swap;
}

/* overview_v1a — the sticker sphere explained, seen from outside. */
:root {
  --bg: #e3e3e3;
  --ink: #010103;
  --orange: #ff5b00;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 12px/1.4 "Cygnito Mono", ui-monospace, monospace;
  text-transform: uppercase;
}

.stage {
  position: fixed;
  inset: 0;
  cursor: grab;
  touch-action: none;
}
.stage:active { cursor: grabbing; }
.stage canvas { display: block; width: 100%; height: 100%; }

/* The visitor's view: a frame over the canvas; main.js draws into this
   rectangle of the canvas underneath. */
.inset {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(360px, 34vw);
  aspect-ratio: 16 / 10;
  margin: 0;
  border: 2px solid var(--orange);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}
.inset.is-on { opacity: 1; }
.label {
  position: absolute;
  left: -2px;
  bottom: 100%;
  margin-bottom: 6px;
  padding: 3px 7px 2px;
  background: var(--orange);
  color: #000;
  border-radius: 3px;
}

/* The story, one line at a time, top left. */
.notes {
  position: fixed;
  left: 24px;
  top: 24px;
  max-width: 340px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.notes li {
  padding: 6px 0;
  opacity: 0.18;
  transition: opacity 400ms ease;
}
.notes li.is-on { opacity: 1; }
.notes li::before {
  content: counter(list-item, decimal-leading-zero) "  ";
  color: var(--orange);
}

.hint {
  position: fixed;
  left: 24px;
  bottom: 20px;
  margin: 0;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .notes { max-width: none; right: 24px; }
  .inset { width: 46vw; }
}