/* Shared design tokens — Yanly "sunny" palette (cream, navy, yellow), the same as the student app. Owner: Lead. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");
:root{
  --bg:#FFFCF6; --surface:#FFFFFF; --surface-2:#FFFDF8; --ink:#1D2340; --muted:#5C6079; --line:#EFE8D8;
  --accent:#1D2340; --accent-ink:#FFFFFF; --accent-soft:#ECEEF5;
  --navy:#1D2340; --navy-ink:#FFFFFF;
  --teal:#3A5A9E; --teal-soft:#EDF1F8;
  --ok:#15803D; --ok-soft:#E0F5E7; --bad:#C62828; --bad-soft:#FDE7E5; --gold:#B07A00; --gold-soft:#FFF1C9;
  --yellow:#FFC83D; --yellow-soft:#FFEFC2;
  --display:"Nunito","Segoe UI Rounded","Segoe UI",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:14px; --r-lg:20px;
  --shadow:0 1px 2px rgba(29,35,64,.05),0 4px 16px rgba(29,35,64,.05);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#151827; --surface:#1F2336; --surface-2:#1A1E30; --ink:#F6F1E4; --muted:#A8ADC6; --line:#30364F;
  --accent:#FFD45C; --accent-ink:#1D2340; --accent-soft:#3A3420;
  --navy:#11141F; --navy-ink:#F6F1E4;
  --teal:#93B1FF; --teal-soft:#26305A;
  --ok:#5BD98A; --ok-soft:#163525; --bad:#FF8A80; --bad-soft:#3F2023; --gold:#FFC94D; --gold-soft:#3A3115;
  --yellow:#FFD45C; --yellow-soft:#3A3420;
  --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#151827; --surface:#1F2336; --surface-2:#1A1E30; --ink:#F6F1E4; --muted:#A8ADC6; --line:#30364F;
  --accent:#FFD45C; --accent-ink:#1D2340; --accent-soft:#3A3420;
  --navy:#11141F; --navy-ink:#F6F1E4;
  --teal:#93B1FF; --teal-soft:#26305A;
  --ok:#5BD98A; --ok-soft:#163525; --bad:#FF8A80; --bad-soft:#3F2023; --gold:#FFC94D; --gold-soft:#3A3115;
  --yellow:#FFD45C; --yellow-soft:#3A3420;
  --shadow:none; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.45}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.tr{color:var(--muted);font-size:.86em}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- loading: the pig runs along a dashed line (both apps; markup from shared/mascot.js pigRunHtml) ---------- */
.pigrun{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 0;color:var(--muted);font-weight:700;font-size:.92rem}
.pigrun .pr-track{position:relative;width:200px;height:66px;overflow:hidden}
.pigrun .pr-runner{position:absolute;left:0;bottom:6px;animation:pr-go 2.6s linear infinite}
.pigrun .pr-runner svg{display:block;animation:pr-hop .32s ease-in-out infinite alternate}
.pigrun .pig-f1{animation:pr-leg .16s ease-in-out infinite alternate}
.pigrun .pig-f2{animation:pr-leg .16s ease-in-out infinite alternate-reverse}
.pigrun .pr-ground{position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 12px,transparent 12px 20px);background-size:20px 2px;animation:pr-ground .4s linear infinite}
@keyframes pr-go{0%{transform:translateX(-62px)}100%{transform:translateX(206px)}}
@keyframes pr-hop{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-7px) rotate(3deg)}}
@keyframes pr-leg{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
@keyframes pr-ground{from{background-position:0 0}to{background-position:-20px 0}}