/* Design tokens: a studio-lit 3D viewport. Axis colours (X red, Y green, Z blue) are marks and lines, not text. */
:root {
  --studio: #e6e9ed;
  --studio-deep: #cdd3db;
  --paper: #f4f6f8;
  --ink: #15181d;
  --muted: #5b6571;
  --line: rgba(21, 24, 29, 0.14);
  --x: #e0384b;
  --y: #5aa300;
  --z: #2c63e0;
  --z-text: #2455c9;

  --radius-plate: 18px;
  --radius-control: 10px;
  --shell: min(1240px, calc(100% - 48px));
  --gutter: clamp(20px, 3vw, 32px);
  --section: clamp(84px, 11vw, 148px);

  --font-body: var(--font-text), 'Segoe UI', system-ui, sans-serif;
  --font-head: var(--font-display), 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--z); color: #fff; }
:focus-visible { outline: 3px solid var(--z); outline-offset: 3px; border-radius: 4px; }

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