/* Fonts are served from this site (fonts/), not Google, so no visitor data goes to a
   third party just to render text. Latin and Latin Extended only: the site is English.
   Nunito is a variable font, so one file per subset covers both 700 and 900.
   Both fonts are SIL Open Font License; the licences are in fonts/. */
/* Nunito 700, latin-ext */
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Nunito 700, latin */
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Nunito 900, latin-ext */
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/nunito-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Nunito 900, latin */
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Poppins 400, latin-ext */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Poppins 400, latin */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Poppins 600, latin-ext */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Poppins 600, latin */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --sky:#29ABE2;
  --deep:#2979D4;
  /* text-only shade of deep blue: passes WCAG AA (5.7:1 on white) for small text */
  --deep-text:#1f66b8;
  --red:#E8294A;
  --navy:#1B1B4E;
  --white:#FFFFFF;
  --light:#f0f6ff;
  --ink:#2b3350;
  --muted:#5b6480;
  --r:20px;
  --nav-h:72px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  font-family:'Poppins',sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Nunito',sans-serif;font-weight:900;line-height:1.12;color:var(--navy)}
a{color:var(--deep-text)}
img,svg,iframe{display:block;max-width:100%}

.wrap{width:min(1180px,92vw);margin-inline:auto}
.wrap-narrow{width:min(880px,92vw);margin-inline:auto}

:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--white);color:var(--navy);padding:14px 20px;
  border-radius:0 0 var(--r) 0;font-weight:600;
}
.skip:focus{left:0}

/* ---------------- nav ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);background:var(--navy);
  display:flex;align-items:center;
}
.nav .wrap{display:flex;align-items:center;gap:28px;width:min(1180px,94vw)}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand .mark{width:40px;height:40px;border-radius:11px;flex:0 0 auto}
.brand .name{font-family:'Nunito',sans-serif;font-weight:900;font-size:19px;color:var(--white);letter-spacing:.2px}

.nav-links{margin-left:auto;display:flex;align-items:center;gap:6px;list-style:none}
.nav-links a{
  display:block;padding:9px 15px;border-radius:12px;
  color:#cfe0f5;text-decoration:none;font-size:15px;font-weight:600;
  transition:background .16s ease,color .16s ease;
}
.nav-links a:hover{background:rgba(255,255,255,.1);color:var(--white)}
.nav-links .more{color:var(--white)}
.nav-links .cta{background:var(--red);color:var(--white);padding:11px 20px}
.nav-links .cta:hover{background:#cf1f3e;color:var(--white)}

.burger{
  margin-left:auto;display:none;
  background:transparent;border:1px solid rgba(255,255,255,.28);
  border-radius:12px;padding:9px 12px;cursor:pointer;
  color:var(--white);font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;
}

@media (max-width:900px){
  .burger{display:block}
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--navy);padding:14px 4vw 22px;
    border-top:1px solid rgba(255,255,255,.12);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 16px;font-size:16px}
  .nav-links .cta{text-align:center;margin-top:6px}
}

/* ---------------- hero (home) ---------------- */
.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + 76px) 0 84px;
  background:linear-gradient(180deg,var(--light) 0%,var(--white) 100%);
}
.hero .glyphs{
  position:absolute;inset:0;pointer-events:none;
  color:var(--sky);
  font-family:'Nunito',sans-serif;font-weight:900;user-select:none;
}
/* Four nested layers per symbol so the effects never fight over one property:
   .glyph-outer = scroll parallax (JS sets transform)
   .glyph-fade  = opacity cycle      .glyph-float = up/down hover
   .glyph-inner = grow/shrink
   Dial the whole effect from the three amplitudes below; for a quieter
   version use 1.30 / 26px / .20 with --glyph-fade-min .03 */
.hero .glyphs{
  --glyph-scale:1.55;
  --glyph-lift:44px;
  --glyph-fade-max:.26;
  --glyph-fade-min:0;
}
.hero .glyph-outer{position:absolute;line-height:1}
.hero .glyph-fade,
.hero .glyph-float,
.hero .glyph-inner{display:inline-block}
.hero .glyph-fade{opacity:var(--glyph-fade-max);will-change:opacity}
.hero .glyph-float{will-change:translate}
.hero .glyph-inner{white-space:nowrap;will-change:scale}
.hero .glyph-inner sub{font-size:.6em;vertical-align:-.12em}

@keyframes glyph-scale{0%,100%{scale:1}50%{scale:var(--glyph-scale)}}
@keyframes glyph-float{0%,100%{translate:0 0}50%{translate:0 calc(var(--glyph-lift) * -1)}}
@keyframes glyph-fade{0%,100%{opacity:var(--glyph-fade-max)}50%{opacity:var(--glyph-fade-min)}}

.hero .glyph-inner{animation:glyph-scale var(--sdur,8s) ease-in-out infinite;animation-delay:var(--sdelay,0s)}
.hero .glyph-float{animation:glyph-float var(--fldur,5s) ease-in-out infinite;animation-delay:var(--fldelay,0s)}
.hero .glyph-fade{animation:glyph-fade var(--fdur,3s) ease-in-out infinite;animation-delay:var(--fdelay,0s)}

/* thin the field on small screens so the headline never fights the background */
@media (max-width:820px){ .hero .glyph-outer.g-dense{display:none} }
@media (max-width:560px){ .hero .glyph-outer.g-mid{display:none} }

@media (prefers-reduced-motion:reduce){
  .hero .glyph-fade,.hero .glyph-float,.hero .glyph-inner{animation:none !important}
  .hero .glyph-fade{opacity:.14}
}

.hero-inner{position:relative;max-width:790px}
.eyebrow{
  display:inline-block;background:rgba(41,171,226,.14);color:var(--deep-text);
  font-weight:600;font-size:13.5px;letter-spacing:.04em;
  padding:7px 15px;border-radius:999px;margin-bottom:22px;
}
.hero h1{font-size:clamp(2.15rem,5.4vw,3.6rem);letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lede{font-size:clamp(1.02rem,2vw,1.19rem);color:var(--muted);margin-top:20px;max-width:60ch}

.pick{margin-top:44px}
.pick h2{font-size:15px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:700}
.levels{margin-top:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.level{
  display:flex;flex-direction:column;text-decoration:none;background:var(--white);
  border:2px solid #dfe9fb;border-radius:var(--r);padding:26px 26px 22px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.level:hover{transform:translateY(-4px);border-color:var(--sky);box-shadow:0 14px 34px rgba(27,27,78,.11)}
.level .tier{font-family:'Nunito',sans-serif;font-weight:900;font-size:1.45rem;color:var(--navy);line-height:1.2}
.level .ages{display:block;font-size:13.5px;color:var(--deep-text);font-weight:600;margin-top:3px}
.level .subs{font-size:14.5px;color:var(--muted);margin-top:12px}
.level .go{display:inline-block;margin-top:auto;padding-top:18px;color:var(--deep-text);font-weight:600;font-size:14.5px;white-space:nowrap}

.trust{margin-top:38px;display:flex;flex-wrap:wrap;gap:11px 26px;font-size:14.5px;color:var(--muted)}
.trust b{color:var(--navy);font-weight:600}

/* ---------------- page header (inner pages) ---------------- */
.page-head{
  background:linear-gradient(180deg,var(--light) 0%,var(--white) 100%);
  padding:calc(var(--nav-h) + 56px) 0 52px;
}
.crumb{font-size:14px;color:var(--muted);margin-bottom:16px}
.crumb a{text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb span{margin:0 8px;color:#a8b4cc}
.page-head h1{font-size:clamp(1.95rem,4.6vw,3rem);letter-spacing:-.4px}
.page-head p{color:var(--muted);margin-top:16px;max-width:62ch;font-size:1.04rem}

/* ---------------- generic section ---------------- */
.section{padding:88px 0}
.section-tight{padding:60px 0}
.section.tint{background:var(--light)}
.section-head{max-width:66ch;margin-bottom:44px}
.section-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.section-head p{color:var(--muted);margin-top:14px;font-size:1.03rem}

/* ---------------- subject cards (home) ---------------- */
.subject-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--white);border-radius:var(--r);padding:30px 28px;border:1px solid #e3ebf9}
.card h3{font-size:1.28rem}
.card .lvl{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--white);background:var(--deep);
  padding:4px 11px;border-radius:999px;margin-bottom:13px;
}
.card ul{list-style:none;margin-top:15px;display:flex;flex-wrap:wrap;gap:8px}
.card ul li{font-size:14px;color:var(--ink);background:var(--light);border-radius:10px;padding:6px 12px}
.card .go{display:inline-block;margin-top:18px;color:var(--deep-text);font-weight:600;font-size:14.5px;text-decoration:none}
.card .go:hover{text-decoration:underline}

/* ---------------- topic list (subject pages) ---------------- */
.stage-block + .stage-block{margin-top:64px}
.stage-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.stage-title h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
.stage-title .count{font-size:14px;color:var(--muted);font-weight:600}
.stage-note{color:var(--muted);font-size:.98rem;margin-bottom:26px;max-width:62ch}

.topics{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.topic{
  display:flex;align-items:flex-start;gap:15px;
  background:var(--white);border:1px solid #e3ebf9;border-radius:var(--r);
  padding:20px 22px;text-decoration:none;color:inherit;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
a.topic:hover{border-color:var(--sky);box-shadow:0 10px 26px rgba(27,27,78,.09);transform:translateY(-2px)}
.topic .num{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--light);color:var(--deep-text);
  font-family:'Nunito',sans-serif;font-weight:900;font-size:15px;
}
a.topic .num{background:var(--sky);color:var(--white)}
.topic .body{min-width:0}
.topic h3{font-size:1.05rem;font-family:'Poppins',sans-serif;font-weight:600;color:var(--navy);line-height:1.4}
.topic p{font-size:13.5px;color:var(--muted);margin-top:4px}
.topic .tag{
  display:inline-block;margin-top:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:999px;
  background:#eef2f9;color:#8590a8;
}
a.topic .tag{background:rgba(41,171,226,.15);color:var(--deep-text)}
.topic.soon{opacity:.72}

/* ---------------- lesson page ---------------- */
.lesson-main{padding:52px 0 76px}
.video-frame{
  position:relative;width:100%;aspect-ratio:16/9;
  background:var(--navy);border-radius:var(--r);overflow:hidden;
  border:1px solid #dbe6f8;
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-placeholder{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:#a9bdda;padding:28px;
}
.video-placeholder strong{display:block;color:var(--white);font-family:'Nunito',sans-serif;font-weight:900;font-size:1.15rem;margin-bottom:8px}
.video-placeholder span{font-size:14px}

.prose{margin-top:44px}
.prose h2{font-size:1.45rem;margin-top:38px;margin-bottom:12px}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:14px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 16px 22px;color:var(--ink)}
.prose li{margin-bottom:7px}

.downloads{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:14px}
.dl{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--light);border:1px solid #dbe6f8;border-radius:var(--r);
  padding:18px 20px;transition:border-color .16s ease,transform .16s ease;
}
.dl:hover{border-color:var(--sky);transform:translateY(-2px)}
.dl .ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:var(--deep);
  display:grid;place-items:center;color:var(--white);font-size:17px;font-weight:700;
  font-family:'Nunito',sans-serif;
}
.dl .t{display:block;font-weight:600;color:var(--navy);font-size:15px;line-height:1.35}
.dl .s{display:block;font-size:13px;color:var(--muted);margin-top:2px}

.lesson-nav{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:54px;padding-top:30px;border-top:1px solid #e3ebf9;
}
.lesson-nav a{
  text-decoration:none;font-weight:600;font-size:14.5px;color:var(--deep-text);
  background:var(--light);border-radius:14px;padding:12px 20px;
}
.lesson-nav a:hover{background:#e2edff}

/* ---------------- steps ---------------- */
.steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));counter-reset:s}
.step{position:relative;padding-top:8px}
.step::before{
  counter-increment:s;content:counter(s);
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--sky);color:var(--white);
  font-family:'Nunito',sans-serif;font-weight:900;font-size:1.2rem;margin-bottom:16px;
}
.step h3{font-size:1.2rem}
.step p{color:var(--muted);margin-top:9px;font-size:.98rem}

/* ---------------- premium band ---------------- */
.premium{background:var(--navy);color:#d7e3f6;padding:88px 0}
.premium h2,.premium h3{color:var(--white)}
.premium .grid{display:grid;gap:46px;grid-template-columns:1.1fr .9fr;align-items:start}
@media (max-width:860px){.premium .grid{grid-template-columns:1fr;gap:34px}}
.premium h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.premium .sub{color:#a9bdda;margin-top:16px;font-size:1.03rem}
.premium ul{list-style:none;margin-top:26px;display:grid;gap:13px}
.premium ul li{padding-left:30px;position:relative;font-size:1rem}
.premium ul li::before{
  content:"";position:absolute;left:0;top:9px;width:15px;height:8px;
  border-left:3px solid var(--sky);border-bottom:3px solid var(--sky);
  transform:rotate(-45deg);border-radius:1px;
}
.panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);padding:30px 28px}
.panel h3{font-size:1.22rem}
.panel p{color:#a9bdda;font-size:.96rem;margin-top:10px}

.field{margin-top:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--white);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:'Poppins',sans-serif;font-size:15px;color:var(--navy);
  background:var(--white);border:2px solid transparent;border-radius:13px;padding:12px 14px;
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sky)}

.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;text-align:center;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;
  padding:14px 30px;border-radius:14px;background:var(--red);color:var(--white);
  transition:background .16s ease,transform .16s ease;
}
.btn:hover{background:#cf1f3e;transform:translateY(-2px)}
.btn.block{width:100%;margin-top:20px}
.btn.ghost{background:var(--white);color:var(--navy)}
.btn.ghost:hover{background:#eaf3ff}

.formnote{font-size:12.5px;color:#8fa4c6;margin-top:14px}

/* ---------------- closing cta ---------------- */
.close-cta{text-align:center;padding:92px 0}
.close-cta h2{font-size:clamp(1.8rem,4vw,2.7rem)}
.close-cta p{color:var(--muted);margin:16px auto 30px;max-width:58ch;font-size:1.05rem}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------------- footer ---------------- */
.foot{background:var(--navy);color:#9fb4d4;padding:52px 0 40px;font-size:14.5px}
.foot .cols{display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr;margin-bottom:34px}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}}
.foot h4{font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--white);margin-bottom:14px}
.foot a{color:#9fb4d4;text-decoration:none}
.foot a:hover{color:var(--white)}
.foot ul{list-style:none;display:grid;gap:9px}
.foot .base{
  border-top:1px solid rgba(255,255,255,.14);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
  .level:hover,.btn:hover,.topic:hover,.dl:hover{transform:none}
}

/* ---------------- journey guide cards (home) ---------------- */
.guides{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.guide{
  display:block;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid #e3ebf9;border-radius:var(--r);
  padding:28px 26px;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.guide:hover{border-color:var(--sky);box-shadow:0 12px 30px rgba(27,27,78,.1);transform:translateY(-3px)}
.guide .stage{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--deep-text);background:rgba(41,171,226,.15);
  padding:4px 11px;border-radius:999px;margin-bottom:14px;
}
.guide h3{font-size:1.22rem;line-height:1.3}
.guide p{color:var(--muted);font-size:.95rem;margin-top:10px}
.guide .go{display:inline-block;margin-top:16px;color:var(--deep-text);font-weight:600;font-size:14.5px}

/* ---------------- callout ---------------- */
.callout{
  border-left:4px solid var(--sky);background:var(--light);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px;margin:30px 0;
}
.callout.urgent{border-left-color:var(--red)}
.callout h3{font-size:1.08rem;margin-bottom:8px}
.callout p{color:var(--ink);font-size:.97rem}
.callout p + p{margin-top:10px}

/* ---------------- timeline ---------------- */
.timeline{margin-top:28px;border-left:2px solid #dbe6f8;padding-left:0;list-style:none}
.timeline li{position:relative;padding:0 0 26px 30px}
.timeline li::before{
  content:"";position:absolute;left:-7px;top:7px;
  width:12px;height:12px;border-radius:50%;
  background:var(--sky);border:2px solid var(--white);
}
.timeline li:last-child{padding-bottom:0}
.timeline .when{
  display:block;font-family:'Nunito',sans-serif;font-weight:900;
  color:var(--navy);font-size:1rem;
}
.timeline .what{color:var(--muted);font-size:.95rem;margin-top:3px}

/* ---------------- format table ---------------- */
.formats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:26px}
.format{background:var(--white);border:1px solid #e3ebf9;border-radius:var(--r);padding:22px 24px}
.format h3{font-size:1.05rem;font-family:'Poppins',sans-serif;font-weight:600;color:var(--navy)}
.format .who{font-size:12.5px;color:var(--deep-text);font-weight:600;margin-top:3px}
.format p{font-size:.92rem;color:var(--muted);margin-top:10px}

/* ---------------- test group / school blocks ---------------- */
.group{
  background:var(--white);border:1px solid #e3ebf9;border-radius:var(--r);
  padding:28px 28px 24px;margin-bottom:20px;
}
.group > header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.group h3{font-size:1.3rem}
.group .region{font-size:13px;color:var(--deep-text);font-weight:600}
.group .intro{color:var(--muted);font-size:.96rem;margin-top:12px;max-width:62ch}

.facts{list-style:none;margin-top:18px;display:grid;gap:10px}
.facts li{display:flex;gap:14px;flex-wrap:wrap;font-size:.94rem;padding-bottom:10px;border-bottom:1px dashed #e6ecf7}
.facts li:last-child{border-bottom:0;padding-bottom:0}
.facts .k{flex:0 0 148px;color:var(--muted);font-weight:600}
.facts .v{flex:1 1 200px;color:var(--ink);min-width:0}

.schools{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.schools span{font-size:13px;background:var(--light);border-radius:9px;padding:5px 11px;color:var(--ink)}

.grp-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.grp-links a{
  text-decoration:none;font-size:14px;font-weight:600;
  padding:10px 17px;border-radius:12px;
  background:var(--light);color:var(--deep-text);
}
.grp-links a:hover{background:#e2edff}
.grp-links a.primary{background:var(--deep);color:var(--white)}
.grp-links a.primary:hover{background:#1f66b8}

.verified{
  display:inline-block;margin-top:16px;font-size:12px;color:#8590a8;
  background:#f4f7fc;border-radius:8px;padding:5px 11px;
}
.verified.unchecked{background:#fdeef1;color:#a8324a}

/* ---------------- featured school blocks ---------------- */
.group.focus{border:2px solid var(--sky);box-shadow:0 10px 30px rgba(41,171,226,.12)}
.group.focus h3{font-size:1.4rem}
.badge-focus{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--white);background:var(--sky);
  padding:4px 11px;border-radius:999px;margin-bottom:10px;
}
.facts .v strong{color:var(--navy)}
.mock-note{
  margin-top:14px;padding:14px 18px;border-radius:14px;
  background:rgba(41,171,226,.1);font-size:.93rem;color:var(--ink);
}
.mock-note b{color:var(--navy)}

/* ---------------- generated topic notes ---------------- */
.prose.notes h1{
  font-size:1.6rem;margin-top:44px;margin-bottom:14px;
  padding-bottom:10px;border-bottom:2px solid var(--sky);
}
.prose.notes h1:first-child{margin-top:0}
.prose.notes h2{font-size:1.28rem;margin-top:32px;margin-bottom:10px;color:var(--deep-text)}
.prose.notes h3{font-size:1.08rem;margin-top:24px;margin-bottom:8px}
.prose.notes p{margin-bottom:14px}
.prose.notes strong{color:var(--navy);font-weight:600}
.prose.notes sup{font-size:.72em;vertical-align:super;line-height:0}
.prose.notes ul,.prose.notes ol{margin:0 0 18px 24px}
.prose.notes li{margin-bottom:8px}
.prose.notes table{
  width:100%;border-collapse:collapse;margin:8px 0 20px;
  font-size:.94rem;
}
.prose.notes th,.prose.notes td{
  border:1px solid #dbe6f8;padding:9px 14px;text-align:left;
}
.prose.notes th{background:var(--light);color:var(--navy);font-weight:600}
.prose.notes hr{border:0;border-top:1px solid #e3ebf9;margin:34px 0}

/* ---------------- tier badges ---------------- */
.tier{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.05em;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.tier-f{background:#e6f4ea;color:#1c6b3a}
.tier-h{background:#fdeef1;color:#a8324a}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
.tagrow .tag{margin-top:0}
.tier-note{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin-top:18px;font-size:.93rem;color:var(--muted);
}

/* ---------------- section cards (hub) ---------------- */
.sections{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sectioncard{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid #e3ebf9;border-radius:var(--r);
  padding:24px 24px 20px;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.sectioncard:hover{border-color:var(--sky);box-shadow:0 12px 30px rgba(27,27,78,.1);transform:translateY(-3px)}
.sc-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.sectioncard h3{font-size:1.18rem;line-height:1.3}
.sc-weight{font-size:12px;font-weight:600;color:var(--deep-text);white-space:nowrap}
.sectioncard p{color:var(--muted);font-size:.94rem;margin-top:9px}
.sc-foot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:16px;font-size:13px;
}
.sc-count{color:var(--muted)}
.sc-live{color:var(--deep-text);font-weight:600}

/* ---------------- weighting bar (section pages) ---------------- */
.weightbar{
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  background:#dbe6f8;border:1px solid #dbe6f8;border-radius:var(--r);overflow:hidden;
}
.wb{background:var(--white);padding:18px 20px}
.wb-k{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.wb-v{display:block;font-family:'Nunito',sans-serif;font-weight:900;
  font-size:1.12rem;color:var(--navy);margin-top:5px;line-height:1.3}
.weightnote{margin-top:14px;font-size:13px;color:var(--muted);max-width:70ch}

/* ---------------- exam board table ---------------- */
.boards{width:100%;border-collapse:collapse;margin:22px 0 8px;font-size:.95rem}
.boards th,.boards td{border-bottom:1px solid #e3ebf9;padding:11px 14px;text-align:left}
.boards th{background:var(--light);color:var(--navy);font-weight:600;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase}
.boards td:first-child{font-weight:600;color:var(--navy);white-space:nowrap}

/* ---------------- subject list on stage cards ---------------- */
.subjlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.subjlist span{
  font-size:13px;color:var(--ink);background:var(--light);
  border-radius:9px;padding:4px 10px;
}

/* ---------------- subject chooser (guide pages) ---------------- */
.subjgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:6px 0 34px}
.subjgrid.one{grid-template-columns:minmax(240px,340px)}
.subjcard{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--white);border:2px solid #dfe9fb;border-radius:var(--r);
  padding:20px 20px 17px;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.subjcard:hover{border-color:var(--sky);transform:translateY(-3px);box-shadow:0 12px 28px rgba(27,27,78,.1)}
.sj-name{font-family:'Nunito',sans-serif;font-weight:900;font-size:1.18rem;color:var(--navy)}
.sj-blurb{font-size:13.5px;color:var(--muted);margin-top:6px;flex:1}
.sj-go{font-size:14px;font-weight:600;color:var(--deep-text);margin-top:14px}

/* ---------------- sibling subject nav ---------------- */
.subjectnav{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:22px}
.subjectnav span{font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-right:4px}
.subjectnav a{
  text-decoration:none;font-size:14px;font-weight:600;color:var(--deep-text);
  background:var(--light);border-radius:11px;padding:8px 15px;
}
.subjectnav a:hover{background:#e2edff}
.subjectnav a.on{background:var(--deep);color:var(--white)}
.subcount{font-size:14px;color:var(--deep-text);font-weight:600;margin-top:10px}
.page-head p.cadence{font-size:.95rem;margin-top:6px}

/* ---------------- price bar ---------------- */
.pricebar{
  display:grid;gap:26px;grid-template-columns:auto 1fr;align-items:center;
  background:var(--navy);border-radius:var(--r);padding:30px 34px;color:#d7e3f6;
}
@media(max-width:760px){.pricebar{grid-template-columns:1fr;gap:20px}}
.pb-amount{display:block;font-family:'Nunito',sans-serif;font-weight:900;
  font-size:3.2rem;color:var(--white);line-height:1}
.pb-unit{display:block;font-size:13.5px;color:#a9bdda;margin-top:6px;max-width:16ch}
.pb-facts{display:grid;gap:14px 30px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pb-k{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#8fa4c6}
.pb-v{display:block;font-weight:600;color:var(--white);margin-top:3px;font-size:.98rem}

/* ---------------- included grid ---------------- */
.incgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.inc{background:var(--white);border:1px solid #e3ebf9;border-radius:var(--r);padding:26px 26px 22px}
.inc h3{font-size:1.1rem;line-height:1.35}
.inc p{color:var(--muted);font-size:.95rem;margin-top:10px}

/* ---------------- contact ---------------- */
.contactgrid{display:grid;gap:26px;grid-template-columns:1.15fr .85fr;align-items:start}
@media(max-width:900px){.contactgrid{grid-template-columns:1fr}}
.contactform{background:var(--navy);border-radius:var(--r);padding:30px 30px 26px}
.contactside{display:grid;gap:16px}
.cside{background:var(--white);border:1px solid #e3ebf9;border-radius:var(--r);padding:24px 26px}
.cside h3{font-size:1.08rem}
.cside p{color:var(--muted);font-size:.94rem;margin:8px 0 16px}
.cside .btn{width:100%}
.cside-note{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.cside.safeguard{background:var(--light);border-color:#dbe6f8}
.cside.safeguard ul{list-style:none;margin-top:12px;display:grid;gap:10px}
.cside.safeguard li{position:relative;padding-left:24px;font-size:.93rem;color:var(--ink)}
.cside.safeguard li::before{
  content:"";position:absolute;left:0;top:8px;width:12px;height:7px;
  border-left:2.5px solid var(--sky);border-bottom:2.5px solid var(--sky);
  transform:rotate(-45deg);
}

/* ---------------- faq ---------------- */
.faqgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.faq{background:var(--white);border:1px solid #e3ebf9;border-radius:var(--r);padding:24px 26px}
.faq h3{font-size:1.04rem;line-height:1.4}
.faq p{color:var(--muted);font-size:.94rem;margin-top:10px}

/* ---------------- contextual tuition callout ---------------- */
.callout.offer{border-left-color:var(--red)}
.callout .cta-inline{display:inline-block;margin-top:12px;font-weight:600;color:var(--deep-text);text-decoration:none}
.callout .cta-inline:hover{text-decoration:underline}

/* ghost buttons need a visible edge on white cards */
.cside .btn.ghost{
  background:var(--light);border:1.5px solid #cddffa;color:var(--navy);
}
.cside .btn.ghost:hover{background:#e2edff;border-color:var(--sky)}

/* six cards read better as two rows of three */
.incgrid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.field label .opt{font-weight:400;color:#8fa4c6;text-transform:none;letter-spacing:0}

/* stage-card promise line */
.level .promise{
  display:block;margin-top:11px;font-family:'Nunito',sans-serif;font-weight:700;
  font-size:.98rem;color:var(--deep-text);line-height:1.35;
}
.level .subjlist{margin-top:10px}
.cside-note a{color:var(--deep-text);font-weight:600;text-decoration:none}
.cside-note a:hover{text-decoration:underline}

/* company registration line */
.foot .legal{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:12.5px;color:#7b90b3;line-height:1.6;
}
/* footer now has four columns */
.foot .cols{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
@media (max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}}

/* Wider comparison tables scroll sideways on narrow screens rather than
   forcing the whole page to. Added for the four-board A Level tables. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0 8px}
.tablewrap .boards{margin:0;min-width:560px}

/* ================================================================
   HOMEPAGE REFRESH (Sept 2026). Everything below is scoped to
   <body class="home">, so no other page changes. Same palette, fonts
   and 20px radius; no content or markup removed.
   ================================================================ */

/* browser surfaces carry the palette too */
.home ::selection{background:rgba(41,171,226,.28);color:var(--navy)}
.home h1,.home h2,.home h3{text-wrap:balance}
.home p{text-wrap:pretty}

/* calmer rhythm: a little more air between sections, slightly larger headings */
.home .section{padding:104px 0}
.home .section-head{margin-bottom:52px}
.home .section-head h2,.home .premium h2{font-size:clamp(1.8rem,3.8vw,2.7rem)}
.home .premium{padding:104px 0}

/* ---- hero: wider stage chooser, clearer cards ---- */
.home .hero-inner{max-width:960px}
.home .hero h1{max-width:790px}
.home .hero h1 em{white-space:nowrap}
/* extra room below, so the symbol field (positioned in % of the hero) clears the trust line */
.home .hero{padding-bottom:120px}
@media (max-width:560px){ .home .hero{padding-bottom:84px} }
.home .pick h2{text-transform:none;letter-spacing:0;font-size:1.15rem;font-weight:900;color:var(--navy)}
.home .levels{gap:18px;margin-top:18px}
.home .level{
  border:1.5px solid #dfe9fb;
  box-shadow:0 8px 22px rgba(27,27,78,.06);
  padding:28px 26px 24px;
}
.home .level:hover{box-shadow:0 18px 38px rgba(27,27,78,.12)}
.home .level:active{transform:translateY(-1px) scale(.99)}
/* the stage name shares the .tier class with the small tier badges; undo the badge padding */
.home .level .tier{display:block;padding:0;border-radius:0;letter-spacing:0;font-size:1.6rem}
.home .level .subjlist{margin-bottom:22px}
.home .level .go{
  margin-top:auto;padding:11px 16px;border-radius:12px;
  background:var(--light);text-align:center;
  transition:background .18s ease,color .18s ease;
}
.home .level:hover .go{background:#e2edff;color:var(--navy)}

/* trust line: each promise gets the same tick used in the tuition list */
.home .trust{gap:12px 30px}
.home .trust span{position:relative;padding-left:24px}
.home .trust span::before{
  content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;
  border-left:2.5px solid var(--sky);border-bottom:2.5px solid var(--sky);
  transform:rotate(-45deg);
}

/* the one authored moment: stage cards settle in on load */
@keyframes home-rise{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.home .level{animation:home-rise .7s cubic-bezier(.16,1,.3,1) both}
.home .level:nth-child(2){animation-delay:.08s}
.home .level:nth-child(3){animation-delay:.16s}

/* ---- how it works: numbered steps joined into one path ---- */
.home .step::before{width:52px;height:52px;border-radius:16px;font-size:1.3rem;box-shadow:0 6px 16px rgba(41,171,226,.28)}
@media (min-width:960px){
  .home .steps{grid-template-columns:repeat(3,1fr);gap:40px}
  .home .step:not(:last-child)::after{
    content:"";position:absolute;top:33px;left:68px;right:-24px;height:2px;
    background:repeating-linear-gradient(90deg,#9fd3ef 0 8px,transparent 8px 15px);
  }
}

/* ---- guides: quieter stage label ---- */
.home .guide{box-shadow:0 8px 22px rgba(27,27,78,.05)}
.home .guide .stage{text-transform:none;letter-spacing:0;font-size:13px}
.home .guide:active{transform:translateY(-1px) scale(.99)}

/* list items rise gently as they scroll into view (where the browser supports it) */
@keyframes home-reveal{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .home .step,.home .guide{
      animation:home-reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
  }
}

/* ---- who teaches your child ---- */
.home .tutor-grid{display:grid;gap:56px;grid-template-columns:1fr minmax(220px,340px);align-items:center}
/* photo sits on the right on desktop; on phones it stays above the text (see media query below) */
.home .tutor-photo{grid-column:2;grid-row:1}
/* the photo takes a larger radius than the 20px cards on purpose, so it reads as a portrait, not a card */
.home .tutor-photo{
  width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;object-position:50% 30%;
  border-radius:44px;box-shadow:0 18px 40px rgba(27,27,78,.14);
}
.home .tutor h2{font-size:clamp(1.8rem,3.8vw,2.7rem)}
.home .tutor p{color:var(--ink);font-size:1.05rem;margin-top:16px;max-width:58ch}
.home .tutor h2 + p{margin-top:18px}
/* the full introduction opens in place, below the photo and opening paragraphs */
.home .tutor-more{margin-top:48px}
.home .tutor-more summary{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  font-weight:600;color:var(--navy);background:var(--white);
  border-radius:14px;padding:13px 22px;box-shadow:inset 0 0 0 1.5px #cddffa;
  transition:box-shadow .16s ease,background .16s ease;
}
.home .tutor-more summary::-webkit-details-marker{display:none}
.home .tutor-more summary::after{
  content:"";width:8px;height:8px;margin-top:-4px;
  border-right:2.5px solid var(--deep);border-bottom:2.5px solid var(--deep);
  transform:rotate(45deg);transition:transform .2s ease,margin .2s ease;
}
.home .tutor-more[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.home .tutor-more summary:hover{box-shadow:inset 0 0 0 1.5px var(--sky)}
.home .tutor-more-body{margin-top:36px}
.home .tutor-more-body p{max-width:70ch}
.home .tutor p.tutor-lead{margin-top:0;max-width:none}
.home .tutor-cols{display:grid;gap:40px 56px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:36px}
.home .tutor-cols h3{font-size:1.2rem;line-height:1.3}
.home .tutor-cols p{font-size:.98rem;margin-top:10px}
.home .tutor-cols ul{list-style:none;margin-top:14px;display:grid;gap:12px}
.home .tutor-cols li{position:relative;padding-left:26px;font-size:.98rem;color:var(--ink)}
.home .tutor-cols li::before{
  content:"";position:absolute;left:2px;top:8px;width:12px;height:7px;
  border-left:2.5px solid var(--sky);border-bottom:2.5px solid var(--sky);
  transform:rotate(-45deg);
}
.home .tutor-cols li b{color:var(--navy);font-weight:600}
.home .tutor-start{font-size:1.45rem;margin-top:52px}
.home .tutor p.tutor-sign{font-family:'Nunito',sans-serif;font-weight:900;font-size:1.3rem;color:var(--deep-text);margin-top:24px}
@keyframes home-open{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.home .tutor-more[open] .tutor-more-body{animation:home-open .4s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){ .home .tutor-more[open] .tutor-more-body{animation:none} }
@media (max-width:760px){
  .home .tutor-grid{grid-template-columns:1fr;gap:32px}
  .home .tutor-photo{max-width:300px;border-radius:36px;grid-column:auto;grid-row:auto}
}

/* ---- closing call to action: a soft panel, and a ghost button you can see ---- */
.home .close-cta{padding:96px 0}
.home .close-cta .wrap{background:var(--light);border-radius:var(--r);padding:72px 28px}
.home .close-cta .btn.ghost{box-shadow:inset 0 0 0 1.5px #cddffa}
.home .close-cta .btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--sky)}

.home .btn:active{transform:translateY(0) scale(.98)}

@media (prefers-reduced-motion:reduce){
  .home .level,.home .step,.home .guide{animation:none}
  .home .level:active,.home .guide:active,.home .btn:active{transform:none}
}

/* ---------------- interactive topic diagrams (topic_diagrams/ + js/) ---------------- */
.diagram{margin:44px 0 0}
.diagram-head h2{font-size:1.45rem}
.diagram-head p{color:var(--muted);margin-top:10px;font-size:.98rem;max-width:68ch}
.diagram-panels{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px}
@media (max-width:640px){.diagram-panels{grid-template-columns:1fr}}
.diagram-panel{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid #e3ebf9;border-radius:var(--r);padding:20px 20px 18px;
}
.diagram-panel h3{font-size:1.05rem;line-height:1.35}
/* both artworks share a 690 x 900 canvas, so the panels are the same shape */
.diagram-stage{position:relative;aspect-ratio:690/900;margin:12px auto 0;width:100%;max-width:420px}
.diagram-stage img,.diagram-stage svg{position:absolute;inset:0;width:100%;height:100%}
.diagram-stage .dg-top{opacity:0}
.dg-overlay{overflow:visible}
.dg-route{fill:none;stroke:none}
.dg-arrow path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:6}
.dg-arrow .dg-halo{stroke:var(--white);stroke-width:13}
.dg-diffuse path:last-child{stroke:var(--navy)}
.dg-flow path:last-child{stroke:var(--red)}
.dg-slider{
  display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;
  font-size:13px;font-weight:600;color:var(--muted);
}
.dg-slider input{flex:1;min-width:0;accent-color:var(--deep);cursor:pointer}
.dg-note{margin-top:auto;padding-top:14px;font-size:13.5px;color:var(--muted)}
.diagram-head ul{margin-top:6px;padding-left:1.3em;color:var(--muted);font-size:.98rem;max-width:68ch}
.diagram-head li+li{margin-top:4px}
/* labels are drawn at rest; js/diagrams-science.js adds .dg-armed only when it is about to animate them in */
.dg-label text{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:26px;fill:var(--navy);
  stroke:var(--white);stroke-width:7px;stroke-linejoin:round;paint-order:stroke;
}
.dg-leader path{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1}
.dg-leader .dg-halo{stroke:var(--white);stroke-width:9}
.dg-leader .dg-tip{
  fill:var(--navy);stroke:var(--white);stroke-width:3;stroke-linejoin:round;
  stroke-dasharray:none;paint-order:stroke;
}
.dg-armed .dg-label text{opacity:0;transform:translateY(10px)}
.dg-armed .dg-leader path{stroke-dashoffset:1}
.dg-armed .dg-leader .dg-tip{opacity:0}
.dg-armed.dg-in .dg-label text{
  opacity:1;transform:none;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i) * .22s);
}
.dg-armed.dg-in .dg-leader path{
  stroke-dashoffset:0;transition:stroke-dashoffset .55s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i) * .22s + .2s);
}
.dg-armed.dg-in .dg-leader .dg-tip{opacity:1;transition:opacity .2s ease;transition-delay:calc(var(--i) * .22s + .55s)}
@media (prefers-reduced-motion:reduce){
  .dg-label *{transition:none!important}
  .dg-armed:not(.dg-slide) .dg-label *{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
}
/* 03: one wide panel. The 690 x 900 artwork sits in the middle of a 1000 x 900
   stage, with room for labels either side. The whole heart covers the
   cross-section; it is hidden until js/diagrams-science.js runs, so without JavaScript
   the labelled cross-section shows. */
.diagram-panels--single{grid-template-columns:1fr}
.diagram-stage--wide{aspect-ratio:1000/900;max-width:660px}
.diagram-stage--wide img{left:15.5%;right:auto;width:69%}
.diagram-stage .dg-cover{opacity:0}
.dg-slide .dg-slider{width:100%;max-width:660px;margin-inline:auto}
/* the whole-heart label only makes sense once js/diagrams-science.js controls the slider */
.dg-labelset[data-set="outside"]:not(.dg-armed){display:none}
.dg-flow.dg-blue path:last-child{stroke:var(--deep)}
.dg-overlay--heart .dg-label text{font-size:24px}
@media (max-width:640px){.dg-overlay--heart .dg-label text{font-size:32px}}
.dg-overlay--heart .dg-leader path{stroke:#111;stroke-width:5}
.dg-overlay--heart .dg-leader .dg-halo{stroke:var(--white);stroke-width:11}
.dg-overlay--heart .dg-leader .dg-tip{fill:#111;stroke:var(--white);stroke-width:3}
/* sliding back to the whole heart hides the labels quickly, with no stagger */
.dg-slide.dg-armed:not(.dg-in) .dg-label text{transition:opacity .2s ease}
.dg-slide.dg-armed:not(.dg-in) .dg-leader path{transition:stroke-dashoffset .2s ease}
.dg-slide.dg-armed:not(.dg-in) .dg-leader .dg-tip{transition:opacity .1s ease}
.dg-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px;max-width:68ch}
.dg-table{width:100%;border-collapse:collapse;font-size:.92rem;color:var(--ink)}
.dg-table th,.dg-table td{border:1px solid #dbe6f8;padding:8px 12px;text-align:left;vertical-align:top}
.dg-table thead th{background:var(--light);color:var(--navy);font-weight:600}
.dg-table tbody th{font-weight:600;color:var(--navy);white-space:nowrap}
@media (max-width:640px){
  .dg-table{font-size:.86rem}
  .dg-table th,.dg-table td{padding:7px 8px}
  .dg-table tbody th{white-space:normal}
}
.diagram-head .dg-tagline{font-size:.9rem;margin-top:8px}
.diagram-foot{margin-top:22px}
.diagram-foot p{color:var(--muted);font-size:.98rem;max-width:68ch}
.diagram-foot ul{margin-top:6px;padding-left:1.3em;color:var(--muted);font-size:.98rem;max-width:68ch}
.diagram-foot li+li{margin-top:4px}
.diagram-foot ul+p{margin-top:16px}
/* image credits for diagram artwork, at the very end of a topic page */
.image-credits{margin-top:40px;padding-top:18px;border-top:1px solid #e3ebf9;font-size:12.5px;color:var(--muted)}
.image-credits h2{font-size:.9rem;color:var(--ink)}
.image-credits ul{margin-top:6px;padding-left:1.2em}
.image-credits li+li{margin-top:3px}
.image-credits a{color:var(--deep-text)}
/* 05: the artery / vein / capillary comparison. Its first column is row headings,
   so the header row's first cell is left empty. */
.dg-table--compare thead td{border:0;background:none}
.dg-table--compare tbody th{white-space:normal}
.diagram-head .dg-tablewrap+p{margin-top:18px}
/* on phones four columns will not fit, so each row becomes a small block:
   the property as its heading, then Arteries / Veins / Capillaries in turn */
@media (max-width:640px){
  .dg-table--compare,.dg-table--compare tbody,.dg-table--compare tr,
  .dg-table--compare th,.dg-table--compare td{display:block;width:100%}
  .dg-table--compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dg-table--compare tr{border:1px solid #dbe6f8;border-radius:12px;overflow:hidden}
  .dg-table--compare tr+tr{margin-top:10px}
  .dg-table--compare th,.dg-table--compare td{border:0}
  .dg-table--compare tbody th{background:var(--light);padding:8px 12px}
  .dg-table--compare td{padding:6px 12px}
  .dg-table--compare td+td{border-top:1px solid #eef3fc}
  .dg-table--compare td::before{content:attr(data-label) ": ";font-weight:600;color:var(--navy)}
}
/* colour key under a diagram (03) */
.dg-key{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px}
.dg-key-arrow{width:26px;height:14px;fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.dg-key-arrow.dg-red{stroke:var(--red)}
.dg-key-arrow.dg-blue{stroke:var(--deep)}
.dg-key span+.dg-key-arrow{margin-left:14px}
/* 04: stages stepped through with round arrow buttons. Without JavaScript the
   stages are simply listed; js/diagrams-science.js adds .dg-steps-on and shows the controls. */
.dg-step-list{list-style:none;margin:0;padding:0}
.dg-step+.dg-step{margin-top:30px}
.dg-steps-on .dg-step-list{display:grid;touch-action:pan-y}
.dg-steps-on .dg-step{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.dg-steps-on .dg-step.is-on{opacity:1;visibility:visible;transition:opacity .35s ease}
.dg-step .diagram-stage{margin-top:4px}
.dg-step-title{font-size:1.1rem;margin-top:12px;text-align:center}
.dg-step-num{display:block;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--deep-text);margin-bottom:2px}
.dg-step-text{color:var(--muted);font-size:.95rem;max-width:60ch;margin:6px auto 0;text-align:center}
.dg-step-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.dg-step-nav[hidden]{display:none}
.dg-step-btn{
  width:48px;height:48px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--deep);color:var(--white);display:grid;place-items:center;
  transition:background .2s ease,transform .2s cubic-bezier(.16,1,.3,1);
}
.dg-step-btn:hover{background:var(--navy)}
.dg-step-btn:active{transform:scale(.94)}
.dg-step-btn:focus-visible,.dg-step-dot:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.dg-step-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.dg-step-dots{display:flex;gap:2px}
.dg-step-dot{width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.dg-step-dot::before{content:'';width:10px;height:10px;border-radius:50%;background:#cddffa;transition:background .2s ease,transform .2s ease}
.dg-step-dot[aria-current="step"]::before{background:var(--deep);transform:scale(1.25)}
.dg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .dg-steps-on .dg-step,.dg-steps-on .dg-step.is-on,.dg-step-btn,.dg-step-dot::before{transition:none}
}
/* 05: artery | vein | capillary grid. Each cutaway has its width measured by a
   line with an arrow at each end; js/diagrams-science.js (labelled panels) reveals it from
   the middle outwards, then pops the number in. At rest everything shows. */
figure.diagram-panel{margin:0}
.dg-vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.dg-vcol h3{text-align:center;font-size:1.05rem}
.dg-vfig{margin-top:10px}
.dg-vstage{position:relative;width:100%}
.dg-vstage img{position:absolute;inset:0;width:100%;height:100%}
.dg-vfig--small .dg-vstage{width:78%;margin-inline:auto}
.dg-vtag{text-align:center;font-size:13px;line-height:1.45;color:var(--muted);margin-top:4px}
.dg-measure{position:absolute;height:0}
.dg-measure-line{
  position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--navy);
  clip-path:inset(-6px -10px -6px -10px);
}
.dg-measure-line::before,.dg-measure-line::after{
  content:'';position:absolute;top:-5px;border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.dg-measure-line::before{left:-1px;border-right:9px solid var(--navy)}
.dg-measure-line::after{right:-1px;border-left:9px solid var(--navy)}
.dg-measure-value{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);white-space:nowrap;
  font-weight:600;font-size:13px;color:var(--navy);
}
.dg-armed .dg-measure-line{clip-path:inset(-6px 50% -6px 50%)}
.dg-armed .dg-measure-value{opacity:0;transform:translateX(-50%) scale(.6)}
.dg-armed.dg-in .dg-measure-line{
  clip-path:inset(-6px -10px -6px -10px);
  transition:clip-path .65s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * .3s);
}
.dg-armed.dg-in .dg-measure-value{
  opacity:1;transform:translateX(-50%) scale(1);
  transition:opacity .25s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--i) * .3s + .55s);
}
.dg-vgrid+.dg-note{text-align:center;margin-top:18px}
@media (max-width:640px){
  .dg-vgrid{grid-template-columns:1fr 1fr;gap:14px}
  .dg-vcol--capillary{grid-column:1 / -1}
  .dg-vcol--capillary .dg-vstage{max-width:180px;margin-inline:auto}
  .dg-measure-value,.dg-vtag{font-size:12px}
}
/* 06: artery wall and capillary bed, switched with the round buttons (as 04).
   Both share a wide 1100 x 700 canvas. */
#diagram-capillary-exchange{margin-top:22px}
#diagram-capillary-exchange h3{margin-bottom:8px}
.diagram-stage--exchange{aspect-ratio:1100/700;max-width:none}
.dg-overlay--exchange .dg-label text{font-size:25px}
.dg-overlay--exchange .dg-leader path{stroke-width:4}
.dg-overlay--exchange .dg-leader .dg-halo{stroke-width:10}
@media (max-width:640px){.dg-overlay--exchange .dg-label text{font-size:40px}}
/* molecule labels: just the symbol, with a white halo so it reads on any colour */
.dg-mol text{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:24px;
  stroke:var(--white);stroke-width:6px;stroke-linejoin:round;paint-order:stroke;
}
.dg-mol .dg-sub{font-size:16px}
.dg-mol--o2 text,.dg-mol--glucose text{fill:#b3122f}
.dg-mol--glucose text{font-size:20px}
.dg-mol--co2 text{fill:var(--deep-text)}
@media (max-width:640px){
  .dg-mol text{font-size:34px;stroke-width:8px}
  .dg-mol .dg-sub{font-size:22px}
  .dg-mol--glucose text{font-size:28px}
}
/* 07: plaque build-up. Four drawings stacked in each view; the slider fades
   each later stage in over the one before (js/diagrams-science.js). Without JavaScript
   all are shown, so the last stage, with its clot label, is what you see. */
.dg-plaque .dg-vtag{margin-top:14px}
.dg-plaque-round{aspect-ratio:1/1;max-width:300px;margin-top:4px}
.dg-plaque-long{aspect-ratio:780/700;max-width:520px;margin-top:4px}
.dg-plaque .diagram-stage img{transition:opacity .15s linear}
.dg-overlay--plaque .dg-label text{font-size:30px}
@media (max-width:640px){.dg-overlay--plaque .dg-label text{font-size:40px}}
.dg-plaque .dg-slider{width:100%;max-width:520px;margin-inline:auto;margin-top:6px}
.dg-plaque-stages{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:520px;
  margin:6px auto 0;font-size:12px;line-height:1.3;text-align:center;color:var(--muted);
}
.dg-plaque-stages span{transition:color .2s ease}
.dg-plaque-stages span.is-on{color:var(--navy);font-weight:600}
.dg-plaque .dg-note{text-align:center;max-width:62ch;margin-inline:auto}
@media (prefers-reduced-motion:reduce){.dg-plaque .diagram-stage img,.dg-plaque-stages span{transition:none}}
/* 08: stents, stepped through with the round buttons, inside section 6 */
#diagram-stents{margin:20px 0 22px}
#diagram-stents h3{margin-bottom:6px}
.diagram-stage--stents{aspect-ratio:1200/360;max-width:none}
.diagram-foot #diagram-stents .dg-step-text{color:var(--muted)}
/* ---------------- chemistry diagrams (topic_diagrams/_chem.py; drawn in code, no artwork) ---------------- */
.dg-intro{margin-top:34px;color:var(--ink);font-size:1.02rem;max-width:68ch}
.diagram-head ol{margin-top:6px;padding-left:1.4em;color:var(--muted);font-size:.98rem;max-width:68ch}
.diagram-head ol li+li{margin-top:4px}
.diagram-head .dg-tablewrap+p,.diagram-head ul+p,.diagram-head ol+p{margin-top:14px}
.dg-chem-stage{position:relative;width:100%;margin:12px auto 0}
.dg-chem-stage svg,.dg-chem-fig svg{display:block;width:100%;height:auto;overflow:visible}
.dg-chem-stage--h2{max-width:680px}
.dg-chem-stage--water{max-width:680px}
.dg-chem-stage--chart{max-width:680px}
.dg-chem-svg text{font-family:'Poppins',sans-serif}
.dg-shell{fill:rgba(41,171,226,.07);stroke:var(--navy);stroke-width:2.5}
.dg-sym{font-family:'Nunito',sans-serif!important;font-weight:900;font-size:32px;fill:var(--navy);text-anchor:middle;dominant-baseline:central}
.dg-sym--small{font-size:26px;fill:var(--muted)}
.dg-e--dot{fill:var(--deep)}
.dg-e--cross{fill:none;stroke:var(--red);stroke-width:3.2;stroke-linecap:round}
.dg-nucleus{fill:var(--navy)}
.dg-plus{fill:none;stroke:var(--white);stroke-width:3;stroke-linecap:round}
.dg-cap{font-size:24px;font-weight:600;fill:var(--navy)}
.dg-cap--muted{font-weight:400;fill:var(--muted)}
.dg-lens{fill:rgba(41,171,226,.26)}
.dg-bl{fill:none;stroke:var(--navy);stroke-width:3.5;stroke-linecap:round}
.dg-panel-title{margin-bottom:6px}
/* the key under a dot and cross diagram: a dot, a cross, what each means */
.dg-key-e{width:18px;height:18px;flex:none}
.dg-key--stack{flex-direction:column;align-items:flex-start;gap:8px;max-width:62ch;margin-inline:auto}
.dg-keyrow{display:flex;align-items:flex-start;gap:10px}
.dg-key-line{width:40px;height:16px;flex:none;margin-top:3px}
.dg-steps .dg-key{margin-top:14px;padding-top:0}
/* stage names under a slider (01, 06), the current one in bold */
.dg-stagenames{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:660px;
  margin:6px auto 0;font-size:12.5px;line-height:1.3;text-align:center;color:var(--muted);
}
.dg-stagenames span{transition:color .2s ease}
.dg-stagenames span.is-on{color:var(--navy);font-weight:600}
.dg-slide .dg-slider,.dg-water .dg-slider{width:100%;max-width:660px;margin-inline:auto}
.dg-slide .dg-note,.dg-water>.dg-note{text-align:center;max-width:62ch;margin-inline:auto}
.dg-water .dg-key--stack{text-align:left}
@media (max-width:640px){#diagram-h2 .dg-label text{font-size:36px}#diagram-h2 .dg-cap{font-size:34px}}
/* 02: five atoms' outer shells in a row (three and two on phones) */
.dg-shellrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px}
.dg-shellcell{text-align:center}
.dg-shellcell svg{display:block;width:100%;max-width:150px;height:auto;margin:0 auto;overflow:visible}
.dg-shellname{font-weight:600;color:var(--navy);font-size:.95rem;margin-top:2px}
.dg-shellbonds{color:var(--deep-text);font-weight:600;font-size:.92rem}
.dg-ring{fill:rgba(41,171,226,.18);stroke:var(--sky);stroke-width:3}
@media (max-width:640px){.dg-shellrow{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:16px}
  .dg-shellcell{grid-column:span 2}.dg-shellcell:nth-child(4){grid-column:2 / span 2}}
.dg-armed .dg-ring{opacity:0}
.dg-armed .dg-shellbonds{opacity:0}
.dg-armed.dg-in .dg-ring{animation:dg-pop .45s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--c) * .5s + var(--d))}
.dg-armed.dg-in .dg-shellbonds{animation:dg-fade .35s ease both;
  animation-delay:calc(var(--c) * .5s + 1.2s)}
.dg-ring,.dg-sp,.dg-lp,.dg-pill,.dg-bar{transform-box:fill-box;transform-origin:center}
@keyframes dg-pop{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:none}}
@keyframes dg-fade{from{opacity:0}to{opacity:1}}
@keyframes dg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* 03, 04: a dot and cross diagram beside its displayed formula. When the
   picture is showing, the shared pairs drop in (each with its line in the
   displayed formula), then the lone pairs. Replays each time a molecule is
   shown. js/diagrams-science.js arms [data-reveal] panels; at rest everything shows. */
.dg-chem-pair{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 30px;margin-top:4px}
.dg-chem-fig{text-align:center}
.dg-chem-fig--dc{flex:0 1 360px}
.dg-chem-fig--df{flex:0 1 210px}
.dg-chem-fig--dc svg{height:240px}
.dg-chem-fig--df svg{height:160px}
@media (max-width:640px){.dg-chem-fig--dc{flex-basis:100%}.dg-chem-fig--dc svg{height:210px}.dg-chem-fig--df svg{height:120px}}
[data-reveal].dg-armed .dg-sp,[data-reveal].dg-armed .dg-lp,[data-reveal].dg-armed .dg-lens{opacity:0}
[data-reveal].dg-armed .dg-bl{stroke-dasharray:1 1;stroke-dashoffset:1}
[data-reveal].dg-armed.dg-in .dg-step.is-on .dg-sp{animation:dg-pop .45s cubic-bezier(.34,1.56,.64,1) var(--d) both}
[data-reveal].dg-armed.dg-in .dg-step.is-on .dg-lp{animation:dg-fade .4s ease var(--d) both}
[data-reveal].dg-armed.dg-in .dg-step.is-on .dg-lens{animation:dg-fade .4s ease var(--d) both}
[data-reveal].dg-armed.dg-in .dg-step.is-on .dg-bl{animation:dg-draw .4s ease var(--d) both}
/* 05: ammonia, four ways */
.dg-chem-fig--way{max-width:380px;margin:0 auto}
.dg-chem-fig--way svg{height:250px}
/* the 3D models: dragged to turn, so a finger on them turns the model, not
   the page, and a mouse drag never selects anything */
.dg-m3{position:relative;display:block;width:100%;height:260px;touch-action:none;cursor:grab;
  border-radius:var(--r);background:var(--light);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.dg-m3 canvas,.dg-m3-still{position:absolute;inset:0;width:100%;height:100%}
.dg-m3.is-dragging{cursor:grabbing}
.dg-m3:focus{outline:none}
.dg-m3:not(.by-pointer):focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.dg-m3-stick{stroke:#b3bfd8;stroke-linecap:round}
.dg-m3-ball{stroke:rgba(27,27,78,.28);stroke-width:1.2}
.dg-m3-hint{margin-top:6px}
@media (hover:none){.dg-m3-keys{display:none}}
.dg-step-text.dg-ways{margin-top:4px}
.dg-step-title+.dg-ways{margin-top:8px}
/* 06: water changing state. js/diagrams-science.js moves the molecules and draws the
   dashed intermolecular forces between close ones. */
.dg-box{fill:var(--light);stroke:#dbe6f8;stroke-width:2}
.dg-oatom{fill:var(--red)}
.dg-hatom{fill:var(--white);stroke:var(--navy);stroke-width:2}
.dg-oh{stroke:var(--navy);stroke-width:4;stroke-linecap:round}
.dg-imf{stroke:var(--sky);stroke-width:2.6;stroke-dasharray:5 5;stroke-linecap:round}
/* 07: halogen melting and boiling points. Bars grow up from the melting point,
   then the values, the room-temperature line and the states appear. */
.dg-grid{stroke:#e3ebf9;stroke-width:1.5}
.dg-tick,.dg-axis{font-size:16px;fill:var(--muted)}
.dg-bar{fill:var(--deep)}
.dg-hit{fill:transparent}
.dg-range{cursor:default}
.dg-range:hover .dg-bar{fill:var(--navy)}
.dg-val text{font-size:16px;font-weight:600;fill:var(--ink)}
.dg-xlab{font-family:'Nunito',sans-serif!important;font-weight:900;font-size:24px;fill:var(--navy)}
.dg-xname{font-size:15px;fill:var(--muted)}
.dg-svgsub{font-size:.7em}
.dg-room{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:10 7}
.dg-room--key{stroke-dasharray:7 5}
.dg-pill rect{fill:var(--white);stroke:var(--red);stroke-width:2}
.dg-pill text{font-size:16px;font-weight:600;fill:var(--navy);dominant-baseline:central}
@media (max-width:640px){
  .dg-tick,.dg-axis,.dg-val text{font-size:27px}
  .dg-xlab{font-size:32px}
  .dg-xname{font-size:24px}
  .dg-pill{scale:1.4}
}
.dg-chart .dg-room{transform-box:fill-box;transform-origin:left center}
.dg-chart .dg-bar{transform-origin:50% 100%}
.dg-armed .dg-chart .dg-bar{transform:scaleY(0)}
.dg-armed .dg-chart .dg-val,.dg-armed .dg-chart .dg-pill{opacity:0}
.dg-armed .dg-chart .dg-room{transform:scaleX(0)}
.dg-armed.dg-in .dg-chart .dg-bar{transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1) var(--d)}
.dg-armed.dg-in .dg-chart .dg-val{opacity:1;transition:opacity .3s ease var(--d)}
.dg-armed.dg-in .dg-chart .dg-room{transform:none;transition:transform .7s cubic-bezier(.16,1,.3,1) 1.55s}
.dg-armed.dg-in .dg-chart .dg-pill{animation:dg-pop .45s cubic-bezier(.34,1.56,.64,1) var(--d) both}
/* 7: mistakes and checklist */
.dg-mistakes li b{color:var(--navy)}
.dg-checklist{list-style:none;padding-left:0!important}
.dg-checklist li{position:relative;padding-left:30px}
.dg-checklist li::before{
  content:'';position:absolute;left:2px;top:.2em;width:16px;height:16px;border:2px solid var(--deep);border-radius:5px;
}
.dg-key .dg-key-e .dg-ring{opacity:1;animation:none}
.dg-key-e--pair{width:34px;height:18px}
.dg-key--stack .dg-key-e{margin-top:3px}
/* the triple bond sign (Poppins has none; the browser's stand-in is tiny): three
   lines the height of a capital letter, so the line of text stays the same height */
.dg-triple{display:inline-block;width:1em;height:.72em;vertical-align:0;margin:0 .08em}
.dg-triple path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.dg-stagenames span{transition:none}}

/* ---------------- physics diagrams (topic_diagrams/gcse_phys_*.py; drawn in code, no artwork) ----------------
   Sound and seismic waves. Controls that need JavaScript are [hidden] in the HTML and
   shown by js/diagrams-science.js. The sound (Play) is made by the browser: no audio files. */
.dg-phys-stage{position:relative;width:100%;max-width:720px;margin:12px auto 0}
.dg-phys-stage svg{display:block;width:100%;height:auto;overflow:visible}
.dg-phys-stage--ear{max-width:640px}
.dg-phys-stage--earth{max-width:520px}
.dg-phys-svg text{font-family:'Poppins',sans-serif}
.dg-phys .dg-note{text-align:center;max-width:64ch;margin-inline:auto}
.dg-phys .dg-key--stack{text-align:left}
.dg-controls{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:12px;width:100%}
.dg-controls[hidden]{display:none}
.dg-controls .dg-slider{width:100%;max-width:560px;margin:0;padding-top:4px}
.dg-controls--top{margin-top:8px}
.dg-btnrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.dg-btn{font:600 14px/1 'Poppins',sans-serif;color:var(--navy);background:var(--white);border:2px solid var(--deep);
  border-radius:999px;padding:10px 18px;cursor:pointer;transition:background .2s ease,color .2s ease}
.dg-btn:hover{background:var(--light)}
.dg-btn[aria-pressed="true"],.dg-btn--solid{background:var(--deep);color:var(--white)}
.dg-btn--solid:hover{background:var(--navy);border-color:var(--navy)}
.dg-btn:focus-visible,.dg-seg-btn:focus-visible,.dg-play:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.dg-ctlrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.dg-ctlrow[hidden]{display:none}
.dg-ctl-lab{font-size:13px;font-weight:600;color:var(--muted)}
.dg-seg{display:inline-flex;flex-wrap:wrap;justify-content:center;border:2px solid var(--deep);border-radius:999px;overflow:hidden}
.dg-seg-btn{font:600 13px/1.2 'Poppins',sans-serif;color:var(--navy);background:var(--white);border:0;
  padding:9px 14px;cursor:pointer;transition:background .2s ease,color .2s ease}
.dg-seg-btn+.dg-seg-btn{border-left:2px solid var(--deep)}
.dg-seg-btn:hover{background:var(--light)}
.dg-seg-btn[aria-pressed="true"]{background:var(--deep);color:var(--white)}
.dg-readout{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:10px;font-size:14px;color:var(--muted)}
.dg-readout b{color:var(--navy)}
.dg-working{margin:10px auto 0;max-width:64ch;text-align:center;font-size:14px;color:var(--ink)}
.dg-eq{color:var(--navy)!important;font-weight:600;background:var(--light);border-radius:12px;padding:10px 14px;display:inline-block}
.dg-cap-s{font-size:14px;fill:var(--muted)}
.dg-phys-note:empty{display:none}
.dg-red-t{color:var(--red)}
.dg-tablewrap--mid{margin:12px auto 0;max-width:460px}
.dg-table--readout td{font-variant-numeric:tabular-nums}
/* sound: Play / Stop and the volume */
.dg-audio{width:100%;max-width:560px;margin-top:6px;padding-top:10px;border-top:1px solid #e3ebf9}
.dg-audio[hidden]{display:none}
.dg-audio-warn{font-size:12.5px;color:var(--muted);text-align:center}
.dg-audio-row{display:flex;align-items:center;gap:14px;margin-top:8px}
.dg-play{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 'Poppins',sans-serif;color:var(--white);
  background:var(--deep);border:0;border-radius:999px;padding:10px 18px 10px 14px;cursor:pointer;flex:none;
  transition:background .2s ease}
.dg-play:hover{background:var(--navy)}
.dg-play[aria-pressed="true"]{background:var(--red)}
.dg-play:disabled{background:#b9c3d6;cursor:not-allowed}
.dg-play-i{width:18px;height:18px;fill:currentColor}
.dg-play .dg-i-stop,.dg-play[aria-pressed="true"] .dg-i-play{display:none}
.dg-play[aria-pressed="true"] .dg-i-stop{display:inline}
.dg-vol{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.dg-vol input{flex:1;min-width:0;accent-color:var(--deep);cursor:pointer}
.dg-spk{width:22px;height:22px;flex:none;fill:var(--muted)}
.dg-spk-w{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.dg-audio-note{font-size:13px;color:var(--deep-text);text-align:center;min-height:0;margin-top:6px}
.dg-audio-note:empty{display:none}
/* 01: loudspeaker and air particles */
.dg-air-bg{fill:var(--light)}
.dg-magnet{fill:var(--navy)}
.dg-cone-body{fill:#dcebfb;stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round}
.dg-cone-face{stroke:var(--deep);stroke-width:6;stroke-linecap:round}
.dg-air{fill:var(--deep)}
.dg-redp circle{fill:var(--red)}
.dg-home{stroke:var(--red);stroke-width:1.6;stroke-dasharray:3 3}
.dg-wlab text{font-size:15px;font-weight:600;fill:var(--navy)}
.dg-wlab path{stroke:var(--navy);stroke-width:2;stroke-linecap:round}
/* 02: the oscilloscope */
.dg-scope{fill:var(--navy)}
.dg-scope-grid{stroke:rgba(255,255,255,.13);stroke-width:1}
.dg-scope-axis{stroke:rgba(255,255,255,.3);stroke-width:1.2}
.dg-trace{fill:none;stroke:var(--sky);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.dg-br-line{fill:none;stroke:#fff;stroke-width:2}
.dg-br-dot{fill:#fff}
.dg-br-text{font-size:15px;font-weight:600;fill:#fff}
.dg-scope-lab{font-size:13px;fill:var(--muted)}
.dg-strip-dots{fill:var(--deep)}
/* 03: crossing a boundary */
.dg-med-air{fill:var(--light)}
.dg-med-mat{fill:#cfe8f8;transition:fill .3s ease}
.dg-med-mat[data-mat="wood"]{fill:#f1e2c8}
.dg-med-mat[data-mat="steel"]{fill:#dde2ea}
.dg-boundary{stroke:var(--navy);stroke-width:2.5}
.dg-fronts{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.dg-echo{fill:none;stroke:var(--red);stroke-width:2.5;stroke-dasharray:6 6;opacity:.7}
.dg-med-name{font-family:'Nunito',sans-serif!important;font-weight:900;font-size:19px;fill:var(--navy)}
.dg-clock circle{fill:#fff;stroke:var(--deep);stroke-width:2.5;transition:fill .12s ease}
.dg-clock.is-lit circle{fill:var(--sky)}
.dg-clock text{font-size:12.5px;fill:var(--muted)}
/* 04: the ear (Pngtree picture) and the journey through it */
.dg-sarc{fill:none;stroke:var(--sky);stroke-width:4;stroke-linecap:round}
.dg-src rect{fill:var(--navy)}
.dg-src path{fill:#dcebfb;stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round}
.dg-lead{stroke:var(--muted);stroke-width:1.5}
.dg-chain{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.dg-chain-item{position:relative;border:2px solid #e3ebf9;border-radius:14px;padding:10px 8px;text-align:center;
  transition:border-color .3s ease,background .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.dg-chain-num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--light);
  color:var(--navy);font:900 13px/1 'Nunito',sans-serif}
.dg-chain-name{display:block;font-weight:600;color:var(--navy);font-size:13.5px;line-height:1.3;margin-top:6px}
.dg-chain-what{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 8px}
.dg-chain--air .dg-chain-what{background:#dcebfb;color:var(--navy)}
.dg-chain--solid .dg-chain-what{background:var(--navy);color:#fff}
.dg-chain--liquid .dg-chain-what{background:var(--sky);color:var(--navy)}
.dg-chain--signal .dg-chain-what{background:var(--red);color:#fff}
.dg-chain-item.is-on{border-color:var(--deep);background:var(--light);transform:translateY(-3px)}
.dg-chain-line{min-height:3.2em}
@media (max-width:640px){
  .dg-chain{grid-template-columns:1fr}
  .dg-chain-item{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px}
  .dg-chain-name{margin:0;flex:1}.dg-chain-what{margin:0}
  .dg-chain-item.is-on{transform:translateX(4px)}
}
/* 05: hearing range */
.dg-hr-infra{fill:#e6e9f5}
.dg-hr-human{fill:#cfe8f8}
.dg-hr-best{fill:#8fd3f0}
.dg-hr-ultra{fill:#e3e0f6}
.dg-hr-band{font-family:'Nunito',sans-serif!important;font-weight:900;font-size:17px;fill:var(--navy)}
.dg-hr-sub{font-size:13px;fill:var(--muted)}
.dg-hr-edge{stroke:var(--navy);stroke-width:2;stroke-dasharray:4 4}
.dg-hr-edgel{font-size:13px;font-weight:600;fill:var(--navy)}
.dg-hr-axis,.dg-hr-tick{stroke:var(--muted);stroke-width:1.5}
.dg-hr-tl{font-size:13px;fill:var(--muted)}
.dg-hr-mark path{stroke:var(--red);stroke-width:3}
.dg-hr-mark .dg-hr-tri{fill:var(--red);stroke:none}
/* 06: echoes */
.dg-blk-metal{fill:#dde2ea;stroke:#8e99ad;stroke-width:2}
.dg-blk-t0{fill:#fbe3cf}.dg-blk-t1{fill:#f2bfae}.dg-blk-t2{fill:#e39a8e}.dg-blk-t3{fill:#f2bfae}
.dg-blk-frame{fill:none;stroke:#b0808a;stroke-width:2}
.dg-crack{fill:none;stroke:var(--navy);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.dg-bounds{fill:none;stroke:#8c5b64;stroke-width:1.5;stroke-dasharray:4 4}
.dg-probe rect{fill:var(--navy)}
.dg-probe path{fill:none;stroke:var(--muted);stroke-width:2;opacity:0}
.dg-pk{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dg-pk--out{stroke:var(--deep)}
.dg-pk--back{stroke:var(--red)}
.dg-lane{font-size:13px;fill:var(--muted)}
.dg-blk-lab{font-size:14px;fill:var(--muted)}
.dg-trace--echo{stroke-width:2.5}
.dg-spk-lab{font-size:13px;font-weight:600;fill:#fff}
/* 08: echo sounding */
.dg-chart-bg{fill:var(--light)}
.dg-cgrid{stroke:#dbe6f8;stroke-width:1}
.dg-ctick{font-size:12px;fill:var(--muted)}
.dg-ctitle{font-size:13px;fill:var(--muted)}
.dg-chart-line{fill:none;stroke:var(--deep);stroke-width:2.5;stroke-linejoin:round}
.dg-sea{fill:#cfe8f8}
.dg-bed{fill:#d9c6a5;stroke:#a88e62;stroke-width:2}
.dg-ship{cursor:grab}
.dg-hull{fill:var(--navy)}
.dg-cabin{fill:#fff;stroke:var(--navy);stroke-width:2.5}
.dg-sonar{fill:var(--red)}
.dg-ping{fill:none;stroke-width:3;stroke-linecap:round}
.dg-ping--down{stroke:var(--deep)}
.dg-ping--up{stroke:var(--red)}
.dg-pingline{stroke:var(--navy);stroke-width:1.5;stroke-dasharray:3 5;opacity:.5}
/* 09: seismic waves */
.dg-mantle{fill:#fde6cf}
.dg-ocore{fill:#fbbf86}
.dg-icore{fill:#f08f4f}
.dg-crust{fill:none;stroke:#8a6a4c;stroke-width:5}
.dg-layer{font-size:14px;font-weight:600;fill:#6b4424}
.dg-layer--s{font-weight:400}
.dg-ray{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dg-ray--p{stroke:var(--deep)}
.dg-ray--s{stroke:var(--red);stroke-dasharray:7 5}
.dg-stopx{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round}
.dg-seis{stroke:var(--navy);stroke-width:1.5}
.dg-seis--ps{fill:#2fb36a}
.dg-seis--p{fill:#a7e3bf}
.dg-seis--none{fill:#fff}
.dg-shz{fill:none;stroke-width:5;stroke-linecap:round}
.dg-shz--p{stroke:var(--deep);opacity:.45}
.dg-shz--s{stroke:var(--red);opacity:.3}
.dg-epi path{fill:var(--red);stroke:#fff;stroke-width:1.5}
.dg-hitring{fill:none;stroke:transparent;stroke-width:34;cursor:pointer;pointer-events:stroke}
.dg-quake[data-wave="p"] .dg-rays-s,.dg-quake[data-wave="p"] .dg-shz--s{display:none}
.dg-quake[data-wave="s"] .dg-rays-p,.dg-quake[data-wave="s"] .dg-shz--p{display:none}
.dg-keyrow[hidden]{display:none}
@media (max-width:640px){
  .dg-phys-svg text{font-size:19px}
  .dg-seg-btn{padding:9px 11px}
}
@media (prefers-reduced-motion:reduce){
  .dg-chain-item,.dg-clock circle,.dg-med-mat{transition:none}
}
.dg-lead-dot{fill:var(--muted)}
.dg-chart-dot{fill:var(--red);stroke:#fff;stroke-width:2}
.dg-layer{paint-order:stroke;stroke:#fde6cf;stroke-width:5px;stroke-linejoin:round}
.dg-scope-hint{font-size:14px}
.dg-ctitle{paint-order:stroke;stroke:var(--light);stroke-width:4px}
.dg-key-line .dg-shz{stroke-width:5}
@media (max-width:640px){
  .dg-seg--wide{flex-direction:column;border-radius:16px;width:100%;max-width:320px}
  .dg-seg--wide .dg-seg-btn+.dg-seg-btn{border-left:0;border-top:2px solid var(--deep)}
}


/* ---------------- maths: gradient and intercept (topic_diagrams/gcse_gradient_and_intercept.py,
   graphs drawn by topic_diagrams/_graphs.py, interactions in js/gcse_gradient_and_intercept.js) ---------------- */
/* anything that only works with JavaScript stays hidden until the lesson's js/ file shows it */
[data-ga-js][hidden]{display:none!important}
/* the drag-the-points graphs' starting points, drawn at rest, look like the points you drag */
.gr-pt--start{fill:var(--sky);stroke:var(--navy)}
/* key terms in bold; blue for gradient, red for the y-intercept */
.hl{font-weight:700;color:var(--navy)}
.tm{color:var(--deep-text);font-weight:700}
.tc{color:#b3122f;font-weight:700}
.ga-colours{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:.92rem;color:var(--ink);max-width:68ch}
.ga-chip{display:inline-flex;align-items:center;gap:8px}
.ga-chip::before{content:"";width:22px;height:5px;border-radius:3px;background:var(--deep)}
.ga-chip--c::before{background:var(--red)}

/* the one-line key idea at the top of each section */
.ga-key{background:var(--white);border:1px solid #d6e6fb;border-left:6px solid var(--sky);border-radius:14px;
        padding:12px 16px;margin-top:14px;max-width:68ch;color:var(--navy);font-size:1.02rem}
.ga-lab{display:block;font:800 .72rem/1.2 'Nunito',sans-serif;letter-spacing:.08em;text-transform:uppercase;
        color:var(--deep-text);margin-bottom:4px}
.ga-warn{background:#fff3f5;border-left:6px solid var(--red);border-radius:14px;padding:12px 16px;
         margin-top:14px;max-width:68ch;color:var(--ink);font-size:.96rem}
.ga-warn .ga-lab{color:#b3122f}
.diagram-head .ga-lead{color:var(--ink)}
.diagram-head ul.ga-list{color:var(--ink)}

/* worked examples: numbered steps, words then maths */
.ga-ex{background:var(--light);border-radius:var(--r);padding:18px 20px;margin-top:18px;max-width:68ch}
.ga-ex h3{font-size:1.02rem;color:var(--navy)}
.ga-q{margin-top:6px;color:var(--ink);font-weight:600}
.ga-ex svg{display:block;width:100%;max-width:340px;height:auto;margin:12px auto 0}
.diagram-head .ga-steps{list-style:none;padding:0;margin:8px 0 0;counter-reset:s;color:var(--ink);max-width:none}
.diagram-head .ga-steps>li{display:grid;grid-template-columns:28px 1fr;column-gap:12px;margin-top:12px}
.diagram-head .ga-steps>li::before{counter-increment:s;content:counter(s);grid-row:1 / span 5;width:26px;height:26px;
  border-radius:50%;background:var(--deep);color:#fff;font:700 13px/26px 'Poppins',sans-serif;text-align:center}
.ga-say{font-weight:600;color:var(--navy);font-size:.96rem}
.ga-math{font-size:1.06rem;color:var(--ink);margin-top:3px;line-height:1.7}
.ga-note{font-size:.9rem;color:var(--muted);margin-top:2px}
.ga-answer{display:inline-block;background:var(--white);border:2px solid var(--deep);border-radius:14px;
           padding:8px 14px;margin-top:14px;font-weight:700;color:var(--navy)}
.ga-answer .ga-lab{display:inline;margin:0 8px 0 0}
.ga-check-line{margin-top:10px;font-size:.93rem;color:var(--ink)}
.ga-check-line::before{content:"\2713  ";color:#1d7a3a;font-weight:700}
.ga-method{border:2px solid var(--sky);border-radius:var(--r);padding:16px 20px;margin-top:14px;max-width:68ch;background:var(--white)}
.ga-method h3{font-size:1rem;color:var(--navy)}
.diagram-head .ga-formula{font:800 1.2rem/1.4 'Nunito',sans-serif;color:var(--navy);margin-top:12px}
.ga-ex .dg-tablewrap{max-width:none}
.diagram-head .dg-table td:first-child{white-space:nowrap}
.ga-ex .dg-table td,.ga-ex .dg-table th{font-size:.92rem}

/* fractions: stacked, so 3/2 reads the way it is written in an exam */
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;
    font-size:.82em;line-height:1.12;margin:0 .12em}
.fr>span:first-child{border-bottom:1.5px solid currentColor;padding:0 .18em}

/* the graphs */
.ga-stage{width:100%;max-width:500px;margin:12px auto 0}
.ga-stage svg{display:block;width:100%;height:auto}
.dg-btnrow[hidden]{display:none}
.gr-grid{stroke:#dde7f6;stroke-width:1}
.gr-grid--major{stroke:#c9d9f2}
.gr-axis{stroke:var(--navy);stroke-width:2}
.gr-num{font:500 14px 'Poppins',sans-serif;fill:var(--muted)}
.gr-axlab{font:600 15px 'Poppins',sans-serif;fill:var(--navy)}
.gr-line{stroke:var(--navy);stroke-width:3.5;fill:none;stroke-linecap:round}
.gr-line--b{stroke:var(--deep)}
.gr-line--target{stroke:var(--sky);stroke-width:9;opacity:.45}
.gr-run,.gr-rise{stroke:var(--deep);stroke-width:3.5;fill:none;stroke-dasharray:9 6}
.gr-pt{fill:var(--white);stroke:var(--navy);stroke-width:3}
.gr-pt--c{fill:var(--red);stroke:var(--white);stroke-width:2.5}
.gr-pt--x{fill:var(--navy);stroke:var(--white);stroke-width:2.5}
.gr-lab{font:600 15px 'Poppins',sans-serif;fill:var(--navy);stroke:#fff;stroke-width:5px;
        stroke-linejoin:round;paint-order:stroke}
.gr-lab--run,.gr-lab--rise{fill:var(--deep-text)}
.gr-lab--c{fill:#b3122f}
.gr-handle{cursor:grab;touch-action:none;outline:none}
.gr-handle:active{cursor:grabbing}
.gr-hit{fill:transparent}
.gr-handle .gr-pt{fill:var(--sky);stroke:var(--navy)}
.gr-handle:focus-visible .gr-pt{stroke:var(--red);stroke-width:5}

.ga-bigeq{font:900 1.7rem/72px 'Nunito',sans-serif;color:var(--navy);text-align:center;margin-top:10px;height:72px;white-space:nowrap}
.ga-bigeq--pair{font-size:1.25rem;line-height:52px;height:104px}
.ga-bigeq .em-m{color:var(--deep-text)}
.ga-bigeq .em-c{color:var(--red)}
.em-m{color:var(--deep-text)}
.em-c{color:#b3122f}
.ga-sliders{width:100%;max-width:520px;margin:10px auto 0;display:grid;gap:4px}
.ga-sliders .dg-slider{margin:0;padding-top:0;display:grid;grid-template-columns:9.5em 1fr 3.2em;align-items:center;height:44px}
/* a stacked fraction must never make a line taller: every text line in the interactives has a
   fixed height, and a fraction's negative margins keep it inside that height */
.ga-sliders output{line-height:44px;height:44px}
.ga-sliders .fr,.ga-read .fr{margin-block:-.6em}
.ga-read p{line-height:30px}
.ga-work .ga-wl{line-height:30px}
/* each readout keeps the height of its longest message (measured), so the page below never moves */
#g-rise-read{min-height:138px} #g-eq-read{min-height:290px}
#g-mc-read{min-height:82px} #g-par-read{min-height:82px}
@media (max-width:639px){#g-rise-read{min-height:198px} #g-eq-read{min-height:320px}
  #g-mc-read{min-height:126px} #g-par-read{min-height:142px}}
.ga-sliders output{text-align:right;font-size:15px}
.ga-read{margin:12px auto 0;max-width:60ch;font-size:14.5px;color:var(--ink);text-align:center}
.ga-read p+p{margin-top:6px}
.ga-read b{color:var(--navy)}
.ga-read .ok{color:#1d7a3a;font-weight:600}
.ga-work{display:inline-block;text-align:left}
.ga-work .ga-ws{font-weight:700;color:var(--navy);margin-top:10px}
.ga-work .ga-ws:first-child{margin-top:0}
.ga-work .ga-wl{padding-left:1.2em}
.ga-try{margin:14px auto 0;max-width:60ch;font-size:13.5px;color:var(--muted);border-top:1px solid #e3ebf9;padding-top:12px}
.ga-try ul{margin-top:4px;padding-left:1.2em}
.ga-try li+li{margin-top:3px}
.ga-win{background:#e7f6ec;color:#1d5c30;border-radius:12px;padding:8px 12px;display:inline-block;font-weight:600}
.ga-mis ol{margin-top:6px;padding-left:1.4em;color:var(--ink);max-width:68ch}
.ga-mis li+li{margin-top:12px}
.ga-fix{display:block;margin-top:2px;color:var(--ink)}
.ga-fix::before{content:"Instead: ";font-weight:700;color:#1d7a3a}
.ga-check ul{margin-top:6px;padding-left:1.3em;color:var(--ink);max-width:68ch}
.ga-check li+li{margin-top:6px}

/* ---------------- maths 11+: place value (topic_diagrams/eleven_plus_place_value_and_column_mechanics.py,
   interactions in js/eleven_plus_place_value_and_column_mechanics.js). Red: millions, blue: thousands, navy: ones. ---------------- */
.plv-chip--m::before{background:var(--red)}
.plv-chip--th::before{background:var(--deep)}
.plv-chip--o::before{background:var(--navy)}
.plv-n--m{color:#b3122f}
.plv-n--th{color:var(--deep-text)}
.plv-n--o{color:var(--navy)}
.plv-sel{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:7px;text-decoration-color:var(--sky)}
.plv-big,.diagram-head .plv-big{font:900 2.3rem/1.25 'Nunito',sans-serif;text-align:center;margin:14px auto 0;color:var(--navy);
  font-variant-numeric:tabular-nums;max-width:none}
.diagram-head .plv-big--ex{font-size:1.9rem;margin-top:8px}
.plv-words{text-align:center;color:var(--ink);font-size:1rem;margin-top:4px;min-height:1.5em}
.plv-expand{color:var(--muted);font-size:13.5px}
.plv-fun{background:var(--light);border-left:6px solid var(--deep);border-radius:14px;padding:12px 16px;margin-top:16px;
  max-width:68ch;color:var(--ink);font-size:.98rem}

/* the place value chart */
.plv-chart{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;width:100%;max-width:580px;margin:16px auto 0}
.plv-chart--ex{max-width:calc(var(--n) * 76px)}
.plv-g{text-align:center;font:700 12px/1.2 'Poppins',sans-serif;color:var(--white);padding:6px 2px;border-radius:10px 10px 0 0;
  overflow:hidden;white-space:nowrap}
.plv-g--m{background:var(--red)}
.plv-g--th{background:var(--deep)}
.plv-g--o{background:var(--navy)}
.plv-h{text-align:center;font:700 13px/1 'Poppins',sans-serif;padding:7px 0;color:var(--navy);border-radius:6px}
.plv-h--m{background:#fdecef}
.plv-h--th{background:#e6f0fc}
.plv-h--o{background:#e9eaf3}
.plv-h abbr{text-decoration:none;cursor:help}
.plv-d{display:grid;place-items:center;height:66px;border:2px solid #d6e6fb;border-radius:12px;background:var(--white);
  font:900 2.1rem/1 'Nunito',sans-serif;padding:0;overflow:visible;transition:background .2s ease,border-color .2s ease}
button.plv-d{cursor:pointer}
.plv-d--m{color:#b3122f}
.plv-d--th{color:var(--deep-text)}
.plv-d--o{color:var(--navy)}
.plv-d--empty{background:#f6f8fc;border-style:dashed}
.plv-d--sel{border-color:var(--sky);box-shadow:0 0 0 3px rgba(41,171,226,.35)}
.plv-d--hot{background:#e8f6fd;border-color:var(--sky)}
.plv-d--ph .plv-dg{opacity:.5}
.plv-d--over{border-color:var(--sky);background:#e8f6fd;border-style:solid}
.plv-d--good{border-color:#1d7a3a;background:#e7f6ec;border-style:solid}
.plv-d--bad{border-color:var(--red);background:#fff3f5;border-style:solid}
.plv-d:focus-visible,.plv-arrow:focus-visible,.plv-tile:focus-visible,.plv-gap:focus-visible,.plv-mv:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.plv-dg{display:inline-block}
.plv-arrow{height:34px;border:0;border-radius:10px;background:var(--light);color:var(--deep-text);font-size:13px;cursor:pointer;padding:0}
.plv-arrow:hover{background:#dcebfd}
@keyframes plv-pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.25);opacity:1}100%{transform:scale(1)}}
.plv-pop{animation:plv-pop .45s ease-out}
@media (prefers-reduced-motion:reduce){.plv-pop{animation:none}}
.ga-sliders .plv-slider{grid-template-columns:7em 1fr}

/* put the commas in */
.plv-commas{display:flex;justify-content:center;align-items:stretch;margin-top:16px;font:900 2.5rem/1.3 'Nunito',sans-serif;color:var(--navy)}
.plv-cd{min-width:.6em;text-align:center}
.plv-gap{width:22px;border:0;background:transparent;border-bottom:3px dotted #b9cdee;margin:0 2px;padding:0;cursor:pointer;
  font:900 2.5rem/1.3 'Nunito',sans-serif;color:var(--red)}
.plv-gap:hover{background:var(--light);border-radius:6px}
.plv-gap--on{border-bottom-color:transparent}
.plv-gap--bad{background:#fff3f5;border-radius:6px;box-shadow:inset 0 0 0 2px var(--red)}

/* drag the digits */
.plv-prompt{text-align:center;font-size:1.08rem;color:var(--ink);margin-top:10px;min-height:3em}
.plv-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.plv-tile{width:48px;height:54px;border-radius:12px;border:2px solid var(--deep);background:var(--white);
  font:900 1.6rem/1 'Nunito',sans-serif;color:var(--navy);cursor:grab;touch-action:none;padding:0}
.plv-tile:hover{background:var(--light)}
.plv-tile[aria-pressed="true"]{background:var(--deep);color:var(--white)}
.plv-ghost{position:fixed;z-index:400;pointer-events:none;transform:translate(-50%,-60%);width:54px;height:58px;display:grid;
  place-items:center;border-radius:12px;background:var(--deep);color:var(--white);font:900 1.9rem/1 'Nunito',sans-serif;
  box-shadow:0 10px 24px rgba(27,27,78,.3)}

/* which is bigger? */
.plv-cmp{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;
  font:900 1.9rem/1.2 'Nunito',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.plv-cmp-sym{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;border:2px dashed #b9cdee;color:var(--muted)}
.plv-cmp-sym.plv-ok{border:2px solid #1d7a3a;background:#e7f6ec;color:#1d5c30}
.plv-cmp-sym.plv-bad{border:2px solid var(--red);background:#fff3f5;color:#b3122f}
.plv-symbtn,.plv-symchoice{font:900 1.6rem/1 'Nunito',sans-serif;min-width:70px}
.plv-sym{font-family:'Nunito',sans-serif;font-weight:900;font-size:1.15em;color:var(--navy)}
.plv-stack{margin:16px auto 0;width:100%;max-width:440px}
.plv-stack[hidden]{display:none}
.plv-stack-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px}
.plv-sd{display:grid;place-items:center;height:42px;border-radius:8px;background:var(--white);border:1px solid #e3ebf9;
  font:900 1.35rem/1 'Nunito',sans-serif;color:var(--navy)}
.plv-sd.plv-same{background:#eef1f6;color:#8590a8}
.plv-sd.plv-diff{background:#e8f6fd;border:2px solid var(--sky)}
.plv-sd.plv-later{color:#c3cbe0}
.plv-score{text-align:center;font-size:13px;color:var(--muted);margin-top:8px;min-height:1.4em}

/* put them in order */
.plv-order{list-style:none;padding:0;margin:16px auto 0;max-width:360px;display:grid;gap:8px}
.plv-card{display:flex;align-items:center;gap:10px;background:var(--white);border:2px solid #d6e6fb;border-radius:14px;
  padding:8px 10px 8px 14px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;position:relative}
.plv-card--drag{z-index:2;box-shadow:0 10px 24px rgba(27,27,78,.2);border-color:var(--sky);cursor:grabbing}
.plv-card--good{border-color:#1d7a3a;background:#e7f6ec}
.plv-card--bad{border-color:var(--red);background:#fff3f5}
.plv-card-grip{color:#b9cdee;letter-spacing:-3px}
.plv-card-n{flex:1;font:900 1.45rem/1 'Nunito',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.plv-card-btns{display:flex;gap:6px}
.plv-mv{width:38px;height:38px;border-radius:10px;border:0;background:var(--light);color:var(--deep-text);cursor:pointer;padding:0}
.plv-mv:hover{background:#dcebfd}

/* the machine and which button? */
.plv-ops{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:8px;margin-top:16px}
.plv-ops .dg-btn{min-width:96px}
.plv-ops .dg-btn.plv-ok,.plv-choice.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
.plv-ops .dg-btn.plv-bad,.plv-choice.plv-bad{background:#fff3f5;border-color:var(--red);color:#b3122f}
.plv-ops .dg-btn:disabled,.plv-choice:disabled{cursor:default}
.plv-ops .dg-btn:disabled:not(.plv-ok):not(.plv-bad),.plv-choice:disabled:not(.plv-ok):not(.plv-bad){opacity:.55}
.plv-which{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;
  font:900 1.9rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.plv-to{color:var(--sky)}

/* the quiz */
.plv-q{text-align:center;font-size:1.08rem;color:var(--ink);margin-top:18px;min-height:3.2em}
.plv-box{display:inline-block;width:1.1em;height:1.1em;border:2px solid var(--navy);border-radius:4px;vertical-align:-.2em;margin:0 .15em}
.plv-u{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;color:#b3122f}
.plv-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:580px;margin:12px auto 0}
.plv-choice{line-height:1.35;padding:12px 14px;border-radius:14px}

/* the checklist */
.plv-check ul{list-style:none;padding-left:0}
.plv-check label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.plv-check input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--deep)}
.plv-done{margin-top:14px;background:#e7f6ec;color:#1d5c30;border-radius:12px;padding:10px 14px;display:inline-block;font-weight:600}
.plv-done[hidden]{display:none}

#plv-build-read{min-height:84px}
@media (max-width:560px){
  .plv-g{font-size:9.5px;padding:5px 0;letter-spacing:-.01em}
  .plv-h{font-size:11px}
  .plv-d{height:54px;font-size:1.65rem}
  .plv-big,.diagram-head .plv-big{font-size:1.9rem}
  .plv-commas,.plv-gap{font-size:1.9rem}
  .plv-gap{width:18px}
  .plv-ops{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plv-ops .dg-btn{min-width:0;padding:10px 6px}
  .plv-choices{grid-template-columns:1fr}
  .plv-cmp,.plv-which{font-size:1.6rem}
}

/* the number display (11+ place value, section 5): a calculator with a screen and keypad */
.plv-calc-words{text-align:center;font:800 1.15rem/1.35 'Nunito',sans-serif;color:var(--navy);min-height:2.7em;margin-top:12px;
  display:flex;align-items:center;justify-content:center}
.plv-calc{display:flex;gap:16px;align-items:stretch;justify-content:center;background:var(--navy);border-radius:24px;
  padding:16px;margin:10px auto 0;width:100%;max-width:660px}
.plv-calc-screen{flex:1;min-width:0;background:var(--light);border-radius:14px;box-shadow:inset 0 3px 10px rgba(27,27,78,.28);
  display:flex;align-items:center;justify-content:center;padding:16px 8px 10px;min-height:136px;touch-action:none}
.plv-c-dig{display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:4px 1px;border-radius:10px;
  cursor:grab;touch-action:none}
.plv-c-num{display:block;font:900 2.7rem/1 'Nunito',sans-serif}
.plv-c-lab{display:block;font:700 11px/1 'Poppins',sans-serif;margin-top:8px;opacity:.85}
.plv-c-comma{display:flex;flex-direction:column;align-items:center;font:900 2.7rem/1 'Nunito',sans-serif;color:var(--navy);padding:4px 0}
.plv-c-dig--sel{background:var(--white);box-shadow:0 0 0 3px var(--sky)}
.plv-c-dig--lead{opacity:.4}
.plv-c-dig--moving{opacity:.25}
.plv-c-dig:focus-visible,.plv-slot:focus-visible,.plv-key:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.plv-slot{width:12px;align-self:stretch;border:0;background:none;padding:0;position:relative;cursor:pointer}
.plv-slot:disabled{cursor:default}
.plv-slot::after{content:"";position:absolute;left:50%;top:6%;bottom:28%;width:4px;margin-left:-2px;border-radius:2px;
  background:var(--red);opacity:0;transition:opacity .12s ease}
.plv-calc--armed .plv-slot::after{opacity:.22}
.plv-calc--armed .plv-slot:hover::after,.plv-slot.plv-slot--on::after{opacity:1}
.plv-calc-keys{display:grid;grid-template-columns:repeat(3,54px);grid-auto-rows:54px;gap:8px;align-content:center}
.plv-key{border:0;border-radius:12px;background:var(--white);color:var(--navy);font:900 1.55rem/1 'Nunito',sans-serif;
  cursor:grab;touch-action:none;box-shadow:0 3px 0 #9fb7e0;padding:0}
.plv-key:hover{background:#e8f1fd}
.plv-key[aria-pressed="true"]{background:var(--sky);color:var(--white)}
.plv-key--wide{grid-column:span 2}
.plv-key--del{background:var(--red);color:var(--white);font:600 15px/1 'Poppins',sans-serif;cursor:pointer;box-shadow:0 3px 0 #a3142f}
.plv-key--del:hover{background:#c91f3d}
.plv-ghost--out{background:var(--red);opacity:.85}
@media (max-width:560px){
  .plv-calc{flex-direction:column;align-items:center;padding:12px}
  .plv-calc-screen{width:100%;min-height:112px;padding:12px 4px 8px}
  .plv-c-num,.plv-c-comma{font-size:2.05rem}
  .plv-c-lab{font-size:9.5px}
  .plv-slot{width:8px}
  .plv-calc-words{font-size:1rem}
}

/* ---------------- maths 11+: decimal place value (topic_diagrams/eleven_plus_decimal_place_value.py,
   interactions in js/eleven_plus_decimal_place_value.js; the charts reuse the plv- classes above).
   Navy: whole numbers. Blue: decimals. Red: the decimal point. ---------------- */
.pld-chip--d::before{background:var(--deep)}
.pld-chip--pt::before{width:11px;height:11px;border-radius:50%;background:var(--red)}
.pld-g--o{background:var(--navy)}
.pld-g--d{background:var(--deep)}
.pld-h--o{background:#e9eaf3}
.pld-h--d{background:#e6f0fc}
.pld-d--o{color:var(--navy)}
.pld-d--d{color:var(--deep-text)}
.pld-n--d{color:var(--deep-text)}
.pld-dot{color:var(--red)}
/* the decimal point sits in the gap after the ones column */
.plv-d.pld-pt{position:relative}
.plv-d.pld-pt::after{content:"";position:absolute;right:-7px;bottom:11px;width:10px;height:10px;border-radius:50%;
  background:var(--red);z-index:1}

/* the hundred square: each column is one tenth, in alternating blues so the tenths are easy to count */
.pld-sqnote{text-align:center;color:var(--ink);font-size:.95rem;margin-top:8px}
.diagram-panel .pld-sqnote{max-width:none}
.pld-sqwrap{width:100%;max-width:290px;margin:12px auto 0}
.pld-square{display:block;width:100%;height:auto}
.pld-sq{fill:var(--white);stroke:#c9d9f2;stroke-width:1;cursor:pointer;transition:fill .15s ease}
.pld-sq:hover{fill:#e8f1fd}
.pld-sq--on{fill:var(--sky)}
.pld-sq--on.pld-sq--alt{fill:var(--deep)}

/* the number display: the decimal point as a token you can drag */
.pld-c-pt{display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:4px 1px;border-radius:10px;
  cursor:grab;touch-action:none}
.pld-c-dot{color:var(--red);transform:scale(1.7);transform-origin:50% 85%}
.pld-c-pt:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pld-key--pt{color:var(--red);font-size:2.2rem;line-height:.6}
.plv-ghost.pld-ghost--pt{width:24px;height:24px;border-radius:50%;background:var(--red)}

/* tap a zero */
.pld-zero{display:flex;justify-content:center;align-items:flex-end;gap:3px;margin-top:16px;min-height:1.4em;
  font:900 2.9rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.pld-z{font:inherit;color:var(--deep-text);background:var(--light);border:2px dashed var(--sky);border-radius:10px;
  padding:0 6px;cursor:pointer;line-height:1.1}
.pld-z:hover{background:#dcebfd}
.pld-z:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pld-zc--pt{color:var(--red)}

/* which is bigger: the point column, and the zeros added to fill the gaps */
.plv-sd.pld-sd-pt{background:none;border:0;color:var(--red)}
.plv-sd.pld-pad{color:var(--sky);font-style:italic}
@media (max-width:560px){
  .pld-zero{font-size:2.3rem}
}

/* ---------------- maths 11+: rounding (topic_diagrams/eleven_plus_rounding_strategies.py,
   interactions in js/eleven_plus_rounding_strategies.js). The decider digit is red; the column
   you round to is blue. ---------------- */
.plr-task{text-align:center;font-size:1.08rem;color:var(--ink);margin-top:12px}
.plr-modes .dg-seg-btn{padding:9px 12px}
/* the hill */
.plr-hillwrap{width:100%;max-width:620px;margin:6px auto 0}
.plr-hill{display:block;width:100%;height:auto;overflow:visible}
.plr-side--down{fill:#eef4fd}
.plr-side--up{fill:#e3f4fc}
.plr-sidelab{font:600 13px 'Poppins',sans-serif;fill:var(--muted);text-anchor:middle}
.plr-hill-line{fill:none;stroke:var(--navy);stroke-width:3.5;stroke-linejoin:round}
.plr-ground{stroke:var(--navy);stroke-width:2}
.plr-mid{stroke:var(--red);stroke-width:2;stroke-dasharray:6 5}
.plr-midlab{font:700 14px 'Poppins',sans-serif;fill:#b3122f;text-anchor:middle}
.plr-foot{fill:var(--navy)}
.plr-end{font:900 22px 'Nunito',sans-serif;fill:var(--navy);text-anchor:middle}
.plr-ball{cursor:grab;touch-action:none;outline:none}
.plr-ball:active{cursor:grabbing}
.plr-ball-hit{fill:transparent}
.plr-ball-c{fill:var(--sky);stroke:var(--navy);stroke-width:3}
.plr-ball:focus-visible .plr-ball-c{stroke:var(--red);stroke-width:5}
.plr-ball-lab{font:900 18px 'Nunito',sans-serif;fill:var(--navy);text-anchor:middle;stroke:#fff;stroke-width:5px;
  paint-order:stroke;stroke-linejoin:round}
.plr-ball--done .plr-ball-c{fill:#1d7a3a}
.plr-ball--done .plr-ball-lab{fill:#1d5c30}
/* the decider digit */
.plr-exnum,.plr-digits{font:900 2.4rem/1.3 'Nunito',sans-serif;color:var(--navy);letter-spacing:.04em;margin-top:8px}
.diagram-head .plr-exnum{font-size:1.9rem;margin-top:6px;color:var(--navy)}
.plr-digits{text-align:center;font-size:2.8rem;margin-top:12px}
.plr-rd{color:var(--deep-text);border-bottom:4px solid var(--deep);padding:0 1px}
.plr-dd{color:#b3122f;background:#fff0f3;border-radius:6px;padding:0 3px;box-shadow:inset 0 0 0 2px var(--red)}
.ga-read .plr-rd,.ga-read .plr-dd{font-weight:800}
.plr-gone{color:#c3cbe0}
.plr-result{text-align:center;font:900 1.7rem/1.4 'Nunito',sans-serif;color:var(--navy);margin-top:8px;min-height:1.4em}
#plr-dec-choose[hidden],#plr-dec-next-row[hidden]{display:none}
/* round once */
.plr-twoways{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.plr-way{border-radius:12px;padding:10px 14px;font-size:1rem;color:var(--ink);background:var(--white)}
.plr-way--bad{border:2px solid var(--red)}
.plr-way--bad .ga-lab{color:#b3122f}
.plr-way--good{border:2px solid #1d7a3a}
.plr-way--good .ga-lab{color:#1d7a3a}
@media (max-width:560px){.plr-twoways{grid-template-columns:1fr}}
/* sort the cards */
.plr-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:64px;margin-top:14px;padding:10px;
  border:2px dashed #c9d9f2;border-radius:14px}
.plr-boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;width:100%}
.plr-box{border:2px solid var(--deep);border-radius:14px;background:var(--light);padding:8px;min-height:130px;
  display:flex;flex-direction:column;align-items:center;cursor:pointer}
.plr-box-lab{font-size:13px;color:var(--ink);text-align:center}
.plr-box-lab b{display:block;font:900 1.4rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.plr-box-body{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px;width:100%}
.plr-over{background:#dff1fb;border-color:var(--sky)}
.plr-card{font:900 1.25rem/1 'Nunito',sans-serif;color:var(--navy);background:var(--white);border:2px solid #b9cdee;
  border-radius:12px;padding:10px 14px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.plr-card[aria-pressed="true"]{border-color:var(--deep);box-shadow:0 0 0 3px rgba(41,171,226,.35)}
.plr-card:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.plr-card--moving{opacity:.3}
.plr-card--ghost{position:fixed;z-index:400;pointer-events:none;transform:translate(-50%,-60%);
  box-shadow:0 10px 24px rgba(27,27,78,.25);border-color:var(--deep)}
.plr-card--good{border-color:#1d7a3a;background:#e7f6ec}
.plr-card--bad{border-color:var(--red);background:#fff3f5}
@media (max-width:560px){
  .plr-boxes{gap:6px}
  .plr-box{padding:6px 4px}
  .plr-card{font-size:1.05rem;padding:8px 8px}
  .plr-digits{font-size:2.2rem}
}
/* what could it be? */
.plr-lineWrap{width:100%;max-width:640px;margin:10px auto 0}
.plr-line{display:block;width:100%;height:auto;overflow:visible}
.plr-axis{stroke:var(--navy);stroke-width:2.5}
.plr-tick{stroke:var(--navy);stroke-width:2}
.plr-tick--t{stroke:var(--deep);stroke-width:3}
.plr-ticklab{font:600 14px 'Poppins',sans-serif;fill:var(--muted);text-anchor:middle}
.plr-ticklab--t{font:900 17px 'Nunito',sans-serif;fill:var(--navy)}
.plr-band{fill:var(--deep);opacity:.85}
.plr-band-ok{fill:none;stroke:#1d7a3a;stroke-width:3;stroke-dasharray:6 4;rx:8}
.plr-dot{fill:var(--white);stroke:var(--navy);stroke-width:3}
.plr-pickers{display:grid;grid-template-columns:1fr;gap:10px;margin:12px auto 0;max-width:560px;width:100%}
.plr-pick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.plr-pick-lab{font-weight:700;color:var(--navy);min-width:5.5em;text-align:right}
.plr-pick-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}
.plr-step{padding:8px 10px;font-size:13px;min-width:44px}
.plr-val{width:7.5em;text-align:center;font:900 1.25rem/1 'Nunito',sans-serif;color:var(--navy);padding:8px 6px;
  border:2px solid var(--deep);border-radius:12px;background:var(--white)}
.plr-val:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
@media (max-width:560px){
  /* the six "round to" buttons: a tidy 3 x 2 grid instead of a broken pill */
  .plr-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:14px;width:100%;max-width:340px}
  .plr-modes .dg-seg-btn{border-left:0;padding:9px 4px}
  .plr-modes .dg-seg-btn:nth-child(3n+2),.plr-modes .dg-seg-btn:nth-child(3n+3){border-left:2px solid var(--deep)}
  .plr-modes .dg-seg-btn:nth-child(n+4){border-top:2px solid var(--deep)}
  /* the hill shrinks to about half size on a phone, so its labels grow to stay readable */
  .plr-end{font-size:32px}
  .plr-midlab{font-size:22px}
  .plr-sidelab{font-size:19px}
  .plr-ball-lab{font-size:28px}
  .plr-ticklab{font-size:22px}
  .plr-ticklab--t{font-size:26px}
}

/* ---------------- maths 11+: number lines (topic_diagrams/eleven_plus_number_lines_and_negative_numbers.py,
   interactions in js/eleven_plus_number_lines_and_negative_numbers.js) ---------------- */
.pln-wrap{width:100%;max-width:640px;margin:10px auto 0}
.ga-ex .pln-line{max-width:none}
.pln-line{display:block;width:100%;height:auto;overflow:visible}
.pln-axis{stroke:var(--navy);stroke-width:3}
.pln-tick{stroke:var(--navy);stroke-width:2.2}
.pln-tick--minor{stroke:#8ea4c8;stroke-width:1.5}
.pln-tick--zero{stroke:var(--red);stroke-width:3}
.pln-lab{font:600 15px 'Poppins',sans-serif;fill:var(--muted);text-anchor:middle}
.pln-lab--end{font:900 21px 'Nunito',sans-serif;fill:var(--navy)}
.pln-lab--step{font:700 16px 'Poppins',sans-serif;fill:var(--deep-text)}
.pln-lab--hit{fill:#b3122f;font-weight:800}
.pln-lab--zero{fill:#b3122f;font-weight:800}
.pln-gap{fill:none;stroke:var(--deep);stroke-width:2.5}
/* "Show me the gaps": each arc traces itself, then its labels fade in (the lesson's js/ file times them one after another) */
.pln-gap--draw{stroke-dasharray:1;stroke-dashoffset:1;animation:pln-draw .42s ease-out forwards}
@keyframes pln-draw{to{stroke-dashoffset:0}}
.pln-fade{opacity:0;animation:pln-fade .25s ease-out .34s forwards}
@keyframes pln-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pln-gap--draw{stroke-dasharray:none;stroke-dashoffset:0;animation:none}.pln-fade{opacity:1;animation:none}}
.pln-gaplab{font:700 14px 'Poppins',sans-serif;fill:var(--deep-text);text-anchor:middle}
.pln-arrow{fill:var(--red)}
.pln-answer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:14px;
  font-weight:600;color:var(--navy)}
/* two points: halfway, and the jump across zero */
.pln-handle{cursor:grab;touch-action:none;outline:none}
.pln-handle:active{cursor:grabbing}
.pln-hit{fill:transparent}
.pln-pt{fill:var(--sky);stroke:var(--navy);stroke-width:3}
.pln-handle:focus-visible .pln-pt{stroke:var(--red);stroke-width:5}
.pln-ptlab{font:900 17px 'Nunito',sans-serif;fill:var(--navy);text-anchor:middle;stroke:#fff;stroke-width:5px;paint-order:stroke;stroke-linejoin:round}
.pln-jump{fill:none;stroke-width:3}
.pln-jump--a{stroke:var(--deep)}
.pln-jump--b{stroke:var(--red)}
.pln-jumplab{font:800 15px 'Poppins',sans-serif;text-anchor:middle;stroke:#fff;stroke-width:5px;paint-order:stroke}
text.pln-jump--a{fill:var(--deep-text)}
text.pln-jump--b{fill:#b3122f}
.pln-midmark{fill:var(--red)}
.pln-midlab{font:800 15px 'Poppins',sans-serif;fill:#b3122f;text-anchor:middle}
/* the thermometer */
.pln-thwrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;margin-top:10px}
.pln-th{width:190px;height:auto;cursor:ns-resize;touch-action:none;outline:none}
.pln-th:focus-visible{outline:3px solid var(--sky);outline-offset:4px;border-radius:12px}
.pln-tube{fill:var(--white);stroke:var(--navy);stroke-width:3}
.pln-bulb{fill:var(--red);stroke:var(--navy);stroke-width:3}
.pln-liquid{fill:var(--red)}
.pln-zero{stroke:var(--sky);stroke-width:2;stroke-dasharray:5 4}
.pln-thtick{stroke:var(--navy);stroke-width:1.6}
.pln-thlab{font:700 15px 'Poppins',sans-serif;fill:var(--navy)}
.pln-thlab--zero{fill:var(--deep-text);font-weight:800}
.pln-thmark{fill:var(--navy)}
/* a fixed width and height, so a longer note ("zero: the freezing point of water") never moves the thermometer */
.pln-thside{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 260px;width:260px;max-width:100%}
.pln-temp{font:900 2.6rem/1.1 'Nunito',sans-serif;color:var(--navy);text-align:center}
.pln-thnote{font-size:.95rem;line-height:1.4;color:var(--muted);text-align:center;height:2.8em;display:flex;align-items:center;justify-content:center}
.pln-thbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.pln-thbtns .dg-btn{padding:9px 10px;font-size:13px}
#pln-th-crow[hidden]{display:none}
@media (max-width:560px){
  .pln-lab{font-size:22px} .pln-lab--end{font-size:28px} .pln-lab--step{font-size:22px}
  .pln-gaplab,.pln-jumplab,.pln-midlab{font-size:21px} .pln-ptlab{font-size:24px}
  .pln-th{width:150px}
  .pln-temp{font-size:2.1rem}
}

/* ---------------- maths 11+: factors (topic_diagrams/eleven_plus_factors_multiples_and_divisibility.py,
   interactions in js/eleven_plus_factors_multiples_and_divisibility.js) ---------------- */
/* the rectangle builder */
.plf-rect-ctl{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;font-weight:600;color:var(--navy)}
.plf-step{min-width:44px;padding:8px 12px;font-size:1.1rem}
.plf-rect-w{font:900 1.8rem/1 'Nunito',sans-serif;color:var(--deep-text);min-width:2ch;text-align:center}
.plf-tiles{position:relative;margin:16px auto 0;transition:height .35s ease,width .35s ease}
.plf-tile{position:absolute;left:0;top:0;border-radius:6px;background:var(--sky);box-shadow:inset 0 0 0 2px var(--deep);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .2s ease}
.plf-tile--left{background:var(--red);box-shadow:inset 0 0 0 2px #a3142f}
/* a tile added by the slider pops in at its own place; a removed one fades away (the lesson's js/ file) */
.plf-tile--new{animation:plf-in .28s ease-out}
@keyframes plf-in{from{scale:.2;opacity:0}to{scale:1;opacity:1}}
.plf-tile--gone{opacity:0;scale:.6;transition:opacity .2s ease,scale .2s ease}
@media (prefers-reduced-motion:reduce){.plf-tile,.plf-tiles{transition:none}}
.plf-found{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:12px}
.plf-found-lab{width:100%;text-align:center;font-size:13px;color:var(--muted);font-weight:600}
.plf-chip{background:var(--light);border:2px solid var(--deep);border-radius:999px;padding:4px 12px;
  font:900 1.05rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.plf-found-all{width:100%;text-align:center;margin-top:6px;color:#1d5c30;font-weight:600}
/* the factor rainbow */
.plf-rbwrap{width:100%;max-width:640px;margin:10px auto 0}
.plf-rainbow{display:block;width:100%;height:auto;overflow:visible}
.ga-ex .plf-rainbow{max-width:none}
.plf-base{stroke:#c9d9f2;stroke-width:2}
.plf-fac{font:900 22px 'Nunito',sans-serif;fill:var(--navy);text-anchor:middle;transition:opacity .3s ease}
.plf-fac--hidden{opacity:0}
.plf-arc{fill:none;stroke-width:3.5;stroke-linecap:round}
.plf-arc--1{stroke:var(--deep)} .plf-arc--2{stroke:var(--red)} .plf-arc--3{stroke:var(--sky)} .plf-arc--4{stroke:var(--navy)}
.plf-arc--draw{stroke-dasharray:1;stroke-dashoffset:1;animation:plf-draw .55s ease-out forwards}
@keyframes plf-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.plf-arc--draw{stroke-dasharray:none;stroke-dashoffset:0;animation:none}}
.plf-pick{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
/* the hundred squares */
.plf-tables .dg-seg-btn{padding:9px 13px}
.plf-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;width:100%;max-width:470px;margin:14px auto 0}
.plf-cell{aspect-ratio:1;display:grid;place-items:center;border:1px solid #d6e6fb;border-radius:7px;background:var(--white);
  font:800 .95rem/1 'Nunito',sans-serif;color:var(--navy);padding:0;transition:background .2s ease,color .2s ease}
button.plf-cell{cursor:pointer}
button.plf-cell:hover{border-color:var(--sky)}
button.plf-cell:focus-visible{outline:3px solid var(--sky);outline-offset:1px}
.plf-cell--on{background:var(--deep);border-color:var(--deep);color:var(--white)}
.plf-cell--out{background:#eef1f6;color:#a9b3c7;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--red)}
.plf-cell--prime{background:var(--white);border:3px solid #1d7a3a;color:#1d5c30;border-radius:50%}
.plf-cell--pop{animation:plv-pop .35s ease-out}
@media (prefers-reduced-motion:reduce){.plf-cell--pop{animation:none}}
.plf-primes{font:800 1.05rem/1.7 'Nunito',sans-serif;color:#1d5c30;max-width:68ch;margin-top:6px}
/* the divisibility detective */
.plf-big{font:900 2.6rem/1.2 'Nunito',sans-serif;color:var(--navy);text-align:center;margin-top:10px}
.plf-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:520px;margin:12px auto 0}
.plf-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border:2px solid #b9cdee;border-radius:14px;
  background:var(--white);cursor:pointer;font:inherit}
.plf-card:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.plf-card-d{font:900 1.2rem/1 'Nunito',sans-serif;color:var(--navy)}
.plf-card-m{font:900 1.4rem/1.1 'Nunito',sans-serif;color:var(--muted);min-height:1.2em}
.plf-card--y{border-color:var(--deep);background:var(--light)} .plf-card--y .plf-card-m{color:var(--deep-text)}
.plf-card--n{border-color:var(--navy)} .plf-card--n .plf-card-m{color:var(--navy)}
.plf-card--good{border-color:#1d7a3a;background:#e7f6ec} .plf-card--good .plf-card-m{color:#1d5c30}
.plf-card--bad{border-color:var(--red);background:#fff3f5} .plf-card--bad .plf-card-m{color:#b3122f}
.plf-det-read{text-align:left;max-width:560px}
.plf-why{list-style:none;padding:0;margin-top:8px}
.plf-why li{padding:4px 0 4px 26px;position:relative;font-size:14px;line-height:1.5}
.plf-why li::before{position:absolute;left:4px;font-weight:900}
.plf-why .plf-ok::before{content:"\2713";color:#1d7a3a}
.plf-why .plf-no::before{content:"\2717";color:#b3122f}
@media (max-width:560px){
  .plf-cell{font-size:.78rem;border-radius:5px}
  .plf-tables{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-radius:14px;width:100%;max-width:320px}
  .plf-tables .dg-seg-btn{border-left:0;padding:8px 4px}
  .plf-tables .dg-seg-btn:not(:nth-child(5n+1)){border-left:2px solid var(--deep)}
  .plf-tables .dg-seg-btn:nth-child(n+6){border-top:2px solid var(--deep)}
  .plf-fac{font-size:28px}
  .plf-big{font-size:2.1rem}
}

/* ---------------- maths 11+: HCF and LCM (topic_diagrams/eleven_plus_hcf_and_lcm.py,
   interactions in js/eleven_plus_hcf_and_lcm.js) ---------------- */
.plh-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.plh-rowlab{font-weight:700;color:var(--navy);min-width:7.5em;font-size:.95rem}
.plh-chip{display:inline-grid;place-items:center;min-width:2.4em;height:2.2em;padding:0 8px;border-radius:999px;
  border:2px solid #b9cdee;background:var(--white);font:900 1.05rem/1 'Nunito',sans-serif;color:var(--navy)}
.plh-chip--btn{cursor:pointer}
.plh-chip--btn:hover{border-color:var(--sky)}
.plh-chip--btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.plh-chip--common{border-color:#1d7a3a;background:#e7f6ec;color:#1d5c30}
.plh-chip--no{animation:plh-shake .35s ease;border-color:var(--red)}
@keyframes plh-shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.plh-chip--hcf{position:relative;border-color:var(--deep);background:var(--deep);color:var(--white);box-shadow:0 0 0 3px rgba(41,171,226,.35)}
.plh-chip--hcf em{position:absolute;top:-1.35em;left:50%;transform:translateX(-50%);font:800 .7rem/1 'Poppins',sans-serif;
  font-style:normal;color:var(--deep-text);letter-spacing:.06em}
.plh-finder{max-width:600px;margin:6px auto 0}
.plh-tray{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px;padding:16px 12px 10px;border:2px dashed #1d7a3a;
  border-radius:14px;background:#f5fbf7;min-height:58px}
.plh-traylab{font-weight:700;color:#1d5c30;min-width:7.5em;font-size:.95rem}
.plh-traychips{display:flex;flex-wrap:wrap;gap:6px}
@media (prefers-reduced-motion:reduce){.plh-chip--no{animation:none}}
/* the frog race */
.plh-frogwrap{width:100%;max-width:640px;margin:6px auto 0}
.plh-frog{display:block;width:100%;height:auto;overflow:visible}
.plh-axis{stroke:var(--navy);stroke-width:3}
.plh-tick{stroke:var(--navy);stroke-width:2}
.plh-tick--minor{stroke:#a9bad6;stroke-width:1.2}
.plh-ticklab{font:600 14px 'Poppins',sans-serif;fill:var(--muted);text-anchor:middle}
.plh-frog-g{transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
@media (prefers-reduced-motion:reduce){.plh-frog-g{transition:none}}
.plh-frog--a .plh-frog-body{fill:var(--deep)}
.plh-frog--b .plh-frog-body{fill:var(--red)}
.plh-frog-eye{fill:var(--white);stroke:var(--navy);stroke-width:1.5}
.plh-frog-pupil{fill:var(--navy)}
.plh-frog-n{font:900 13px 'Nunito',sans-serif;fill:var(--white);text-anchor:middle}
.plh-blue{color:var(--deep-text)} .plh-red{color:#b3122f}
.plh-hop{fill:none;stroke-width:2.5}
.plh-hop--a{stroke:var(--deep)} .plh-hop--b{stroke:var(--red)}
circle.plh-hop--a{fill:var(--deep);stroke:none} circle.plh-hop--b{fill:var(--red);stroke:none}
.plh-hop--draw{stroke-dasharray:1;stroke-dashoffset:1;animation:plf-draw .4s ease-out forwards}
.plh-meet{fill:none;stroke:#1d7a3a;stroke-width:4}
.plh-meetlab{font:900 18px 'Nunito',sans-serif;fill:#1d5c30;text-anchor:middle;stroke:#fff;stroke-width:5px;paint-order:stroke}
/* HCF or LCM? */
.plh-story{max-width:560px;margin:12px auto 0;padding:14px 18px;border-left:6px solid var(--sky);border-radius:12px;background:var(--light);
  font-size:1.05rem;line-height:1.55;color:var(--ink);min-height:5.5em}
.plh-pick{font:900 1.25rem/1 'Nunito',sans-serif;min-width:110px;padding:12px 18px}
/* tile the floor */
.plh-floorwrap{width:100%;max-width:560px;margin:8px auto 0}
.plh-floor{display:block;width:100%;height:auto}
.plh-tile{stroke:var(--white);stroke-width:1.5}
.plh-tile--a{fill:var(--sky)} .plh-tile--b{fill:var(--deep)}
.plh-tile--gap{fill:#ffd9e0;stroke:var(--red);stroke-width:1.5;stroke-dasharray:4 3}
.plh-floor-edge{fill:none;stroke:var(--navy);stroke-width:3}
.plh-dim{font:800 16px 'Poppins',sans-serif;fill:var(--navy);text-anchor:middle}
.plh-dim--side{text-anchor:end}
@media (max-width:560px){
  .plh-rowlab,.plh-traylab{min-width:100%}
  .plh-ticklab{font-size:20px} .plh-meetlab{font-size:24px}
  .plh-dim{font-size:22px}
}
/* the frog race: the line above and the messages below keep the height of their longest version
   (measured on every pair of frogs), so nothing on the page moves while the frogs hop */
#plh-frog-task{min-height:29px}
#plh-frog-read{min-height:132px}
@media (max-width:560px){#plh-frog-task{min-height:86px} #plh-frog-read{min-height:162px}}

/* the clue table in section 3: the clue words wrap (the shared rule keeps first columns on one line,
   which squeezed the other columns and made every row tall), and each column fits its words */
.diagram-head .plh-clues td:first-child{white-space:normal}
.plh-clues{table-layout:auto}
.plh-clues th:nth-child(1),.plh-clues td:nth-child(1){width:46%}
.plh-clues th:nth-child(2),.plh-clues td:nth-child(2){width:1%;white-space:nowrap;text-align:center}
.plh-clues td{vertical-align:middle}
/* ---------------- maths 11+: squares and cubes (topic_diagrams/eleven_plus_squares_cubes_and_roots.py,
   interactions in js/eleven_plus_squares_cubes_and_roots.js) ---------------- */
.pls-table{table-layout:fixed}
.diagram-head .pls-table td,.diagram-head .pls-table td:first-child{white-space:nowrap;text-align:center;padding:8px 4px}
.pls-big{font:900 1.8rem/1 'Nunito',sans-serif;color:var(--deep-text);min-width:6ch;text-align:center}
.pls-big sup{font-size:.6em}
.pls-big--n{display:block;font-size:2.8rem;margin:12px auto 0;min-height:1em}
.plf-step:disabled{opacity:.4;cursor:default}
/* the square builder: a faint 15 by 15 board that tiles fill a layer at a time */
.pls-tiles{position:relative;margin:16px auto 0;border-radius:6px}
#pls-sq-tiles{background-color:#e8f1fd}
.pls-tile{position:absolute;left:0;top:0;border-radius:4px;transition:opacity .2s ease,scale .2s ease}
.pls-tile--a{background:var(--sky);box-shadow:inset 0 0 0 2px var(--deep)}
.pls-tile--b{background:var(--deep);box-shadow:inset 0 0 0 2px var(--navy)}
.pls-tile--sm{border-radius:3px}
.pls-tile--left{background:var(--red);box-shadow:inset 0 0 0 2px #a3142f}
.pls-tile--new{animation:pls-in .28s ease-out both}
@keyframes pls-in{from{scale:.2;opacity:0}to{scale:1;opacity:1}}
.pls-tile--gone{opacity:0;scale:.6}
/* the cube builder */
.pls-cubewrap{width:100%;max-width:420px;margin:6px auto 0}
.pls-cube{display:block;width:100%;height:auto}
.pls-face{stroke:var(--navy);stroke-width:1.4;stroke-linejoin:round}
.pls-face--top{fill:#9fdcf5}
.pls-face--left{fill:var(--sky)}
.pls-face--right{fill:var(--deep)}
.pls-layer--drop{animation:pls-drop .45s cubic-bezier(.3,1.3,.5,1) both}
@keyframes pls-drop{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
/* match the pairs */
.pls-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:520px;margin:14px auto 0}
.pls-card{min-height:64px;border:2px solid #b9cdee;border-radius:14px;background:var(--white);cursor:pointer;
  font:900 1.45rem/1 'Nunito',sans-serif;color:var(--navy);transition:background .2s ease,border-color .2s ease,transform .2s ease}
.pls-card sup{font-size:.6em}
.pls-card:hover{border-color:var(--sky)}
.pls-card:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pls-card--sel{border-color:var(--deep);background:var(--light);transform:translateY(-3px)}
.pls-card--done{border-color:#1d7a3a;background:#e7f6ec;color:#1d5c30;cursor:default;transform:none}
.pls-card--no{border-color:var(--red);background:#fff3f5;animation:plh-shake .35s ease}
#pls-sq-read,#pls-cu-read{min-height:5.2em}
#pls-sn-read{min-height:6.4em}
#pls-match-read{min-height:3.4em}
@media (max-width:560px){
  .pls-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pls-big--n{font-size:2.4rem}
  .diagram-head .pls-table td{font-size:13px;padding:6px 2px}
}
@media (prefers-reduced-motion:reduce){.pls-tile,.pls-card{transition:none}.pls-tile--new,.pls-layer--drop,.pls-card--no{animation:none}}
.pls-guess.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
.pls-guess.plv-bad{background:#fff3f5;border-color:var(--red);color:#b3122f}
.pls-guess:disabled{cursor:default}
.pls-guess:disabled:not(.plv-ok):not(.plv-bad){opacity:.55}
/* ---------------- maths 11+: Roman numerals (topic_diagrams/eleven_plus_roman_numerals.py,
   interactions in js/eleven_plus_roman_numerals.js) ---------------- */
.plx-rn{font-family:'Nunito',sans-serif;font-weight:900;letter-spacing:.04em;color:var(--navy)}
.plx-table{table-layout:fixed}
.diagram-head .plx-table th,.diagram-head .plx-table td,.diagram-head .plx-table td:first-child{text-align:center;white-space:nowrap;padding:8px 4px}
.plx-table thead .plx-rn{font-size:1.25rem}
.plx-cols{max-width:440px}
.plx-cols tbody th{font-weight:700;color:var(--muted)}
/* the symbol hunt: tiles flip to show their value */
.plx-ask{text-align:center;font-size:1.1rem;color:var(--ink);margin-top:12px;min-height:1.6em}
.plx-ask b{font:900 1.5rem/1 'Nunito',sans-serif;color:var(--deep-text)}
.plx-tiles{display:grid;width:100%;box-sizing:border-box;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;max-width:520px;margin:14px auto 0}
.plx-tile{aspect-ratio:1/1.15;border:0;padding:0;background:none;cursor:pointer;perspective:500px}
.plx-tile:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:14px}
.plx-tile-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.2,.5,1)}
.plx-tile--flip .plx-tile-in{transform:rotateY(180deg)}
.plx-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;border:2px solid #b9cdee;background:var(--white);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;font:900 1.7rem/1 'Nunito',sans-serif;color:var(--navy)}
.plx-face--back{transform:rotateY(180deg);background:var(--light);border-color:var(--deep);font-size:1.15rem;color:var(--deep-text)}
.plx-tile--ok .plx-face--back{background:#e7f6ec;border-color:#1d7a3a;color:#1d5c30}
.plx-tile--no .plx-face--back{background:#fff3f5;border-color:var(--red);color:#b3122f}
.plx-tile:disabled{cursor:default}
#plx-hunt-read{min-height:3.6em}
/* the Roman keyboard */
.plx-screen{display:flex;width:100%;box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:4px;max-width:560px;min-height:76px;margin:14px auto 0;
  padding:10px;border-radius:14px;background:var(--light);border:2px solid #d6e6fb}
.plx-empty{align-self:center;color:var(--muted);font-size:.95rem;line-height:52px}
.plx-cell{display:flex;flex-direction:column;align-items:center;min-width:34px}
.plx-cell-s{font:900 2rem/1.1 'Nunito',sans-serif;color:var(--navy)}
.plx-cell-v{font-size:.78rem;font-weight:600;color:#1d5c30}
.plx-cell--minus .plx-cell-s{color:#b3122f}
.plx-cell--minus .plx-cell-v{color:#b3122f}
.plx-cell--new{animation:plx-in .25s ease-out}
@keyframes plx-in{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}
.plx-total{text-align:center;font-size:1.15rem;margin-top:10px;min-height:1.5em;color:var(--ink)}
.plx-total .plx-rn{font-size:1.2rem}
.plx-keys{display:grid;width:100%;box-sizing:border-box;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:520px;margin:12px auto 0}
.plx-key{font:900 1.5rem/1 'Nunito',sans-serif;padding:12px 0}
.plx-key:disabled{opacity:.45;cursor:default}
.plx-oops{color:#b3122f}
#plx-kb-read{min-height:4.4em}
/* the Roman machine: one colour per column (ones red, tens sky, hundreds deep, thousands navy) */
.plx-mach-top{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
.plx-mach-n{font:900 2rem/1 'Nunito',sans-serif;color:var(--deep-text);min-width:4ch;text-align:center;font-variant-numeric:tabular-nums}
.plx-range{display:block;width:100%;max-width:520px;margin:14px auto 0;accent-color:var(--deep)}
.plx-parts{display:grid;width:100%;box-sizing:border-box;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:560px;margin:16px auto 0}
.plx-part{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;border:2px solid #d6e6fb;
  border-top-width:6px;background:var(--white);transition:opacity .2s ease}
.plx-part--c0{border-top-color:var(--red)}
.plx-part--c1{border-top-color:var(--sky)}
.plx-part--c2{border-top-color:var(--deep)}
.plx-part--c3{border-top-color:var(--navy)}
.plx-part--zero{opacity:.45}
.plx-part-lab{font-size:.78rem;font-weight:600;color:var(--muted)}
.plx-part-v{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.plx-part-r{font:900 1.35rem/1.1 'Nunito',sans-serif;color:var(--navy);letter-spacing:.04em;min-height:1.1em}
.plx-part--zero .plx-part-r{font:600 .85rem/1.6 'Poppins',sans-serif;color:var(--muted);letter-spacing:0}
.plx-pop{animation:plx-pop .3s ease-out}
@keyframes plx-pop{50%{transform:scale(1.06)}}
.plx-result{display:flex;justify-content:center;gap:3px;margin-top:16px;min-height:2.6rem;white-space:nowrap}
.plx-chunk{font:900 2rem/1.15 'Nunito',sans-serif;color:var(--navy);letter-spacing:.04em;padding:0 2px 2px;border-bottom:5px solid}
.plx-chunk--c0{border-bottom-color:var(--red)}
.plx-chunk--c1{border-bottom-color:var(--sky)}
.plx-chunk--c2{border-bottom-color:var(--deep)}
.plx-chunk--c3{border-bottom-color:var(--navy)}
/* spot the mistake */
.plx-show{text-align:center;font:900 2.6rem/1 'Nunito',sans-serif;color:var(--navy);letter-spacing:.05em;margin-top:14px;min-height:1em}
.plx-judge.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
.plx-judge.plv-bad{background:#fff3f5;border-color:var(--red);color:#b3122f}
.plx-judge:disabled{cursor:default}
.plx-judge:disabled:not(.plv-ok):not(.plv-bad){opacity:.55}
#plx-sm-read{min-height:5em}
.plx-choice{font-family:'Nunito',sans-serif;font-weight:900;font-size:1.15rem;letter-spacing:.04em}
@media (max-width:560px){
  .plx-tiles,.plx-keys{gap:4px}
  .plx-face{font-size:1.35rem;border-radius:10px}
  .plx-face--back{font-size:.74rem}
  .plx-key{font-size:1.2rem;padding:10px 0}
  .plx-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plx-chunk{font-size:1.45rem}
  .plx-show{font-size:2rem}
  #plx-kb-read{min-height:7.4em}
  #plx-sm-read{min-height:7em}
  .diagram-head .plx-table th,.diagram-head .plx-table td{padding:6px 2px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.plx-tile-in{transition:none}.plx-cell--new,.plx-pop{animation:none}}
/* ---------------- maths 11+: column addition and subtraction (topic_diagrams/eleven_plus_column_addition_and_subtraction.py,
   interactions in js/eleven_plus_column_addition_and_subtraction.js). One digit per cell, like squared paper. ---------------- */
.pca-sum{--w:48px;display:grid;grid-template-columns:repeat(var(--n),var(--w));justify-content:center;margin:14px auto 0;
  font-variant-numeric:tabular-nums;position:relative}
.ga-ex .pca-sum{margin-top:12px}
.pca-lab{text-align:center;font:700 12px/24px 'Poppins',sans-serif;color:var(--muted)}
.pca-lab abbr{text-decoration:none;cursor:help}
.pca-s{display:grid;place-items:center;height:24px;font:800 .95rem/1 'Nunito',sans-serif}
.pca-s--ex{color:#b3122f}
.pca-s--carry{color:var(--deep-text)}
.pca-d,.pca-op{display:grid;place-items:center;height:54px;font:900 2rem/1 'Nunito',sans-serif;color:var(--navy);
  position:relative;padding:0;border:0;background:none;transition:background .2s ease}
.pca-op{color:var(--deep-text)}
.pca-d--x{color:#8590a8}
.pca-d--x::after{content:"";position:absolute;left:24%;right:24%;top:50%;height:3px;border-radius:2px;background:var(--red);
  transform:rotate(-55deg)}
.pca-d--q{margin:4px;border:2px dashed var(--red);border-radius:10px;color:#b3122f;height:46px;font-size:1.6rem}
.pca-d--blank{margin:4px;border:2px dashed #b9cdee;border-radius:10px;height:46px}
.pca-rule{grid-column:1/-1;border-top:3px solid var(--navy);margin:4px 0}
/* the interactives */
.pca-stage{min-height:200px;display:flex;align-items:center;justify-content:center}
.pca-stage .pca-sum{margin-top:6px}
.pca-hot{background:#e8f6fd}
.pca-d--slot{margin:4px;border:2px dashed #b9cdee;border-radius:10px;height:46px;font-size:1.7rem}
.pca-d--on{border:2px solid var(--sky);background:var(--white);box-shadow:0 0 0 4px rgba(41,171,226,.3)}
.pca-d--ok{color:#1d7a3a;border-color:transparent}
.pca-d--help{color:var(--deep-text);border-color:transparent}
.pca-d--no{border-color:var(--red);background:#fff3f5;animation:plh-shake .35s ease}
button.pca-d--q{cursor:pointer;font-family:'Nunito',sans-serif}
button.pca-d--q:hover{background:#fff3f5}
.pca-d--sel{border-style:solid;box-shadow:0 0 0 4px rgba(232,41,74,.25);background:#fff3f5}
.pca-d--q.pca-d--ok{border:2px solid #1d7a3a;background:#e7f6ec;color:#1d5c30;cursor:default}
.pca-d--q.pca-d--help{border:2px solid var(--deep);background:var(--light);color:var(--deep-text);cursor:default}
.pca-d:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pca-pop{animation:plv-pop .45s ease-out}
.pca-drop{animation:pca-drop .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes pca-drop{from{transform:translateY(-34px);opacity:0}to{transform:none;opacity:1}}
.pca-mv{background:#dff1fb;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.pca-mv--first{border-radius:12px 0 0 12px}
.pca-mv--last{border-radius:0 12px 12px 0}
.pca-mv--first.pca-mv--last{border-radius:12px}
.pca-mv--good{background:#e7f6ec;color:#1d5c30}
.pca-sum--dragging .pca-mv{cursor:grabbing;background:#c9e8f8}
.pca-read{min-height:5.2em}
.pca-read .pca-say{font-weight:600;color:var(--navy)}
.pca-oops{color:#b3122f}
.pca-level{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;font:700 14px/1 'Poppins',sans-serif;color:var(--navy)}
.pca-dots{display:flex;gap:5px}
.pca-dot{width:12px;height:12px;border-radius:50%;background:#d6e6fb}
.pca-dot--on{background:var(--deep)}
.pca-lvbtn{width:34px;height:34px;padding:0;border-radius:50%;font-size:18px}
.pca-lvbtn:disabled{opacity:.35;cursor:default}
.pca-up{color:#1d5c30;font-weight:600}
.pca-pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;max-width:340px;margin:12px auto 0}
.pca-key{height:52px;padding:0;border-radius:12px;font:900 1.5rem/1 'Nunito',sans-serif;box-shadow:0 3px 0 #9fb7e0}
.pca-key:active{transform:translateY(2px);box-shadow:0 1px 0 #9fb7e0}
.pca-key:disabled{opacity:.4;cursor:default;box-shadow:none}
.pca-key--ex{grid-column:1/-1;font:700 15px/1 'Poppins',sans-serif;background:var(--red);border-color:var(--red);color:var(--white);
  box-shadow:0 3px 0 #a3142f}
.pca-key--ex:hover{background:#c91f3d}
/* fact family and the missing number */
.pca-family{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:8px 12px;margin-top:10px}
.pca-family span{background:var(--light);border-radius:12px;padding:6px 14px;font:800 1.05rem/1.4 'Nunito',sans-serif;color:var(--navy)}
.pca-table{max-width:520px}
.pca-eq{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;min-height:64px;
  font:900 2rem/1.2 'Nunito',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.pca-qbox{display:inline-grid;place-items:center;min-width:2.2em;height:1.6em;padding:0 .2em;border:3px dashed var(--red);
  border-radius:12px;color:#b3122f}
.pca-qbox--ok{border-style:solid;border-color:#1d7a3a;background:#e7f6ec;color:#1d5c30}
.pca-step{text-align:center;color:var(--ink);font-size:1rem;margin-top:8px;min-height:1.6em}
.pca-choices{max-width:480px}
.pca-choice{font:800 1.15rem/1.3 'Nunito',sans-serif}
#pca-inv-read{min-height:4.4em}
.pca-qi{display:inline-block;min-width:1.05em;border:2px solid var(--red);border-radius:5px;color:#b3122f;font-weight:700;
  text-align:center;line-height:1.2;margin:0 1px}
.pca-check{color:#1d7a3a;font-weight:700}
@media (max-width:560px){
  .pca-sum{--w:40px}
  .pca-d,.pca-op{height:48px;font-size:1.7rem}
  .pca-d--q,.pca-d--slot,.pca-d--blank{height:40px;margin:3px;font-size:1.45rem}
  .pca-lab{font-size:10.5px}
  .pca-eq{font-size:1.55rem}
  .pca-family{grid-template-columns:1fr}
  .pca-read{min-height:7em}
}
@media (prefers-reduced-motion:reduce){.pca-pop,.pca-drop,.pca-d--no{animation:none}}
/* the quiz shows its sums stacked, like an 11+ paper */
.pca-sum--quiz{--w:40px;margin-top:10px}
.pca-sum--quiz .pca-d,.pca-sum--quiz .pca-op{height:44px;font-size:1.6rem}
.pca-sum--quiz .pca-d--q,.pca-sum--quiz .pca-d--blank{height:36px;font-size:1.3rem;margin:4px 3px}
/* ---------------- maths 11+: long multiplication (topic_diagrams/eleven_plus_long_multiplication.py,
   interactions in js/eleven_plus_long_multiplication.js). Column sums reuse Lesson 2.1's pca- styles. ---------------- */
.plm-ph,.plm-red{color:#b3122f}
.pca-d.plm-ph{color:#b3122f}
.plm-mult{background:#fff3f5;border-radius:10px;color:#b3122f}
.plm-bad{background:#fff3f5;color:#b3122f}
.plm-table{max-width:520px;table-layout:fixed}
.diagram-head .plm-table th,.diagram-head .plm-table td,.diagram-head .plm-table td:first-child{text-align:center;white-space:nowrap;padding:8px 4px}
/* the splitter */
.plm-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:10px}
.plm-pick-n{display:flex;align-items:center;gap:8px}
.plm-pick-lab{font-size:.85rem;font-weight:600;color:var(--muted)}
.plm-pick-v{font:900 1.7rem/1 'Nunito',sans-serif;color:var(--deep-text);min-width:2.4ch;text-align:center;font-variant-numeric:tabular-nums}
.plm-area{margin:16px auto 0;width:100%;max-width:600px;overflow-x:auto;padding:4px}
.plm-grid{display:grid;grid-template-columns:44px repeat(var(--cols),minmax(0,1fr)) minmax(64px,auto);gap:6px;align-items:stretch}
.plm-corner,.plm-head{display:grid;place-items:center;font:800 1rem/1.2 'Nunito',sans-serif;color:var(--navy);padding:4px 0}
.plm-corner{color:var(--deep-text)}
.plm-head--tot{font:600 .78rem/1.2 'Poppins',sans-serif;color:var(--muted)}
.plm-side{border:0;border-radius:12px;font:900 1.05rem/1 'Nunito',sans-serif;color:var(--white);cursor:pointer;padding:0;min-height:64px}
.plm-side--t{background:var(--deep)}
.plm-side--o{background:var(--sky)}
.plm-side:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.plm-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;padding:8px 4px;
  text-align:center;transition:background .2s ease,box-shadow .2s ease}
.plm-cell b{font:900 1.15rem/1.1 'Nunito',sans-serif;color:var(--navy)}
.plm-cell small{font-size:.72rem;color:var(--muted);white-space:nowrap}
.plm-cell--t{background:#dcebfd;min-height:84px}
.plm-cell--o{background:#e8f6fd;min-height:64px}
.plm-tot{display:grid;place-items:center;font:900 1.1rem/1 'Nunito',sans-serif;color:var(--navy);border-radius:12px;background:var(--light);padding:0 6px}
.plm-row--on.plm-cell,.plm-row--on.plm-tot{box-shadow:0 0 0 3px var(--red) inset}
.plm-row--on.plm-side{box-shadow:0 0 0 3px var(--red)}
#plm-sp-read{min-height:6.4em}
/* be the teacher */
.plm-judge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:520px;margin:12px auto 0}
.plm-j{line-height:1.3;padding:12px 10px}
.plm-j.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
.plm-j.plv-bad{background:#fff3f5;border-color:var(--red);color:#b3122f}
.plm-j:disabled{cursor:default}
.plm-j:disabled:not(.plv-ok):not(.plv-bad){opacity:.55}
#plm-sm-read,#plm-es-read{min-height:5.4em}
@media (max-width:560px){
  .plm-grid{grid-template-columns:36px repeat(var(--cols),minmax(0,1fr)) minmax(52px,auto);gap:4px}
  .plm-cell b{font-size:.95rem}
  .plm-cell small{font-size:.62rem}
  .plm-tot{font-size:.92rem}
  .plm-judge{grid-template-columns:1fr}
  #plm-sm-read,#plm-es-read{min-height:8em}
}
/* ---------------- maths 11+: division (topic_diagrams/eleven_plus_short_and_long_division.py,
   interactions in js/eleven_plus_short_and_long_division.js). The bus stop: divisor, bracket, dividend. ---------------- */
.pdv-sum{--w:46px;display:grid;grid-template-columns:repeat(var(--nb),var(--w)) 18px repeat(var(--na),var(--w)) minmax(3.4em,auto);
  justify-content:center;margin:14px auto 0;font-variant-numeric:tabular-nums}
.pdv-c{display:grid;place-items:center;height:52px;font:900 2rem/1 'Nunito',sans-serif;color:var(--navy);position:relative;padding:0}
.pdv-d{color:var(--deep-text)}
.pdv-a{border-top:3px solid var(--navy)}
.pdv-br{display:block;height:52px;border-top:3px solid var(--navy);margin-top:0}
.pdv-br svg{display:block;width:100%;height:100%;overflow:visible}
.pdv-br path{fill:none;stroke:var(--navy);stroke-width:3;vector-effect:non-scaling-stroke}
.pdv-k{position:absolute;left:1px;top:5px;font:800 .82rem/1 'Nunito',sans-serif;color:#b3122f}
.pdv-rem{justify-items:start;font-size:1.5rem;padding-left:8px;white-space:nowrap}
.pdv-fade{opacity:.3}
.pdv-w{height:46px;font-size:1.75rem}
.pdv-rule{border-bottom:3px solid var(--navy)}
.pdv-now{color:var(--deep-text)}
.pdv-in{animation:pdv-in .45s ease-out both}
@keyframes pdv-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.pdv-stage{min-height:150px;display:flex;align-items:flex-start;justify-content:center;overflow-x:auto;padding-bottom:4px}
.pdv-stage .pdv-sum{margin-top:4px}
.pdv-hot{background:#e8f6fd}
.pdv-slot{border:2px dashed #b9cdee;border-radius:10px;margin:4px;height:44px}
.pdv-on{border:2px solid var(--sky);background:var(--white);box-shadow:0 0 0 4px rgba(41,171,226,.3)}
.pdv-done.pdv-ok{color:#1d7a3a}
.pdv-done.pdv-help{color:var(--deep-text)}
.pdv-sum--quiz{--w:38px;margin-top:10px}
.pdv-sum--quiz .pdv-c,.pdv-sum--quiz .pdv-br{height:44px}
.pdv-sum--quiz .pdv-c{font-size:1.6rem}
.pdv-table{max-width:620px}
.diagram-head .pdv-table td:first-child{white-space:normal}
.pdv-table .fr,.pdv-form .fr,.pca-choice .fr,.ga-read .fr,.pdv-story .fr{font-size:.75em}
/* the multiples strip */
.pdv-mults{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;font-size:.85rem}
.pdv-mlab{align-self:center;color:var(--muted);font-weight:600;margin-right:4px}
.pdv-m{background:var(--light);border-radius:10px;padding:4px 9px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.pdv-m small{font-weight:600;color:var(--muted)}
.pdv-m--on{background:var(--deep);color:var(--white)}
.pdv-m--on small{color:#dcebfd}
/* share it out */
.pdv-share{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px auto 0;max-width:620px;min-height:70px}
.pdv-grp{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;width:74px;min-height:40px;padding:7px;border:2px solid #b9cdee;border-radius:12px;background:var(--white)}
.pdv-left{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:74px;padding:6px 8px;border:2px dashed var(--red);border-radius:12px;
  font-size:.75rem;color:#b3122f}
.pdv-left>span{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:80px}
.pdv-dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--sky)}
.pdv-dot--left{background:var(--red)}
.pdv-dot--in{animation:pls-in .3s ease-out both}
.pdv-forms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:520px;margin:14px auto 0}
.pdv-form{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:2px solid #b9cdee;border-radius:14px;background:var(--white);
  cursor:pointer;font-family:inherit}
.pdv-form small{font-size:.75rem;font-weight:600;color:var(--muted)}
.pdv-form b{font:900 1.3rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.pdv-form--on{border-color:var(--deep);background:var(--light);box-shadow:0 0 0 3px rgba(41,121,212,.25)}
.pdv-form:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
#pdv-sh-read{min-height:4.6em}
/* round up, round down or keep it exact */
.pdv-story{text-align:center;font-size:1.06rem;color:var(--ink);margin:14px auto 0;max-width:46ch;min-height:3.4em}
#pdv-ctx-read{min-height:4.6em}
@media (max-width:560px){
  .pdv-sum{--w:36px;grid-template-columns:repeat(var(--nb),var(--w)) 14px repeat(var(--na),var(--w)) minmax(2.8em,auto)}
  .pdv-c,.pdv-br{height:46px}
  .pdv-c{font-size:1.65rem}
  .pdv-w{height:40px;font-size:1.45rem}
  .pdv-rem{font-size:1.2rem;padding-left:4px}
  .pdv-slot{height:38px;margin:3px}
  .pdv-grp{width:60px}
  .pdv-form b{font-size:1.05rem}
  #pdv-sh-read,#pdv-ctx-read{min-height:7em}
}
@media (prefers-reduced-motion:reduce){.pdv-in,.pdv-dot--in{animation:none}}
/* ---------------- maths 11+: order of operations (topic_diagrams/eleven_plus_order_of_operations.py,
   interactions in js/eleven_plus_order_of_operations.js) ---------------- */
.pbo-ladder{list-style:none;padding:0;margin:12px 0 0;max-width:62ch;display:grid;gap:8px}
.pbo-ladder li{display:flex;align-items:center;gap:14px;background:var(--light);border-radius:14px;padding:10px 14px;color:var(--ink)}
.pbo-let{flex:0 0 auto;display:grid;place-items:center;min-width:46px;height:46px;border-radius:12px;background:var(--deep);
  color:var(--white);font:900 1.4rem/1 'Nunito',sans-serif;padding:0 6px}
.pbo-let--pair{background:var(--sky);font-size:1.05rem;letter-spacing:.06em}
.pbo-work{margin-top:12px;font:800 1.25rem/1.4 'Nunito',sans-serif;color:var(--navy)}
.pbo-line{display:block;padding:2px 0}
.pbo-eq{display:inline-block;width:1.4em;color:var(--deep-text)}
.pbo-hl{background:#fff1c4;border-radius:6px;padding:0 4px;box-shadow:inset 0 -3px 0 #f2c94c}
.pbo-table{max-width:620px}
/* calculations you can tap */
.pbo-expr{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 6px;margin:14px auto 0;max-width:640px;
  font:900 1.5rem/1.3 'Nunito',sans-serif;color:var(--navy);text-align:center;min-height:2em}
.pbo-expr--big{font-size:2rem;min-height:72px}
.pbo-n{display:inline-block;padding:0 2px;font-variant-numeric:tabular-nums}
.pbo-n--new{color:#1d7a3a}
.pbo-n sup,.pbo-tap sup,.pbo-br sup{font-size:.55em}
.pbo-br{color:var(--deep-text);font-weight:900}
.pbo-br--new{color:#b3122f}
.pbo-tap{font:inherit;color:inherit;background:var(--white);border:2px solid #b9cdee;border-radius:14px;padding:2px 10px;cursor:pointer;
  min-width:52px;min-height:52px;box-shadow:0 3px 0 #9fb7e0;transition:background .15s ease,border-color .15s ease}
.pbo-tap:hover{border-color:var(--sky);background:#e8f6fd}
.pbo-tap:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pbo-tap:disabled{cursor:default;box-shadow:none}
.pbo-op{color:var(--deep-text)}
.pbo-no{border-color:var(--red);background:#fff3f5;animation:plh-shake .35s ease}
.pbo-opx{color:var(--deep-text);padding:0 4px}
.pbo-target{color:#1d7a3a}
.pbo-num--sel{border-color:var(--red);background:#fff3f5;color:#b3122f}
.pbo-gap{min-width:56px;color:var(--muted);border-style:dashed}
.pbo-gap--set{color:var(--deep-text);border-style:solid}
.pbo-new{color:#1d7a3a}
.pbo-hist{margin:12px auto 0;max-width:520px;font:800 1.05rem/1.5 'Nunito',sans-serif;color:var(--ink);text-align:center;min-height:1.5em}
.pbo-hist .pbo-line:first-child{color:var(--muted)}
#pbo-m-read,#pbo-b-read,#pbo-s-read{min-height:4.6em}
/* who is right? */
.pbo-kids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:600px;margin:14px auto 0}
.pbo-kid{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:2px solid #b9cdee;border-radius:16px;
  background:var(--white);cursor:pointer;font:800 1.1rem/1.4 'Nunito',sans-serif;color:var(--navy);text-align:left}
.pbo-kid:hover{border-color:var(--sky)}
.pbo-kid:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pbo-kid-name{font:700 .85rem/1.2 'Poppins',sans-serif;color:var(--muted);margin-bottom:4px}
.pbo-kid.plv-ok{border-color:#1d7a3a;background:#e7f6ec}
.pbo-kid.plv-bad{border-color:var(--red);background:#fff3f5}
.pbo-kid:disabled{cursor:default}
#pbo-w-read{min-height:5em}
@media (max-width:560px){
  .pbo-expr--big{font-size:1.5rem}
  .pbo-tap{min-width:44px;min-height:46px;padding:2px 6px;border-radius:12px}
  .pbo-kids{grid-template-columns:1fr}
  .pbo-work{font-size:1.1rem}
  .pbo-ladder li{gap:10px;padding:8px 10px}
  #pbo-m-read,#pbo-b-read,#pbo-s-read,#pbo-w-read{min-height:6.6em}
}
@media (prefers-reduced-motion:reduce){.pbo-no{animation:none}}
/* ---------------- maths 11+: word problems (topic_diagrams/eleven_plus_word_problems_and_multi_step_logic.py,
   interactions in js/eleven_plus_word_problems_and_multi_step_logic.js). Reuses pca- (2.1), pdv- (2.3) and pbo- (2.4). ---------------- */
.pwp-table{max-width:640px}
.pwp-op{font:900 1.4rem/1 'Nunito',sans-serif;color:var(--deep-text);text-align:center}
.pwp-qtag{display:inline-block;padding:0 7px;border:2px dashed var(--red);border-radius:6px;color:#b3122f;font-weight:800}
/* bar models */
.pwp-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.pwp-models .ga-ex{margin-top:10px;max-width:none}
.pwp-barwrap{margin-top:10px}
.pwp-bar{display:block;width:100%;max-width:380px;height:auto;margin:0 auto}
.pwp-seg{fill:#dcebfd;stroke:var(--deep);stroke-width:2}
.pwp-seg--q{fill:#fff3f5;stroke:var(--red);stroke-dasharray:6 4}
.pwp-seg--gap{fill:var(--white);stroke:#8590a8;stroke-dasharray:4 4}
.pwp-slab{font:800 15px 'Nunito',sans-serif;fill:var(--navy)}
.pwp-slab--q{fill:#b3122f;font-size:18px}
.pwp-slab--gap{fill:var(--muted);font-weight:700;font-size:13px}
.pwp-name{font:700 13px 'Poppins',sans-serif;fill:var(--muted)}
.pwp-brace{fill:none;stroke:var(--navy);stroke-width:2}
.pwp-blab{font:800 15px 'Nunito',sans-serif;fill:var(--navy)}
/* operation detective */
.pwp-ops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;box-sizing:border-box;max-width:400px;margin:14px auto 0}
.pwp-opb{font:900 1.9rem/1 'Nunito',sans-serif;padding:14px 0;border-radius:16px}
.pwp-opb.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
.pwp-opb.plv-bad{background:#fff3f5;border-color:var(--red);color:#b3122f}
.pwp-opb:disabled{cursor:default}
.pwp-opb:disabled:not(.plv-ok):not(.plv-bad){opacity:.5}
#pwp-op-read,#pwp-bm-read{min-height:4.6em}
/* bar model match */
.pwp-bmopts{display:grid;grid-template-columns:1fr;gap:10px;width:100%;box-sizing:border-box;max-width:440px;margin:12px auto 0}
.pwp-bmopt{display:block;padding:10px 6px;border:2px solid #b9cdee;border-radius:16px;background:var(--white);cursor:pointer}
.pwp-bmopt:hover{border-color:var(--sky)}
.pwp-bmopt:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pwp-bmopt.plv-ok{border-color:#1d7a3a;background:#e7f6ec}
.pwp-bmopt.plv-bad{border-color:var(--red);background:#fff3f5;opacity:.7}
.pwp-bmopt--dim{opacity:.35}
.pwp-bmopt:disabled{cursor:default}
/* plan it */
.pwp-plan{width:100%;box-sizing:border-box;max-width:560px;margin:14px auto 0;padding-left:1.6em;color:var(--ink);min-height:1em}
.pwp-plan li{margin-top:6px;background:#e7f6ec;border-radius:10px;padding:6px 10px}
.pwp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;box-sizing:border-box;max-width:600px;margin:12px auto 0}
.pwp-card{padding:12px 12px;border:2px solid #b9cdee;border-radius:14px;background:var(--white);cursor:pointer;
  font:600 .95rem/1.35 'Poppins',sans-serif;color:var(--navy);text-align:left;box-shadow:0 3px 0 #d6e6fb}
.pwp-card:hover{border-color:var(--sky)}
.pwp-card:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pwp-card--used{opacity:.3;cursor:default;box-shadow:none}
.pwp-card.pbo-no{border-color:var(--red);background:#fff3f5}
#pwp-pl-read{min-height:3.4em}
/* think of a number */
.pwp-machine{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:14px auto 0;font:900 1.5rem/1 'Nunito',sans-serif;color:var(--navy)}
.pwp-machine--static{justify-content:flex-start;font-size:1.25rem}
.pwp-box{display:grid;place-items:center;min-width:58px;height:52px;padding:0 8px;border:3px solid var(--navy);border-radius:12px;background:var(--white)}
.pwp-box--q{border-color:var(--red);border-style:dashed;color:#b3122f}
.pwp-box--blank{border-color:#b9cdee;border-style:dashed}
.pwp-box--ok{border-color:#1d7a3a;background:#e7f6ec;color:#1d5c30}
.pwp-step{display:grid;place-items:center;height:44px;padding:0 12px;border-radius:22px;background:var(--deep);color:var(--white);font-size:1.15rem}
.pwp-step--on{background:var(--red);box-shadow:0 0 0 4px rgba(232,41,74,.25)}
.pwp-arrow{color:var(--sky);font-size:1.2rem}
#pwp-bk-read{min-height:5.4em}
.pwp-qtext{font-size:1.02rem;max-width:56ch;margin-left:auto;margin-right:auto}
@media (max-width:640px){
  .pwp-models{grid-template-columns:1fr}
  .pwp-cards{grid-template-columns:1fr}
  .pwp-machine{font-size:1.15rem;gap:4px}
  .pwp-box{min-width:44px;height:44px}
  .pwp-step{height:38px;padding:0 9px;font-size:1rem}
  #pwp-op-read,#pwp-bm-read,#pwp-bk-read{min-height:7em}
}

/* ---------------- maths 11+: equivalent fractions (topic_diagrams/eleven_plus_equivalent_fractions_and_simplifying.py,
   interactions in js/eleven_plus_equivalent_fractions_and_simplifying.js). Reuses pca- (2.1) and pbo- (2.4). ---------------- */
/* big stacked fractions for worked examples and the workshops; a dashed red box for a missing number */
.pfe-f{display:inline-grid;grid-template-rows:auto auto;justify-items:center;vertical-align:middle;
  font:900 1.9rem/1.15 'Nunito',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums;margin:0 .1em}
.pfe-f>span{padding:0 .2em;min-width:1.2ch;text-align:center}
.pfe-f>span:first-child{border-bottom:3px solid currentColor;padding-bottom:2px}
.pfe-f>span:last-child{padding-top:2px}
.pfe-f--mid{font-size:1.35rem;border-width:2px}
.pfe-f--mid>span:first-child{border-bottom-width:2px}
.pfe-f--mid .pfe-hole{min-width:1.6em;height:1.5em;border-width:2px;border-radius:6px;font-size:.75em;margin:3px 0}
.pfe-f--big{font-size:2.6rem}
.pfe-hole{display:inline-grid;place-items:center;min-width:1.45em;height:1.4em;border:2.5px dashed var(--red);border-radius:8px;
  color:#b3122f;font-size:.8em;line-height:1;margin:3px 0;box-sizing:border-box}
.pfe-eq{font:900 1.9rem/1 'Nunito',sans-serif;color:var(--navy);margin:0 .25em}
/* a pair of fractions with the same arrow over the top and under the bottom */
.pfe-pair{display:grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;width:max-content;max-width:100%;margin:12px auto 0}
.pfe-pair>.pfe-arc{grid-column:1/-1}
.pfe-pair--one{grid-template-columns:auto}
.pfe-arc{display:flex;flex-direction:column;align-items:center;justify-self:center;width:150px;color:var(--deep-text)}
.pfe-arc svg{display:block;width:120px;height:34px;fill:none;stroke:var(--deep);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pfe-arc b{font:800 1.05rem/1 'Nunito',sans-serif;order:-1;margin-bottom:-10px}
.pfe-arc--bot b{order:1;margin:-10px 0 0}
.pfe-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.pfe-models .ga-ex{margin-top:10px;max-width:none}
.diagram-head .ga-steps .ga-math .pfe-f{margin:2px 0}
/* 1. the pizza, and what the numbers mean */
.pfe-split{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;margin-top:14px;max-width:760px}
.pfe-pic svg,.pfe-pzwrap svg{display:block;width:100%;height:auto}
.pfe-split-txt p{color:var(--ink)}
.pfe-anat{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:stretch;margin-top:12px}
.pfe-anat .pfe-f--big{font-size:2.8rem}
.pfe-anat-lab{display:flex;flex-direction:column;justify-content:space-around;gap:8px;font-size:.95rem;color:var(--ink)}
.pfe-sl{fill:var(--light);stroke:var(--navy);stroke-width:2;stroke-linejoin:round;transition:fill .2s}
.pfe-sl--on{fill:var(--sky)}
.pfe-sl[role=button]{cursor:pointer;outline:none}
.pfe-sl[role=button]:hover{fill:#cfe6fb}
.pfe-sl--on[role=button]:hover{fill:#5fc0ea}
.pfe-sl[role=button]:focus-visible{stroke:var(--red);stroke-width:4}
.pfe-rim{fill:none;stroke:var(--navy);stroke-width:4}
.pfe-pzrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 30px;margin-top:12px}
.pfe-pzwrap{width:240px;max-width:70vw}
.pfe-pzfrac{min-width:90px;text-align:center}
.pfe-slices .pca-lvtxt{min-width:5.6em;text-align:center}
#pfe-pz-read{min-height:3.4em}
/* 2. the fraction wall */
.pfe-wallwrap{max-width:720px;margin:12px 0 0}
.pfe-wall{display:block;width:100%;height:auto}
.pfe-wb rect{fill:var(--white);stroke:var(--navy);stroke-width:1.6;transition:fill .2s}
.pfe-wb--eq rect{fill:var(--sky)}
.pfe-wb--pick rect{fill:var(--deep)}
.pfe-wt{font:800 17px 'Nunito',sans-serif;fill:var(--navy);pointer-events:none}
.pfe-wbar{stroke:var(--navy);stroke-width:1.6;pointer-events:none}
.pfe-wb--pick .pfe-wt{fill:var(--white)}
.pfe-wb--pick .pfe-wbar{stroke:var(--white)}
.pfe-row{transition:opacity .2s}
.pfe-row--no{opacity:.38}
.pfe-wline{stroke:var(--red);stroke-width:3.5;stroke-dasharray:8 6;pointer-events:none}
.pfe-wall--live .pfe-wb{cursor:pointer;outline:none}
.pfe-wall--live .pfe-wb:hover rect{stroke-width:3}
.pfe-wall--live .pfe-wb:focus-visible rect{stroke:var(--red);stroke-width:4}
.pfe-wall-read{margin-top:12px;color:var(--ink);font-size:1.02rem;line-height:2.1;max-width:68ch;min-height:4.2em}
.pfe-wall-tip{margin-top:8px;color:var(--muted);font-size:.93rem}
/* 3. the chocolate bar */
.pfe-chocs{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:center;margin-top:10px}
.pfe-chocfig{width:240px;text-align:center;font-size:.9rem;color:var(--ink)}
.pfe-chocfig p{margin-top:4px}
.ga-ex .pfe-chocfig svg,.pfe-choc{display:block;width:100%;max-width:none;height:auto;margin:0}
.pfe-cbase{fill:var(--white);stroke:var(--navy);stroke-width:2.5}
.pfe-cp{fill:var(--light);stroke:#9fb7e0;stroke-width:1.5}
.pfe-cp--on{fill:var(--sky);stroke:var(--deep)}
.pfe-cp--new{animation:dg-fade .35s ease-out}
.pfe-cutrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;margin-top:12px}
.pfe-chocwrap{width:300px;max-width:100%}
.pfe-cutpair{min-width:230px;min-height:170px;display:grid;place-items:center}
.pfe-cutpair .pfe-pair{margin:0}
.pfe-cutlab{text-align:center;margin-top:10px;font-size:.92rem;font-weight:600;color:var(--navy)}
.pfe-cutbtns{justify-content:center;margin-top:6px}
.pfe-cutbtns .dg-btn{min-width:48px;font:900 1.2rem/1 'Nunito',sans-serif}
.pfe-cutbtns .dg-btn[aria-pressed=true]{background:var(--deep);border-color:var(--deep);color:var(--white)}
#pfe-cut-read{min-height:4.6em}
/* 4. missing number workshop */
.pfe-mnshow{min-height:190px;margin-top:6px}
.pfe-chain{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:8px;padding-bottom:6px;border-bottom:1px solid #e3ebf9}
.pfe-chain .pfe-f{font-size:1.5rem}
.pfe-entry{display:flex;justify-content:center;margin-top:6px;min-height:52px}
.pfe-entry-box{display:grid;place-items:center;min-width:86px;height:50px;padding:0 10px;border:3px solid var(--sky);border-radius:12px;
  font:900 1.7rem/1 'Nunito',sans-serif;color:var(--navy);background:var(--white)}
.pfe-pad{grid-template-columns:repeat(6,minmax(0,1fr))}
.pfe-key--del{font-size:1.2rem}
.pfe-key--go{grid-column:span 6;font:700 15px/1 'Poppins',sans-serif;background:var(--deep);border-color:var(--deep);color:var(--white)}
.pfe-key--go:hover{background:#1f66b8}
#pfe-mn-read{min-height:4.6em}
/* 5. simplifying steps */
.pfe-ladder{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 4px;padding:0;margin:14px auto 0;min-height:84px}
.pfe-rung{display:flex;align-items:center}
.pfe-by{display:inline-grid;place-items:center;height:30px;padding:0 10px;margin:0 6px;border-radius:15px;background:var(--deep);color:var(--white);
  font:800 .95rem/1 'Nunito',sans-serif}
.pfe-by::after{content:"\2192";margin-left:5px}
.pfe-divs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;max-width:440px;margin:10px auto 0}
.pfe-div{padding:10px 0;font:900 1.15rem/1 'Nunito',sans-serif}
.pfe-done{border-color:#1d7a3a;color:#1d5c30}
.pfe-done:hover{background:#e7f6ec}
#pfe-sl-read{min-height:4.6em}
.pfe-rules{margin-top:14px}
/* 6. odd one out */
.pfe-odd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;max-width:480px;margin:14px auto 0}
.pfe-card{padding:14px 4px;border:2px solid #b9cdee;border-radius:16px;background:var(--white);cursor:pointer;box-shadow:0 3px 0 #d6e6fb}
.pfe-card:hover{border-color:var(--sky)}
.pfe-card:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pfe-card:disabled{cursor:default}
.pfe-card.plv-ok{border-color:#1d7a3a;background:#e7f6ec}
.pfe-card.plv-bad{border-color:var(--red);background:#fff3f5}
#pfe-odd-read{min-height:5em}
/* 7. quiz */
.pfe-qtext{line-height:1.9}
.pfe-qpic{display:block;width:130px;margin:0 auto 6px}
.pfe-qpic svg{display:block;width:100%;height:auto}
.pfe-choice{font-size:1.15rem}
.pfe-choice .fr{font-size:.95em}
@media (max-width:640px){
  .pfe-models{grid-template-columns:1fr}
  .pfe-split{grid-template-columns:1fr;justify-items:center}
  .pfe-pic{width:170px}
  .pfe-f{font-size:1.6rem}
  .pfe-f--big,.pfe-anat .pfe-f--big{font-size:2.2rem}
  .pfe-eq{font-size:1.6rem}
  .pfe-odd{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfe-wt{font-size:21px}
  .pfe-wbar{stroke-width:2.2}
  #pfe-pz-read,#pfe-cut-read,#pfe-mn-read,#pfe-sl-read{min-height:6.4em}
  #pfe-odd-read{min-height:7.4em}
}
@media (prefers-reduced-motion:reduce){.pfe-sl,.pfe-wb rect,.pfe-row{transition:none}.pfe-cp--new{animation:none}}

/* ---------------- maths 11+: mixed numbers (topic_diagrams/eleven_plus_mixed_numbers_and_improper_fractions.py,
   interactions in js/eleven_plus_mixed_numbers_and_improper_fractions.js). Reuses pfe- (3.1: big fractions, ? boxes,
   pizzas, keypad) and pca- (2.1: levels). ---------------- */
/* mixed numbers: the whole number beside the fraction, about the height of the whole fraction */
.pmi-mix{white-space:nowrap}
.pmi-bmix{display:inline-flex;align-items:center;vertical-align:middle;gap:.08em}
.pmi-bw{font:900 2rem/1 'Nunito',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.pmi-bmix--big .pmi-bw,.pmi-bw--big{font-size:3.6rem}
.pmi-bw--alone{display:inline-block;vertical-align:middle;margin:0 .1em}
.pmi-bmix .pfe-f{margin-left:0}
.pmi-bw .pfe-hole{font-size:.55em;height:1.75em;min-width:1.5em}
.pmi-eq{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 2px;margin-top:10px}
.pmi-line-eg{font-size:1.05rem;color:var(--ink);line-height:2.3}
.pmi-kinds{max-width:720px}
.pmi-kinds th[scope=row]{white-space:nowrap;color:var(--navy)}
.pmi-kinds td:nth-child(2){text-align:center}
.pmi-kinds td:last-child{white-space:nowrap}
/* 1. sorter */
.pmi-sortcard{display:flex;justify-content:center;align-items:center;min-height:150px;margin-top:10px}
.pmi-sortbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:560px;margin:10px auto 0}
.pmi-kind{padding:12px 6px;font:700 14px/1.2 'Poppins',sans-serif}
.pmi-kind.plv-ok,.pmi-yes.plv-ok,.pmi-no.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
.pmi-kind.plv-bad,.pmi-yes.plv-bad,.pmi-no.plv-bad{background:#fff3f5;border-color:var(--red);color:#b3122f}
.pmi-kind:disabled,.pmi-yes:disabled,.pmi-no:disabled{cursor:default}
.pmi-kind:disabled:not(.plv-ok):not(.plv-bad),.pmi-yes:disabled:not(.plv-ok):not(.plv-bad),.pmi-no:disabled:not(.plv-ok):not(.plv-bad){opacity:.5}
#pmi-so-read,#pmi-sn-read{min-height:4.6em}
/* 2. pizzas */
.pmi-pizzas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;margin-top:10px}
.pmi-pz{width:118px;margin:0;text-align:center}
.pmi-pz svg{display:block;width:100%;height:auto}
.ga-ex .pmi-pz svg{max-width:none;margin:0}
.pmi-pz figcaption{margin-top:4px;font:700 .9rem/1.6 'Poppins',sans-serif;color:var(--ink)}
.pmi-pz--full figcaption{color:#1d5c30}
.pmi-sizes .dg-seg-btn{padding:9px 11px}
.pmi-cnt{min-width:7.5em;text-align:center}
.pmi-stwrap{min-height:150px}
.pmi-stboth{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:10px;min-height:120px}
#pmi-st-read{min-height:4.6em}
/* 3 and 4. workshops */
.pmi-wshow{width:100%;min-height:150px;display:grid;place-items:center}
.pmi-work{width:100%;box-sizing:border-box;max-width:560px;margin:8px auto 0;padding-left:1.6em;color:var(--ink);min-height:1em}
.pmi-work li{margin-top:6px;background:#e7f6ec;border-radius:10px;padding:6px 10px;line-height:30px}
.pmi-work .fr{margin-block:-.6em}
#pmi-a-read,#pmi-b-read{min-height:4.6em}
/* 5. number line */
.pmi-linewrap{width:100%;max-width:680px;margin:10px auto 0}
.ga-ex .pmi-linewrap{margin-left:0}
.pmi-line{display:block;width:100%;height:auto;overflow:visible}
.ga-ex .pmi-line{max-width:none;margin:0}
.pmi-axis{stroke:var(--navy);stroke-width:3;fill:none;stroke-linecap:round}
.pmi-tick{stroke:var(--navy);stroke-width:2}
.pmi-tick--w{stroke-width:3}
.pmi-nlab{font:800 19px 'Nunito',sans-serif;fill:var(--navy)}
.pmi-dot{fill:var(--red);stroke:var(--white);stroke-width:3}
.pmi-gap{fill:transparent;stroke:#b9cdee;stroke-width:2;stroke-dasharray:6 5;cursor:pointer;outline:none}
.pmi-gap:hover{fill:rgba(41,171,226,.12)}
.pmi-gap:focus-visible{stroke:var(--red);stroke-width:3}
.pmi-gap--on{fill:rgba(41,171,226,.28);stroke:var(--deep);stroke-dasharray:none}
.pmi-gap--bad{fill:#fff3f5;stroke:var(--red)}
.pmi-tk{fill:rgba(41,171,226,.1);stroke:#b9cdee;stroke-width:2;stroke-dasharray:5 4;cursor:pointer;outline:none}
.pmi-tk:hover{fill:rgba(41,171,226,.22)}
.pmi-tk:focus-visible{stroke:var(--red)}
.pmi-tk--bad{fill:#fff3f5;stroke:var(--red)}
.pmi-zoom{border-top:2px dashed #b9cdee;padding-top:8px}
#pmi-nl-read{min-height:4.6em}
/* 6. snap */
.pmi-snap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;min-height:150px;margin-top:8px}
.pmi-vs{font:700 1rem/1 'Poppins',sans-serif;color:var(--muted)}
.pmi-snapbtns{justify-content:center}
.pmi-yes,.pmi-no{padding:12px 18px;font:700 15px/1.2 'Poppins',sans-serif}
/* 7. quiz */
.pmi-qpic{display:block;margin:0 auto 6px}
.pmi-qpic .pmi-pizzas{margin-top:0;gap:6px 10px}
.pmi-qpic .pmi-pz{width:80px}
.pmi-qpic figcaption{display:none}
@media (max-width:640px){
  .pmi-sortbtns{grid-template-columns:1fr}
  .pmi-pz{width:96px}
  .pmi-bw{font-size:1.7rem}
  .pmi-bmix--big .pmi-bw,.pmi-bw--big{font-size:2.9rem}
  .pmi-sizes .dg-seg-btn{padding:8px 7px;font-size:12px}
  .pmi-nlab{font-size:24px}
  #pmi-so-read,#pmi-sn-read,#pmi-st-read,#pmi-a-read,#pmi-b-read,#pmi-nl-read{min-height:6.6em}
}

/* ---------------- maths 11+: adding fractions (topic_diagrams/eleven_plus_adding_and_subtracting_fractions.py,
   interactions in js/eleven_plus_adding_and_subtracting_fractions.js). Reuses pfe- (3.1), pmi- (3.2) and pca- (2.1). ---------------- */
/* fraction strips */
.paf-stripwrap{width:100%;max-width:620px;margin:10px auto 0}
.ga-ex .paf-stripwrap{margin-left:0}
.paf-strip{display:block;width:100%;height:auto}
.ga-ex .paf-strip{max-width:none;margin:0}
.paf-cell{fill:var(--white);stroke:#9fb7e0;stroke-width:1.5}
.paf-cell--a{fill:var(--deep);stroke:var(--white)}
.paf-cell--b{fill:var(--sky);stroke:var(--white)}
.paf-cell--x{fill:#fbd3db;stroke:var(--red);stroke-width:2}
.paf-cross{stroke:#b3122f;stroke-width:4;stroke-linecap:round;pointer-events:none}
.paf-bar{fill:none;stroke:var(--navy);stroke-width:2.5}
.paf-sizes .dg-seg-btn{padding:9px 12px}
.paf-ops{margin-left:10px}
.paf-phase{display:flex;width:max-content;max-width:100%;margin:10px auto 0}
.paf-tip{min-height:1.6em}
.paf-strip--tap .paf-cell{cursor:pointer;outline:none}
.paf-strip--tap .paf-cell:not(.paf-cell--a):not(.paf-cell--b):not(.paf-cell--x):hover{fill:#e3f1fc}
.paf-strip--tap .paf-cell--a:hover{fill:#1f66b8}
.paf-strip--tap .paf-cell:focus-visible{stroke:var(--red);stroke-width:4}
.paf-sa-eq{min-height:96px}
#paf-sa-read{min-height:4.6em}
/* same-size pieces */
.paf-pairs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;margin-top:10px}
.paf-bars{width:260px;max-width:100%}
.paf-bars p{margin:6px 0 2px;font-size:.95rem;color:var(--ink)}
.paf-arrow{font:900 1.6rem/1 'Nunito',sans-serif;color:var(--sky)}
.paf-rows{width:100%;max-width:640px;margin:10px auto 0}
.paf-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.paf-rowlab{min-width:8.5em;font:700 .85rem/1.2 'Poppins',sans-serif;color:var(--muted)}
.paf-chip{min-width:44px;padding:8px 6px;font:800 1rem/1 'Nunito',sans-serif}
.paf-chip.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
.paf-chip:disabled:not(.plv-ok){opacity:.45;cursor:default}
.paf-chip.pbo-no{border-color:var(--red);background:#fff3f5;color:#b3122f}
.paf-recut{width:100%;margin-top:6px}
.paf-recut-say{text-align:center;margin-top:8px;color:var(--ink);line-height:2}
#paf-cd-read{min-height:4.6em}
/* workshops: equations can be long, so they wrap */
.paf-wshow{min-height:130px}
.paf-wshow .pmi-eq{row-gap:10px}
#paf-a-read,#paf-b-read{min-height:4.6em}
/* pizza party */
.paf-pzwrap{width:100%;margin-top:8px}
.paf-then{text-align:center;font-weight:700;color:var(--muted);margin:6px 0}
.paf-cutpz .pfe-sl{stroke:var(--white);stroke-width:5}
.paf-cutpz .pfe-rim{stroke-dasharray:10 7}
.pfe-sl.paf-gone{fill:#fff3f5;stroke:var(--red);stroke-dasharray:5 4}
.paf-pz--gone svg{opacity:.55}
.paf-pz--gone figcaption{color:#b3122f}
.paf-pzbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;
  animation:paf-wobble 1.2s ease-in-out infinite}
.paf-pzbtn:hover svg,.paf-pzbtn:focus-visible svg{filter:drop-shadow(0 0 6px rgba(232,41,74,.55))}
.paf-pzbtn:focus-visible{outline:3px solid var(--red);outline-offset:3px}
@keyframes paf-wobble{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg)}}
.paf-pzbtns{justify-content:center}
#paf-pz-read{min-height:4.6em}
/* right or wrong */
.paf-rw{min-height:120px}
.paf-rwbtns{justify-content:center}
#paf-rw-read{min-height:4.6em}
@media (max-width:640px){
  .paf-sizes .dg-seg-btn{padding:8px 8px}
  .paf-ops{margin:8px 0 0}
  .paf-rowlab{min-width:100%}
  #paf-sa-read,#paf-cd-read,#paf-a-read,#paf-b-read,#paf-pz-read,#paf-rw-read{min-height:6.6em}
}
@media (prefers-reduced-motion:reduce){.paf-pzbtn{animation:none}}
.paf-nowrap{white-space:nowrap}

/* ---------------- maths 11+: multiplying fractions (topic_diagrams/eleven_plus_multiplying_and_dividing_fractions.py,
   interactions in js/eleven_plus_multiplying_and_dividing_fractions.js). Reuses pfe- (3.1), pmi- (3.2), paf- (3.3) and pca- (2.1). ---------------- */
.pmd-linewrap{width:100%;max-width:680px;margin:10px auto 0}
.ga-ex .pmd-linewrap{margin-left:0}
.pmd-line{display:block;width:100%;height:auto;overflow:visible}
.ga-ex .pmd-line{max-width:none;margin:0}
.pmd-arc{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round}
.pmd-arc--new{stroke-dasharray:1;stroke-dashoffset:1;animation:dg-draw .4s ease-out forwards}
#pmd-fj-read{min-height:4.6em}
/* the grid (area model) and the shared bar */
.pmd-gridwrap{width:100%;max-width:340px;margin:10px auto 0}
.ga-ex .pmd-gridwrap{margin-left:0}
.pmd-grid{display:block;width:100%;height:auto}
.ga-ex .pmd-grid{max-width:none;margin:0}
.pmd-cell{fill:var(--white);stroke:#9fb7e0;stroke-width:1.5}
.pmd-cell--col{fill:#bfe3f6}
.pmd-cell--row{fill:#fbd3db}
.pmd-cell--both{fill:var(--deep)}
.pmd-cell--fade{opacity:.5}
.pmd-grid--tap .pmd-cell{cursor:pointer;outline:none}
.pmd-grid--tap .pmd-cell:hover{stroke:var(--navy);stroke-width:2.5}
.pmd-grid--tap .pmd-cell:focus-visible{stroke:var(--red);stroke-width:4}
.pmd-keyline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.92rem;color:var(--ink);margin-top:8px}
.pmd-sw{display:inline-block;width:16px;height:16px;border-radius:4px;border:1.5px solid #9fb7e0;vertical-align:middle}
.pmd-sw--col{background:#bfe3f6}
.pmd-sw--row{background:#fbd3db}
.pmd-sw--both{background:var(--deep);border-color:var(--deep)}
#pmd-gm-read,#pmd-sh-read{min-height:4.6em}
.pmd-cuts{justify-content:center}
.pmd-cut.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
.pmd-cut.plv-bad{background:#fff3f5;border-color:var(--red);color:#b3122f}
.pmd-cut:disabled{cursor:default}
.pmd-cut:disabled:not(.plv-ok):not(.plv-bad){opacity:.5}
.pmd-pic{width:100%;min-height:120px;display:grid;place-items:center}
#pmd-wc-read,#pmd-w-read{min-height:4.6em}
@media (max-width:640px){
  #pmd-fj-read,#pmd-gm-read,#pmd-sh-read,#pmd-wc-read,#pmd-w-read{min-height:6.6em}
}
@media (prefers-reduced-motion:reduce){.pmd-arc--new{animation:none;stroke-dashoffset:0}}

/* ---------------- maths 11+: fractions of amounts (topic_diagrams/eleven_plus_fractions_of_amounts.py,
   interactions in js/eleven_plus_fractions_of_amounts.js). Reuses pfe- (3.1), pmi- (3.2), paf- (3.3), pmd- (3.4), pca- (2.1). ---------------- */
/* counters in groups */
.pfa-dotswrap{max-width:240px;margin-top:10px}
.pfa-dots{display:block;width:100%;height:auto}
.ga-ex .pfa-dots{max-width:none;margin:0}
.pfa-group{fill:var(--white);stroke:#b9cdee;stroke-width:1.5}
.pfa-group--on{fill:#e7f6ec;stroke:#1d7a3a;stroke-width:2}
.pfa-dot{fill:var(--sky);stroke:var(--navy);stroke-width:1.5}
.pfa-dot--on{fill:var(--deep)}
/* sweet sharing */
.pfa-sweets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:460px;margin:12px auto 0}
.pfa-sweet{display:inline-block;width:34px;height:34px;padding:0;border:2px solid var(--navy);border-radius:50%;background:var(--sky);cursor:pointer;
  box-shadow:inset 0 -4px 0 rgba(27,27,78,.18)}
button.pfa-sweet:hover{transform:scale(1.08)}
.pfa-sweet:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.pfa-sweet--on{background:var(--deep);border-color:#1d7a3a;box-shadow:0 0 0 3px #a8dcb9}
.pfa-sweets--rows{flex-direction:column;align-items:center;gap:6px}
.pfa-row{display:flex;gap:8px;padding:5px 10px;border:1.5px solid #e3ebf9;border-radius:12px}
.pfa-row--on{border-color:#1d7a3a;background:#e7f6ec}
span.pfa-sweet{cursor:default}
.pfa-tray{text-align:center;margin-top:10px;color:var(--ink)}
#pfa-sw-read{min-height:4.6em}
/* bar model */
.pfa-barwrap{width:100%;max-width:620px;margin:10px auto 0}
.ga-ex .pfa-barwrap{margin-left:0}
.pfa-bar{display:block;width:100%;height:auto}
.ga-ex .pfa-bar{max-width:none;margin:0}
.pfa-part{fill:var(--white);stroke:#9fb7e0;stroke-width:1.5}
.pfa-part--on{fill:var(--sky)}
.pfa-plab{font:800 20px 'Nunito',sans-serif;fill:var(--navy);pointer-events:none}
.pfa-brace{fill:none;stroke:var(--navy);stroke-width:2}
.pfa-brace--on{stroke:var(--deep)}
.pfa-blab{font:900 22px 'Nunito',sans-serif;fill:var(--navy)}
.pfa-blab--on{fill:var(--deep-text)}
.pfa-blab--q{fill:#b3122f}
.pfa-bar--tap .pfa-part{cursor:pointer;outline:none}
.pfa-bar--tap .pfa-part:not(.pfa-part--on):hover{fill:#e3f1fc}
.pfa-bar--tap .pfa-part:focus-visible{stroke:var(--red);stroke-width:4}
.pfa-cuts{justify-content:center}
#pfa-bb-read,#pfa-w-read{min-height:4.6em}
/* clock */
.pfa-clockwrap{width:200px;max-width:100%;margin:10px auto 0}
.pfa-clockwrap--big{width:260px}
.pfa-clock{display:block;width:100%;height:auto}
.ga-ex .pfa-clock{max-width:none;margin:0}
.pfa-face{fill:var(--white);stroke:var(--navy);stroke-width:4}
.pfa-sector{fill:var(--sky);opacity:.85}
.pfa-tick{stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.pfa-num{font:800 16px 'Nunito',sans-serif;fill:var(--navy);pointer-events:none}
.pfa-hub{fill:var(--navy)}
.pfa-mark{fill:rgba(41,171,226,.12);stroke:#b9cdee;stroke-width:2;stroke-dasharray:4 3;cursor:pointer;outline:none}
.pfa-mark:hover{fill:rgba(41,171,226,.3)}
.pfa-mark:focus-visible{stroke:var(--red)}
.pfa-mark--bad{fill:#fff3f5;stroke:var(--red);stroke-dasharray:none}
#pfa-ck-read{min-height:4.6em}
/* which is more */
.pfa-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:460px;margin:12px auto 0}
.pfa-card{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 8px;border:2px solid #b9cdee;border-radius:16px;background:var(--white);cursor:pointer;box-shadow:0 3px 0 #d6e6fb}
.pfa-card:hover{border-color:var(--sky)}
.pfa-card:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pfa-card:disabled{cursor:default}
.pfa-card.plv-ok{border-color:#1d7a3a;background:#e7f6ec}
.pfa-card.plv-bad{border-color:var(--red);background:#fff3f5}
.pfa-of{font:700 1rem/1 'Poppins',sans-serif;color:var(--muted)}
.pfa-n{font:900 1.6rem/1 'Nunito',sans-serif;color:var(--navy)}
#pfa-wm-read{min-height:4.6em}
@media (max-width:640px){
  .pfa-sweet{width:30px;height:30px}
  .pfa-plab{font-size:24px}
  #pfa-sw-read,#pfa-bb-read,#pfa-ck-read,#pfa-w-read,#pfa-wm-read{min-height:6.6em}
}

/* ---------------- maths 11+: decimal operations (topic_diagrams/eleven_plus_decimal_operations.py,
   interactions in js/eleven_plus_decimal_operations.js). Reuses pca- (2.1), pdv- (2.3), plv-/pld- (1.1, 1.2), pmd- (3.4).
   Red: the decimal point. Light blue: a 0 written in to fill an empty place. ---------------- */
/* decimal column sums: op, whole columns, the point's narrow column, decimal columns */
.pdo-sum{--pw:22px;grid-template-columns:var(--w) repeat(var(--W),var(--w)) var(--pw) repeat(var(--F),var(--w))}
.pdo-pt{position:relative}
.pdo-dot{position:absolute;left:50%;bottom:13px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--red)}
/* the colour key on every number: whole numbers dark blue, decimals blue (pdo-d marks a decimal column), points red.
   Carries, exchanges and checked answers follow it too, so their column is never mistaken */
.pdo-sum .pca-s--ex,.pdo-sum .pca-s--carry,.pdo-sum .pca-d--ok,.pdo-sum .pca-d--help{color:var(--navy)}
.pdo-sum .pca-d.pdo-d,.pdo-sum .pca-s.pdo-d{color:var(--deep-text)}
.pdo-sum .pca-d.pca-d--x{color:#8590a8}
.pdo-sum .pca-d.pdo-pad{font-style:italic}
.pdo-sum .pca-d--help{background:var(--light)}
.pca-lab.pdo-lab--d{color:var(--deep-text)}
.pdo-own::after{content:"";position:absolute;right:-6px;bottom:13px;width:10px;height:10px;border-radius:50%;background:var(--red);z-index:1}
.pca-d.pdo-fill{margin:4px;height:46px;border:2px dashed var(--sky);border-radius:10px;background:#e8f6fd;cursor:pointer}
.pca-d.pdo-fill:hover{background:#d3eefb}
.pca-d.pdo-fill:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pca-sum--quiz.pdo-sum{--pw:16px}
.pca-sum--quiz .pdo-dot{bottom:11px;width:9px;height:9px;margin-left:-4.5px}
/* tenths strips */
.pdo-stripwrap{width:100%;max-width:640px;margin-top:10px}
.pdo-strips{display:block;width:100%;height:auto}
.ga-ex .pdo-strips{max-width:none;margin:0}
.pdo-tc{fill:var(--white);stroke:#9fb7e0;stroke-width:1.5}
.pdo-tc--a{fill:var(--sky)}
.pdo-tc--b{fill:var(--deep)}
.pdo-strip{fill:none;stroke:var(--navy);stroke-width:2.5}
.pdo-brace{fill:none;stroke:var(--navy);stroke-width:2}
.pdo-slab{font:800 16px 'Nunito',sans-serif;fill:var(--navy)}
.pdo-slab--d{fill:var(--deep-text)}
/* put the point back */
.pdo-q{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:14px auto 0;
  font:900 2.2rem/1.2 'Nunito',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums;min-height:2.6em}
.pdo-qn{display:inline-flex;align-items:baseline}
.pdo-qd{font:inherit;color:inherit;background:none;border:2px solid transparent;border-radius:10px;padding:0 5px;cursor:pointer;line-height:1.15}
.pdo-qd:hover{background:var(--light)}
.pdo-qd--d{color:var(--deep-text)}
.pdo-qd--on,.pdo-qd--on:hover{background:var(--deep);color:var(--white)}
.pdo-qd:disabled{cursor:default}
.pdo-qd:disabled:hover:not(.pdo-qd--on){background:none}
.pdo-qd:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pdo-qpt{color:var(--red)}
.pdo-qop{color:var(--deep-text)}
.pdo-qcount{flex-basis:100%;text-align:center;font:600 .95rem/1.4 'Poppins',sans-serif;color:var(--muted);min-height:1.4em}
.pdo-fact{text-align:center;color:var(--ink);min-height:1.6em;margin-top:4px}
.pdo-calc{max-width:520px}
.pdo-wait{color:var(--muted);font-size:.95rem}
.pdo-cd{display:flex;flex-direction:column;align-items:center;padding:4px 1px}
.pdo-spare{opacity:.35}
.pdo-ptok--ok{cursor:default}
.pdo-tray{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;min-height:52px}
.pdo-ptray{width:50px;height:50px;border-radius:50%;border:2px dashed var(--red);background:#fff3f5;display:grid;place-items:center;
  cursor:grab;touch-action:none;padding:0}
.pdo-ptray--on{border-style:solid;box-shadow:0 0 0 4px rgba(232,41,74,.25)}
.pdo-ptray:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pdo-bigdot{width:18px;height:18px;border-radius:50%;background:var(--red)}
.pdo-traylab{font-size:.9rem;color:var(--muted)}
#pdo-pa-read,#pdo-pb-read{min-height:4.6em}
/* the hundred square */
.pdo-sqwrap{width:100%;max-width:240px;margin:10px auto 0}
.ga-ex .pdo-sqwrap{margin-left:0}
.pdo-sqwrap--big{max-width:320px}
.pdo-square{display:block;width:100%;height:auto}
.ga-ex .pdo-square{max-width:none;margin:0}
.pdo-sqframe{fill:none;stroke:var(--navy);stroke-width:2}
.pdo-square--tap .pmd-cell{cursor:pointer;outline:none}
.pdo-square--tap .pmd-cell:hover{stroke:var(--navy);stroke-width:2.5}
.pdo-square--tap .pmd-cell:focus-visible{stroke:var(--red);stroke-width:3.5}
.pdo-key{justify-content:center}
#pdo-sq-read{min-height:4.6em}
/* the decimal bus stop */
/* the bus stop on this page follows the colour key: whole numbers (the divisor too) dark blue, every digit after
   a point blue, carries in their digit's colour, the points red */
.pdo-bus .pdv-d,.pdo-bus .pdv-done.pdv-ok,.pdo-bus .pdv-done.pdv-help{color:var(--navy)}
.pdo-bus .pdv-done.pdv-help{background:var(--light);border-radius:8px}
.pdo-bus .pdv-q.pdv-pt~.pdv-q,.pdo-bus .pdv-a.pdv-pt~.pdv-a{color:var(--deep-text)}
.pdo-bus .pdv-k{color:inherit}
.pdo-bus .pdv-sum .pdv-pt{color:#b3122f}
.pdo-bus .pdo-added{font-style:italic}
.pdo-pad6 .pdo-key--pt{color:var(--red);font-size:2.4rem;line-height:.5}
.pdo-pad6 .pdo-key--zero{grid-column:span 4;font:700 15px/1 'Poppins',sans-serif;background:var(--deep);border-color:var(--deep);
  color:var(--white);box-shadow:0 3px 0 #1d5aa3}
.pdo-pad6 .pdo-key--zero:hover{background:#2368bb}
/* the scaling machine: a small place value chart */
.pdo-big{text-align:center;font:900 2.2rem/1.25 'Nunito',sans-serif;color:var(--navy);margin-top:12px;font-variant-numeric:tabular-nums}
.pdo-pvwrap{width:100%;max-width:440px;margin:10px auto 0}
.pdo-pv{display:grid;grid-template-columns:30px repeat(var(--c),minmax(0,1fr));gap:4px}
.pdo-pvop{display:grid;place-items:center;font:900 1.4rem/1 'Nunito',sans-serif;color:var(--deep-text)}
.pdo-pvd{display:grid;place-items:center;height:52px;border:2px solid #d6e6fb;border-radius:10px;background:var(--white);
  font:900 1.7rem/1 'Nunito',sans-serif;color:var(--navy);position:relative;overflow:visible}
.pdo-pvd--e{background:#f6f8fc;border-style:dashed}
.pdo-pvd.pld-d--d{color:var(--deep-text)}
.pdo-pvd.pld-pt::after{content:"";position:absolute;right:-7px;bottom:9px;width:9px;height:9px;border-radius:50%;background:var(--red);z-index:1}
.pdo-pvdg{display:inline-block}
.pdo-pvrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px}
.pdo-pvrow .pdo-pv{flex:1 1 180px;max-width:250px}
.pdo-pvarrow{font:800 1rem/1.2 'Nunito',sans-serif;color:var(--deep-text);white-space:nowrap}
#pdo-sc-read{min-height:4.6em}
/* be the teacher */
.pdo-work{text-align:center;margin:14px auto 0;font:900 1.8rem/1.3 'Nunito',sans-serif;color:var(--navy);min-height:2.7em;font-variant-numeric:tabular-nums}
.pdo-who{display:block;font:600 .95rem/1.4 'Poppins',sans-serif;color:var(--muted)}
#pdo-bt-read{min-height:4.6em}
@media (max-width:560px){
  .pdo-sum{--pw:16px}
  .pdo-dot,.pdo-own::after{bottom:11px}
  .pca-d.pdo-fill{height:40px;margin:3px}
  .pdo-q,.pdo-big{font-size:1.8rem}
  .pdo-work{font-size:1.45rem}
  .pdo-pvd{height:44px;font-size:1.4rem}
  #pdo-pa-read,#pdo-pb-read,#pdo-sq-read,#pdo-sc-read,#pdo-bt-read{min-height:6.6em}
}
.pdo-bus .pdv-sum{margin-bottom:14px}

/* ---------------- maths 11+: percentage of amounts (topic_diagrams/eleven_plus_percentage_of_amounts.py,
   interactions in js/eleven_plus_percentage_of_amounts.js). Reuses pca- (2.1), plv-/pld- (1.1, 1.2), pfe- (3.1), pmi- (3.2).
   Numbers follow the decimal colour key (whole dark blue, decimals blue, point red). Each block has its own colour:
   the 50 family (50%, 25%, 12.5%) in navy blues, the 10 family (10%, 5%, 2.5%, 1%) in sky blues. ---------------- */
.ppa-c--100,.ppa-c--50{--c:var(--navy);--t:#e6e8f2}
.ppa-c--25,.ppa-c--tot{--c:#1f66b8;--t:#e3eefa}
.ppa-c--12{--c:#6f9be0;--t:#edf3fc}
.ppa-c--10{--c:var(--deep);--t:#e5f0fc}
.ppa-c--5{--c:var(--sky);--t:#e5f6fd}
.ppa-c--2{--c:#8fd3f2;--t:#eef9fe}
.ppa-c--1{--c:#9fb7e0;--t:#f0f4fb}
.ppa-t--o{fill:var(--navy)}
.ppa-t--d{fill:var(--deep-text)}
.ppa-t--pt{fill:var(--red)}
.ppa-tip{border-left-color:var(--deep);background:#f5fbff}
/* the hundred square */
.ppa-sqwrap{width:100%;max-width:220px;margin:10px auto 0}
.ga-ex .ppa-sqwrap{margin-left:0}
.ppa-sqwrap--big{max-width:340px}
.ppa-square{display:block;width:100%;height:auto;border-radius:6px}
.ga-ex .ppa-square{max-width:none;margin:0}
.ppa-cell{fill:var(--white);stroke:#9fb7e0;stroke-width:1}
.ppa-cell--on{fill:var(--sky)}
.ppa-cell--bad{fill:#fbd3db}
.ppa-frame{fill:none;stroke:var(--navy);stroke-width:2}
.ppa-square--tap{outline:none}
.ppa-square--tap .ppa-cell{cursor:pointer}
.ppa-square--tap .ppa-cell:not(.ppa-cell--on):hover{fill:#d3eefb}
.ppa-square--tap:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.ppa-count{text-align:center;margin-top:8px;color:var(--ink)}
/* the block tree */
.ppa-treewrap{width:100%;max-width:520px;margin:10px auto 0}
.ga-ex .ppa-treewrap{margin-left:0}
.ppa-treewrap--big{max-width:600px}
.ppa-tree{display:block;width:100%;height:auto}
.ga-ex .ppa-tree{max-width:none;margin:0}
.ppa-edge{fill:none;stroke:var(--navy);stroke-width:2}
.ppa-edge--hot{stroke:var(--sky);stroke-width:3.5}
.ppa-head{fill:var(--navy)}
.ppa-head--hot{fill:var(--sky)}
.ppa-oplab-bg{fill:var(--white);stroke:#b9cdee;stroke-width:1.5}
.ppa-oplab-bg--hot{fill:#e8f6fd;stroke:var(--sky);stroke-width:2.5}
.ppa-oplab{font:800 15px 'Nunito',sans-serif;fill:var(--deep-text)}
.ppa-node--100,.ppa-node--50{--c:var(--navy);--t:#e6e8f2}
.ppa-node--25{--c:#1f66b8;--t:#e3eefa}
.ppa-node--10{--c:var(--deep);--t:#e5f0fc}
.ppa-node--5{--c:var(--sky);--t:#e5f6fd}
.ppa-node--1{--c:#9fb7e0;--t:#f0f4fb}
.ppa-box{fill:var(--white);stroke:var(--c);stroke-width:3}
.ppa-band{fill:var(--t)}
.ppa-node--hot .ppa-box{stroke:var(--sky);stroke-width:5;fill:#f5fbff}
.ppa-node--wait{opacity:.5}
.ppa-bp{font:800 16px 'Nunito',sans-serif;fill:var(--navy)}
.ppa-bv{font:900 28px 'Nunito',sans-serif;fill:var(--navy)}
.ppa-bv--q{fill:#b3122f}
#ppa-tr-read,#ppa-sq-read{min-height:4.6em}
/* block sums: the meter and the tiles */
.ppa-sum{width:100%;max-width:600px;margin:10px auto 0}
.ga-ex .ppa-sum{margin:12px 0 4px}
.ppa-meter{padding-top:26px}
.ppa-bar{position:relative;display:flex;height:26px;border:2px solid var(--navy);border-radius:8px;background:var(--white)}
.ppa-seg{flex:none;height:100%;background:var(--c)}
.ppa-seg:first-child{border-radius:5px 0 0 5px}
.ppa-seg+.ppa-seg{box-shadow:inset 2px 0 0 var(--white)}
.ppa-seg--cut{position:absolute;top:0;bottom:0;background:#fbd3db;box-shadow:inset 2px 0 0 var(--white);border-radius:0 5px 5px 0}
.ppa-target{position:absolute;top:-8px;bottom:-8px;width:0;border-left:3px dashed var(--red);margin-left:-1.5px}
.ppa-target b{position:absolute;bottom:100%;left:0;transform:translateX(-50%);font:900 .95rem/1.2 'Nunito',sans-serif;white-space:nowrap;
  background:var(--white);border-radius:6px;padding:0 4px}
.ga-ex .ppa-target b{background:var(--light)}
.ppa-ends{display:flex;justify-content:space-between;margin-top:4px;font:700 .85rem/1.3 'Nunito',sans-serif;color:var(--muted)}
.ppa-tiles{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 6px;margin-top:14px}
.ppa-tile{position:relative;display:inline-flex;flex-direction:column;align-items:stretch;min-width:66px;padding:0;border:2px solid var(--c);
  border-radius:12px;background:var(--white);overflow:hidden;font:inherit;color:inherit;box-shadow:0 3px 0 var(--t)}
.ppa-tp{display:block;padding:4px 8px;background:var(--t);border-bottom:2px solid var(--c);font:800 .95rem/1.2 'Nunito',sans-serif;
  color:var(--navy);text-align:center}
.ppa-tv{display:block;padding:6px 8px;font:900 1.45rem/1.15 'Nunito',sans-serif;text-align:center;font-variant-numeric:tabular-nums}
.ppa-tv--q{color:#b3122f}
.ppa-tile--tot{border-width:3px}
.ppa-tile--tap{cursor:pointer}
.ppa-tile--tap:hover{transform:translateY(-2px)}
.ppa-tile--tap:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.ppa-tile--tap::after{content:"\00d7";position:absolute;top:2px;right:3px;font:800 .8rem/1 'Poppins',sans-serif;color:var(--muted)}
.ppa-plus{font:900 1.4rem/1 'Nunito',sans-serif;color:var(--deep-text)}
.ppa-empty{color:var(--muted);font-size:.95rem;min-height:3.6em;display:flex;align-items:center}
.ppa-bbwrap{width:100%}
.ppa-pal{justify-content:center;margin-top:10px}
.ppa-add{min-width:76px;border-radius:12px;font:800 1.1rem/1 'Nunito',sans-serif;color:var(--navy);background:var(--t);border:2px solid var(--c);box-shadow:0 3px 0 var(--c)}
.ppa-add:hover{background:var(--white)}
.ppa-eqgrp{display:inline-flex;align-items:center;gap:6px}
#ppa-bb-read,#ppa-w-read{min-height:4.6em}
/* flip it */
.ppa-card{display:inline-flex;align-items:baseline;gap:10px;font:900 2.4rem/1 'Nunito',sans-serif;font-variant-numeric:tabular-nums}
.ppa-of{font:700 1.1rem/1 'Poppins',sans-serif;color:var(--muted)}
.ppa-flipex{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:10px 0 8px}
.ppa-flipex .ppa-card{background:var(--white);border:2px solid #b9cdee;border-radius:16px;padding:12px 16px;font-size:1.8rem}
.ppa-flipex .ppa-card+.ppa-swap+.ppa-card{border-color:var(--sky)}
.ppa-swap{font:900 1.8rem/1 'Nunito',sans-serif;color:var(--deep-text)}
.ppa-flipwrap{display:flex;justify-content:center;margin-top:12px;perspective:900px}
.ppa-flip{position:relative;width:300px;max-width:100%;height:130px;padding:0;border:0;background:none;cursor:pointer;
  transform-style:preserve-3d;transition:transform .55s ease}
.ppa-flip--on{transform:rotateY(180deg)}
.ppa-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:3px solid #b9cdee;border-radius:20px;
  background:var(--white);box-shadow:0 4px 0 #d6e6fb;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ppa-face--back{transform:rotateY(180deg);border-color:var(--sky);background:#f5fbff}
.ppa-face--front::after,.ppa-face--back::after{content:"tap to swap";position:absolute;bottom:8px;font:600 .75rem/1 'Poppins',sans-serif;color:var(--muted)}
.ppa-face--back::after{content:"tap to swap back"}
.ppa-flip:focus-visible .ppa-face{outline:3px solid var(--sky);outline-offset:3px}
#ppa-fl-read{min-height:4.6em}
/* which is more */
.ppa-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:480px;margin:12px auto 0}
.ppa-pick{display:flex;align-items:center;justify-content:center;padding:18px 8px;border:2px solid #b9cdee;border-radius:16px;background:var(--white);
  cursor:pointer;box-shadow:0 3px 0 #d6e6fb;color:inherit}
.ppa-pick .ppa-card{font-size:1.7rem;gap:7px}
.ppa-pick:hover{border-color:var(--sky)}
.ppa-pick:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.ppa-pick:disabled{cursor:default}
.ppa-pick.plv-ok{border-color:#1d7a3a;background:#e7f6ec}
.ppa-pick.plv-bad{border-color:var(--red);background:#fff3f5}
#ppa-wm-same.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
#ppa-wm-same.plv-bad{background:#fff3f5;border-color:var(--red);color:#b3122f}
#ppa-wm-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.ppa-flip{transition:none}}
@media (max-width:560px){
  .ppa-tile{min-width:54px}
  .ppa-tp{font-size:.85rem;padding:3px 6px}
  .ppa-tv{font-size:1.2rem;padding:5px 6px}
  .ppa-plus{font-size:1.15rem}
  .ppa-card{font-size:2rem}
  .ppa-pick .ppa-card{font-size:1.3rem;gap:5px}
  .ppa-flipex .ppa-card{font-size:1.45rem;padding:10px 12px}
  .ppa-bv{font-size:32px}
  .ppa-bp{font-size:21px}
  .ppa-oplab{font-size:20px}
  #ppa-sq-read,#ppa-tr-read,#ppa-bb-read,#ppa-fl-read,#ppa-w-read,#ppa-wm-read{min-height:6.6em}
}

/* ---------------- maths 11+: percentage changes (topic_diagrams/eleven_plus_percentage_changes.py,
   interactions in js/eleven_plus_percentage_changes.js). Reuses ppa- (3.7: tiles, block colours, number tspans),
   pca- (2.1), plv-/pld- (1.1, 1.2), pfe- (3.1), pmi- (3.2). Numbers follow the decimal colour key. Blocks: the start
   light sky, added blocks sky, taken-away blocks pink and crossed out, empty blocks dashed. ---------------- */
.ppc-c--cut{--c:var(--red);--t:#fde8ec}
/* the bar model */
.ppc-barwrap{width:100%;max-width:560px;margin:10px auto 0}
.ga-ex .ppc-barwrap{margin-left:0}
.ppc-barwrap--big{max-width:640px}
.ppc-bar{display:block;width:100%;height:auto}
.ga-ex .ppc-bar{max-width:none;margin:0}
.ppc-part{stroke-width:2}
.ppc-part--on{fill:#cdeefb;stroke:var(--sky)}
.ppc-part--add{fill:var(--sky);stroke:var(--navy)}
.ppc-part--cut{fill:#fde3e8;stroke:var(--red);stroke-dasharray:5 4}
.ppc-part--off{fill:var(--white);stroke:#9fb7e0;stroke-dasharray:6 5}
.ppc-part--base{fill:var(--white);stroke:#9fb7e0}
.ppc-x{stroke:var(--red);stroke-width:2.5;opacity:.5;pointer-events:none}
.ppc-plab{font:800 20px 'Nunito',sans-serif;fill:var(--navy);pointer-events:none}
.ppc-plab--s{font-size:16px}
.ppc-plab--q{fill:#b3122f}
.ppc-brace{fill:none;stroke:var(--navy);stroke-width:2}
.ppc-brace--on{stroke:var(--deep)}
.ppc-brace--add{stroke:var(--sky)}
.ppc-brace--cut{stroke:var(--red)}
.ppc-blab{font:900 20px 'Nunito',sans-serif;fill:var(--navy)}
.ppc-blab.ppc-brace--on,.ppc-blab.ppc-brace--add{fill:var(--deep-text);stroke:none}
.ppc-blab.ppc-brace--cut,.ppc-blab.ppc-brace--q{fill:#b3122f;stroke:none}
.ppc-bar--tap{outline:none}
.ppc-bar--tap .ppc-part{cursor:pointer}
.ppc-bar--tap .ppc-part--off:hover{fill:#e3f4fc}
.ppc-bar--tap .ppc-part--on:hover{fill:#fde3e8}
.ppc-bar--tap:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}
.ppc-pop{animation:ppc-pop .35s ease-out;transform-box:fill-box;transform-origin:center}
@keyframes ppc-pop{from{transform:scale(.6);opacity:.2}to{transform:scale(1);opacity:1}}
/* the percentage line */
.ppc-linewrap{width:100%;max-width:600px;margin:10px auto 0}
.ga-ex .ppc-linewrap{margin-left:0}
.ppc-linewrap--big{max-width:640px}
.ppc-line{display:block;width:100%;height:auto}
.ga-ex .ppc-line{max-width:none;margin:0}
.ppc-axis{stroke:var(--navy);stroke-width:3}
.ppc-tick{stroke:var(--navy);stroke-width:2}
.ppc-tick--big{stroke-width:3}
.ppc-tlab{font:800 16px 'Nunito',sans-serif;fill:var(--navy)}
.ppc-tlab--end{font-weight:900}
.ppc-start{fill:var(--navy)}
.ppc-end{fill:var(--sky);stroke:var(--navy);stroke-width:2}
.ppc-jump{fill:none;stroke:var(--deep);stroke-width:3}
.ppc-jhead{fill:var(--deep)}
.ppc-jlab{font:900 18px 'Nunito',sans-serif;fill:var(--deep-text)}
.ppc-draw{animation:ppc-fade .5s ease-out}
@keyframes ppc-fade{from{opacity:0}to{opacity:1}}
.ppc-hit{fill:transparent;cursor:pointer;outline:none}
.ppc-hit:hover{fill:rgba(41,171,226,.16)}
.ppc-hit:focus-visible{fill:rgba(41,171,226,.16);stroke:var(--sky);stroke-width:2}
.ppc-badmark{fill:#fbd3db;stroke:var(--red);stroke-width:2}
/* the price tag */
.ppc-tagwrap{display:flex;justify-content:center;margin:12px 0 4px}
.ga-ex .ppc-tagwrap{justify-content:flex-start}
.ppc-tag{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;min-width:230px;padding:14px 64px 14px 46px;
  border:3px solid var(--navy);border-radius:12px 22px 22px 12px;background:var(--white);box-shadow:0 4px 0 #d6e6fb}
.ppc-hole{position:absolute;left:16px;top:50%;width:14px;height:14px;margin-top:-7px;border:3px solid var(--navy);border-radius:50%;background:var(--light)}
.ppc-item{font:700 .9rem/1.3 'Poppins',sans-serif;color:var(--muted)}
.ppc-old{font:900 2.3rem/1.1 'Nunito',sans-serif;font-variant-numeric:tabular-nums;transition:font-size .3s ease}
.ppc-new{font:900 2.3rem/1.1 'Nunito',sans-serif;font-variant-numeric:tabular-nums}
.ppc-new:empty{display:none}
.ppc-tag--done .ppc-old{font-size:1.25rem;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px}
.ppc-sticker{position:absolute;top:-16px;right:-16px;display:flex;align-items:center;justify-content:center;width:78px;height:78px;padding:6px;
  border:3px solid var(--red);border-radius:50%;background:var(--white);transform:rotate(12deg);text-align:center;
  font:900 1.05rem/1.05 'Nunito',sans-serif;color:#b3122f;box-shadow:0 3px 0 #f6c3cd}
.ppc-tag--up .ppc-sticker{border-color:var(--deep);color:var(--deep-text);box-shadow:0 3px 0 #cfe0f6}
.ga-ex .ppc-tag{margin:14px 16px 0 0}
#ppc-sh-tag{min-height:120px;align-items:center}
.ga-ex .ppc-plab,.ga-ex .ppc-plab--s{font-size:24px}
.ga-ex .ppc-blab{font-size:24px}
/* the workshop tiles */
.ppc-tiles{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 8px;margin-top:12px}
.ppc-tiles .ppa-tile{min-width:84px}
/* there and back */
.ppc-tb{display:grid;gap:8px;width:100%;max-width:560px;margin:12px auto 0}
.ga-ex .ppc-tb{margin-left:0}
.ppc-tbrow{display:grid;grid-template-columns:7.5em minmax(0,1fr);align-items:center;gap:10px}
.ppc-tblab{font:800 .92rem/1.2 'Nunito',sans-serif;color:var(--navy);text-align:right}
.ppc-tbtrack{position:relative;height:38px;border-radius:8px;background:var(--white);border:1.5px solid #e3ebf9}
.ga-ex .ppc-tbtrack{background:var(--white)}
.ppc-tbbar{height:100%;display:flex;align-items:center;justify-content:flex-start;padding-left:10px;border-radius:7px;background:#cdeefb;
  border:2px solid var(--sky);font:900 1.15rem/1 'Nunito',sans-serif;transform-origin:left center;min-width:3.4em}
.ppc-grow{animation:ppc-grow .6s ease-out}
@keyframes ppc-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ppc-tbline{position:absolute;top:-5px;bottom:-5px;width:0;border-left:3px dashed var(--navy);margin-left:-1.5px}
.ppc-tbwrap{width:100%}
.ppc-guess{justify-content:center;margin-top:10px}
.ppc-gbtn.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
.ppc-gbtn.plv-bad{background:#fff3f5;border-color:var(--red);color:#b3122f}
.ppc-gbtn:disabled:not(.plv-ok):not(.plv-bad){opacity:.55}
#ppc-gs-read,#ppc-sh-read,#ppc-ln-read,#ppc-w-read,#ppc-rv-read,#ppc-tb-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.ppc-pop,.ppc-draw,.ppc-grow{animation:none}.ppc-old{transition:none}}
@media (max-width:560px){
  .ppc-plab{font-size:30px}
  .ppc-plab--s{font-size:26px}
  .ppc-blab{font-size:30px}
  .ppc-tlab{font-size:28px}
  .ppc-jlab{font-size:30px}
  .ppc-tick{stroke-width:3}
  .ga-ex .ppc-plab,.ga-ex .ppc-plab--s{font-size:28px}
  .ga-ex .ppc-blab{font-size:30px}
  .ppc-tiles{gap:8px 4px}
  .ppc-tiles .ppa-tile{min-width:62px}
  .ppc-tag{min-width:0;padding:12px 58px 12px 40px}
  .ppc-old,.ppc-new{font-size:1.9rem}
  .ppc-sticker{width:68px;height:68px;font-size:.92rem}
  .ppc-tbrow{grid-template-columns:5.6em minmax(0,1fr);gap:6px}
  .ppc-tblab{font-size:.8rem}
  #ppc-gs-read,#ppc-sh-read,#ppc-ln-read,#ppc-w-read,#ppc-rv-read,#ppc-tb-read{min-height:6.6em}
}

/* ---------------- maths 11+: FDP conversions (topic_diagrams/eleven_plus_fdp_conversions.py,
   interactions in js/eleven_plus_fdp_conversions.js). Reuses ppa- (3.7: hundred square), pfe- (3.1: big fractions),
   pdo- (3.6: place value chart, decimal bus stop), pdv- (2.3), pca- (2.1), plv-/pld- (1.1, 1.2), pmi- (3.2).
   Numbers follow the decimal colour key. The three forms have their own frame colours: fraction navy, decimal
   deep blue, percentage sky. ---------------- */
/* the same amount three ways */
.pcv-trio{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 6px;margin-top:10px}
.ga-ex .pcv-trio{justify-content:flex-start}
.pcv-tile{display:inline-flex;flex-direction:column;align-items:stretch;min-width:92px;border:2px solid var(--c);border-radius:12px;background:var(--white);
  overflow:hidden;box-shadow:0 3px 0 var(--t)}
.pcv-tile--f{--c:var(--navy);--t:#e6e8f2}
.pcv-tile--d{--c:var(--deep);--t:#e5f0fc}
.pcv-tile--p{--c:var(--sky);--t:#e5f6fd}
.pcv-tl{padding:3px 8px;background:var(--t);border-bottom:2px solid var(--c);font:800 .8rem/1.2 'Nunito',sans-serif;color:var(--navy);text-align:center}
.pcv-tv{display:flex;align-items:center;justify-content:center;min-height:62px;padding:4px 8px;font:900 1.6rem/1.1 'Nunito',sans-serif;
  font-variant-numeric:tabular-nums}
.pcv-tv .pfe-f{font-size:1.25rem}
.pcv-eq,.pcv-eqs{font:900 1.5rem/1 'Nunito',sans-serif;color:var(--deep-text)}
.pcv-split{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:center;margin-top:12px;max-width:760px}
.pcv-split .ppa-sqwrap{margin:0}
.pcv-split--live{grid-template-columns:minmax(0,300px) minmax(0,1fr);max-width:none}
.pcv-simp{text-align:center;margin-top:10px;color:var(--ink);font-size:.95rem}
.pcv-simp .pfe-f{font-size:1.1rem}
#pcv-sq-read,#pcv-pv-read,#pcv-mk-read,#pcv-gd-read,#pcv-st-read,#pcv-w-read,#pcv-or-read{min-height:4.6em}
/* the × 100 machine */
.pcv-pvwrap{max-width:480px}
.pcv-pv .pdo-pvop{font-size:.95rem;white-space:nowrap}
.pcv-pv{grid-template-columns:52px repeat(var(--c),minmax(0,1fr))}
/* the digits slide in front of every box, whichever way they move (later boxes would otherwise paint over them) */
.pcv-pv .pdo-pvdg{position:relative;z-index:2}
.pcv-in{animation:ppc-fade .45s ease-out}
.pcv-bus{margin:10px 0 4px}
/* make it out of 100, and the workshop chain */
.pcv-mkshow,.pcv-chain{margin-top:10px}
.pcv-chainrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px}
.pcv-arr{display:inline-flex;flex-direction:column;align-items:center;color:var(--deep-text)}
.pcv-arr b{font:800 1rem/1 'Nunito',sans-serif;margin-bottom:2px}
.pcv-arr svg{width:56px;height:16px;fill:none;stroke:var(--deep);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pcv-big{font:900 1.9rem/1.1 'Nunito',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.pcv-big .pfe-hole{font-size:.8em;vertical-align:middle}
.pcv-ops{justify-content:center;margin-top:10px}
.pcv-op{min-width:66px;font-weight:800}
.pcv-op--div{border-style:dashed}
/* the conversion grid */
.pcv-gridwrap{width:100%;max-width:520px;margin:12px 0 0}
.pcv-gridwrap--live{margin:12px auto 0}
.pcv-grid{display:grid;gap:4px;width:100%}
.pcv-gr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.pcv-gr>span{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:10px;background:var(--white);border:2px solid #d6e6fb;
  font:900 1.35rem/1.1 'Nunito',sans-serif;font-variant-numeric:tabular-nums}
.pcv-gr--h>span{min-height:0;padding:6px 4px;border:0;font:800 .9rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.pcv-gr--h>span:nth-child(1){background:#e6e8f2}
.pcv-gr--h>span:nth-child(2){background:#e5f0fc}
.pcv-gr--h>span:nth-child(3){background:#e5f6fd}
.pcv-gc .fr{font-size:.95em}
.pcv-gc--given{background:var(--light)!important}
.pcv-q{width:100%;height:100%;min-height:50px;border:2px dashed var(--red);border-radius:8px;background:#fff7f8;color:#b3122f;
  font:900 1.4rem/1 'Nunito',sans-serif;cursor:pointer}
.pcv-q:hover{background:#ffeef1}
.pcv-q:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pcv-q--hot{border-style:solid;border-color:var(--sky);background:#e8f6fd;color:var(--deep-text);box-shadow:0 0 0 3px #bfe6f8}
.pcv-gr>span:has(.pcv-q){padding:0;border:0;background:none}
/* cards: make a set, and line them up */
.pcv-cards{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 8px;margin-top:12px}
.ga-ex .pcv-cards{justify-content:flex-start}
.pcv-card{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:88px;min-height:78px;padding:8px 12px;
  border:2px solid #b9cdee;border-radius:14px;background:var(--white);box-shadow:0 3px 0 #d6e6fb;font:900 1.6rem/1.1 'Nunito',sans-serif;
  font-variant-numeric:tabular-nums;color:var(--navy)}
.pcv-card--btn{cursor:pointer}
.pcv-card--btn:hover{border-color:var(--sky)}
.pcv-card--btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pcv-card--sel{border-color:var(--deep);border-width:3px;background:#e8f6fd;box-shadow:0 0 0 3px #bfe6f8}
.pcv-card--done{background:var(--light);border-color:#9fb7e0;box-shadow:none;cursor:default}
.pcv-card--done .pcv-cv{opacity:.75}
.pcv-tick{position:absolute;top:4px;right:7px;font:900 .9rem/1 'Nunito',sans-serif;color:var(--deep-text)}
.pcv-cs{margin-top:4px;font:800 .85rem/1 'Nunito',sans-serif;color:var(--muted)}
.pcv-lt{font:900 1.4rem/1 'Nunito',sans-serif;color:var(--deep-text)}
.pcv-deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:420px;margin:12px auto 0}
.pcv-deck .pcv-card{width:100%}
.pcv-rowlab{text-align:center;margin-top:14px;font:700 .9rem/1.3 'Poppins',sans-serif;color:var(--muted)}
.pcv-cards--line{min-height:84px;padding:6px;border:2px dashed #d6e6fb;border-radius:14px}
.pcv-empty{color:var(--muted);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.pcv-in{animation:none}}
@media (max-width:640px){
  .pcv-split,.pcv-split--live{grid-template-columns:1fr}
  .pcv-split .ppa-sqwrap{margin:0 auto}
  .pcv-tile{min-width:76px}
  .pcv-tv{font-size:1.3rem;min-height:54px}
  .pcv-gr>span{font-size:1.15rem;min-height:48px}
  .pcv-gr--h>span{font-size:.74rem;padding:5px 2px}
  .pcv-card{min-width:70px;min-height:68px;font-size:1.3rem;padding:6px 8px}
  .pcv-big{font-size:1.5rem}
  .pcv-pv{grid-template-columns:40px repeat(var(--c),minmax(0,1fr))}
  .pcv-pv .pdo-pvop{font-size:.8rem}
  #pcv-sq-read,#pcv-pv-read,#pcv-mk-read,#pcv-gd-read,#pcv-st-read,#pcv-w-read,#pcv-or-read{min-height:6.6em}
}

/* ---------------- maths 11+: direct proportion (topic_diagrams/eleven_plus_direct_proportion_and_scaling.py,
   interactions in js/eleven_plus_direct_proportion_and_scaling.js). Reuses ppa- (3.7: number tspans), pca- (2.1: keypad,
   levels), pfe- (3.1: ? boxes, keypad), pcv- (3.9: ? buttons), pmi- (3.2: working), plv-/pld- (1.1, 1.2). Numbers follow
   the decimal colour key. The proportion table and the double number line are SVG; recipe cards and the shop are HTML. ---------------- */
/* the proportion table */
.pdp-tabwrap{width:100%;max-width:640px;margin:10px 0 0}
.pdp-tabwrap--live{max-width:540px;margin:12px auto 0}
.pdp-tab{display:block;width:100%;height:auto}
.ga-ex .pdp-tab{max-width:none;margin:0}
.pdp-lc{fill:#e6e8f2;stroke:#b9cdee;stroke-width:2}
.pdp-c{fill:var(--white);stroke:#b9cdee;stroke-width:2}
.pdp-tl{font:800 19px 'Nunito',sans-serif;fill:var(--navy)}
.pdp-tv{font:900 24px 'Nunito',sans-serif;fill:var(--navy);font-variant-numeric:tabular-nums}
.pdp-tv--q{fill:#b3122f}
.pdp-qb{fill:#fff7f8;stroke:var(--red);stroke-width:2.5;stroke-dasharray:6 4}
.pdp-arr{fill:none;stroke:var(--deep);stroke-width:2.5;stroke-linecap:round}
.pdp-ah{fill:var(--deep)}
.pdp-al{font:900 20px 'Nunito',sans-serif;fill:var(--deep-text)}
.pdp-arr--bad{stroke:var(--red);stroke-dasharray:6 5}
.pdp-ah.pdp-arr--bad{fill:var(--red);stroke:none}
.pdp-al.pdp-arr--bad{fill:#b3122f}
.pdp-pop{animation:pdp-pop .35s ease-out;transform-box:fill-box;transform-origin:center}
@keyframes pdp-pop{from{transform:scale(.6);opacity:.2}to{transform:scale(1);opacity:1}}
/* the double number line */
.pdp-dlwrap{width:100%;max-width:680px;margin:10px 0 0}
.pdp-dlwrap--live{margin:12px auto 0}
.pdp-dl{display:block;width:100%;height:auto}
.ga-ex .pdp-dl{max-width:none;margin:0}
.pdp-dn{font:800 18px 'Nunito',sans-serif;fill:var(--muted)}
.pdp-dax{stroke:var(--navy);stroke-width:3}
.pdp-dtk{stroke:var(--navy);stroke-width:2}
.pdp-dv{font:900 20px 'Nunito',sans-serif;fill:var(--navy);font-variant-numeric:tabular-nums}
.pdp-mk--ok{fill:#cdeefb;stroke:var(--sky);stroke-width:2.5}
.pdp-mk--bad{fill:#fde3e8;stroke:var(--red);stroke-width:2.5}
.pdp-hit{fill:transparent;cursor:pointer;outline:none}
.pdp-hit:hover{fill:rgba(41,171,226,.10)}
.pdp-hit:focus-visible{fill:rgba(41,171,226,.14);stroke:var(--sky);stroke-width:2}
.pdp-draw{animation:pdp-fade .6s ease-out}
@keyframes pdp-fade{from{opacity:0}to{opacity:1}}
.pdp-arc--old{opacity:.22}
/* recipe cards */
.pdp-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px 8px;margin-top:12px}
.pdp-flow--live{justify-content:center;min-height:180px}
.pdp-card{flex:1 1 0;min-width:128px;max-width:230px;background:var(--white);border:2px solid #b9cdee;border-radius:16px;box-shadow:0 3px 0 #d6e6fb;overflow:hidden}
.pdp-ch{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:7px 12px;background:#e6e8f2;border-bottom:2px solid #b9cdee;
  font:800 .95rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.pdp-ch span{font-size:.85rem;color:var(--deep-text);white-space:nowrap}
.pdp-ch .pfe-hole{font-size:.8rem;height:1.5em;min-width:1.6em;vertical-align:middle}
.pdp-plates{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px 0;min-height:22px}
.pdp-plate{width:14px;height:14px;border-radius:50%;background:var(--white);border:3px solid var(--sky)}
.pdp-plates--q{font:900 1rem/1 'Nunito',sans-serif;color:#b3122f}
.pdp-rows{list-style:none;margin:0;padding:6px 12px 10px;font-size:.95rem;color:var(--ink)}
.pdp-rows li{padding:4px 6px;border-radius:8px;line-height:1.5}
.pdp-amt{font:900 1.15rem/1.2 'Nunito',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.pdp-amt .pfe-hole{font-size:.85rem;height:1.6em;min-width:2.2em;vertical-align:middle}
.pdp-row--hot{background:#e8f6fd;box-shadow:inset 0 0 0 2px var(--sky)}
.pdp-card--ghost{border-style:dashed;box-shadow:none;background:var(--light)}
.pdp-card--ghost p{text-align:center;font:900 2rem/1 'Nunito',sans-serif;color:#9fb7e0;padding:24px 0}
.pdp-go{display:inline-flex;flex-direction:column;align-items:center;color:var(--deep-text)}
.pdp-go b{font:900 1.05rem/1 'Nunito',sans-serif;margin-bottom:2px;white-space:nowrap}
.pdp-go svg{width:52px;height:16px;fill:none;stroke:var(--deep);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* the shop shelf: best buys */
.pdp-shelf{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.pdp-shelf--live{justify-content:center}
.pdp-prod{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:140px;padding:12px 14px 12px;
  background:var(--white);border:2px solid #b9cdee;border-radius:16px;box-shadow:0 3px 0 #d6e6fb;font:inherit;color:var(--ink);text-align:center}
.pdp-pname{font:800 .85rem/1.2 'Poppins',sans-serif;color:var(--muted)}
.pdp-psize{font:900 1.15rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.pdp-pprice{font:900 1.7rem/1.1 'Nunito',sans-serif;font-variant-numeric:tabular-nums;padding:2px 10px;border:2px solid var(--navy);border-radius:8px 14px 14px 8px}
.pdp-unit{display:flex;align-items:center;gap:6px;margin-top:4px;font:700 .95rem/1.2 'Nunito',sans-serif;color:var(--deep-text)}
.pdp-unit .pcv-q{width:52px;min-height:38px;font-size:1.1rem}
.pdp-uv{font-weight:900;color:var(--navy)}
#pdp-rk-pad[hidden],#pdp-rk-entry[hidden],#pdp-w-pad[hidden],#pdp-w-entry[hidden]{display:none}
.pdp-best{position:absolute;top:-12px;right:-10px;padding:4px 9px;border-radius:999px;background:#1d7a3a;color:var(--white);
  font:800 .75rem/1 'Poppins',sans-serif;transform:rotate(6deg)}
.pdp-prod--best{border-color:#1d7a3a;box-shadow:0 3px 0 #bfe3cb}
.pdp-prod--pick{cursor:pointer}
.pdp-prod--pick:hover{border-color:var(--sky);background:#f4fbfe}
.pdp-prod--pick:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.pdp-prod--bad{border-color:var(--red);background:#fff3f5}
/* fill the basket */
.pdp-shop{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:12px;width:100%;max-width:620px;margin:12px auto 0}
.pdp-shelfbox,.pdp-basketbox{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:var(--light)}
.pdp-basketbox{border:2px dashed #9fb7e0;background:var(--white)}
.pdp-shlab{font:700 .8rem/1 'Poppins',sans-serif;color:var(--muted)}
.pdp-shelfpack{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:10px;border:2px solid var(--deep);border-radius:14px;
  background:var(--white);box-shadow:0 3px 0 #9fb7e0;cursor:pointer;font:700 .9rem/1.2 'Poppins',sans-serif;color:var(--navy)}
.pdp-shelfpack:hover{background:#e8f6fd}
.pdp-shelfpack:active{transform:translateY(2px);box-shadow:0 1px 0 #9fb7e0}
.pdp-shelfpack:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pdp-shprice{font:900 1.3rem/1 'Nunito',sans-serif}
.pdp-basket{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;min-height:92px}
.pdp-inbasket{padding:0;border:0;background:none;cursor:pointer;border-radius:8px}
.pdp-inbasket:disabled{cursor:default}
.pdp-inbasket:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pdp-pk{display:block;width:80px;height:auto}
.pdp-pk--s{width:56px}
.pdp-pkbox{fill:#fff8e6;stroke:var(--navy);stroke-width:2.5}
.pdp-pkdot{fill:var(--sky);stroke:var(--navy);stroke-width:1.2}
.pdp-bktab{width:100%;max-width:420px;margin:12px auto 0}
.pdp-vtab th,.pdp-vtab td{text-align:center;font:800 1.05rem/1.2 'Nunito',sans-serif;padding:6px 8px}
.pdp-vtab thead th{font:700 .85rem/1.2 'Poppins',sans-serif}
.pdp-vtab-empty{color:var(--muted);font-weight:600!important;font-size:.9rem!important}
.pdp-tr--new td{animation:pdp-fade .45s ease-out;background:#e8f6fd}
/* the proportion detective */
.pdp-story{width:100%;max-width:520px;margin:12px auto 0;min-height:140px}
.pdp-case{font-size:1.02rem;color:var(--ink);line-height:1.5}
.pdp-badge{display:inline-block;margin-right:6px;padding:3px 9px;border-radius:999px;background:var(--navy);color:var(--white);
  font:800 .75rem/1.2 'Poppins',sans-serif;vertical-align:2px}
.pdp-htab th,.pdp-htab td{text-align:center;font:800 1.05rem/1.2 'Nunito',sans-serif;padding:6px 8px}
.pdp-htab th{background:var(--light);color:var(--navy);font:700 .85rem/1.2 'Poppins',sans-serif;white-space:nowrap}
.pdp-yn{justify-content:center;margin-top:12px}
.pdp-yn .plv-choice{min-width:170px;font:800 1rem/1.2 'Nunito',sans-serif}
#pdp-bk-read,#pdp-dt-read,#pdp-rk-read,#pdp-nl-read,#pdp-bb-read,#pdp-w-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.pdp-pop,.pdp-draw,.pdp-tr--new td{animation:none}}
@media (max-width:640px){
  .pdp-tv{font-size:32px}
  .pdp-tl{font-size:25px}
  .pdp-al{font-size:28px}
  .pdp-dv{font-size:30px}
  .pdp-dn{font-size:24px}
  .pdp-dtk{stroke-width:3}
  .pdp-flow{flex-direction:column;align-items:stretch}
  .pdp-card{flex:none;min-width:0;width:100%;max-width:340px;margin:0 auto}
  .pdp-go{flex-direction:row;gap:8px;justify-content:center;align-self:center}
  .pdp-go svg{transform:rotate(90deg);width:36px}
  .pdp-flow--live{min-height:0}
  .pdp-prod{min-width:0;flex:1 1 130px;padding:12px 8px}
  .pdp-pprice{font-size:1.45rem}
  .pdp-shop{grid-template-columns:minmax(0,130px) minmax(0,1fr)}
  .pdp-pk{width:64px}
  .pdp-pk--s{width:46px}
  .pdp-yn .plv-choice{min-width:0;flex:1}
  #pdp-bk-read,#pdp-dt-read,#pdp-rk-read,#pdp-nl-read,#pdp-bb-read,#pdp-w-read{min-height:6.6em}
}

/* ---------------- maths 11+: sharing by ratio (topic_diagrams/eleven_plus_sharing_by_ratio.py,
   interactions in js/eleven_plus_sharing_by_ratio.js). Reuses pdp- (4.1: case badge, verdict buttons, shelf labels, pop),
   ppa- (3.7: number tspans), pca- (2.1: keypad, levels), pfe- (3.1: keypad, choices), pcv- (3.9: empty), pmi- (3.2: working),
   plv-/pld- (1.1, 1.2). Numbers follow the decimal colour key. The necklace and the bar model are SVG. ---------------- */
/* colour words and the big ratio in a task */
.psr-w--r{color:#b3122f}
.psr-w--b{color:var(--deep-text)}
.psr-w--g{color:#1d7a3a}
.psr-big{font:900 1.25em/1 'Nunito',sans-serif;color:var(--navy);white-space:nowrap}
/* the necklace */
.psr-neckwrap{width:100%;max-width:620px;margin:10px 0 0}
.psr-neckwrap--live{margin:12px auto 0;min-height:20px}
.psr-neck{display:block;width:100%;height:auto;max-height:110px}
.psr-string{stroke:#9aa6bd;stroke-width:3;stroke-linecap:round}
.psr-ring{fill:none;stroke:#9fb7e0;stroke-width:2;stroke-dasharray:6 5}
.psr-bead--r{fill:var(--red);stroke:#a50f2a;stroke-width:2}
.psr-bead--b{fill:var(--sky);stroke:var(--deep);stroke-width:2}
.psr-shine{fill:var(--white);opacity:.55}
.psr-grow{animation:psr-grow .45s ease-out both}
@keyframes psr-grow{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
/* the whole bar and the bar model */
.psr-wholewrap{width:100%;max-width:420px;margin:10px 0 0}
.psr-whole,.psr-bars{display:block;width:100%;height:auto}
.ga-ex .psr-bars,.ga-ex .psr-whole,.ga-ex .psr-neck{max-width:none;margin:0}
.psr-barswrap{width:100%;max-width:640px;margin:10px 0 0}
.psr-barswrap--s{max-width:520px}
.psr-barswrap--live{margin:12px auto 0}
.psr-bx{stroke-width:2.5}
.psr-bx--a{fill:#d4effb;stroke:var(--sky)}
.psr-bx--b{fill:#fde3e8;stroke:var(--red)}
.psr-bx--c{fill:#e6e8f2;stroke:var(--navy)}
.psr-bx--diff{stroke-dasharray:7 4;stroke-width:3.5;fill:#f9c7d1}
.psr-bx--q{fill:var(--white)}
.psr-bx--sel{fill:#fff3c4;stroke:var(--navy);stroke-width:4}
.psr-hotrow{fill:#f0f6ff;stroke:var(--sky);stroke-width:2}
.psr-slot{fill:var(--white);stroke:#b9cdee;stroke-width:2;stroke-dasharray:5 4}
.psr-hit{fill:transparent;cursor:pointer;outline:none}
.psr-hit:hover{fill:rgba(41,171,226,.14)}
.psr-hit:focus-visible{fill:rgba(41,171,226,.18);stroke:var(--navy);stroke-width:2}
.psr-name{font:800 19px 'Nunito',sans-serif;fill:var(--navy)}
.psr-v{font:900 19px 'Nunito',sans-serif;fill:var(--navy);font-variant-numeric:tabular-nums}
.psr-v--q{fill:#b3122f}
.psr-qb{fill:#fff7f8;stroke:var(--red);stroke-width:2.5;stroke-dasharray:6 4}
.psr-share{font:900 22px 'Nunito',sans-serif;fill:var(--navy);font-variant-numeric:tabular-nums}
.psr-tot{font:900 26px 'Nunito',sans-serif;fill:var(--navy);font-variant-numeric:tabular-nums}
.psr-totsub{font:700 15px 'Poppins',sans-serif;fill:var(--muted)}
.psr-dlab{font:800 17px 'Nunito',sans-serif;fill:#b3122f}
.psr-wlab{font:800 17px 'Nunito',sans-serif;fill:var(--navy)}
.psr-brace{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.psr-ftab{max-width:420px}
.psr-ftab th{text-align:left;font:600 .9rem/1.3 'Poppins',sans-serif;color:var(--navy);background:var(--light)}
.psr-ftab td{font:900 1.1rem/1.3 'Nunito',sans-serif;color:var(--navy);text-align:center;white-space:nowrap}
.psr-ftab .fr{font-size:.85em}
/* the bead maker */
.psr-maker{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:12px;width:100%;max-width:620px;margin:12px auto 0}
.psr-maker[hidden],#psr-bm-check[hidden],#psr-mb-btns[hidden],#psr-sh-pad[hidden],#psr-sh-entry[hidden],#psr-mb-pad[hidden],#psr-mb-entry[hidden]{display:none}
.psr-tray,.psr-groupbox{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:var(--light)}
.psr-groupbox{border:2px dashed #9fb7e0;background:var(--white)}
.psr-traybtns{display:flex;gap:8px}
.psr-traybtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border:2px solid var(--deep);border-radius:14px;
  background:var(--white);box-shadow:0 3px 0 #9fb7e0;cursor:pointer;font:700 .85rem/1.2 'Poppins',sans-serif;color:var(--navy)}
.psr-traybtn:hover{background:#e8f6fd}
.psr-traybtn:active{transform:translateY(2px);box-shadow:0 1px 0 #9fb7e0}
.psr-traybtn:focus-visible,.psr-gbead:focus-visible,.psr-bag:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.psr-dot{display:block;width:30px;height:30px;border-radius:50%}
.psr-dot--r{background:var(--red);box-shadow:inset 0 0 0 2px #a50f2a}
.psr-dot--b{background:var(--sky);box-shadow:inset 0 0 0 2px var(--deep)}
.psr-dot--g{background:#3fae5a;box-shadow:inset 0 0 0 2px #1d7a3a}
.psr-dot--bag{background:#f5b7c4;box-shadow:inset 0 0 0 2px #e58ea0}
.psr-group{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;min-height:44px}
.psr-gbead{width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer}
.psr-gbead:disabled{cursor:default}
/* the sweet jar */
.psr-jar{width:100%;max-width:380px;margin:12px auto 0;padding:16px 14px 14px;border:3px solid #9fb7e0;border-top-width:8px;border-radius:14px 14px 40px 40px;
  background:linear-gradient(#ffffff,#f0f6ff)}
.psr-jarin{display:flex;flex-direction:column;gap:8px}
.psr-jrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.psr-sw{display:inline-block;width:26px;height:26px;border-radius:50%}
.psr-sw--s{width:16px;height:16px}
.psr-jlab{margin-left:auto;font:800 .9rem/1 'Nunito',sans-serif;color:var(--muted)}
/* deal the sweets */
.psr-deal{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:12px;width:100%;max-width:620px;margin:12px auto 0}
.psr-bag{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px;border:3px solid var(--navy);
  border-radius:18px 18px 30px 30px;background:#fff8e6;cursor:pointer;box-shadow:0 4px 0 #9fb7e0;font:inherit;color:var(--navy);min-height:150px}
.psr-bag:hover{background:#fff1cc}
.psr-bag:active{transform:translateY(2px);box-shadow:0 2px 0 #9fb7e0}
.psr-bag:disabled{cursor:default;opacity:.6}
.psr-bagdots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.psr-baglab{font:800 .95rem/1.2 'Nunito',sans-serif}
.psr-plates{display:flex;flex-direction:column;gap:8px}
.psr-plate{display:grid;grid-template-columns:7.5em 1fr auto;align-items:center;gap:8px;padding:8px 10px;border:2px solid #b9cdee;border-radius:14px;background:var(--white)}
.psr-pname{font:800 1rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.psr-pname small{display:block;font:600 .75rem/1.2 'Poppins',sans-serif;color:var(--muted)}
.psr-pdots{display:flex;flex-wrap:wrap;gap:4px;min-height:16px}
.psr-pcount{font:900 1.3rem/1 'Nunito',sans-serif;color:var(--navy);min-width:1.6em;text-align:right}
.psr-rounds{text-align:center;font:700 .95rem/1.4 'Poppins',sans-serif;color:var(--navy);margin-top:8px}
/* be the teacher */
.psr-case{width:100%;max-width:560px;margin:4px auto 0;min-height:150px}
.psr-kid{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding:10px 14px;border-left:4px solid var(--sky);border-radius:0 12px 12px 0;background:var(--light)}
.psr-kidname{font:700 .8rem/1.2 'Poppins',sans-serif;color:var(--muted);margin-bottom:4px}
.psr-kidline{font:800 1.05rem/1.5 'Nunito',sans-serif;color:var(--ink)}
.psr-why .pca-choice{font-size:.92rem;text-align:left}
#psr-bm-read,#psr-pd-read,#psr-dl-read,#psr-sh-read,#psr-mb-read,#psr-tc-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.psr-grow{animation:none}}
@media (max-width:640px){
  .psr-name{font-size:24px}
  .psr-v{font-size:24px}
  .psr-share{font-size:26px}
  .psr-tot{font-size:30px}
  .psr-totsub{font-size:18px}
  .psr-dlab,.psr-wlab{font-size:21px}
  .psr-maker,.psr-deal{grid-template-columns:minmax(0,1fr)}
  .psr-traybtns{justify-content:center}
  .psr-traybtn{flex:0 1 120px}
  .psr-bag{min-height:0}
  .psr-plate{grid-template-columns:6em 1fr auto}
  #psr-bm-read,#psr-pd-read,#psr-dl-read,#psr-sh-read,#psr-mb-read,#psr-tc-read{min-height:6.6em}
}

/* ---------------- maths 11+: scale factors and maps (topic_diagrams/eleven_plus_scale_factors_and_maps.py,
   interactions in js/eleven_plus_scale_factors_and_maps.js). Reuses psr- (4.2: ? boxes, numbers), pdp- (4.1: pop), ppa- (3.7:
   number tspans), pca- (2.1: keypad, levels), pfe- (3.1: keypad), pmi- (3.2: working), plv-/pld- (1.1, 1.2). Numbers follow the
   decimal colour key. The island map, the treasure map, the plan and the characters are SVG drawn in the Python. ---------------- */
.psf-defs{position:absolute;width:0;height:0;overflow:hidden}
/* the characters */
.psf-ln{stroke:var(--navy);stroke-width:2;fill:none}
.psf-c-red,.psf-c-sky,.psf-c-white,.psf-c-navy,.psf-c-deep,.psf-c-light,.psf-c-yellow,.psf-c-green{stroke:var(--navy);stroke-width:2}
.psf-c-red{fill:var(--red)}
.psf-c-sky{fill:var(--sky)}
.psf-c-white{fill:var(--white)}
.psf-c-navy{fill:var(--navy)}
.psf-c-deep{fill:var(--deep)}
.psf-c-light{fill:var(--light)}
.psf-c-yellow{fill:#ffd166}
.psf-c-green{fill:#3fae5a}
/* squared paper, lengths and the enlargement example */
.psf-enlwrap{width:100%;max-width:640px;margin:10px 0 0}
.psf-enl,.psf-twins,.psf-plan,.psf-map,.psf-tmap,.psf-barsvg{display:block;width:100%;height:auto}
.ga-ex .psf-enl,.ga-ex .psf-twins,.ga-ex .psf-plan,.ga-ex .psf-map,.ga-ex .psf-tmap,.ga-ex .psf-barsvg{max-width:none;margin:0}
.psf-grid{stroke:#d3e1f5;stroke-width:1.2}
.psf-box{fill:none;stroke:var(--deep);stroke-width:2;stroke-dasharray:5 4}
.psf-len{font:900 18px 'Nunito',sans-serif;fill:var(--navy);font-variant-numeric:tabular-nums}
.psf-ptitle{font:800 15px 'Nunito',sans-serif;fill:var(--navy)}
.psf-verdict{font:700 13px 'Poppins',sans-serif;fill:var(--ink)}
.psf-tick{fill:#1d7a3a;font-weight:900}
.psf-cross{fill:#b3122f;font-weight:900}
/* shape twins */
.psf-twinswrap{width:100%;max-width:560px;margin:10px 0 0}
.psf-twinswrap--live{margin:12px auto 0}
.psf-shape{stroke-width:3;stroke-linejoin:round}
.psf-shape--a{fill:#d4effb;stroke:var(--sky)}
.psf-shape--b{fill:#fde3e8;stroke:var(--red)}
/* the playground plan */
.psf-planwrap{width:100%;max-width:640px;margin:10px 0 0}
.psf-planwrap--live{margin:12px auto 0;touch-action:none}
.psf-plan-bg{fill:#f4faf0}
.psf-pgrid{stroke:#dbe7d3;stroke-width:1}
.psf-fence{fill:none;stroke:var(--navy);stroke-width:3}
.psf-obj{stroke:var(--navy);stroke-width:2}
.psf-obj--pitch{fill:#a8dcae}
.psf-obj--sand{fill:#fbe3a6}
.psf-obj--frame{fill:#ffd6a0}
.psf-obj--pond{fill:#9fd8f2;stroke:var(--deep)}
.psf-obj--shed{fill:#d9c2a6}
.psf-obj--path{fill:#e3e6ee}
.psf-obj--bench{fill:#c98f5a}
.psf-obj--bed{fill:#c9e8b7}
.psf-obj--hi{stroke:var(--red);stroke-width:4}
.psf-pitchline{fill:none;stroke:var(--white);stroke-width:2}
.psf-frameline{stroke:var(--navy);stroke-width:1.5}
.psf-flower--r{fill:var(--red)}
.psf-flower--b{fill:var(--sky)}
.psf-flower--y{fill:#ffd166}
.psf-objlab{font:800 14px 'Nunito',sans-serif;fill:var(--navy);paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.psf-scale{font:800 17px 'Nunito',sans-serif;fill:var(--navy)}
.psf-note{font:600 13px 'Poppins',sans-serif;fill:var(--muted)}
.psf-strip{fill:var(--white);stroke:#9fb7e0;stroke-width:2;stroke-dasharray:6 5}
/* the ruler */
.psf-ruler-body{fill:#fff3b8;fill-opacity:.88;stroke:#c9a227;stroke-width:1.5}
.psf-rtick{stroke:var(--navy);stroke-width:1.5}
.psf-rnum{font:800 13px 'Nunito',sans-serif;fill:var(--navy)}
.psf-runit{font:700 11px 'Poppins',sans-serif;fill:var(--muted)}
/* the island map */
.psf-mapwrap{width:100%;max-width:700px;margin:10px 0 0}
.psf-mapwrap--live{margin:12px auto 0;touch-action:none}
.psf-sea{fill:#cdeefb}
.psf-wave{fill:none;stroke:#8fd0ee;stroke-width:2;stroke-linecap:round}
.psf-shore{fill:#f6e3b4;stroke:#f6e3b4;stroke-width:16;stroke-linejoin:round}
.psf-land{fill:#dff0d4;stroke:#c7e2b8;stroke-width:2}
.psf-river{fill:none;stroke:#5cc1ec;stroke-width:7;stroke-linecap:round}
.psf-lake{fill:#9fd8f2;stroke:#5cc1ec;stroke-width:3}
.psf-mtn{fill:#c4ccdc;stroke:#7d89a3;stroke-width:1.5;stroke-linejoin:round}
.psf-mtn-shade{fill:#a6b0c4}
.psf-snow{fill:var(--white)}
.psf-tree{fill:#7ac68b;stroke:#3d8f55;stroke-width:1.5}
.psf-tree-hi{fill:#a9dcb3}
.psf-jetty{stroke:#a8743f;stroke-width:7;stroke-linecap:round}
.psf-boat{fill:var(--red);stroke:var(--navy);stroke-width:1.5}
.psf-mast{stroke:var(--navy);stroke-width:2}
.psf-sail{fill:var(--white);stroke:var(--navy);stroke-width:1.5}
.psf-hwall{fill:#fff8e6;stroke:var(--navy);stroke-width:1.5}
.psf-hroof{fill:var(--red);stroke:var(--navy);stroke-width:1.5;stroke-linejoin:round}
.psf-blanket{fill:var(--white);stroke:var(--red);stroke-width:2}
.psf-check{stroke:var(--red);stroke-width:2.5}
.psf-mill{fill:#fff8e6;stroke:var(--navy);stroke-width:1.5}
.psf-sail-w{fill:#ffffff;stroke:var(--navy);stroke-width:1.2}
.psf-sails{transform-box:fill-box;transform-origin:center;animation:psf-spin 9s linear infinite}
.psf-hub{fill:var(--navy)}
@keyframes psf-spin{to{transform:rotate(360deg)}}
.psf-bridge{fill:#c98f5a;stroke:var(--navy);stroke-width:1.5}
.psf-bridge-rail{stroke:var(--navy);stroke-width:2}
.psf-castle{fill:#e6e8f2;stroke:var(--navy);stroke-width:1.5;stroke-linejoin:round}
.psf-door{fill:var(--navy)}
.psf-flag{fill:var(--red)}
.psf-lh{fill:var(--white);stroke:var(--navy);stroke-width:1.5}
.psf-lh-band{fill:var(--red)}
.psf-lamp{fill:#ffd166;stroke:var(--navy);stroke-width:1.5}
.psf-lh-roof{fill:var(--navy)}
.psf-beam{fill:#ffd166;opacity:.45}
.psf-mgrid{stroke:#ffffff;stroke-opacity:.55;stroke-width:1}
.psf-trail-edge{fill:none;stroke:var(--white);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.psf-trail{fill:none;stroke:var(--navy);stroke-width:3.5;stroke-dasharray:9 7;stroke-linecap:round;stroke-linejoin:round}
.psf-route{fill:none;stroke:var(--red);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.psf-leglab rect{fill:var(--white);stroke:var(--red);stroke-width:2}
.psf-leglab text{font:900 17px 'Nunito',sans-serif;fill:var(--navy)}
.psf-stop{fill:var(--white);stroke:var(--navy);stroke-width:3}
.psf-maplab{font:800 15px 'Nunito',sans-serif;fill:var(--navy);paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:4px;stroke-linejoin:round}
.psf-maplab--soft{font:italic 700 13px 'Poppins',sans-serif;fill:#4a6b52}
.psf-maplab--water{font:italic 700 13px 'Poppins',sans-serif;fill:#1f66b8;stroke:none}
.psf-compass circle{fill:var(--white);stroke:var(--navy);stroke-width:2}
.psf-compass text{font:900 13px 'Nunito',sans-serif;fill:var(--navy)}
.psf-needle{fill:var(--red)}
.psf-needle-s{fill:var(--navy)}
.psf-mapframe{fill:none;stroke:var(--navy);stroke-width:2.5}
.psf-mapname{font:900 22px 'Nunito',sans-serif;fill:var(--navy)}
/* scale bars */
.psf-barwrap{width:100%;max-width:330px;margin:8px 0 0}
.psf-bar-blk{stroke:var(--navy);stroke-width:1.5}
.psf-bar-blk--0{fill:var(--navy)}
.psf-bar-blk--1{fill:var(--white)}
.psf-bar-tick{stroke:var(--navy);stroke-width:1.5}
.psf-bar-num{font:900 16px 'Nunito',sans-serif;fill:var(--navy)}
.psf-bar-unit{font:800 15px 'Nunito',sans-serif;fill:var(--navy)}
/* the treasure map */
.psf-tmapwrap{width:100%;max-width:600px;margin:10px 0 0}
.psf-tmapwrap--live{margin:12px auto 0}
.psf-parch{fill:#fbf1d9;stroke:#d8bd82;stroke-width:3}
.psf-parch-shadow{fill:#e9dcc0}
.psf-tgrid{stroke:#e2cc98;stroke-width:1.2}
.psf-tdot{fill:var(--navy)}
.psf-tlab{font:800 14px 'Nunito',sans-serif;fill:var(--navy);paint-order:stroke;stroke:#fbf1d9;stroke-width:4px;stroke-linejoin:round}
.psf-ti-rock{fill:#c4ccdc;stroke:var(--navy);stroke-width:1.5}
.psf-ti-hole{fill:var(--navy)}
.psf-ti-stone{fill:#c4ccdc;stroke:var(--navy);stroke-width:1.5}
.psf-ti-wood{fill:#c98f5a;stroke:var(--navy);stroke-width:1.8}
.psf-ti-roof{fill:var(--red);stroke:var(--navy);stroke-width:1.5}
.psf-ti-trunk{fill:none;stroke:#a8743f;stroke-width:4;stroke-linecap:round}
.psf-ti-leaf{fill:#7ac68b;stroke:#3d8f55;stroke-width:1.5}
.psf-ti-mast{stroke:var(--navy);stroke-width:2}
.psf-ti-sail{fill:var(--white);stroke:var(--navy);stroke-width:1.5}
.psf-rose{fill:var(--white);stroke:var(--navy);stroke-width:1.5}
.psf-rose-n{fill:var(--red)}
.psf-trose text{font:900 13px 'Nunito',sans-serif;fill:var(--navy)}
.psf-tpath{fill:none;stroke:var(--red);stroke-width:3.5;stroke-dasharray:8 6;stroke-linecap:round;stroke-linejoin:round}
.psf-x{stroke:var(--red);stroke-width:6;stroke-linecap:round}
.psf-tleg{font:900 16px 'Nunito',sans-serif;fill:var(--navy);paint-order:stroke;stroke:#fbf1d9;stroke-width:5px}
.psf-scale--t{font-size:16px}
.psf-clue{max-width:560px;padding:10px 16px;border:2px dashed #d8bd82;border-radius:14px;background:#fbf1d9;
  font:700 1rem/1.5 'Poppins',sans-serif;color:var(--navy)}
.psf-clue--live{margin:12px auto 0;text-align:center;min-height:3.2em}
.psf-size{text-align:center;font:800 1.05rem/1.4 'Nunito',sans-serif;color:var(--navy);margin-top:8px;min-height:1.5em}
.psf-odo{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
/* the robot resizer */
.psf-rrwrap{width:100%;max-width:560px;margin:12px auto 0;touch-action:none}
.psf-rr{display:block;width:100%;height:auto;overflow:visible}
.psf-floor{stroke:var(--navy);stroke-width:3}
.psf-handle{cursor:grab;outline:none}
.psf-handle:active{cursor:grabbing}
.psf-handle-hit{fill:transparent}
.psf-handle-dot{fill:var(--red);stroke:var(--white);stroke-width:3;filter:drop-shadow(0 2px 2px rgba(27,27,78,.35))}
.psf-handle-arrow{fill:none;stroke:var(--white);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.psf-handle:focus-visible .psf-handle-hit{fill:rgba(41,171,226,.2);stroke:var(--navy);stroke-width:2}
.psf-happy{animation:psf-hop .7s ease-out 2;transform-box:fill-box;transform-origin:bottom}
@keyframes psf-hop{0%,100%{transform:none}40%{transform:translateY(-14px) scale(1.03)}}
/* the enlargement builder */
.psf-gb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:14px;align-items:start;width:100%;max-width:720px;margin:12px auto 0}
.psf-gb-small,.psf-gb-big{display:block;width:100%;height:auto}
.psf-gb-big{touch-action:none;cursor:pointer;outline:none;border-radius:12px}
.psf-gb-big:focus-visible{box-shadow:0 0 0 3px var(--sky)}
.psf-gb-shape{fill:#d4effb;stroke:var(--sky);stroke-width:3;stroke-linejoin:round}
.psf-gb-edge{stroke-width:6;stroke-linecap:round}
.psf-gb-edge--done{stroke:var(--deep)}
.psf-gb-edge--now{stroke:var(--red);stroke-width:7}
.psf-gb-from{fill:var(--red)}
.psf-gb-fill{fill:#fde3e8}
.psf-gb-lines{fill:none;stroke:var(--red);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.psf-gb-dot{fill:#9fb7e0}
.psf-gb-corner{fill:var(--white);stroke:var(--red);stroke-width:3}
.psf-gb-corner--first{fill:var(--red);stroke:var(--white)}
.psf-gb-cursor{fill:none;stroke:var(--sky);stroke-width:3}
/* shape twins */
.psf-side-hi{stroke:#ffd166;stroke-width:9;stroke-linecap:round;opacity:.9}
.psf-side-hit{stroke:transparent;stroke-width:22;stroke-linecap:round;cursor:pointer;outline:none}
.psf-side-hit:hover,.psf-side-hit:focus-visible{stroke:rgba(41,171,226,.35)}
/* measure the playground */
.psf-ruler--live{cursor:grab;outline:none}
.psf-ruler--live:active{cursor:grabbing}
.psf-ruler--live:focus-visible .psf-ruler-body{stroke:var(--sky);stroke-width:3}
.psf-newpath{stroke:#a8743f;stroke-width:12;stroke-linecap:round}
.psf-peg{fill:var(--navy)}
.psf-plbtns{justify-content:center;margin-top:10px}
/* the explorer's trail */
.psf-walk{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.psf-startring{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:4 3}
.psf-explorer{cursor:grab;outline:none}
.psf-explorer:active{cursor:grabbing}
.psf-explorer:focus-visible .psf-ex-hit{fill:rgba(41,171,226,.2);stroke:var(--navy);stroke-width:2}
.psf-ex-hit{fill:transparent}
.psf-ex-shadow{fill:rgba(27,27,78,.25)}
.psf-ex-legs{stroke:var(--navy);stroke-width:3.5;stroke-linecap:round}
.psf-ex-body{fill:var(--red);stroke:var(--navy);stroke-width:1.8}
.psf-ex-pack{fill:#ffd166;stroke:var(--navy);stroke-width:1.5}
.psf-ex-head{fill:#f2c9a0;stroke:var(--navy);stroke-width:1.8}
.psf-ex-hat{fill:#c98f5a;stroke:var(--navy);stroke-width:1.5;stroke-linejoin:round}
.psf-stop--here{fill:var(--red);stroke:var(--white)}
.psf-maplab--here{fill:#b3122f}
.psf-chip{display:inline-flex;align-items:baseline;gap:6px;padding:6px 14px;border-radius:999px;background:var(--light);border:2px solid #b9cdee;
  font:600 .95rem/1.3 'Poppins',sans-serif;color:var(--navy)}
.psf-chip b{font:900 1.15rem/1 'Nunito',sans-serif}
.psf-chip--real{background:#fff7f8;border-color:var(--red)}
/* the treasure hunt */
.psf-tmapwrap--live .psf-tmap{touch-action:none;cursor:pointer;outline:none;border-radius:12px}
.psf-tmapwrap--live .psf-tmap:focus-visible{box-shadow:0 0 0 3px var(--sky)}
.psf-tstart{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:4 3}
.psf-hole{fill:#a8743f;stroke:#7a5228;stroke-width:2;opacity:.75}
.psf-chest-box{fill:#c98f5a;stroke:var(--navy);stroke-width:1.8}
.psf-chest-lid{fill:#ffd166;stroke:var(--navy);stroke-width:1.8}
.psf-chest-lock{fill:var(--navy)}
#psf-tw-pad[hidden],#psf-tw-entry[hidden],#psf-pl-pad[hidden],#psf-pl-entry[hidden],#psf-mp-pad[hidden],#psf-mp-entry[hidden],
#psf-mp-level[hidden],#psf-mp-stop[hidden],#psf-pl-done[hidden],#psf-pl-turn[hidden]{display:none}
#psf-rr-read,#psf-gb-read,#psf-tw-read,#psf-pl-read,#psf-mp-read,#psf-th-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.psf-sails,.psf-happy{animation:none}}
@media (max-width:640px){
  .psf-len{font-size:22px}
  .psf-maplab{font-size:19px}
  .psf-maplab--soft,.psf-maplab--water{font-size:15px}
  .psf-objlab{font-size:17px}
  .psf-scale{font-size:21px}
  .psf-note{font-size:16px}
  .psf-tlab{font-size:18px}
  .psf-gb{grid-template-columns:minmax(0,1fr);gap:6px}
  .psf-gb-small{max-width:170px;margin:0 auto}
  .psf-rnum{font-size:19px}
  .psf-handle-in{transform:scale(1.6)}
  .psf-runit{font-size:15px}
  .psf-chip{font-size:.85rem}
  #psf-rr-read,#psf-gb-read,#psf-tw-read,#psf-pl-read,#psf-mp-read,#psf-th-read{min-height:6.6em}
}

/* ---------------- maths 11+: number patterns (topic_diagrams/eleven_plus_number_patterns_and_linear_sequences.py,
   interactions in js/eleven_plus_number_patterns_and_linear_sequences.js). Reuses pca- (2.1: keypad, levels), pfe- (3.1:
   keypad, choices), pmi- (3.2: working), plv-/pld- (1.1, 1.2). Numbers follow the decimal colour key. The stepping stones
   are HTML, so a long sequence wraps onto a second row on a phone. ---------------- */
/* the stepping stones */
.pns-pond{width:100%;box-sizing:border-box;max-width:720px;margin:10px 0 0;padding:4px 6px 10px;border-radius:16px;background:linear-gradient(#f0f6ff,#ddeefa)}
.pns-pond--live{position:relative;margin:12px auto 0;min-height:60px}
.pns-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;row-gap:34px;padding-top:26px}
.pns-st{display:flex;flex-direction:column;align-items:center;gap:5px}
.pns-v{display:grid;place-items:center;box-sizing:border-box;min-width:60px;height:48px;padding:0 10px;border:3px solid #9fb7e0;border-radius:999px;
  background:var(--white);box-shadow:0 4px 0 #7f9bc9;font:900 1.35rem/1 'Nunito',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.pns-st--q .pns-v{border:3px dashed var(--red);background:#fff7f8;color:#b3122f;box-shadow:none}
.pns-st--fill .pns-v{border-color:#3fae5a;background:#e7f6ec;box-shadow:0 4px 0 #8fcf9f}
.pns-st--empty .pns-v{border:2px dashed #b9cdee;background:rgba(255,255,255,.5);box-shadow:none}
.pns-st--pop .pns-v{animation:plv-pop .45s ease-out}
.pns-pos{font:700 .75rem/1 'Poppins',sans-serif;color:var(--muted)}
.pns-j{display:flex;flex-direction:column;align-items:center;width:44px;margin-top:-22px}
.pns-jl{font:900 .98rem/1.2 'Nunito',sans-serif;color:var(--navy);white-space:nowrap;min-height:1.2em}
.pns-jl--q{color:#b3122f}
.pns-arc{display:block;width:44px;height:22px;overflow:visible}
.pns-arcl{fill:none;stroke:var(--deep);stroke-width:2.5;stroke-linecap:round}
.pns-arch{fill:var(--deep)}
.pns-j--empty .pns-arcl{stroke:#c9d8f0;stroke-dasharray:4 4}
.pns-j--empty .pns-arch{fill:#c9d8f0}
.pns-j--hot .pns-arcl{stroke:var(--red);stroke-width:3.5}
.pns-j--hot .pns-arch{fill:var(--red)}
.pns-j--pop .pns-jl{animation:plv-pop .45s ease-out}
.pns-pond--s .pns-v{min-width:42px;height:40px;padding:0 7px;font-size:1.08rem}
.pns-pond--s .pns-j{width:30px;margin-top:-18px}
.pns-pond--s .pns-arc{width:30px;height:15px}
.pns-pond--s .pns-jl{font-size:.85rem}
.ga-ex .pns-pond{margin:8px 0 0}
/* hop along: the frog */
#pns-hp-pond{max-width:none}
#pns-hp-pond .pns-row{padding-top:46px;row-gap:46px;justify-content:flex-start}
.pns-frog{position:absolute;left:0;top:0;width:44px;height:40px;pointer-events:none;z-index:2}
.pns-frog svg{display:block;width:100%;height:100%;overflow:visible}
.pns-frog-body{fill:var(--deep);stroke:var(--navy);stroke-width:1.5}
.pns-frog-leg{fill:var(--sky);stroke:var(--navy);stroke-width:1.5}
.pns-frog-eye{fill:var(--white);stroke:var(--navy);stroke-width:1.5}
.pns-frog-pupil{fill:var(--navy)}
.pns-frog-smile{fill:none;stroke:var(--white);stroke-width:2;stroke-linecap:round}
.pns-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;width:100%;max-width:640px;margin:10px auto 0}
.pns-picklab{font:700 .9rem/1.2 'Poppins',sans-serif;color:var(--navy)}
.pns-chips{display:flex;flex-wrap:wrap;gap:6px}
.pns-chip{padding:7px 12px;border-radius:999px;font:800 .95rem/1.1 'Nunito',sans-serif}
.pns-chip[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:var(--white)}
.pns-chip[aria-pressed="true"] span{color:inherit}
/* the times-table trick */
.pns-ttwrap{width:100%;max-width:640px;margin:12px auto 0}
.pns-tt{width:auto;margin:0 auto}
.pns-tt th{text-align:left;font:600 .85rem/1.3 'Poppins',sans-serif;color:var(--navy);background:var(--light);white-space:nowrap}
.pns-tt td{font:900 1.05rem/1.3 'Nunito',sans-serif;color:var(--navy);text-align:center;white-space:nowrap;min-width:2.4em}
.pns-tt-times td{background:#f5f8fd}
.pns-tt-adj td{color:#b3122f;font-size:.9rem}
.pns-tt-seq td{background:#e7f6ec}
.pns-tt .pns-tt-gap{color:var(--muted);background:none;min-width:1.2em}
.pns-tt .pns-tt-far{background:#fff3c4}
.pns-tt .pns-tt-q{color:#b3122f}
.pns-tt-pop td{animation:plv-pop .45s ease-out}
/* sort the sequences */
.pns-bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:620px;margin:12px auto 0}
.pns-bin{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.pns-bin b{font:900 1.05rem/1.2 'Nunito',sans-serif}
.pns-bin small{font:600 .76rem/1.25 'Poppins',sans-serif;color:var(--muted)}
.pns-bin.plv-ok small,.pns-bin.plv-bad small{color:inherit}
.pns-qseq{font-weight:800;white-space:normal}
/* the keypad with a point key and a minus key */
.pns-pad--x{grid-template-columns:repeat(7,minmax(0,1fr));max-width:400px}
.pns-pad--x .pfe-key--go{grid-column:1/-1}
.pns-key--pt{color:var(--red)}
#pns-cr-pad[hidden],#pns-cr-entry[hidden],#pns-fg-pad[hidden],#pns-fg-entry[hidden],#pns-fa-pad[hidden],#pns-fa-entry[hidden],.pns-bins[hidden]{display:none}
#pns-hp-read,#pns-cr-read,#pns-fg-read,#pns-fa-read,#pns-so-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.pns-st--pop .pns-v,.pns-j--pop .pns-jl,.pns-tt-pop td{animation:none}}
@media (max-width:640px){
  .pns-v{min-width:48px;height:42px;padding:0 8px;font-size:1.15rem}
  .pns-j{width:32px;margin-top:-19px}
  .pns-arc{width:32px;height:16px}
  .pns-jl{font-size:.88rem}
  .pns-pond--s .pns-v{min-width:40px;height:38px;font-size:1.02rem}
  .pns-pond--s .pns-j{width:26px}
  .pns-pond--s .pns-arc{width:26px;height:13px}
  .pns-pick{grid-template-columns:minmax(0,1fr)}
  .pns-bins{grid-template-columns:minmax(0,1fr)}
  .pns-tt th{font-size:.75rem}
  .pns-tt td{font-size:.95rem;min-width:1.9em;padding-left:4px;padding-right:4px}
  #pns-hp-read,#pns-cr-read,#pns-fg-read,#pns-fa-read,#pns-so-read{min-height:6.6em}
}

/* ---------------- maths 11+: spatial sequences (topic_diagrams/eleven_plus_spatial_and_non_verbal_sequences.py,
   interactions in js/eleven_plus_spatial_and_non_verbal_sequences.js; drawings from topic_diagrams/_patterns.py). Reuses
   pca- (2.1: keypad, levels), pfe- (3.1: keypad, choices), pmi- (3.2: working), plv- (1.1) and pns-tt / pns-chip (5.1).
   The pictures keep their own size and only shrink to fit a phone. Red marks the new part of a pattern. ---------------- */
.pvs-chip--new::before{background:var(--red)}
.pvs-fig{display:block;max-width:100%;height:auto;margin:10px auto 0}
.ga-ex .pvs-fig,.ga-ex .pvs-shapes{width:auto;max-width:100%;height:auto;margin:10px 0 0}   /* their own size, not .ga-ex svg's 340px */
.pvs-stk{stroke:var(--navy);stroke-width:4.5;stroke-linecap:round}
.pvs-stk.pvs-new,.pvs-stk.pvs-x{stroke:var(--red)}
.pvs-stk.pvs-alt{stroke:var(--deep)}
.pvs-tile{fill:#e8f6fd;stroke:var(--navy);stroke-width:1.5}
.pvs-tile.pvs-new,.pvs-tile.pvs-x{fill:#fde3e8;stroke:var(--red);stroke-width:2}
.pvs-tile.pvs-alt{fill:#cfe2fa;stroke:var(--deep)}
.pvs-grey{fill:#9fb7e0;stroke:var(--navy);stroke-width:1.5}
.pvs-table{fill:var(--white);stroke:var(--navy);stroke-width:2}
.pvs-chair{fill:#e8f6fd;stroke:var(--navy);stroke-width:1.8}
.pvs-chair.pvs-new,.pvs-chair.pvs-x{fill:#fde3e8;stroke:var(--red);stroke-width:2.4}
.pvs-chair.pvs-alt{fill:#cfe2fa;stroke:var(--deep)}
.pvs-dot{fill:var(--navy)}
.pvs-dot.pvs-new,.pvs-dot.pvs-x{fill:var(--red)}
.pvs-dot.pvs-alt{fill:var(--deep)}
.pvs-plab{font:700 13px 'Poppins',sans-serif;fill:var(--muted)}
.pvs-qbox{fill:#fff7f8;stroke:var(--red);stroke-width:2;stroke-dasharray:6 5}
.pvs-qmark{font:900 26px 'Nunito',sans-serif;fill:#b3122f}
/* framed shapes */
.pvs-frame{fill:var(--white);stroke:#b9cdee;stroke-width:2}
.pvs-frame--hl{fill:#fff3c4;stroke:#e0b400}
.pvs-frame--hl2{fill:#e8f6fd;stroke:var(--sky)}
.pvs-frame--ok{fill:#e7f6ec;stroke:#3fae5a;stroke-width:3}
.pvs-frame--q{fill:#fff7f8;stroke:var(--red);stroke-dasharray:6 5}
.pvs-sh{stroke:var(--navy);stroke-width:2.6;stroke-linejoin:round}
.pvs-sh--white{fill:var(--white)}
.pvs-sh--dark{fill:var(--navy)}
.pvs-shl{stroke:var(--navy);stroke-width:1.6}
.pvs-fnum{font:700 12px 'Poppins',sans-serif;fill:var(--muted)}
.pvs-shapes{display:block;max-width:100%;height:auto;margin:10px 0 0}
.pvs-one{display:block;width:100%;height:auto}
.pvs-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:6px;width:100%;max-width:720px;margin:12px auto 0}
.pvs-row .pvs-cell{width:52px;flex:0 0 auto}
#pvs-wn-row .pvs-cell{width:62px}
button.pvs-cell{padding:0;border:0;background:none;border-radius:12px;cursor:pointer}
button.pvs-cell:hover .pvs-frame{stroke:var(--sky)}
button.pvs-cell:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pvs-more{align-self:center;font:900 1.4rem/1 'Nunito',sans-serif;color:var(--muted);padding:0 4px 20px}
.pvs-row--q{justify-content:flex-start;margin:8px 0 6px}
.pvs-qfig{margin:4px 0 8px}
.pvs-qfig .pvs-fig{margin:0}
.pvs-qtext{line-height:1.5}
/* picture answers */
.pvs-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:420px;margin:12px auto 0}
.pvs-pick{display:grid;place-items:center;padding:6px;border-radius:14px}
.pvs-pick .pvs-one{max-width:64px}
.pvs-pick.plv-ok .pvs-frame{stroke:#3fae5a;stroke-width:3}
.pvs-pick.plv-bad .pvs-frame{stroke:var(--red)}
.pvs-stack{grid-template-columns:minmax(0,1fr);max-width:520px}
/* grow the pattern, pattern detective */
.pvs-kinds{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px auto 0;max-width:640px}
.pvs-stage{width:100%;max-width:720px;margin:6px auto 0;min-height:90px;padding:4px 6px 8px;box-sizing:border-box;border-radius:16px;background:var(--light)}
.pvs-stage .pvs-fig{margin:6px auto 0}
.pvs-pop .pvs-new{animation:plv-pop .45s ease-out;transform-box:fill-box;transform-origin:center}
.pvs-ttwrap{width:100%;max-width:640px;margin:12px auto 0}
.pvs-tt td{min-width:2.2em}
/* build the next one: a grid of spaces to tap */
.pvs-grid{display:grid;gap:4px;width:100%;max-width:340px;margin:12px auto 0;padding:8px;box-sizing:border-box;border-radius:16px;background:var(--light)}
.pvs-g{aspect-ratio:1;width:100%;padding:0;border:2px dashed #b9cdee;border-radius:6px;background:var(--white);cursor:pointer}
.pvs-g:hover:not(:disabled){border-color:var(--sky)}
.pvs-g:focus-visible{outline:3px solid var(--sky);outline-offset:1px}
.pvs-g--have{border:2px solid var(--navy);background:#e8f6fd;cursor:default}
.pvs-g--new{border:2px solid var(--red);background:#fde3e8}
.pvs-g:disabled{cursor:default}
.pvs-grid--dots .pvs-g{border-radius:50%;border-width:2px;background:var(--white);transform:scale(.7)}
.pvs-grid--dots .pvs-g--have{background:var(--navy);border-color:var(--navy)}
.pvs-grid--dots .pvs-g--new{background:var(--red);border-color:var(--red)}
#pvs-gr-pad[hidden],#pvs-gr-entry[hidden],#pvs-pd-pad[hidden],#pvs-pd-entry[hidden],#pvs-rd-pad[hidden],#pvs-rd-entry[hidden]{display:none}
#pvs-gr-read,#pvs-pd-read,#pvs-bn-read,#pvs-rd-read,#pvs-wn-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.pvs-pop .pvs-new{animation:none}}
@media (max-width:640px){
  .pvs-row .pvs-cell{width:44px}
  #pvs-wn-row .pvs-cell{width:52px}
  .pvs-picks{gap:6px}
  .pvs-grid{max-width:300px;gap:3px;padding:6px}
  #pvs-gr-read,#pvs-pd-read,#pvs-bn-read,#pvs-rd-read,#pvs-wn-read{min-height:6.6em}
}

/* ---------------- maths: notation and substitution (topic_diagrams/gcse_algebraic_notation_and_substitution.py,
   interactions in js/gcse_algebraic_notation_and_substitution.js; also uses the ga-, plv-, pca- and pbo- styles) ---------------- */
/* tables of words and phrases wrap, rather than scrolling sideways */
.diagram-head .gns-table td:first-child{white-space:normal}
.gns-table{max-width:680px}
/* working, one line per step */
.gns-work{margin-top:12px;font:800 1.2rem/1.45 'Nunito',sans-serif;color:var(--navy)}
.gns-line{display:block;padding:2px 0}
.gns-line .fr{font-size:.8em}
.gns-eq{display:inline-block;width:1.4em;color:var(--deep-text)}
.gns-work--live{width:max-content;max-width:100%;margin:14px auto 0;min-height:10.5em;font-size:1.15rem}
.gns-work--read{display:inline-block;text-align:left;margin-top:6px;font-size:1.05rem}
.gns-line--hid{visibility:hidden}
.gns-big{font:900 2rem/72px 'Nunito',sans-serif;color:var(--navy);text-align:center;min-height:72px;margin-top:6px}
.gns-big .fr{line-height:1.12}
.gns-or{font:600 1rem/1 'Poppins',sans-serif;color:var(--muted);margin:0 .3em}
.gns-target{font:900 1.35rem/1 'Nunito',sans-serif;color:#1d7a3a}
/* 1. the term builder */
.gns-tb-long{text-align:center;font:800 1.15rem/1.4 'Nunito',sans-serif;color:var(--muted);margin-top:8px;min-height:1.6em}
.gns-tb-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin-top:10px}
.gns-tb-lab{font:700 13px/1 'Poppins',sans-serif;color:var(--muted);min-width:6.5em;text-align:right}
.gns-tb-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.gns-key{min-width:46px;height:44px;padding:0 10px;font:900 1.2rem/1 'Nunito',sans-serif;border-radius:12px}
.gns-key .fr{font-size:.75em}
/* 2. pick it apart, and sort the cards */
.gns-an-expr{gap:8px}
.gns-term{padding:4px 12px}
.gns-term--ok,.gns-term--ok:disabled{border-color:#1d7a3a;background:#e7f6ec;color:#1d5c30}
.gns-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;min-height:56px}
.gns-card{font:800 1.1rem/1.3 'Nunito',sans-serif;color:var(--navy);background:var(--white);border:2px solid #b9cdee;border-radius:14px;
  padding:8px 14px;cursor:pointer;box-shadow:0 3px 0 #d6e6fb}
.gns-card:hover{border-color:var(--sky)}
.gns-card[aria-pressed="true"]{border-color:var(--deep);background:#e8f6fd;box-shadow:0 0 0 3px #bfe6f8}
.gns-card:focus-visible,.gns-bin:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.gns-card .fr,.gns-chip .fr{font-size:.75em}
.gns-bins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:620px;margin:14px auto 0}
.gns-bin{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:96px;padding:10px;border:2px dashed #9fb7e0;border-radius:16px;
  background:var(--light);cursor:pointer}
.gns-bin:hover{border-color:var(--sky);background:#e8f6fd}
.gns-bin-name{font:800 1rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.gns-bin-items{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.gns-chip{font:800 .95rem/1.3 'Nunito',sans-serif;color:#1d5c30;background:#e7f6ec;border-radius:10px;padding:3px 9px}
/* 3. the number machine */
.gns-mc{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 6px;margin-top:12px}
.gns-mc-box{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:92px;padding:8px 10px;border:2px solid var(--deep);
  border-radius:14px;background:var(--white)}
.gns-mc-io{border-color:#b9cdee;background:var(--light);min-width:64px;font:900 1.3rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.gns-mc-lab{font:700 11px/1 'Poppins',sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.gns-mc-ctl{display:flex;align-items:center;gap:4px}
.gns-mc select{font:800 1.05rem/1 'Nunito',sans-serif;color:var(--navy);border:2px solid #b9cdee;border-radius:10px;padding:5px 4px;background:var(--white)}
.gns-mc select:focus-visible{outline:3px solid var(--sky);outline-offset:1px}
.gns-mc-sq{font:800 1rem/1 'Nunito',sans-serif;color:var(--navy)}
.gns-mc-val{font:800 1rem/1.2 'Nunito',sans-serif;color:var(--deep-text)}
.gns-mc-arrow{font:900 1.3rem/1 'Nunito',sans-serif;color:var(--deep-text)}
#gns-mc-read{min-height:6.4em}
/* 4. build the formula */
.gns-fb-text{text-align:center;color:var(--ink);font-size:1rem;margin-top:8px;max-width:60ch;margin-inline:auto;min-height:3em}
.gns-fb-bar{display:flex;width:100%;max-width:600px;height:46px;margin:12px auto 0;border-radius:10px;overflow:hidden;background:#f6f8fc;
  box-shadow:inset 0 0 0 2px #d6e6fb}
.gns-blk{display:grid;place-items:center;flex:0 0 auto;min-width:0;overflow:hidden;font:800 .8rem/1 'Nunito',sans-serif;color:var(--white);
  background:var(--deep);border-right:2px solid var(--white);white-space:nowrap}
.gns-blk--fix{background:var(--navy)}
.gns-blk--gone{background:#fff3f5;color:#b3122f;border-right-color:#f5c2cc;
  background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(232,41,74,.18) 6px 8px)}
#gns-fb-read{min-height:4.6em}
/* 6. who is right */
.gns-kid{font-size:1rem;gap:3px}
.gns-kid-line{display:block;line-height:1.5}
.gns-kid-line .fr{font-size:.75em}
/* no green for "just worked out" here: it would hint which working is right */
.gns-kid .pbo-new{color:inherit}
.gns-kid-line--bad{color:#b3122f;text-decoration:underline wavy #e8294a;text-underline-offset:4px}
#gns-wr-read{min-height:4.6em}
/* 7. the workshop */
.gns-ws-q{text-align:center;font-size:1.1rem;color:var(--ink);margin-top:12px;min-height:3.2em}
.gns-ws-q b{font:900 1.3rem/1.4 'Nunito',sans-serif;color:var(--navy)}
.gns-ans{width:100%;max-width:240px;height:58px;margin:10px auto 0;display:grid;place-items:center;border:3px solid var(--sky);border-radius:14px;
  background:var(--white);font:900 1.8rem/1 'Nunito',sans-serif;color:var(--navy);cursor:text}
.gns-ans:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
.gns-ans-ph{font:600 .95rem/1 'Poppins',sans-serif;color:#9aa6bd}
.gns-pad .gns-key-back{grid-column:span 3}
#gns-ws-read{min-height:5em}
/* 8. the formula lab */
.gns-fl-about{text-align:center;color:var(--ink);font-size:.95rem;margin-top:10px;max-width:60ch;margin-inline:auto;min-height:3em}
.gns-fl-fig{width:100%;max-width:340px;height:160px;margin:8px auto 0}
.gns-fl-fig[hidden]{display:none}
.gns-fl-fig svg{display:block;width:100%;height:100%}
.gns-shape{fill:#e8f6fd;stroke:var(--deep);stroke-width:2.5}
.gns-hline{stroke:var(--red);stroke-width:2;stroke-dasharray:5 4}
.gns-rline{stroke:var(--red);stroke-width:2.5}
.gns-dot{fill:var(--navy)}
.gns-tube{fill:var(--white);stroke:var(--navy);stroke-width:2}
.gns-bulb{fill:var(--red);stroke:var(--navy);stroke-width:2}
.gns-merc{fill:var(--red)}
.gns-flab{font:800 14px 'Nunito',sans-serif;fill:var(--navy)}
.gns-fl-hide{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;color:var(--muted);cursor:pointer}
.gns-fl-hide input{width:18px;height:18px;accent-color:var(--deep)}
/* 9. quiz: options can be expressions */
.gns-choice .fr{font-size:.8em}
@media (max-width:640px){
  .gns-bins{grid-template-columns:1fr 1fr}
  .gns-big{font-size:1.6rem}
  .gns-work{font-size:1.05rem}
  .gns-mc-box{min-width:80px;padding:6px}
  .gns-mc-arrow{transform:rotate(0)}
  .gns-tb-lab{min-width:0;width:100%;text-align:center}
  #gns-mc-read,#gns-ws-read,#gns-wr-read{min-height:7em}
}

/* ---------------- maths: collecting like terms (topic_diagrams/gcse_collecting_like_terms.py,
   interactions in js/gcse_collecting_like_terms.js; also uses the ga-, gns-, plv-, pca- and pbo- styles) ---------------- */
/* each group of like terms has a colour AND an underline, so the groups still show without colour */
.clt-f1,.clt-f2,.clt-f3,.clt-f4{font-weight:700;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:5px;
  white-space:nowrap}
.clt-f1{color:var(--deep-text);text-decoration-style:solid}
.clt-f2{color:#b3122f;text-decoration-style:double}
.clt-f3{color:var(--navy);text-decoration-style:dotted;text-decoration-thickness:3px}
.clt-f4{color:#4b5563;text-decoration-style:dashed}
.clt-key{align-items:baseline;gap:6px 16px}
.clt-key>span:first-child{flex:1 1 100%}
.clt-work .gns-line{line-height:1.7}
.clt-work .gns-line .fr{font-size:.75em}
.ga-math .fr,.ga-answer .fr{font-size:.8em}
/* algebra tiles: a long tile is x, a big square is x squared, a small square is 1; red tiles are negative */
.clt-trow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:10px 14px;margin-top:12px}
.clt-tgroup{display:flex;flex-direction:column;align-items:center;gap:6px}
.clt-tiles{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px}
.clt-tlab{font:800 1rem/1 'Nunito',sans-serif;color:var(--navy)}
.clt-tsign{font:900 1.5rem/46px 'Nunito',sans-serif;color:var(--navy);align-self:flex-start}
.clt-tile{display:inline-block;flex:0 0 auto;background:var(--sky);border:2px solid var(--deep);border-radius:4px;
  transition:opacity .5s ease,transform .5s ease}
.clt-tile--x{width:16px;height:46px}
.clt-tile--x2{width:46px;height:46px}
.clt-tile--1{width:16px;height:16px}
.clt-tile--neg{background:#ffd9e0;border-color:var(--red);
  background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(232,41,74,.28) 5px 7px)}
.clt-tile--gone{opacity:.18;transform:scale(.8)}
.clt-at-board{min-height:120px;margin-top:10px;display:flex;flex-direction:column;justify-content:center}
.clt-at-empty{text-align:center;color:var(--muted);font-size:.95rem}
.clt-at-sorted{display:flex;flex-direction:column;gap:12px;width:100%;max-width:560px;margin:0 auto}
.clt-at-row{display:grid;grid-template-columns:5.5em 1fr 4.5em;align-items:center;gap:10px}
.clt-at-name{font:700 13px/1.2 'Poppins',sans-serif;color:var(--muted);text-align:right}
.clt-at-name sup{font-size:.7em}
.clt-at-lines{display:flex;flex-direction:column;gap:5px}
.clt-at-res{font:900 1.3rem/1 'Nunito',sans-serif;color:var(--navy)}
.clt-at-expr{font-size:1.5rem;line-height:1.4;min-height:2.8em;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .25em}
.clt-at-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
#clt-at-read{min-height:5em}
/* like or not */
.clt-pair{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin-top:12px;min-height:76px}
.clt-pcard{font:900 2rem/1.2 'Nunito',sans-serif;color:var(--navy);background:var(--white);border:2px solid #b9cdee;border-radius:16px;
  padding:10px 20px;box-shadow:0 3px 0 #d6e6fb}
.clt-pcard .fr{font-size:.6em}
.clt-pand{font:600 1rem/1 'Poppins',sans-serif;color:var(--muted)}
.clt-lk-btn{min-width:150px}
.clt-lk-btn.plv-ok{background:#1d7a3a;border-color:#1d7a3a;color:var(--white)}
.clt-lk-btn.plv-bad{background:#fff3f5;border-color:var(--red);color:#b3122f}
.clt-lk-btn:disabled{cursor:default}
.clt-lk-btn:disabled:not(.plv-ok):not(.plv-bad){opacity:.55}
#clt-lk-read{min-height:5.2em}
/* the collector */
.clt-co-expr{gap:8px}
.clt-chip{padding:4px 12px;white-space:nowrap}
.clt-chip[aria-pressed="true"]{border-color:var(--deep);background:#e8f6fd;box-shadow:0 0 0 3px #bfe6f8}
.clt-chip--done,.clt-chip--done:disabled{background:var(--light);border-style:dashed;opacity:.9}
.clt-hint{border-color:var(--sky);box-shadow:0 0 0 3px #bfe6f8;animation:clt-pulse 1s ease 2}
@keyframes clt-pulse{50%{box-shadow:0 0 0 7px #bfe6f8}}
.clt-co-work{width:auto;text-align:center;margin:12px auto 0;min-height:2em;font-size:1.1rem}
#clt-co-read{min-height:5em}
/* shapes */
.clt-tick{stroke:var(--navy);stroke-width:2}
.clt-sym{stroke:var(--red);stroke-width:1.5;stroke-dasharray:6 5}
.clt-pm-fig{height:190px}
.clt-pm-work{width:auto;text-align:center;min-height:9em;font-size:1.02rem}
.clt-pm-note{font:600 .9rem/1.4 'Poppins',sans-serif;color:var(--muted);max-width:52ch}
.clt-pm-chk{font:700 .95rem/1.5 'Poppins',sans-serif;color:var(--ink)}
/* algebra pyramids */
.clt-pyr{display:flex;flex-direction:column;align-items:center;gap:4px;margin:14px auto 0}
.clt-prow{display:flex;justify-content:center;gap:4px}
.clt-brick{display:grid;place-items:center;width:120px;height:46px;padding:0 6px;border:2px solid var(--deep);border-radius:8px;
  background:var(--white);font:800 1.05rem/1 'Nunito',sans-serif;color:var(--navy);white-space:nowrap}
.clt-brick--blank{background:var(--light);border-style:dashed;color:var(--muted)}
button.clt-brick{cursor:pointer;font:inherit;font:800 1.05rem/1 'Nunito',sans-serif}
button.clt-brick:hover{border-color:var(--sky);background:#e8f6fd}
button.clt-brick:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.clt-brick--sel{border-style:solid;border-color:var(--sky);background:#e8f6fd;box-shadow:0 0 0 3px #bfe6f8}
.clt-brick--new{border-color:#1d7a3a;background:#e7f6ec;color:#1d5c30}
.ga-ex .clt-pyr{margin-top:10px}
#clt-py-read{min-height:4.6em}
/* the workshop */
.clt-ans{max-width:340px;font-size:1.6rem}
.clt-pad .clt-key-let{background:#e8f6fd}
.clt-pad .pca-key sup{font-size:.55em}
#clt-ws-read{min-height:5em}
.clt-pad .pca-key[data-key="⌫"]{font-size:1.2rem}
@media (max-width:640px){
  .clt-pcard{font-size:1.6rem;padding:8px 14px}
  .clt-at-row{grid-template-columns:4em 1fr 3.4em;gap:6px}
  .clt-tile--x2{width:36px;height:36px}
  .clt-tile--x{width:13px;height:36px}
  .clt-tile--1{width:13px;height:13px}
  .clt-brick{width:96px;font-size:.92rem}
  button.clt-brick{font-size:.92rem}
  .clt-at-expr{font-size:1.25rem}
  #clt-co-read,#clt-ws-read,#clt-at-read,#clt-lk-read{min-height:7em}
}
.clt-alone{font:600 .8rem/1 'Poppins',sans-serif;color:var(--muted)}
/* the typed answer stays on one line; a long answer gets a smaller size rather than wrapping */
.clt-ans-txt{white-space:nowrap}
.clt-ans--long{font-size:1.2rem}
.clt-pad .pca-key:disabled{opacity:.4;cursor:default;box-shadow:none}

/* ---------------- maths: expanding brackets (topic_diagrams/gcse_expanding_brackets.py,
   interactions in js/gcse_expanding_brackets.js; also uses the ga-, gns-, clt-, plv-, pca- and pbo- styles) ---------------- */
/* the term outside a bracket, while it multiplies */
.eb-out{display:inline-block;background:#fdecef;color:#b3122f;font-weight:800;border-radius:7px;padding:0 6px;line-height:1.45}
.eb-center{text-align:center;max-width:68ch;margin-top:8px}
.eb-h3{font:900 1.15rem/1.3 'Nunito',sans-serif;color:var(--navy);margin-top:22px}
.eb-work .gns-line{line-height:1.75}
.eb-work .fr{font-size:.75em}
.eb-wline{text-align:center;font:800 1.05rem/1.5 'Nunito',sans-serif;color:var(--navy);margin-top:8px}
.eb-bundle{flex-wrap:nowrap}
.eb-bundle--ones{flex-wrap:wrap;max-width:56px}
/* the sign rules */
.eb-signs{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:8px 14px;margin-top:12px}
.eb-signs span{background:var(--white);border:2px solid #d6e6fb;border-radius:12px;padding:6px 14px;
  font:800 1.15rem/1.3 'Nunito',sans-serif;color:var(--navy);white-space:nowrap}
.eb-signs b{color:var(--deep-text)}
/* FOIL and the pattern box */
.eb-foil{background:var(--white);border:2px dashed #b9cdee;border-radius:14px;padding:12px 16px;margin-top:14px;max-width:68ch;font-size:.95rem}
.eb-foil p+ul,.eb-foil ul+p{margin-top:6px}
/* the grid method */
.eb-gridwrap{overflow-x:auto;margin-top:10px}
.eb-grid{border-collapse:separate;border-spacing:4px;margin:0 auto}
.eb-grid th,.eb-grid td{min-width:78px;height:50px;padding:4px 10px;text-align:center;border-radius:10px;
  font:800 1.12rem/1.2 'Nunito',sans-serif;white-space:nowrap}
.eb-grid thead th,.eb-grid tbody th{background:#e6f0fc;color:var(--deep-text)}
.eb-grid td{background:var(--white);border:2px solid #b9cdee;color:var(--navy)}
.eb-grid .eb-grid-x{background:none;color:var(--muted);min-width:40px}
.eb-grid .clt-f1,.eb-grid .clt-f2,.eb-grid .clt-f3,.eb-grid .clt-f4{text-underline-offset:4px}
.ga-ex .eb-grid{margin:0}
/* the area model pictures */
.eb-fig{margin:12px 0 0;max-width:420px}
.eb-fig svg,.eb-am-fig svg{display:block;width:100%;height:auto}
.eb-a{stroke:var(--deep);stroke-width:2}
.eb-a--xx{fill:#cfe6fa}
.eb-a--x{fill:#e8f6fd}
.eb-a--1{fill:#f6f8fc}
.eb-a--hi{fill:#fdecef;stroke:var(--red)}
.eb-a--gone{fill:none;stroke:#b9cdee;stroke-dasharray:5 4}
.eb-at{font:900 15px 'Nunito',sans-serif;fill:var(--navy)}
.eb-at--gone{fill:#9aa6bd}
.eb-sup{font-size:10px}
.eb-shade{fill:#cfe6fa;stroke:var(--deep);stroke-width:2.5}
.eb-hole{fill:var(--white);stroke:var(--deep);stroke-width:2}
.eb-hole-lab{font-size:12px}
.eb-am-fig{width:100%;max-width:470px;margin:6px auto 0}
.eb-sq-fig{max-width:400px}
.eb-am-eq{font-size:1.7rem}
.eb-am-work{width:auto;font-size:1rem;min-height:5.2em;text-align:center}
.eb-bad{color:#b3122f}
/* algebra tiles in a rectangle: x² big squares, x long tiles, 1 small squares */
.eb-tg{--eb-tx:58px;--eb-t1:20px;display:grid;gap:3px;justify-content:center;margin:14px auto 0;width:max-content;max-width:100%}
.eb-tg-corner{color:var(--muted);font:800 .9rem/1 'Nunito',sans-serif;align-self:end;justify-self:end;padding:0 4px 4px 0}
.eb-tg-lab{display:grid;place-items:center;font:900 1rem/1 'Nunito',sans-serif;color:var(--navy);min-width:20px;min-height:20px;padding:2px}
.eb-tg-lab--span{border-bottom:2px solid var(--navy);margin-bottom:3px}
.eb-tg-lab--rspan{border-right:2px solid var(--navy);margin-right:3px}
.eb-t{display:block;border:2px solid var(--deep);border-radius:4px}
.eb-t--xx{background:#9fd3f0}
.eb-t--x{background:#d2edfb}
.eb-t--1{background:var(--white)}
.eb-tl-ctl{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:10px}
.eb-tl-br{display:flex;flex-direction:column;align-items:center;gap:4px}
.eb-tl-name{font:700 12px/1 'Poppins',sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.eb-tl-bits{display:flex;align-items:center;gap:6px;font:900 1.3rem/1 'Nunito',sans-serif;color:var(--navy)}
.eb-tl-bits b{min-width:1.6em;text-align:center}
.eb-num{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.eb-num b{font:900 1.4rem/1.1 'Nunito',sans-serif;color:var(--navy)}
.eb-step{min-width:40px;height:28px;padding:0;font-size:.75rem;border-radius:9px}
.eb-step:disabled{opacity:.35;cursor:default}
.eb-tl-eq{font-size:1.5rem}
.eb-tl-board{min-height:120px;overflow-x:auto}
#eb-tl-read{min-height:3em}
/* quick fire */
.eb-mq-big{font:900 2rem/1.3 'Nunito',sans-serif;color:var(--navy)}
#eb-mq-read,#eb-ar-read,#eb-gb-read,#eb-wr-read{min-height:4.6em}
/* arrow by arrow */
.eb-ar-stage{position:relative;padding-top:78px;margin-top:6px}
.eb-ar-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.eb-ar-expr{display:flex;justify-content:center;align-items:baseline;flex-wrap:nowrap;gap:2px;font:900 2.3rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.eb-ar-out{color:#b3122f;padding:0 4px;min-width:6px}
.eb-ar-par{color:var(--navy)}
.eb-ar-op{margin:0 .25em}
.eb-ar-t{padding:0 4px;border-radius:8px;transition:background .3s ease,color .3s ease}
.eb-ar-t--on{background:#e8f6fd;box-shadow:0 0 0 3px #bfe6f8}
.eb-ar-t--done{color:#1d5c30}
.eb-arc{fill:none;stroke-width:2.5;stroke-linecap:round}
.eb-arc--on{stroke:var(--red)}
.eb-arc--done{stroke:#1d7a3a}
.eb-arc--wait{stroke:#c9d6ec;stroke-dasharray:4 5}
.eb-arc-head{fill:context-stroke}
.eb-ar-work,.eb-gb-work{width:auto;text-align:center;margin:12px auto 0;min-height:2em;font-size:1.1rem}
/* the grid builder */
.eb-gb-cell{width:100%;min-width:70px;height:40px;border:2px dashed #b9cdee;border-radius:8px;background:var(--light);
  color:var(--muted);font:800 1.1rem/1 'Nunito',sans-serif;cursor:pointer}
.eb-gb-cell:hover{border-color:var(--sky);background:#e8f6fd}
.eb-gb-cell:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.eb-gb-cell--sel{border-style:solid;border-color:var(--sky);background:#e8f6fd;box-shadow:0 0 0 3px #bfe6f8}
.eb-gb-done{color:#1d5c30}
#eb-gb-grid .eb-grid td{padding:3px 6px}
/* the area checker */
.eb-ac-fig{max-width:400px;height:220px}
.eb-ac-work{width:auto;text-align:center;min-height:9em;font-size:1.02rem}
/* the workshop */
.eb-ans{max-width:380px}
#eb-ws-read{min-height:5em}
#eb-ws-read .eb-gridwrap{margin-top:8px}
@media (max-width:640px){
  .eb-ar-expr{font-size:1.7rem}
  .eb-mq-big{font-size:1.6rem}
  .eb-grid th,.eb-grid td{min-width:62px;font-size:1rem;padding:4px 6px}
  .eb-tg{--eb-tx:44px;--eb-t1:15px}
  .eb-am-eq,.eb-tl-eq{font-size:1.25rem}
  .eb-signs span{font-size:1rem;padding:5px 10px}
  #eb-mq-read,#eb-ar-read,#eb-gb-read,#eb-wr-read,#eb-ws-read{min-height:7em}
}

/* ---------------- maths 11+: algebraic expressions (topic_diagrams/eleven_plus_algebraic_expressions_and_substitution.py,
   interactions in js/eleven_plus_algebraic_expressions_and_substitution.js). Reuses pca- (2.1: keypad, levels), pfe- (3.1:
   keypad, choices, stacked fractions), pmi- (3.2: working), plv- (1.1) and pns-chip / pns-pick / pns-bin (5.1). Colour key:
   numbers dark blue, letters red and in italics (the unknowns, like the red ? stones of 5.1). Tiles that can be dragged
   have touch-action:none so a drag does not scroll the page. ---------------- */
.pae-chip--l::before{background:var(--red)}
.pae-ex{font-family:'Nunito',sans-serif;font-weight:800;white-space:nowrap}   /* an expression never breaks across lines */
.pae-l{color:#b3122f;font-style:italic;padding:0 .08em 0 .02em}
.pae-ex sup{font-size:.62em;line-height:0}
.pae-fr{font-size:.92em;line-height:1.05}
.plv-choice.plv-ok .pae-l,.plv-choice.plv-ok .plv-n--o,.plv-choice.plv-bad .pae-l,.plv-choice.plv-bad .plv-n--o{color:inherit}
/* mystery bags */
.ga-ex .pae-bags{width:auto;max-width:100%;height:auto;margin:10px 0 0}
.pae-bag{fill:#dcebfb;stroke:var(--deep);stroke-width:2.5;stroke-linejoin:round}
.pae-tie{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.pae-bagl{font:italic 900 30px 'Nunito',sans-serif;fill:#b3122f}
.pae-sweet{fill:var(--sky);stroke:var(--deep);stroke-width:1.5}
.pae-shine{fill:var(--white);opacity:.85}
.pae-short td .pae-ex{font-size:1.08rem;color:var(--navy)}
/* term tiles: each wears the sign in front of it */
.pae-tiles{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.pae-tiles--live{justify-content:center;width:100%;max-width:640px;box-sizing:border-box;min-height:76px;margin:12px auto 0;padding:14px;border-radius:16px;background:var(--light)}
.pae-tile{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border:3px solid var(--deep);border-radius:14px;background:var(--white);
  box-shadow:0 4px 0 #9fb7e0;font:900 1.5rem/1 'Nunito',sans-serif;color:var(--navy);touch-action:none;cursor:grab}
button.pae-tile{min-height:56px}
.pae-tile[aria-pressed="true"]{border-color:var(--red);background:#fff7f8;box-shadow:0 0 0 3px #ffc9d3}
.pae-tiles--bare .pae-tile{padding:8px 16px}
.pae-sg{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--white);font:900 1.15rem/1 'Nunito',sans-serif}
.pae-sg--quiet{opacity:.3}
.pae-fixed{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#dbe3f2;color:var(--navy);font:900 1.25rem/1 'Nunito',sans-serif}
.pae-as{margin-top:8px;text-align:center;color:var(--ink)}
.ga-ex .pae-as{text-align:left;margin-top:4px}
/* dragging */
.pae-dragging{opacity:.35}
.pae-ghost{position:fixed;z-index:400;pointer-events:none;transform:translate(-50%,-60%);display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:3px solid var(--deep);border-radius:12px;background:var(--white);box-shadow:0 10px 24px rgba(27,27,78,.3);
  font:900 1.4rem/1 'Nunito',sans-serif;color:var(--navy)}
/* long way, short way */
.pae-match{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;max-width:560px;margin:12px auto 0}
.pae-mcol{display:flex;flex-direction:column;gap:8px}
.pae-card{min-height:54px;font:800 1.2rem/1.2 'Nunito',sans-serif}
.pae-card[aria-pressed="true"]{border-color:var(--deep);background:var(--light);box-shadow:0 0 0 3px var(--sky)}
/* the expression builder */
.pae-say{display:block;margin-top:6px;font:800 1.15rem/1.4 'Nunito',sans-serif;color:var(--navy)}
.pae-buildrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;width:100%;max-width:560px;box-sizing:border-box;
  min-height:70px;margin:12px auto 0;padding:10px;border:3px dashed #9fb7e0;border-radius:16px;background:var(--white)}
.pae-row--over{border-color:var(--deep);background:var(--light)}
.pae-hint{font:600 .9rem/1.2 'Poppins',sans-serif;color:var(--muted)}
.pae-reads{min-height:1.6em;margin-top:6px;text-align:center;color:var(--ink)}
.pae-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:560px;min-height:52px;margin:10px auto 0}
.pae-tok{min-width:48px;height:50px;padding:0 12px;border-radius:12px;font:900 1.4rem/1 'Nunito',sans-serif;color:var(--navy);touch-action:none;cursor:grab}
.pae-tok--ok{border-color:#1d7a3a;background:#e7f6ec}
/* the machine: letters as drop slots */
.pae-machine{display:flex;justify-content:center;width:100%;margin:14px auto 0}
.pae-mline{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;max-width:100%;box-sizing:border-box;padding:14px 18px;
  border-radius:18px;background:var(--light);font:900 1.9rem/1 'Nunito',sans-serif;color:var(--navy)}
.pae-op{white-space:pre}
.pae-mline sup{align-self:flex-start;font-size:.55em;margin-top:2px}
.pae-slot{display:inline-grid;place-items:center;box-sizing:border-box;min-width:52px;height:56px;padding:0 8px;border:3px dashed var(--red);border-radius:12px;
  background:#fff7f8;cursor:pointer;transition:transform .15s ease}
.pae-slot--full{border:3px solid var(--deep);background:var(--white)}
.pae-slot--sel{box-shadow:0 0 0 3px var(--sky)}
.pae-slot--over{background:#ffe3e8;transform:scale(1.08)}
.pae-hx{display:none;margin:0 2px;font-size:.85em;color:#b3122f}
.pae-hx--on{display:inline}
.pae-pop{animation:plv-pop .45s ease-out}
.pae-nums{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:560px;margin:14px auto 0}
.pae-num{min-width:52px;height:52px;padding:0 10px;border-radius:12px;font:900 1.35rem/1 'Nunito',sans-serif;color:var(--navy);touch-action:none;cursor:grab}
.pae-work{list-style:none;padding-left:0;text-align:center;font:800 1.15rem/1.5 'Nunito',sans-serif;color:var(--navy)}
.pae-tablewrap{width:100%;max-width:520px;margin:12px auto 0}
.pae-table th,.pae-table td{text-align:center}
.pae-table td{font:800 1.02rem/1.3 'Nunito',sans-serif;color:var(--navy)}
.pae-table .pae-yes{color:#1d7a3a}
.pae-table .pae-no{color:#b3122f}
/* same or different */
#pae-sd-pair{width:100%;max-width:560px;margin:12px auto 0}
.pae-sdn{display:flex;align-items:center;justify-content:center;gap:8px;font:900 1.6rem/1 'Nunito',sans-serif;color:var(--navy)}
.pae-cards2{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:stretch;margin-top:12px}
.pae-card2{padding:12px;border-radius:16px;background:var(--light);text-align:center}
.pae-c2e{font:900 1.5rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.pae-c2w{margin-top:6px;font:700 1.05rem/1.3 'Nunito',sans-serif;color:var(--ink)}
.pae-c2a{font:900 1.3rem/1.3 'Nunito',sans-serif;color:var(--navy)}
.pae-vs{align-self:center;font:600 .9rem/1 'Poppins',sans-serif;color:var(--muted)}
.pae-bins{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the number line */
.pae-line{display:block;width:100%;max-width:640px;height:auto;margin:10px auto 0;overflow:visible}
.ga-ex .pae-line{width:100%;max-width:640px;margin:10px 0 0}
.pae-linewrap{width:100%;max-width:640px;margin:8px auto 0}
.pae-axis{stroke:var(--navy);stroke-width:2.5}
.pae-tick{stroke:var(--navy);stroke-width:1.5}
.pae-tick--big{stroke-width:2.5}
.pae-tl{font:700 15px 'Nunito',sans-serif;fill:var(--navy);paint-order:stroke;stroke:var(--white);stroke-width:5px;stroke-linejoin:round}
.pae-tl--zero{font-weight:900}
.pae-jump{fill:none;stroke-width:3;stroke-linecap:round}
.pae-jump--l{stroke:var(--red)}
.pae-jump--c{stroke:var(--deep)}
.pae-head--l{fill:var(--red)}
.pae-head--c{fill:var(--deep)}
.pae-jl{font:900 16px 'Nunito',sans-serif;paint-order:stroke;stroke:var(--white);stroke-width:5px;stroke-linejoin:round}
.pae-jl--l{fill:#b3122f}
.pae-jl--c{fill:var(--deep-text)}
.pae-start{fill:var(--navy)}
.pae-end{fill:var(--white);stroke:var(--navy);stroke-width:3.5}
.pae-endl{font:900 18px 'Nunito',sans-serif;fill:var(--navy);paint-order:stroke;stroke:var(--white);stroke-width:5px;stroke-linejoin:round}
.pae-step--wait{opacity:0}
.pae-step--in{animation:pae-in .3s ease-out}
.pae-step--in .pae-jump{stroke-dasharray:900;stroke-dashoffset:900;animation:pae-draw .5s ease-out forwards}
@keyframes pae-draw{to{stroke-dashoffset:0}}
@keyframes pae-in{from{opacity:0}to{opacity:1}}
#pae-ws-pad[hidden],#pae-ws-entry[hidden]{display:none}
#pae-mt-read,#pae-bd-read,#pae-sm-read,#pae-ts-read,#pae-sd-read,#pae-jl-read,#pae-ws-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.pae-pop,.pae-step--in,.pae-step--in .pae-jump{animation:none;stroke-dasharray:none}.pae-slot{transition:none}}
@media (max-width:640px){
  .pae-mline{font-size:1.5rem;padding:12px}
  .pae-slot{min-width:44px;height:48px}
  .pae-tile{font-size:1.25rem;padding:6px 12px 6px 6px}
  .pae-sg{width:26px;height:26px;font-size:1rem}
  .pae-card{font-size:1.05rem}
  .pae-tok{min-width:44px;height:46px;font-size:1.25rem}
  .pae-cards2{grid-template-columns:minmax(0,1fr)}
  .pae-vs{justify-self:center}
  .pae-bins{grid-template-columns:minmax(0,1fr)}
  .pae-tl{font-size:24px}
  .pae-jl{font-size:25px}
  .pae-endl{font-size:27px}
  #pae-mt-read,#pae-bd-read,#pae-sm-read,#pae-ts-read,#pae-sd-read,#pae-jl-read,#pae-ws-read{min-height:6.6em}
}

/* ---------------- maths 11+: linear equations (topic_diagrams/eleven_plus_one_step_and_two_step_equations.py,
   interactions in js/eleven_plus_one_step_and_two_step_equations.js). Reuses pae- (5.3: algebra colour key, bags,
   sweets, tiles, dragging), pca- (2.1: keypad, levels), pfe- (3.1: keypad), plv- (1.1) and pns-bin (5.1). The balance
   scale: the beam and the pans are groups the JS turns and moves, and a CSS transition makes the scale swing. -------- */
.ple-scalewrap{width:100%;max-width:520px;margin:10px auto 0}
.ple-scale{display:block;width:100%;height:auto;overflow:visible}
.ga-ex .ple-scale{width:100%;max-width:440px;margin:10px 0 0}
.ple-stand,.ple-base{fill:var(--navy)}
.ple-beam{stroke:var(--navy);stroke-width:10;stroke-linecap:round}
.ple-pivot{fill:var(--sky);stroke:var(--navy);stroke-width:3}
.ple-post{stroke:var(--navy);stroke-width:5}
.ple-pan{fill:var(--deep)}
.ple-beamg{transform-origin:280px 168px;transition:transform .55s cubic-bezier(.3,1.35,.5,1)}
.ple-pang{transition:transform .55s cubic-bezier(.3,1.35,.5,1)}
.ple-group{fill:none;stroke:var(--deep);stroke-width:2;stroke-dasharray:5 4}
.ple-faded{opacity:.2;transition:opacity .5s ease}
.ple-gone .pae-sweet{fill:none;stroke:#9fb7e0;stroke-width:1.5;stroke-dasharray:3 3}
.ple-gone .pae-shine{display:none}
.ple-hit{fill:transparent}
.ple-scalewrap--tap .ple-pang{cursor:pointer}
.ple-slider{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;font:900 1.35rem/1 'Nunito',sans-serif;color:var(--navy)}
.ple-slider input[type=range]{width:min(320px,58vw);height:32px;accent-color:var(--deep);cursor:pointer}
.ple-slider output{min-width:2ch;text-align:left}
.ple-sum{min-height:1.6em;margin-top:8px;text-align:center;font:700 1.05rem/1.5 'Nunito',sans-serif;color:var(--ink)}
.ple-sum--eq{font-size:1.5rem;font-weight:900;color:var(--navy)}
.ple-tip{font-size:1.1rem;color:#b3122f}
.ple-pans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:520px;margin:8px auto 0}
.ple-share{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.ple-share[hidden]{display:none}
.ple-sharelab{font:600 .95rem/1.2 'Poppins',sans-serif;color:var(--ink)}
.ple-sharebtn{font:800 1rem/1 'Nunito',sans-serif}
/* the working: each line, with what is done to both sides underneath */
.ple-work{display:grid;grid-template-columns:auto auto auto;column-gap:10px;row-gap:3px;align-items:center;width:max-content;max-width:100%;
  margin:10px 0 4px;font:900 1.35rem/1.35 'Nunito',sans-serif;color:var(--navy)}
.ple-wl{text-align:right}
.ple-wr{text-align:left}
.ple-we{text-align:center}
.ple-wo{display:inline-block;padding:0 9px;border-radius:9px;background:#e3f1fb;color:var(--deep-text);font-size:.8em;line-height:1.5}
.ple-workwrap{display:flex;justify-content:center;width:100%;margin-top:12px}
.ple-workwrap .ple-work{margin:0}
.ga-read .ple-work{margin:8px auto}
.ple-q{display:inline-block;min-width:1.4em;padding:0 4px;border:2px dashed var(--red);border-radius:7px;background:#fff7f8;color:#b3122f;text-align:center;line-height:1.2}
.ple-both{display:block;margin-top:2px;font:600 .72rem/1 'Poppins',sans-serif;color:var(--muted)}
.plv-choice.plv-ok .ple-both,.plv-choice.plv-bad .ple-both{color:inherit}
.ple-table th,.ple-table td{text-align:center}
.ple-table td .pae-ex{font-size:1.05rem;color:var(--navy)}
.ple-box{display:inline-block;width:1.4em;height:1.15em;border:2px solid var(--navy);border-radius:4px;vertical-align:-.2em}
/* the undo machine: the forward row, and the backwards row underneath it (column for column) */
.ple-mrow{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;margin:8px auto 0}
.ple-mrow--rev{flex-direction:row-reverse}
.ple-mbox{display:inline-grid;place-items:center;box-sizing:border-box;min-width:76px;height:52px;padding:0 8px;border:3px solid var(--deep);border-radius:12px;
  background:var(--light);font:900 1.3rem/1 'Nunito',sans-serif;color:var(--navy);white-space:nowrap}
.ple-mbox--l{border-color:var(--red);background:#fff7f8}
.ple-mbox--ans{border-color:#1d7a3a;background:#e7f6ec}
.ple-mop,.ple-uslot{display:inline-grid;place-items:center;box-sizing:border-box;min-width:76px;height:46px;padding:0 8px;border:3px solid var(--sky);border-radius:999px;
  background:var(--white);font:900 1.2rem/1 'Nunito',sans-serif;color:var(--navy);white-space:nowrap}
.ple-mop--undo{border-color:var(--deep);background:#eef7ff}
.ple-uslot{border:3px dashed var(--deep);cursor:pointer;transition:transform .15s ease}
.ple-uslot--full{border-style:solid;background:#eef7ff}
.ple-uslot.pae-slot--over{background:#ffe3e8;transform:scale(1.08)}
.ple-arrow{display:inline-block;width:24px;text-align:center;font:900 1.3rem/1 'Nunito',sans-serif;color:var(--muted)}
.ple-umach{width:100%}
.ple-umach--back{padding-bottom:28px}
.ple-mlab{display:block;margin-top:12px;text-align:center;font:600 .85rem/1.2 'Poppins',sans-serif;color:var(--muted)}
.ple-slotwrap{position:relative;display:inline-flex}
.ple-mval{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:5px;padding:0 7px;border-radius:8px;background:#e7f6ec;
  font:900 1rem/1.5 'Nunito',sans-serif;color:var(--navy);white-space:nowrap}
.ple-card{min-width:64px}
.ga-ex .ple-mrow{justify-content:flex-start}
#ple-rd-pad[hidden],#ple-rd-entry[hidden],#ple-ws-pad[hidden],#ple-ws-entry[hidden]{display:none}
#ple-mb-read,#ple-bs-read,#ple-um-read,#ple-rd-read,#ple-ws-read,#ple-dt-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.ple-beamg,.ple-pang,.ple-faded,.ple-uslot{transition:none}}
@media (max-width:640px){
  .ple-work{font-size:1.15rem;column-gap:7px}
  .ple-mbox{min-width:58px;height:46px;font-size:1.05rem;padding:0 5px}
  .ple-mop,.ple-uslot{min-width:58px;height:40px;font-size:1rem;padding:0 5px}
  .ple-arrow{width:15px;font-size:1rem}
  .ple-sum--eq{font-size:1.3rem}
  #ple-mb-read,#ple-bs-read,#ple-um-read,#ple-rd-read,#ple-ws-read,#ple-dt-read{min-height:6.6em}
}

/* ---------------- maths 11+: simultaneous logic puzzles (topic_diagrams/eleven_plus_simultaneous_logic_puzzles.py,
   interactions in js/eleven_plus_simultaneous_logic_puzzles.js). Reuses ple- (5.4: the balance scale and its colours),
   pae- (5.3: the algebra colour key), pca- (2.1: keypad, levels), pfe- (3.1: keypad), plv- (1.1). Each shape has its
   own colour; the number it stands for is written on it in white with a navy edge. -------- */
.psl-sh{display:inline-block;width:46px;height:46px;vertical-align:middle;overflow:visible}
.ga-ex .psl-sh,.ga-read .psl-sh,.plv-q .psl-sh{width:46px;max-width:none;height:46px;margin:0}
.psl-sh--in,.ga-ex .psl-sh--in,.ga-read .psl-sh--in,.plv-q .psl-sh--in,.pca-step .psl-sh--in{width:1.45em;height:1.45em;margin:0 .05em;vertical-align:-.38em}
.psl-shp{stroke:var(--navy);stroke-width:5;stroke-linejoin:round}
.psl-sh--star .psl-shp{fill:var(--red)}
.psl-sh--circle .psl-shp{fill:var(--sky)}
.psl-sh--triangle .psl-shp{fill:var(--deep)}
.psl-sh--square .psl-shp{fill:var(--navy)}
.psl-sh--diamond .psl-shp{fill:#bfe3f6}
.psl-sh--hexagon .psl-shp{fill:var(--white)}
.psl-v{font:900 40px/1 'Nunito',sans-serif;fill:var(--white);stroke:var(--navy);stroke-width:8;paint-order:stroke;stroke-linejoin:round}
.psl-chip::before{display:none}
.psl-keyrow{display:inline-flex;gap:2px}
.psl-keysh .psl-sh{width:24px;height:24px}
/* a picture equation */
.psl-eq{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;margin:8px 0 0;font:900 1.5rem/1 'Nunito',sans-serif;color:var(--navy)}
.psl-op{display:inline-block;min-width:18px;text-align:center;color:var(--deep-text)}
.psl-n{color:var(--navy)}
.psl-t{display:inline-flex}
.ga-math .psl-eq{margin:0}
.ga-math .psl-sh{width:40px;height:40px}
/* the balance scales */
.psl-scales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin-top:10px}
.psl-scalebox{min-width:0}
.psl-slab{display:block;margin-top:6px;text-align:center;font:600 .85rem/1.2 'Poppins',sans-serif;color:var(--muted)}
.ga-ex .psl-scale{width:100%;max-width:440px;margin:6px 0 0}
.ga-ex .psl-scales .psl-scale{max-width:none}
.psl-rules{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.psl-rules .psl-scalebox{flex:0 1 250px}
.psl-wtb{fill:var(--light);stroke:var(--navy);stroke-width:3}
.psl-wtt{font:900 22px/1 'Nunito',sans-serif;fill:var(--navy)}
.psl-hitr{fill:transparent}
.psl-tapscale .psl-it[role=button]{cursor:pointer;outline:none}
.psl-tapscale .psl-it[role=button]:focus-visible .psl-hitr{stroke:var(--deep);stroke-width:5;stroke-dasharray:8 6}
.psl-it--sel .psl-shp,.psl-it--x .psl-shp{stroke:#b3122f;stroke-width:12}
.psl-it--sel .psl-hitr{fill:#ffe3e8;stroke:var(--red);stroke-width:4}
.psl-it--new .psl-shp{stroke:#1d7a3a;stroke-width:9}
.psl-in{animation:psl-in .45s ease both}
@keyframes psl-in{from{opacity:0}to{opacity:1}}
/* clues to tap */
.psl-clues{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;margin-top:10px}
.psl-clue{display:flex;align-items:center;gap:12px;width:100%;max-width:460px;min-height:62px;padding:6px 14px;border-radius:14px;text-align:left}
.psl-clue .psl-eq{margin:0}
.psl-cluen{flex:none;min-width:3.6em;font:600 .8rem/1.2 'Poppins',sans-serif;color:var(--muted)}
.psl-clue--on{border-color:var(--red);background:#fff7f8}
.psl-clue--used{border-color:#3fae5a;background:#e7f6ec}
.psl-found{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.psl-fnd{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border:2px dashed #b9cdee;border-radius:999px;font:900 1.15rem/1.4 'Nunito',sans-serif;color:var(--navy)}
.psl-fnd--ok{border:2px solid #3fae5a;background:#e7f6ec}
/* the algebra grid */
.psl-gridwrap{display:flex;justify-content:center;width:100%;margin-top:10px}
.psl-grid{display:grid;grid-template-columns:repeat(var(--cols),54px) 64px;gap:6px;width:max-content;max-width:100%;margin:10px 0 0;align-items:center;justify-items:center}
.psl-cell{display:grid;place-items:center;width:54px;height:54px;border:2px solid #b9cdee;border-radius:10px;background:var(--white)}
.psl-cell--on{border-color:var(--red);background:#fff7f8}
.psl-tot{display:grid;place-items:center;min-width:52px;height:46px;padding:0 6px;border:2px solid var(--deep);border-radius:10px;background:var(--light);font:900 1.3rem/1 'Nunito',sans-serif;color:var(--navy)}
button.psl-tot{cursor:pointer}
.psl-tot--on{border-color:var(--red);background:#fff7f8}
.psl-tot--used{border-color:#3fae5a;background:#e7f6ec}
.psl-corner{width:52px}
/* bar models */
.psl-bars{display:block;width:100%;max-width:560px;height:auto;margin:10px auto 0}
.ga-ex .psl-bars{width:100%;max-width:520px;margin:10px 0 0}
.psl-bar{stroke-width:2.5}
.psl-bar--a{fill:#cfe3fa;stroke:var(--deep)}
.psl-bar--b{fill:#d8f0fb;stroke:var(--sky)}
.psl-bar--d{fill:#fde3e8;stroke:var(--red);stroke-dasharray:7 5}
.psl-barl{font:900 25px/1 'Nunito',sans-serif;fill:var(--navy)}
.psl-barl--tot{font-size:26px}
.psl-barn{font:600 19px/1 'Poppins',sans-serif;fill:var(--muted)}
.psl-barn--l{font:italic 800 26px/1 'Nunito',sans-serif;fill:#b3122f}
.psl-brace{fill:none;stroke:var(--muted);stroke-width:2.5}
.psl-letq{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px;font-size:1.5rem;color:var(--navy)}
.psl-steps{min-height:1.6em;margin-top:6px;text-align:center;font:600 .92rem/1.4 'Poppins',sans-serif;color:#1d7a3a}
.psl-steps p{margin:0}
/* the animals */
.psl-farm{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:100%;max-width:560px;margin:12px auto 0}
.ga-ex .psl-farm{justify-content:flex-start;margin:10px 0 0}
.psl-animal{display:inline-grid;place-items:center;width:58px;height:58px;padding:2px;border-radius:12px}
.psl-an,.ga-ex .psl-an{display:block;width:52px;height:52px;max-width:none;margin:0}
.psl-animal--btn{border:2px solid #b9cdee;background:var(--white);cursor:pointer}
.psl-an-w{fill:var(--white);stroke:var(--navy);stroke-width:2.2;stroke-linejoin:round}
.psl-an-r{fill:var(--red);stroke:var(--navy);stroke-width:1.2}
.psl-an-eye,.psl-an-head,.psl-an-body{fill:var(--navy)}
.psl-an-eye2,.psl-an-eye3{fill:var(--white)}
.psl-an-leg{fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round}
.psl-an-wool{fill:#e3f1fb;stroke:var(--navy);stroke-width:2.2}
.psl-an-shell{fill:var(--deep);stroke:var(--navy);stroke-width:2.2}
.psl-an-line{stroke:var(--navy);stroke-width:2}
.psl-count{margin-top:10px;text-align:center;font:700 1.1rem/1.5 'Nunito',sans-serif;color:var(--ink)}
.psl-need{font-weight:600;color:var(--muted)}
.psl-table th,.psl-table td{text-align:center}
#psl-fy-table{max-width:520px;margin:10px auto 0}
/* the quiz */
.psl-qclues{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:8px}
.psl-qclue{display:flex;align-items:center;gap:10px}
.psl-qclue .psl-eq{margin:4px 0 0}
.psl-qscale,.psl-qscales{width:100%;max-width:440px;margin:0 0 8px}
.psl-qscales{max-width:620px}
.psl-qscales--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.psl-qgrid{margin-bottom:8px}
#psl-cb-pad[hidden],#psl-cb-entry[hidden],#psl-sw-pad[hidden],#psl-sw-entry[hidden],#psl-sd-pad[hidden],#psl-sd-entry[hidden],
#psl-gc-pad[hidden],#psl-gc-entry[hidden],#psl-tn-pad[hidden],#psl-tn-entry[hidden]{display:none}
#psl-cb-read,#psl-sw-read,#psl-sd-read,#psl-gc-read,#psl-tn-read,#psl-fy-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.psl-in{animation:none}}
@media (max-width:640px){
  .psl-eq{font-size:1.25rem;gap:2px}
  .psl-sh,.ga-ex .psl-sh,.ga-read .psl-sh,.plv-q .psl-sh{width:38px;height:38px}
  .psl-op{min-width:14px}
  .psl-scales{grid-template-columns:minmax(0,1fr)}
  .psl-qscales--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .psl-clue{gap:8px;padding:6px 8px}
  .psl-cluen{min-width:0}
  .psl-grid{grid-template-columns:repeat(var(--cols),46px) 54px;gap:5px}
  .psl-cell{width:46px;height:46px}
  .psl-cell .psl-sh{width:36px;height:36px}
  .psl-tot{min-width:44px;height:42px;font-size:1.15rem}
  .psl-corner{width:44px}
  .psl-animal{width:50px;height:50px}
  .psl-an,.ga-ex .psl-an{width:44px;height:44px}
  #psl-cb-read,#psl-sw-read,#psl-sd-read,#psl-gc-read,#psl-tn-read,#psl-fy-read{min-height:6.6em}
}

/* ---------------- maths 11+: metric conversions (topic_diagrams/eleven_plus_metric_conversions.py,
   interactions in js/eleven_plus_metric_conversions.js). Reuses the colour key of 1.2 (plv-n--o, pld-dot, pld-n--d)
   and 3.7 (ppa-t-- in SVG text), the keypad and levels of 2.1 (pca-), 3.1 (pfe-) and 5.1 (pns-pad--x), the cards of
   3.9 (pcv-) and the choices of 1.1 (plv-). Navy: whole numbers. Blue: decimals. Red: the decimal point. -------- */
.pmc-units th,.pmc-units td{text-align:left}
.pmc-units td b{display:inline-block;min-width:2.2em;font:900 1.05rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.pmc-sqfacts td b{min-width:0}
.pmc-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pmc-fact{display:inline-block;padding:6px 14px;border:2px solid #b9cdee;border-radius:999px;background:var(--white);
  font:900 1.15rem/1.3 'Nunito',sans-serif;color:var(--navy)}
.pmc-fact b{color:var(--ink)}
.pmc-feel{margin-top:8px;padding-left:1.3em}
.pmc-feel li+li{margin-top:4px}
/* the ruler and the pencil */
.pmc-ruler,.ga-ex .pmc-ruler{display:block;width:100%;max-width:660px;height:auto;margin:10px auto 0;touch-action:pan-y}
.ga-ex .pmc-ruler{margin:10px 0 0}
.pmc-rul{fill:#fffbe9;stroke:var(--navy);stroke-width:2.5}
.pmc-tick{stroke:var(--navy);stroke-width:1.4}
.pmc-tick--cm{stroke-width:2.4}
.pmc-rlab{font:800 17px/1 'Nunito',sans-serif;fill:var(--navy)}
.pmc-rcm{font:600 13px/1 'Poppins',sans-serif;fill:var(--muted)}
.pmc-pen-rub{fill:var(--red);stroke:var(--navy);stroke-width:2}
.pmc-pen-body{fill:var(--sky);stroke:var(--navy);stroke-width:2}
.pmc-pen-wood{fill:#f6dcb4;stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.pmc-pen-lead{fill:var(--navy)}
.pmc-pen-drop{stroke:var(--red);stroke-width:2;stroke-dasharray:4 3}
.pmc-rulwrap{width:100%;margin-top:10px}
.pmc-rulwrap .pmc-ruler{cursor:ew-resize}
.pmc-knob{fill:rgba(232,41,74,.16);stroke:var(--red);stroke-width:3;cursor:ew-resize;outline:none}
.pmc-knob:focus-visible{stroke-width:5;stroke-dasharray:6 4}
.pmc-nudge{justify-content:center;margin-top:8px}
.pmc-live{min-height:1.5em;margin-top:8px;text-align:center;font:800 1.2rem/1.4 'Nunito',sans-serif;color:var(--ink)}
/* the stairs */
.pmc-stairsrow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 26px;margin-top:12px}
.pmc-stairs,.ga-ex .pmc-stairs,.diagram-head .pmc-stairs{display:block;height:auto;margin:0;max-width:100%}
.pmc-stairs--4{width:520px}
.pmc-stairs--2{width:250px}
.pmc-stairs2{display:flex;flex-wrap:wrap;gap:6px 22px}
.pmc-stepb{fill:var(--light);stroke:var(--deep);stroke-width:2.5}
.pmc-stepu{font:900 22px/1 'Nunito',sans-serif;fill:var(--navy)}
.pmc-stepn{font:600 10.5px/1 'Poppins',sans-serif;fill:var(--muted)}
.pmc-arr path{fill:none;stroke-width:2.5}
.pmc-arr text{font:900 15px/1 'Nunito',sans-serif}
.pmc-arr--d path{stroke:var(--deep)}
.pmc-arr--d text{fill:var(--deep-text)}
.pmc-arr--u path{stroke:var(--red)}
.pmc-arr--u text{fill:#b3122f}
.pmc-umstairs .pmc-arr{opacity:.35;transition:opacity .3s}
.pmc-umstairs .pmc-arr--on{opacity:1}
.pmc-umstairs .pmc-arr--on path{stroke-width:4.5}
.pmc-step--from .pmc-stepb{fill:#e8f6fd;stroke:var(--navy);stroke-width:4}
.pmc-step--to .pmc-stepb{fill:#fff7f8;stroke:var(--red);stroke-width:4}
.pmc-umstairs{display:flex;justify-content:center;width:100%;margin-top:10px}
.pmc-umstairs .pmc-stairs--4{width:100%;max-width:440px}
.pmc-umstairs .pmc-stairs--2{width:100%;max-width:230px}
/* the unit machine's place value chart */
.pmc-umchart{display:flex;justify-content:center;width:100%;margin-top:12px}
.pmc-chart{display:grid;grid-template-columns:repeat(7,minmax(0,52px));gap:4px;width:100%;max-width:400px;overflow:hidden}
.pmc-ch{display:grid;place-items:center;height:30px;border-radius:8px;background:#e9eaf3;font:800 .9rem/1 'Nunito',sans-serif;color:var(--navy)}
.pmc-ch abbr{text-decoration:none}
.pmc-ch--d{background:#e6f0fc;color:var(--deep-text)}
.pmc-cd{position:relative;display:grid;place-items:center;height:58px;border:2px solid #b9cdee;border-radius:10px;background:var(--white);
  font:900 2rem/1 'Nunito',sans-serif;color:var(--navy)}
.pmc-cd--d{color:var(--deep-text)}
.pmc-cd--pt::after{content:"";position:absolute;right:-7px;bottom:9px;width:10px;height:10px;border-radius:50%;background:var(--red);z-index:1}
.pmc-dg{display:inline-block}
.pmc-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:420px;margin:14px auto 0}
.pmc-ops .dg-btn{font:900 1.1rem/1 'Nunito',sans-serif}
/* the jug and the dial */
.pmc-scwrap{display:flex;justify-content:center;width:100%;margin-top:10px}
.pmc-jug,.ga-ex .pmc-jug{display:block;width:100%;max-width:240px;height:auto;margin:10px auto 0}
.pmc-scwrap .pmc-jug{touch-action:none;cursor:ns-resize;outline:none}
.pmc-scwrap .pmc-jug:focus-visible{outline:3px dashed var(--deep);outline-offset:4px;border-radius:12px}
.pmc-water{fill:#bfe6f8}
.pmc-surf{stroke:var(--deep);stroke-width:3}
.pmc-jt{stroke:var(--navy);stroke-width:2}
.pmc-jt--big{stroke-width:3}
.pmc-jlab{font:800 17px/1 'Nunito',sans-serif}
.pmc-junit{font:700 15px/1 'Poppins',sans-serif;fill:var(--muted)}
.pmc-jugline{fill:none;stroke:var(--navy);stroke-width:4;stroke-linejoin:round}
.pmc-jughandle{fill:none;stroke:var(--navy);stroke-width:8;stroke-linecap:round}
.pmc-hit{fill:transparent}
.pmc-dial,.ga-ex .pmc-dial{display:block;width:100%;max-width:260px;height:auto;margin:10px auto 0}
.pmc-dface{fill:var(--white);stroke:var(--navy);stroke-width:5}
.pmc-dt{stroke:var(--navy);stroke-width:2}
.pmc-dt--big{stroke-width:3.5}
.pmc-dlab{font:800 14px/1 'Nunito',sans-serif}
.pmc-dunit{font:700 16px/1 'Poppins',sans-serif;fill:var(--muted)}
.pmc-needle{stroke:var(--red);stroke-width:4;stroke-linecap:round}
.pmc-hub{fill:var(--navy)}
.pmc-scale{width:100%}
/* which unit? */
.pmc-thing{width:100%;text-align:center}
.pmc-q,.pmc-silly{margin:10px auto 0;font:800 1.3rem/1.4 'Nunito',sans-serif;color:var(--ink);max-width:none}
.pmc-silly b{padding:0 4px;border-radius:6px}
.pmc-bad{background:#fde3e8;color:#b3122f;text-decoration:line-through;text-decoration-color:var(--red)}
.pmc-bad .plv-n--o{color:inherit}
.pmc-good{background:#e7f6ec}
.pmc-ubtns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:520px;margin:14px auto 0}
.pmc-ubtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px}
.pmc-ubtn b{font:900 1.4rem/1 'Nunito',sans-serif}
.pmc-ubtn small{font:600 .72rem/1.2 'Poppins',sans-serif;color:var(--muted)}
.pmc-ubtn.plv-ok small,.pmc-ubtn.plv-bad small{color:inherit}
/* cards and steps */
.pmc-card{min-width:112px;font-size:1.45rem}
.pcv-card.pmc-card .pcv-cs{font-size:.9rem}
.pmc-done p{margin:2px 0}
/* squares and cubes */
.pmc-sq,.pmc-cube,.ga-ex .pmc-sq,.ga-ex .pmc-cube{display:block;width:100%;max-width:280px;height:auto;margin:10px auto 0}
.pmc-sqrow{fill:#bfe6f8;stroke:none}
.pmc-sqg{stroke:var(--deep);stroke-width:1}
.pmc-sqb{fill:none;stroke:var(--navy);stroke-width:4}
.pmc-sqlab{font:800 15px/1 'Nunito',sans-serif;fill:var(--navy)}
.pmc-cf--front{fill:var(--white)}
.pmc-cf--top{fill:var(--light)}
.pmc-cf--side{fill:#e3edfa}
.pmc-layer{fill:transparent}
.pmc-layer--on{fill:rgba(41,171,226,.45)}
.pmc-cg{stroke:var(--deep);stroke-width:.8;opacity:.75}
.pmc-cedge{fill:none;stroke:var(--navy);stroke-width:3;stroke-linejoin:round}
.pmc-zmwrap{display:flex;justify-content:center;width:100%;margin-top:6px}
.pmc-zmguess{grid-template-columns:repeat(3,minmax(0,1fr));max-width:420px}
#pmc-sc-pad[hidden],#pmc-sc-entry[hidden],#pmc-ws-pad[hidden],#pmc-ws-entry[hidden],#pmc-zm-pad[hidden],#pmc-zm-entry[hidden],
#pmc-zm-guess[hidden],#pmc-sc-check[hidden]{display:none}
#pmc-wu-read,#pmc-ru-read,#pmc-um-read,#pmc-sc-read,#pmc-or-read,#pmc-ws-read,#pmc-zm-read{min-height:4.6em}
@media (max-width:640px){
  .pmc-ubtns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pmc-chart{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
  .pmc-cd{height:50px;font-size:1.6rem}
  .pmc-q,.pmc-silly{font-size:1.12rem}
  .pmc-card{min-width:92px;font-size:1.2rem}
  .pmc-fact{font-size:1rem;padding:5px 10px}
  #pmc-wu-read,#pmc-ru-read,#pmc-um-read,#pmc-sc-read,#pmc-or-read,#pmc-ws-read,#pmc-zm-read{min-height:6.6em}
}

/* ---------------- maths 11+: imperial conversions (topic_diagrams/eleven_plus_imperial_conversions.py,
   interactions in js/eleven_plus_imperial_conversions.js). Reuses the pencil, jug, dial and fact styles of 6.1
   (pmc-), the colour key of 1.2 and 3.7, the keypad and levels of 2.1 (pca-), 3.1 (pfe-) and 5.1 (pns-pad--x), the
   ? box and pop of 4.1 (pdp-) and the choices of 1.1 (plv-). Imperial scales are drawn in red, metric in navy. ---- */
.pim-units td b{min-width:0;margin-right:.3em}
/* the two-edged ruler */
.pim-ruler,.ga-ex .pim-ruler{display:block;width:100%;max-width:704px;height:auto;margin:10px auto 0;touch-action:pan-y}
.ga-ex .pim-ruler{margin:10px 0 0}
.pim-rul{fill:#fffbe9;stroke:var(--navy);stroke-width:2.5}
.pim-rmid{stroke:#e6dcc0;stroke-width:1.5}
.pim-tick{stroke:var(--navy);stroke-width:1.4}
.pim-tick--in{stroke:var(--red)}
.pim-tick--big{stroke-width:2.4}
.pim-rlab{font:800 17px/1 'Nunito',sans-serif;fill:var(--navy)}
.pim-rlab--s{font-size:13px}
.pim-rname{font:700 12px/1 'Poppins',sans-serif;fill:var(--muted)}
.pim-rulwrap{width:100%;margin-top:10px}
.pim-rulwrap .pim-ruler{cursor:ew-resize}
/* the two-ring dial */
.pim-dial,.ga-ex .pim-dial{display:block;width:100%;max-width:280px;height:auto;margin:10px auto 0}
.pim-dlab{font:800 17px/1 'Nunito',sans-serif}
.pim-lbring{fill:none;stroke:var(--red);stroke-width:2}
.pim-lbt{stroke:var(--red);stroke-width:1.6}
.pim-lbt--big{stroke-width:2.6}
.pim-lblab{font:800 12.5px/1 'Nunito',sans-serif}
.pim-dunit{font:800 16px/1 'Poppins',sans-serif;fill:var(--navy)}
.pim-dunit--lb{fill:#b3122f}
.pim-dialwrap{display:flex;justify-content:center;width:100%;margin-top:6px}
/* the two-scale jug */
.pim-jug,.ga-ex .pim-jug{display:block;width:100%;max-width:250px;height:auto;margin:10px auto 0}
.pmc-scwrap .pim-jug{touch-action:none;cursor:ns-resize;outline:none}
.pmc-scwrap .pim-jug:focus-visible{outline:3px dashed var(--deep);outline-offset:4px;border-radius:12px}
.pim-jlab{font:800 15px/1 'Nunito',sans-serif}
.pim-pt{stroke:var(--red);stroke-width:2}
.pim-pt--big{stroke-width:3}
.pim-jname{font:700 14px/1 'Poppins',sans-serif;fill:var(--navy)}
.pim-jname--pt{fill:#b3122f}
/* the road */
.pim-road,.ga-ex .pim-road{display:block;width:100%;max-width:700px;height:auto;margin:10px auto 0}
.pim-tarmac{fill:#e9eaf3;stroke:#c9cbdc;stroke-width:2}
.pim-dash{stroke:var(--white);stroke-width:4;stroke-dasharray:18 14}
.pim-post{stroke:var(--navy);stroke-width:3}
.pim-post--on{stroke:var(--red);stroke-width:5}
.pim-roadv{font:800 22px/1 'Nunito',sans-serif}
.pim-roadwrap{width:100%;margin-top:6px}
.pim-road--tap .pim-hit:hover,.pim-road--tap .pim-hit:focus-visible{fill:rgba(41,171,226,.12)}
/* which is bigger? */
.pim-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:440px;margin:12px auto 0}
.pim-pbtn{padding:14px 10px;font:900 1.35rem/1.2 'Nunito',sans-serif}
.pim-bars{width:100%;min-height:10px;margin-top:10px}
.pim-barsvg{display:block;width:100%;max-width:580px;height:auto;margin:0 auto}
.pim-blab{font:800 19px/1 'Nunito',sans-serif;fill:var(--ink)}
.pim-bar--imp{fill:#fde3e8;stroke:var(--red);stroke-width:2.5}
.pim-bar--met{fill:#bfe6f8;stroke:var(--deep);stroke-width:2.5}
.pim-bar--grow{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;transition:transform .8s cubic-bezier(.3,0,.2,1)}
.pim-bar--grow.pim-bar--on{transform:scaleX(1)}
.pim-choices{grid-template-columns:1fr;max-width:420px}
#pim-ru-pad[hidden],#pim-ru-entry[hidden],#pim-ru-check[hidden],#pim-lb-pad[hidden],#pim-lb-entry[hidden],#pim-jg-pad[hidden],
#pim-jg-entry[hidden],#pim-jg-check[hidden],#pim-jg-choices[hidden],#pim-rd-pad[hidden],#pim-rd-entry[hidden],#pim-ws-pad[hidden],
#pim-ws-entry[hidden]{display:none}
#pim-bg-read,#pim-ru-read,#pim-lb-read,#pim-jg-read,#pim-rd-read,#pim-ws-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.pim-bar--grow{transition:none}}
@media (max-width:640px){
  .pim-pbtn{font-size:1.15rem}
  .pim-rlab{font-size:24px}
  .pim-rname{font-size:16px}
  .pim-roadv{font-size:30px}
  .pim-road .pim-rname{font-size:15px}
  #pim-bg-read,#pim-ru-read,#pim-lb-read,#pim-jg-read,#pim-rd-read,#pim-ws-read{min-height:6.6em}
}

/* ---------------- maths 11+: perimeter and area (topic_diagrams/eleven_plus_perimeter_and_area.py, drawn by
   topic_diagrams/_polygons.py (p2d- shapes, the same geometry as the papers' shape: and squares: lines); interactions
   in js/eleven_plus_perimeter_and_area.js (ppr-)). Reuses the colour key of 1.2 and 3.7 (ppa-t-- in SVG text), the
   keypad and levels of 2.1 (pca-), 3.1 (pfe-) and 5.1 (pns-pad--x), the knob and live line of 6.1 (pmc-) and the
   choices of 1.1 (plv-). Shapes: navy edges, light blue inside; red and blue for sides that go together. ---- */
.p2d-svg{display:block;width:100%;height:auto;margin:10px auto 0;overflow:hidden}
.ga-ex .p2d-svg{max-width:380px}
.ga-ex .p2d-svg--grid{max-width:330px}
.p2d-paper{fill:var(--white)}
.p2d-grid{stroke:#b9cdea;stroke-width:1}
.p2d-shade,.p2d-fill{fill:#d6e8fb}
.p2d-shade{stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round}
.p2d-hole{fill:var(--white);stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round}
.p2d-ghost{fill:#fff7f8;stroke:var(--red);stroke-width:2;stroke-dasharray:7 5}
.p2d-outline{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.p2d-edge{stroke:var(--navy);stroke-width:2.5;stroke-linecap:round}
.p2d-edge--red{stroke:var(--red);stroke-width:4}
.p2d-edge--blue{stroke:var(--deep);stroke-width:4}
.p2d-edge--on{stroke:var(--sky);stroke-width:6}
.p2d-edge--done{stroke:#1d7a3a;stroke-width:3.5}
.p2d-tick{stroke:var(--navy);stroke-width:2}
.p2d-right{fill:none;stroke:var(--navy);stroke-width:1.6}
.p2d-height{stroke:var(--navy);stroke-width:2;stroke-dasharray:6 5}
.p2d-cut{stroke:var(--red);stroke-width:2.5;stroke-dasharray:7 5}
.p2d-lab{font:800 17px/1 'Nunito',sans-serif;fill:var(--ink)}
.p2d-lab--q{fill:#b3122f}
.p2d-qb{fill:#fff7f8;stroke:var(--red);stroke-width:2;stroke-dasharray:5 3}
.p2d-tag{font:800 16px/1 'Nunito',sans-serif;fill:var(--navy)}
.p2d-tag--red{fill:#b3122f}
.p2d-name{font:600 14px/1 'Poppins',sans-serif;fill:var(--muted)}
.p2d-name--in{font:800 17px/1 'Nunito',sans-serif;fill:var(--navy)}
.p2d-note{font:italic 400 13px/1 'Poppins',sans-serif;fill:var(--muted)}
/* the interactives */
.ppr-pic{width:100%;margin-top:6px}
.ppr-pic .p2d-svg{max-width:600px}
.ppr-pic--wide .p2d-svg{max-width:620px}
.ppr-small.p2d-svg{max-width:460px}
.ppr-meters{font-size:1.05rem}
.ppr-hit{stroke:transparent;stroke-width:26;stroke-linecap:round;cursor:pointer;outline:none}
.ppr-hit:hover,.ppr-hit:focus-visible{stroke:rgba(232,41,74,.18)}
.ppr-ant{fill:var(--navy)}
.ppr-ant-legs{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round}
/* count the squares */
.ppr-count{touch-action:manipulation}
.ppr-cell{fill:transparent;cursor:pointer;outline:none}
.ppr-cell:hover{fill:rgba(41,171,226,.12)}
.ppr-cell:focus-visible{stroke:var(--deep);stroke-width:3;stroke-dasharray:5 4}
.ppr-mark rect{fill:#9fd3f0}
.ppr-mark--half rect{fill:#ffc9d3}
.ppr-fillsq{fill:#9fd3f0}
.ppr-num{font:800 17px/1 'Nunito',sans-serif;fill:var(--navy);pointer-events:none}
.ppr-num--half{fill:#b3122f;font-size:15px}
/* the rectangle builder and slide the top */
.ppr-builder,.ppr-slide{touch-action:none;user-select:none;-webkit-user-select:none}
.ppr-builder .p2d-lab,.ppr-slide .p2d-lab{font-size:20px}
.ppr-tile{fill:#9fd3f0}
.ppr-rect{fill:none}
.ppr-knob{cursor:move}
.ppr-sizes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:10px}
.ppr-size{display:inline-flex;align-items:center;gap:8px;font:600 .95rem/1 'Poppins',sans-serif;color:var(--ink)}
.ppr-out{fill:#fde3e8;stroke:var(--red);stroke-width:1.5;stroke-dasharray:5 4}
.ppr-box{fill:none;stroke:var(--red);stroke-width:2;stroke-dasharray:7 5}
.ppr-box--on{stroke:var(--deep)}
/* cut and slide */
.ppr-none{fill:none}
.ppr-piece{fill:#ffc9d3;stroke:var(--red);stroke-width:2;transition:transform .9s cubic-bezier(.3,0,.2,1)}
.ppr-piece--moved{transform:translate(var(--ppr-shift),0)}
.ppr-cut .p2d-edge{stroke-opacity:.3;stroke-dasharray:6 5}
.ppr-cp .p2d-fill,.ppr-cp .ppr-piece{fill-opacity:.72}                /* the squares show through */
/* split it or take it away */
.ppr-part--a{fill:#bfe6f8}
.ppr-part--b{fill:#fde3e8}
.ppr-part--c{fill:#e3e3f6}
.ppr-take{fill:#fff7f8;stroke:var(--red);stroke-width:2;stroke-dasharray:7 5}
.ppr-ways{grid-template-columns:repeat(3,minmax(0,1fr));max-width:480px}
#ppr-aw-pad[hidden],#ppr-aw-entry[hidden],#ppr-cs-pad[hidden],#ppr-cs-entry[hidden],#ppr-cs-check[hidden],#ppr-cp-pad[hidden],
#ppr-cp-entry[hidden],#ppr-md-pad[hidden],#ppr-md-entry[hidden],#ppr-sp-pad[hidden],#ppr-sp-entry[hidden],#ppr-sp-ways[hidden],
#ppr-ws-pad[hidden],#ppr-ws-entry[hidden]{display:none}
#ppr-aw-read,#ppr-cs-read,#ppr-rb-read,#ppr-st-read,#ppr-cp-read,#ppr-md-read,#ppr-sp-read,#ppr-ws-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.ppr-piece{transition:none}}
@media (max-width:640px){
  .ppr-ways{grid-template-columns:1fr}
  .ppr-builder .p2d-lab,.ppr-slide .p2d-lab{font-size:24px}
  #ppr-aw-read,#ppr-cs-read,#ppr-rb-read,#ppr-st-read,#ppr-cp-read,#ppr-md-read,#ppr-sp-read,#ppr-ws-read{min-height:6.6em}
}

/* ---------------- maths 11+: surface area and volume (topic_diagrams/eleven_plus_surface_area_and_volume.py, drawn by
   topic_diagrams/_solids.py (psv- solids, the same isometric geometry as the papers' cubes: and cuboid: lines);
   interactions in js/eleven_plus_surface_area_and_volume.js (psv-)). Reuses the colour key of 1.2 and 3.7 (ppa-t--),
   the labels of 6.3 (p2d-), the keypad and levels of 2.1 (pca-), 3.1 (pfe-) and 5.1 (pns-pad--x), the live line of
   6.1 (pmc-) and the choices of 1.1 (plv-). Three shades on every cube: the top lightest, the front middle, the side
   darkest; red for painted faces. ---- */
.psv-svg{display:block;width:100%;height:auto;margin:10px auto 0;overflow:visible}
.ga-ex .psv-svg{max-width:340px}
.psv-f{stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round}
.psv-f--t{fill:#eef6fe}
.psv-f--r{fill:#9fd3f0}
.psv-f--l{fill:#5aa9de}
.psv-grid{stroke:var(--navy);stroke-width:1;stroke-opacity:.45}
.psv-glass{fill:rgba(41,171,226,.05);stroke:var(--navy);stroke-width:1.8;stroke-linejoin:round}
.psv-glass--back{fill:rgba(41,171,226,.07);stroke:#9fb7e0;stroke-width:1.2}
.psv-water{stroke:#2979d4;stroke-width:1;stroke-linejoin:round}
.psv-water--t{fill:rgba(41,171,226,.42)}
.psv-water--r{fill:rgba(41,171,226,.55)}
.psv-water--l{fill:rgba(41,121,212,.6)}
.psv-p.psv-f--t{fill:#ffe1e7}
.psv-p.psv-f--r{fill:#ff9fb2}
.psv-p.psv-f--l{fill:#f06882}
.psv-tag{font:800 16px/1 'Nunito',sans-serif;fill:var(--navy)}
.psv-ftag{font:800 15px/1 'Nunito',sans-serif;fill:var(--navy);paint-order:stroke;stroke:rgba(255,255,255,.75);stroke-width:4px}
.psv-depth{stroke:var(--red);stroke-width:2.5;stroke-linecap:round}
/* the interactives */
.psv-pic{width:100%;margin-top:6px}
.psv-pic .psv-svg{max-width:560px}
.psv-pic--wide .psv-svg{max-width:600px}
.psv-small.psv-svg{max-width:440px}
.psv-layer{transition:transform .8s cubic-bezier(.3,0,.2,1)}
.psv-stackpic .psv-tag{opacity:0;transition:opacity .4s}
.psv-stackpic.psv-lifted .psv-tag{opacity:1}
.psv-tag--add{fill:#b3122f}
.psv-add .psv-f--t{fill:#ffe1e7}
.psv-add .psv-f--r{fill:#ffc9d3}
.psv-add .psv-f--l{fill:#ff9fb2}
.psv-add .psv-f{stroke:var(--red);stroke-dasharray:5 3}
.psv-cube{transition:opacity .4s}
.psv-picking .psv-cube{opacity:.07}
.psv-picking .psv-hi .psv-f{stroke-width:2.4}
.psv-picking .psv-cube.psv-hi{opacity:1}
.psv-kinds{grid-template-columns:repeat(4,minmax(0,1fr));max-width:620px}
.psv-kinds .plv-choice[aria-pressed="true"]{background:var(--navy);color:var(--white);border-color:var(--navy)}
.psv-builder{touch-action:none;user-select:none;-webkit-user-select:none}
.psv-builder .p2d-lab{font-size:20px}
.psv-knob{cursor:move}
.psv-stone{fill:#8a8fa3;stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round}
.psv-wline{stroke:#2979d4;stroke-width:1;stroke-opacity:.7}
.psv-hline{stroke:var(--navy);stroke-width:2;stroke-linecap:round}
.psv-tap{cursor:pointer;outline:none}
.psv-tap:hover{filter:brightness(1.06)}
.psv-tap:focus-visible{stroke:var(--deep);stroke-width:4}
.psv-wrap .psv-on{fill:#fff7f8;stroke:var(--red);stroke-width:3}
.psv-wrap .psv-done{fill:#ffc9d3}
.psv-ghost{fill:none;stroke:var(--red);stroke-width:2.2;stroke-dasharray:7 5;stroke-linejoin:round;pointer-events:none}
.psv-ghost--done{stroke:#b3122f;stroke-opacity:.55}
.psv-in--r{fill:#7dbfe6}
.psv-in--l{fill:#bfe0f5}
.psv-in--t{fill:#d6e8fb}
.psv-wrap .psv-twin{stroke:var(--red);stroke-width:2.4;stroke-dasharray:7 5}
.psv-wrap .psv-twin.psv-done{fill:#ffc9d3}
.psv-drop{animation:psv-drop .6s cubic-bezier(.3,0,.2,1) both}
@keyframes psv-drop{from{transform:translate(0,-60px);opacity:0}to{transform:none;opacity:1}}
#psv-lu-pad[hidden],#psv-lu-entry[hidden],#psv-ft-pad[hidden],#psv-ft-entry[hidden],#psv-wr-pad[hidden],#psv-wr-entry[hidden],
#psv-pp-pad[hidden],#psv-pp-entry[hidden],#psv-pp-kinds[hidden],#psv-pk-pad[hidden],#psv-pk-entry[hidden],#psv-ws-pad[hidden],
#psv-ws-entry[hidden]{display:none}
#psv-lu-read,#psv-cb-read,#psv-ft-read,#psv-wr-read,#psv-pp-read,#psv-pk-read,#psv-ws-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.psv-layer,.psv-cube,.psv-stackpic .psv-tag{transition:none}.psv-drop{animation:none}}
@media (max-width:640px){
  .psv-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .psv-builder .p2d-lab{font-size:24px}
  #psv-lu-read,#psv-cb-read,#psv-ft-read,#psv-wr-read,#psv-pp-read,#psv-pk-read,#psv-ws-read{min-height:6.6em}
}
.psv-floor{stroke:var(--navy);stroke-width:1;stroke-opacity:.35}
.psv-in-r{fill:#7dbfe6}
.psv-in-l{fill:#bfe0f5}
.psv-in-t{fill:#d6e8fb}

/* ---------------- maths 11+: time, calendars and timetables (topic_diagrams/eleven_plus_time_calendars_and_timetables.py,
   drawn by topic_diagrams/_time.py (the same geometry as the papers' clock:, timetable: and calendar: lines);
   interactions in js/eleven_plus_time_calendars_and_timetables.js (ptc-)). Reuses the colour key of 1.2, the keypad and
   levels of 2.1 (pca-) and 3.1 (pfe-), the step lists of 5.5 (psl-), the live line of 6.1 (pmc-), the pop of 4.1 (pdp-)
   and the choices of 1.1 (plv-). am is light blue, pm light red; the minute hand is navy, the hour hand red. ---- */
.ptc-units{max-width:420px}
.ptc-units td{padding:6px 12px}
.ptc-units td:nth-child(2){color:var(--muted);text-align:center;width:2em}
.ptc-units caption,.ptc-tt caption,.ptc-cal caption{caption-side:top;text-align:left;font:700 .9rem/1.3 'Poppins',sans-serif;color:var(--navy);padding:0 0 6px}
/* the clock */
.ptc-clock{display:block;width:100%;max-width:240px;height:auto;margin:10px auto 0}
.ptc-face{fill:var(--white);stroke:var(--navy);stroke-width:4}
.ptc-tick{stroke:var(--navy);stroke-width:1.4;stroke-linecap:round}
.ptc-tick--big{stroke-width:3.4}
.ptc-num{font:900 23px/1 'Nunito',sans-serif;fill:var(--navy)}
.ptc-hand{stroke-linecap:round}
.ptc-hand--h{stroke:var(--red);stroke-width:9}
.ptc-hand--m{stroke:var(--navy);stroke-width:5.5}
.ptc-hub{fill:var(--navy)}
.ptc-past{fill:#dceefb}
.ptc-to{fill:#fde3e8}
.ptc-hlab{font:800 18px/1 'Poppins',sans-serif;fill:var(--deep-text)}
.ptc-hlab--to{fill:#b3122f}
.ptc-scwrap{width:100%;margin-top:6px}
.ptc-clock--set{max-width:300px;touch-action:none;cursor:grab;outline:none}
.ptc-clock--set:focus-visible{outline:3px dashed var(--deep);outline-offset:4px;border-radius:50%}
.ptc-knob{stroke:var(--white);stroke-width:3}
.ptc-knob--h{fill:var(--red)}
.ptc-knob--m{fill:var(--navy)}
.ptc-clock--mini{max-width:110px;margin:6px auto 4px}
.ptc-clock--quiz{max-width:170px;margin:0 auto 8px}
.ptc-qpic{display:flex;justify-content:center}
/* the day ribbon */
.ptc-ribbon{display:block;width:100%;max-width:720px;height:auto;margin:10px auto 0}
.ga-ex .ptc-ribbon,.ga-ex .ptc-jumps,.ga-ex .ptc-knuck{max-width:720px}
.ptc-am{fill:#dceefb}
.ptc-pm{fill:#fde3e8}
.ptc-half{font:800 22px/1 'Poppins',sans-serif;fill:rgba(27,27,78,.38)}
.ptc-rib{fill:none;stroke:var(--navy);stroke-width:2.5}
.ptc-rt{stroke:var(--navy);stroke-width:1.3}
.ptc-rt--big{stroke-width:2.4}
.ptc-rl{font:800 16px/1 'Nunito',sans-serif;fill:var(--navy)}
.ptc-rl--24{fill:var(--deep-text)}
.ptc-rname{font:600 12px/1 'Poppins',sans-serif;fill:var(--muted)}
.ptc-markline{stroke:var(--red);stroke-width:4}
.ptc-markdot{fill:var(--red);stroke:var(--white);stroke-width:3}
.ptc-ribwrap{width:100%;margin-top:6px}
.ptc-ribwrap .ptc-ribbon{touch-action:none;cursor:ew-resize;outline:none}
.ptc-ribwrap .ptc-ribbon:focus-visible{outline:3px dashed var(--deep);outline-offset:4px;border-radius:8px}
/* the time number line */
.ptc-jumps{display:block;width:100%;max-width:700px;height:auto;margin:10px auto 0}
.ptc-jline{stroke:var(--navy);stroke-width:3}
.ptc-jtick{stroke:var(--navy);stroke-width:3}
.ptc-jt{font:800 19px/1 'Nunito',sans-serif;fill:var(--navy)}
.ptc-arc{fill:none;stroke:var(--red);stroke-width:3.5;stroke-linecap:round}
.ptc-arc--new{stroke-dasharray:600;stroke-dashoffset:600;animation:ptc-draw .6s ease-out forwards}
@keyframes ptc-draw{to{stroke-dashoffset:0}}
.ptc-jl{font:800 17px/1 'Nunito',sans-serif;fill:#b3122f}
.ptc-jwrap{width:100%;margin-top:6px}
/* timetables */
.ptc-tt{max-width:560px}
.ptc-tt th,.ptc-tt td{text-align:center;padding:7px 8px;white-space:nowrap}
.ptc-tt tbody th{text-align:left}
.ptc-btt{width:100%;min-width:0}
.ptc-btt .dg-tablewrap{max-width:100%;margin-left:auto;margin-right:auto}
.ptc-btt .ptc-tt{width:auto;margin:0 auto}
.ptc-cell{min-width:58px;padding:6px 6px;border:2px solid #cfe0f6;border-radius:10px;background:var(--white);font:800 1rem/1 'Nunito',sans-serif;color:var(--ink);cursor:pointer}
.ptc-cell:hover,.ptc-cell:focus-visible{border-color:var(--deep);background:var(--light);outline:none}
.ptc-cell--on{border-color:#1d7a3a;background:#e7f6ec}
.ptc-dash{color:var(--muted);font-weight:700}
.ptc-tt--quiz{font-size:.88rem;margin-bottom:10px}
.ptc-tt--quiz th,.ptc-tt--quiz td{padding:5px 6px}
/* the route */
.ptc-routewrap{width:100%;margin-top:8px}
.ptc-route{display:block;width:100%;max-width:700px;height:auto;margin:0 auto}
.ptc-road{stroke:#c9cbdc;stroke-width:10;stroke-linecap:round}
.ptc-road--train{stroke:#8f93ad;stroke-width:6;stroke-dasharray:3 9}
.ptc-stop{fill:var(--white);stroke:var(--navy);stroke-width:3.5}
.ptc-sname{font:700 17px/1 'Poppins',sans-serif;fill:var(--navy)}
.ptc-rtime{font:900 20px/1 'Nunito',sans-serif;fill:#b3122f;opacity:0;transition:opacity .3s}
.ptc-rtime--on{opacity:1}
.ptc-veh-body{fill:var(--red);stroke:#b3122f;stroke-width:2}
.ptc-veh-body--train{fill:var(--deep);stroke:var(--navy)}
.ptc-veh-win{fill:#dff3fc}
.ptc-veh-wheel{fill:var(--navy)}
/* world clocks */
.ptc-west{display:flex;justify-content:space-between;font:600 .85rem/1.2 'Poppins',sans-serif;color:var(--muted);margin:8px 0 0}
.ptc-zones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;margin-top:8px}
.ptc-zone{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border:2px solid #dbe6f8;border-radius:14px;background:var(--white);text-align:center}
.ptc-zone--home{border-color:var(--deep)}
.ptc-zone--night{background:#e9eaf3}
.ptc-zcity{font:900 1rem/1.15 'Nunito',sans-serif;color:var(--navy)}
.ptc-zdiff{font:600 .72rem/1.2 'Poppins',sans-serif;color:var(--muted);min-height:2.4em}
.ptc-zt{font:900 1.2rem/1 'Nunito',sans-serif;color:var(--navy)}
.ptc-zday{font:600 .75rem/1.4 'Poppins',sans-serif;color:var(--muted)}
.ptc-zhide{display:grid;place-items:center;width:100%;max-width:110px;aspect-ratio:1;margin:6px auto 4px;border:3px dashed var(--red);border-radius:50%;background:#fff7f8;color:#b3122f;font:900 2rem/1 'Nunito',sans-serif}
/* the knuckle trick */
.ptc-knuck{display:block;width:100%;max-width:700px;height:auto;margin:10px auto 0}
.ptc-fist{fill:#f3e6dc;stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round}
.ptc-kn{fill:var(--white);stroke:var(--navy);stroke-width:2}
.ptc-kn--big{fill:var(--red);stroke:#b3122f}
.ptc-km{font:700 15px/1 'Poppins',sans-serif;fill:var(--muted)}
.ptc-km--big{font-weight:800;fill:#b3122f}
.ptc-kname{font:600 13px/1 'Poppins',sans-serif;fill:var(--muted)}
/* calendars */
.ptc-cal{border-collapse:collapse;margin:0 auto;color:var(--ink)}
.ptc-cal th{padding:4px 2px;font:700 .8rem/1 'Poppins',sans-serif;color:var(--navy);background:var(--light);border:1px solid #dbe6f8}
.ptc-cal td{width:44px;height:38px;padding:0;text-align:center;border:1px solid #dbe6f8;font:800 1rem/1 'Nunito',sans-serif}
.ptc-cal caption{text-align:center}
.ptc-ring{display:inline-grid;place-items:center;width:30px;height:30px;border:2.5px solid var(--deep);border-radius:50%}
.ptc-calwrap{width:100%;margin-top:8px}
.ptc-day{display:grid;place-items:center;width:100%;height:100%;min-height:36px}
.ptc-day--b{background:#fde3e8}
.ptc-day--lit{background:#fff3c4}
.ptc-day--ring{box-shadow:inset 0 0 0 3px var(--deep);border-radius:6px}
.ptc-day--btn{border:0;background:#f6f9ff;box-shadow:inset 0 0 0 2px #cfe0f6;border-radius:6px;cursor:pointer;font:inherit}
.ptc-day--btn.ptc-day--b{background:#fde3e8}
.ptc-day--btn:hover,.ptc-day--btn:focus-visible{outline:3px dashed var(--deep);outline-offset:-3px}
.ptc-year{text-align:center;font:900 3rem/1 'Nunito',sans-serif;margin:14px 0 4px}
.ptc-choices{max-width:520px}
.ptc-choices--two{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the 24-hour keypad: four digit boxes */
.ptc-tentry{display:flex;justify-content:center;margin-top:6px;min-height:56px}
.ptc-tdisp{display:flex;align-items:center;gap:6px}
.ptc-tbox{display:grid;place-items:center;width:42px;height:52px;border:3px solid var(--sky);border-radius:10px;background:var(--white);font:900 1.6rem/1 'Nunito',sans-serif}
.ptc-tbox--on{border-color:var(--deep);box-shadow:0 0 0 3px rgba(41,121,212,.18)}
.ptc-tcolon{font:900 1.8rem/1 'Nunito',sans-serif;color:var(--navy)}
.ptc-key--colon{font-size:1.7rem}
#ptc-dr-pad[hidden],#ptc-dr-entry[hidden],#ptc-dr-check[hidden],#ptc-dr-choices[hidden],#ptc-sc-check[hidden],#ptc-sc-choices[hidden],
#ptc-tj-pad[hidden],#ptc-tj-entry[hidden],#ptc-bt-pad[hidden],#ptc-bt-entry[hidden],#ptc-wc-pad[hidden],#ptc-wc-entry[hidden],
#ptc-wc-choices[hidden],#ptc-cd-pad[hidden],#ptc-cd-entry[hidden],#ptc-ws-pad[hidden],#ptc-ws-entry[hidden]{display:none}
#ptc-sc-read,#ptc-dr-read,#ptc-tj-read,#ptc-bt-read,#ptc-wc-read,#ptc-cd-read,#ptc-ly-read,#ptc-ws-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.ptc-arc--new{animation:none;stroke-dashoffset:0}.ptc-rtime{transition:none}}
@media (max-width:640px){
  .ptc-zones{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ptc-rl{font-size:24px}
  .ptc-rname{font-size:18px}
  .ptc-half{font-size:26px}
  .ptc-jt{font-size:26px}
  .ptc-jl{font-size:24px}
  .ptc-sname{font-size:22px}
  .ptc-rtime{font-size:26px}
  .ptc-km{font-size:28px}
  .ptc-kname{font-size:18px}
  .ptc-cal td{width:40px;height:36px}
  .ptc-cell{min-width:0;padding:5px 3px;font-size:.88rem}
  .ptc-btt .ptc-tt th,.ptc-btt .ptc-tt td{padding:4px 2px}
  .ptc-btt .ptc-tt tbody th{white-space:normal;font-size:.8rem;line-height:1.15}
  .ptc-tt th,.ptc-tt td{padding:5px 4px}
  .ptc-choices--two{grid-template-columns:repeat(2,minmax(0,1fr))}
  #ptc-sc-read,#ptc-dr-read,#ptc-tj-read,#ptc-bt-read,#ptc-wc-read,#ptc-cd-read,#ptc-ly-read,#ptc-ws-read{min-height:6.6em}
}
.ga-ex .ptc-clock--mini{max-width:110px;margin:6px auto 4px}
.ga-ex .ptc-clock{max-width:240px}

/* ---------------- maths 11+: angle properties (topic_diagrams/eleven_plus_angle_properties.py, drawn by
   topic_diagrams/_angles.py (the same geometry as the papers' angles: line); interactions in
   js/eleven_plus_angle_properties.js (pag-)). Reuses the colour key of 1.2, the keypad and levels of 2.1 (pca-) and
   3.1 (pfe-), the step lists of 5.5 (psl-), the ? box of 5.4 (ple-), the live line of 6.1 (pmc-), the clock of 6.5
   (ptc-) and the choices of 1.1 (plv-). Arms navy; a known angle light blue, an unknown one light red; each kind of
   angle has its own tint: acute sky, right and straight yellow, obtuse lilac, reflex pink. ---- */
.pag-svg{display:block;width:100%;height:auto;margin:10px auto 0;overflow:visible}
.ga-ex .pag-svg{max-width:300px}
.ga-ex .pag-svg--wide{max-width:520px}
.pag-arm{stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.pag-dot{fill:var(--navy)}
.pag-sec{stroke:none}
.pag-sec--n,.pag-sec--plain,.pag-sec--r{fill:#d6e8fb}
.pag-sec--q,.pag-sec--v{fill:#fde3e8}
.pag-arc{fill:none;stroke:var(--deep);stroke-width:2.4}
.pag-arc--q,.pag-arc--v{stroke:var(--red)}
.pag-right{fill:none;stroke:var(--navy);stroke-width:2}
.pag-lab{font:900 17px/1 'Nunito',sans-serif;fill:var(--navy)}
.pag-lab--q{fill:#b3122f}
.pag-lab--v{fill:#b3122f;font-style:italic;font-family:'Poppins',sans-serif;font-weight:600}
.pag-qb{fill:#fff7f8;stroke:var(--red);stroke-width:2;stroke-dasharray:5 3}
.pag-name{font:600 14px/1 'Poppins',sans-serif;fill:var(--muted)}
.pag-note{font:italic 400 13px/1 'Poppins',sans-serif;fill:var(--muted)}
.pag-v{color:#b3122f;font-style:italic;font-weight:600}
/* the kinds of angle */
.pag-sec--acute{fill:#cdeefb}.pag-arc--acute{stroke:var(--deep)}
.pag-sec--right,.pag-sec--straight,.pag-sec--full{fill:#fff3c4}.pag-arc--straight,.pag-arc--full{stroke:#9a7300}
.pag-sec--obtuse{fill:#e3e3f6}.pag-arc--obtuse{stroke:var(--navy)}
.pag-sec--reflex{fill:#fde3e8}.pag-arc--reflex{stroke:var(--red)}
/* the pairs and parts in the play drawings: a red, b blue, then yellow, lilac, sky */
.pag-sec--pa{fill:#fde3e8}.pag-arc--pa{stroke:var(--red)}
.pag-sec--pb{fill:#d6e8fb}.pag-arc--pb{stroke:var(--deep)}
.pag-sec--pc{fill:#fff3c4}.pag-arc--pc{stroke:#9a7300}
.pag-sec--pd{fill:#e3e3f6}.pag-arc--pd{stroke:var(--navy)}
.pag-sec--pe{fill:#cdeefb}.pag-arc--pe{stroke:var(--sky)}
.pag-ca,.pag-cb,.pag-cc,.pag-cd,.pag-ce{display:inline-block;padding:1px 8px;border-radius:8px;border:2px solid}
.pag-ca{background:#fde3e8;border-color:var(--red)}
.pag-cb{background:#d6e8fb;border-color:var(--deep)}
.pag-cc{background:#fff3c4;border-color:#9a7300}
.pag-cd{background:#e3e3f6;border-color:var(--navy)}
.pag-ce{background:#cdeefb;border-color:var(--sky)}
/* cards: turns and the kinds of angle */
.pag-cards{display:grid;gap:10px;width:100%;margin-top:10px}
.pag-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pag-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pag-card{display:flex;flex-direction:column;align-items:center;padding:10px 8px 12px;border:2px solid #dbe6f8;border-radius:16px;background:var(--white);text-align:center}
.pag-card .pag-svg{max-width:180px;height:116px;margin:0 auto 6px}
.pag-cname{margin:0;font:900 1.05rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.pag-ctext{margin:2px 0 0;font:400 .88rem/1.35 'Poppins',sans-serif;color:var(--ink)}
.pag-card--acute{border-color:#8fd2f0}.pag-card--right,.pag-card--straight,.pag-card--full{border-color:#e6c75a}
.pag-card--obtuse{border-color:#b9b9e6}.pag-card--reflex{border-color:#f3a3b3}
.pag-facts{margin:8px 0 0;padding-left:1.3em}
.pag-clock{max-width:200px}
/* the angle maker */
.pag-amwrap,.pag-slwrap,.pag-apwrap,.pag-vowrap{width:100%;margin-top:6px}
.pag-svg--maker{max-width:340px;touch-action:none;cursor:grab;outline:none}
.pag-svg--play{max-width:420px;touch-action:none;cursor:grab;outline:none}
.pag-svg--round{max-width:340px}
.pag-svg--maker:focus-visible,.pag-svg--play:focus-visible{outline:3px dashed var(--deep);outline-offset:4px;border-radius:12px}
.pag-knob{fill:var(--red);stroke:var(--white);stroke-width:3}
.pag-knob--on{stroke:var(--navy);stroke-width:3.5}
.pag-readout{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin-top:10px;text-align:center}
.pag-big{font:900 2.4rem/1 'Nunito',sans-serif;color:var(--navy)}
.pag-badge{display:inline-block;padding:6px 14px;border-radius:999px;border:2px solid #dbe6f8;background:var(--white);font:800 1.05rem/1.2 'Nunito',sans-serif;color:var(--navy)}
.pag-badge--acute{background:#cdeefb;border-color:#8fd2f0}
.pag-badge--right,.pag-badge--straight,.pag-badge--full{background:#fff3c4;border-color:#e6c75a}
.pag-badge--obtuse{background:#e3e3f6;border-color:#b9b9e6}
.pag-badge--reflex{background:#fde3e8;border-color:#f3a3b3}
.pag-why{flex-basis:100%;font:400 .95rem/1.45 'Poppins',sans-serif;color:var(--ink);min-height:2.9em}
.pag-bandwrap{width:100%;margin-top:6px}
.pag-band{display:block;width:100%;max-width:720px;height:auto;margin:0 auto;touch-action:none;cursor:pointer}
.pag-bnd--acute{fill:#cdeefb}.pag-bnd--obtuse{fill:#e3e3f6}.pag-bnd--reflex{fill:#fde3e8}
.pag-bframe{fill:none;stroke:var(--navy);stroke-width:2}
.pag-bname{font:800 17px/1 'Nunito',sans-serif;fill:var(--navy)}
.pag-bkey{stroke:#9a7300;stroke-width:4}
.pag-bkeyname{font:700 13px/1 'Poppins',sans-serif;fill:#7a5c00}
.pag-btick{font:800 15px/1 'Nunito',sans-serif;fill:var(--navy)}
.pag-bmark path{fill:var(--red)}
.pag-bmark line{stroke:var(--red);stroke-width:4}
.pag-nudge{justify-content:center;margin-top:10px}
.pag-nudge .dg-btn{min-width:64px;font-weight:700}
.pag-sum{text-align:center;font-size:1.05rem;line-height:2}
/* questions */
.pag-qwrap,.pag-ntwrap{width:100%;margin-top:6px}
.pag-svg--q{max-width:330px}
.pag-svg--name{max-width:260px}
.pag-svg--quiz{max-width:260px;margin:0 auto 8px}
.pag-qpic{display:flex;justify-content:center}
.pag-clock--q{display:block;max-width:220px;margin:10px auto 0}
.pag-clock--quiz{max-width:170px;margin:0 auto 8px}
.pag-choices{max-width:560px}
.pag-choices--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pag-choices--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pag-choices--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pag-choices .plv-choice{padding:12px 6px}
.pag-reasons{grid-template-columns:1fr;max-width:460px}
.pag-reason{color:var(--muted);font-size:.88em}
.pag-pop{animation:pag-pop .5s ease-out}
@keyframes pag-pop{from{opacity:0}to{opacity:1}}
#pag-sl-pad[hidden],#pag-sl-entry[hidden],#pag-ap-pad[hidden],#pag-ap-entry[hidden],#pag-vo-pad[hidden],#pag-vo-entry[hidden],
#pag-ws-pad[hidden],#pag-ws-entry[hidden],#pag-ws-reasons[hidden],#pag-am-check[hidden]{display:none}
#pag-am-read,#pag-nt-read,#pag-sl-read,#pag-ap-read,#pag-vo-read,#pag-ws-read{min-height:4.6em}
@media (prefers-reduced-motion:reduce){.pag-pop{animation:none}}
@media (max-width:640px){
  .pag-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pag-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pag-choices--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pag-choices--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pag-bname{font-size:24px}
  .pag-bkeyname{font-size:17px}
  .pag-btick{font-size:21px}
  .pag-big{font-size:2rem}
  #pag-am-read,#pag-nt-read,#pag-sl-read,#pag-ap-read,#pag-vo-read,#pag-ws-read{min-height:6.6em}
}
.pag-track{fill:none;stroke:#cfe0f6;stroke-width:2;stroke-dasharray:4 6}