:root{
    --paper:#FBFAF7; --ink:#0F1428; --mid:#444B66;
    --violet:#6E54F0; --mint:#13C3A4; --mint-deep:#0E9E86;
    --gold:#E89A2E; --rose:#F8466E; --line:rgba(15,20,40,.10);
  }
  body{background:var(--bg);margin:0;font-family:'Manrope',system-ui,sans-serif;color:var(--ink);}

  .tr-wrap{max-width:720px;margin:0 auto;padding:18px 16px 40px;}

  /* ---- top status strip ---- */
  .tr-hud{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .tr-dots{display:flex;gap:6px;flex:1;}
  .tr-dot{height:6px;flex:1;border-radius:99px;background:rgba(15,20,40,.10);transition:background .3s;}
  .tr-dot.done{background:var(--mint-deep);}
  .tr-dot.now{background:var(--violet);}
  .tr-streak{font-weight:800;font-size:14px;color:var(--gold);white-space:nowrap;
    opacity:0;transform:scale(.8);transition:all .25s;}
  .tr-streak.on{opacity:1;transform:scale(1);}

  /* ---- card ---- */
  .tr-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;
    padding:22px 20px 24px;box-shadow:0 14px 40px rgba(15,20,40,.07);}
  .tr-kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--violet);margin-bottom:8px;}
  .tr-q{font-size:20px;font-weight:800;line-height:1.3;margin:0 0 4px;}
  .tr-sub{font-size:14.5px;color:var(--mid);line-height:1.5;margin:0;}

  /* ---- bus stop ---- */
  /* stack the board vertically: an NVR stem must sit ABOVE its options,
     not beside them */
  .bs{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:26px 0 10px;}
  .bs > .st-list,.bs > .opt-grid{width:100%;}
  .bs-inner{display:flex;align-items:flex-end;}
  .bs-divisor{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(38px,11vw,58px);
    line-height:1;padding-right:8px;}
  .bs-box{position:relative;padding-left:12px;padding-top:10px;}
  .bs-box::before{content:'';position:absolute;left:0;top:0;bottom:6px;width:4px;background:var(--ink);border-radius:4px;}
  .bs-box::after{content:'';position:absolute;left:0;top:0;height:4px;right:0;background:var(--ink);border-radius:4px;}
  .bs-line{display:flex;font-family:'Caveat',cursive;font-weight:700;
    font-size:clamp(38px,11vw,58px);line-height:1.08;}
  .bs-ans{margin-bottom:2px;padding-left:12px;color:var(--mint-deep);}
  .cell{width:clamp(40px,11vw,58px);text-align:center;position:relative;}
  .cell.slot{color:rgba(15,20,40,.16);}
  .cell.slot.active{color:var(--violet);}
  .cell.slot.active::after{content:'';position:absolute;left:14%;right:14%;bottom:2px;height:4px;
    border-radius:3px;background:var(--violet);animation:blink 1.05s ease-in-out infinite;}
  @keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
  .cell.good{color:var(--mint-deep);}
  .cell.bad{color:var(--rose);animation:shake .34s;}
  @keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
  .carry{position:absolute;left:-6px;top:-14px;font-size:clamp(17px,4.6vw,23px);
    color:var(--rose);font-family:'Caveat',cursive;font-weight:700;
    opacity:0;transform:translateY(5px);transition:all .3s;}
  .carry.on{opacity:1;transform:translateY(0);}

  /* ---- prompt ---- */
  .tr-prompt{text-align:center;font-size:16.5px;font-weight:700;color:var(--violet);
    min-height:46px;display:flex;align-items:center;justify-content:center;
    padding:0 6px;line-height:1.4;}
  .tr-prompt.good{color:var(--mint-deep);}
  .tr-prompt.bad{color:var(--rose);}

  /* ---- number pad ---- */
  .pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px;}
  .key{appearance:none;border:1px solid var(--line);background:var(--panel);
    border-radius:14px;padding:15px 0;font-family:'Manrope',sans-serif;
    font-size:22px;font-weight:800;color:var(--ink);cursor:pointer;
    transition:transform .08s, background .15s, border-color .15s;
    -webkit-tap-highlight-color:transparent;}
  .key:active{transform:scale(.94);background:rgba(110,84,240,.08);border-color:var(--violet);}
  .key[disabled]{opacity:.35;cursor:default;}

  .tr-actions{display:flex;gap:10px;margin-top:16px;}
  .btn{flex:1;appearance:none;border:0;border-radius:14px;padding:15px 18px;
    font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:transform .08s;}
  .btn:active{transform:scale(.98);}
  .btn-primary{background:linear-gradient(135deg,var(--mint),var(--mint-deep));color:#04231B;
    box-shadow:0 10px 26px rgba(14,158,134,.30);}
  .btn-ghost{background:var(--panel);border:1px solid var(--line);color:var(--ink);}

  /* ---- teach step ---- */
  .teach{margin:18px 0 4px;padding:14px 16px;border-radius:14px;background:rgba(110,84,240,.06);
    border-left:4px solid var(--violet);font-size:15px;line-height:1.55;font-weight:600;}
  .teach b{color:var(--violet);}

  /* ---- result ---- */
  .res{text-align:center;padding:8px 0 4px;}
  .res .big{font-size:52px;font-weight:800;letter-spacing:-.02em;}
  .res .lbl{font-size:15px;color:var(--mid);font-weight:700;margin-top:2px;}
  .res .xp{display:inline-block;margin-top:14px;padding:8px 16px;border-radius:99px;
    background:rgba(232,154,46,.12);color:var(--gold);font-weight:800;font-size:14px;}
  .res .note{font-size:14.5px;color:var(--mid);margin-top:14px;line-height:1.55;}

  .hide{display:none !important;}
  @media(max-width:400px){ .pad{gap:6px} .key{padding:13px 0;font-size:20px} }

  /* ---- steps mode ---- */
  .st-list{display:grid;gap:10px;margin:22px 0 6px;}
  .st-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:13px 16px;border-radius:13px;border:1px solid var(--line);background:var(--panel);
    opacity:.45;transition:all .25s;}
  .st-row.now{opacity:1;border-color:var(--violet);box-shadow:0 0 0 3px rgba(110,84,240,.10);}
  .st-row.done{opacity:1;}
  .st-label{font-size:15px;font-weight:700;line-height:1.35;}
  .st-val{font-family:'Caveat',cursive;font-size:34px;font-weight:700;color:var(--mint-deep);
    min-width:56px;text-align:right;}
  .st-row.now .st-val{color:var(--violet);}

  /* ---- choice / multi ---- */
  .opt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0 6px;}
  .opt{appearance:none;border:1px solid var(--line);background:var(--panel);border-radius:14px;
    padding:18px 12px;font-family:'Manrope',sans-serif;font-size:19px;font-weight:800;
    color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:transform .08s,border-color .15s,background .15s;}
  .opt:active{transform:scale(.97);}
  .opt.good{border-color:var(--mint-deep);background:rgba(19,195,164,.12);color:var(--mint-deep);}
  .opt.bad{border-color:var(--rose);background:rgba(248,70,110,.10);color:var(--rose);}

  /* ---- multi-digit pad ---- */
  .pad-readout{grid-column:1/-1;text-align:center;font-family:'Caveat',cursive;font-size:40px;
    font-weight:700;color:var(--violet);min-height:50px;border-bottom:3px solid rgba(110,84,240,.25);
    margin-bottom:10px;}
  .pad-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
  .pad{display:block;}
  .key-fn{background:rgba(15,20,40,.04);}
  .key-go{background:linear-gradient(135deg,var(--mint),var(--mint-deep));color:#04231B;
    grid-column:span 2;font-size:16px;}
  @media(max-width:400px){ .pad-grid{gap:6px} .opt{padding:15px 10px;font-size:17px} }

/* ---- non-verbal reasoning figures ---- */
.nvr-stem{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:18px 0 6px;padding:14px 10px;border-radius:14px;background:var(--panel);
  border:1px solid var(--line);}
.nvr-stem svg{width:clamp(56px,17vw,86px);height:auto;}
.nvr-stem .arrow{font-size:26px;color:var(--mid);font-weight:800;}
.nvr-stem .qmark{font-family:'Caveat',cursive;font-size:52px;color:var(--violet);font-weight:700;
  width:clamp(56px,17vw,86px);text-align:center;}
.opt-grid-svg{grid-template-columns:repeat(4,1fr);gap:8px;}
.opt-grid-svg .opt{padding:10px 4px;display:flex;align-items:center;justify-content:center;}
.opt-grid-svg .opt svg{width:100%;height:auto;max-width:74px;}
@media(max-width:420px){ .opt-grid-svg{grid-template-columns:repeat(2,1fr);} }

.nvr-stem{width:100%;}
.bs .nvr-stem + .opt-grid{margin-top:12px;}

/* The page's real <h1>. The question heading below it is filled by JavaScript
   with the current question ("348 ÷ 4"), which is useless as a page heading and
   was previously the only h1 on all 54 trainer pages. */
.tr-topic{
  font-size:15px;font-weight:800;letter-spacing:.01em;
  color:var(--mid);margin:0 0 14px;text-align:center;
}