/* Day theme (muslin) for the help, privacy, delete-account and 404 pages. */
:root { --bg: #F1F3EE; --surface: #FDFDFB; --ink: #1E2246; --soft: #5A5E7A; --accent: #3A43A6; --line: #DCE0D6; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 Hind, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 760px; margin: 0 auto; padding: 8px 20px 48px; }
h1, h2, h3 { font-family: "Baloo 2", system-ui, sans-serif; line-height: 1.15; }
h1 { font-size: clamp(34px, 7vw, 44px); margin: 8px 0 4px; }
h2 { font-size: 24px; margin: 32px 0 8px; }
a { color: var(--accent); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px dashed var(--accent); outline-offset: 3px; }
.site { max-width: 760px; margin: 0 auto; padding: 18px 20px 6px; display: flex; align-items: center; gap: 18px; }
.site .brand { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--ink); text-decoration: none; font: 800 24px/1 "Baloo 2", sans-serif; }
.site .brand img { height: 38px; width: auto; rotate: -14deg; }
.site nav { display: flex; gap: 18px; font-weight: 600; }
.site nav a { color: var(--ink); text-decoration: none; padding: 6px 0; }
.site nav a:hover { color: var(--accent); }
.hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.hero img { width: 160px; height: auto; }
.lead { color: var(--soft); font-size: 19px; margin: 6px 0 0; }
.meta { color: var(--soft); }
.card, .box { position: relative; background: var(--surface); border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 20px; padding: 16px 20px; margin: 12px 0; }
.card::after, .box::after { content: ""; position: absolute; inset: 5px; border: 1.5px dashed rgba(30, 34, 70, .16); border-radius: 15px; pointer-events: none; }
.card h3 { margin: 0 0 4px; font-size: 19px; }
.card p { margin: 0; }
.note { background: #FFF1D3; border-radius: 14px; padding: 12px 16px; }
.foot { max-width: 760px; margin: 0 auto; padding: 22px 20px 48px; color: var(--soft); font-size: 15px; border-top: 2px dashed var(--line); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { color: var(--soft); }
.foot p { margin: 10px 0 0; }
.asleep { text-align: center; padding-top: 10vh; }
.asleep img { width: 150px; height: auto; rotate: -10deg; }