/* The Omar OS home page: Rhea Blue (Omar OS's tokens), self-contained — no
   fonts, scripts or images from anywhere else, so its CSP can be strict. */
:root {
  --bg: oklch(0.145 0 0);
  --card: oklch(0.205 0 0);
  --card-hover: oklch(0.245 0 0);
  --border: oklch(1 0 0 / 0.1);
  --text: oklch(0.985 0 0);
  --muted: oklch(0.708 0 0);
  --life: #0A84FF;
  /* Each app's own colour: Life OS blue, Brand OS green (Omar, 3 Oct 2026). */
  --brand: oklch(0.527 0.154 150.069);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: oklch(0.985 0 0);
    --card: oklch(1 0 0);
    --card-hover: oklch(0.97 0 0);
    --border: oklch(0 0 0 / 0.1);
    --text: oklch(0.145 0 0);
    --muted: oklch(0.45 0 0);
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
main { width: 100%; max-width: 560px; }
header { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 40px; }
.mark {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  /* The umbrella belongs to neither app: neutral, not Life OS's blue or Brand OS's green. */
  background: var(--text); color: var(--bg); font-weight: 600; font-size: 14px; letter-spacing: -0.02em;
}
h1 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 420px) { .apps { grid-template-columns: 1fr; } }
.app {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 32px 20px 28px;
  background: var(--card); border: 1px solid var(--border); border-radius: 24px;
  color: inherit; text-decoration: none;
  transition: background 160ms ease-out, transform 160ms ease-out;
}
.app:hover { background: var(--card-hover); }
.app:active { transform: scale(0.98); }
.app:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.icon {
  width: 72px; height: 72px; border-radius: 20px;
  display: grid; place-items: center; color: #fff; margin-bottom: 4px;
}
.icon.life { background: var(--life); }
.icon.brand { background: var(--brand); }
.name { font-size: 18px; font-weight: 500; }
.what { font-size: 13px; color: var(--muted); }
.note { margin: 32px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }