/* Layout: full-bleed stage with the canvas centered on a dotted ground, fixed control rail on the right; the rail drops under the stage on narrow screens. */
:root {
  --ground: #111113;
  --ground-dot: rgba(255, 255, 255, 0.055);
  --rail: #171719;
  --well: #232326;
  --well-hover: #2b2b2f;
  --raised: #37373c;
  --pop: #1e1e21;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --ink: #f3f3f5;
  --ink-2: #a2a2a9;
  --ink-3: #6c6c73;
  --key: #d6d6dd;
  --key-hover: #e6e6ec;
  --key-ink: #141416;
  --focus: rgba(214, 214, 221, 0.6);
  --shadow: rgba(0, 0, 0, 0.5);

  --font-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --text-s: 14px;
  --text-m: 16px;
  --text-l: 18px;
  --text-xl: 21px;

  --control-h: 58px;
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 28px;
  --rail-w: 420px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: dark;
}