/* Shared base for the Play experiments. Each experiment is a small page shown in an
   iframe on /play, so it can't clash with the site or with other experiments. */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap');

/* DM Sans has no tabular figures, so numbers that change on screen jiggle as digit widths change.
   These are DM Sans's own digits, rebuilt with one shared width (tools/make-tabular-digits.py).
   Anything that asks for tabular-nums uses them through --font-num; letters stay DM Sans.
   Only for small numbers that tick or line up in columns: at display sizes the even widths leave
   gaps around every 1, so big headline numbers keep DM Sans's natural spacing. */
@font-face { font-display: swap; font-family: 'DM Sans Tabular'; font-weight: 400; src: url('fonts/dm-sans-tabular-400.woff2') format('woff2'); unicode-range: U+0030-0039; }
@font-face { font-display: swap; font-family: 'DM Sans Tabular'; font-weight: 500; src: url('fonts/dm-sans-tabular-500.woff2') format('woff2'); unicode-range: U+0030-0039; }
@font-face { font-display: swap; font-family: 'DM Sans Tabular'; font-weight: 600; src: url('fonts/dm-sans-tabular-600.woff2') format('woff2'); unicode-range: U+0030-0039; }

:root {
  --font-num: 'DM Sans Tabular', 'DM Sans', system-ui, sans-serif;
  --bg: #ffffff;
  --surface: #f4f5f7;
  --raised: #ffffff;
  --line: #e4e7eb;
  --text: #3d464f;
  --muted: #8a96a3;
  --accent: #3d63dd;
  --accent-soft: rgba(61, 99, 221, 0.12);
  --danger: #e5484d;
  --success: #30a46c;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px -8px rgba(16, 24, 40, 0.18);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #353e47;
  --surface: #2e363e;
  --raised: #3f4953;
  --line: #4a545e;
  --text: #e1e7ec;
  --muted: #93a3b1;
  --accent: #8aa6ff;
  --accent-soft: rgba(138, 166, 255, 0.16);
  --danger: #ff6b6f;
  --success: #4cc38a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  color: var(--text);
  display: grid;
  font: 14px/1.5 'DM Sans', system-ui, sans-serif;
  overflow: hidden;
  place-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-user-select: none;
  user-select: none;
}

button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* No focus rings for mouse or touch. Keyboard users get a quiet neutral ring instead of a
   loud blue one; text fields never get one, as each field shows focus in its own way. */
:focus { outline: none; }

button:focus-visible,
[tabindex]:focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent);
  outline-offset: 3px;
}

input:focus-visible { outline: none; }

input {
  color: inherit;
  font: inherit;
}

/* A plain dark pill button, used by several experiments */
.btn {
  align-items: center;
  background: var(--text);
  border-radius: 999px;
  color: var(--bg);
  display: inline-flex;
  font-weight: 500;
  gap: 8px;
  height: 36px;
  justify-content: center;
  padding: 0 16px;
  transition: transform 0.15s var(--ease);
}

.btn:active { transform: scale(0.97); }

.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}

/* What to do, at the bottom of each experiment, on a soft pill so it reads over artwork */
.hint {
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-radius: 999px;
  bottom: 10px;
  color: var(--muted);
  font: 11px/1 'DM Mono', monospace;
  left: 50%;
  margin: 0;
  max-width: calc(100% - 24px);
  padding: 5px 9px;
  pointer-events: none;
  position: fixed;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 10;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}