/* Rrage - the mascot scene, scoped to .mascot so it cannot affect the page.
   Every colour here is a var() from the :root palette in site.css; the mascot's own
   values live there as --m-* tokens (mascot-spec reference, rrage-mascot.html). */
/* The scene's own variables live on the scene root, exactly as the reference file
   does, so every fill and stroke inside the SVG resolves even if the page around it
   changes. The values are the --m-* tokens written down in site.css (:root), which
   also flip for an explicit dark theme - so this block never needs a dark twin. */
#rrm-sc{
  --bg:var(--m-bg);--card:var(--m-card);--ink:var(--m-ink);--mut:var(--m-mut);--line:var(--m-line);
  --co:var(--red);--kb:var(--m-kb);--key:var(--m-key);--keys:var(--m-keys);--keyb:var(--m-keyb);
  --floor:var(--m-floor);--puff:var(--white);
}
.mascot__stage{background:var(--m-card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.mascot__stage svg{display:block;width:100%;height:auto}
.mascot .bg{fill:var(--card)}.mascot .floor{fill:var(--floor)}.mascot .kb{fill:var(--kb)}
.mascot .ks{fill:var(--keys)}.mascot .kf{fill:var(--key);stroke:var(--keyb);stroke-width:1.5}
.mascot .key.hot .kf{fill:var(--m-hot)}
.mascot .kl{font:600 11px Inter,"Segoe UI",Arial,sans-serif;fill:var(--mut)}
.mascot .cor{fill:var(--co)}.mascot .nav{fill:var(--ink);display:block}
.mascot .legc{fill:none;stroke:var(--co);stroke-width:13;stroke-linecap:round}
.mascot .legn{fill:none;stroke:var(--ink);stroke-width:13;stroke-linecap:round}
.mascot .pupil{fill:var(--ink)}.mascot .glint{fill:var(--card)}
.mascot .shadow{fill:var(--ink)}
.mascot .drop{fill:var(--m-ice)}.mascot .puff{fill:var(--puff);stroke:var(--keyb);stroke-width:1.5}
.mascot .dust{fill:var(--keyb)}
.mascot .spark{fill:none;stroke:var(--co);stroke-width:2.5;stroke-linecap:round}
.mascot .ring{fill:none;stroke:var(--red-soft);stroke-width:3}
.mascot .sl{stroke:var(--keyb);stroke-width:2;stroke-linecap:round}
.mascot .lt{font:800 18px Inter,"Segoe UI",Arial,sans-serif;fill:var(--co)}
.mascot .hud{fill:var(--card);fill-opacity:.94;stroke:var(--line);stroke-width:1.5}
.mascot .tt{font:600 11px Inter,"Segoe UI",Arial,sans-serif;fill:var(--mut)}
.mascot .tx{font:500 12px Inter,"Segoe UI",Arial,sans-serif;fill:var(--ink)}
.mascot .big{font:700 30px Inter,"Segoe UI",Arial,sans-serif;fill:var(--ink);font-variant-numeric:tabular-nums}
.mascot .cb{fill:none;stroke:var(--line);stroke-width:2}
.mascot .ck{fill:none;stroke:var(--m-mint2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16}
.mascot .pulse{fill:none;stroke:var(--m-mint2);stroke-width:2.5}
.mascot .paper{fill:var(--white);stroke:var(--m-keyb);stroke-width:1.5}
.mascot .pline{stroke:var(--m-keyb);stroke-width:1.5;stroke-linecap:round}
.mascot .pop{fill:var(--co)}
.mascot .popk{fill:none;stroke:var(--white);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.mascot .phone{fill:var(--ink)}.mascot .stand{fill:var(--keyb)}
.mascot .time{font:600 24px Inter,"Segoe UI",Arial,sans-serif;fill:var(--white);text-anchor:middle}
.mascot .day{font:500 10px Inter,"Segoe UI",Arial,sans-serif;fill:var(--m-keyb);text-anchor:middle}
.mascot .ncard{fill:var(--white)}
.mascot .nt1{font:600 9px Inter,"Segoe UI",Arial,sans-serif;fill:var(--muted)}
.mascot .nt2{font:700 11px Inter,"Segoe UI",Arial,sans-serif;fill:var(--ink)}
.mascot .mug{fill:var(--white);stroke:var(--m-keyb);stroke-width:2}
.mascot .band{fill:var(--co)}
.mascot .fade{fill:var(--card)}
.mascot .padside{fill:var(--keys)}
.mascot .padtop{fill:url(#glass);stroke:var(--keyb);stroke-width:1.5}
.mascot .padshine{fill:var(--white);opacity:.35}
.mascot .trail{fill:none;stroke:var(--m-ice);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mascot .spinring{fill:none;stroke:var(--m-ice);stroke-width:2.5;stroke-dasharray:12 9}
.mascot .clk{font:800 20px Inter,"Segoe UI",Arial,sans-serif;fill:var(--co);text-anchor:middle}
.mascot .ice{fill:var(--m-ice2)}
.mascot__cap{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0 0;font-size:14px;color:var(--mut)}
.mascot__btn{font:inherit;font-size:14px;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.mascot__btn:focus-visible{outline:2px solid var(--co);outline-offset:2px}