/* Shared readable controls for the archived interactive experiments. */
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500&family=Fragment+Mono&display=swap');
[hidden] { display: none !important; }
:root { color-scheme: dark; --muted: #a8a8a8; --text-dim: #a8a8a8; --text-muted: #a8a8a8; --border: #8f8f8f; }
body { font-family: "Host Grotesk", sans-serif; font-size: 15px; }
p, textarea { font-size: 15px; line-height: 1.5; }
button, input, select, label { font-family: inherit; font-size: max(12px, .8rem); }
button, select, input, .back, .back-link { min-width: 24px; min-height: 24px; }
button, select, input:not([type="range"]), textarea { border-color: #8f8f8f; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.controls, .panel, .sidebar, .control-panel { background-color: #101010; max-width: calc(100vw - 32px); }
.back, .back-link, .fps, .hint, .info { color: #b8b8b8; background: #101010; padding: 6px; font-size: 12px; opacity: 1; }
.controls label, .label, .subtitle, .description, .stat-label, .control-label { color: #b8b8b8; opacity: 1; }
pre, table { max-width: 100%; overflow-x: auto; }
@media (max-width: 479px) {
  .controls:not(.controls-bottom), .control-panel:not(.controls-bottom) { top: 60px; right: 16px; max-height: calc(100dvh - 120px); overflow-y: auto; }
  .hint { max-width: calc(100vw - 32px); font-size: 12px; }
  .container, main { max-width: 100%; min-width: 0; }
}
/* Prose stays readable even when an experiment gives its captions a smaller size. */
p { font-size: max(15px, 1em) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: opacity 200ms ease, color 150ms ease !important; scroll-behavior: auto !important; }
  button:active, a:active, button:hover, a:hover { transform: none; }
}