/* Astromika — base kit. Source: Developer/Astromika/ui-kit/. Edit here only; sync.mjs copies it. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--text-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.label {
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.muted { color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s-24);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: var(--text-14); font-weight: 500;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}