/* Miller family: Florida beach. Sunset peach, palm-tree teal and coral, with a soft sunset-over-the-water strip across the top, sand along the bottom
   and the palm-beach picture on the sign-in card. Text stays deep teal-navy so it is easy to read. */
:root { --bg:#fffaf3; --top:#ffe6cc; --ink:#14323a; --muted:#57737a; --card:#ffffff; --line:#f0d9bf;
        --accent:#0f7f8c; --onaccent:#ffffff; --title:#0d6572; --nobg:#fff0ec; --yesbg:#e9f6ef; --shadow:rgba(15,111,124,.24);
        --title-font:"Snell Roundhand","Segoe Script","Brush Script MT","Apple Chancery",cursive; --title-weight:400; --title-size:2rem; --login-title-size:2.5rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) {
        --bg:#10242a; --top:#1d4650; --ink:#fdf2e6; --muted:#bfd3d6; --card:#183139; --line:#2f5560;
        --accent:#ffb36b; --onaccent:#2a1a0c; --title:#ffd3a3; --nobg:#3a2320; --yesbg:#1c3a2b; --shadow:rgba(0,0,0,.5); } }
h1 { text-shadow:0 .08rem .3rem rgba(240,138,93,.35); }
body { background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='xMidYMax slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ffd9b0' stop-opacity='.9'/><stop offset='.55' stop-color='%23fbb98c' stop-opacity='.45'/><stop offset='1' stop-color='%23fff6ea' stop-opacity='0'/></linearGradient></defs><rect width='1200' height='200' fill='url(%23s)'/><circle cx='930' cy='96' r='46' fill='%23fff7d6' opacity='.85'/><path d='M0 150 C150 128 300 172 480 150 S840 128 1200 154 L1200 200 L0 200Z' fill='%2317909b' opacity='.30'/><path d='M0 172 C180 154 340 190 560 170 S900 152 1200 174 L1200 200 L0 200Z' fill='%230f6f7c' opacity='.30'/></svg>") top center / 100% 11rem no-repeat,
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0 80 C200 50 400 100 640 70 S1000 40 1200 76 L1200 120 L0 120Z' fill='%23f3c58f' opacity='.38'/><path d='M0 100 C220 78 420 116 660 96 S1020 74 1200 100 L1200 120 L0 120Z' fill='%23e9a96b' opacity='.30'/></svg>") bottom center / 100% 5rem no-repeat fixed,
  linear-gradient(180deg, var(--top) 0, var(--bg) 18rem) no-repeat, var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) body { background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='xMidYMax slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ffd9b0' stop-opacity='.9'/><stop offset='.55' stop-color='%23fbb98c' stop-opacity='.45'/><stop offset='1' stop-color='%23fff6ea' stop-opacity='0'/></linearGradient></defs><rect width='1200' height='200' fill='url(%23s)'/><circle cx='930' cy='96' r='46' fill='%23fff7d6' opacity='.85'/><path d='M0 150 C150 128 300 172 480 150 S840 128 1200 154 L1200 200 L0 200Z' fill='%2317909b' opacity='.30'/><path d='M0 172 C180 154 340 190 560 170 S900 152 1200 174 L1200 200 L0 200Z' fill='%230f6f7c' opacity='.30'/></svg>") top center / 100% 11rem no-repeat,
  linear-gradient(180deg, var(--top) 0, var(--bg) 18rem) no-repeat, var(--bg); } }

/* the beach picture, very soft, in the bottom-right corner behind everything */
body::before { content:""; position:fixed; z-index:-1; pointer-events:none; right:-5vw; bottom:-4vh; width:min(62vw, 520px); aspect-ratio:1;
  background:url("plumeria.webp") center / contain no-repeat; opacity:.16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) body::before { opacity:.10; } }
@media (min-width: 1100px) { body::before { width:min(36vw, 620px); } }
/* on the sign-in card: the picture, a little larger than a flower would be */
.login .flower { width:7rem; right:-.2rem; top:-3.2rem; transform:rotate(0); }