:root {
  color-scheme: dark;
  --ink: #e9e7e0;
  --muted: #a3a199;
  --yellow: #f1ef55;
  --bg: #090908;
  --line: #5f5f56;
}

* { box-sizing: border-box; }

body {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 100%/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { margin: 0 0 1.25rem; font-size: 1.75rem; }
h1 span { color: var(--yellow); }
h2 { margin: 2.75rem 0 0.5rem; font-size: 1rem; font-weight: 650; }
p { margin: 0.7rem 0; }
ol { margin: 0.7rem 0; padding-left: 1.4rem; }
li { margin: 0.35rem 0; }
a { color: inherit; }
a.download { color: var(--yellow); font-weight: 650; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.muted { color: var(--muted); font-size: 0.9rem; }

iframe, .canvas-wrap { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #03070d; }
.canvas-wrap { margin-top: 1.5rem; border: 1px solid var(--line); }
iframe + .muted { margin-top: 0.35rem; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.controls button {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.controls button:hover { border-color: var(--ink); }
body[data-mode="manual"] .controls button { border-color: var(--yellow); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}