/* Interactive answers (js/genui.js): the components an answer from the engine can carry, in Dxtr's look (forest
   surfaces, gold accent, pressable bottom edges, Anek type). Sizes are em, so a component follows the size of the chat
   column it sits in, and never drops below 15px (a phone's root size here is 11px). Set --gu-size on the column to
   choose another size. Colours come from the theme (css/theme-*.css) and, inside the path, lesson and garden, from the
   stage's own tokens (css/learn.css: --ink, --soft, --surf, --line, --accent), so the same component is dark in the
   forest stages and light in the pre-primary daylight ones (data-stage="play" | "explore"); class gu-light on any
   container does the same. No :has(), no nesting, no color-mix (Windows 7's last browsers). */

.gu-answer,.gu{
  --gu-ink:var(--ink,var(--paper));--gu-soft:var(--soft,var(--mut));--gu-surf:var(--surf,var(--s1));--gu-line:var(--line,var(--hair));
  --gu-accent:var(--accent,var(--gold));--gu-accent-ink:var(--accent-ink,var(--ink-on-gold));--gu-accent-d:var(--gold-d);
  --gu-well:rgba(255,255,255,.045);--gu-btn:var(--s2);--gu-field:var(--deep);--gu-hair:var(--hair2);--gu-edge:var(--d-shadow);--gu-hi:var(--gold);--gu-mark:var(--gold);
  --gu-ok:#58CC68;--gu-ok-ink:#7FE08E;--gu-ok-bg:rgba(88,204,104,.17);--gu-no:#E0A04F;--gu-no-ink:#F5C07A;--gu-no-bg:rgba(224,160,79,.17);
  --gu-c1:var(--gold);--gu-c2:var(--green);--gu-c3:var(--blue);--gu-c4:var(--pink);
  font-size:var(--gu-size,max(1em,15px));color:var(--gu-ink)}
/* daylight: the pre-primary stages, or any container marked gu-light */
.gu-light{--ink:#1C3127;--soft:#4A6457;--surf:rgba(255,255,255,.86);--line:rgba(28,49,39,.13);--accent:#F6C445;--accent-ink:#3A2A06}
[data-stage="play"] .gu-answer,[data-stage="play"] .gu,[data-stage="explore"] .gu-answer,[data-stage="explore"] .gu,
.gu-light .gu-answer,.gu-light .gu,.gu-answer.gu-light,.gu.gu-light{
  --gu-well:rgba(28,49,39,.055);--gu-btn:#FFFFFF;--gu-field:#FFFFFF;--gu-hair:rgba(28,49,39,.08);--gu-edge:#C9D8C2;--gu-accent-d:#C8931C;--gu-hi:#9A6A0A;--gu-mark:#C8931C;
  --gu-ok:#3FAF52;--gu-ok-ink:#2A7F38;--gu-ok-bg:rgba(88,204,104,.2);--gu-no:#E0A04F;--gu-no-ink:#9E5A12;--gu-no-bg:rgba(224,160,79,.2);
  --gu-c1:#E0A11F;--gu-c2:#3E8A5C;--gu-c3:#3E7FB8;--gu-c4:#C85A8A}

.gu-answer{display:block;min-width:0;line-height:1.5}

/* ── the words ── */
.gu-text{overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.gu-text p{margin:.5em 0;white-space:pre-line}
.gu-text>:first-child{margin-top:0}
.gu-text>:last-child{margin-bottom:0}
.gu-text ul,.gu-text ol{margin:.5em 0;padding-left:1.45em}
.gu-text li{margin:.22em 0;padding-left:.15em}
.gu-text li::marker{color:var(--gu-mark);font-weight:800}
.gu-text strong{font-weight:800}
.gu-text .gu-th{font-weight:800;font-size:1.06em;margin:.85em 0 .3em}
.gu-text code{font-family:var(--mono);font-size:.88em;padding:.05em .35em;border-radius:.35em;background:var(--gu-well)}
.gu-code{margin:.6em 0;padding:.8em 1em;border-radius:.8em;background:var(--gu-field);border:1px solid var(--gu-line);overflow-x:auto;font-family:var(--mono);font-size:.85em;line-height:1.5;white-space:pre}
.gu-code code{background:none;padding:0;font-size:1em}

/* ── every component ── */
.gu{position:relative;margin:.85em 0;padding:1em 1.1em 1.05em;border-radius:1.1em;background:var(--gu-surf);border:1px solid var(--gu-line);box-shadow:0 .25em 0 var(--gu-edge);
  line-height:1.45;min-width:0;max-width:100%;overflow-wrap:anywhere;animation:gu-in var(--t-slow,.42s) var(--ez,ease) both}
.gu-answer>.gu:first-child{margin-top:0}
.gu-answer>.gu:last-child{margin-bottom:.3em}
.gu-h{margin:0 0 .65em;font-size:1.06em;font-weight:800;line-height:1.25;letter-spacing:-.005em}
.gu-chip{display:inline-block;margin:-.25em 0 .75em;padding:.18em .65em;border-radius:99px;background:var(--gu-well);border:1px solid var(--gu-line);
  font-size:.66em;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gu-soft)}
.gu-note{margin:.75em 0 0;font-size:.8em;line-height:1.4;color:var(--gu-soft)}
.gu-ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gu button{touch-action:manipulation}
.gu button[disabled]{cursor:default}

/* the big button (next, send, try again, make an app) */
.gu-go{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:2.7em;margin-top:.85em;padding:.45em 1.25em;border-radius:.9em;font-weight:800;line-height:1.2;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 75%),var(--gu-accent);color:var(--gu-accent-ink);box-shadow:0 .25em 0 var(--gu-accent-d);
  transition:transform .07s,box-shadow .07s}
.gu-go:active{transform:translateY(.18em);box-shadow:0 .06em 0 var(--gu-accent-d)}
.gu-go[disabled]{opacity:.45;box-shadow:none}

/* ── chart ── */
.gu-legend{display:flex;flex-wrap:wrap;gap:.35em 1.1em;margin:-.2em 0 .75em;font-size:.82em;font-weight:700;color:var(--gu-soft)}
.gu-legend span{display:inline-flex;align-items:center;gap:.45em}
.gu-legend span::before{content:"";width:.8em;height:.8em;border-radius:.25em;background:var(--gu-c)}
.gu-s0{--gu-c:var(--gu-c1)}.gu-s1{--gu-c:var(--gu-c2)}.gu-s2{--gu-c:var(--gu-c3)}.gu-s3{--gu-c:var(--gu-c4)}
/* one grid for all the rows (each row's cells sit in it), so the bars line up and the label column is as wide as
   the longest label, at most 40% */
.gu-bars{display:grid;grid-template-columns:fit-content(40%) minmax(0,1fr) auto;align-items:center;gap:.55em .7em}
.gu-bar{display:contents}
.gu-bl{font-size:.86em;font-weight:700;line-height:1.2;min-width:0;max-width:12em}
.gu-bt{display:flex;flex-direction:column;gap:.18em;min-width:0;padding:.18em;border-radius:.5em;background:var(--gu-well)}
.gu-bt i{display:block;height:.8em;border-radius:.35em;background:var(--gu-c);transform-origin:left center;animation:gu-grow .7s var(--ez,ease) both}
.gu-bv{max-width:9em;font-size:.8em;font-weight:800;line-height:1.2;text-align:right;color:var(--gu-soft)}
.gu-svg{display:block;width:100%;max-width:27em;height:auto;overflow:visible}
.gu-axis{stroke:var(--gu-line);stroke-width:1.3}
.gu-grid{stroke:var(--gu-line);stroke-width:1;stroke-dasharray:3 4}
.gu-tick{fill:var(--gu-soft);font-family:var(--font);font-size:11px;font-weight:700}
.gu-yunit{font-weight:800}
.gu-line{fill:none;stroke:var(--gu-c);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.gu-dot{fill:var(--gu-c);stroke:var(--gu-surf);stroke-width:1.5}

/* ── checklist ── */
.gu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35em}
.gu-checkbtn{display:flex;align-items:flex-start;gap:.7em;width:100%;text-align:left;padding:.55em .7em;border-radius:.8em;background:var(--gu-well);font-weight:600;line-height:1.35;
  transition:background var(--t-fast,.16s),transform var(--t-press,.09s)}
.gu-checkbtn:active{transform:scale(.985)}
.gu-box{position:relative;flex:none;width:1.35em;height:1.35em;border-radius:.4em;border:2px solid var(--gu-soft);transition:background var(--t-fast,.16s),border-color var(--t-fast,.16s)}
.gu-ct{min-width:0;padding-top:.05em}
.gu-checkbtn[aria-checked="true"]{background:var(--gu-ok-bg)}
.gu-checkbtn[aria-checked="true"] .gu-box{background:var(--gu-ok);border-color:var(--gu-ok);animation:gu-pop .3s var(--pop,ease)}
.gu-checkbtn[aria-checked="true"] .gu-box::after{content:"";position:absolute;left:.33em;top:.08em;width:.32em;height:.66em;border:solid #fff;border-width:0 .17em .17em 0;transform:rotate(45deg)}
.gu-checkbtn[aria-checked="true"] .gu-ct{text-decoration:line-through;color:var(--gu-soft)}
.gu-meter{display:flex;align-items:center;gap:.75em;margin-top:.8em}
.gu-mt{flex:1;height:.45em;border-radius:99px;background:var(--gu-well);overflow:hidden}
.gu-mt i{display:block;width:0;height:100%;border-radius:99px;background:var(--gu-ok);transition:width .4s var(--ez,ease)}
.gu-count{font-size:.8em;font-weight:800;color:var(--gu-soft);white-space:nowrap}
.gu-all .gu-count{color:var(--gu-ok-ink)}

/* ── choices ── */
.gu-opts{display:flex;flex-wrap:wrap;gap:.5em}
.gu-choice{max-width:100%;min-height:2.6em;padding:.45em 1em;border-radius:.85em;background:var(--gu-btn);border:2px solid var(--gu-line);box-shadow:0 .2em 0 var(--gu-edge);
  font-weight:700;text-align:left;line-height:1.25;transition:transform var(--t-press,.09s),border-color var(--t-fast,.16s),opacity var(--t-fast,.16s)}
.gu-choice:active{transform:translateY(.15em);box-shadow:0 .05em 0 var(--gu-edge)}
.gu-choice.on{border-color:var(--gu-accent);background:rgba(240,185,76,.18)}
.gu-choice[disabled]:not(.on){opacity:.5}

/* ── steps ── */
.gu-steplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em;counter-reset:gu-step}
.gu-steplist li{counter-increment:gu-step}
.gu-stepbtn{display:flex;align-items:flex-start;gap:.75em;width:100%;text-align:left;padding:.6em .75em;border-radius:.85em;background:var(--gu-well);transition:background var(--t-fast,.16s)}
.gu-stepbtn::before{content:counter(gu-step);flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--gu-accent);color:var(--gu-accent-ink);
  font-weight:800;font-size:.95em;box-shadow:0 .15em 0 var(--gu-accent-d);transition:background var(--t-fast,.16s)}
.gu-sc{min-width:0;padding-top:.1em}
.gu-sc b{display:block;font-weight:800;line-height:1.3}
.gu-sc span{display:block;margin-top:.12em;font-size:.92em;line-height:1.4;color:var(--gu-soft)}
.gu-stepbtn[aria-pressed="true"]{background:var(--gu-ok-bg)}
.gu-stepbtn[aria-pressed="true"]::before{background:var(--gu-ok);color:#fff;box-shadow:none}
.gu-stepbtn[aria-pressed="true"] .gu-sc b{color:var(--gu-ok-ink)}

/* ── table ── */
.gu-tablewrap{max-width:100%;overflow-x:auto;border-radius:.8em;border:1px solid var(--gu-line)}
.gu-tbl{width:100%;border-collapse:collapse;font-size:.9em;line-height:1.35}
.gu-tbl th,.gu-tbl td{padding:.5em .75em;text-align:left;vertical-align:top;overflow-wrap:normal;min-width:5.5em}
.gu-tbl th{font-weight:800;background:var(--gu-well)}
.gu-tbl td{border-top:1px solid var(--gu-hair)}
.gu-tbl td:first-child{font-weight:700}

/* ── compare ── */
.gu-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));gap:.6em}
.gu-card{display:flex;flex-direction:column;gap:.35em;min-width:0;padding:.8em .9em;border-radius:.9em;background:var(--gu-well);border:1px solid var(--gu-hair)}
.gu-cn{font-weight:800;font-size:1.02em;line-height:1.25}
.gu-card .gu-chip{align-self:flex-start;margin:0}
.gu-card ul{margin:.1em 0 0;padding-left:1.15em;font-size:.9em}
.gu-card li::marker{color:var(--gu-mark)}
.gu-cv{margin:auto 0 0;padding-top:.5em;border-top:1px solid var(--gu-hair);font-size:.86em;font-weight:700}

/* ── scaler ── */
.gu-stepper{display:flex;align-items:center;gap:.7em;margin-bottom:.7em}
.gu-stepper button{width:2.4em;height:2.4em;border-radius:50%;background:var(--gu-btn);border:2px solid var(--gu-line);box-shadow:0 .18em 0 var(--gu-edge);font-size:1.15em;font-weight:800;line-height:1;
  transition:transform var(--t-press,.09s)}
.gu-stepper button:active{transform:translateY(.12em);box-shadow:0 .04em 0 var(--gu-edge)}
.gu-stepper button[disabled]{opacity:.4}
.gu-sv{min-width:5.5em;text-align:center;font-weight:800;font-size:1.1em}
.gu-qty{list-style:none;margin:0;padding:0}
.gu-qty li{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.45em .1em;border-top:1px solid var(--gu-hair)}
.gu-qty b{font-weight:800;text-align:right}

/* ── calc ── */
.gu-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));gap:.75em .9em}
.gu-in{display:flex;flex-direction:column;gap:.35em;min-width:0;font-size:.86em;font-weight:700;color:var(--gu-soft)}
.gu-in input[type=number]{width:100%;height:2.6em;padding:0 .8em;border-radius:.75em;border:2px solid var(--gu-line);background:var(--gu-field);color:var(--gu-ink);font-size:1.12em;font-weight:700}
.gu-in input[type=number]:focus{outline:none;border-color:var(--gu-accent)}
.gu-in input[type=range]{width:100%;margin:.2em 0 0;accent-color:var(--gu-accent)}
.gu-out{display:flex;flex-direction:column;gap:.4em;margin-top:.85em}
.gu-o{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.2em 1em;padding:.6em .85em;border-radius:.8em;background:var(--gu-well);border:1px solid var(--gu-line)}
.gu-o span{font-weight:700;color:var(--gu-soft)}
.gu-o b{margin-left:auto;font-size:1.3em;font-weight:800;text-align:right}
.gu-o:first-child b{color:var(--gu-hi)}

/* ── quiz ── */
.gu-qtop{display:flex;align-items:flex-start;justify-content:space-between;gap:.8em}
.gu-qtop .gu-h{margin-bottom:.6em}
.gu-qchip{flex:none;margin-left:auto;padding:.22em .75em;border-radius:99px;background:var(--gu-well);border:1px solid var(--gu-line);font-size:.8em;font-weight:800;color:var(--gu-hi);white-space:nowrap}
.gu-qdots{display:flex;gap:.3em;margin:0 0 .9em}
.gu-qdots i{flex:1;height:.42em;border-radius:99px;background:var(--gu-well);transition:background var(--t-base,.24s)}
.gu-qdots i.now{background:var(--gu-soft)}
.gu-qdots i.right{background:var(--gu-ok)}
.gu-qdots i.wrong{background:var(--gu-no)}
.gu-qn{margin:0 0 .25em;font-size:.7em;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gu-soft)}
.gu-q{margin:0 0 .8em;font-size:1.18em;font-weight:800;line-height:1.3}
.gu-qopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13em,1fr));gap:.55em}
.gu-qopt{display:flex;align-items:center;gap:.7em;width:100%;min-height:3em;padding:.5em .8em .5em .55em;border-radius:.95em;background:var(--gu-btn);border:2px solid var(--gu-line);
  box-shadow:0 .25em 0 var(--gu-edge);font-weight:700;text-align:left;line-height:1.3;
  transition:transform var(--t-press,.09s),border-color var(--t-fast,.16s),background var(--t-fast,.16s),opacity var(--t-fast,.16s)}
.gu-qopt:active{transform:translateY(.18em);box-shadow:0 .06em 0 var(--gu-edge)}
.gu-ql{flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.6em;border:2px solid var(--gu-line);font-size:.85em;font-weight:800;color:var(--gu-soft)}
.gu-qt{flex:1;min-width:0}
.gu-qopt .gu-ico{width:1.3em;height:1.3em}
.gu-qopt.right{border-color:var(--gu-ok);background:var(--gu-ok-bg);box-shadow:0 .25em 0 var(--gu-ok);animation:gu-pop .35s var(--pop,ease)}
.gu-qopt.right .gu-ql{background:var(--gu-ok);border-color:var(--gu-ok);color:#fff}
.gu-qopt.right .gu-ico{color:var(--gu-ok-ink)}
.gu-qopt.wrong{border-color:var(--gu-no);background:var(--gu-no-bg);box-shadow:0 .25em 0 var(--gu-no);animation:gu-shake .4s}
.gu-qopt.wrong .gu-ql{background:var(--gu-no);border-color:var(--gu-no);color:#fff}
.gu-qopt.wrong .gu-ico{color:var(--gu-no-ink)}
.gu-qopt.dim{opacity:.5;box-shadow:none}
.gu-qfb{margin-top:.85em;padding:.75em .9em;border-radius:.9em;animation:gu-in .3s var(--ez,ease) both}
.gu-qfb.right{background:var(--gu-ok-bg)}
.gu-qfb.wrong{background:var(--gu-no-bg)}
.gu-verdict{display:flex;align-items:center;flex-wrap:wrap;gap:.25em .45em;margin:0;font-weight:600}
.gu-verdict .gu-ico{width:1.25em;height:1.25em}
.gu-verdict b{font-size:1.12em;font-weight:800}
.gu-qfb.right .gu-verdict b,.gu-qfb.right .gu-verdict .gu-ico{color:var(--gu-ok-ink)}
.gu-qfb.wrong .gu-verdict b,.gu-qfb.wrong .gu-verdict .gu-ico{color:var(--gu-no-ink)}
.gu-explain{margin:.4em 0 0;line-height:1.45}
.gu-qfb .gu-go{margin-top:.75em}
.gu-qend{display:flex;align-items:center;gap:1em;padding:.2em 0 .4em;animation:gu-in .4s var(--ez,ease) both}
.gu-ring{position:relative;flex:none;width:5.2em;height:5.2em}
.gu-ring svg{position:absolute;left:0;top:0;width:100%;height:100%;transform:rotate(-90deg)}
.gu-ring circle{fill:none;stroke-width:7}
.gu-ring .bg{stroke:var(--gu-well)}
.gu-ring .fg{stroke:var(--gu-ok);stroke-linecap:round;transition:stroke-dashoffset 1s var(--ez,ease)}
.gu-ring b{position:absolute;left:0;top:0;right:0;bottom:0;display:grid;place-items:center;font-size:1.2em;font-weight:800}
.gu-qendt{min-width:0}
.gu-qscore{margin:0;font-size:1.3em;font-weight:800;line-height:1.2}
.gu-qmsg{margin:.25em 0 0;color:var(--gu-soft)}
.gu-qrevh{margin:.9em 0 .35em;font-size:.7em;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gu-soft)}
.gu-qrev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
.gu-qrev li{display:flex;align-items:flex-start;gap:.55em;padding:.45em .6em;border-radius:.7em;background:var(--gu-well);font-size:.9em;line-height:1.35}
.gu-qrev li .gu-ico{margin-top:.12em;width:1.15em;height:1.15em}
.gu-qrev li.right .gu-ico{color:var(--gu-ok-ink)}
.gu-qrev li.wrong .gu-ico{color:var(--gu-no-ink)}
.gu-qrev small{display:block;margin-top:.1em;font-size:.92em;color:var(--gu-soft)}

/* ── stats ── */
.gu-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8em,1fr));gap:.55em}
.gu-stat{display:flex;flex-direction:column;gap:.15em;min-width:0;padding:.75em .85em;border-radius:.9em;background:var(--gu-well);border:1px solid var(--gu-hair)}
.gu-stat b{font-size:1.55em;font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--gu-hi)}
.gu-stat span{font-size:.84em;font-weight:700;line-height:1.3}
.gu-stat small{font-size:.76em;line-height:1.3;color:var(--gu-soft)}

/* ── places (a map in the original; here a numbered list) ── */
.gu-places{list-style:none;margin:0;padding:0;counter-reset:gu-pl}
.gu-places li{position:relative;display:flex;align-items:flex-start;gap:.75em;padding:.4em 0;counter-increment:gu-pl}
.gu-places li::before{content:counter(gu-pl);position:relative;z-index:1;flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;
  background:var(--gu-accent);color:var(--gu-accent-ink);font-size:.9em;font-weight:800;box-shadow:0 .15em 0 var(--gu-accent-d)}
.gu-route li:not(:last-child)::after{content:"";position:absolute;left:.8em;top:2.1em;bottom:-.5em;width:2px;border-radius:2px;background:var(--gu-line)}
.gu-pt{min-width:0;padding-top:.15em}
.gu-pt b{display:block;font-weight:800;line-height:1.3}
.gu-pt span{display:block;font-size:.88em;color:var(--gu-soft)}

/* ── app ── */
.gu-why{margin:0}

/* ── a block still arriving ── */
.gu-skel{height:4.6em;margin:.85em 0;border-radius:1.1em;border:1px solid var(--gu-line);
  background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 70%) 0 0/250% 100%,var(--gu-surf);animation:gu-shimmer 1.3s linear infinite}

@keyframes gu-in{from{opacity:0;transform:translateY(.5em)}}
@keyframes gu-grow{from{transform:scaleX(0)}}
@keyframes gu-pop{40%{transform:scale(1.04)}}
@keyframes gu-shake{25%{transform:translateX(-.35em)}75%{transform:translateX(.35em)}}
@keyframes gu-shimmer{from{background-position:100% 0}to{background-position:-150% 0}}