:root {
  color-scheme: light dark;
  --bg: #fbf9f4; --fg: #1d1b16; --muted: #6b6558; --card: #fff;
  --rule: #e6e0d2; --good: #2e7d4f; --warn: #b4581f;
  --kid: #e8a33d;
  --r: 18px; --pad: clamp(16px, 4vw, 32px);
  --tap: 64px;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15140f; --fg: #f0ece1; --muted: #9c9584; --card: #211f18; --rule: #34301f;
  }
}
[data-kid="kiki"]   { --kid: #e8a33d; }
[data-kid="parker"] { --kid: #1f8f8f; }
[data-kid="link"]   { --kid: #5b6ab0; }
[data-kid="brenda"] { --kid: #8d4d86; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  padding: env(safe-area-inset-top, 0) var(--pad) env(safe-area-inset-bottom, 0);
  font-size: 17px; line-height: 1.5;
}
.wrap { max-width: 56rem; margin: 0 auto; padding-block: clamp(24px, 6vh, 64px); }
button { font: inherit; cursor: pointer; border: 0; border-radius: var(--r); color: inherit; }
/* 64px is chosen for Kiki's finger; it costs the older two nothing. */
.tap { min-width: var(--tap); min-height: var(--tap); }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--pad); }
.muted { color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0 0 .2em; letter-spacing: -.02em; }
[hidden] { display: none !important; }