/* NemoLive's public pages: the privacy policy, account deletion, child safety and terms (Google Play links to them).
   Plain HTML and this file; theme.js only remembers a light or dark choice. No cookies, no tracking. */
* { box-sizing: border-box; }

:root {
  --bg: #f1f0f4; --surface: #ffffff; --surface2: #f4f2f7; --line: #e8e5ee;
  --ink: #1c1922; --ink2: #4a4657; --muted: #8a8694; --nav: #ffffff;
  --phBg: #fff1c2; --phInk: #7a4b00; --accent: #7b5cff; --accentHover: #6042f5;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0d15; --surface: #1a1724; --surface2: #25212f; --line: #2b2737;
    --ink: #f3f1f7; --ink2: #c4c0ce; --muted: #8f8a9a; --nav: #14121c;
    --phBg: #4a3a10; --phInk: #ffd98a; --accent: #a993ff; --accentHover: #c4b5ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f0d15; --surface: #1a1724; --surface2: #25212f; --line: #2b2737;
  --ink: #f3f1f7; --ink2: #c4c0ce; --muted: #8f8a9a; --nav: #14121c;
  --phBg: #4a3a10; --phInk: #ffd98a; --accent: #a993ff; --accentHover: #c4b5ff;
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: background .25s;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accentHover); text-decoration: underline; }

.top { position: sticky; top: 0; z-index: 20; background: var(--nav); }
.top-in { max-width: 1120px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand:hover { text-decoration: none; }
/* The logo is the deployment's brand picture, shown as it is with no tile or gradient behind it: /brand/logo.png (the pink bubble, the same
   file the console draws) on the light theme, /brand/logo-dark.png (the white bubble) on the dark one. */
.brand-logo { width: 34px; height: 34px; display: block; flex: none; }
.brand-logo.for-dark { display: none; }
:root[data-theme="dark"] .brand-logo.for-light { display: none; }
:root[data-theme="dark"] .brand-logo.for-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo.for-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo.for-dark { display: block; }
}
.brand-name { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 21px; line-height: 1; color: var(--ink); }
.theme {
  margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
}
.theme:hover, .theme:focus-visible { background: var(--surface2); }
.theme svg { width: 19px; height: 19px; }
.theme .sun { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}

article { max-width: 720px; margin: 0 auto; padding: clamp(28px, 6vw, 56px) 20px 72px; }
h1 { margin: 0; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 5vw, 40px); line-height: 1.15; color: var(--ink); }
.sub { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }
h2 { margin: 36px 0 0; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 22px; line-height: 1.3; color: var(--ink); }
h3 { margin: 20px 0 0; font-weight: 800; font-size: 16.5px; line-height: 1.4; color: var(--ink); }
p, ul, ol { margin: 10px 0 0; font-size: 16px; line-height: 1.7; color: var(--ink2); }
ul, ol { padding-left: 22px; }
li { margin-top: 4px; }
b, strong { color: var(--ink); }
mark.ph { background: var(--phBg); color: var(--phInk); border-radius: 4px; padding: 0 4px; }

.foot-in {
  max-width: 1120px; margin: 0 auto; padding: 24px 20px 32px; display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: center; font-weight: 700; font-size: 13.5px; color: var(--muted);
}
.foot-in .by a { font-weight: 800; color: var(--ink2); }
.foot-links { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.foot-links a { color: var(--muted); }
.foot-links a[aria-current="page"] { color: var(--ink); }

.home { max-width: 720px; margin: 0 auto; padding: clamp(40px, 8vw, 88px) 20px 72px; }
.home ul { list-style: none; padding: 0; }
.home li { margin-top: 10px; font-size: 17px; font-weight: 700; }