:root {
  --paper: #d8d4c9;
  --pale: #f2eee4;
  --ink: #101311;
  --muted: #646b67;
  --line: #252b28;
  --red: #ff4d2e;
  --yellow: #f4cf3f;
  --teal: #7cb8bc;
  --pink: #e98b32;
}
body { background: #c7cbc5; }
.topbar, .opening { background: #d8d4c9; }
.opening { position: relative; overflow: hidden; }
.opening::after { content: "//"; position: absolute; right: clamp(1rem, 5vw, 5rem); top: 1.4rem; color: var(--red); font: 900 clamp(3rem, 8vw, 8rem)/1 Arial, sans-serif; }
.opening h1 { max-width: 980px; font-size: clamp(3.8rem, 6vw, 6.8rem); line-height: .86; font-weight: 700; overflow-wrap: normal; word-break: normal; text-transform: uppercase; }
.opening > p { position: relative; z-index: 1; }
.machine { background: #0b0d0c; }
.transport > *, .track-name, .step { background: #1c211f; }
.play { background: var(--red); color: #fff; }
.play[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.swing button[aria-pressed="true"] { background: var(--red); color: #fff; }
.sequencer { background: #080a09; box-shadow: 12px 12px 0 #9d2f20; }
.step[aria-pressed="true"] { background: color-mix(in srgb, var(--track) 28%, #171b19); }
.actions button:first-child { border-color: var(--red); color: #fff; background: #9d2f20; }
.rules { background: #d8d4c9; }
.rules li { background: #f2eee4; }
.closing { background: #aeb8b1; }
button:focus-visible, input:focus-visible, a:focus-visible { outline-color: var(--red); }
@media (max-width: 600px) {
  .opening h1 { font-size: 2.65rem; }
  .opening::after { top: 1rem; font-size: 3.5rem; }
}