/* Shared tokens for the motion studies. Same palette and type as the live site (src/index.css). */
:root {
  --bg: #FBFBF9;
  --surface: #FFFFFF;
  --tint: #F4F4F0;
  --ink: #15171A;
  --ink-2: #3A3D42;
  --muted: #6B6F76;
  --faint: #A3A6AB;
  --line: #E6E6E1;
  --line-2: #D8D8D2;
  --accent: #1F5BFF;
  --accent-soft: #E8EEFF;
  --navy: #10192E;
  --ok: #1A7F4B;
  --ok-soft: #E4F3EA;
  --warn: #B25E09;
  --warn-soft: #FBF0E1;

  /* Motion: two curves and a small set of durations, used everywhere. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med: 420ms;
  --t-slow: 800ms;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
button { font: inherit; }

/* Study chrome: a slim top bar with the study number, a back link and a replay button. */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; background: rgba(251, 251, 249, 0.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.bar a { color: var(--muted); text-decoration: none; }
.bar a:hover { color: var(--ink); }
.bar .tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.bar button {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; font-size: 13.5px; color: var(--ink);
}
.bar button:hover { border-color: var(--ink); }

.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.note { max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; color: var(--muted); font-size: 14.5px; }
.note b { color: var(--ink); font-weight: 600; }

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

@media (max-width: 480px) {
  .bar { padding: 12px 16px; gap: 10px; font-size: 13px; }
  .bar .tag { font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .bar a, .bar button { white-space: nowrap; }
}