/* Drill v1: handwritten-activity-book feel, no gradients or advertisement patterns. */
.drill-entry{width:100%;display:flex;align-items:center;gap:14px;min-height:77px;border:2px solid #26344a;border-bottom:5px solid #26344a;background:#fff0a8;color:#26344a;border-radius:15px;padding:11px 16px;text-align:left;font:inherit;margin-top:17px;cursor:pointer}
.drill-entry:active{transform:translateY(3px);border-bottom-width:2px}.drill-entry-icon{background:#ff6655;border:2px solid #26344a;color:white;border-radius:10px;padding:10px;font-size:19px;font-weight:1000;letter-spacing:.1em;white-space:nowrap}
.drill-entry strong,.drill-entry small{display:block}.drill-entry strong{font-size:14px;line-height:1.5}.drill-entry small{font-size:11px;color:#5c6c80;margin-top:3px}.drill-entry>span:last-child{margin-left:auto;font-weight:1000;font-size:24px}
.drill-page{border:3px solid #26344a;border-radius:23px;padding:25px;box-shadow:5px 6px 0 #26344a;background:#fffef7;margin:13px 6px 22px 0;color:#26344a}
.drill-heading{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:13px 5px 20px;border-bottom:3px dashed #ffe073}
.drill-heading h1{font-size:clamp(27px,6vw,39px);font-weight:1000;letter-spacing:-.03em;line-height:1.3;margin:5px 0 7px;color:#26344a}.drill-heading p{font-size:13px;line-height:1.8;font-weight:700;color:#526277;margin:0}.drill-eyebrow{background:#ffdf68;display:inline-block;border:2px solid #26344a;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:900}
.drill-mascot{width:145px;height:155px;object-fit:contain;transform:rotate(7deg)}
.drill-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:21px 0 17px}
.drill-mode{display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-height:155px;padding:17px 20px;border:2px solid #26344a;border-bottom:5px solid #26344a;border-radius:18px;font:inherit;font-weight:900;text-align:left;cursor:pointer;color:#26344a;background:#ffdf68}.drill-mode.blue{background:#85c7ff}.drill-mode:active{border-bottom-width:2px;transform:translateY(3px)}.drill-mode strong{font-size:25px}.drill-mode>span:last-child{font-size:12px}
.drill-mode-symbol{font-size:30px;display:grid;place-items:center;width:48px;height:48px;background:#fff;border:2px solid #26344a;border-radius:12px}
.drill-note{font-size:12px;line-height:1.75;color:#526277;font-weight:800}.drill-history{display:flex;gap:9px;align-items:center;flex-wrap:wrap;border-top:2px dashed #e5e2d3;margin-top:20px;padding-top:16px;font-size:12px;color:#546981}.drill-history strong{font-size:13px;color:#26344a}.drill-history span{background:#f5f7f8;padding:5px 9px;border-radius:6px}
.drill-question-top{display:flex;justify-content:space-between;font-size:13px;font-weight:1000;gap:8px}.drill-question-top span:last-child{background:#dceeff;border-radius:8px;padding:5px 9px}
.drill-steps{display:flex;gap:8px;margin:13px 0 15px}.drill-steps span{height:11px;flex:1;background:#e4e9ed;border-radius:4px;border:1px solid #cbd8e4}.drill-steps .finished{background:#46c68b;border-color:#189463}.drill-steps .current{background:#ffdf68;border-color:#cba73d}
.drill-question{text-align:center;background:#e9f5ff;border:2px solid #26344a;border-radius:19px;padding:34px 15px 24px;margin-bottom:17px}.drill-expression{font-size:clamp(45px,10vw,83px);font-weight:1000;letter-spacing:-.035em;line-height:1.35}.drill-expression>span{color:#247ed3}.drill-expression strong{color:#ff6655}.drill-question p{font-size:13px;font-weight:900;margin:8px 0 0}
.drill-option-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.drill-option{min-height:88px;background:#ffdf68;border:2px solid #26344a;border-bottom:6px solid #26344a;border-radius:16px;font:inherit;font-size:42px;font-weight:1000;color:#26344a;cursor:pointer}.drill-option:nth-child(2){background:#9de1bb}.drill-option:nth-child(3){background:#ffb3a7}.drill-option:active{transform:translateY(4px);border-bottom-width:2px}.drill-answer-feedback{text-align:center;border:2px solid #30946b;background:#dbf8e6;padding:15px;border-radius:13px;font-size:23px;font-weight:1000;color:#196b4a}.drill-answer-feedback span{font-size:18px}.drill-go{min-height:49px;margin:18px auto 0;display:block;width:100%;max-width:450px;font-size:15px!important;font-weight:1000}
.drill-encourage{text-align:center;background:#fff0b9;padding:10px;font-weight:900;border-radius:10px;font-size:14px}.drill-small{color:#65788e;text-align:center;font-size:12px;font-weight:800;margin-top:17px}.drill-quit{margin-top:18px;color:#586e83;background:transparent;border:0;text-decoration:underline;font-weight:800;cursor:pointer}.drill-result{text-align:center}.drill-result-mascot{width:125px;height:133px;transform:rotate(-6deg)}.drill-result h1{font-size:34px;margin:0 0 5px;font-weight:1000}.drill-result>p{font-weight:900}.drill-result-stats{display:flex;flex-direction:column;gap:12px;padding:17px;background:#f1f9ff;border-radius:14px;text-align:left;max-width:450px;margin:15px auto;font-size:15px}.drill-result-stats>span{display:flex;justify-content:space-between;gap:6px}
.drill-page button:focus-visible,.drill-entry:focus-visible{outline:4px solid #267bd4;outline-offset:4px}
@media(max-width:570px){.drill-page{padding:16px;margin-right:4px}.drill-heading h1{font-size:30px}.drill-mascot{width:105px;height:115px}.drill-heading p{font-size:11px}.drill-choices{gap:9px}.drill-mode{padding:14px;min-height:145px}.drill-mode strong{font-size:21px}.drill-expression{font-size:52px}.drill-question{padding:25px 10px 17px}.drill-option{font-size:36px;min-height:74px}}
@media(prefers-reduced-motion: reduce){.drill-mode:active,.drill-entry:active,.drill-option:active{transform:none}}
@media(max-width:570px){.drill-heading h1 span{display:block}}

/* Grade courses and rounded animal companions */
.drill-mascot{width:185px;height:160px;transform:none;flex-shrink:0}
.drill-result-mascot{width:190px;height:155px;object-fit:contain;transform:none}
.drill-course{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:16px 0 0}
.drill-course-caption{display:block;font-size:11px;font-weight:800;color:#627187;margin-bottom:5px}
.drill-course strong{font-size:19px;line-height:1.6}
.drill-course-details{max-width:310px}
.drill-course-details summary{cursor:pointer;border:2px solid #26344a;border-radius:10px;background:white;padding:8px 12px;font-size:12px;font-weight:900;min-height:42px}
.drill-course-controls{padding:12px;border:2px solid #d8e4ed;border-radius:10px;margin-top:8px;background:#f0f7ff}
.drill-course-controls label{display:block;font-size:12px;font-weight:900;margin-bottom:8px}
.drill-course-controls select{width:100%;min-width:0;max-width:100%;font-weight:800}
.drill-course-controls p{font-size:11px;line-height:1.8;color:#526277;margin:10px 0}
.drill-choices{align-items:stretch}
.drill-mode:only-child{grid-column:1 / -1}
.drill-mode{min-width:0;gap:8px}
.drill-mode strong{font-size:23px;line-height:1.35}
.drill-mode-description{font-size:12px;font-weight:700;line-height:1.7}
.drill-mode-cta{margin-top:auto;padding-top:3px}
.drill-mode.green{background:#a2dfb6}
.drill-mode.pink{background:#ffd0cb}
.drill-mode.purple{background:#d7d0ff}
.drill-mode.orange{background:#ffcc93}
.drill-expression,.drill-feedback-answer{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.22em}
.drill-expression{font-size:clamp(36px,8vw,72px)}
.drill-expression strong{display:inline-flex;align-items:center}
.math-fraction{display:inline-flex;flex-direction:column;align-items:stretch;justify-content:center;vertical-align:middle;line-height:1.1;font-variant-numeric:tabular-nums;text-align:center;min-width:1em;margin:.08em}
.math-fraction>span{padding:0 .12em}
.math-fraction>span:first-child{border-bottom:.055em solid currentColor;padding-bottom:.08em}
.math-fraction>span:last-child{padding-top:.08em}
.math-number{font-variant-numeric:tabular-nums}
.drill-option{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 4px;font-size:clamp(25px,6vw,42px);min-width:0}
.drill-option .math-fraction{font-size:.9em}
.drill-feedback-answer{font-size:clamp(18px,4.5vw,28px)!important;margin-top:8px}
.drill-feedback-answer .math-fraction>span{font-size:inherit}
.drill-question .drill-question-hint{font-size:12px;color:#526277;margin-top:12px}
.drill-pictures{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 auto 18px;max-width:580px}
.picture-pile{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;max-width:100%}
.picture-object{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:45px;font-size:45px;line-height:1.2}
.picture-object.removed{opacity:.38}
.picture-object.removed::after{content:"";position:absolute;left:6%;right:6%;height:3px;background:#d63e35;transform:rotate(-43deg)}
.picture-operator{font-size:37px;font-weight:1000}
.picture-question .drill-expression{font-size:clamp(32px,7vw,52px)}
.picture-question>p:first-of-type{font-size:19px}
.drill-count-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;max-width:100px;margin:7px auto 0}
.drill-count-dots i{display:block;width:9px;height:9px;background:currentColor;border-radius:50%}
.drill-course-details summary:focus-visible,.drill-course-controls select:focus-visible{outline:4px solid #267bd4;outline-offset:4px}
@media(max-width:570px){
  .drill-mascot{width:110px;height:115px}
  .drill-course{grid-template-columns:minmax(0,1fr)}
  .drill-course strong{font-size:17px}
  .drill-course-details{max-width:none}
  .drill-course-details summary{width:max-content;max-width:100%}
  .drill-choices{grid-template-columns:minmax(0,1fr)}
  .drill-mode{display:grid;grid-template-columns:45px minmax(0,1fr);column-gap:11px;row-gap:4px;min-height:118px;padding:14px}
  .drill-mode:only-child{grid-column:auto}
  .drill-mode-symbol{grid-row:1 / 4;align-self:center;width:43px;height:43px;font-size:26px}
  .drill-mode strong{font-size:21px}
  .drill-mode-description,.drill-mode-cta{grid-column:2}
  .drill-expression{font-size:clamp(27px,7.8vw,45px)}
  .drill-option-list{gap:8px}
  .drill-option{font-size:clamp(23px,6.6vw,36px)}
  .drill-question-top{font-size:11px;align-items:center}
  .drill-question-top>span:last-child{text-align:right;max-width:68%}
  .drill-pictures{gap:8px}
  .picture-pile{gap:6px}
  .picture-object{font-size:35px;min-width:35px}
  .drill-count-dots{max-width:65px;gap:3px}
  .drill-count-dots i{width:7px;height:7px}
}
