:root{
  --burgundy:#4A1218;
  --mahogany:#35090E;
  --gold:#F2C230;
  --cream:#FBF6EC;
  --ink:#2A1A16;
  --teal:#0E5A60;
  --green:#1F6B3A;
}
*{box-sizing:border-box}
html{color-scheme:light only}
html,body{background:var(--cream)!important;margin:0}
body{color:var(--ink);font-family:'Atkinson Hyperlegible',system-ui,sans-serif;font-size:21px;line-height:1.6}

/* masthead */
.field{position:relative;background:linear-gradient(160deg,var(--burgundy),var(--mahogany))!important;color:var(--cream);text-align:center;padding:2.4rem 1.2rem 2.1rem}
.wordmark{font-family:Fraunces,Georgia,serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);font-size:clamp(1.2rem,3.5vw,1.45rem);margin:0}
.eyebrow{color:rgba(251,246,236,.85);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;margin:1rem 0 .45rem}
h1{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--cream);font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.15;margin:0 0 .55rem}
.subtitle{color:var(--gold);font-size:1.05rem;margin:0}

/* top print whisper */
.print-top{position:absolute;top:1.1rem;right:1.1rem;background:transparent;border:1.5px solid rgba(242,194,48,.55);color:var(--gold);font-family:inherit;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .75rem;border-radius:999px;cursor:pointer;transition:border-color .2s,background .2s}
.print-top:hover,.print-top:focus-visible{border-color:var(--gold);background:rgba(242,194,48,.12)}
.print-top-note{position:absolute;top:calc(100% + .5rem);right:0;background:var(--cream);color:var(--ink);font-style:italic;font-size:.78rem;font-weight:400;text-transform:none;letter-spacing:normal;line-height:1.4;padding:.5rem .75rem;border-radius:10px;max-width:min(21rem,78vw);width:max-content;text-align:left;box-shadow:0 2px 8px rgba(0,0,0,.25);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.print-top:hover .print-top-note,.print-top:focus-visible .print-top-note{opacity:1;transform:none}

main{max-width:860px;margin:0 auto;padding:1.5rem 1.1rem 1rem}

/* cards */
.card{background:#fff;border:3px solid var(--burgundy);border-radius:18px;box-shadow:0 3px 0 rgba(74,18,24,.18);padding:1.2rem 1.4rem 1rem;margin:0 0 1.4rem}
.step-label{display:inline-block;background:var(--burgundy);color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;font-weight:700;padding:.3rem .85rem;border-radius:999px;margin:0 0 .6rem}
.card h2{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--burgundy);font-size:1.4rem;line-height:1.2;margin:0 0 1rem}

/* questions */
ol.q{list-style:none;margin:0;padding:0}
ol.q li{display:grid;grid-template-columns:2.6rem 1fr;column-gap:.4rem;row-gap:.35rem;margin:0 0 1.2rem}
ol.q li:last-child{margin-bottom:.4rem}
ol.q .n{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--burgundy)}
ol.q .ans{grid-column:2;height:1.7rem;max-width:22rem;border-bottom:1.5px solid rgba(74,18,24,.4)}
ol.q .opts{grid-column:2;display:flex;flex-wrap:wrap;gap:.3rem 1.8rem}
.spaced{word-spacing:1.2rem}

/* stacked fractions */
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.1;font-size:.9em;margin:0 .2rem}
.frac span:first-child{border-bottom:1.5px solid currentColor;padding:0 .25em}
.frac span:last-child{padding:0 .25em}

/* results grid */
table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.35}
th,td{text-align:left;vertical-align:top;padding:.55rem .4rem;border-bottom:1px solid rgba(74,18,24,.25)}
th{font-family:Fraunces,Georgia,serif;color:var(--burgundy);font-weight:700}
td.nw{white-space:nowrap}
.fill{display:inline-block;width:2.4rem;height:1.5rem;border:1.5px solid rgba(74,18,24,.5);border-radius:4px;vertical-align:middle;margin-right:.3rem}
a{color:var(--teal)}

/* answer key */
.key-toggle{display:block;width:100%;background:var(--green);color:#fff;border:0;border-radius:14px;font-family:inherit;font-size:1.05rem;font-weight:700;padding:.85rem 1rem;cursor:pointer;margin:0 0 .5rem}
.key-toggle:hover,.key-toggle:focus-visible{background:#185a30}
.key-note{font-size:.9rem;color:var(--teal);text-align:center;margin:0 0 1.4rem}
.key[hidden]{display:none}
.key .card{border-color:var(--green)}
.key .step-label{background:var(--green);color:#fff}
.key h2{color:var(--green)}
ol.k{list-style:none;margin:0;padding:0;font-size:.98rem;line-height:1.5}
ol.k li{display:grid;grid-template-columns:2.4rem 1fr;column-gap:.4rem;margin:0 0 .85rem}
ol.k li:last-child{margin-bottom:.3rem}
ol.k .n{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--green)}
ol.k .a{font-weight:700}

.print-only{display:none}

/* bottom parking pill */
.print-pill{position:sticky;bottom:1.1rem;display:block;width:fit-content;max-width:min(22rem,calc(100% - 2.2rem));margin:0 1.1rem 1.1rem auto;background:var(--gold);color:var(--mahogany);border:0;border-radius:999px;font-family:inherit;font-size:1rem;font-weight:700;text-align:left;line-height:1.3;padding:.6rem 1.15rem;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.print-pill .print-sub{display:block;font-size:.72rem;font-weight:400;margin-top:.15rem}

footer{background:var(--burgundy)!important;color:var(--cream);text-align:center;padding:1.6rem 1rem;font-size:.95rem}
footer .wm{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--gold);display:block;font-size:1.1rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* self-checking additions */
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
ol.q li{grid-template-columns:2.6rem 1fr}
ol.q .prompt{}
.ansrow{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem}
input.ansbox{font:inherit;font-size:1.05rem;padding:.3rem .55rem;border:1.5px solid rgba(74,18,24,.45);border-radius:8px;width:11rem;max-width:100%;background:#fff;color:var(--ink)}
input.ansbox.narrow{width:6.5rem}
input.ansbox:focus{outline:2px solid var(--teal);outline-offset:1px}
.parts{display:inline-flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center}
.parts label{font-size:.95rem}
.pills{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem}
.pill{font:inherit;font-size:1rem;padding:.3rem .85rem;border:1.5px solid rgba(74,18,24,.45);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.pill:hover{border-color:var(--burgundy)}
.pill[aria-pressed="true"]{background:var(--burgundy);color:var(--gold);border-color:var(--burgundy)}
.mark{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;font-weight:700;font-size:1rem}
.mark.ok{color:var(--green)} .mark.no{color:#9a2a1c} .mark.none{color:#6b5a55}
.mark .note,.card-result .note{font-weight:400;color:var(--teal);font-size:.9rem}
.why{grid-column:2;font-size:.95rem;line-height:1.5;background:rgba(242,194,48,.16);border-left:4px solid var(--gold);padding:.5rem .75rem;border-radius:0 8px 8px 0;margin-top:.15rem}
.why[hidden]{display:none}
.small-btn{font:inherit;font-size:.82rem;font-weight:700;padding:.2rem .7rem;border:1.5px solid var(--teal);border-radius:999px;background:#fff;color:var(--teal);cursor:pointer;line-height:1.3}
.small-btn:hover{background:rgba(14,90,96,.08)}
.small-btn:disabled{opacity:.5;cursor:default}
.check-btn{font:inherit;font-size:1rem;font-weight:700;padding:.55rem 1.1rem;border:0;border-radius:12px;background:var(--burgundy);color:var(--gold);cursor:pointer}
.check-btn:hover{background:var(--mahogany)}
.card-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:.6rem 0 .2rem}
.card-result{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;font-size:.98rem;color:var(--teal);margin:0}
.card-result:empty{display:none}
.practice{border:2px dashed var(--teal);border-radius:14px;padding:1rem 1.2rem .6rem;margin:1rem 0 .3rem}
.practice[hidden]{display:none}
.practice h3{font-family:Fraunces,Georgia,serif;color:var(--teal);font-size:1.15rem;margin:0 0 .8rem}
.practice .tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:.4rem 0 .4rem}
.practice-result{margin:.2rem 0 .4rem}
.count.full{color:var(--green);font-weight:700} .count.part{color:#8a5a00;font-weight:700} .count.empty{color:#9a2a1c;font-weight:700}
.grid-more{margin-top:.3rem;white-space:nowrap}
.tools-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:1rem 0 0}
#copyNote{font-size:.9rem;color:var(--teal)}
textarea.export{width:100%;min-height:9rem;font:inherit;font-size:.92rem;line-height:1.4;padding:.6rem;border:1.5px solid rgba(74,18,24,.35);border-radius:8px;margin-top:.6rem;background:#fff;color:var(--ink)}
textarea.export[hidden]{display:none}
.check-all-wrap{text-align:center;margin:0 0 1.4rem}
.check-all-wrap .hint{display:block;font-size:.9rem;color:var(--teal);margin-top:.4rem}
td .links{display:block}
.prompt .tbl-title{display:block;font-weight:700;font-size:.95rem;margin-top:.2rem}
.prompt table.data{width:auto;display:table;border-collapse:collapse;margin:.4rem 0 .2rem;font-size:.95rem}
.prompt table.data th,.prompt table.data td{border:1px solid rgba(74,18,24,.35);padding:.25rem .7rem;text-align:left}
.prompt table.data th{font-family:inherit;color:var(--ink);font-weight:700;background:rgba(242,194,48,.18)}
.prompt table.data td.num{text-align:right}
.prompt svg.grid{display:block;margin:.4rem 0 .2rem;max-width:100%;height:auto}
.prompt svg.fig{display:block;margin:.4rem 0 .3rem;max-width:100%;height:auto}
.prompt svg.fig .s{stroke:var(--burgundy);stroke-width:2;fill:rgba(74,18,24,.06);stroke-linejoin:round}
.prompt svg.fig .d{stroke:var(--teal);stroke-width:1.5;stroke-dasharray:4 3;fill:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media print{
  @page{margin:.6in .7in}
  html,body{background:#fff!important;color:#000;font-size:14px;line-height:1.45}
  .field{background:#fff!important;color:#000;text-align:left;padding:.3rem 0 .6rem;border-bottom:2px solid #000}
  .wordmark,.subtitle,h1{color:#000}
  .wordmark{font-size:1rem}
  .eyebrow{color:#333;margin:.5rem 0 .2rem}
  h1{font-size:1.7rem;margin-bottom:.3rem}
  .subtitle{font-size:.95rem}
  .print-top,.print-pill,.key-toggle,.key-note,.check-btn,.small-btn,.card-tools,.tools-row,.check-all-wrap,.practice .tools,textarea.export,#copyNote,.grid-more{display:none!important}
  main{padding:.5rem 0 0}
  .card{box-shadow:none;border:1.5px solid #000;border-radius:8px;padding:.65rem 1rem .3rem;margin-bottom:.7rem;page-break-inside:avoid;break-inside:avoid}
  .step-label{background:none!important;color:#000!important;border:1px solid #000;font-size:.66rem;padding:.15rem .6rem;margin-bottom:.3rem}
  .card h2{font-size:1.15rem;margin-bottom:.5rem}
  .card h2,ol.q .n,th,ol.k .n,.practice h3{color:#000}
  ol.q li{margin-bottom:.55rem;row-gap:.15rem}
  ol.q li:last-child{margin-bottom:.25rem}
  input.ansbox{border:1px solid #555;border-radius:4px;background:#fff;color:#000;-webkit-appearance:none;appearance:none;height:1.6rem;font-size:.95rem}
  .pill{border:1px solid #000;background:#fff;color:#000;font-size:.9rem;padding:.15rem .6rem}
  .pill[aria-pressed="true"]{font-weight:700;text-decoration:underline}
  .mark{font-size:.9rem} .mark.ok{color:#000} .mark.no{color:#000} .mark.none{color:#000}
  .why{background:none;border-left:2px solid #000;font-size:.88rem}
  .card-result{color:#000;font-size:.9rem}
  .practice{border:1px dashed #000;page-break-inside:avoid;break-inside:avoid}
  .card:has(.practice:not([hidden])){page-break-inside:auto;break-inside:auto}
  .count.full,.count.part,.count.empty{color:#000}
  table{font-size:.85rem}
  th,td{padding:.32rem .3rem}
  .fill{width:2rem;height:1.2rem;border-color:#000}
  .prompt table.data th{background:none;color:#000} .prompt table.data th,.prompt table.data td{border-color:#000}
  .prompt svg.grid .pt{fill:#000} .prompt svg.grid .ln{stroke:#000}
  .prompt svg.fig .s{stroke:#000;fill:none} .prompt svg.fig .d{stroke:#000} .prompt svg.fig .pt{fill:#000}
  a{color:#000;text-decoration:none}
  .print-only{display:block}
  .key{display:none}
  body.key-open .key{display:block;page-break-before:always;break-before:page}
  .key .card{border-color:#000;page-break-inside:auto;break-inside:auto}
  .key .step-label{background:none!important;color:#000!important}
  ol.k{font-size:.92rem;line-height:1.4}
  ol.k li{page-break-inside:avoid;break-inside:avoid;margin-bottom:.6rem}
  footer{background:#fff!important;color:#000;border-top:1px solid #000;padding:.5rem 0;font-size:.85rem;page-break-before:avoid;break-before:avoid}
  footer .wm{color:#000;font-size:.95rem}
}
.field .wayback{margin:.9rem 0 0;font-size:.95rem;color:rgba(251,246,236,.85)} .field .wayback a{color:var(--gold);text-decoration:none;font-weight:700} .field .wayback a:hover{text-decoration:underline} @media print{.field .wayback{display:none}}

/* review-page additions */
.card p{margin:.55rem 0}
.card h3{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--burgundy);font-size:1.18rem;line-height:1.25;margin:1.3rem 0 .45rem}
.card b{font-weight:700}
.ex{background:rgba(242,194,48,.14);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:.7rem 1rem .5rem;margin:.9rem 0}
.ex-label{display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#8a5a00;margin-bottom:.25rem}
.ex-q{font-weight:700;margin:.2rem 0 .5rem}
.ex p{margin:.45rem 0}
.formula{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;background:#fff;border:1.5px solid rgba(74,18,24,.3);border-radius:12px;padding:.6rem 1rem;margin:.7rem 0}
.formula .f{font-size:1.3rem;font-weight:700}
.formula .fnote{font-size:.9rem;color:var(--teal);flex-basis:100%}
.chip{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:var(--teal);color:#fff;border-radius:999px;padding:.2rem .65rem;vertical-align:middle}
.chip.no{background:#9a2a1c}
.tip{border:2px dashed var(--teal);border-radius:14px;padding:.7rem 1rem .3rem;margin:.9rem 0}
.tip-label{display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:.2rem}
.fig-row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:flex-start;margin:.3rem 0}
.fig-text{flex:1 1 320px;min-width:0}
.fig-row svg.figr{flex:0 0 auto;margin:.3rem auto}
svg.figr{display:block;max-width:100%;height:auto}
svg.figr .s{stroke:var(--burgundy);stroke-width:2.5;fill:none;stroke-linecap:round}
svg.figr .s2{stroke:var(--teal);stroke-width:2.5;fill:none;stroke-linecap:round}
svg.figr .d{stroke:var(--teal);stroke-width:1.5;stroke-dasharray:4 3;fill:none}
svg.figr .pt{fill:var(--burgundy)}
svg.figr .pth{stroke:var(--burgundy);stroke-width:2}
svg.figr .lbl{fill:var(--teal);font-weight:700}
svg.figr .quad{fill:currentColor;opacity:.45;font-weight:700}
.minis{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin:.6rem 0}
.minis figure{margin:0;text-align:center}
.minis figcaption{font-size:.85rem;font-weight:700;color:var(--burgundy)}
.tablewrap{overflow-x:auto;margin:.6rem 0 1rem}
table.forms{font-size:.92rem;min-width:36rem} table.forms th,table.forms td{padding:.5rem .5rem}
table.slopes{width:auto;font-size:.95rem;margin:.4rem 0}
table.slopes th,table.slopes td{border:1px solid rgba(74,18,24,.35);padding:.25rem .8rem;text-align:center}
table.slopes th{font-family:inherit;color:var(--ink);background:rgba(242,194,48,.18)}
.mfrac .frac{font-size:.85em}
sub{font-size:.7em}
.how{font-size:1rem;color:var(--ink)}
.next-links{list-style:none;padding:0;margin:0} .next-links li{margin:.4rem 0}
.next-links .what{color:var(--teal);font-size:.92rem}
@media print{
  .ex{background:none;border-left:2px solid #000} .ex-label,.tip-label{color:#000}
  .formula{border-color:#000} .formula .fnote{color:#000} .formula .f{font-size:1.1rem}
  .chip{background:none!important;color:#000!important;border:1px solid #000}
  .tip{border-color:#000}
  svg.figr .s,svg.figr .s2,svg.figr .d,svg.figr .pth{stroke:#000} svg.figr .pt{fill:#000} svg.figr .lbl,svg.figr .quad{fill:#000}
  .card h3,.minis figcaption{color:#000}
  .fig-row{display:block} .fig-row svg.figr{margin:.3rem 0}
  table.slopes th{background:none}
}

/* ---------- math drills ---------- */
.card p{margin:.6rem 0}
.calc{display:inline-block;margin-top:.7rem;background:rgba(242,194,48,.18);border:1.5px solid rgba(242,194,48,.6);color:var(--cream);border-radius:999px;padding:.2rem .85rem;font-size:.9rem}
/* worked examples */
.exs{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:700px){.exs{grid-template-columns:1fr}}
.ex{background:#fff8e6;border-radius:12px;padding:.6rem .9rem .5rem}
.ex-k{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);font-weight:700;margin:0!important}
.ex-q{font-weight:700;font-size:1.1rem;margin:.25rem 0 .3rem!important}
.ex ol{margin:.2rem 0 .3rem;padding-left:1.3rem;font-size:.95rem}
.ex ol li{margin:.2rem 0}
.ex-a{margin:.3rem 0 .2rem!important}
.ex-a b{color:var(--green)}
.taught{font-size:.95rem;margin:.9rem 0 .2rem!important}
.taught a{color:var(--teal);font-weight:700}
/* the drill */
.dtools{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin:.2rem 0 .6rem}
.dtools .lbl{font-weight:700}
.dtools .grp{display:flex;gap:.4rem;align-items:center}
.small-btn{font:inherit;font-size:.95rem;padding:.3rem .85rem;border:1.5px solid var(--burgundy);border-radius:10px;background:#fff;color:var(--burgundy);cursor:pointer;font-weight:700}
.small-btn:hover{background:rgba(74,18,24,.06)}
.status{font-size:.92rem;color:#5b4a45;background:rgba(14,90,96,.06);border-radius:10px;padding:.4rem .8rem;margin:.4rem 0 .8rem!important}
.status.done{color:var(--green);background:rgba(31,107,58,.09);font-weight:700}
.status.half{color:var(--teal);font-weight:700}
.howto{font-size:.95rem;color:#5b4a45}
ol.dq{list-style:none;margin:.4rem 0 0;padding:0}
ol.dq>li{display:grid;grid-template-columns:2.2rem 1fr;column-gap:.3rem;padding:.6rem 0;border-top:1px solid rgba(74,18,24,.12)}
ol.dq>li .n{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--burgundy);padding-top:.15rem}
ol.dq .pw{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .8rem;min-width:0}
ol.dq .pq{margin:0!important;font-size:1.15rem;white-space:nowrap}
ol.dq .pq.wide{white-space:normal;flex-basis:100%}
ol.dq .pa{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem}
ol.dq input.ansbox{width:7.5rem}
ol.dq input.ansbox.wide{width:15rem;max-width:100%}
.unit{font-size:.95rem;color:#5b4a45}
.pills{display:flex;flex-wrap:wrap;gap:.45rem .55rem}
.pill:disabled{opacity:.35;cursor:default}
p.ordered{margin:0!important;flex-basis:100%;font-size:1rem}
p.ordered .hint{color:#6b5a55;font-style:italic}
ol.dq .mk{grid-column:2;font-size:.95rem;margin-top:.2rem}
ol.dq .mk:empty{display:none}
ol.dq .good{color:var(--green);font-weight:700}
ol.dq .bad{color:#9a2a1c;font-weight:700}
ol.dq .rsn{color:var(--ink)}
ol.dq>li.ok input.ansbox{border-color:var(--green);background:rgba(31,107,58,.06)}
ol.dq>li.no input.ansbox{border-color:#9a2a1c;background:rgba(154,42,28,.05)}
.checkrow{margin:1rem 0 .4rem;display:flex;flex-wrap:wrap;gap:.6rem}
#result{background:rgba(242,194,48,.16);border-radius:12px;padding:.5rem 1rem;margin:.8rem 0}
#result .score{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--burgundy);font-size:1.4rem;margin:.2rem 0!important}
#result .small{font-size:.9rem}
a.go{display:inline-block;background:var(--burgundy);color:var(--gold);font-weight:700;text-decoration:none;border-radius:12px;padding:.45rem 1rem}
a.go:hover{background:var(--mahogany)}
ol.key{margin:.6rem 0;padding-left:1.6rem;font-size:.95rem}
ol.key li{margin:.5rem 0}
ol.key .kq{font-weight:700}
.printkey{display:none}
/* the way around */
.drnav{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:0 0 1.4rem}
.drnav a{display:block;background:#fff;border:2px solid rgba(74,18,24,.35);border-radius:14px;padding:.55rem .9rem;text-decoration:none;color:var(--ink)}
.drnav a:hover{border-color:var(--burgundy)}
.drnav .dir{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);font-weight:700}
.drnav .nm{display:block;font-weight:700;color:var(--burgundy);line-height:1.3}
.drnav .nx{text-align:right}
.drnav .solo{grid-column:1/-1}
@media (max-width:560px){.drnav{grid-template-columns:1fr}.drnav .nx{text-align:left}}
/* the Drills door */
.lead p{margin:.55rem 0}
#nextForYou{display:block;background:var(--burgundy);color:var(--cream);border-radius:14px;padding:.7rem 1rem;margin:0 0 1.4rem}
#nextForYou .nf-k{display:inline-block;background:var(--gold);color:var(--mahogany);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;border-radius:999px;padding:.15rem .7rem;margin-right:.4rem}
#nextForYou a{color:var(--gold);font-weight:700}
#nextForYou .nf-s{display:block;font-size:.85rem;opacity:.85;margin-top:.2rem}
.famjump{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:.5rem 0 0;padding:0;list-style:none}
.famjump a{display:inline-block;border:1.5px solid rgba(74,18,24,.4);border-radius:999px;padding:.15rem .7rem;font-size:.92rem;text-decoration:none;color:var(--burgundy);background:#fff}
.famjump a.has{background:var(--burgundy);color:var(--gold);border-color:var(--burgundy);font-weight:700}
.fam h2 a{color:inherit}
.fam .fam-s{font-size:.95rem;color:#5b4a45;margin:-.5rem 0 .6rem!important}
ol.dl{list-style:none;margin:0;padding:0}
ol.dl li{display:grid;grid-template-columns:3.2rem 1fr 1.6rem;gap:.4rem;align-items:baseline;padding:.3rem 0;border-top:1px solid rgba(74,18,24,.1);font-size:.92rem;line-height:1.4}
ol.dl .num{font-weight:700;color:var(--burgundy);font-variant-numeric:tabular-nums}
ol.dl a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(74,18,24,.25)}
ol.dl a:hover{color:var(--burgundy)}
ol.dl .calcno{display:block;font-size:.8rem;color:var(--teal)}
ol.dl li.coming .t{color:#8a7a74}
ol.dl li.coming .calcno{color:#9aa}
ol.dl .tick{color:var(--green);font-weight:700;font-size:1.1rem;text-align:center}
ol.dl li.mastered a{color:var(--green)}
#doneCount:empty{display:none}
#doneCount{font-weight:700;color:var(--green)}
@media print{
  html,body{font-size:12pt}
  .card{border:1px solid #000!important;box-shadow:none!important;padding:.5rem .8rem;margin:0 0 .6rem;break-inside:auto}
  .step-label{background:#fff!important;color:#000!important;border:1px solid #000;padding:.05rem .5rem}
  .card h2{color:#000!important;margin:0 0 .4rem}
  .field{padding:.3rem 0!important;background:#fff!important;color:#000!important;text-align:left}
  .field h1,.field .subtitle,.field .eyebrow,.field .wordmark{color:#000!important}
  .field .wordmark{font-size:.9rem}
  .field h1{font-size:1.4rem}
  .calc{color:#000;border:1px solid #000;background:#fff}
  .ex{background:#fff!important;border:1px solid #888;padding:.3rem .6rem}
  .exs{grid-template-columns:1fr 1fr!important;gap:.5rem}
  .ex ol{font-size:.85rem}
  .dtools,.checkrow,#result,#keyBox,.status,.drnav,.mk,.small-btn,p.ordered .hint{display:none!important}
  ol.dq>li{break-inside:avoid;padding:.22rem 0}
  .card .exs{margin-top:.2rem} .taught{margin:.4rem 0 0!important}
  .card{padding:.4rem .8rem .2rem!important;margin:0 0 .4rem!important}
  ol.dq input.ansbox{border:0!important;border-bottom:1px solid #000!important;border-radius:0;background:#fff!important;width:8rem}
  ol.dq .pq{white-space:normal}
  .pill{border:1px solid #000!important;background:#fff!important;color:#000!important;opacity:1!important}
  p.ordered{display:none!important}
  .pline{display:block!important;width:13rem;height:1.5rem;border-bottom:1px solid #000}
  ol.dq:not(.one-col){columns:2;column-gap:2.5rem}
  .ordpills{display:none!important}
  .printkey{display:block;break-before:page;page-break-before:always}
  .pk-h{font-family:Fraunces,Georgia,serif;font-size:1.2rem;margin:0 0 .4rem}
  ol.pk{padding-left:1.6rem;font-size:11pt;margin:0}
  ol.pk li{margin:.3rem 0;break-inside:avoid}
  footer{display:none}
}
.ppr{display:none}
.pline{display:none}
@media print{.scr{display:none}.ppr{display:inline}.howto{color:#000}}

/* fractions, figures and tables inside problems */
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.82em;line-height:1.12;margin:0 .08em}
.fr>span:first-child{border-bottom:1.5px solid currentColor;padding:0 .18em}
.fr>span:last-child{padding:0 .18em}
.pfig{flex-basis:100%;margin:.2rem 0}
.pfig svg{display:block;max-width:100%;height:auto;color:var(--ink)}
.pfig svg .sh{fill:rgba(14,90,96,.55)}
.pfig svg .ln{stroke:currentColor;fill:none;stroke-width:2}
.pfig svg .tk{stroke:currentColor;stroke-width:1.5}
.pfig svg .pt{fill:#9a2a1c}
.pfig svg text{fill:currentColor;font-family:inherit;font-size:15px}
table.ptab{border-collapse:collapse;font-size:.95rem;margin:.2rem 0}
table.ptab th,table.ptab td{border:1px solid rgba(74,18,24,.35);padding:.2rem .7rem;text-align:center}
table.ptab th{background:rgba(242,194,48,.18)}
.rep{text-decoration:overline}
@media print{.pfig svg .sh{fill:#bbb}.pfig svg .pt{fill:#000}}

.lhs{font-weight:700;margin-right:.1rem}
ol.dq input.ansbox.wide{width:15rem;max-width:100%}
.pill svg{display:block;max-width:100%;height:auto}
.pills .pill:has(svg){padding:.3rem;border-radius:12px}
.pills .pill:has(svg)[aria-pressed="true"]{background:#fff;color:var(--ink);outline:4px solid var(--burgundy);outline-offset:1px}
.pfig{max-width:100%;overflow-x:auto}
table.ptab th,table.ptab td{padding:.2rem .5rem}

/* challenge problems */
.chal-call{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;background:rgba(14,90,96,.08);border:2px solid var(--teal);border-radius:12px;padding:.55rem .9rem;margin:.2rem 0 .9rem}
.chal-call p{margin:0!important;flex:1 1 16rem;font-size:.97rem}
.chal-btn{font:inherit;font-weight:700;font-size:1rem;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:.45rem 1rem;cursor:pointer}
.chal-btn:hover{filter:brightness(1.1)}
@media print{.chal-call{display:none!important}}
.chal-note{background:rgba(14,90,96,.07);border-left:4px solid var(--teal);border-radius:10px;padding:.3rem .9rem;margin:.2rem 0 .8rem;font-size:.97rem}
.chal-note p{margin:.45rem 0!important}
.chal-note .small{font-size:.9rem;color:#5b4a45}
@media print{.chal-note{border:1px solid #888;background:#fff}.chal-note .small{display:none}}
.chal-jump{text-decoration:none;margin-left:.3rem;background:rgba(14,90,96,.55)!important;border-color:#7fc4c9!important}
.chal-jump:hover{background:rgba(14,90,96,.8)!important}
@media print{.chal-jump{display:none!important}}

/* the way back to the list of all drills, at the foot of every drill */
.alldrills{text-align:center;margin:-.4rem 0 1.6rem}
.alldrills a{display:inline-block;background:var(--burgundy);color:var(--gold);font-weight:700;text-decoration:none;border-radius:12px;padding:.6rem 1.3rem;font-size:1.05rem}
.alldrills a:hover{background:var(--mahogany)}
@media print{.alldrills{display:none!important}}

/* ---------- language arts drills (added to the math drills' look) ---------- */
.sent{display:block;font-size:1.12rem;line-height:1.5}
.ask{display:block;font-size:.95rem;color:#5b4a45;margin-top:.2rem}
.ask b{color:var(--burgundy)}
.ppre{flex-basis:100%;font-weight:700;color:var(--burgundy);font-family:Fraunces,Georgia,serif;font-size:1.05rem}
.pills.long{flex-direction:column;align-items:stretch;width:100%}
.pills.long .pill{border-radius:12px;text-align:left;padding:.45rem .9rem;line-height:1.4}
ol.dq .pa:has(.pills.long){flex-basis:100%}
select.drop{font:inherit;font-size:1rem;line-height:1.3;padding:.2rem .35rem;border:1.5px solid var(--burgundy);border-radius:8px;background:#fff;color:var(--ink);max-width:calc(100% - .4rem);margin:.1rem 0;vertical-align:baseline}
select.drop:focus{outline:2px solid var(--teal);outline-offset:1px}
select.drop:disabled{opacity:1;color:var(--ink)}
ol.dq>li.ok select.drop{border-color:var(--green);background:rgba(31,107,58,.07)}
ol.dq>li.no select.drop{border-color:#9a2a1c;background:rgba(154,42,28,.05)}
.dropp{font-weight:700}
.blank{letter-spacing:.05em}
ol.key u,ol.pk u,ol.dq .mk u,.ex u{text-decoration:none;font-weight:700;background:rgba(242,194,48,.35);padding:0 .15em;border-radius:3px}
.taught.more{margin-top:.25rem!important}
.ex-q .opts{display:block;font-weight:400;font-size:.95rem;color:#5b4a45;margin-top:.15rem}
.gofirst{background:rgba(14,90,96,.08);border-left:4px solid var(--teal);border-radius:0 10px 10px 0;padding:.15rem .9rem;margin:.6rem 0}
.gofirst a{font-weight:700}
@media print{
  .ask{color:#000}
  .pills.long .pill{padding:.15rem .6rem}
  ol.key u,ol.pk u,.ex u{background:none;text-decoration:underline}
}
#nextForYou[hidden]{display:none}
.ppre .pair{display:block;font-family:'Atkinson Hyperlegible',system-ui,sans-serif;font-weight:400;color:var(--ink);font-size:1.12rem;line-height:1.5}
ol.dq .pq.wide{min-width:0;max-width:100%}
ol.dq>li{min-width:0} ol.dq .pw{min-width:0;max-width:100%}
select.drop{min-width:0;width:auto;text-overflow:ellipsis}

/* ---------- social studies drills (added to the language arts look) ---------- */
.stim{flex-basis:100%;background:#FBF6EC;border:1.5px solid rgba(74,18,24,.35);border-left:5px solid var(--burgundy);border-radius:0 12px 12px 0;padding:.6rem .9rem;margin:.1rem 0 .55rem;font-size:1rem;line-height:1.5;max-width:100%;overflow-x:auto}
.stim .src{display:block;font-size:.85rem;color:#5b4a45;margin-bottom:.25rem}
.stim blockquote{margin:0;font-style:normal}
.stim table{border-collapse:collapse;width:100%;font-size:.92rem;margin:.2rem 0}
.stim th,.stim td{border:1px solid rgba(74,18,24,.3);padding:.3rem .45rem;text-align:left;vertical-align:top}
.stim th{background:rgba(74,18,24,.07)}
.stim .cap{display:block;font-weight:700;font-family:Fraunces,Georgia,serif;color:var(--burgundy);margin-bottom:.25rem}
.stim svg{max-width:100%;height:auto;display:block}
.stim td.empty{background:rgba(242,194,48,.25);text-align:center;font-weight:700}
ol.key .stim{margin:.3rem 0}
.ex .stim{margin:.3rem 0 .5rem}
.topic-h{font-family:Fraunces,Georgia,serif;color:var(--burgundy);font-size:1.05rem;margin:1rem 0 .2rem;font-weight:700}
.topic-h .tn{display:inline-block;min-width:2.2rem;color:var(--teal)}
ol.dl.sub{margin-top:.2rem}
@media (max-width:480px){ .stim{font-size:.95rem;padding:.5rem .65rem} .stim th,.stim td{padding:.25rem .3rem} }
@media print{
  .stim{background:none;border:1px solid #000;border-left:4px solid #000;break-inside:avoid}
  .stim th{background:none}
  .stim td.empty{background:none}
}
/* tables in a question: on a phone, each row becomes a small card with its column headings */
@media (max-width:600px){
  .stim table.stack, .stim table.stack tbody, .stim table.stack tr, .stim table.stack th, .stim table.stack td{display:block;width:auto}
  .stim table.stack thead{display:none}
  .stim table.stack tr{border:1px solid rgba(74,18,24,.3);border-radius:8px;margin:0 0 .45rem;padding:.3rem .5rem;background:#fff}
  .stim table.stack th, .stim table.stack td{border:0;padding:.12rem 0;background:none}
  .stim table.stack th[data-label]::before, .stim table.stack td[data-label]::before{content:attr(data-label) " ";font-weight:700;color:var(--burgundy);font-family:'Atkinson Hyperlegible',system-ui,sans-serif}
  .stim table.stack td.empty{background:rgba(242,194,48,.25);text-align:left;padding:.12rem .3rem;border-radius:4px}
}

/* Cartoons in the Social Studies drills (I.20, I.21): to merge into ss.css.
   A real cartoon from the Library of Congress, shown inside a .stim box above its plain description. */
figure.cartoon{margin:.2rem auto .6rem;padding:0;text-align:center;max-width:100%}
figure.cartoon a{display:inline-block;max-width:100%;line-height:0}
figure.cartoon img{display:block;margin:0 auto;max-width:100%;height:auto;max-height:70vh;border:1px solid rgba(42,26,22,.35);border-radius:4px;background:#fff}
figure.cartoon figcaption{font-size:.8rem;line-height:1.35;color:#5b4a45;margin-top:.35rem;text-align:center}
.stim figure.cartoon + .src{margin-top:.2rem}
@media print{figure.cartoon img{max-height:9cm;border-color:#999}figure.cartoon figcaption{color:#333}}