/* ============================================================
   v12.88.0 — Ray and Sparky on the site: the team race, the quiz
   moments and the Vocab Booster helpers (see js/mascots.js)
   Ray: blue #2563EB / ink #1E3A8A. Sparky: purple #7C3AED / ink #4C1D95.
   ============================================================ */
.mz-img{ display:block; height:auto; max-width:100%; }

/* a character and what they say */
.mz-say{ display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.mz-say-img{ width:58px; height:58px; object-fit:contain; flex:0 0 auto; }
.mz-bubble{ background:#F5F0FF; color:#2E2559; border-radius:14px; padding:8px 12px; font-size:.95rem; line-height:1.4; position:relative; }
.mz-oops .mz-bubble{ background:#FFF4E5; color:#6B3A00; }
.mz-ray-intro .mz-bubble{ background:#EFF6FF; color:#1E3A8A; }
.mz-spell .mz-bubble{ background:#EFF6FF; color:#1E3A8A; }
.mz-split{ font-weight:800; letter-spacing:.04em; font-size:1.08rem; }
.mz-split i{ font-style:normal; color:#E8590C; padding:0 2px; }

/* Ray's tip before a quiz */
.mz-tip{ display:flex; align-items:center; gap:12px; background:#EFF6FF; border:1.5px solid #BFD3FB; border-radius:14px;
  padding:8px 14px; margin:14px 0 0; color:#1E3A8A; }
.mz-tip p{ margin:0; font-size:.98rem; }
.mz-tip-img{ width:62px; height:62px; object-fit:contain; flex:0 0 auto; }

/* the reaction under a quiz score */
.mz-result{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; border-radius:16px;
  padding:10px 16px; margin:10px auto 0; max-width:640px; text-align:left; }
.mz-result p{ margin:0; flex:1 1 240px; }
.mz-result .btn{ flex:0 0 auto; }
.mz-result-img{ width:96px; height:96px; object-fit:contain; flex:0 0 auto; }
.mz-hi{ background:#FFF7DA; color:#6B4A00; }
.mz-mid{ background:#EFF6FF; color:#1E3A8A; }
.mz-lo{ background:#F5F0FF; color:#3B2A78; }

/* a card that floats in (pause, two-minute warning) */
.mz-toast{ position:fixed; right:18px; bottom:18px; z-index:700; display:flex; align-items:center; gap:12px; max-width:360px;
  background:#fff; color:#211A3E; border-radius:18px; padding:10px 40px 10px 10px; box-shadow:0 12px 34px rgba(33,26,62,.22);
  animation:mz-in .3s ease-out; font-size:.95rem; line-height:1.4; }
.mz-toast.is-out{ opacity:0; transform:translateY(10px); transition:all .25s; }
.mz-toast-img{ width:70px; height:70px; object-fit:contain; flex:0 0 auto; }
.mz-toast-x{ position:absolute; top:6px; right:8px; border:0; background:none; font-size:1.3rem; line-height:1; cursor:pointer;
  color:#6B6390; width:30px; height:30px; border-radius:50%; }
.mz-toast-x:hover{ background:#F0EAFF; }
@keyframes mz-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .mz-toast{ animation:none; } }
@media (max-width:600px){ .mz-toast{ left:12px; right:12px; bottom:12px; max-width:none; } }

/* Learn cards: who is speaking, the safe and the lock, Year 3 act-it-out */
.mz-who{ display:flex; align-items:center; gap:8px; margin:0 0 4px; }
.mz-ava{ width:34px; height:34px; object-fit:contain; flex:0 0 auto; }
.vl-zone .mz-zone-img{ float:right; width:46px; height:46px; object-fit:contain; margin:-4px -2px 0 6px; }
.mz-act{ display:flex; align-items:center; gap:12px; background:#FFF7DA; border:1.5px solid #F3DFA2; border-radius:14px; padding:10px 12px; margin:10px 0 0; }
.mz-act p{ margin:2px 0 0; }
.mz-act-h{ font-weight:800; color:#6B4A00; }
.mz-act-img{ width:90px; height:90px; object-fit:contain; flex:0 0 auto; }

/* the booster page: "Ray and Sparky challenge your grown-up!" */
.mz-challenge{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#FFFDF5; border:1.5px solid #F3DFA2; }
.mz-challenge h3{ margin:0 0 4px; }
.mz-challenge p{ margin:0 0 10px; }
.mz-challenge > div{ flex:1 1 260px; }
.mz-challenge-img{ width:180px; flex:0 0 auto; }

/* ---------- Team Ray vs Team Sparky ---------- */
.tr-card{ margin-top:18px; }
.tr-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.tr-kicker{ font-size:.78rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#6B6390; }
.tr-title{ margin:0; }
.tr-ends{ background:#FEF3C7; color:#92400E; font-weight:800; font-size:.86rem; padding:6px 12px; border-radius:999px; }
.tr-teams{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.tr-team{ display:flex; align-items:center; gap:12px; border:3px solid transparent; border-radius:18px; padding:12px 14px; }
.tr-team.tr-ray{ background:#EFF6FF; } .tr-team.tr-sparky{ background:#F5F0FF; }
.tr-team.tr-ray.is-mine{ border-color:#2563EB; } .tr-team.tr-sparky.is-mine{ border-color:#7C3AED; }
.tr-badge{ width:76px; height:76px; object-fit:contain; flex:0 0 auto; }
.tr-team-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.tr-team-name{ font-weight:800; font-size:1.02rem; }
.tr-ray .tr-team-name, .tr-ray .tr-pct{ color:#1E3A8A; } .tr-sparky .tr-team-name, .tr-sparky .tr-pct{ color:#4C1D95; }
.tr-you{ display:inline-block; color:#fff; font-size:.72rem; font-weight:800; padding:2px 9px; border-radius:999px; vertical-align:middle; }
.tr-ray .tr-you{ background:#2563EB; } .tr-sparky .tr-you{ background:#7C3AED; }
.tr-pct{ font-family:Poppins,sans-serif; font-weight:800; font-size:2.2rem; line-height:1; }
.tr-bar{ height:9px; border-radius:999px; overflow:hidden; background:rgba(0,0,0,.07); }
.tr-bar i{ display:block; height:100%; border-radius:999px; }
.tr-ray .tr-bar i{ background:#2563EB; } .tr-sparky .tr-bar i{ background:#7C3AED; }
.tr-size{ font-size:.8rem; font-weight:700; color:#5B5480; }
.tr-mine-wrap{ display:flex; gap:18px; margin-top:16px; flex-wrap:wrap; }
.tr-mine{ flex:1 1 340px; display:flex; flex-direction:column; gap:7px; }
.tr-mine-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tr-mine-head h3{ margin:0; }
.tr-mine-score{ color:#1E3A8A; }
.tr-late-join{ margin:0; background:#FEF3C7; color:#92400E; border-radius:12px; padding:8px 12px; font-size:.9rem; }
.tr-task{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background:#FAF8FF; }
.tr-task.is-done{ background:#F2FBF6; }
.tr-tick{ flex:0 0 auto; color:#8B84B5; } .tr-tick.ok{ color:#10B981; }
.tr-task-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.tr-task-txt span{ font-size:.84rem; color:#5B5480; }
.tr-task-pts{ font-weight:800; white-space:nowrap; }
.tr-side{ flex:0 1 230px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.tr-tug{ width:220px; }
.tr-nudge{ margin:0; background:#F0EAFF; color:#3B3360; border-radius:14px; padding:10px 12px; font-size:.9rem; }
.tr-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
  padding-top:10px; border-top:2px solid #F0EAFF; font-size:.82rem; color:#5B5480; }
.tr-foot span{ flex:1 1 300px; }

/* the Monday result (in the pop-up) */
.tr-result-top{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.tr-result-img{ width:170px; flex:0 0 auto; }
.tr-result-txt{ flex:1 1 280px; }
.tr-result-h{ margin:4px 0 8px; font-size:1.9rem; line-height:1.15; }
.tr-result-h.tr-ray{ color:#1E3A8A; } .tr-result-h.tr-sparky{ color:#4C1D95; } .tr-result-h.tr-draw{ color:#92400E; }
.tr-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.tr-chip{ font-family:Poppins,sans-serif; font-weight:800; font-size:1.1rem; border-radius:12px; padding:6px 14px; }
.tr-chip.tr-ray{ background:#EFF6FF; color:#1E3A8A; } .tr-chip.tr-sparky{ background:#F5F0FF; color:#4C1D95; }
.tr-chip.tr-ray.is-win{ background:#2563EB; color:#fff; } .tr-chip.tr-sparky.is-win{ background:#7C3AED; color:#fff; }
.tr-result-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:14px; }
.tr-box{ background:#FAF8FF; border-radius:16px; padding:12px 16px; }
.tr-box-ray{ background:#EFF6FF; } .tr-box-sparky{ background:#F5F0FF; }
.tr-box-h{ font-weight:800; font-size:.88rem; color:#5B5480; }
.tr-box-big{ font-family:Poppins,sans-serif; font-weight:800; font-size:1.35rem; margin:2px 0; }
.tr-box-s{ font-size:.88rem; color:#3B3360; margin-top:4px; }
.tr-weeks{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 2px; }
.tr-wk{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.tr-wk b{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-family:Poppins,sans-serif; }
.tr-wk small{ font-size:.72rem; font-weight:700; color:#6B6390; }
.tr-wk-ray b{ background:#2563EB; } .tr-wk-sparky b{ background:#7C3AED; } .tr-wk-draw b{ background:#B45309; }
.tr-result-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px;
  background:#FEF3C7; color:#92400E; border-radius:14px; padding:10px 14px; font-weight:700; font-size:.92rem; }

/* the admin's team page */
.tra-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; margin:14px 0; }
.tra-col{ background:#fff; border-radius:16px; padding:14px; border:2px solid #E7E1FA; }
.tra-col.tr-ray{ border-color:#BFD3FB; } .tra-col.tr-sparky{ border-color:#D9CCFB; }
.tra-col h3{ display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.tra-badge{ width:40px; height:40px; object-fit:contain; }
.tra-table tr.is-gone td{ opacity:.6; }

@media (max-width:640px){
  .tr-teams{ grid-template-columns:1fr; }
  .tr-badge{ width:60px; height:60px; }
  .tr-pct{ font-size:1.8rem; }
  .tr-result-img{ width:120px; }
  .tr-result-h{ font-size:1.5rem; }
}

/* ---------- v12.89.0 — the quiz starter page ----------
   Ray and Sparky slide in and talk (each line arrives in turn, --qd), then the
   tips, the example and "how it works" fade up. Still for reduced motion. */
.qs{ padding:4px 0 2px; }
.qs-stage{ display:flex; flex-direction:column; gap:10px; max-width:820px; margin:0 auto 18px; }
.qs-line{ display:flex; align-items:flex-end; gap:10px; opacity:0; animation:qs-in .55s cubic-bezier(.2,1.3,.5,1) var(--qd) forwards; }
.qs-sparky{ flex-direction:row-reverse; transform-origin:right bottom; }
.qs-ava{ width:92px; height:92px; object-fit:contain; flex:0 0 auto; animation:qs-bob 2.6s ease-in-out calc(var(--qd) + .6s) infinite; }
.qs-sparky .qs-ava{ animation-duration:2.2s; }
.qs-bubble{ position:relative; max-width:560px; border-radius:18px; padding:10px 14px 11px; font-size:1.02rem; line-height:1.45;
  box-shadow:0 6px 18px rgba(33,26,62,.08); }
.qs-ray .qs-bubble{ background:#EFF6FF; color:#1E3A8A; border-bottom-left-radius:4px; }
.qs-sparky .qs-bubble{ background:#F5F0FF; color:#3B2A78; border-bottom-right-radius:4px; }
.qs-who{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; opacity:.75; margin-bottom:2px; }
.qs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.qs-card{ background:#fff; border:2px solid #EEE9FB; border-radius:18px; padding:14px 16px; opacity:0; animation:qs-up .5s ease var(--qd) forwards; }
.qs-card h3{ display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:1.05rem; }
.qs-ico{ width:40px; height:40px; object-fit:contain; flex:0 0 auto; }
.qs-card ol, .qs-card ul{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.qs-tips{ border-color:#BFD3FB; } .qs-ex{ border-color:#D9CCFB; } .qs-how{ border-color:#F3DFA2; }
.qs-ex-q{ margin:0 0 6px; font-weight:800; font-size:1.05rem; }
.qs-ex-a{ margin:0 0 4px; color:#065F46; }
.qs-ex-why{ margin:0; color:#5B5480; font-size:.92rem; }
.qs-note{ margin:10px 0 0; background:#FEF3C7; color:#92400E; border-radius:10px; padding:8px 10px; font-size:.92rem; }
.qs-go{ display:flex; justify-content:center; margin:18px 0 4px; opacity:0; animation:qs-up .5s ease 4.4s forwards; }
.qs-start{ font-size:1.08rem; padding:12px 26px; }
.mz-spell-line{ margin:0 0 8px; color:#1E3A8A; }
@keyframes qs-in{ from{ opacity:0; transform:translateY(16px) scale(.92); } to{ opacity:1; transform:none; } }
@keyframes qs-up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes qs-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media (prefers-reduced-motion: reduce){
  .qs-line, .qs-card, .qs-go{ animation:none; opacity:1; }
  .qs-ava{ animation:none; }
}
@media (max-width:600px){
  .qs-ava{ width:64px; height:64px; }
  .qs-bubble{ font-size:.96rem; }
}

/* ---------- v12.90.0 — Ray and Sparky present the portal guide ---------- */
.gp{ display:flex; flex-direction:column; gap:8px; max-width:900px; margin:10px auto 0; text-align:left; }
.gp-line{ display:flex; align-items:flex-end; gap:10px; }
.gp-sparky{ flex-direction:row-reverse; }
.gp-ava{ width:64px; height:64px; object-fit:contain; flex:0 0 auto; transition:transform .25s; }
.gp-bubble{ margin:0; border-radius:16px; padding:8px 13px 9px; font-weight:600; line-height:1.45; max-width:760px; }
.gp-ray .gp-bubble{ background:#EFF6FF; color:#1E3A8A; border-bottom-left-radius:4px; }
.gp-sparky .gp-bubble{ background:#F5F0FF; color:#3B2A78; border-bottom-right-radius:4px; }
.gp-who{ display:block; font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; opacity:.75; }
.gp-line.is-speaking .gp-ava{ animation:gp-talk .45s ease-in-out infinite alternate; }
.gp-line.is-speaking .gp-bubble{ box-shadow:0 0 0 3px #FBBF24; }
@keyframes gp-talk{ from{ transform:translateY(0) rotate(-2deg); } to{ transform:translateY(-5px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce){ .gp-line.is-speaking .gp-ava{ animation:none; } }
.gv-play[aria-pressed="true"]{ background:#B91C1C; border-color:#B91C1C; }
.guide-show.is-fs .gp-bubble{ font-size:1.05rem; }
@media (max-width:600px){ .gp-ava{ width:48px; height:48px; } .gp-bubble{ font-size:.92rem; } }

/* the editor: a slide's voice row, and Sparky's tour recordings */
.gv-edit{ list-style:none; background:#FAF8FF; border:1.5px dashed #D9CCFB; border-radius:12px; padding:10px 12px; margin:4px 0 10px; }
.gv-edit textarea{ width:100%; font-family:inherit; }
.gv-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gv-row audio, .tv-ctl audio{ height:32px; vertical-align:middle; max-width:260px; }
.tv-list{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.tv-list li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center; }
.tv-text{ flex:1 1 320px; font-size:.92rem; }
.tv-ctl{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* Sparky points the way in "Show me around" */
.tour-card.has-sparky{ padding-left:96px !important; min-height:120px; width:410px; }
.tour-sparky{ position:absolute; left:8px; bottom:10px; width:80px; height:80px; object-fit:contain; animation:qs-bob 2.4s ease-in-out infinite; }
.tour-who{ color:#6D28D9; }
.tour-voice{ border:0; background:#F0EAFF; border-radius:999px; width:34px; height:34px; margin-left:6px; cursor:pointer; font-size:1rem; vertical-align:middle; }
.tour-voice[aria-pressed="true"]{ background:#7C3AED; }
.tour-card.is-docked.has-sparky{ padding-left:84px !important; }
.tour-card.is-docked .tour-sparky{ width:66px; height:66px; }
@media (prefers-reduced-motion: reduce){ .tour-sparky{ animation:none; } }
/* the guide's own rule makes every picture in a slide full width: not the presenters */
.guide-slide img.gp-ava{ width:64px !important; height:64px !important; max-width:none; max-height:none; border:0; border-radius:0; margin:0; display:block; cursor:default; filter:none; }
@media (max-width:600px){ .guide-slide img.gp-ava{ width:48px !important; height:48px !important; } }
.gp-line.gp-cont .gp-ava{ visibility:hidden; height:8px !important; }
.gp-line.gp-cont{ margin-top:-4px; }

/* ---------- v12.91.0 — "View as student": the bar across the top ---------- */
.va-bar{ position:fixed; top:0; left:0; right:0; z-index:900; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#5B21B6; color:#fff; padding:8px 14px; font-size:.92rem; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.va-txt{ flex:1 1 260px; }
.va-exit{ border:0; background:#fff; color:#4C1D95; font-weight:800; border-radius:999px; padding:7px 14px; cursor:pointer; }
.va-exit:hover{ background:#F0EAFF; }
body.va-on{ padding-top:46px; }
body.va-on .topbar, body.va-on .sidebar{ top:46px; }
@media (max-width:600px){ body.va-on{ padding-top:70px; } body.va-on .topbar, body.va-on .sidebar{ top:70px; } }
body.va-on .sidebar{ height:calc(100vh - 46px); max-height:calc(100vh - 46px); }
@media (max-width:600px){ body.va-on .sidebar{ height:calc(100vh - 70px); max-height:calc(100vh - 70px); } }

/* v13.7.0: Ray and Sparky's tour (the dashboard welcome): one fixed height */
.rs-box{ margin-top:14px; --rs-ink:#1B1640; --rs-muted:#6A7090; --rs-a1:#3F27BD; --rs-a2:#D22CB2; --rs-ray:#E8590C; --rs-sparky:#7B3FE4; }
.rs{ height:330px; overflow:hidden; background:linear-gradient(135deg,#F6F2FF 0%,#FFF 45%,#FFF5EC 100%); border:2px solid #ECE4FF; border-radius:24px;
  padding:14px clamp(14px,2.2vw,24px); display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(12px,2vw,24px); }
.rs-hero{ position:relative; align-self:center; }
.rs-hero img{ width:100%; height:auto; display:block; }
.rs-ban{ position:absolute; left:24%; right:22%; top:71%; transform:translateY(-50%); font:800 13px/1.15 Poppins,sans-serif; color:var(--rs-ink); text-align:center; }
.rs-ban small{ display:block; font-size:10px; font-weight:700; color:var(--rs-muted); margin-top:2px; }
.rs-main{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.rs-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rs-title{ font:800 21px/1.15 Poppins,sans-serif; color:var(--rs-ink); margin:0; flex:1 1 auto; }
.rs-title em{ font-style:italic; font-family:Georgia,serif; background:linear-gradient(90deg,var(--rs-a1),var(--rs-a2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rs-ctl{ display:flex; gap:6px; }
.rs-ctl button{ font-family:inherit; font-weight:800; font-size:12.5px; border-radius:999px; padding:6px 12px; border:2px solid #E2DBFA; background:#fff; color:var(--rs-a1); cursor:pointer; min-height:34px; }
.rs-ctl button:focus-visible, .rs-chip:focus-visible, .rs-closed:focus-visible{ outline:3px solid #F2B134; outline-offset:2px; }
.rs-dots{ display:flex; gap:5px; margin:8px 0 4px; }
.rs-dots i{ width:22px; height:5px; border-radius:9px; background:#E6E0F7; overflow:hidden; position:relative; }
.rs-dots i.done{ background:#C9BCF5; }
.rs-dots i.cur::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--rs-a1),var(--rs-a2)); transform-origin:left; transform:scaleX(var(--p,0)); }
.rs-stage{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:8px; transition:opacity .3s; }
.rs-stage.out{ opacity:0; }
.rs-msg{ display:flex; gap:10px; align-items:flex-end; opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; }
.rs-msg.on{ opacity:1; transform:none; }
.rs-msg.ray{ flex-direction:row-reverse; }
.rs-face{ flex:0 0 42px; width:42px; height:42px; border-radius:50%; overflow:hidden; border:2.5px solid #fff; box-shadow:0 2px 8px rgba(30,20,80,.15); background:#fff; }
.rs-face img, #view .rs-face img{ width:150%; max-width:none; height:auto; margin:-6% 0 0 -25%; }
.rs-msg.ray .rs-face img, #view .rs-msg.ray .rs-face img{ width:160%; margin:-4% 0 0 -32%; }
.rs-bub{ max-width:540px; background:#fff; border:2px solid #E7E0FF; border-radius:16px 16px 16px 6px; padding:8px 13px; line-height:1.4; font-size:15px; color:#3E3E4A; box-shadow:0 4px 14px rgba(63,39,189,.06); }
.rs-msg.ray .rs-bub{ border-color:#FFD9C2; border-radius:16px 16px 6px 16px; background:#FFFBF7; }
.rs-who{ display:block; font:800 10.5px Poppins,sans-serif; letter-spacing:.05em; text-transform:uppercase; margin-bottom:1px; }
.rs-msg.sparky .rs-who{ color:var(--rs-sparky); } .rs-msg.ray .rs-who{ color:var(--rs-ray); }
.rs-bub b{ color:var(--rs-ink); }
.rs-typing{ display:inline-flex; gap:4px; padding:11px 14px; }
.rs-typing i{ width:7px; height:7px; border-radius:50%; background:#C9BFF2; animation:rsb 1s infinite; }
.rs-typing i:nth-child(2){ animation-delay:.15s; } .rs-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes rsb{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }
.rs-chips{ flex:0 0 auto; display:flex; flex-wrap:wrap; gap:6px; min-height:34px; padding-top:6px; border-top:1.5px dashed #E6E0F7; }
.rs-chip{ display:inline-flex; align-items:center; gap:5px; font-weight:800; font-size:13px; text-decoration:none; color:#fff; border-radius:999px; padding:6px 12px;
  background:linear-gradient(135deg,var(--rs-a1),var(--rs-a2)); animation:rspop .4s cubic-bezier(.2,1.6,.4,1); }
.rs-chip.ray{ background:linear-gradient(135deg,#E8590C,#F59F00); }
.rs-chip.now{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--rs-a2); }
.rs-chip:hover{ filter:brightness(1.07); color:#fff; }
@keyframes rspop{ from{ transform:scale(.3); opacity:0; } to{ transform:none; opacity:1; } }
.rs-hint{ font-size:12.5px; color:var(--rs-muted); align-self:center; }
.rs-closed{ display:none; align-items:center; gap:10px; background:#fff; border:2px solid #ECE4FF; border-radius:999px; padding:6px 14px 6px 6px; max-width:100%; cursor:pointer; font:inherit; color:var(--rs-muted); }
.rs-closed img{ width:36px; height:36px; object-fit:cover; object-position:top; border-radius:50%; }
.rs-closed b{ color:var(--rs-a1); }
.rs-box.is-closed .rs{ display:none; } .rs-box.is-closed .rs-closed{ display:inline-flex; }
@media (max-width:700px){ .rs{ grid-template-columns:1fr; height:360px; } .rs-hero{ display:none; } .rs-title{ font-size:18px; } .rs-bub{ font-size:14px; } }
@media (prefers-reduced-motion:reduce){ .rs-msg, .rs-stage{ transition:none; } .rs-typing i, .rs-chip{ animation:none; } }
.modal:has(.rs-preview){ max-width:1080px; width:96vw; }
/* the staff editor */
.rst-top{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:10px; }
.rst-top input{ width:240px; }
.rst-topic{ border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin:0 0 8px; background:#FCFBFF; }
.rst-topic > summary{ cursor:pointer; font-size:.92rem; padding:2px 0; }
.rst-topic[open] > summary{ margin-bottom:8px; }
.rst-sbtn{ font-size:.75rem; font-weight:800; color:#fff; border-radius:999px; padding:1px 8px; background:#7B3FE4; margin-left:4px; }
.rst-sbtn.ray{ background:#E8590C; }
.rst-topic.is-off{ opacity:.6; }
.rst-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:8px; }
.rst-moves{ margin-left:auto; display:flex; gap:4px; }
.rst-line, .rst-btn{ display:flex; gap:6px; align-items:center; margin:0 0 6px; flex-wrap:wrap; }
.rst-line input{ flex:1 1 320px; } .rst-btn input{ flex:1 1 180px; }
.rst-top .check{ display:flex; align-items:center; gap:6px; width:100%; }
.rst-top .check input{ width:auto; }
.rst-sbtn{ white-space:nowrap; display:inline-block; }

/* ============================================================
   v13.9.0: Concept Builder, "How to solve these" and its overlay
   ============================================================ */
.cb-example.cb-has-howto{ display:flex; align-items:flex-start; gap:14px; }
.cb-example.cb-has-howto .cb-ex-main{ flex:1 1 auto; min-width:0; }
.cb-howto-row{ display:flex; justify-content:flex-end; margin:10px 0 0; }
.cb-howto{ flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:inherit; font-weight:800; font-size:.92rem; color:#4F46B8; background:#fff;
  border:2px solid #C9C3F2; border-radius:999px; padding:5px 14px 5px 6px; white-space:nowrap;
  box-shadow:0 3px 0 rgba(79,70,184,.14); transition:transform .14s ease, box-shadow .14s ease; }
.cb-howto:hover{ transform:translateY(-2px); box-shadow:0 5px 0 rgba(79,70,184,.18); }
.cb-howto:focus-visible{ outline:3px solid #8B7CF6; outline-offset:2px; }
.cb-howto-faces{ display:inline-flex; }
.cb-howto-faces img{ width:28px; height:28px; border-radius:50%; object-fit:cover; background:#F1EEFF; border:2px solid #fff; }
.cb-howto-faces img + img{ margin-left:-9px; }
@media (max-width:640px){
  .cb-example.cb-has-howto{ flex-direction:column; gap:8px; }
  .cb-howto{ align-self:flex-end; }
}
#cb-help .cbh-scrim{ position:fixed; inset:0; background:rgba(43,46,90,.5); z-index:230; }
#cb-help .cbh{ position:fixed; z-index:235; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px,94vw); max-height:92dvh; overflow:auto; background:#fff; border-radius:20px;
  padding:20px 22px 18px; box-shadow:0 20px 56px rgba(20,24,48,.38); animation:cbh-in .22s ease; }
@keyframes cbh-in{ from{ opacity:0; transform:translate(-50%,-46%); } }
#cb-help .cbh h3{ margin:0 32px 6px 0; font-size:1.15rem; color:#2B2E5A; }
#cb-help .cbh-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  border:0; background:#F1EEFF; color:#4F46B8; font-size:1rem; cursor:pointer; }
#cb-help .cbh-dots{ display:flex; gap:5px; margin:0 0 12px; }
#cb-help .cbh-dots i{ width:8px; height:8px; border-radius:50%; background:#DDD9F5; }
#cb-help .cbh-dots i.seen{ background:#B7AEF0; }
#cb-help .cbh-dots i.on{ background:#4F46B8; width:20px; border-radius:999px; }
#cb-help .cbh-chat{ display:flex; align-items:flex-end; gap:12px; min-height:170px; }
#cb-help .cbh-ray{ flex-direction:row-reverse; }
#cb-help .cbh-pic{ flex:0 0 auto; width:130px; height:130px; object-fit:contain; animation:cbh-pop .3s ease; }
#cb-help .cbh-both .cbh-pic{ width:150px; }
@keyframes cbh-pop{ from{ transform:translateY(8px) scale(.94); opacity:0; } }
#cb-help .cbh-bub{ position:relative; flex:1 1 auto; border-radius:16px; padding:12px 15px; margin-bottom:22px;
  background:#F4F1FF; border:2px solid #DDD9F5; animation:cbh-pop .3s ease .05s both; }
#cb-help .cbh-ray .cbh-bub{ background:#FFF4E8; border-color:#F6DCC0; }
#cb-help .cbh-bub p{ margin:4px 0 0; line-height:1.5; color:#2B2E5A; }
#cb-help .cbh-name{ font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:#4F46B8; }
#cb-help .cbh-ray .cbh-name{ color:#C2621B; }
#cb-help .cbh-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
@media (max-width:520px){
  #cb-help .cbh-chat{ flex-direction:column !important; align-items:center; }
  #cb-help .cbh-pic{ width:96px; height:96px; }
  #cb-help .cbh-bub{ margin-bottom:6px; }
}
@media (prefers-reduced-motion: reduce){
  #cb-help .cbh, #cb-help .cbh-pic, #cb-help .cbh-bub{ animation:none; }
}