*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --bg-gradient-start: #c8e0ff;
  --bg-gradient-end: #e8f4ff;
  --surface: #ffffff;
  --surface-muted: #f0f6ff;
  --text: #1a2b3c;
  --text-muted: #5a6f82;
  --accent: #2b7fff;
  --accent-hover: #1f66d6;
  --accent-soft: #dbeaff;
  --warn: #e85d04;
  --ok: #2a9d4a;
  --cell-pending: #e3eefc;
  --cell-current: #ffe066;
  --cell-current-ring: #f4a020;
  --cell-done: #c8e8d0;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 28px rgba(30, 60, 90, 0.08);
}

html:has(body.math-hero-body) {
  overflow: hidden;
  height: 100%;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--text);
  background: linear-gradient(165deg, var(--bg-gradient-start), var(--bg-gradient-end));
  background-attachment: fixed;
}

body {
  padding: 1.25rem;
}

body.math-hero-body {
  padding: 0;
  overflow: hidden;
  background: transparent;
  min-height: 0;
}

#app {
  max-width: 1120px;
  margin: 0 auto;
}

body.math-hero-body #app {
  max-width: none;
  margin: 0;
  overflow: hidden;
  min-height: 0;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

button,
input,
select {
  font: inherit;
}