/* Beyond Their Years: game skin for every lesson, checkpoint, review, quest, exam and house page.
   Loaded after the page's own styles. It re-themes the old pages; the engine and the content are untouched. */
html.sk:root:root:root{--bg:#0F2147;--dot:rgba(255,255,255,.05);--surface:#FFFBEF;--surface-2:#F0E4C2;--ink:#14213D;--ink-soft:#4A5878;--gold:#D98A0B;--teal:#19B69B;--rose:#E0483B;--border:#D6B474;color-scheme:dark}
html.sk{background:#0A1730}
html.sk body{margin:0;min-height:100vh;color:#fff;font-family:var(--g-ui);line-height:1.45;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(56,198,244,.28),transparent 60%),radial-gradient(900px 500px at 100% 110%,rgba(25,182,155,.18),transparent 60%),linear-gradient(180deg,#16306A,#0A1730 70%) fixed}
html.sk body :where(h1,h2,h3){font-family:var(--g-display);font-weight:400;letter-spacing:.01em}
html.sk h1{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25)}
html.sk .eyebrow{font-family:var(--g-ui);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-gold-hi)}
html.sk .subtitle,html.sk .subject{color:rgba(255,255,255,.85);font-size:17px;font-weight:600;max-width:60ch}

/* top bars */
html.sk .g-hud{position:sticky;top:0}
html.sk nav.bty-nav{max-width:1100px!important;padding:10px 16px 0!important;font:700 15px var(--g-ui)!important;color:#fff!important;gap:10px!important}
html.sk .bty-back,html.sk .bty-who{color:#fff!important;border:2px solid rgba(255,255,255,.28)!important;background:rgba(255,255,255,.08);border-radius:999px!important;padding:5px 14px!important;font-weight:700!important}
html.sk .bty-next{color:var(--g-gold-ink)!important;background:var(--g-gold);border:0!important;box-shadow:0 3px 0 var(--g-gold-deep);padding:6px 16px!important;font-weight:800!important}
html.sk .bty-who{font-size:13px!important}

/* page frame */
html.sk .wrap{max-width:720px;padding:22px 16px 56px}
html.sk .title-row h1{font-size:clamp(28px,5vw,40px)}

/* engine: trial map */
html.sk .node-btn{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:14px;border:3px solid var(--g-parch-edge);border-radius:22px;
  background:linear-gradient(180deg,var(--g-parch-hi),var(--g-parch));color:var(--g-parch-ink);box-shadow:0 5px 0 #B99650,0 12px 20px rgba(0,0,0,.28);transition:transform .15s var(--g-bounce)}
html.sk .node-btn:not([disabled]):hover{transform:translateY(-2px);border-color:var(--g-gold)}
html.sk .node-btn:not([disabled]):active{transform:translateY(3px);box-shadow:0 1px 0 #B99650}
html.sk .node-btn[disabled]{opacity:.7;filter:grayscale(.6)}
html.sk .node-num{width:54px;height:54px;font-family:var(--g-display);font-size:24px;font-weight:400;border:3px solid #fff;color:#fff;background:radial-gradient(circle at 35% 30%,#7FD8F7,var(--g-sky));box-shadow:0 4px 0 rgba(0,0,0,.3)}
html.sk .node-num.done{background:radial-gradient(circle at 35% 30%,#7CF08F,var(--g-green));border-color:#fff;color:#fff}
html.sk .node-num.locked{background:#8995AE;color:#fff}
html.sk .node-name{font-family:var(--g-ui);font-weight:800;font-size:19px;color:var(--g-parch-ink)}
html.sk .node-tag{color:#6B5530;font-weight:600;font-size:14px}
html.sk .node-stars{color:#E9A100;font-size:17px;letter-spacing:2px;text-shadow:0 1px 0 rgba(255,255,255,.6)}

/* engine: quiz */
html.sk .quiz-header{margin-bottom:12px}
html.sk .backlink{color:#fff;font:700 14px var(--g-ui);border:2px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);border-radius:999px;padding:5px 14px}
html.sk .hud{font-family:var(--g-ui);font-weight:800;font-size:14px;color:#fff;gap:8px}
html.sk .hud span{background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 12px}
html.sk .progress-track{height:16px;border-radius:99px;background:rgba(255,255,255,.14);border:2px solid rgba(0,0,0,.35);margin-bottom:18px}
html.sk .progress-fill{background:linear-gradient(180deg,#7CF08F,var(--g-green));border-radius:99px;box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}
html.sk .qcard{background:linear-gradient(180deg,var(--g-parch-hi),var(--g-parch));color:var(--g-parch-ink);border:3px solid var(--g-parch-edge);border-radius:26px;padding:22px 18px;box-shadow:0 6px 0 #B99650,0 16px 28px rgba(0,0,0,.3)}
html.sk .qcount{font:800 12px var(--g-ui);letter-spacing:.06em;text-transform:uppercase;color:#8A6A2E}
html.sk .qtext{font-family:var(--g-ui);font-weight:800;font-size:clamp(20px,3.6vw,25px);line-height:1.3;color:var(--g-ink)}
html.sk #opts{counter-reset:o}
html.sk .opt{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px;margin-bottom:12px;background:#fff;color:var(--g-ink);border:3px solid #D5DCEB;border-radius:18px;
  box-shadow:0 4px 0 #C2CBDD;font:700 17px/1.3 var(--g-ui);transition:transform .12s var(--g-bounce),border-color .12s}
html.sk .opt::before{counter-increment:o;content:counter(o,upper-alpha);flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#EEF2FA;font-weight:800;color:var(--g-ink-soft)}
html.sk .opt:hover:not([disabled]){border-color:var(--g-sky);transform:translateY(-2px)}
html.sk .opt:active:not([disabled]){transform:translateY(3px);box-shadow:0 1px 0 #C2CBDD}
html.sk .opt.correct{background:#E6F9EA;border-color:var(--g-green);box-shadow:0 4px 0 var(--g-green-deep)}
html.sk .opt.correct::before{background:var(--g-green);color:#fff;content:"✓"}
html.sk .opt.wrong{background:#FFF0EE;border-color:var(--g-coral);box-shadow:0 4px 0 var(--g-coral-deep);animation:sk-shake .34s}
html.sk .opt.wrong::before{background:var(--g-coral);color:#fff;content:"✗"}
html.sk .opt.dim{opacity:.55}
@keyframes sk-shake{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}
html.sk .feedback{border-radius:18px;font-size:16px;font-weight:600;color:var(--g-ink)}
html.sk .feedback.right{background:#E6F9EA;border:3px solid var(--g-green)}
html.sk .feedback.miss{background:#FFF0EE;border:3px solid var(--g-coral)}
html.sk .feedback .lead{font-family:var(--g-ui);font-weight:800;font-size:18px}
html.sk .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px 24px;border-radius:16px;border:3px solid var(--g-navy-950);background:linear-gradient(180deg,#FFE08A,var(--g-gold));color:var(--g-gold-ink);
  box-shadow:0 5px 0 var(--g-gold-deep),0 10px 18px rgba(0,0,0,.28);font:800 17px var(--g-ui);transition:transform .12s}
html.sk .btn:hover{opacity:1;filter:brightness(1.05)}html.sk .btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--g-gold-deep)}
html.sk .btn.secondary{background:linear-gradient(180deg,var(--g-navy-700),var(--g-navy-800));color:#fff;box-shadow:0 5px 0 var(--g-navy-950),0 10px 18px rgba(0,0,0,.28)}

/* engine: complete */
html.sk .complete-wrap{position:relative;overflow:hidden;margin-top:6px;padding:34px 18px 28px;border-radius:26px;border:3px solid var(--g-navy-line);background:linear-gradient(180deg,rgba(31,63,134,.92),rgba(15,33,71,.94));box-shadow:var(--g-lift)}
html.sk .complete-wrap h1,html.sk .complete-wrap h2{font-size:clamp(30px,6vw,44px);color:var(--g-gold-hi)}
html.sk .complete-stars{font-size:46px;letter-spacing:10px;color:var(--g-gold);filter:drop-shadow(0 4px 0 var(--g-gold-deep));animation:sk-pop .7s var(--g-bounce) both}
html.sk .complete-sub{color:rgba(255,255,255,.9);font-weight:600;font-size:17px}
@keyframes sk-pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
.sk-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
html.sk .complete-wrap>:not(.sk-confetti){position:relative;z-index:1} /* confetti always paints behind the finish-screen text */
.sk-confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;background:var(--c);animation:sk-fall 2.6s ease-in forwards;animation-delay:var(--d);opacity:0}
@keyframes sk-fall{0%{opacity:1;transform:translateY(0) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translateY(420px) rotate(540deg)}}

/* teaching panel */
html.sk details.byy-teach-wrap{margin:14px 0 18px;border:3px solid var(--g-navy-line);border-radius:22px;background:linear-gradient(180deg,rgba(31,63,134,.92),rgba(15,33,71,.94));box-shadow:var(--g-lift);overflow:hidden}
html.sk details.byy-teach-wrap>summary{cursor:pointer;list-style:none;padding:14px 18px;font:800 18px var(--g-ui);color:#fff}
html.sk details.byy-teach-wrap>summary::-webkit-details-marker{display:none}
html.sk details.byy-teach-wrap[open]>summary{border-bottom:3px solid var(--g-navy-line)}
html.sk details.byy-teach-wrap>:not(summary){background:var(--g-cream);color:var(--g-ink);padding:16px}

/* the mentor scene */
.sk-scene{display:flex;align-items:flex-end;gap:10px;margin:0 0 16px}
.sk-mentor{flex:none;position:relative;text-align:center}
.sk-mentor img{display:block;width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:50% 14%;border:4px solid var(--g-gold);background:var(--g-parch);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.sk-mentor b{display:none}
.sk-bubble{position:relative;flex:1;background:#fff;color:var(--g-ink);border-radius:20px;padding:12px 16px;font-weight:700;font-size:16.5px;line-height:1.35;box-shadow:0 5px 0 rgba(0,0,0,.2)}
.sk-bubble::before{content:"";position:absolute;left:-10px;bottom:18px;border:10px solid transparent;border-right-color:#fff;border-left:0}
.sk-scene.is-cheer .sk-mentor img{animation:sk-hop .5s var(--g-bounce)}
.sk-scene.is-miss .sk-mentor img{animation:sk-shake .34s}
@keyframes sk-hop{40%{transform:translateY(-12px) scale(1.06)}}
@media (min-width:900px){
  html.sk body.sk-engine .wrap{max-width:1100px;display:grid;grid-template-columns:340px minmax(0,1fr);gap:0 28px;align-items:start}
  html.sk body.sk-engine .wrap>*{grid-column:2}
  html.sk body.sk-engine .wrap>.sk-scene{grid-column:1;grid-row:1/span 30;position:sticky;top:96px;flex-direction:column;align-items:stretch;margin:0}
  .sk-engine .sk-mentor{order:2}
  .sk-engine .sk-mentor img{width:100%;height:auto;aspect-ratio:3/4;border-radius:26px;object-position:50% 8%}
  .sk-engine .sk-bubble{order:1;margin-bottom:16px}
  .sk-engine .sk-bubble::before{left:44px;bottom:-10px;border:10px solid transparent;border-top-color:#fff;border-bottom:0;border-right-color:transparent}
  .sk-engine .sk-mentor b{display:block;margin-top:8px;font:400 22px var(--g-display);color:var(--g-gold-hi);text-shadow:0 2px 0 rgba(0,0,0,.35)}
}

/* house page */
.sk-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:10px;align-items:end;margin:6px 0 16px;padding:18px 16px 0 18px;border-radius:26px;border:3px solid var(--g-navy-line);overflow:hidden;
  background:radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--wc) 55%,transparent),transparent 60%),linear-gradient(180deg,rgba(31,63,134,.95),rgba(15,33,71,.96));box-shadow:var(--g-lift)}
.sk-hero h1{font-size:clamp(26px,5.4vw,40px);margin:4px 0 2px}
.sk-hero .sk-sub{margin:0 0 12px;color:rgba(255,255,255,.85);font-weight:700;font-size:17px}
.sk-hero__art{margin:0;align-self:end}
.sk-hero__art img{display:block;width:100%;height:auto;border-radius:18px 18px 0 0;border:3px solid var(--g-gold);border-bottom:0;box-shadow:0 -4px 14px rgba(0,0,0,.3)}
.sk-prog{margin:0 0 14px}
.sk-bar{height:16px;border-radius:99px;background:rgba(255,255,255,.14);border:2px solid rgba(0,0,0,.35);overflow:hidden}
.sk-bar i{display:block;height:100%;width:var(--p);background:linear-gradient(180deg,#7CF08F,var(--g-green));box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}
.sk-prog small{display:block;margin-top:4px;font-weight:800;color:rgba(255,255,255,.85)}
.sk-go{display:inline-flex}
.sk-about{margin:0 0 18px;border:3px solid var(--g-parch-edge);border-radius:20px;background:linear-gradient(180deg,var(--g-parch-hi),var(--g-parch));color:var(--g-parch-ink);box-shadow:0 5px 0 #B99650}
.sk-about summary{cursor:pointer;padding:12px 16px;font:800 17px var(--g-ui);list-style:none}
.sk-about summary::-webkit-details-marker{display:none}
.sk-about summary::after{content:" ▾"}
.sk-about .in{padding:0 16px 14px}.sk-about .in h2{font-size:18px;margin:0 0 6px;color:var(--g-parch-ink)}.sk-about .in p{margin:0 0 10px;font-size:16px;color:var(--g-parch-ink)}
.sk-path-title{font:400 24px var(--g-display);margin:6px 0 10px;color:var(--g-gold-hi);text-shadow:0 2px 0 rgba(0,0,0,.3)}
html.sk .lessons-heading{display:none}
html.sk .lesson-list{position:relative;gap:0}
html.sk .lesson-list::before{content:"";position:absolute;left:50%;top:20px;bottom:20px;width:0;border-left:6px dotted rgba(255,201,60,.55);transform:translateX(-50%)}
html.sk .lesson-item{position:relative;display:flex}
html.sk .lesson-item:nth-child(odd){justify-content:flex-start;padding-right:8%}
html.sk .lesson-item:nth-child(even){justify-content:flex-end;padding-left:8%}
html.sk .lesson-item{margin-bottom:14px}
html.sk .lesson-item a{width:min(100%,430px);gap:12px;padding:10px 16px 10px 10px;border:3px solid var(--g-parch-edge);border-radius:999px;background:linear-gradient(180deg,var(--g-parch-hi),var(--g-parch));color:var(--g-parch-ink);
  box-shadow:0 5px 0 #B99650,0 12px 18px rgba(0,0,0,.28);transition:transform .15s var(--g-bounce);position:relative;z-index:1}
html.sk .lesson-item a[href]:hover{transform:translateY(-2px);border-color:var(--g-gold)}
html.sk .lesson-num{width:50px;height:50px;font:400 22px var(--g-display);border:3px solid #fff;color:#fff;background:radial-gradient(circle at 35% 30%,#7FD8F7,var(--g-sky));box-shadow:0 4px 0 rgba(0,0,0,.3)}
html.sk .lesson-num .g-ico{font-size:24px}
html.sk .lesson-name{font:800 17px/1.2 var(--g-ui);color:var(--g-parch-ink)}
.sk-meta{display:block;font:800 13px var(--g-ui);color:#B07A00}
.sk-meta .g-ico{color:#E9A100}
.lesson-item.is-done .lesson-num{background:radial-gradient(circle at 35% 30%,#7CF08F,var(--g-green))}
.lesson-item.is-current a{border-color:var(--g-gold);animation:sk-glow 1.8s ease-in-out infinite}
.lesson-item.is-current .lesson-num{background:radial-gradient(circle at 35% 30%,#FFE08A,var(--g-gold));color:var(--g-gold-ink);width:58px;height:58px}
@keyframes sk-glow{0%,100%{box-shadow:0 5px 0 #B99650,0 0 0 0 rgba(255,201,60,.7)}50%{box-shadow:0 5px 0 #B99650,0 0 0 10px rgba(255,201,60,0)}}
.lesson-item.is-locked a{filter:grayscale(.7);opacity:.7!important}
.lesson-item.is-locked .lesson-num{background:#8995AE}
.lesson-item.is-soon a{filter:none;opacity:.85!important}.lesson-item.is-soon .lesson-num{opacity:.6}
.lesson-item.is-check a{background:linear-gradient(180deg,#FFF1C2,#FFD66B)}
.lesson-item.is-check .lesson-num{background:radial-gradient(circle at 35% 30%,#FFB36B,var(--w-quest));}
@media (max-width:520px){.sk-hero{grid-template-columns:minmax(0,1fr) 108px;padding:14px 12px 0 14px}html.sk .lesson-item:nth-child(odd){padding-right:4%}html.sk .lesson-item:nth-child(even){padding-left:4%}}
@media (prefers-reduced-motion:reduce){.sk-scene *,.lesson-item.is-current a,html.sk .complete-stars,.sk-confetti i{animation:none!important}.sk-confetti{display:none}}

/* exam pages and other cream cards: dark text */
html.sk :where(.rules,.confirm,.breakdown,.review-q,.review-line,.grid,.qcard,.price,.card,.panel){color:var(--g-ink)}
html.sk .rules,html.sk .confirm,html.sk .breakdown{background:linear-gradient(180deg,var(--g-parch-hi),var(--g-parch));border:3px solid var(--g-parch-edge);border-radius:22px;box-shadow:0 5px 0 #B99650}
html.sk .exam-meta,html.sk .exam-top{color:#fff;font-family:var(--g-ui);font-weight:700}
html.sk .score-big{font-family:var(--g-display);color:var(--g-gold)}
html.sk details.byy-teach-wrap>summary *{color:rgba(255,255,255,.75)!important}
html.sk .opt:has(.letter)::before{display:none}
html.sk .opt .letter{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#EEF2FA;font-weight:800;color:var(--g-ink-soft);margin-right:2px}

/* ---- reward loop ported from Polyglot Mania ---- */
html.sk .hud .sk-pts{background:linear-gradient(180deg,#FFE08A,#FFC93C);color:#5A3500;border-color:#fff6}
.sk-verdict{display:inline-block;font-weight:800}
.sk-verdict.pop{animation:sk-popIn .45s cubic-bezier(.34,1.56,.64,1)}
.sk-verdict.tier1{font-size:1.18em}.sk-verdict.tier2{font-size:1.3em}.sk-verdict.tier3{font-size:1.42em}
.sk-plus{display:inline-block;margin-left:6px;padding:1px 10px;border-radius:99px;background:var(--g-gold);color:var(--g-gold-ink);font-weight:800;font-size:.9em;animation:sk-popIn .45s .1s both}
@keyframes sk-popIn{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.sk-emoji{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:55}
.sk-emoji span{position:absolute;top:-8%;font-size:1.9rem;animation:sk-fallE 3.6s ease-in forwards}
@keyframes sk-fallE{to{transform:translateY(112vh) rotate(240deg);opacity:0}}
.sk-bigpraise{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:57;padding:24px;text-align:center}
.sk-bigpraise b{display:inline-block;font-family:var(--g-display);font-weight:400;font-size:clamp(2.1rem,11vw,4.6rem);line-height:1.05;-webkit-text-stroke:2px #0A1730;text-shadow:0 4px 0 #0A1730,0 12px 28px rgba(0,0,0,.4);animation:sk-bigpop 2.6s cubic-bezier(.22,1.6,.4,1) forwards}
@keyframes sk-bigpop{0%{transform:scale(.2) rotate(-8deg);opacity:0}15%{transform:scale(1.28) rotate(4deg);opacity:1}30%{transform:scale(1) rotate(-2deg)}82%{transform:scale(1);opacity:1}100%{transform:scale(1.18);opacity:0}}
.sk-cheer{font:400 clamp(26px,5vw,36px) var(--g-display);color:#fff;margin-bottom:4px;animation:sk-popIn .5s both}
.sk-roundpts{margin:14px 0 0;font-weight:800;color:var(--g-gold-hi);font-size:clamp(20px,3.4vw,26px);line-height:1.3}
@media (prefers-reduced-motion:reduce){.sk-emoji,.sk-bigpraise{display:none}.sk-verdict.pop,.sk-plus,.sk-cheer{animation:none}}
html.sk .hud span{white-space:nowrap}
html.sk .quiz-header{flex-wrap:wrap;gap:8px}
.sk-2x{display:inline-block;margin-left:4px;padding:0 8px;border-radius:99px;background:#5B21B6;color:#fff!important;font-weight:800;border:2px solid #fff;font-size:.85em;animation:sk-popIn .4s both}
.sk-emoji span svg{display:block}

/* ---------- science: predict first (game/predict.js) ---------- */
html.pd-lock,html.pd-lock body{overflow:hidden}
.pd-ov{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:16px;background:rgba(6,14,34,.78);backdrop-filter:blur(3px)}
.pd-box{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:linear-gradient(180deg,#1f3f86,#0a1730);color:#fff;border:3px solid var(--g-gold);border-radius:var(--g-r-lg);padding:20px;box-shadow:var(--g-lift);font-family:var(--g-ui)}
.pd-who{display:flex;gap:14px;align-items:center}
.pd-who img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid var(--g-gold);background:#0a1730;flex:none}
.pd-who b{display:block;font-family:var(--g-display);font-weight:400;font-size:24px;color:var(--g-gold-hi);line-height:1.1}
.pd-who small{display:block;font-size:15px;line-height:1.35;opacity:.92;margin-top:4px}
.pd-q{font-weight:800;font-size:19px;line-height:1.35;margin:16px 0 14px}
.pd-opts{display:grid;gap:10px}
.pd-opts.two{grid-template-columns:1fr 1fr}
.pd-opt,.pd-go{font:800 17px/1.25 var(--g-ui);text-align:left;color:var(--g-ink);background:var(--g-cream);border:0;border-radius:var(--g-r-md);padding:13px 16px;box-shadow:var(--g-edge) rgba(0,0,0,.35);cursor:pointer;min-height:48px}
.pd-opts.two .pd-opt{text-align:center;font-size:20px}
.pd-opt:hover,.pd-opt:focus-visible{background:var(--g-gold-hi)}
.pd-go{display:block;width:100%;text-align:center;background:var(--g-green);color:#fff;margin-top:6px}
.pd-opt:focus-visible,.pd-go:focus-visible{outline:3px solid var(--g-sky);outline-offset:2px}
.pd-card{max-width:760px;margin:12px auto 0;padding:12px 16px;border-radius:var(--g-r-md);font-family:var(--g-ui);line-height:1.35;color:var(--g-ink);background:var(--g-parch-hi);border:2px solid var(--g-parch-edge)}
.pd-card b{display:block;font-weight:800;font-size:16.5px}
.pd-card span{display:block;font-size:15px;margin-top:2px}
.pd-card p{margin:8px 0 6px;font-size:15.5px}
.pd-card small{display:block;font-size:13.5px;color:var(--g-ink-soft)}
.pd-card.is-right{background:#E8FBEA;border-color:var(--g-green)}
.pd-card.is-learn{background:#FFF4E0;border-color:var(--g-gold-deep)}
@media (max-width:760px){.pd-card{margin:10px 12px 0}.pd-q{font-size:18px}.pd-opts.two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pd-ov{backdrop-filter:none}}

/* shared bubble padding: keep text off rounded borders */
.sk-bubble,.sk-about,html.sk .qcard,html.sk .feedback{box-sizing:border-box}
:where(.sk-bubble){padding:14px 18px}
:where(.sk-about){padding:16px 20px}

/* walkthrough panel: fill the frame evenly; keep Show/Hide visible in the header row */
html.sk details.byy-teach-wrap{box-sizing:border-box}
html.sk details.byy-teach-wrap>.byy-teach{display:flex;width:100%;max-width:none;box-sizing:border-box;margin:0}
html.sk details.byy-teach-wrap>summary{display:block;position:relative;padding-right:96px!important;min-height:56px}
html.sk details.byy-teach-wrap>summary::after{float:none!important;position:absolute;right:14px;top:50%;transform:translateY(-50%);padding:6px 14px;border-radius:999px;background:#FFC93C;color:#20344A!important;font:800 14px var(--g-ui);line-height:1.2;box-shadow:0 3px 0 rgba(0,0,0,.25)}

/* ---- question screens: mentor beside the question, vertically centred with it (Ahmes game layout) ----
   Wide (>=900px) keeps the existing 340px 3/4 portrait column; narrower screens get the same layout scaled to ~1/4 width. */
html.sk body.sk-engine.sk-hasq .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:0 14px;align-items:start}
html.sk body.sk-engine.sk-hasq .wrap>*{grid-column:1/-1}
html.sk body.sk-engine.sk-hasq .wrap>.sk-scene{display:contents}
html.sk body.sk-engine.sk-hasq .wrap>.sk-scene>.sk-bubble{grid-column:1/-1;margin:0 0 14px}
html.sk body.sk-engine.sk-hasq .wrap>.sk-scene>.sk-bubble::before{left:44px;bottom:-10px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
html.sk body.sk-engine.sk-hasq .wrap>.sk-scene>.sk-mentor{grid-column:1;align-self:center;min-width:0}
html.sk body.sk-engine.sk-hasq .wrap>.sk-scene+.qcard{grid-column:2;min-width:0}
/* bubble (inside the scene, after the portrait in DOM) is shown first so portrait and card share one grid row */
html.sk body.sk-engine.sk-hasq .wrap>.sk-scene>.sk-bubble{order:1}
html.sk body.sk-engine.sk-hasq .wrap>.sk-scene>.sk-mentor,html.sk body.sk-engine.sk-hasq .wrap>.sk-scene+.qcard{order:2}
html.sk body.sk-engine.sk-hasq .wrap>.sk-scene+.qcard~*{order:3}
html.sk body.sk-engine.sk-hasq .sk-mentor img{width:100%;height:auto;aspect-ratio:3/4;border-radius:18px;object-position:50% 8%}
html.sk body.sk-engine.sk-hasq .sk-mentor b{display:block;margin-top:6px;font:400 clamp(13px,2.6vw,22px) var(--g-display);color:var(--g-gold-hi);text-shadow:0 2px 0 rgba(0,0,0,.35);overflow-wrap:anywhere}
@media (min-width:900px){
  html.sk body.sk-engine.sk-hasq .wrap{grid-template-columns:340px minmax(0,1fr);gap:0 28px}
  html.sk body.sk-engine.sk-hasq .wrap>*{grid-column:2}
  html.sk body.sk-engine.sk-hasq .wrap>.sk-scene{display:flex;grid-column:1;grid-row:auto;position:static;align-self:center;order:2}
  html.sk body.sk-engine.sk-hasq .wrap>.sk-scene>.sk-bubble{grid-column:auto;margin:0 0 16px}
  html.sk body.sk-engine.sk-hasq .sk-mentor img{border-radius:26px}
}

/* ---- v2 sizing (Ed, Oct 23): portrait card ~1/4 of the screen and as tall as the question card, side by side ----
   Overrides the earlier sk-hasq column widths (incl. the <=520px 1fr/4fr rule) only on question screens. */
html.sk body.sk-engine.sk-hasq .wrap{grid-template-columns:minmax(0,1fr) minmax(0,2.9fr);gap:0 12px;align-items:stretch}
html.sk body.sk-engine.sk-hasq .wrap>.sk-scene>.sk-mentor{align-self:stretch;display:flex;flex-direction:column;min-height:0}
html.sk body.sk-engine.sk-hasq .sk-mentor img{flex:1 1 0;min-height:0;height:auto;aspect-ratio:auto;object-fit:cover;object-position:50% 8%}
html.sk body.sk-engine.sk-hasq .sk-mentor img.sk-posed{object-fit:contain}
html.sk body.sk-engine.sk-hasq .sk-mentor b{flex:none}
html.sk body.sk-engine.sk-hasq .sk-bubble{scroll-margin-top:110px}
html.sk body.sk-engine.sk-hasq .qcount{white-space:normal;letter-spacing:.02em;line-height:1.2}
@media (max-width:520px){
  html.sk body.sk-engine.sk-hasq .wrap{grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:0 8px}
  html.sk body.sk-engine.sk-hasq .qcard{padding-left:12px;padding-right:12px}
  html.sk body.sk-engine.sk-hasq .qcount{font-size:12px;letter-spacing:0;padding:5px 10px}
}
@media (min-width:521px) and (max-width:899px){
  html.sk body.sk-engine.sk-hasq .wrap{grid-template-columns:minmax(0,1fr) minmax(0,2.9fr);gap:0 16px}
}
@media (min-width:900px){
  html.sk body.sk-engine.sk-hasq .wrap{max-width:1200px;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:0 28px}
  html.sk body.sk-engine.sk-hasq .wrap>.sk-scene{align-self:stretch}
  html.sk body.sk-engine.sk-hasq .wrap>.sk-scene>.sk-mentor{flex:1 1 auto}
}
html.sk body.sk-engine.sk-hasq .wrap>.sk-scene>.sk-bubble{flex:none}
@media (max-width:520px){html.sk body.sk-engine.sk-hasq .sk-bubble{scroll-margin-top:142px}}

/* ---- answer poses (Ahmes): quick fade between normal / celebrating / gentle-oops art; no shake on the oops pose ---- */
.sk-mentor img{transition:opacity .12s ease}
.sk-mentor img.sk-pfade{opacity:.15}
.sk-scene.is-miss .sk-mentor img[data-apose],.sk-mentor[data-mood] img[data-apose]{animation:none}
@media (prefers-reduced-motion:reduce){.sk-mentor img{transition:none}.sk-mentor img.sk-pfade{opacity:1}}