:root{
  --ink:#16224A; --paper:#F4F7FC; --surface:#FFFFFF; --line:#D5DCEB; --slate:#56627F;
  --hl:#FFD24A; --miss:#B3322D; --miss-bg:#FDECEA; --ok:#1B7F57; --ok-bg:#E4F5EC; --focus:#2F5BFF;
  --font:"Avenir Next","Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.55 var(--font);-webkit-text-size-adjust:100%}
a{color:var(--ink);text-underline-offset:.18em}
a:hover{background:var(--hl)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--surface);padding:.5rem 1rem;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.top{display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,4vw,2.5rem);border-bottom:2px solid var(--ink);background:var(--surface)}
.brand{font-weight:800;font-size:1.25rem;text-decoration:none;letter-spacing:-.01em}
.hl{background:linear-gradient(transparent 52%,var(--hl) 52% 90%,transparent 90%);padding:0 .15em}
.top nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center}
.top nav a{text-decoration:none;padding:.25rem 0;border-bottom:3px solid transparent}
.top nav a[aria-current=page]{border-bottom-color:var(--hl);font-weight:700}
.top nav a:hover{background:none;border-bottom-color:var(--line)}
form.inline{display:inline;margin:0}
button.link{background:none;border:0;padding:0;font:inherit;color:var(--slate);text-decoration:underline;cursor:pointer;text-underline-offset:.18em}
button.link:hover{color:var(--ink);background:var(--hl)}

main{max-width:56rem;margin:0 auto;padding:2rem clamp(1rem,4vw,2.5rem) 4rem}
h1{font-size:clamp(1.9rem,5vw,2.75rem);line-height:1.1;letter-spacing:-.02em;margin:.25em 0 .4em;font-weight:800}
h2{font-size:1.25rem;margin:2.5rem 0 .6rem;font-weight:800}
section+section{margin-top:2.5rem}
.lede{font-size:1.25rem;margin:0 0 1.25rem}
.muted,.sub,.hint{color:var(--slate)}
.sub{display:block;font-size:.875rem;font-weight:400}
.hint{font-size:.875rem;font-weight:400;margin-left:.4rem}
.crumb{margin:0;font-size:.9rem}
code{background:#E8EDF8;padding:.05em .35em;border-radius:3px;font-size:.92em}

.notice{margin:0 0 1.5rem;padding:.75rem 1rem;border-left:5px solid var(--ink);background:var(--surface)}
.notice.ok{border-color:var(--ok);background:var(--ok-bg)}
.notice.error{border-color:var(--miss);background:var(--miss-bg)}

.narrow{max-width:26rem;margin:2rem auto}
.stack{display:grid;gap:1rem;max-width:34rem}
.row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:end;margin:.75rem 0}
.forms .row{margin:1rem 0}
label{display:grid;gap:.3rem;font-weight:700}
input,select,textarea{font:inherit;padding:.6rem .75rem;border:2px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink);font-weight:400;min-height:2.75rem}
input[type=checkbox]{min-height:0;width:1.2rem;height:1.2rem;margin-right:.5rem}
label:has(input[type=checkbox]){display:flex;align-items:center}
button{font:inherit;font-weight:700;padding:.6rem 1.1rem;border:2px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer;min-height:2.75rem}
button:hover{background:var(--hl)}
button.primary{background:var(--ink);color:#fff}
button.primary:hover{background:#243480}
button.big{font-size:1.25rem;padding:.8rem 1.75rem}
button.danger{border-color:var(--miss);color:var(--miss)}
button.danger:hover{background:var(--miss-bg)}

/* child home */
.start-form{display:flex;flex-wrap:wrap;gap:1rem;align-items:end}
.facts{display:flex;flex-wrap:wrap;gap:.5rem 3rem;margin-top:2rem}
.facts p{margin:0}.facts strong{font-size:1.75rem;font-weight:800;margin-right:.3rem}
.ladder{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.step{display:grid;grid-template-columns:minmax(7.5rem,10rem) 1fr 3rem;gap:.75rem;align-items:center}
.step .bar{height:1.1rem;background:#E3E9F5;border-radius:3px;overflow:hidden}
.step .bar i{display:block;height:100%;background:var(--ink);min-width:2px}
.step.s1 .bar i{background:#8A97C2}.step.s2 .bar i{background:#6575AB}.step.s3 .bar i{background:#42548F}.step.s4 .bar i{background:#2A3C78}
.step.s5 .bar i{background:var(--ok)}
.step.met .bar i{background:var(--hl)}
.step.unseen .bar i{background:repeating-linear-gradient(45deg,#B9C3DD 0 4px,#E3E9F5 4px 8px)}
.step .n{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
dl.words{display:grid;grid-template-columns:minmax(8rem,12rem) 1fr;gap:.5rem 1.25rem;margin:0}
dl.words dt{font-weight:800}dl.words dd{margin:0}
.pos{font-weight:400;font-style:italic;color:var(--slate);font-size:.9em}

/* quiz */
.quiz{max-width:42rem;margin:0 auto}
.meter{height:.6rem;background:#E3E9F5;border-radius:3px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--ink);transition:width .25s}
.counter{margin:.6rem 0 1.5rem;color:var(--slate);font-size:.95rem}
.q-main{font-size:clamp(2.4rem,9vw,4rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;margin:0 0 .3rem;overflow-wrap:anywhere}
.q-main.text{font-size:clamp(1.4rem,4.5vw,1.9rem);line-height:1.35;letter-spacing:0;font-weight:700}
.q-sub{margin:.25rem 0 1.5rem;color:var(--slate)}
.retry{display:inline-block;margin:0 0 .75rem;padding:.1rem .6rem;border:2px solid var(--ink);border-radius:99px;font-size:.9rem;font-weight:700}
.opts{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
.opt{display:grid;grid-template-columns:2rem 1fr;gap:.75rem;align-items:start;width:100%;text-align:left;padding:.9rem 1rem;font-weight:600;border-radius:8px}
.opt .key{font-weight:800;color:var(--slate)}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.wrong{border-color:var(--miss);background:var(--miss-bg)}
.opt:disabled{cursor:default;opacity:1}
.opt:disabled:not(.right):not(.wrong){opacity:.55}
.opt:disabled:hover{background:var(--surface)}.opt.right:disabled:hover{background:var(--ok-bg)}.opt.wrong:disabled:hover{background:var(--miss-bg)}
.feedback{margin-top:1.5rem;padding:1rem 1.25rem;border-left:6px solid var(--ink);background:var(--surface)}
.feedback.right{border-color:var(--ok)}.feedback.wrong{border-color:var(--miss)}
.feedback h2{margin:0 0 .4rem;font-size:1.35rem}
.feedback p{margin:.25rem 0}
.feedback .ex{font-style:italic;color:var(--slate)}
.feedback button{margin-top:1rem}
.summary dl.words{margin-top:1rem}

/* parent */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--line);vertical-align:top}
thead th{border-bottom:2px solid var(--ink);font-size:.9rem;color:var(--slate);white-space:nowrap}
.board th[scope=row]{font-weight:800}
tr.off{opacity:.55}
.meterbar{display:inline-block;width:5rem;height:.7rem;background:#E3E9F5;border-radius:3px;overflow:hidden;margin-right:.6rem;vertical-align:middle}
.meterbar i{display:block;height:100%;background:var(--ok)}
.days{display:grid;grid-template-columns:repeat(14,1fr);gap:.4rem;align-items:end;max-width:36rem}
.day{display:grid;justify-items:center;gap:.15rem}
.day .col{display:flex;align-items:flex-end;height:6rem;width:100%;background:#E3E9F5;border-radius:3px;overflow:hidden}
.day .col i{display:block;width:100%;background:var(--ink)}
.day .lab{font-size:.75rem;color:var(--slate)}.day .num{font-size:.75rem;min-height:1em;font-weight:700}
.filelist{list-style:none;padding:0;margin:1.5rem 0}
.filelist li{padding:.6rem 0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline}
.small{font-size:.9rem}
pre.md{white-space:pre-wrap;background:var(--surface);border:2px solid var(--ink);padding:1rem;border-radius:6px;overflow-x:auto;font:.95rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}

.vectors td{font-variant-numeric:tabular-nums;font-weight:700}
h3{font-size:1.05rem;margin:1.5rem 0 .4rem;font-weight:800}
.patterns{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.patterns strong{font-size:1.25rem;margin-right:.3rem}
.opt-unsure{margin-top:.75rem;font-weight:600;color:var(--slate);border-style:dashed}
.opt-unsure .key{font-weight:800;margin-right:.5rem}
.opt-unsure:disabled{opacity:.55;cursor:default}.opt-unsure:disabled:hover{background:var(--surface)}
.feedback .root,.feedback .note{margin-top:.5rem}

/* shared bits */
a.button{display:inline-flex;align-items:center;justify-content:center;font-weight:700;padding:.6rem 1.1rem;border:2px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink);text-decoration:none;min-height:2.75rem}
a.button:hover{background:var(--hl)}
a.button.primary{background:var(--ink);color:#fff}a.button.primary:hover{background:#243480}
button:disabled{opacity:.5;cursor:default}button:disabled:hover{background:var(--surface)}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:.05rem .5rem;border:1px solid var(--line);border-radius:99px;color:var(--slate);vertical-align:middle;white-space:nowrap}
.tag.bonus{border-color:var(--hl);background:#FFF8E0;color:var(--ink)}
.feedback .bonus-note{margin-top:.5rem;font-weight:700}
.tip{border-left:4px solid var(--hl);background:var(--surface);padding:.6rem .9rem;margin:1rem 0}
ul.changes{margin:.25rem 0 0;padding-left:1.2rem}
.events{list-style:none;padding:0;margin:.5rem 0}
.events li{padding:.45rem 0;border-bottom:1px solid var(--line)}
.events .when{display:block;font-size:.8rem;color:var(--slate)}

/* today's plan */
ol.plan{list-style:none;padding:0;margin:.5rem 0 1rem;display:grid;gap:.6rem}
ol.plan li{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.75rem;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:.7rem .8rem}
ol.plan li.done{border-color:var(--ok);background:var(--ok-bg)}
ol.plan .tick{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid var(--ink);font-weight:800}
ol.plan li.done .tick{background:var(--ok);border-color:var(--ok);color:#fff}
ol.plan .what{font-weight:700}
ol.plan form{margin:0}

/* flash cards */
.decks{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.75rem}
.decks li{display:flex;gap:1rem;align-items:center;justify-content:space-between;background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:.8rem 1rem}
.decks h2{margin:0;font-size:1.1rem}.decks p{margin:.2rem 0 0;font-size:.9rem}
.decks form{margin:0;flex:none}
.deck-go{display:flex;gap:.5rem;align-items:center}
.deck-go select{min-height:2.75rem}
.deck-n{font-size:.85rem;font-weight:700;margin:.25rem 0 0}
.cards{max-width:36rem;margin:0 auto}
.flashcard{display:block;width:100%;min-height:min(60vh,26rem);padding:1.5rem;border:2px solid var(--ink);border-radius:14px;background:var(--surface);text-align:center;cursor:pointer;font-weight:400}
.flashcard:hover{background:var(--surface)}
.flashcard .front{display:grid;gap:.6rem;place-items:center;min-height:calc(min(60vh,26rem) - 3rem);align-content:center}
.card-word{font-size:clamp(2.2rem,10vw,3.4rem);font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere;line-height:1.05}
.card-word.small{font-size:1.4rem}
.card-pos{font-style:italic;color:var(--slate)}
.step-tag{font-size:.8rem;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.06em}
.flashcard .hint{font-size:.85rem;color:var(--slate);margin-top:1rem}
.flashcard .back{text-align:left;display:grid;gap:.45rem}
.card-def{font-size:1.25rem;font-weight:700;margin:.2rem 0 .4rem}
.card-line{margin:0;font-size:.98rem}
.card-line.ex{font-style:italic;color:var(--slate)}
.rate{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
.rate button{min-height:3.5rem;font-size:1.05rem}
.rate .key{font-weight:800;opacity:.7;margin-right:.5rem}

/* lessons */
.lesson-list{list-style:none;padding:0;margin:.5rem 0 1rem;display:grid;gap:.6rem}
.lesson-list a{display:grid;gap:.2rem;padding:.8rem 1rem;background:var(--surface);border:2px solid var(--line);border-radius:10px;text-decoration:none}
.lesson-list a:hover{border-color:var(--ink);background:var(--surface)}
.lesson-list .passed a{border-color:var(--ok)}
.lesson-list.picked a{border-color:var(--hl);border-width:3px}
.badge{font-size:.8rem;font-weight:700;color:var(--slate)}
.lesson .learn,.lesson section{max-width:42rem}
.lesson h3{font-size:1.05rem;margin:1.2rem 0 .3rem}
.word-cards{list-style:none;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.word-cards li{background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:.6rem .8rem;display:grid;gap:.2rem}
.word-cards .w{font-weight:800;font-size:1.1rem}
.word-cards .tag{justify-self:start}
.word-cards li.st-needs-focus .tag{border-color:var(--miss);color:var(--miss)}
.more-words summary{cursor:pointer;font-weight:700;margin:.5rem 0;min-height:2.75rem;display:flex;align-items:center}
.word-cards .parts{font-size:.9rem;color:var(--ink)}
.word-cards .def{font-size:.9rem;color:var(--slate)}
.word-cards .st-needs-focus{border-color:var(--miss)}.word-cards .st-mastered{border-color:var(--ok)}
.practice fieldset{border:2px solid var(--line);border-radius:10px;margin:0 0 1rem;padding:.8rem 1rem;background:var(--surface)}
.practice legend{font-weight:700;padding:0;line-height:1.4;float:left;width:100%;margin-bottom:.4rem}
.practice legend + *{clear:both}
.practice .qn{color:var(--slate)}
label.choice{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;padding:.55rem .4rem;border-radius:6px;cursor:pointer;min-height:2.75rem}
label.choice:hover{background:var(--paper)}
label.choice input{width:1.3rem;height:1.3rem;min-height:0;margin-top:.15rem;flex:none}
.results{padding-left:1.3rem}
.results li{margin:0 0 1rem;padding:.6rem .8rem;border-left:5px solid var(--line);background:var(--surface)}
.results li.right{border-color:var(--ok)}.results li.wrong{border-color:var(--miss)}
.results .q{font-weight:700;margin:.1rem 0 .3rem}
.results p{margin:.2rem 0}
.verdict{font-weight:800}

/* parent lessons */
.lessons-grid tr.group th{background:var(--paper);font-size:.85rem;color:var(--slate);text-transform:uppercase;letter-spacing:.05em}
.lessons-grid td,.lessons-grid th{vertical-align:top}
.nowrap{white-space:nowrap}
.answer-list{margin:.3rem 0;padding-left:1.2rem}
.answer-list li.correct{font-weight:700}
.lesson-table{margin:.5rem 0 1rem}
.lesson-table td,.lesson-table th{font-size:.92rem;padding:.45rem .7rem .45rem 0}

/* my words */
.mywords{list-style:none;padding:0;margin:.5rem 0;display:grid;gap:.4rem}
.mywords details{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.55rem .8rem}
.mywords summary{cursor:pointer;min-height:2rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.mywords .w{font-weight:800}
.mywords p{margin:.35rem 0}.mywords .ex{font-style:italic;color:var(--slate)}

/* achievements */
.badges{list-style:none;padding:0;margin:.5rem 0 1rem;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}
.badge-card{display:grid;gap:.2rem;justify-items:center;text-align:center;padding:.8rem .6rem;border:2px solid var(--line);border-radius:12px;background:var(--surface)}
.badge-card .icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;font-size:1.5rem;background:#E3E9F5;color:var(--slate)}
.badge-card.got{border-color:var(--hl)}
.badge-card.got .icon{background:var(--hl);color:var(--ink)}
.badge-card.locked .b-title{color:var(--slate)}
.b-title{font-weight:800;line-height:1.2}
.b-desc{font-size:.82rem;color:var(--slate);line-height:1.3}
.b-when{font-size:.75rem;color:var(--slate)}
.b-bar{display:block;width:80%;height:.45rem;background:#E3E9F5;border-radius:3px;overflow:hidden;margin-top:.2rem}
.b-bar i{display:block;height:100%;background:var(--ink)}
.celebrate{border:3px solid var(--hl);border-radius:14px;background:#FFF8E0;padding:.8rem 1rem;margin:0 0 1.5rem}
.celebrate h2{margin:0 0 .4rem}
.celebrate .badges{margin:0}
@media (prefers-reduced-motion:no-preference){.celebrate{animation:pop .4s ease-out}@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}}

/* family dashboard */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem;margin:0 0 1.5rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;display:grid;gap:.15rem}
.k-label{font-size:.85rem;font-weight:700;color:var(--slate)}
.k-value{font-size:2rem;font-weight:800;line-height:1.1}
.k-sub{font-size:.8rem;color:var(--slate)}
.k-sub .up{color:#006300;font-weight:700}.k-sub .down{color:var(--ink);font-weight:700}
.dash{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem 1.1rem;margin:0 0 1.25rem}
.dash h2{margin:0 0 .2rem}
.dash > .muted{margin:0 0 .75rem;font-size:.9rem}
.legend{list-style:none;padding:0;margin:0 0 .9rem;display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.82rem;color:var(--slate)}
.legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.stand{display:grid;gap:.9rem}
.stand-row{display:grid;grid-template-columns:5.5rem 1fr;gap:.25rem .75rem;align-items:center}
.stand-name{font-weight:800;text-decoration:none}
.stepbar{display:flex;height:22px;background:#ecebe6;border-radius:4px;overflow:hidden}
.seg{height:100%;border-right:2px solid var(--surface);cursor:default;outline-offset:-2px}
.seg:last-child{border-right:0}
.seg.hover{filter:brightness(1.12)}
.stand-val{grid-column:2;font-size:.9rem;font-weight:700}
.multiples{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem}
.mult h3{margin:0 0 .5rem;font-size:1rem}
.mult h3 .muted{font-weight:400;font-size:.82rem}
.mult h3 a{text-decoration:none}
.cols{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;align-items:end}
.col{display:grid;justify-items:center;gap:3px;cursor:default;border-radius:3px}
.col .bar{display:flex;align-items:flex-end;height:5rem;width:100%;max-width:18px;border-bottom:1px solid #c3c2b7}
.col .bar i{display:block;width:100%;background:#2a78d6;border-radius:4px 4px 0 0;min-height:0}
.col.hover .bar i{background:#3987e5}
.col .dot{width:6px;height:6px;border-radius:50%;background:transparent}
.col .dot.on{background:var(--ink)}
.col .lab{font-size:.68rem;color:var(--slate)}
.mult-foot{margin:.45rem 0 0;font-size:.82rem;color:var(--slate)}
.acc-now{margin:0 0 .3rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.spark{display:block;width:100%;height:auto;max-width:28rem}
.spark .axis{stroke:#c3c2b7;stroke-width:1}
.spark .grid{stroke:#e1e0d9;stroke-width:1}
.spark .line{fill:none;stroke:#2a78d6;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .pt{fill:#2a78d6;stroke:var(--surface);stroke-width:2}
.tip-box{position:absolute;z-index:20;background:var(--ink);color:#fff;font-size:.82rem;font-weight:700;padding:.35rem .6rem;border-radius:6px;pointer-events:none;max-width:16rem}
@media (max-width:34rem){.stand-row{grid-template-columns:1fr}.stand-val{grid-column:1}.k-value{font-size:1.6rem}.dash{padding:.85rem}}

/* study guide */
.guide h2{margin-top:2rem}
dl.cards{display:grid;grid-template-columns:minmax(8rem,11rem) 1fr;gap:.75rem 1.25rem;margin:0}
dl.cards dt{font-weight:800}dl.cards dd{margin:0}
dl.cards p{margin:.2rem 0 0;font-size:.95rem}
dl.cards .ex{font-style:italic;color:var(--slate)}
ol.test{padding-left:1.5rem}
ol.test>li{margin:0 0 1.25rem;break-inside:avoid}
.tq{margin:0;font-weight:700}
.tq-word{font-size:1.25rem;font-weight:800}
ol.choices{margin:.35rem 0 0;padding-left:1.75rem;display:grid;gap:.15rem}
ol.key li{margin:.15rem 0}

@media print{
  .top,.noprint,.skip,.notice{display:none!important}
  body{background:#fff;font-size:11pt}
  main{max-width:none;padding:0}
  .pagebreak{break-before:page}
  a{text-decoration:none}
}

@media (max-width:34rem){
  .step{grid-template-columns:6.5rem 1fr minmax(2.5rem,auto)}
  .top{padding:.75rem 1rem}
  .top nav{gap:.25rem 1rem;font-size:.95rem}
  .top .who{display:none}
  main{padding:1.25rem 1rem 3rem}
  ol.plan li{grid-template-columns:2rem 1fr;}
  ol.plan li form,ol.plan li a.button{grid-column:1 / -1}
  ol.plan li button,ol.plan li a.button{width:100%}
  .decks li{flex-direction:column;align-items:stretch}
  .deck-go{width:100%}.deck-go select{flex:1}.deck-go button{flex:1}
  .start-form{display:grid;grid-template-columns:1fr 1fr}
  .start-form button{grid-column:1 / -1;width:100%}
  .row a.button{flex:1 1 auto}
  dl.words,dl.cards{grid-template-columns:1fr}dl.words dd,dl.cards dd{margin-bottom:.5rem}
  .days{gap:.2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* lesson slides */
.deck .deck-head h1{margin-bottom:.3rem}
.deck .best{margin:.2rem 0}
.deck .resume{margin:.4rem 0;font-size:.95rem}
.js-deck .resume{display:block}
.tracker{margin:.9rem 0 1.2rem;max-width:42rem}
.tracker ol{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.tracker li{flex:1 1 0;min-width:0}
.tracker .seg{display:block;width:100%;min-height:1.6rem;padding:0;border:0;background:none;cursor:pointer;position:relative;border-radius:4px}
.tracker .seg::before{content:"";position:absolute;left:0;right:0;top:50%;height:.6rem;transform:translateY(-50%);border-radius:99px;background:#E3E9F5}
.tracker .seg.done::before{background:var(--ink)}
.tracker .seg.now::before{background:var(--hl);box-shadow:0 0 0 2px var(--ink)}
.tracker .seg:hover::before{background:#B9C3DD}.tracker .seg.done:hover::before{background:#243480}
.tracker .where{margin:.35rem 0 0;font-weight:700;font-size:.95rem}
.js-deck .slide{min-height:16rem}
.slide{max-width:42rem}
.slide + .slide{margin-top:2.5rem}
.js-deck .slide + .slide{margin-top:0}
.slide h2{margin-top:.2rem}
.slide [tabindex="-1"]:focus{outline:none}
.slide .lede{font-size:1.15rem}
.slide .plan{background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:.2rem 1rem .4rem;margin:1rem 0}
.slide .plan h3{margin:.8rem 0 .3rem}
.slide .plan ol{margin:.2rem 0 .6rem;padding-left:1.4rem}
.k-recap ul{padding-left:0;list-style:none;display:grid;gap:.6rem}
.k-recap li{background:var(--surface);border-left:5px solid var(--hl);padding:.55rem .8rem}
.deck-nav{position:sticky;bottom:0;display:flex;gap:.75rem;align-items:center;justify-content:space-between;max-width:42rem;
  margin-top:1.5rem;padding:.75rem 0;background:var(--paper);border-top:2px solid var(--line)}
.deck-nav .hint{font-size:.85rem;text-align:center}
.deck-nav button[hidden]{display:none}
label.choice .key{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border:1.5px solid var(--line);border-radius:4px;font-size:.8rem;font-weight:700;color:var(--slate);flex:none}

@media (max-width:34rem){.deck-nav .hint{display:none}}
@media print{.slide[hidden]{display:block!important}.tracker,.deck-nav,.resume{display:none!important}}

/* lesson diagrams */
.d{margin:1.2rem 0;padding:.9rem 1rem;background:var(--surface);border:2px solid var(--line);border-radius:12px}
.d figcaption{font-weight:800;margin:0 0 .6rem}
.d .legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:.7rem 0 0;font-size:.8rem;color:var(--slate)}
.d .lg::before{content:"";display:inline-block;width:.85rem;height:.85rem;border-radius:3px;margin-right:.35rem;vertical-align:-.1rem;border:2px solid}
/* word parts */
.pw + .pw{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--line)}
.pieces{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:stretch}
.pieces .pc{display:grid;grid-template-rows:auto auto 1fr;gap:.1rem;min-width:4.2rem;padding:.35rem .6rem .45rem;border:2px solid;border-radius:8px;text-align:center}
.pieces .pc + .pc{position:relative;margin-left:1rem}
.pieces .pc + .pc::before{content:"+";position:absolute;left:-1.05rem;top:50%;transform:translateY(-50%);width:1rem;text-align:center;font-weight:800;color:var(--slate)}
.pc .k{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.pc .f{font-size:1.15rem;font-weight:800;font-family:ui-monospace,Menlo,monospace}
.pc .m{font-size:.82rem;line-height:1.25;max-width:11rem}
.pc.prefix,.lg.prefix::before{border-color:#3B6FD8;background:#E7EEFB}.pc.prefix .k{color:#2A55B3}
.pc.root,.lg.root::before{border-color:var(--ink);background:#16224A;color:#fff}.pc.root .k{color:#C9D3EE}
.pc.suffix,.lg.suffix::before{border-color:#B48A00;background:#FFF4CC}.pc.suffix .k{color:#7A5D00}
.pc.link{border-style:dashed;border-color:#8A97C2;background:transparent;min-width:2.6rem}.pc.link .k{color:var(--slate)}
.pw .res{margin:.55rem 0 0;font-size:1.05rem}
.pw .res .eq{font-weight:800;color:var(--slate);margin-right:.2rem}
.pw .res .rm{color:var(--slate)}
.d-parts.mini{margin:.2rem 0;padding:0;border:0;background:none}
.d-parts.mini .pc{min-width:3rem;padding:.2rem .4rem}.d-parts.mini .pc .f{font-size:.95rem}.d-parts.mini .pc .m{font-size:.72rem}
.d-parts.mini .pc .k{display:none}.d-parts.mini .res{display:none}.d-parts.mini .pc + .pc{margin-left:.85rem}
/* steps */
.d-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.d-steps li{display:grid;grid-template-columns:2rem 1fr;gap:.6rem;align-items:start;position:relative}
.d-steps li + li::before{content:"";position:absolute;left:.95rem;top:-.55rem;height:.6rem;border-left:2px solid var(--line)}
.d-steps .n{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--ink);color:#fff;font-weight:800}
.d-steps .t{padding-top:.2rem}
/* scale */
.d-scale .stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:.4rem;text-align:center}
.d-scale .stops li{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;font-weight:700;font-size:.92rem;line-height:1.3}
.d-scale .stops li::after{content:"";width:2px;height:.7rem;background:var(--slate);margin-top:.3rem}
.d-scale .bar{height:.75rem;border-radius:99px}
.d-scale.ramp .bar{background:linear-gradient(90deg,#DCE3F3,#16224A)}
.d-scale.charge .bar{background:linear-gradient(90deg,#B3322D,#C9CFDD 50%,#1B7F57)}
.d-scale .ends{display:flex;justify-content:space-between;margin:.35rem 0 0;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--slate)}
/* compare */
.cmp{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.cmp-card{flex:1 1 12rem;display:grid;gap:.2rem;padding:.6rem .8rem;border:2px solid var(--line);border-radius:10px;background:var(--paper)}
.cmp-card .w{font-size:1.2rem}
.cmp .vs{font-weight:800;color:var(--slate);font-size:.85rem}
.cmp-tip{margin:.7rem 0 0;padding:.45rem .7rem;background:#FFF8E0;border-left:4px solid var(--hl)}
/* clues */
.d-clue .sent{font-size:1.1rem;line-height:1.9;margin:0}
.d-clue mark{background:none;color:inherit;padding:.05rem .2rem;border-radius:4px}
.d-clue mark.unk,.lg.unk::before{border:2px dashed var(--ink)}.d-clue mark.unk{font-weight:800}
.d-clue mark.sig,.lg.sig::before{background:var(--hl);border-color:var(--hl)}
.d-clue mark.ev{text-decoration:underline 3px var(--ok);text-underline-offset:.25em;background:var(--ok-bg)}
.lg.ev::before{background:var(--ok-bg);border-color:var(--ok)}.lg.unk::before{background:none}
.d-clue .means{margin:.6rem 0 0;font-size:1rem}
/* walkthroughs */
.d-walk .wt-label{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:#fff;padding:.1rem .45rem;border-radius:4px;margin-right:.3rem;vertical-align:.15rem}
.d-walk .wt{margin:0;padding-left:1.4rem;display:grid;gap:.5rem}
.d-walk .wt-step .pw{margin:.3rem 0}
.wt-controls{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-top:.8rem}
.wt-count{font-size:.85rem}
@media (prefers-reduced-motion:no-preference){.wt-new{animation:wt-in .35s ease-out}@keyframes wt-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}}
/* video */
.d-video .v-frame{position:relative;aspect-ratio:16/9;background:#0E1630;border-radius:8px;overflow:hidden;margin-bottom:.6rem}
.d-video .v-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.d-video .v-play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:.5rem;background:none;border:0;color:#fff;border-radius:0}
.d-video .v-play:hover{background:rgba(255,255,255,.06)}
.d-video .v-icon{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--hl);color:var(--ink);font-size:1.4rem;padding-left:.2rem}
.d-video figcaption{font-weight:400;margin:0}
.d-video .v-note{margin:.4rem 0 0;font-size:.92rem;color:var(--slate)}
@media (max-width:34rem){.pieces .pc{min-width:3.4rem;padding:.3rem .45rem}.pc .f{font-size:1rem}.d{padding:.75rem}}

/* lesson list: course progress */
.course{max-width:42rem;margin:0 0 1.5rem}
.course .bar{display:flex;gap:3px;height:.8rem}
.course .bar span{flex:1;border-radius:3px;background:#E3E9F5}
.course .bar .done{background:var(--ok)}.course .bar .going{background:var(--hl)}
.course p{margin:.4rem 0 0;font-size:.95rem}
.lesson-list .meter{height:.4rem;margin-top:.3rem;max-width:14rem}
.lesson-list .meter i{background:var(--hl)}

/* strengths and growth areas (parent child page) */
.sg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:.8rem 0}
.sg-col{background:var(--surface);border:2px solid var(--line);border-top-width:6px;border-radius:10px;padding:.2rem 1rem .6rem}
.sg-col.strong{border-top-color:var(--ok)}.sg-col.grow{border-top-color:var(--hl)}
.sg-col h3{margin:.7rem 0 .4rem}
.sg-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.sg-col .lvl{display:inline-block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--line);border-radius:99px;padding:0 .45rem;margin-left:.2rem;vertical-align:.1rem}
.sg-col .help{margin:.25rem 0 0;font-size:.92rem}
.trend{font-size:.85rem;font-weight:700;white-space:nowrap}.trend.up{color:var(--ok)}.trend.down{color:var(--miss)}
.skill-changes{list-style:none;padding:0;display:grid;gap:.3rem}
.skill-changes .up span{color:var(--ok);font-weight:800}.skill-changes .down span{color:var(--miss);font-weight:800}
.all-skills summary{cursor:pointer;font-weight:800;font-size:1.05rem;margin:1rem 0 .4rem;min-height:2.75rem;display:flex;align-items:center}
.all-skills h4{margin:1rem 0 .3rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate)}
.skill-rows{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.skill-rows li{display:grid;grid-template-columns:minmax(9rem,15rem) minmax(6rem,1fr) 6.5rem 8.5rem 72px;gap:.4rem .8rem;align-items:center;font-size:.92rem}
.sk-bar{position:relative;height:.75rem;background:#E3E9F5;border-radius:99px}
.sk-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:99px}
.sk-bar b{position:absolute;top:-.25rem;bottom:-.25rem;width:2px;margin-left:-1px;background:var(--slate)}
.skill-rows li.thin .sk-bar i{background:#9AA6C6}
.skill-rows li.thin .sk-lvl{color:var(--slate);font-weight:400;font-size:.82rem}
.sk-lvl{font-weight:700}
.sk-spark polyline{fill:none;stroke:var(--ink);stroke-width:1.5}.sk-spark circle{fill:var(--ink)}
.sk-unseen{font-size:.88rem;margin:.3rem 0 0}
@media (max-width:40rem){.sg{grid-template-columns:1fr}
  .skill-rows li{grid-template-columns:1fr 6.5rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
  .sk-name{grid-column:1/-1;font-weight:700}.sk-spark{display:none}}
.sg-mini p{margin:.3rem 0;font-size:.95rem}
.k-check .unanswered{color:var(--ink);font-weight:400;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.k-check .unanswered[hidden]{display:none}
.qchip{min-height:0;min-width:2.2rem;padding:.25rem .5rem;font-size:.9rem;border-width:1.5px}
.today-card ul{margin:.3rem 0 0;padding-left:1.1rem;display:grid;gap:.25rem;font-size:.95rem}