/* "Passionflower" look (Michael's own): violet, plum and forest green with orange touches. Light by day, deep plum at night; he switches between them on purpose.
   A dusk-sky strip with hills across the top, grass along the bottom, the drawn passionflower on the sign-in card and faint in the corner. System fonts only. */
:root { --bg:#f6f1fa; --top:#dccbef; --ink:#241a33; --muted:#5d4e73; --card:#ffffff; --line:#d8c8ea;
        --accent:#6a3aa8; --onaccent:#ffffff; --title:#4b2a80; --nobg:#fbe9ee; --yesbg:#e6f3e8; --shadow:rgba(75,42,128,.24);
        --title-font:Georgia,"Palatino Linotype","Book Antiqua",serif; --title-weight:700; --title-size:1.6rem; --login-title-size:2.3rem; }
@media (min-width: 480px) { :root { --title-size:2rem; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) {
        --bg:#15101f; --top:#2c1c48; --ink:#f1e8fb; --muted:#bfaedb; --card:#211833; --line:#41305f;
        --accent:#b98cf0; --onaccent:#1d1030; --title:#e1c9ff; --nobg:#3a2030; --yesbg:#1c3324; --shadow:rgba(0,0,0,.55); } }
h1 { text-shadow:0 .08rem .3rem rgba(106,58,168,.3); }
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='%23b79be0' stop-opacity='.85'/><stop offset='.6' stop-color='%23e6c2e8' stop-opacity='.5'/><stop offset='1' stop-color='%23f6f1fa' stop-opacity='0'/></linearGradient></defs><rect width='1200' height='200' fill='url(%23s)'/><circle cx='930' cy='110' r='40' fill='%23fff1c9' opacity='.75'/><path d='M0 140 C170 120 330 154 540 138 S880 114 1200 142 L1200 200 L0 200Z' fill='%234c3a78' opacity='.22'/><path d='M0 166 C190 148 370 182 590 164 S930 148 1200 168 L1200 200 L0 200Z' fill='%232e5a3c' opacity='.28'/></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 56 400 102 640 74 S1000 46 1200 78 L1200 120 L0 120Z' fill='%23527a4a' opacity='.3'/><path d='M0 100 C220 80 420 116 660 98 S1020 78 1200 102 L1200 120 L0 120Z' fill='%23386038' opacity='.3'/></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='%23553a88' stop-opacity='.9'/><stop offset='.6' stop-color='%2333224f' stop-opacity='.5'/><stop offset='1' stop-color='%2315101f' stop-opacity='0'/></linearGradient></defs><rect width='1200' height='200' fill='url(%23s)'/><circle cx='930' cy='110' r='36' fill='%23ffb36b' opacity='.5'/><path d='M0 140 C170 120 330 154 540 138 S880 114 1200 142 L1200 200 L0 200Z' fill='%23100a1a' opacity='.55'/><path d='M0 166 C190 148 370 182 590 164 S930 148 1200 168 L1200 200 L0 200Z' fill='%230c1a12' opacity='.6'/></svg>") top center / 100% 11rem no-repeat,
  linear-gradient(180deg, var(--top) 0, var(--bg) 18rem) no-repeat, var(--bg); } }

/* the flower, 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:.12; } }
@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:3.5rem; right:.5rem; top:-1.7rem; transform:rotate(0); }