/* Class screens ("boards"): what pupils see when the teacher shares her screen.
   Always 16:9 and sized in container units (--u = 1% of the board width), so the preview and full-screen
   presenting look identical. On narrow screens the board grows in height instead of shrinking the text. */
.board{--u:1cqw;--fs:1;position:relative;container-type:inline-size;container-name:board;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:calc(2.2 * var(--u));background:var(--bg);color:var(--fg);font-family:var(--f-kid);
  box-shadow:calc(.9 * var(--u)) calc(.9 * var(--u)) calc(1.8 * var(--u)) var(--sd),calc(-.9 * var(--u)) calc(-.9 * var(--u)) calc(1.8 * var(--u)) var(--sl);
  font-size:calc(2.05 * var(--u) * var(--fs));line-height:1.35}
.board *{box-sizing:border-box}
:where(.board button){border:0;font:inherit;color:inherit;background:var(--bg);text-align:inherit}
.b-pad{position:absolute;inset:0;padding:calc(2.6 * var(--u)) calc(3.4 * var(--u)) calc(2.4 * var(--u));display:flex;flex-direction:column;gap:calc(1.5 * var(--u));min-height:0}
.b-head{display:flex;align-items:center;justify-content:space-between;gap:calc(2 * var(--u));flex:none;min-height:calc(3.4 * var(--u))}
.b-kick{display:inline-flex;align-items:center;gap:calc(.8 * var(--u));font-family:var(--f-display);font-weight:800;font-size:calc(1.3 * var(--u));letter-spacing:.13em;text-transform:uppercase;
  color:var(--c);padding:calc(.75 * var(--u)) calc(1.5 * var(--u));border-radius:99em;
  box-shadow:inset calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.6 * var(--u)) var(--sd),inset calc(-.3 * var(--u)) calc(-.3 * var(--u)) calc(.6 * var(--u)) var(--sl)}
.b-kick .i{width:calc(1.9 * var(--u));height:calc(1.9 * var(--u));stroke-width:2.2}
.b-say{display:inline-flex;align-items:center;gap:calc(.8 * var(--u));font-family:var(--f-display);font-weight:700;font-size:calc(1.35 * var(--u));line-height:1.2;color:#fff;
  background:var(--c);padding:calc(.75 * var(--u)) calc(1.5 * var(--u));border-radius:99em;max-width:60%;
  box-shadow:calc(.35 * var(--u)) calc(.35 * var(--u)) calc(.8 * var(--u)) rgb(110 120 150 / .45),calc(-.3 * var(--u)) calc(-.3 * var(--u)) calc(.7 * var(--u)) var(--sl2)}
.b-say .i{width:calc(1.9 * var(--u));height:calc(1.9 * var(--u))}
.b-title{margin:0;font-family:var(--f-display);font-weight:800;font-size:calc(3.5 * var(--u) * var(--fs));line-height:1.08;letter-spacing:-.025em;text-wrap:balance;flex:none}
.b-sub{margin:calc(-.6 * var(--u)) 0 0;font-size:calc(1.8 * var(--u) * var(--fs));color:var(--muted);flex:none}
.b-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(1.4 * var(--u))}
.b-foot{display:flex;align-items:center;justify-content:space-between;gap:calc(1.4 * var(--u));flex:none;font-size:calc(1.35 * var(--u));color:var(--muted);font-family:var(--f-display);font-weight:600}
.b-row{display:flex;align-items:center;gap:calc(1.2 * var(--u));flex-wrap:wrap}
.b-grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:calc(1.6 * var(--u));min-height:0}
.t{position:relative;border-radius:calc(1.8 * var(--u));padding:calc(1.5 * var(--u)) calc(1.9 * var(--u));background:var(--bg);min-width:0;
  box-shadow:calc(.65 * var(--u)) calc(.65 * var(--u)) calc(1.3 * var(--u)) var(--sd),calc(-.65 * var(--u)) calc(-.65 * var(--u)) calc(1.3 * var(--u)) var(--sl)}
.t{font-size:calc(2.05 * var(--u) * var(--fs))}
.t.in{box-shadow:inset calc(.5 * var(--u)) calc(.5 * var(--u)) calc(1 * var(--u)) var(--sd),inset calc(-.5 * var(--u)) calc(-.5 * var(--u)) calc(1 * var(--u)) var(--sl)}
.t h4{margin:0 0 calc(.7 * var(--u));font-family:var(--f-display);font-weight:800;font-size:calc(1.45 * var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--c);display:flex;align-items:center;gap:calc(.7 * var(--u))}
.t h4 .i{width:calc(2 * var(--u));height:calc(2 * var(--u))}
.b-list{list-style:none;margin:0;padding:0;display:grid;gap:calc(.9 * var(--u))}
.b-list li{position:relative;padding-left:calc(2.6 * var(--u))}
.b-list li::before{content:"";position:absolute;left:0;top:calc(.62em - .55 * var(--u));width:calc(1.1 * var(--u));height:calc(1.1 * var(--u));border-radius:50%;background:var(--c);opacity:.85}
.b-num{counter-reset:n;list-style:none;margin:0;padding:0;display:grid;gap:calc(1 * var(--u))}
.b-num > li{counter-increment:n;display:grid;grid-template-columns:calc(3.4 * var(--u)) minmax(0,1fr);gap:calc(1.2 * var(--u));align-items:start}
.b-num > li::before{content:counter(n);width:calc(3.4 * var(--u));height:calc(3.4 * var(--u));border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:calc(1.6 * var(--u));color:var(--c);
  box-shadow:inset calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.6 * var(--u)) var(--sd),inset calc(-.3 * var(--u)) calc(-.3 * var(--u)) calc(.6 * var(--u)) var(--sl)}
.b-num > li > span{padding-top:calc(.35 * var(--u))}
.b-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(.8 * var(--u));border:0;background:var(--bg);color:var(--fg);cursor:pointer;
  font-family:var(--f-display);font-weight:800;font-size:calc(1.5 * var(--u));min-height:calc(4.4 * var(--u));padding:0 calc(1.9 * var(--u));border-radius:99em;
  box-shadow:calc(.45 * var(--u)) calc(.45 * var(--u)) calc(.9 * var(--u)) var(--sd),calc(-.45 * var(--u)) calc(-.45 * var(--u)) calc(.9 * var(--u)) var(--sl);transition:transform .25s var(--ease),box-shadow .25s,color .25s}
.b-btn .i{width:calc(2 * var(--u));height:calc(2 * var(--u))}
.b-btn:hover{transform:translateY(-1px);color:var(--c)}
.b-btn:active,.b-btn[aria-pressed="true"]{transform:none;box-shadow:inset calc(.35 * var(--u)) calc(.35 * var(--u)) calc(.7 * var(--u)) var(--sd),inset calc(-.35 * var(--u)) calc(-.35 * var(--u)) calc(.7 * var(--u)) var(--sl);color:var(--c)}
.b-btn.go{background:var(--c);color:#fff;box-shadow:calc(.45 * var(--u)) calc(.45 * var(--u)) calc(1 * var(--u)) rgb(110 120 150 / .5),calc(-.45 * var(--u)) calc(-.45 * var(--u)) calc(.9 * var(--u)) var(--sl2)}
.b-btn.go:hover{color:#fff;filter:brightness(1.06)}
.b-btn.round{width:calc(4.4 * var(--u));padding:0}
.b-btn[disabled]{opacity:.4;cursor:default;transform:none}
.b-hidden{visibility:hidden}
.b-fade{opacity:0;transform:translateY(calc(.8 * var(--u)));transition:opacity .45s var(--ease),transform .45s var(--ease)}
.b-fade.on{opacity:1;transform:none}
.b-mark{font-weight:700;color:var(--c)}
.b-ans{color:#2E8B57;font-weight:700}
.b-big{font-family:var(--f-display);font-weight:800;font-size:calc(2.8 * var(--u) * var(--fs));line-height:1.2;text-wrap:balance;margin:0}
.b-scroll{overflow:auto;scrollbar-width:thin;min-height:0}
.b-center{display:grid;place-items:center;text-align:center}

/* ---------- maths: which one doesn't belong + open middle ---------- */
.wodb{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(1.8 * var(--u))}
.wi{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;cursor:pointer;padding:calc(1 * var(--u)) calc(1.4 * var(--u));text-align:center;transition:box-shadow .3s,transform .3s var(--ease)}
.wi:hover{transform:translateY(-1px)}
.wi svg.vis{width:100%;height:100%;max-height:calc(11.5 * var(--u));overflow:visible}
.wi .lab{font-family:var(--f-display);font-weight:800;font-size:calc(2.5 * var(--u));line-height:1.1}
.wi .tag{position:absolute;top:calc(1 * var(--u));left:calc(1.2 * var(--u));width:calc(3 * var(--u));height:calc(3 * var(--u));border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:calc(1.5 * var(--u));color:var(--c);
  box-shadow:inset calc(.25 * var(--u)) calc(.25 * var(--u)) calc(.5 * var(--u)) var(--sd),inset calc(-.25 * var(--u)) calc(-.25 * var(--u)) calc(.5 * var(--u)) var(--sl)}
.wi .why{position:absolute;inset:calc(.6 * var(--u));border-radius:calc(1.4 * var(--u));display:grid;place-items:center;padding:calc(1.2 * var(--u)) calc(1.8 * var(--u));text-align:center;
  background:rgb(224 229 236 / .95);font-family:var(--f-kid);font-weight:700;font-size:calc(1.8 * var(--u) * var(--fs));color:var(--fg);opacity:0;transform:scale(.96);transition:opacity .35s,transform .35s var(--ease);pointer-events:none}
.wi.show .why{opacity:1;transform:none}
.wi.show{box-shadow:inset calc(.5 * var(--u)) calc(.5 * var(--u)) calc(1 * var(--u)) var(--sd),inset calc(-.5 * var(--u)) calc(-.5 * var(--u)) calc(1 * var(--u)) var(--sl)}
.om{flex:1;min-height:0;display:grid;grid-template-rows:auto auto auto;align-content:center;gap:calc(2 * var(--u));justify-items:center}
.om-expr{display:flex;align-items:center;gap:calc(1 * var(--u));flex-wrap:wrap;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:calc(4 * var(--u))}
.om-num{display:inline-flex;gap:calc(.5 * var(--u))}
.om-box{width:calc(7 * var(--u));height:calc(8 * var(--u));border-radius:calc(1.5 * var(--u));border:0;background:var(--bg);display:grid;place-items:center;cursor:pointer;
  font-family:var(--f-display);font-weight:800;font-size:calc(4.4 * var(--u));color:var(--fg);
  box-shadow:inset calc(.55 * var(--u)) calc(.55 * var(--u)) calc(1.1 * var(--u)) var(--sd2),inset calc(-.55 * var(--u)) calc(-.55 * var(--u)) calc(1.1 * var(--u)) var(--sl2);transition:box-shadow .25s,outline-color .25s}
.om-box.sel{outline:calc(.35 * var(--u)) solid var(--c);outline-offset:calc(.3 * var(--u))}
.om-box.fixed{cursor:default;box-shadow:none;width:auto;padding:0 calc(.6 * var(--u))}
.om-op{padding:0 calc(.4 * var(--u));color:var(--muted)}
.om-frac{display:inline-grid;justify-items:center;gap:calc(.5 * var(--u))}
.om-frac hr{width:100%;min-width:calc(7 * var(--u));border:0;height:calc(.45 * var(--u));border-radius:9em;background:var(--fg);margin:0}
.om-tray{display:flex;gap:calc(1 * var(--u));flex-wrap:wrap;justify-content:center}
.om-tray .b-btn{width:calc(5 * var(--u));min-height:calc(5 * var(--u));padding:0;font-size:calc(2.4 * var(--u));border-radius:calc(1.3 * var(--u))}
.om-tray .b-btn.used{opacity:.35}
.om-stat{display:flex;align-items:center;gap:calc(1.6 * var(--u));flex-wrap:wrap;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:calc(1.9 * var(--u))}
.om-res{padding:calc(.7 * var(--u)) calc(1.8 * var(--u));border-radius:99em;
  box-shadow:inset calc(.35 * var(--u)) calc(.35 * var(--u)) calc(.7 * var(--u)) var(--sd),inset calc(-.35 * var(--u)) calc(-.35 * var(--u)) calc(.7 * var(--u)) var(--sl)}
.om-res.ok{color:#2E8B57}
.om-goal{color:var(--muted)}

/* ---------- story spark ---------- */
.scene{position:relative;flex:1;min-height:0;border-radius:calc(2 * var(--u));overflow:hidden;color:var(--mink,#fff);
  background:linear-gradient(160deg,var(--m1,#4B5A75),var(--m2,#2F3B52) 60%,var(--m3,#6E7F9C));background-size:200% 200%;animation:moodshift 18s ease-in-out infinite;
  box-shadow:inset calc(.5 * var(--u)) calc(.5 * var(--u)) calc(1.2 * var(--u)) rgb(0 0 0 / .18),inset calc(-.5 * var(--u)) calc(-.5 * var(--u)) calc(1.2 * var(--u)) rgb(255 255 255 / .12)}
.mood-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sc-lines{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:calc(1.5 * var(--u));padding:calc(2.6 * var(--u)) calc(4.4 * var(--u))}
.sc-line{margin:0;font-family:var(--f-kid);font-weight:700;font-size:calc(2.55 * var(--u) * var(--fs));line-height:1.35;text-shadow:0 calc(.2 * var(--u)) calc(.8 * var(--u)) rgb(0 0 0 / .25);
  opacity:0;filter:blur(4px);transform:translateY(calc(.8 * var(--u)));transition:opacity .8s var(--ease),filter .8s var(--ease),transform .8s var(--ease)}
.sc-line.on{opacity:1;filter:none;transform:none}
.sc-line.last{font-size:calc(2.9 * var(--u) * var(--fs))}
.sc-hint{position:absolute;z-index:1;right:calc(1.6 * var(--u));bottom:calc(1.2 * var(--u));font-family:var(--f-display);font-weight:700;font-size:calc(1.25 * var(--u));opacity:.75}
@keyframes moodshift{0%,100%{background-position:0% 30%}50%{background-position:100% 70%}}
.stw{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(1.8 * var(--u))}
.stw .t{display:flex;flex-direction:column;gap:calc(.9 * var(--u))}
.stw .t > p{margin:0;font-weight:700;font-size:calc(1.85 * var(--u) * var(--fs))}
.words{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:calc(1.5 * var(--u))}
.word{border:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:calc(.5 * var(--u));font-family:var(--f-kid)}
.word b{font-family:var(--f-display);font-weight:800;font-size:calc(2.5 * var(--u) * var(--fs));color:var(--c)}
.word span{font-size:calc(1.6 * var(--u) * var(--fs));color:var(--muted);opacity:0;transition:opacity .35s}
.word em{font-style:normal;font-size:calc(1.45 * var(--u) * var(--fs));opacity:0;transition:opacity .35s}
.word.show span,.word.show em{opacity:1}
.model{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:calc(1.8 * var(--u))}
.model .txt{font-size:calc(2 * var(--u) * var(--fs));line-height:1.55;overflow:auto}
.model mark{background:transparent;color:inherit;border-radius:calc(.4 * var(--u));transition:background .4s,box-shadow .4s}
.model.hl mark{background:color-mix(in srgb,var(--c) 18%,transparent);box-shadow:0 calc(.25 * var(--u)) 0 color-mix(in srgb,var(--c) 60%,transparent)}
.model .feat{display:grid;gap:calc(.9 * var(--u));align-content:start;font-size:calc(1.55 * var(--u) * var(--fs))}
.sc-check{list-style:none;margin:0;padding:0;display:grid;gap:calc(.9 * var(--u))}
.sc-check li{display:flex;gap:calc(1.1 * var(--u));align-items:flex-start;font-size:calc(1.85 * var(--u) * var(--fs))}
.sc-check li::before{content:"";flex:none;width:calc(2.2 * var(--u));height:calc(2.2 * var(--u));margin-top:calc(.1 * var(--u));border-radius:calc(.6 * var(--u));
  box-shadow:inset calc(.25 * var(--u)) calc(.25 * var(--u)) calc(.5 * var(--u)) var(--sd),inset calc(-.25 * var(--u)) calc(-.25 * var(--u)) calc(.5 * var(--u)) var(--sl)}

/* ---------- reading ladder ---------- */
.rd{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) calc(26 * var(--u));gap:calc(1.8 * var(--u))}
.rd-text{overflow:auto;font-size:calc(1.95 * var(--u) * var(--fs));line-height:1.6;padding-right:calc(1 * var(--u))}
.rd-text p{margin:0 0 calc(1 * var(--u))}
.gw{border:0;background:transparent;font:inherit;color:var(--c);font-weight:700;padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:calc(.2 * var(--u));text-underline-offset:calc(.35 * var(--u));text-decoration-style:dotted}
.rd-side{display:flex;flex-direction:column;gap:calc(1.2 * var(--u));min-height:0}
.rd-def{font-size:calc(1.65 * var(--u) * var(--fs))}
.rd-def b{display:block;font-family:var(--f-display);font-weight:800;font-size:calc(2.1 * var(--u));color:var(--c);margin-bottom:calc(.3 * var(--u))}
.lvl{display:inline-flex;gap:calc(.5 * var(--u));padding:calc(.45 * var(--u));border-radius:99em;
  box-shadow:inset calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.6 * var(--u)) var(--sd),inset calc(-.3 * var(--u)) calc(-.3 * var(--u)) calc(.6 * var(--u)) var(--sl)}
.lvl button{border:0;background:transparent;border-radius:99em;cursor:pointer;font-family:var(--f-display);font-weight:800;font-size:calc(1.4 * var(--u));color:var(--muted);padding:calc(.7 * var(--u)) calc(1.4 * var(--u))}
.lvl button[aria-pressed="true"]{color:var(--c);background:var(--bg);box-shadow:calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.6 * var(--u)) var(--sd),calc(-.3 * var(--u)) calc(-.3 * var(--u)) calc(.6 * var(--u)) var(--sl)}
.qcard{flex:1;min-height:0;display:grid;grid-template-columns:calc(17 * var(--u)) minmax(0,1fr);gap:calc(2 * var(--u));align-items:center}
.skill{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;gap:calc(.3 * var(--u));text-align:center;
  box-shadow:inset calc(.7 * var(--u)) calc(.7 * var(--u)) calc(1.4 * var(--u)) var(--sd2),inset calc(-.7 * var(--u)) calc(-.7 * var(--u)) calc(1.4 * var(--u)) var(--sl2)}
.skill b{font-family:var(--f-display);font-weight:800;font-size:calc(6 * var(--u));line-height:1;color:var(--k,var(--c))}
.skill span{font-family:var(--f-display);font-weight:700;font-size:calc(1.35 * var(--u));letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.qcard .q{font-family:var(--f-display);font-weight:800;font-size:calc(2.9 * var(--u) * var(--fs));line-height:1.2;margin:0;text-wrap:balance}
.qcard .a{margin-top:calc(1.4 * var(--u));font-size:calc(2 * var(--u) * var(--fs))}

/* ---------- votes (science predictions, debate) ---------- */
.vote{flex:1;min-height:0;display:grid;gap:calc(1.2 * var(--u));align-content:center}
.vrow{display:grid;grid-template-columns:calc(4.6 * var(--u)) minmax(0,1fr) auto;gap:calc(1.4 * var(--u));align-items:center;padding:calc(1 * var(--u)) calc(1.4 * var(--u))}
.vrow .let{width:calc(4.6 * var(--u));height:calc(4.6 * var(--u));border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:calc(2.1 * var(--u));color:#fff;background:var(--k,var(--c))}
.vrow .txt{font-weight:700;font-size:calc(1.9 * var(--u) * var(--fs));line-height:1.3;display:grid;gap:calc(.6 * var(--u))}
.vbar{height:calc(1.1 * var(--u));border-radius:9em;overflow:hidden;
  box-shadow:inset calc(.25 * var(--u)) calc(.25 * var(--u)) calc(.5 * var(--u)) var(--sd),inset calc(-.25 * var(--u)) calc(-.25 * var(--u)) calc(.5 * var(--u)) var(--sl)}
.vbar i{display:block;height:100%;width:0;border-radius:9em;background:var(--k,var(--c));transition:width .6s var(--ease)}
.vcount{display:flex;align-items:center;gap:calc(.8 * var(--u))}
.vcount output{min-width:calc(4.4 * var(--u));text-align:center;font-family:var(--f-display);font-weight:800;font-size:calc(2.6 * var(--u));font-variant-numeric:tabular-nums}
.vrow.best{box-shadow:inset 0 0 0 calc(.35 * var(--u)) #3B9A62,calc(.65 * var(--u)) calc(.65 * var(--u)) calc(1.3 * var(--u)) var(--sd),calc(-.65 * var(--u)) calc(-.65 * var(--u)) calc(1.3 * var(--u)) var(--sl)}
.vrow.dim{opacity:.5}

/* ---------- science case file ---------- */
.case{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:calc(2 * var(--u))}
.case .file{position:relative;padding:calc(4.6 * var(--u)) calc(2.6 * var(--u)) calc(2.4 * var(--u));font-size:calc(2.05 * var(--u) * var(--fs));line-height:1.5;overflow:auto}
.case .stamp{position:absolute;top:calc(1.4 * var(--u));right:calc(1.6 * var(--u));transform:rotate(8deg);font-family:var(--f-display);font-weight:800;font-size:calc(1.3 * var(--u));letter-spacing:.16em;
  color:#D9534A;border:calc(.3 * var(--u)) solid #D9534A;border-radius:calc(.6 * var(--u));padding:calc(.3 * var(--u)) calc(.9 * var(--u));opacity:.85}
.case .big-q{display:grid;place-items:center;text-align:center;align-content:center;gap:calc(1.4 * var(--u))}
.case .big-q .qm{width:calc(13 * var(--u));height:calc(13 * var(--u));border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:calc(7 * var(--u));color:var(--c);
  box-shadow:inset calc(.8 * var(--u)) calc(.8 * var(--u)) calc(1.6 * var(--u)) var(--sd2),inset calc(-.8 * var(--u)) calc(-.8 * var(--u)) calc(1.6 * var(--u)) var(--sl2);animation:float 4s ease-in-out infinite}
.nw{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1.8 * var(--u))}
.nw .t{font-size:calc(1.9 * var(--u) * var(--fs))}
.inv{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:calc(1.8 * var(--u))}
.inv .t{overflow:auto;font-size:calc(1.75 * var(--u) * var(--fs))}
.fair{display:grid;gap:calc(.8 * var(--u));font-size:calc(1.6 * var(--u) * var(--fs))}
.fair b{font-family:var(--f-display);color:var(--c)}
.myth{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:calc(1.4 * var(--u))}
.myth .t{font-size:calc(1.55 * var(--u) * var(--fs))}
.myth s{color:#C2414B;text-decoration-thickness:calc(.2 * var(--u))}

/* ---------- sound journey ---------- */
.journey{position:relative;flex:1;min-height:0;border-radius:calc(2 * var(--u));overflow:hidden;display:grid;place-items:center;text-align:center;
  box-shadow:inset calc(.6 * var(--u)) calc(.6 * var(--u)) calc(1.3 * var(--u)) var(--sd2),inset calc(-.6 * var(--u)) calc(-.6 * var(--u)) calc(1.3 * var(--u)) var(--sl2)}
.waves{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.waves canvas{display:block;width:100%;height:100%}
.waves-dot{position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;background:rgb(108 99 255 / .25);will-change:transform}
.journey .jtxt{position:relative;z-index:1;max-width:82%;margin:0;font-family:var(--f-kid);font-weight:700;font-size:calc(2.6 * var(--u) * var(--fs));line-height:1.45;text-wrap:balance;
  transition:opacity .6s var(--ease),filter .6s var(--ease);text-shadow:0 0 calc(1.2 * var(--u)) rgb(224 229 236 / .95)}
.journey .jtxt.out{opacity:0;filter:blur(5px)}
.journey .jsnd{position:absolute;z-index:1;top:calc(1.4 * var(--u));left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:calc(.7 * var(--u));font-family:var(--f-display);font-weight:800;font-size:calc(1.3 * var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.journey .jsnd .i{width:calc(1.8 * var(--u));height:calc(1.8 * var(--u))}
.jctl{display:flex;gap:calc(1 * var(--u));justify-content:center;flex:none;flex-wrap:wrap}
.jdots{display:flex;gap:calc(.6 * var(--u));align-items:center}
.jdots i{width:calc(1.1 * var(--u));height:calc(1.1 * var(--u));border-radius:50%;box-shadow:inset calc(.15 * var(--u)) calc(.15 * var(--u)) calc(.3 * var(--u)) var(--sd)}
.jdots i.on{background:var(--c);box-shadow:none}
.facts{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(1.4 * var(--u))}
.facts .t{font-size:calc(1.7 * var(--u) * var(--fs));overflow:auto}
.facts .t.wide{grid-column:span 3}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(.5 * var(--u)) calc(1.2 * var(--u));font-size:calc(1.7 * var(--u) * var(--fs))}
.kv dt{font-family:var(--f-display);font-weight:800;color:var(--c)}
.kv dd{margin:0}
.cmp{flex:1;min-height:0;display:grid;grid-template-columns:calc(18 * var(--u)) minmax(0,1fr) minmax(0,1fr);gap:calc(1 * var(--u)) calc(1.4 * var(--u));align-content:start;overflow:auto}
.cmp .h{font-family:var(--f-display);font-weight:800;font-size:calc(1.5 * var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 calc(1.2 * var(--u))}
.cmp .k{font-family:var(--f-display);font-weight:800;color:var(--c);align-self:center;font-size:calc(1.9 * var(--u))}
.cmp .t{padding:calc(1 * var(--u)) calc(1.4 * var(--u));font-size:calc(1.75 * var(--u) * var(--fs))}
.hello{flex:1;min-height:0;display:grid;place-items:center;align-content:center;gap:calc(1.6 * var(--u));text-align:center}
.hello .phrase{font-family:var(--f-display);font-weight:800;font-size:calc(6.4 * var(--u) * var(--fs));line-height:1;letter-spacing:-.03em;color:var(--c);margin:0}
.hello .say{font-size:calc(2.4 * var(--u));margin:0}
.hello .mean{font-size:calc(1.9 * var(--u));color:var(--muted);margin:0}
.guess{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(2 * var(--u));align-items:center}
.guess .ans{display:grid;place-items:center;text-align:center;gap:calc(1 * var(--u));min-height:100%}
.guess .ans p{margin:0;font-family:var(--f-display);font-weight:800;font-size:calc(3.4 * var(--u) * var(--fs));line-height:1.15;color:var(--c)}

/* ---------- unplugged code: robot grid ---------- */
.robo{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(2.4 * var(--u));align-items:stretch}
.rgrid{--n:6;width:calc(37 * var(--u));height:calc(37 * var(--u));align-self:center;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:calc(.6 * var(--u));padding:calc(1 * var(--u));border-radius:calc(1.8 * var(--u));position:relative;
  box-shadow:inset calc(.6 * var(--u)) calc(.6 * var(--u)) calc(1.2 * var(--u)) var(--sd2),inset calc(-.6 * var(--u)) calc(-.6 * var(--u)) calc(1.2 * var(--u)) var(--sl2)}
.cell{border-radius:calc(.8 * var(--u));position:relative;display:grid;place-items:center;background:linear-gradient(145deg,rgb(163 177 198 / .30),rgb(255 255 255 / .55))}
.cell.wall{background:linear-gradient(145deg,#C9D1DD,#B7C1CF);box-shadow:calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.6 * var(--u)) var(--sd2),calc(-.3 * var(--u)) calc(-.3 * var(--u)) calc(.6 * var(--u)) var(--sl2)}
.cell.wall::after{content:"";width:46%;height:46%;border-radius:50%;box-shadow:inset calc(.25 * var(--u)) calc(.25 * var(--u)) calc(.5 * var(--u)) rgb(120 132 152 / .6),inset calc(-.2 * var(--u)) calc(-.2 * var(--u)) calc(.4 * var(--u)) rgb(255 255 255 / .5)}
.cell svg{width:72%;height:72%}
.cell.got svg{opacity:.18;transform:scale(.7);transition:all .4s}
.cell.trail{background:color-mix(in srgb,var(--c) 14%,transparent)}
.cell.bump{animation:bump .5s}
@keyframes bump{0%,100%{background:transparent}30%{background:rgb(217 83 74 / .35)}}
.bot{position:absolute;top:0;left:0;display:grid;place-items:center;transition:transform .38s var(--ease);pointer-events:none;z-index:2}
.bot svg{width:82%;height:82%;transition:transform .38s var(--ease)}
.bot.crash svg{animation:shake .45s}
@keyframes shake{0%,100%{translate:0}20%{translate:-6% 0}40%{translate:6% 0}60%{translate:-4% 0}80%{translate:4% 0}}
.rside{display:flex;flex-direction:column;gap:calc(1.3 * var(--u));min-width:0;min-height:0}
.prog{display:flex;flex-wrap:wrap;gap:calc(.6 * var(--u));min-height:calc(5.6 * var(--u));padding:calc(.9 * var(--u));border-radius:calc(1.4 * var(--u));align-content:flex-start;overflow:auto;
  box-shadow:inset calc(.4 * var(--u)) calc(.4 * var(--u)) calc(.8 * var(--u)) var(--sd),inset calc(-.4 * var(--u)) calc(-.4 * var(--u)) calc(.8 * var(--u)) var(--sl)}
.prog .tok{display:inline-grid;place-items:center;min-width:calc(3.8 * var(--u));height:calc(3.8 * var(--u));padding:0 calc(.6 * var(--u));border-radius:calc(.9 * var(--u));
  font-family:var(--f-display);font-weight:800;font-size:calc(1.6 * var(--u));background:var(--bg);color:var(--fg);
  box-shadow:calc(.25 * var(--u)) calc(.25 * var(--u)) calc(.5 * var(--u)) var(--sd),calc(-.25 * var(--u)) calc(-.25 * var(--u)) calc(.5 * var(--u)) var(--sl)}
.prog .tok .i{width:calc(2 * var(--u));height:calc(2 * var(--u));stroke-width:2.4}
.prog .tok.rep{color:var(--c)}
.prog .tok.now{background:var(--c);color:#fff}
.prog .tok.bad{background:#D9534A;color:#fff}
.prog .ph{font-size:calc(1.5 * var(--u));color:var(--muted);align-self:center;padding:0 calc(.6 * var(--u))}
.cmds{display:flex;flex-wrap:wrap;gap:calc(.7 * var(--u))}
.cmds .b-btn{padding:0 calc(1.3 * var(--u));min-height:calc(4.2 * var(--u))}
.cmds .b-btn.round{width:calc(4.2 * var(--u));padding:0}
.rmsg{font-family:var(--f-display);font-weight:800;font-size:calc(1.9 * var(--u));min-height:calc(2.6 * var(--u))}
.rmsg.ok{color:#2E8B57}.rmsg.bad{color:#C2414B}
.rkey{font-size:calc(1.4 * var(--u));color:var(--muted);display:flex;gap:calc(1.4 * var(--u));flex-wrap:wrap}
.rkey b{font-family:var(--f-display);color:var(--fg)}

/* ---------- step by step ---------- */
.nnt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(1.4 * var(--u));flex:none}
.nnt .t{display:grid;gap:calc(.3 * var(--u));text-align:center;padding:calc(1.1 * var(--u)) calc(1.3 * var(--u))}
.nnt .t span{font-family:var(--f-display);font-weight:800;font-size:calc(1.3 * var(--u));letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nnt .t b{font-size:calc(2 * var(--u) * var(--fs));line-height:1.25}
.nnt .t.now{outline:calc(.35 * var(--u)) solid var(--c);outline-offset:calc(-.35 * var(--u))}
.nnt .t.now span{color:var(--c)}
.stp{flex:1;min-height:0;list-style:none;margin:0;padding:0;display:grid;gap:calc(1 * var(--u));overflow:auto;align-content:start}
.stp li{display:grid;grid-template-columns:calc(4.4 * var(--u)) calc(4 * var(--u)) minmax(0,1fr) auto;gap:calc(1.2 * var(--u));align-items:center;padding:calc(.9 * var(--u)) calc(1.3 * var(--u))}
.stp .tick{width:calc(4.4 * var(--u));height:calc(4.4 * var(--u));border-radius:calc(1.1 * var(--u));border:0;background:var(--bg);cursor:pointer;display:grid;place-items:center;color:transparent;
  box-shadow:inset calc(.35 * var(--u)) calc(.35 * var(--u)) calc(.7 * var(--u)) var(--sd2),inset calc(-.35 * var(--u)) calc(-.35 * var(--u)) calc(.7 * var(--u)) var(--sl2)}
.stp .tick .i{width:calc(2.6 * var(--u));height:calc(2.6 * var(--u));stroke-width:3}
.stp li.done .tick{background:#3B9A62;color:#fff;box-shadow:calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.6 * var(--u)) var(--sd)}
.stp li.done .st{opacity:.55;text-decoration:line-through;text-decoration-thickness:calc(.15 * var(--u))}
.stp .em{font-size:calc(2.8 * var(--u));line-height:1;text-align:center}
.stp .st b{display:block;font-size:calc(2 * var(--u) * var(--fs));line-height:1.25}
.stp .st span{display:block;font-size:calc(1.5 * var(--u) * var(--fs));color:var(--muted);margin-top:calc(.2 * var(--u))}
.stp .min{font-family:var(--f-display);font-weight:800;font-size:calc(1.45 * var(--u));color:var(--c);white-space:nowrap}
.stp li.now{outline:calc(.3 * var(--u)) solid var(--c);outline-offset:calc(-.3 * var(--u))}
.wb{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:calc(1.3 * var(--u))}
.wb .t{display:grid;align-content:center;gap:calc(.35 * var(--u))}
.wb b{font-family:var(--f-display);font-weight:800;font-size:calc(2.3 * var(--u) * var(--fs));color:var(--c)}
.wb span{font-size:calc(1.5 * var(--u) * var(--fs))}
.wb em{font-style:normal;font-size:calc(1.6 * var(--u) * var(--fs));font-weight:700;color:var(--fg);opacity:.85}
.wb em::before{content:"→ ";color:var(--muted)}

/* ---------- escape room ---------- */
.esc{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) calc(27 * var(--u));gap:calc(2.4 * var(--u));align-items:center}
.esc-stack{position:relative;height:100%;perspective:calc(120 * var(--u))}
.esc-stack .cs-root{left:3%;bottom:3%;width:84%;height:72%;aspect-ratio:auto}
.esc-stack .cs-card{border-radius:calc(2 * var(--u));cursor:default;display:flex;flex-direction:column;gap:calc(1 * var(--u));padding:calc(1.9 * var(--u)) calc(2.3 * var(--u));
  box-shadow:calc(.8 * var(--u)) calc(.8 * var(--u)) calc(1.6 * var(--u)) var(--sd),calc(-.8 * var(--u)) calc(-.8 * var(--u)) calc(1.6 * var(--u)) var(--sl)}
.lk-top{display:flex;align-items:center;gap:calc(1 * var(--u))}
.lk-ico{width:calc(4.4 * var(--u));height:calc(4.4 * var(--u));border-radius:50%;display:grid;place-items:center;color:var(--c);flex:none;
  box-shadow:inset calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.6 * var(--u)) var(--sd),inset calc(-.3 * var(--u)) calc(-.3 * var(--u)) calc(.6 * var(--u)) var(--sl)}
.lk-ico .i{width:calc(2.3 * var(--u));height:calc(2.3 * var(--u))}
.lk-name{font-family:var(--f-display);font-weight:800;font-size:calc(2.1 * var(--u));line-height:1.1}
.lk-n{margin-left:auto;font-family:var(--f-display);font-weight:800;font-size:calc(1.3 * var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lk-story{margin:0;font-size:calc(1.55 * var(--u) * var(--fs));color:var(--muted);font-style:italic}
.lk-q{margin:0;font-family:var(--f-display);font-weight:800;font-size:calc(2.35 * var(--u) * var(--fs));line-height:1.25;flex:1;min-height:0;overflow:auto}
.lk-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(.8 * var(--u))}
.lk-opts .b-btn{justify-content:flex-start;font-size:calc(1.55 * var(--u));min-height:calc(4 * var(--u));border-radius:calc(1.2 * var(--u))}
.lk-in{display:flex;gap:calc(1 * var(--u));align-items:center}
.lk-in input{flex:1;min-width:0;height:calc(4.6 * var(--u));border-radius:calc(1.2 * var(--u));padding:0 calc(1.6 * var(--u));font-family:var(--f-display);font-weight:800;font-size:calc(2.2 * var(--u));letter-spacing:.06em;text-align:center;
  box-shadow:inset calc(.4 * var(--u)) calc(.4 * var(--u)) calc(.8 * var(--u)) var(--sd2),inset calc(-.4 * var(--u)) calc(-.4 * var(--u)) calc(.8 * var(--u)) var(--sl2)}
.lk-in input:focus{outline:calc(.3 * var(--u)) solid var(--c);outline-offset:calc(.2 * var(--u));box-shadow:inset calc(.4 * var(--u)) calc(.4 * var(--u)) calc(.8 * var(--u)) var(--sd2),inset calc(-.4 * var(--u)) calc(-.4 * var(--u)) calc(.8 * var(--u)) var(--sl2)}
.lk-msg{min-height:calc(2.2 * var(--u));font-family:var(--f-display);font-weight:700;font-size:calc(1.5 * var(--u))}
.lk-msg.bad{color:#C2414B}.lk-msg.ok{color:#2E8B57}
.cs-card.wrong{animation:wobble .5s}
@keyframes wobble{0%,100%{margin-left:0}20%{margin-left:-1.4%}40%{margin-left:1.4%}60%{margin-left:-.9%}80%{margin-left:.9%}}
.esc-side{display:grid;gap:calc(1.4 * var(--u));align-content:center}
.locks{display:flex;gap:calc(.8 * var(--u));flex-wrap:wrap;justify-content:center}
.locks i{width:calc(4.2 * var(--u));height:calc(4.2 * var(--u));border-radius:50%;display:grid;place-items:center;color:var(--muted);
  box-shadow:inset calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.6 * var(--u)) var(--sd),inset calc(-.3 * var(--u)) calc(-.3 * var(--u)) calc(.6 * var(--u)) var(--sl)}
.locks i .i{width:calc(2.1 * var(--u));height:calc(2.1 * var(--u))}
.locks i.open{background:var(--c);color:#fff;box-shadow:calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.6 * var(--u)) var(--sd)}
.clock{font-family:var(--f-display);font-weight:800;font-size:calc(4.6 * var(--u));font-variant-numeric:tabular-nums;text-align:center;line-height:1}
.clock.low{color:#D9534A}
.clock-l{font-family:var(--f-display);font-weight:700;font-size:calc(1.3 * var(--u));letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.finale{display:grid;place-items:center;text-align:center;gap:calc(1.4 * var(--u));align-content:center;height:100%}
.finale .trophy{width:calc(15 * var(--u));height:calc(15 * var(--u));border-radius:50%;display:grid;place-items:center;color:var(--c);animation:float 3.4s ease-in-out infinite;
  box-shadow:calc(.9 * var(--u)) calc(.9 * var(--u)) calc(1.8 * var(--u)) var(--sd),calc(-.9 * var(--u)) calc(-.9 * var(--u)) calc(1.8 * var(--u)) var(--sl)}
.finale .trophy .i{width:calc(7 * var(--u));height:calc(7 * var(--u));stroke-width:1.6}
.finale p{margin:0;max-width:70%;font-size:calc(2.2 * var(--u) * var(--fs))}

/* ---------- brain break pacer ---------- */
.pacer{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:calc(2.4 * var(--u));align-items:center}
.pace-orb{position:relative;height:100%;max-height:calc(40 * var(--u));aspect-ratio:1;justify-self:center;display:grid;place-items:center}
.pace-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pace-ring .trk{fill:none;stroke:rgb(163 177 198 / .35);stroke-width:2.4}
.pace-ring .bar{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.pace-sym{position:absolute;inset:9%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 46%,#F7F8FB 0%,#EEF1F6 45%,#E0E5EC 72%);
  box-shadow:inset calc(.8 * var(--u)) calc(.8 * var(--u)) calc(1.6 * var(--u)) var(--sd2),inset calc(-.8 * var(--u)) calc(-.8 * var(--u)) calc(1.6 * var(--u)) var(--sl2)}
.pace-sym .sym{width:88%}
.pace-txt{display:grid;gap:calc(1.4 * var(--u));align-content:center}
.pace-cue{font-family:var(--f-display);font-weight:800;font-size:calc(1.6 * var(--u));letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.pace-say{margin:0;font-family:var(--f-kid);font-weight:700;font-size:calc(3 * var(--u) * var(--fs));line-height:1.3;text-wrap:balance;min-height:3.9em;transition:opacity .4s}
.pace-say.out{opacity:0}
.pace-left{font-family:var(--f-display);font-weight:700;font-size:calc(1.5 * var(--u));color:var(--muted)}

/* ---------- debate ---------- */
.motion{flex:1;min-height:0;display:grid;place-items:center;align-content:center;gap:calc(1.6 * var(--u));text-align:center;padding:calc(2 * var(--u)) calc(5 * var(--u))}
.motion q{font-family:var(--f-display);font-weight:800;font-size:calc(3.3 * var(--u) * var(--fs));line-height:1.18;letter-spacing:-.02em;quotes:"“" "”";text-wrap:balance}
.motion q::before,.motion q::after{color:var(--c)}
.args{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1.8 * var(--u))}
.args .t{display:flex;flex-direction:column;gap:calc(1 * var(--u));overflow:auto}
.args .side{font-family:var(--f-display);font-weight:800;font-size:calc(2 * var(--u));display:flex;align-items:center;gap:calc(.8 * var(--u))}
.args .side .i{width:calc(2.4 * var(--u));height:calc(2.4 * var(--u))}
.args li{font-size:calc(1.8 * var(--u) * var(--fs))}
.stems{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:calc(1.2 * var(--u));align-content:center}
.stems .t{font-weight:700;font-size:calc(2 * var(--u) * var(--fs));display:flex;align-items:center;gap:calc(1 * var(--u))}
.stems .t .i{width:calc(2.4 * var(--u));height:calc(2.4 * var(--u));color:var(--c);flex:none}
.story-card{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:calc(2 * var(--u))}
.story-card .t{overflow:auto;font-size:calc(1.95 * var(--u) * var(--fs));line-height:1.55}
.cmp-votes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1.6 * var(--u))}

/* ---------- narrow screens: the board grows taller instead of shrinking ---------- */
@container frame (max-width:620px){
  .board{--u:4.6px;aspect-ratio:auto}
  .b-pad{position:relative;inset:auto;padding:16px 16px 14px}
  .b-body{flex:none}
  .wodb{min-height:300px}
  .stw,.facts,.words,.myth,.wb,.nnt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts .t.wide{grid-column:span 2}
  .model,.rd,.case,.inv,.guess,.story-card,.esc,.pacer,.robo,.qcard,.args,.nw{grid-template-columns:minmax(0,1fr)}
  .scene,.journey{min-height:300px}
  .esc-stack{height:340px}
  .pace-orb{max-height:240px;width:100%}
  .rgrid{height:auto;width:100%;aspect-ratio:1}
  .cmp{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .skill{width:110px;justify-self:center}
  .rd-text,.model .txt,.case .file,.inv .t,.story-card .t{overflow:visible}
}

/* ---------- maths visuals (SVG) ---------- */
.vis .vf{fill:color-mix(in srgb,var(--c) 42%,#fff);stroke:var(--c);stroke-width:2.2;stroke-linejoin:round}
.vis .ve{fill:#F4F6FA;stroke:var(--c);stroke-width:2.2}
.vis .vs{fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vis .vd{fill:var(--c)}
.vis .vh{fill:none;stroke:var(--fg);stroke-width:3.2;stroke-linecap:round}
.vis .vt{font:700 13px var(--f-display);fill:var(--muted)}

.i.flip{transform:scaleY(-1)}

.rd-side .b-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(.6 * var(--u)) calc(1 * var(--u));font-size:calc(1.6 * var(--u))}
.rd-side .b-list li{padding-left:calc(2 * var(--u))}
.ph-hint{color:var(--muted);font-style:italic}

.vrow .b-btn.go{background:var(--k,var(--c))}
.args li.ghost{list-style:none;padding:0;height:calc(2.2 * var(--u));border-radius:9em;width:86%;
  box-shadow:inset calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.6 * var(--u)) var(--sd),inset calc(-.3 * var(--u)) calc(-.3 * var(--u)) calc(.6 * var(--u)) var(--sl)}
.args li.ghost:nth-child(2n){width:72%}
.args li.ghost::before{display:none}
.stp li{padding:calc(.65 * var(--u)) calc(1.2 * var(--u));grid-template-columns:calc(3.8 * var(--u) * var(--fs)) calc(3.4 * var(--u) * var(--fs)) minmax(0,1fr) auto}
.stp .tick{width:calc(3.8 * var(--u) * var(--fs));height:calc(3.8 * var(--u) * var(--fs))}
.stp .em{font-size:calc(2.4 * var(--u) * var(--fs))}
.stp .st b{font-size:calc(1.85 * var(--u) * var(--fs))}
.stp .st span{font-size:calc(1.4 * var(--u) * var(--fs))}