/* WysMy - brand palette + light/dark themes. Loaded by every page, before the page stylesheet.
   Brand:  Deep Slate #213547 (text, nav, dark containers) · Electric Teal #22BBB1 (CTAs, active states)
           Soft Mint #E6F7F5 (hover / subtle highlights) · Ice #F8FAFC (background) · White · Cool Grey #94A3B8 (borders, disabled)
           Midnight Navy #0F172A (dark-mode background)
   The "pop" colours are only for data and decoration (answer buttons, word clouds, confetti): quiz answers need
   several colours that are easy to tell apart. */
:root {
  color-scheme: light;
  --slate:#213547; --teal:#22BBB1; --mint:#E6F7F5; --ice:#F8FAFC; --grey:#94A3B8; --navy:#0F172A;

  --brand:#22BBB1; --brand-d:#14867f; --on-brand:#213547;
  --bg:#F8FAFC; --card:#FFFFFF; --ink:#213547; --dim:#5f7287; --line:#d8e1ea; --soft:#E6F7F5;
  --input:#FFFFFF; --nav-bg:#213547; --nav-ink:#F8FAFC; --nav-dim:#b4c2d1;
  --hl:#14867f;               /* teal for text on the page background */
  --good:#13a07a; --bad:#e5484d;
  --shadow:rgba(33,53,71,.14);

  --pop1:#FF6B6B; --pop2:#FFC53D; --pop3:#8B5CF6; --pop4:#38BDF8; --pop5:#34D399;
  --tint1:rgba(255,107,107,.16); --tint2:rgba(255,197,61,.22); --tint3:rgba(139,92,246,.14); --tint4:rgba(34,187,177,.16);

  --font-head:'Fredoka','Baloo 2','Segoe UI Rounded','Trebuchet MS',system-ui,sans-serif;
  --font:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0F172A; --card:#1a2a3d; --ink:#F8FAFC; --dim:#94A3B8; --line:rgba(148,163,184,.28); --soft:rgba(34,187,177,.15);
  --input:#142236; --nav-bg:#213547; --nav-ink:#F8FAFC; --nav-dim:#a6b6c8;
  --hl:#3fd6cb;
  --good:#34d399; --bad:#ff7a7f;
  --shadow:rgba(0,0,0,.45);
  --tint1:rgba(255,107,107,.22); --tint2:rgba(255,197,61,.2); --tint3:rgba(139,92,246,.24); --tint4:rgba(34,187,177,.24);
}

/* ---- logo ---- */
:root { --logo-a:#213547; }
:root[data-theme="dark"] { --logo-a:#F8FAFC; }
.topbar { --logo-a:#F8FAFC; }                       /* the nav bar is Deep Slate in both themes */
.mark { display:block; flex:none; overflow:visible; }
.mark .a { stroke:var(--logo-a); }
.mark .af { fill:var(--logo-a); stroke:var(--logo-a); }
.mark .t { stroke:var(--teal); }
.wordmark { display:inline-block; vertical-align:middle; height:1.4em; width:auto; aspect-ratio:487.1/176; overflow:visible; color:var(--logo-a); }
.wordmark .a { stroke:currentColor; }
.wordmark .t { stroke:var(--teal); }
.brand { gap:9px; }

/* ---- "+10 s" effect (shared by projector, phones and console) ---- */
.plusfx { position:absolute; left:50%; top:0; z-index:5; transform:translateX(-50%); font-family:var(--font-head); font-weight:700; font-size:max(18px, 1.15em); color:var(--teal); text-shadow:0 2px 0 rgba(0,0,0,.25); pointer-events:none; white-space:nowrap; animation:plusUp 1.7s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes plusUp { 0% { opacity:0; transform:translate(-50%,40%) scale(.5); } 18% { opacity:1; transform:translate(-50%,-30%) scale(1.35); } 100% { opacity:0; transform:translate(-50%,-190%) scale(1); } }
.bump { animation:bump .9s cubic-bezier(.3,1.7,.5,1); }
@keyframes bump { 0% { transform:scale(1); box-shadow:0 0 0 0 rgba(34,187,177,.7); } 25% { transform:scale(1.22); box-shadow:0 0 0 .9vh rgba(34,187,177,.45); } 100% { transform:scale(1); box-shadow:0 0 0 2.4vh rgba(34,187,177,0); } }

/* ---- animated background: survey charts, clouds and speech bubbles (markup: wm_bgfx()) ---- */
.bgfx { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bgs { position:absolute; display:block; aspect-ratio:1; opacity:.22; animation:bgDrift var(--dur,20s) ease-in-out var(--dl,0s) infinite; transform:rotate(var(--rot,0deg)); }
:root[data-theme="dark"] .bgs { opacity:.1; }
.bgs svg { width:100%; height:100%; overflow:visible; display:block; }
.bgs.a1 { animation-name:bgDrift2; } .bgs.a2 { animation-name:bgDrift3; }
.bgs .c1 { fill:var(--brand); } .bgs .c2 { fill:var(--pop2); } .bgs .c3 { fill:var(--pop3); } .bgs .c4 { fill:var(--pop4); } .bgs .c5 { fill:var(--pop5); }
.bgs .st.c1 { stroke:var(--brand); fill:none; } .bgs .st.c2 { stroke:var(--pop2); fill:none; } .bgs .st.c3 { stroke:var(--pop3); fill:none; } .bgs .st.c4 { stroke:var(--pop4); fill:none; } .bgs .st.c5 { stroke:var(--pop5); fill:none; }
.bgs .grow { transform-box:fill-box; transform-origin:bottom; animation:bgGrow 4.5s ease-in-out var(--d,0s) infinite; }
.bgs .growx { transform-box:fill-box; transform-origin:left; animation:bgGrowX 5s ease-in-out var(--d,0s) infinite; }
.bgs .dot { animation:bgDot 1.6s ease-in-out var(--d,0s) infinite; }
.bgs .twk { animation:bgTwk 3s ease-in-out var(--d,0s) infinite; transform-box:fill-box; transform-origin:center; }
@keyframes bgDrift { 0%,100% { translate:0 0; scale:1; } 50% { translate:1.6vmin -3vmin; scale:1.07; } }
@keyframes bgDrift2 { 0%,100% { translate:0 0; rotate:0deg; } 50% { translate:-2.4vmin 2vmin; rotate:7deg; } }
@keyframes bgDrift3 { 0%,100% { translate:0 0; scale:1; } 33% { translate:2vmin 1.4vmin; scale:.94; } 66% { translate:-1vmin -2.2vmin; scale:1.05; } }
@keyframes bgGrow { 0%,100% { transform:scaleY(.55); } 50% { transform:scaleY(1); } }
@keyframes bgGrowX { 0%,100% { transform:scaleX(.5); } 50% { transform:scaleX(1); } }
@keyframes bgDot { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@keyframes bgTwk { 0%,100% { transform:scale(.8); } 50% { transform:scale(1.15); } }
@media (prefers-reduced-motion:reduce) { .bgs, .bgs * { animation:none !important; } }