:root {
  --os-canvas: #071426;
  --os-surface: #0E2340;
  --os-surface-raised: #1A2E46;
  --os-surface-highlight: #40566A;
  --os-accent: #748BFF;
  --os-accent-bright: #B9D7FF;
  --os-ink: #F2F6FF;
  --os-muted: #8296B8;
  --os-shadow: #020811;
  --os-focus-width: 2px;
  /* Compatibility aliases for modules that are migrated task by task. */
  --blue: var(--os-accent);
  --white: var(--os-ink);
  --environment-blue: var(--os-canvas);
  --stroke: 1px solid var(--os-accent);
  --hard-shadow: 12px 12px 0 var(--os-shadow);
  --serif: "Times New Roman", "Songti SC", "Yu Mincho", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ui-duration: 200ms;
  --press-duration: 140ms;
  --packet-duration: 750ms;
  --packet-opacity: 0.525;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { color: var(--os-ink); background: var(--os-canvas); font-family: var(--serif); }
button, input { color: inherit; font: inherit; }
button { transition: transform var(--press-duration) var(--ease-out); }
button:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  button { transition-duration: 1ms; }
  button:active { transform: none; }
}