:root {
  --3da-ink: #09161a;
  --3da-ink-soft: #0f2429;
  --3da-mint: #6ef0c4;
  --3da-mint-soft: #b8f5de;
  --3da-cube-side: #47b296;
  --3da-paper: #f8faf9;
  --3da-mist: #eef2f1;
  --3da-white: #ffffff;
  --3da-review: #c66a19;

  --3da-font-display: ui-rounded, "SF Pro Rounded", "Nunito Sans", "Arial Rounded MT Bold", system-ui, sans-serif;
  --3da-font-body: Inter, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --3da-font-data: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;

  --3da-radius-sm: 10px;
  --3da-radius-md: 18px;
  --3da-radius-lg: 26px;
  --3da-radius-pill: 999px;
  --3da-shadow-card: 0 12px 36px rgb(9 22 26 / 8%);
}

.theme-3da {
  color: var(--3da-ink);
  background: var(--3da-paper);
  font-family: var(--3da-font-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.theme-3da :where(h1, h2, h3, .da3-display) {
  font-family: var(--3da-font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.theme-3da :where(code, .da3-data) {
  font-family: var(--3da-font-data);
  font-variant-numeric: tabular-nums;
}

.da3-hero {
  color: var(--3da-white);
  background: var(--3da-ink);
  border-radius: var(--3da-radius-lg);
}

.da3-card {
  color: var(--3da-ink);
  background: var(--3da-white);
  border: 1px solid rgb(9 22 26 / 7%);
  border-radius: var(--3da-radius-lg);
  box-shadow: var(--3da-shadow-card);
}

.da3-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.75rem 1.25rem;
  color: var(--3da-ink);
  background: var(--3da-mint);
  border: 0;
  border-radius: var(--3da-radius-pill);
  font: 700 1rem/1 var(--3da-font-body);
  text-decoration: none;
  cursor: pointer;
}

.da3-button:hover {
  filter: brightness(0.97);
  transform: translateY(-1px);
}

.da3-button:focus-visible,
.theme-3da :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--3da-mint);
  outline-offset: 3px;
}

.da3-button--quiet {
  color: var(--3da-ink);
  background: var(--3da-mist);
  border: 1px solid rgb(9 22 26 / 9%);
}

.da3-quiz-card {
  color: var(--3da-ink);
  background: linear-gradient(135deg, var(--3da-mint), var(--3da-mint-soft));
  border-radius: var(--3da-radius-md);
}

@media (prefers-reduced-motion: reduce) {
  .theme-3da *,
  .theme-3da *::before,
  .theme-3da *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}