/* Teacher board: the "think first" question, before Reveal, in a readable size and weight (it was up to 64px and bold,
   which left a long problem filling the slide and squeezed its picture). */
.stage-slide.is-asking:not(.is-summary) .ss-focus .think-prompt{font-size:clamp(20px,2.1vw,32px);font-weight:500;line-height:1.4;letter-spacing:0;max-width:64ch}
.stage-slide.is-asking:not(.is-summary) .ss-focus .think{gap:20px}

/* Many boards: keep the board tabs compact and scrollable so the writing tools stay on screen. */
.side-stack .teach-col .board-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;max-height:92px;overflow-y:auto;overscroll-behavior:contain}
.side-stack .teach-col .board-tab{min-width:0;width:100%;padding-left:0;padding-right:0;min-height:26px}
.side-stack .teach-col .board-tab[data-testid="wq-board-new"]{grid-column:1/-1;font-size:11px}
.side-stack{max-height:100%;min-height:0}

/* Line breaks written in a question ("\n") show as line breaks, so answer options can sit one below the other. */
.think-prompt,.qstem,.wb-stem{white-space:pre-line}

/* ---------------------------------------------------------------------------------------------------------------------------
   Step-by-step explanation board (a "think first" slide after Reveal).
   Students said it was hard to follow: the steps were small, the reasons (notes) were tiny grey text, one yellow bar ran the
   whole width, the picture was a small thumbnail in a corner, and everything sat in the top third of the slide.
   Now: the steps are big numbered cards, each with the action on top and its reason underneath in a readable size; the current
   step has a gold edge (only as wide as the card); the picture is larger and sits beside the steps; the block is centred.
   Sizes shrink in steps as a slide gets more steps (--k below), so a slide with six or seven steps still fits.
   --------------------------------------------------------------------------------------------------------------------------- */
.stage-slide.is-solving:has(.think-steps){--k:1}
.stage-slide.is-solving:has(.think-steps>li:nth-child(4)){--k:.9}
.stage-slide.is-solving:has(.think-steps>li:nth-child(5)){--k:.78}
.stage-slide.is-solving:has(.think-steps>li:nth-child(6)){--k:.68}
.stage-slide.is-solving:has(.think-steps>li:nth-child(7)){--k:.6}
.stage-slide.is-solving:has(.think-steps):not(.is-summary){
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(24px,3vw,56px);
  padding-left:clamp(24px,3.4vw,60px);padding-right:clamp(24px,3.4vw,60px);
}
.stage-slide.is-solving:has(.think-steps):not(.is-summary) .ss-focus{align-self:center;justify-content:center;height:auto;max-height:100%;padding:0;overflow:visible}
.stage-slide.is-solving:has(.think-steps):not(.is-summary) .ss-visual{align-self:center;height:auto;margin:0;justify-content:center;overflow:visible}
.stage-slide.is-solving:has(.think-steps) .think.is-open .think-prompt{font-size:calc(clamp(22px,2.1vw,36px) * var(--k,1));line-height:1.25;font-weight:700;max-width:none;margin:0 0 calc(clamp(8px,1vw,16px) * var(--k,1))}
.stage-slide.is-solving .think-steps{counter-reset:st;gap:calc(clamp(8px,1vw,16px) * var(--k,1));max-width:min(100%,920px)}
.stage-slide.is-solving .think-steps>li.st-row{
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(2px,.3vw,6px);position:relative;counter-increment:st;
  padding:calc(clamp(10px,1.05vw,18px) * var(--k,1)) clamp(14px,1.5vw,26px) calc(clamp(10px,1.05vw,18px) * var(--k,1)) clamp(58px,4.8vw,84px);
  border-radius:clamp(14px,1.3vw,20px);background:#fff;box-shadow:inset 0 0 0 2px #e6dcf3;color:#1c1027}
.stage-slide.is-solving .think-steps>li.st-row::before{
  display:grid;place-items:center;content:counter(st);position:absolute;left:clamp(12px,1.3vw,22px);top:calc(clamp(10px,1.05vw,18px) * var(--k,1));transform:none;
  width:clamp(30px,2.6vw,44px);height:clamp(30px,2.6vw,44px);border-radius:50%;background:#7b3ff2;color:#fff;box-shadow:none;
  font:800 clamp(16px,1.5vw,24px)/1 var(--font-body)}
.stage-slide.is-solving .think-steps>li.st-row .st-math{grid-column:auto;width:100%;font:700 calc(clamp(21px,2vw,33px) * var(--k,1))/1.25 var(--font-body);color:#1c1027}
.stage-slide.is-solving .think-steps>li.st-row .st-note{grid-column:auto;width:100%;padding:0;border:0;color:#3d2f50;font:500 calc(clamp(18px,1.6vw,27px) * var(--k,1))/1.4 var(--font-body)}
.stage-slide.is-solving .think-steps>li.st-row.is-now{background:#fff4d6;box-shadow:inset 0 0 0 3px #e0a63a,0 6px 18px rgba(224,166,58,.28)}
.stage-slide.is-solving .think-steps>li.st-row.is-now::before{background:#e0a63a}
.stage-slide.is-solving .think-steps>li.st-row.is-now .st-note{color:#4a3200}
/* a step that is just a line of text, or just a note (the takeaway) */
.stage-slide.is-solving .think-steps>li.st-row.st-text .st-math{font-weight:600;font-size:calc(clamp(19px,1.8vw,30px) * var(--k,1))}
.stage-slide.is-solving .think-steps>li.st-row.st-only-note{margin-top:clamp(4px,.7vw,12px);padding-left:clamp(58px,4.8vw,84px);border:0;border-radius:clamp(14px,1.3vw,20px);background:#fff4d4;box-shadow:inset 0 0 0 3px #f3d27e;animation:none}
.stage-slide.is-solving .think-steps>li.st-row.st-only-note::before{background:#ffe08a;font-size:clamp(17px,1.6vw,26px)}
.stage-slide.is-solving .think-steps>li.st-row.st-only-note .st-note{color:#3a0a5a;font:700 calc(clamp(19px,1.8vw,29px) * var(--k,1))/1.35 var(--font-body)}
/* the picture: as large as its column allows, beside the steps, nothing clipped */
.stage-slide.is-solving:has(.think-steps) .ss-visual .em-img,.stage-slide.is-solving:has(.think-steps) .ss-visual .fig{width:100%;height:auto;margin:0}
.stage-slide.is-solving:has(.think-steps) .ss-visual .em-svg{width:100%}
.stage-slide.is-solving:has(.think-steps) .ss-visual .em-svg svg{width:100%;height:auto;max-height:min(60vh,600px)}
.stage-slide.is-solving:has(.think-steps) .ss-visual .em-img img{width:100%;height:auto;max-height:min(60vh,600px);object-fit:contain}
.stage-slide.is-solving:has(.think-steps) .ss-visual>.ss-caption{font-size:clamp(15px,1.3vw,20px)}
/* no picture on the slide: the steps use the full width instead of half of it */
.stage-slide.is-solving.no-visual:has(.think-steps):not(.is-summary){grid-template-columns:minmax(0,1fr)}
.stage-slide.is-solving.no-visual:has(.think-steps) .think-steps{max-width:min(100%,1040px)}
/* a one-line step still has room for its number badge */
.stage-slide.is-solving .think-steps>li.st-row{min-height:calc(clamp(30px,2.6vw,44px) + 2 * clamp(10px,1.05vw,18px) * var(--k,1));justify-content:center}
/* "Watch out" (the common mistake) is readable too */
.stage-slide.is-solving:has(.think-steps) .mistake-label{font-size:clamp(13px,1.1vw,18px)}
.stage-slide.is-solving:has(.think-steps) .mistake .mistake-claim,.stage-slide.is-solving:has(.think-steps) .mistake .mistake-fix{font-size:calc(clamp(16px,1.45vw,24px) * var(--k,1))}


/* ---------------------------------------------------------------------------------------------------------------------------
   Step board v2: the math runs down the left side, one line under the other, so the class can follow it like working on paper.
   The reason for each step is a small speech bubble from a helper (an owl) beside it, in a smaller type than the math, so the
   words do not compete with the math. Rows are tight so six steps fit on one screen without scrolling.
   --------------------------------------------------------------------------------------------------------------------------- */
.stage-slide.is-solving:has(.think-steps){--k:1}
.stage-slide.is-solving:has(.think-steps>li:nth-child(4)){--k:.96}
.stage-slide.is-solving:has(.think-steps>li:nth-child(5)){--k:.92}
.stage-slide.is-solving:has(.think-steps>li:nth-child(6)){--k:.88}
.stage-slide.is-solving:has(.think-steps>li:nth-child(7)){--k:.8}
.stage-slide.is-solving .think-steps{gap:calc(clamp(5px,.6vw,10px) * var(--k,1));max-width:min(100%,1120px)}
.stage-slide.is-solving .think-steps>li.st-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(46px,4vw,64px);align-items:center;
  padding:calc(clamp(5px,.6vw,10px) * var(--k,1)) 8px calc(clamp(5px,.6vw,10px) * var(--k,1)) clamp(44px,3.6vw,60px);
  min-height:0;justify-content:normal;background:transparent;box-shadow:none;border-radius:14px}
.stage-slide.is-solving .think-steps>li.st-row::before{
  top:50%;transform:translateY(-50%);left:4px;width:clamp(26px,2.2vw,36px);height:clamp(26px,2.2vw,36px);font-size:clamp(14px,1.2vw,20px)}
.stage-slide.is-solving .think-steps>li.st-row .st-math{grid-column:1;width:auto;min-width:0;overflow-wrap:anywhere;font-size:calc(clamp(20px,1.9vw,32px) * var(--k,1));line-height:1.2}
.stage-slide.is-solving .think-steps>li.st-row .st-note{
  grid-column:2;width:auto;position:relative;background:#efe6ff;border-radius:16px;padding:calc(7px * var(--k,1)) 14px;
  color:#3a0a5a;font-size:calc(clamp(15px,1.35vw,21px) * var(--k,1));font-weight:500;line-height:1.35}
/* the little tail of the bubble, and the owl who is talking */
.stage-slide.is-solving .think-steps>li.st-row .st-note::before{content:"";position:absolute;left:-7px;top:50%;margin-top:-7px;width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:3px}
.stage-slide.is-solving .think-steps>li.st-row .st-note::after{content:"\1F989";position:absolute;left:-44px;top:50%;transform:translateY(-50%);font-size:clamp(20px,1.9vw,30px);line-height:1;opacity:.55}
.stage-slide.is-solving .think-steps>li.st-row.is-now{background:transparent;box-shadow:none}
.stage-slide.is-solving .think-steps>li.st-row.is-now .st-math{color:#1c1027}
.stage-slide.is-solving .think-steps>li.st-row.is-now .st-note{background:#ffefc2;box-shadow:inset 0 0 0 2px #e0a63a;color:#4a3200}
.stage-slide.is-solving .think-steps>li.st-row.is-now .st-note::after{opacity:1}
/* a slide with a picture: the picture takes half the board, so the bubble goes under its math instead of beside it */
.stage-slide.is-solving:not(.no-visual) .think-steps>li.st-row{grid-template-columns:minmax(0,1fr);row-gap:4px}
.stage-slide.is-solving:not(.no-visual) .think-steps>li.st-row .st-note{grid-column:1;margin-left:40px}
.stage-slide.is-solving:not(.no-visual) .think-steps>li.st-row .st-note::after{left:-38px;top:12px;transform:none}
.stage-slide.is-solving:not(.no-visual) .think-steps>li.st-row .st-note::before{top:20px;margin-top:0}
/* a step that is only a line of text, or only a note (the takeaway), keeps the full width */
.stage-slide.is-solving .think-steps>li.st-row.st-text .st-math{grid-column:1 / -1}
.stage-slide.is-solving .think-steps>li.st-row.st-only-note .st-note{grid-column:1 / -1;margin-left:0;background:#fff4d4}
.stage-slide.is-solving .think-steps>li.st-row.st-only-note .st-note::before,.stage-slide.is-solving .think-steps>li.st-row.st-only-note .st-note::after{display:none}

/* long plain-text steps (Notice / Plan) wrap inside their column so the owl never covers them */
.stage-slide.is-solving .think-steps>li.st-row .st-math{max-width:100%}

/* ---------------------------------------------------------------------------------------------------------------------------
   Step board, slides WITH a picture: the question and the next-step arrow must always be on screen.
   The steps start at the top (not centred, so nothing is cut off above), the text is a little smaller, the math and its bubble
   sit side by side again in a wider left column, and the picture gets a narrower column.
   --------------------------------------------------------------------------------------------------------------------------- */
.stage-slide.is-solving:has(.think-steps):not(.is-summary) .ss-focus{align-self:start;justify-content:flex-start;max-height:100%;overflow-y:auto}
.stage-slide.is-solving:has(.think-steps):not(.is-summary):not(.no-visual){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:clamp(16px,2vw,36px)}
.stage-slide.is-solving:has(.think-steps) .think.is-open .think-prompt{position:sticky;top:0;z-index:3;background:#fff;padding-bottom:4px}
.stage-slide.is-solving:has(.think-steps) .think .think-next,.stage-slide.is-solving:has(.think-steps) .think .think-btn{position:sticky;bottom:6px;z-index:3}
.stage-slide.is-solving:not(.no-visual) .think-steps>li.st-row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(40px,3.4vw,54px);row-gap:0}
.stage-slide.is-solving:not(.no-visual) .think-steps>li.st-row .st-math{font-size:calc(clamp(17px,1.55vw,26px) * var(--k,1))}
.stage-slide.is-solving:not(.no-visual) .think-steps>li.st-row .st-note{grid-column:2;margin-left:0;font-size:calc(clamp(13px,1.1vw,17px) * var(--k,1));padding:5px 11px}
.stage-slide.is-solving:not(.no-visual) .think-steps>li.st-row .st-note::after{left:-38px;top:50%;transform:translateY(-50%);font-size:clamp(18px,1.6vw,26px)}
.stage-slide.is-solving:not(.no-visual) .think-steps>li.st-row .st-note::before{top:50%;margin-top:-7px}
/* a plain-text step (Notice / Plan) is not an equation: smaller type */
.stage-slide.is-solving .think-steps>li.st-row .st-math:not(:has(.katex)){font-size:calc(clamp(17px,1.5vw,25px) * var(--k,1));font-weight:700;line-height:1.2}

/* Quest: the Tutorial ("Learn first") pop-up sits inside its mission card. A card lifts a little when hovered (a transform), and a transformed
   card becomes the frame for anything "fixed" inside it, so the pop-up was squeezed into the card and, covering the pointer, made the hover flicker on
   and off (it blinked). While the pop-up is open the card holds still, so the pop-up covers the whole screen. */
.qp-node:has([data-testid="primer"]){transform:none!important;transition:none!important;animation:none!important}

/* Quest: after you answer, say clearly whether it was taken and whether it is right. The result banner is big, green or red with a matching border,
   stays in view, and the question above it steps back; "Checking your answer…" shows while the answer is being sent. */
.qp-fb{border:3px solid transparent;box-shadow:0 12px 30px -14px rgba(31,8,51,.4);animation:qp-fb-pop .3s ease-out;position:sticky;top:12px;z-index:5}
.qp-fb.ok{border-color:#2e9d57;background:#e3f6ea}
.qp-fb.no{border-color:#d1593f;background:#fdeae5}
.qp-fb h3{font-size:34px;line-height:1.15}
.qp-fb.ok h3{color:#1c7a45}.qp-fb.no h3{color:#a8381f}
.qp-checking{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:#efe8fb;color:#3a0a5a;font-weight:700;font-size:18px}
@keyframes qp-fb-pop{from{transform:scale(.95);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.qp-fb{animation:none}}
/* After a right answer the quest moves on by itself: a thin bar under "Correct!" shows the short wait. */
.qp-fb.ok.is-auto{overflow:hidden;position:sticky}
.qp-fb.ok.is-auto::after{content:"";display:block;height:5px;margin:2px -14px -14px;background:#2e9d57;transform-origin:left;animation:qp-auto var(--qp-auto,1.8s) linear forwards}
@keyframes qp-auto{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ===================== Quest game page: question first, then the game =====================
   Two screens instead of a half-empty game panel beside the question.
   1. Answering: a slim score bar and the question, nicely sized, with the answer right under it. The scratch pad opens only when asked for.
   2. After the answer: the game gets the screen (the result banner above it, the shop or vaults or towers below), and a wrong answer
      shows the solution next to the question.
   "Answering" is whenever no result card is on the page. All of this only applies to game runs (.gm-run). */
.qp-run.gm-run.gm-run{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "who" "note" "prog" "left" "right";max-width:1120px;row-gap:14px}
.qp-run.gm-run.gm-run>.gm-left{grid-area:left;grid-column:1;position:relative;top:auto;gap:0}
.qp-run.gm-run.gm-run>.qp-split{grid-area:right;grid-column:1;display:flex;flex-direction:column;gap:16px;width:100%;max-width:880px;margin:0 auto;padding:22px 26px;border-radius:24px;background:#fff;border:1px solid #e6dcf5;box-shadow:0 18px 40px -26px rgba(31,8,51,.4)}
.qp-run.gm-run .gm-left .gm-hud{padding:10px 18px;border-radius:22px 22px 0 0;font-family:var(--font-display,Sora,Inter,system-ui,sans-serif);box-shadow:none;background:#1b1033;color:#fff}
.qp-run.gm-run .gm-left .gm-hud .gm-pts{font-size:1.7rem;color:#fff}
.qp-run.gm-run .gm-left .gm-chip{font-size:1.05rem;padding:4px 13px}
.qp-run.gm-run .gm-left .gm-stage .gm-world{border-radius:0 0 22px 22px;min-height:clamp(260px,38vh,420px)}

/* 1. answering: no game panel, just the score bar and the question */
.qp-run.gm-run:not(:has(.qp-fb)) .gm-left .gm-stage{display:none}
.qp-run.gm-run:not(:has(.qp-fb)) .gm-left .gm-hud{border-radius:22px}
/* the question column reads top to bottom: tag, number, question and picture, then the answer, then the scratch pad button */
.qp-run.gm-run .qp-split>.qp-q{display:contents}
.qp-run.gm-run .qp-split .gm-ask{order:1;align-self:flex-start;font:800 .95rem/1.2 var(--font-display,Sora,Inter,system-ui,sans-serif);padding:6px 14px;background:#ece3fb}
.qp-run.gm-run .qp-split .qp-qnum{order:2;margin:0}
.qp-run.gm-run .qp-split .qbody{order:3}
.qp-run.gm-run .qp-split>.qp-a{order:4;grid-area:auto}
.qp-run.gm-run .qp-split .qp-scratch-btn{order:5;display:inline-flex;align-self:flex-start}
.qp-run.gm-run .qp-split>.qp-side{order:6;grid-area:auto}
.qp-run.gm-run .qp-side:not(.open){display:none}
.qp-run.gm-run .qp-side.open{display:block}
.qp-run.gm-run .qp-side .scr svg{max-height:240px}
.qp-run.gm-run .qstem,.qp-run.gm-run .qp-q h3{font:600 clamp(1.15rem,1.5vw,1.5rem)/1.42 var(--font-display,Sora,Inter,system-ui,sans-serif);letter-spacing:0;color:#2a1640}
.qp-run.gm-run .qbody .em-img img,.qp-run.gm-run .qbody .qfig svg{max-height:190px}
.qp-run.gm-run .numpad-display input{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:700;padding:12px 16px}
.qp-run.gm-run .numpad-keys .key-go{font-size:1.2rem;font-weight:800;padding:0 28px}

/* 2. answered: the game gets the screen; a right answer shows only the game and Next, a wrong one keeps the question beside the solution */
.qp-run.gm-run:has(.qp-fb) .qp-split .qp-scratch-btn,.qp-run.gm-run:has(.qp-fb) .qp-split>.qp-side{display:none}
.qp-run.gm-run:has(.qp-fb.ok) .qp-split .gm-ask,.qp-run.gm-run:has(.qp-fb.ok) .qp-split .qp-qnum,.qp-run.gm-run:has(.qp-fb.ok) .qp-split .qbody{display:none}
.qp-run.gm-run:has(.qp-fb.ok) .qp-split{background:transparent;border:0;box-shadow:none;padding:0}
.qp-run.gm-run .qp-split>.qp-a{align-self:stretch}
.qp-run.gm-run:has(.qp-fb.no) .qp-split .gm-ask{display:none}
.qp-run.gm-run:has(.gm-result.no) .gm-left .gm-stage .gm-world{min-height:150px}

/* right or wrong: a big banner above the game */
.qp-run.gm-run .gm-result{position:static;width:100%;margin:0 0 12px;justify-content:center;text-align:center;padding:16px 24px;border-radius:22px;
 font:800 clamp(1.6rem,3.2vw,2.5rem)/1.1 var(--font-display,Sora,Inter,system-ui,sans-serif);letter-spacing:-.01em;box-shadow:0 18px 40px -16px rgba(0,0,0,.45);animation:gm-banner .45s cubic-bezier(.2,1.5,.4,1) both}
.qp-run.gm-run .gm-result.ok{background:linear-gradient(135deg,#2bd17e,#0f9a5b);color:#fff;border:4px solid #c3f8dc}
.qp-run.gm-run .gm-result.no{background:linear-gradient(135deg,#ff7466,#d9372c);color:#fff;border:4px solid #ffd3ce;animation:gm-banner .45s cubic-bezier(.2,1.5,.4,1) both,gm-shake .5s .3s}
.qp-run.gm-run .gm-result>span+span{font-size:.62em;font-weight:700;background:rgba(255,255,255,.22);padding:4px 14px;border-radius:999px}
@keyframes gm-banner{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes gm-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.qp-run.gm-run .gm-result,.qp-run.gm-run .gm-result.no{animation:none}}
/* the card with the solution and Next: no stray outline after a right answer; a big Next button */
.qp-run.gm-run .qp-fb.ok{border-color:transparent;box-shadow:none;position:static;animation:none}
.qp-run.gm-run .qp-fb.no{position:static;box-shadow:none}
.qp-run.gm-run .qp-fb .btn.primary.lg{width:100%;min-height:60px;font-size:1.25rem;font-weight:800}
/* ===================== Quest game skin: minimal =====================
   Almost no boxes. The question, the answer and the game sit straight on one quiet dark background; structure comes from space, type size and a
   single violet accent, not from frames. Dark base (never pure black), ONE accent for actions, muted green and rose only for right and wrong,
   gold only for points. The EnrichMIND logo is built into the top row as a white mark (no badge). Sora for headings, Inter for text.
   Only game runs (.gm-run) are affected. */
.student:has(.qp-run.gm-run){--gm-accent:#8b6cff;--gm-accent-2:#7656f0;--gm-gold:#f2c14e;--gm-ok:#34c79a;--gm-ok-text:#8ff0cc;--gm-bad:#f2697a;--gm-bad-text:#ffb4bf;--gm-text:#ece7fb;--gm-mute:#9a8fbd;--gm-line:rgba(255,255,255,.1)}
html:has(.qp-run.gm-run),body:has(.qp-run.gm-run){background:#0a0618}
.student:has(.qp-run.gm-run){min-height:100vh;position:relative;overflow-x:hidden;
 background:radial-gradient(900px 520px at 10% -10%,rgba(139,108,255,.26) 0,transparent 62%),radial-gradient(800px 480px at 100% 0,rgba(59,111,242,.18) 0,transparent 58%),linear-gradient(180deg,#140b2c,#0a0618)}
.student:has(.qp-run.gm-run)::before,.student:has(.qp-run.gm-run)::after{content:"";position:fixed;z-index:0;width:44vmax;height:44vmax;border-radius:50%;filter:blur(100px);opacity:.1;pointer-events:none;animation:gm-drift 34s ease-in-out infinite alternate}
.student:has(.qp-run.gm-run)::before{left:-12vmax;top:22vh;background:#8b6cff}
.student:has(.qp-run.gm-run)::after{right:-14vmax;bottom:-10vh;background:#5b8dff;animation-duration:42s;animation-delay:-11s}
@keyframes gm-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vmax,-4vmax,0) scale(1.15)}}
.join-shell:has(.qp-run.gm-run),main.quest:has(.qp-run.gm-run){position:relative;z-index:1}
main.quest:has(.qp-run.gm-run){padding:18px 18px 48px;max-width:1160px;gap:0}
main.quest:has(.qp-run.gm-run)>.join-logo{display:none}
.qp-run.gm-run.gm-run{background:transparent!important;border:0;box-shadow:none;padding:0;max-width:760px;margin:0 auto;font-family:Inter,system-ui,sans-serif;color:var(--gm-text);row-gap:18px}
.qp-run.gm-run button,.qp-run.gm-run input{font-family:inherit}
/* top row: the logo mark, then quiet text */
.qp-run.gm-run .qp-run-head{padding:0;color:var(--gm-mute)}
.qp-run.gm-run .qp-run-head .link{color:var(--gm-mute);background:none;border:0;padding:4px 0;font-weight:500;text-decoration:none}
.qp-run.gm-run .qp-run-head .link:hover{color:var(--gm-text)}
.qp-run.gm-run .qp-run-title{color:var(--gm-mute);font:500 .85rem/1.2 Inter,sans-serif}
.qp-run.gm-run .qp-run-title b{font-weight:600;color:var(--gm-text)}
.qp-run.gm-run .qp-depth{color:var(--gm-mute);background:none;border:0;padding:0;font-weight:500;font-size:.8rem}
.qp-run.gm-run .qp-runwho{color:var(--gm-mute);font-weight:400;font-size:.78rem;text-align:left;margin:0;opacity:.8}
.qp-run.gm-run .qp-runwho span{color:inherit}
.qp-run.gm-run .qp-practice{color:var(--gm-gold)}
/* progress: a hairline of five segments */
.qp-run.gm-run .qp-prog{gap:5px;margin:0}
.qp-run.gm-run .qp-prog span{height:3px;border-radius:3px;background:rgba(255,255,255,.14);box-shadow:none;transition:background-color .35s}
.qp-run.gm-run .qp-prog .done,.qp-run.gm-run .qp-prog .right{background:var(--gm-ok)}
.qp-run.gm-run .qp-prog .help{background:var(--gm-gold)}
.qp-run.gm-run .qp-prog .wrong{background:var(--gm-bad)}
.qp-run.gm-run .qp-prog .now{background:var(--gm-accent);box-shadow:none;animation:gm-now 2.4s ease-in-out infinite}
@keyframes gm-now{0%,100%{opacity:1}50%{opacity:.5}}
/* score row: no bar, no chips; the logo as a white mark, points in gold, cash in gold text, a quiet game picker */
.qp-run.gm-run .gm-left .gm-hud{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:0;box-shadow:none;padding:2px 0;gap:14px;color:var(--gm-text);font-family:Sora,Inter,sans-serif}
.qp-run.gm-run .gm-left .gm-hud::before{content:"";order:-1;flex:0 0 auto;width:172px;height:26px;background:#fff;opacity:.88;-webkit-mask:url(/live/assets/enrichmind-lockup-CeSEKyWA.webp) left center/contain no-repeat;mask:url(/live/assets/enrichmind-lockup-CeSEKyWA.webp) left center/contain no-repeat}
.qp-run.gm-run .gm-left .gm-hud .gm-pts{font-size:1.35rem;font-weight:600;color:var(--gm-gold);margin-left:auto;text-shadow:none;order:1}
.qp-run.gm-run .gm-left .gm-chip{background:none;color:var(--gm-mute);font-weight:500;border:0;padding:0;order:2}
.qp-run.gm-run .gm-left .gm-chip.wallet{background:none;color:var(--gm-gold);border:0}
.qp-run.gm-run .gm-left .gm-pick{background:none;color:var(--gm-text);border:1px solid var(--gm-line);box-shadow:none;border-radius:999px;font-weight:500;padding:5px 12px;order:3;transition:border-color .15s,background .15s}
.qp-run.gm-run .gm-left .gm-pick:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.qp-run.gm-run .gm-left .gm-mute{color:var(--gm-mute);order:4}
/* the question: straight on the background, no card */
.qp-run.gm-run.gm-run>.qp-split{background:none;color:var(--gm-text);border:0;border-radius:0;box-shadow:none;padding:6px 0 0;max-width:none;gap:20px;animation:gm-in .4s ease both}
@keyframes gm-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qp-run.gm-run .qstem,.qp-run.gm-run .qp-q h3{font:500 clamp(1.25rem,2.1vw,1.65rem)/1.5 Sora,Inter,sans-serif;letter-spacing:-.01em;color:var(--gm-text)}
.qp-run.gm-run .qp-split .gm-ask{font:600 .72rem/1.2 Sora,Inter,sans-serif;background:none;color:var(--gm-accent);padding:0;letter-spacing:.14em;text-transform:uppercase}
.qp-run.gm-run .qp-split .qp-qnum{color:var(--gm-mute);font-weight:400;font-size:.75rem;opacity:.7}
.qp-run.gm-run .qp-flame{color:var(--gm-gold);font-weight:500;font-size:.8rem}
.qp-run.gm-run:has(.qp-fb.ok) .qp-flame{display:none}
/* pictures: drawn for white paper, turned light for the dark background */
.qp-run.gm-run .qbody .em-img img,.qp-run.gm-run .qbody .qfig svg,.qp-run.gm-run .qbody .qfig img{filter:invert(1) hue-rotate(180deg);opacity:.92}
/* the answer: an underline and one pill button */
.qp-run.gm-run .numpad-display{border:0;border-bottom:2px solid rgba(255,255,255,.22);border-radius:0;background:transparent;transition:border-color .15s}
.qp-run.gm-run .numpad-display:focus-within{border-bottom-color:var(--gm-accent);box-shadow:none}
.qp-run.gm-run .numpad-display input{border:0;background:transparent;box-shadow:none;outline:none;font-weight:600;color:var(--gm-text);font-size:clamp(1.6rem,2.6vw,2.1rem)}
.qp-run.gm-run .numpad-display input::placeholder{color:var(--gm-mute);opacity:.6}
/* tap-to-answer choices: no white cards (their text was almost invisible on the dark page); a hairline outline and the page text color */
.qp-run.gm-run .choice{background:transparent;color:var(--gm-text);border:1px solid var(--gm-line);box-shadow:none;font-weight:500}
.qp-run.gm-run .choice:hover:not(:disabled){background:rgba(139,108,255,.12);border-color:var(--gm-accent)}
.qp-run.gm-run .choice:disabled{opacity:.55}
.qp-run.gm-run .choice .choice-key{background:rgba(139,108,255,.2);color:var(--gm-accent)}
.qp-run.gm-run .choice,.qp-run.gm-run .choice *{color:var(--gm-text)}
.qp-run.gm-run .choice .choice-key{color:var(--gm-accent)}
/* the typed answer starts at the same left edge as the question text above it */
.qp-run.gm-run .numpad{margin-left:0;margin-right:0;max-width:560px}
.qp-run.gm-run .numpad-display{padding-left:0;padding-right:0}
.qp-run.gm-run .numpad-display input{padding-left:0;padding-right:0;text-align:left}
.qp-run.gm-run .numpad-keys .key-go,.qp-run.gm-run .qp-fb .btn.primary.lg{background:var(--gm-accent-2);color:#fff;border:0;border-radius:999px;box-shadow:none;font:600 1rem/1 Sora,Inter,sans-serif;letter-spacing:.01em;text-transform:none;text-shadow:none;padding:0 30px;min-height:50px;transition:transform .12s,background .15s,opacity .15s}
.qp-run.gm-run .numpad-keys .key-go:hover:not(:disabled),.qp-run.gm-run .qp-fb .btn.primary.lg:hover:not(:disabled){background:#8566ff}
.qp-run.gm-run .numpad-keys .key-go:active:not(:disabled),.qp-run.gm-run .qp-fb .btn.primary.lg:active:not(:disabled){transform:scale(.97)}
.qp-run.gm-run .numpad-keys .key-go:disabled{background:rgba(255,255,255,.1);color:var(--gm-mute);box-shadow:none}
.qp-run.gm-run .qp-fb .btn.primary.lg{width:auto;min-width:220px;align-self:flex-start}
/* hints, scratch pad and report are plain text links */
.qp-run.gm-run .qp-help .btn,.qp-run.gm-run .qp-scratch-btn{background:none;color:var(--gm-mute);border:0;box-shadow:none;border-radius:0;font-weight:500;padding:4px 0;margin-right:14px;transition:color .15s}
.qp-run.gm-run .qp-help .btn:hover:not(:disabled),.qp-run.gm-run .qp-scratch-btn:hover{color:var(--gm-text)}
.qp-run.gm-run .qp-help .btn:disabled{opacity:.5}
.qp-run.gm-run .qp-report,.qp-run.gm-run .qp-split .qp-err{color:var(--gm-mute);font-weight:400;text-decoration:underline;text-underline-offset:3px;text-align:left;align-self:flex-start;padding:4px 0}
.qp-run.gm-run .qp-hint{background:none;border:0;border-left:2px solid var(--gm-accent);border-radius:0;color:var(--gm-text);padding:2px 0 2px 14px}
.qp-run.gm-run .qp-side.open .scr{background:#f7f4fd;border-radius:16px;padding:10px}
/* after the answer: one line of colored text, then the game on the background */
.qp-run.gm-run .gm-result{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;margin:0 0 4px;justify-content:flex-start;text-align:left;font:600 clamp(1.5rem,3vw,2.2rem)/1.15 Sora,Inter,sans-serif;letter-spacing:-.01em;animation:gm-banner .4s ease both}
.qp-run.gm-run .gm-result.ok{background:none;border:0;box-shadow:none;color:var(--gm-ok-text)}
.qp-run.gm-run .gm-result.no{background:none;border:0;box-shadow:none;color:var(--gm-bad-text);animation:gm-banner .4s ease both,gm-shake .4s .2s}
.qp-run.gm-run:has(.gm-result.no) .gm-left .gm-stage .gm-world,.qp-run.gm-run:has(.gm-result.ok) .gm-left .gm-stage .gm-world{min-height:0}
.qp-run.gm-run .gm-result>span+span{background:none;padding:0;color:var(--gm-gold);font-size:.7em;font-weight:500}
.qp-run.gm-run .gm-result.no>span+span{color:var(--gm-mute)}
@keyframes gm-banner{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes gm-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
/* the game scene: no frame, no glow; every game shares the one accent */
.qp-run.gm-run .gm-left .gm-stage,.qp-run.gm-run .gm-left .gm-stage[data-mode]{--ac:#8b6cff;background:none;box-shadow:none;padding:0;border:0}
.qp-run.gm-run .gm-left .gm-stage .gm-world{background:transparent!important;border:0;box-shadow:none;border-radius:0;padding:6px 0;min-height:0}
.qp-run.gm-run .gm-left .gm-how{background:none!important;color:var(--gm-mute)!important;padding:0 0 8px!important;font-size:.8rem;font-weight:400;border-radius:0!important}
.qp-run.gm-run .gm-left .gm-cta{background:var(--gm-accent-2);color:#fff;font-family:Sora,Inter,sans-serif;font-weight:600;box-shadow:none;border-radius:999px}
.qp-run.gm-run .gm-left .gm-up,.qp-run.gm-run .gm-left .gm-card,.qp-run.gm-run .gm-left .gm-pick-card{background:rgba(255,255,255,.04);border:1px solid var(--gm-line);box-shadow:none}
/* the result card: plain text, no box; the solution without its white card */
.qp-run.gm-run .qp-fb,.qp-run.gm-run .qp-fb.ok,.qp-run.gm-run .qp-fb.no{background:none;border:0;box-shadow:none;padding:0;animation:none;position:static;color:var(--gm-text)}
.qp-run.gm-run .qp-fb .qp-compare{background:none;padding:0;color:var(--gm-mute)}
.qp-run.gm-run .qp-fb .qp-yours b{color:var(--gm-bad-text)}
.qp-run.gm-run .qp-fb .qp-right b{color:var(--gm-ok-text)}
.qp-run.gm-run [data-testid="solution-card"]{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:8px 0!important;color:var(--gm-text)!important;font-size:clamp(1rem,1.5vw,1.15rem)!important}
.qp-run.gm-run [data-testid="solution-card"]>div:first-child{color:var(--gm-accent)!important;font:600 .72rem/1 Sora,Inter,sans-serif!important;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px!important}
.qp-run.gm-run [data-testid="solution-step"]>span:first-child{background:none!important;border:1.5px solid var(--gm-accent)!important;color:var(--gm-accent)!important;width:26px!important;height:26px!important;font-size:.8rem!important;font-weight:600!important}
.qp-run.gm-run [data-testid="solution-answer"]{background:none!important;border:0!important;border-left:3px solid var(--gm-gold)!important;border-radius:0!important;color:var(--gm-text)!important;padding:2px 0 2px 14px!important}
/* brand-colored confetti when you are right (made by the quest patch) */
.qp-confetti-box{position:fixed;left:0;top:0;width:100%;height:0;z-index:70;pointer-events:none;overflow:visible}
.qp-confetti{position:absolute;left:50%;top:34vh;width:8px;height:12px;border-radius:2px;opacity:0;animation:qp-conf 1.4s cubic-bezier(.15,.7,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes qp-conf{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}}
@media (prefers-reduced-motion:reduce){.student:has(.qp-run.gm-run)::before,.student:has(.qp-run.gm-run)::after,.qp-run.gm-run .qp-prog .now,.qp-run.gm-run.gm-run>.qp-split,.qp-run.gm-run .gm-result{animation:none}.qp-confetti{display:none}}
@media (max-width:699px){
 main.quest:has(.qp-run.gm-run){padding:12px 16px 36px}
 .qp-run.gm-run .gm-left .gm-hud::before{width:140px;height:22px}
 .qp-run.gm-run .gm-left .gm-hud{flex-wrap:wrap;row-gap:8px;gap:10px}
 /* phone: logo, points and the sound / light-dark buttons share the first line; shield, cash and the game picker take the next */
 .qp-run.gm-run .gm-left .gm-hud .gm-mute,.qp-run.gm-run .gm-left .gm-hud .gm-theme{order:1;flex:0 0 auto}
 .qp-run.gm-run .qp-fb .btn.primary.lg{width:100%;align-self:stretch}
}

/* ===== Dark / light switch (the sun and moon button in the score row; the choice is saved on the student's device; dark is the default) ===== */
.qp-run.gm-run .gm-left .gm-theme{background:none;border:0;box-shadow:none;cursor:pointer;font-size:1.3rem;line-height:1;padding:2px 4px;order:5;opacity:.85;transition:opacity .15s,transform .15s}
.qp-run.gm-run .gm-left .gm-theme:hover{opacity:1;transform:scale(1.12)}
html[data-gm-theme="light"]:has(.qp-run.gm-run),html[data-gm-theme="light"] body:has(.qp-run.gm-run){background:#f4f0fb}
html[data-gm-theme="light"] .student:has(.qp-run.gm-run){--gm-text:#231a3d;--gm-mute:#6e6490;--gm-line:rgba(35,26,61,.14);--gm-ok-text:#157a5a;--gm-bad-text:#c0394d;--gm-gold:#a8680f;--gm-accent:#6a46e0;--gm-accent-2:#6a46e0;
 background:radial-gradient(900px 520px at 10% -10%,rgba(139,108,255,.16) 0,transparent 62%),radial-gradient(800px 480px at 100% 0,rgba(59,111,242,.1) 0,transparent 58%),linear-gradient(180deg,#faf8ff,#f0eafa)}
html[data-gm-theme="light"] .student:has(.qp-run.gm-run)::before,html[data-gm-theme="light"] .student:has(.qp-run.gm-run)::after{opacity:.1}
html[data-gm-theme="light"] .qp-run.gm-run .gm-left .gm-hud::before{background:url(/live/assets/enrichmind-lockup-CeSEKyWA.webp) left center/contain no-repeat;-webkit-mask:none;mask:none;opacity:1}
html[data-gm-theme="light"] .qp-run.gm-run .qbody .em-img img,html[data-gm-theme="light"] .qp-run.gm-run .qbody .qfig svg,html[data-gm-theme="light"] .qp-run.gm-run .qbody .qfig img{filter:none;opacity:1}
html[data-gm-theme="light"] .qp-run.gm-run .qp-prog span{background:rgba(35,26,61,.12)}
html[data-gm-theme="light"] .qp-run.gm-run .qp-prog .done,html[data-gm-theme="light"] .qp-run.gm-run .qp-prog .right{background:var(--gm-ok)}
html[data-gm-theme="light"] .qp-run.gm-run .qp-prog .wrong{background:var(--gm-bad)}
html[data-gm-theme="light"] .qp-run.gm-run .qp-prog .help{background:#e0a63a}
html[data-gm-theme="light"] .qp-run.gm-run .qp-prog .now{background:var(--gm-accent)}
html[data-gm-theme="light"] .qp-run.gm-run .numpad-display{border-bottom-color:rgba(35,26,61,.28)}
html[data-gm-theme="light"] .qp-run.gm-run .numpad-display:focus-within{border-bottom-color:var(--gm-accent)}
html[data-gm-theme="light"] .qp-run.gm-run .numpad-keys .key-go:disabled{background:rgba(35,26,61,.08);color:var(--gm-mute)}
html[data-gm-theme="light"] .qp-run.gm-run .gm-left .gm-pick:hover{background:rgba(35,26,61,.05);border-color:rgba(35,26,61,.28)}
html[data-gm-theme="light"] .qp-run.gm-run .gm-left .gm-up,html[data-gm-theme="light"] .qp-run.gm-run .gm-left .gm-card,html[data-gm-theme="light"] .qp-run.gm-run .gm-left .gm-pick-card{background:rgba(35,26,61,.035);border-color:var(--gm-line)}
html[data-gm-theme="light"] .qp-run.gm-run .gm-left .gm-world,html[data-gm-theme="light"] .qp-run.gm-run .gm-left .gm-world *{color:var(--gm-text)}
html[data-gm-theme="light"] .qp-run.gm-run .qp-side.open .scr{background:#fff;box-shadow:0 0 0 1px var(--gm-line)}

/* ===== Quest run, wide screens and clearer controls =====
   1. The run uses the whole screen (it used to be a 760px column in the middle).
   2. The score bar sits in its own box, apart from the question.
   3. The question and answer are one card. The scratch pad opens in a second column beside it only when asked for.
   4. The answer is a visible box that is focused as soon as the question shows (see quest-answer-focus.js), with a small Submit beside it.
   5. Hints read like a teacher talking: a card, bigger type, a clear button.
   6. The dark / light switch is a labelled two-part switch, not a lone icon. */
main.quest:has(.qp-run.gm-run){max-width:none;padding:18px clamp(14px,3.2vw,56px) 56px}
.qp-run.gm-run.gm-run.gm-run{max-width:1680px;width:100%;row-gap:16px}

/* score bar in its own box */
.qp-run.gm-run.gm-run .gm-left .gm-hud{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:10px 20px;box-shadow:0 14px 34px -20px rgba(0,0,0,.7)}
html[data-gm-theme="light"] .qp-run.gm-run.gm-run .gm-left .gm-hud{background:#fff;border-color:rgba(35,26,61,.14);box-shadow:0 12px 30px -20px rgba(58,10,90,.35)}

/* question + answer card */
.qp-run.gm-run.gm-run.gm-run>.qp-split{display:flex;flex-direction:column;gap:clamp(16px,2.4vh,28px);position:relative;max-width:none;width:100%;margin:0;min-height:min(58vh,620px)}
.qp-run.gm-run.gm-run.gm-run>.qp-split:not(:has(.qp-fb.ok)){padding:clamp(22px,3.4vw,52px);border-radius:26px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 50px -32px rgba(0,0,0,.8)}
html[data-gm-theme="light"] .qp-run.gm-run.gm-run.gm-run>.qp-split:not(:has(.qp-fb.ok)){background:#fff;border-color:rgba(35,26,61,.12);box-shadow:0 22px 50px -32px rgba(58,10,90,.35)}
.qp-run.gm-run.gm-run .qp-split>.qp-q>*{align-self:flex-start;max-width:100%;flex:0 0 auto}
.qp-run.gm-run.gm-run .qp-split>.qp-a,.qp-run.gm-run.gm-run .qp-split>.qp-fb,.qp-run.gm-run.gm-run .qp-split>.qp-q>.qbody{align-self:stretch}
.qp-run.gm-run .qstem,.qp-run.gm-run .qp-q h3{font-size:clamp(1.4rem,2.3vw,2.3rem)}
.qp-run.gm-run .qbody .em-img img,.qp-run.gm-run .qbody .qfig svg{max-height:clamp(190px,30vh,340px)}
/* scratch pad: no space until it opens, then it takes the second column and stays in view while you work */
@media (min-width:1000px){
 .qp-run.gm-run.gm-run.gm-run>.qp-split:has(.qp-side.open){padding-right:calc(48% + clamp(24px,3vw,56px) + 8px);min-height:min(66vh,640px)}
 .qp-run.gm-run.gm-run .qp-split>.qp-side.open{position:absolute;top:clamp(22px,3.4vw,52px);bottom:clamp(22px,3.4vw,52px);right:clamp(22px,3.4vw,52px);width:48%;display:flex;flex-direction:column;margin:0}
 .qp-run.gm-run .qp-side.open .scr{flex:1;display:flex;flex-direction:column;min-height:0}
 .qp-run.gm-run .qp-side .scr svg{max-height:none}
}

/* the answer: a visible box that is typed in straight away */
.qp-run.gm-run .numpad{max-width:640px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 14px}
.qp-run.gm-run.gm-run .numpad-display{flex:1 1 260px;min-width:0;min-height:60px;padding:4px 18px;border:2px solid rgba(255,255,255,.28);border-radius:16px;background:rgba(255,255,255,.06);cursor:text;transition:border-color .15s,box-shadow .15s,background .15s}
.qp-run.gm-run.gm-run .numpad-display:focus-within{border-color:var(--gm-accent);background:rgba(139,108,255,.1);box-shadow:0 0 0 4px rgba(139,108,255,.22)}
.qp-run.gm-run.gm-run .numpad-display input{flex:1;width:100%;min-height:52px;padding:0;caret-color:var(--gm-accent);font-size:clamp(1.6rem,2.4vw,2.2rem);cursor:text}
.qp-run.gm-run .numpad-note{flex:1 0 100%;order:5;margin:0}
.qp-run.gm-run .numpad-keys{display:contents}
.qp-run.gm-run.gm-run .numpad-keys .key-go{height:46px;min-height:46px;width:auto;min-width:0;padding:0 24px;font-size:1rem;border-radius:999px;align-self:center;flex:0 0 auto}
@media (hover:none),(pointer:coarse){
 .qp-run.gm-run .numpad-keys{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 0 100%}
 .qp-run.gm-run.gm-run .numpad-keys .key:not(.key-go){grid-area:auto;width:auto;min-width:64px;height:44px;padding:0 16px;background:rgba(255,255,255,.08);color:var(--gm-text);border:1px solid var(--gm-line)}
 .qp-run.gm-run.gm-run .numpad-keys .key-go{grid-area:auto;margin-left:auto}
}
html[data-gm-theme="light"] .qp-run.gm-run.gm-run .numpad-display{background:#fff;border-color:rgba(35,26,61,.28)}
html[data-gm-theme="light"] .qp-run.gm-run.gm-run .numpad-display:focus-within{background:#fff;border-color:var(--gm-accent);box-shadow:0 0 0 4px rgba(106,70,224,.18)}

/* hints: a card in plain, larger type, and a clear button */
.qp-run.gm-run .qp-help{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.qp-run.gm-run.gm-run .qp-hint{align-self:stretch;max-width:640px;margin:0;padding:14px 18px;border:1px solid rgba(139,108,255,.35);border-left:4px solid var(--gm-accent);border-radius:14px;background:rgba(139,108,255,.1);font-size:1.08rem;line-height:1.6}
.qp-run.gm-run .qp-hint b{display:block;margin-bottom:4px;color:var(--gm-accent);font:700 .72rem/1.2 Sora,Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase}
html[data-gm-theme="light"] .qp-run.gm-run.gm-run .qp-hint{background:rgba(106,70,224,.07);border-color:rgba(106,70,224,.3);border-left-color:var(--gm-accent)}
.qp-run.gm-run .qp-helpbtns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qp-run.gm-run.gm-run .qp-helpbtns .btn[data-testid="hint-btn"]{padding:9px 18px;margin:0;border:1.5px solid var(--gm-accent);border-radius:999px;color:var(--gm-text);font-weight:600;font-size:.95rem}
.qp-run.gm-run.gm-run .qp-helpbtns .btn[data-testid="hint-btn"]:hover:not(:disabled){background:rgba(139,108,255,.14);color:var(--gm-text)}
.qp-run.gm-run.gm-run .qp-helpbtns .btn[data-testid="hint-btn"]:disabled{border-color:var(--gm-line)}

/* dark / light: a labelled switch with the current side lit */
.qp-run.gm-run.gm-run .gm-left .gm-theme{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1.5px solid var(--gm-accent);border-radius:999px;background:rgba(255,255,255,.06);font:700 .82rem/1 Sora,Inter,sans-serif;white-space:nowrap;opacity:1;transform:none;order:5}
.qp-run.gm-run.gm-run .gm-left .gm-theme:hover{transform:none;background:rgba(139,108,255,.16)}
.qp-run.gm-run .gm-theme-opt{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;color:var(--gm-mute);transition:background .15s,color .15s}
.qp-run.gm-run .gm-theme-opt.on{background:var(--gm-accent-2);color:#fff;box-shadow:0 2px 8px -2px rgba(0,0,0,.45)}
html[data-gm-theme="light"] .qp-run.gm-run.gm-run .gm-left .gm-theme{background:#fff}
@media (max-width:699px){.qp-run.gm-run .gm-theme-txt{display:none}.qp-run.gm-run .gm-theme-opt{padding:7px 10px}}
html[data-gm-theme="light"] .qp-run.gm-run.gm-run .numpad-keys .key:not(.key-go){background:#fff;color:var(--gm-text)}