/* kylaxia.com: small static site (homepage + privacy policy). Same dark palette as the Immich login. */
:root {
  --primary: rgb(172 203 250);
  --bg: rgb(10 10 10);
  --card: rgb(18 18 18);
  --border: rgb(48 48 48);
  --fg: rgb(229 231 235);
  --muted: rgb(156 163 175);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(ellipse 60% 45% at 30% 15%, rgb(120 45 30 / 0.28), transparent 70%),
    radial-gradient(ellipse 55% 45% at 75% 90%, rgb(40 80 40 / 0.22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgb(40 60 110 / 0.18), transparent 70%),
    var(--bg);
  color: var(--fg);
  font: 16px/1.6 "Google Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 3rem 1rem;
}
main {
  width: 100%; max-width: 44rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.5);
  padding: 2.5rem 2rem;
}
main.home { max-width: 32rem; text-align: center; margin-top: 8vh; }
h1 { color: var(--primary); font-weight: 500; font-size: 2rem; line-height: 1.2; margin: 0 0 0.75rem; }
h2 { color: var(--primary); font-weight: 500; font-size: 1.15rem; margin: 2rem 0 0.5rem; }
p, li { color: var(--fg); }
.muted { color: var(--muted); font-size: 0.9rem; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 1.25rem; }
.brand { font-size: 0.85rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
@media (max-width: 30rem) { main { padding: 2rem 1.25rem; } }