/* Shared appearance for the website, native/offline app, and standalone pages. */
:root:root {
  color-scheme: dark;
  --app-bg: #25282c; --app-surface: #30343a; --app-raised: #3a4049;
  --app-ink: #f7f9fc; --app-muted: #c6cad4; --app-line: #8993a1;
  --pink-fill: #ff2fa3; --cyan-fill: #24d5f2; --purple-fill: #b36bff; --lime-fill: #b2ed42;
  --pink-text: #ff83c9; --cyan-text: #24d5f2; --purple-text: #cfa2ff; --lime-text: #b2ed42;
  --error-text: #ff96a7; --error-surface: #442934;
  --bg: var(--app-bg); --bg-2: var(--app-surface); --surface: var(--app-surface); --surface-2: var(--app-raised);
  --ink: var(--app-ink); --ink-2: var(--app-muted); --ink-3: var(--app-muted); --line: var(--app-line);
  --brand: var(--pink-fill); --brand-text: var(--pink-text); --brand-red: var(--pink-text); --brand-red-fill: var(--pink-fill);
  --on-brand: #171a1f; --focus: var(--cyan-text); --error: var(--error-text); --danger: var(--error-text); --good: var(--lime-text); --error-bg: var(--error-surface);
  --pink: var(--pink-text); --purple: var(--purple-text); --violet: var(--purple-text); --cyan: var(--cyan-text);
  --green: var(--lime-text); --gold: var(--lime-text); --amber: var(--lime-text); --caution: var(--lime-text);
  --mds-page: var(--app-bg); --mds-header: #25282c; --mds-surface: var(--app-surface); --mds-raised: var(--app-raised);
  --mds-border: var(--app-line); --mds-text: var(--app-ink); --mds-muted: var(--app-muted); --mds-packet-text: var(--purple-text);
  --mds-overview: var(--lime-fill); --mds-evidence: var(--pink-fill); --mds-timeline: var(--cyan-fill); --mds-packet: var(--purple-fill); --mds-learn: var(--lime-fill);
  --mds-on-color: #171a1f; --mds-font-heading: 'Poppins', system-ui, sans-serif;
  --panel: var(--app-surface); --muted: var(--app-muted); --chip: var(--app-raised); --paper: var(--app-bg); --card: var(--app-surface); --sunk: var(--app-raised);
  --accent: var(--pink-text); --hot: var(--pink-text); --warm: var(--lime-text); --cool: var(--cyan-text);
}
:root:root[data-theme='light'] {
  color-scheme: light;
  --app-bg: #f3f5f9; --app-surface: #ffffff; --app-raised: #e9eef5;
  --app-ink: #1b2028; --app-muted: #4b5667; --app-line: #778497;
  --pink-text: #a90064; --cyan-text: #006779; --purple-text: #6524af; --lime-text: #3c6100;
  --error-text: #b21b39; --error-surface: #ffe8ef;
}
html, body { background: var(--app-bg); color: var(--app-ink); }
.appearance-bar { display: flex; justify-content: flex-end; max-width: 1200px; margin: auto; padding: 8px 18px; font: 500 13px/1.4 Poppins, sans-serif; }
.appearance-bar button { background: var(--app-surface); color: var(--app-ink); border: 1px solid var(--app-line); border-radius: 24px; padding: 8px 14px; min-height: 36px; cursor: pointer; }
.appearance-bar button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
html[data-page] body { background: var(--app-bg); color: var(--app-ink); max-width: 1050px; margin: auto; font-family: Poppins, system-ui, sans-serif; }
html[data-page] h1, html[data-page] h2, html[data-page] h3 { color: var(--app-ink); font-family: Poppins, system-ui, sans-serif; letter-spacing: -.025em; }
html[data-page] h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.15; }
html[data-page] .card, html[data-page] .panel, html[data-page] .packet { background: var(--app-surface); color: var(--app-ink); border: 1px solid var(--app-line); border-top: 4px solid var(--cyan-fill); border-radius: 16px; }
html[data-page] a { color: var(--pink-text); text-underline-offset: 3px; }
html[data-page] .chip { background: var(--app-raised); color: var(--app-ink); border-color: var(--app-line); }
.public-brand { display: block; padding: 18px 22px; background: #25282c; border-radius: 16px; margin-bottom: 26px; }
.public-brand img { display: block; width: min(500px, 100%); height: auto; }
html[data-page] .grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
html[data-page] .grid > * { flex: 0 1 440px; min-width: 0; }
html[data-page] :focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
html[data-page] input, html[data-page] textarea, html[data-page] select { background: var(--app-surface); color: var(--app-ink); border: 1px solid var(--app-line); }
@media(max-width:650px) { html[data-page] body { padding: 18px 14px 48px; } .public-brand { padding: 14px; } html[data-page] .grid > * { flex-basis: 100%; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

html[data-page] .top .logo { display:none; }
html[data-page] .eyebrow { color:var(--app-muted); }
html[data-page] :is(.wordmark,.section) { font-family:Poppins,system-ui,sans-serif; }

html[data-page=document] .slogan { color:var(--pink-text); }
html[data-page=document] :is(p,.small) { color:var(--app-muted); }
html[data-page=document] .rule { background:var(--cyan-fill); }
html[data-page=document] main { min-height:0; padding:32px 24px; border:1px solid var(--app-line); border-radius:16px; background:var(--app-surface); }