/* Dusk Mint, the site's palette since 2026-11-13 (Carson picked it from three): muted sage by day, deep
   navy by night (green-slate at first; Carson: "darker blue") under prefers-color-scheme. Loaded after app.css on every page. It sets the palette
   variables and points app.css's hard-coded whites and ink outlines at them. Made from app.css by a
   generator; when app.css gains a rule with a hard-coded #fff background, add it here too. */
:root {
  --ink: #22303a;
  --ink-2: #44535b;
  --paper: #eef0e3;
  --sky: #e2ebe5;
  --dots: #d0ddd4;
  --card: #f7faf7;
  --card-2: #ebf1ec;
  --line: #c8d7ce;
  --accent: #0e7253;
  --accent-ink: #0b6248;
  --accent-soft: #cfe5d9;
  --mint: #7cc9a6;
  --accent-2: #ec8db0;
  --accent-2-ink: #b52f5d;
  --accent-2-soft: #f5e1e8;
  --butter: #efdb92;
  --gold: #ecc969;
  --sky-blue: #9fcde9;
  --lilac: #c7bbea;
  --muted: #5d6b70;
  --ok: #217a4c;
}
body { background-color: var(--sky); }
.brand svg path[fill="#000000"] { fill: var(--ink); } .brand svg path[stroke="#000000"] { stroke: var(--ink); }
/* hard-coded whites follow the card colour */
.lang-pill { background: var(--card); }
.btn.ghost { background: var(--card); }
.icon-btn { background: var(--card); }
.settings-menu { background: var(--card); }
.acct-select { background-color: var(--card); }
input[type=email], input[type=text], input[type=password], textarea { background: var(--card); }
select, input[type=date] { background: var(--card); }
.tap-open { background: var(--card); }
.cta-house { background: var(--card); }
.what-card { background: var(--card); }
.say { background: var(--card); }
.say::after { background: var(--card); }
.steps6 li { background: var(--card); }
.btn.google { background: var(--card); }
.progress li::before { background: var(--card); }
.chip { background: var(--card); }
.look { background: var(--card); }
.song { background: var(--card); }
.switch-ui { background: var(--card); }
.switch input:checked + .switch-ui::after { background: var(--card); }
.savebar { background: var(--card); }
.sheet-card { background: var(--card); }
.person-row .x { background: var(--card); }
.talk-person { background: var(--card); }
.tile .note:not(.on):not(.off) { background: var(--card); }
.pola { background: var(--card); }
.rule { background: var(--card); }
.status-card .hero-del { background: var(--card); }
.htab-n { background: var(--card); }
.onb-back { background: var(--card); }
.onb-pick { background: var(--card); }
.onb-home input[type=search] { background: var(--card); }
.line-act { background: var(--card); }
.step { background: var(--card); }
.room-chip { background: var(--card); }
.scene { background: var(--card); }
.cast-pick { background: var(--card); }
.reveal-photo { background: var(--card); }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6edf5;
    --ink-2: #bdc9d8;
    --paper: #1f2a3b;
    --sky: #111927;
    --dots: #1a2333;
    --card: #1a2435;
    --card-2: #243046;
    --line: #34445e;
    --accent: #6fd6a8;
    --accent-ink: #90e3bd;
    --accent-soft: #1b3a3a;
    --on-accent: #0a271d;
    --mint: #2d7558;
    --accent-2: #9c4468;
    --accent-2-ink: #f6a9c5;
    --accent-2-soft: #382530;
    --accent-2-hover: #ad4f76;
    --cta-top: #b85a80;
    --butter: #f4c84a;
    --gold: #f7d46a;
    --sky-blue: #2d526c;
    --lilac: #4a4271;
    --muted: #94a3b8;
    --ok: #86dba9;
    --edge: #6a83a6;
    --edge-shadow: #060a11;
    --warn-text: #f4a8c4;
    --info-text: #a9d3f2;
  }

  :root { color-scheme: dark; --shadow: 0 4px 0 var(--edge-shadow); --soft-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
  .btn, a.btn, .badge.ready, .tile.done::after, .room-link:hover .room-go { color: var(--on-accent); }
  .btn:hover { box-shadow: 0 5px 0 var(--edge-shadow); }
  .btn:active { box-shadow: 0 0 0 var(--edge-shadow); }
  .demo-frame img, .demo-frame video, .what-card img, .room-pic img { filter: brightness(.9) saturate(.95); }
  .btn.warm, .btn.ghost, .btn.google { color: var(--ink); }
  .btn.warm:hover { background: var(--accent-2-hover); }
  .btn.warm:disabled { background: var(--card-2); color: var(--muted); }
  .btn.danger { background: #b83a3a; color: #fff; }
  .btn.danger:hover { background: #9c2f2f; }
  .btn:disabled, a.btn.off, a.btn.off:hover { background: var(--card-2); color: var(--muted); border-color: var(--line); box-shadow: 0 4px 0 var(--edge-shadow); }
  .cta-big { background: linear-gradient(180deg, var(--cta-top), var(--accent-2)); color: var(--ink); }
  .cta-words small { color: var(--ink-2); }
  .step-n { color: var(--sky); }
  .upbar-in { background: var(--card-2); color: var(--ink); }
  .what-card .pic { background: var(--card-2); }
  .story-mode-card { background: linear-gradient(180deg, var(--card), var(--accent-2-soft)); }
  .settings-menu a:hover, .settings-menu button:hover { background: var(--accent-soft); }
  .settings-menu button.danger, .settings-menu a.danger, .acct-out .btn { color: var(--warn-text); }
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

  .lang-pill { border: 2px solid var(--edge); background: var(--card); box-shadow: 0 3px 0 var(--edge-shadow); }
  .btn { border: 2.5px solid var(--edge); }
  .btn:hover { box-shadow: 0 5px 0 var(--edge-shadow); }
  .btn:active { box-shadow: 0 0 0 var(--edge-shadow); }
  .cap.full { border: 2px solid var(--edge); color: var(--warn-text); }
  .btn.warm:disabled { background: var(--card-2); color: var(--ink-2); }
  .btn.ghost { background: var(--card); }
  .btn.small { box-shadow: 0 3px 0 var(--edge-shadow); }
  .icon-btn { border: 2.5px solid var(--edge); background: var(--card); box-shadow: 0 3px 0 var(--edge-shadow); }
  .icon-btn:active { box-shadow: 0 0 0 var(--edge-shadow); }
  .settings-menu { background: var(--card); border: 2.5px solid var(--edge); box-shadow: 0 6px 0 var(--edge-shadow); }
  .settings-menu a:hover, .settings-menu a:focus-visible, .settings-menu button:hover, .settings-menu button:focus-visible { background: var(--card-2); }
  .settings-menu button.danger { color: var(--warn-text); }
  .settings-menu button.danger:hover, .settings-menu button.danger:focus-visible { background: var(--card-2); }
  .settings-menu a.danger { color: var(--warn-text); }
  .settings-menu a.danger:hover, .settings-menu a.danger:focus-visible { background: var(--card-2); }
  .acct-avatar { border: 2.5px solid var(--edge); }
  .acct-houses li { background: var(--card-2); }
  .acct-select { border: 2px solid var(--edge); background-color: var(--card); }
  .acct-out .btn { color: var(--warn-text); }
  input[type=email], input[type=text], input[type=password], textarea { background: var(--card); }
  input:focus, textarea:focus, select:focus { border-color: var(--edge); }
  select, input[type=date] { background: var(--card); }
  .card { border: 2.5px solid var(--edge); box-shadow: 0 5px 0 var(--edge-shadow); }
  .sticker { border: 2px solid var(--edge); box-shadow: 0 3px 0 var(--edge-shadow); }
  .demo-story .demo-frame { background: var(--card-2); }
  .demo-frame { border: 3px solid var(--edge); background: var(--card-2); box-shadow: 0 7px 0 var(--edge-shadow); }
  .demo-film video, .demo-film img, .demo-still img { background: var(--card-2); }
  .demo-story .demo-still img { background: var(--card-2); }
  .tap-open { border: 3px solid var(--edge); background: var(--card); box-shadow: 0 6px 0 var(--edge-shadow); }
  .demo-film:active .tap-open, .demo-still:active .tap-open { box-shadow: 0 1px 0 var(--edge-shadow); }
  .cta-big { border: 3.5px solid var(--edge); box-shadow: 0 9px 0 var(--edge-shadow); }
  .cta-big:hover { box-shadow: 0 12px 0 var(--edge-shadow); }
  .cta-big:active { box-shadow: 0 1px 0 var(--edge-shadow); }
  .cta-house { background: #eef3ee; border: 3px solid var(--edge); }
  .cta-house path[fill="#000000"] { fill: #1a2435; } .cta-house path[stroke="#000000"] { stroke: #1a2435; }
  .cta-words small { color: var(--ink-2); }
  .what-card { background: var(--card); border: 2.5px solid var(--edge); box-shadow: 0 5px 0 var(--edge-shadow); }
  .say { background: var(--card); border: 2px solid var(--edge); box-shadow: 0 3px 0 var(--edge-shadow); }
  .say::after { background: var(--card); border-right: 2px solid var(--edge); border-bottom: 2px solid var(--edge); }
  .say.two { background: var(--card-2); }
  .say.two::after { background: var(--card-2); }
  .steps6 li { background: var(--card); border: 2.5px solid var(--edge); box-shadow: 0 4px 0 var(--edge-shadow); }
  .steps6 .n { border: 2.5px solid var(--edge); }
  .tabs { border: 2px solid var(--edge); }
  .tab[aria-selected=true] { box-shadow: inset 0 0 0 2px var(--edge); }
  .btn.google { background: var(--card); }
  .trust { border: 2px dashed var(--edge); }
  .notice { border: 2px solid var(--edge); }
  .notice.warn { color: var(--warn-text); }
  .job { border: 2.5px solid var(--edge); }
  .job.linked:hover { box-shadow: 0 6px 0 var(--edge-shadow); }
  .job .chev { border-right: 3px solid var(--edge); border-top: 3px solid var(--edge); }
  .badge { border: 1.5px solid var(--edge); background: var(--card-2); }
  .badge.making { background: var(--card-2); color: var(--info-text); }
  .badge.failed { color: var(--warn-text); }
  .confirm p { color: var(--warn-text); }
  .progress li::before { background: var(--card); }
  .progress li.done::before, .progress li.now::before { box-shadow: inset 0 0 0 1.5px var(--edge); }
  .drop { border: 2.5px dashed var(--edge); }
  .drop .plus { border: 2.5px solid var(--edge); }
  .mapping { border: 2px solid var(--edge); }
  .chip { background: var(--card); }
  .chip[aria-pressed=true], .chip[aria-checked=true] { border-color: var(--edge); }
  .extras { border: 2.5px solid var(--edge); }
  .look { background: var(--card); }
  .look[aria-checked=true] { border-color: var(--edge); }
  .song { background: var(--card); }
  .doc .short { border: 2.5px dashed var(--edge); }
  .faq summary::before { border: 2px solid var(--edge); }
  .limit-banner { border: 2.5px solid var(--edge); }
  .limit-count { border: 2px solid var(--edge); }
  .switch-ui { border: 2px solid var(--edge); background: var(--card); }
  .switch input:checked + .switch-ui::after { background: var(--card); }
  .savebar { background: var(--card); border: 2.5px solid var(--edge); box-shadow: 0 -3px 0 rgba(34, 48, 58, .08), 0 4px 0 var(--edge-shadow); }
  .sheet-card { background: var(--card); border: 2.5px solid var(--edge); box-shadow: 0 8px 0 var(--edge-shadow); }
  .stage { border: 2.5px solid var(--edge); }
  .person-row .x { background: var(--card); }
  .person-row .x:hover { border-color: var(--edge); }
  .talk-person { background: var(--card); }
  .agree-card { border: 2px solid var(--edge); }
  .workshop svg { border: 2.5px solid var(--edge); box-shadow: 0 5px 0 var(--edge-shadow); background: var(--card-2); }
  .bowing svg { border: 2.5px solid var(--edge); box-shadow: 0 5px 0 var(--edge-shadow); background: var(--card-2); }
  .tile .note:not(.on):not(.off) { background: var(--card); border: 1.5px solid var(--edge); box-shadow: 0 2px 0 var(--edge-shadow); }
  .tile .note.icon.icon { border: 1.5px solid var(--edge); box-shadow: 0 2px 0 var(--edge-shadow); }
  .note-ico { border: 1.5px solid var(--edge); box-shadow: 0 1.5px 0 var(--edge-shadow); }
  .eg { border: 2.5px solid var(--edge); box-shadow: 0 5px 0 var(--edge-shadow); }
  .pola { background: var(--card); border: 2px solid var(--edge); box-shadow: 0 3px 0 var(--edge-shadow); }
  .eg-room { border: 2.5px solid var(--edge); background: var(--card-2); box-shadow: 0 4px 0 var(--edge-shadow); }
  .rule { background: var(--card); border: 2.5px solid var(--edge); box-shadow: 0 4px 0 var(--edge-shadow); }
  .status-card .hero-del { border: 2px solid var(--edge); background: var(--card); box-shadow: 0 3px 0 var(--edge-shadow); }
  .status-card .hero-del:hover { box-shadow: 0 4px 0 var(--edge-shadow); }
  .status-card .hero-more .hero-del:hover, .status-card .hero-more .hero-del[aria-expanded="true"] { background: var(--card-2); }
  .htabs { border: 2.5px solid var(--edge); box-shadow: 0 4px 0 var(--edge-shadow); }
  .htab[aria-selected=true] { box-shadow: inset 0 0 0 2px var(--edge); }
  .htab-n { border: 1.5px solid var(--edge); background: var(--card); }
  .htab.busy::after { border: 1.5px solid var(--edge); }
  .room-link:hover { box-shadow: 0 7px 0 var(--edge-shadow); border-color: var(--edge); }
  .room-link:active { box-shadow: 0 2px 0 var(--edge-shadow); }
  .room-pic { border: 2px solid var(--edge); }
  .room-link.gone { background: var(--card-2); }
  .del-sheet .del-ico { border: 2.5px solid var(--edge); }
  .onb-back { border: 2px solid var(--edge); background: var(--card); box-shadow: 0 3px 0 var(--edge-shadow); }
  .onb-pick { border: 2px solid var(--edge); background: var(--card); }
  .onb-door { border: 3px solid var(--edge); box-shadow: 0 6px 0 var(--edge-shadow); }
  .onb-saving { border: 2px solid var(--edge); }
  .onb-home input[type=search] { background: var(--card); }
  .onb-here-dot { border: 2px solid var(--edge); }
  .line-act { background: var(--card); }
  .line-act:hover:not(:disabled) { border-color: var(--edge); }
  .step { background: var(--card); }
  .room-chip { border: 2px solid var(--edge); background: var(--card); box-shadow: 0 3px 0 var(--edge-shadow); }
  .scene { background: var(--card); }
  .scene[aria-checked=true] { border-color: var(--edge); box-shadow: 0 3px 0 var(--edge-shadow); }
  .cast-pick { background: var(--card); }
  .cast-pick:has(input:checked) { border-color: var(--edge); }
  .reveal-photo { background: var(--card); }
  .reveal-photo:hover { border-color: var(--edge); }
  .reveal-photo .pet-preview { border: 2px solid var(--edge); }
}

/* Night yellow: a sunny yellow beside the navy. Text and marks on it are navy; the big yellow cards
   become navy cards with a yellow outline so they do not glare. */
@media (prefers-color-scheme: dark) {
  :root { --on-butter: #111927; }
  .sticker, .steps6 .n, .tab[aria-selected=true], .htab[aria-selected=true], .badge.queued, .drop .plus,
  .faq summary::before, .tile .note.on, .tile .note.icon.icon, .note-ico, .onb-saving, .acct-avatar,
  .demo-still:hover .tap-open { color: var(--on-butter); }
  .agree-card, .more-card, .limit-banner { background: var(--card); border: 2px solid var(--butter); }
}