@font-face { font-family: Inter; src: url("assets/inter-medium.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }

:root {
  --background: #e9e9eb;
  font-family: Inter, Arial, Helvetica, sans-serif;
  background: var(--background);
  color-scheme: light;
}

* { box-sizing: border-box; }
body { min-height: 100svh; margin: 0; display: grid; place-items: center; overflow: hidden; }
.ribbon { position: relative; width: min(900px, calc(100% - 80px)); aspect-ratio: 8 / 3; isolation: isolate; }
canvas { display: block; width: 100%; height: 100%; }
.controls { position: absolute; inset: 3% 1.042% 12%; display: grid; grid-template-columns: repeat(3, 1fr); }
button { appearance: none; padding: 0; border: 0; margin: 0; background: transparent; color: transparent; font: inherit; outline: none; cursor: url('assets/pointer.svg') 6 4, pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; }

@media (max-width: 600px) {
  .ribbon { width: calc(100% - 28px); }
}