@charset "UTF-8";
:root{--ink:#1b2d52;--muted:#60708a;--blue:#285bdb;--line:#e7edf5;--page:#f5f8ff;--font:"Leelawadee UI","Tahoma",system-ui,sans-serif;font-family:var(--font);color:var(--ink);background:var(--page);font-size:16px;color-scheme:light}
*{box-sizing:border-box}body{margin:0}a{color:inherit}button,summary{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a,button,summary{touch-action:manipulation}:focus-visible{outline:3px solid #244ecd;outline-offset:5px}button{cursor:pointer}[hidden]{display:none!important}
.skip{position:fixed;top:-100px;left:20px;background:var(--ink);color:white;padding:14px;z-index:9}.skip:focus{top:12px}.page{max-width:1440px;margin:auto;padding:0 56px}.site-header{height:110px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e3e9f2;gap:24px}.brand{display:flex;align-items:center;gap:17px;text-decoration:none}.brand img{width:84px;height:72px;object-fit:contain}.brand-text{font-family:system-ui,sans-serif;font-weight:850;letter-spacing:1.2px;font-size:21px}.brand-text>span{color:var(--blue)}.brand-text small{display:block;font-family:var(--font);font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:4px}.school-tag{font-size:14px;border:1px solid #dce4f0;background:white;padding:10px 16px;border-radius:40px;white-space:nowrap}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2ba288;margin-right:6px}
.cover{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(520px,1.3fr);gap:54px;align-items:center;padding:48px 0 35px;min-height:calc(100svh - 178px)}.eyebrow{font-family:system-ui,sans-serif;font-size:12px;font-weight:750;letter-spacing:2.2px;color:#4f6db0}.welcome{align-self:center}.welcome h1{font-size:clamp(34px,3.1vw,45px);font-weight:750;line-height:1.5;letter-spacing:-1.4px;margin:13px 0 12px}.welcome h1 span{color:var(--blue)}.welcome-copy{color:var(--muted);font-size:17px;line-height:1.8;margin:0}.mascot-wrap{position:relative;margin-top:12px;max-width:440px}.mascots{display:block;width:100%;height:auto;mix-blend-mode:multiply}.hello-note{position:absolute;right:10px;top:8%;transform:rotate(9deg);font-family:system-ui,sans-serif;background:#ffdc68;padding:8px 16px;border:2px solid var(--ink);border-radius:12px;font-size:17px;font-weight:800;z-index:1;box-shadow:3px 3px 0 var(--ink)}.hello-note span{font-size:20px}.mascot-caption{display:block;font-family:system-ui,sans-serif;color:#77859b;text-align:center;font-size:12px;letter-spacing:1px;margin-top:-5px}
.class-picker{align-self:center}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px}.section-heading h2{font-size:26px;line-height:1.4;letter-spacing:-.6px;margin:9px 0 0}.class-count{font-size:13px;color:#6b7c94;white-space:nowrap}.grade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.grade-card{--accent:#226958;--tint:#e8f7f0;--border:#cde9df;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:178px;padding:24px 22px 18px;text-decoration:none;background:var(--tint);border:1.5px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:0 4px 0 var(--border);transition:transform .18s,box-shadow .18s}.grade-card:hover{transform:translateY(-4px);box-shadow:0 8px 0 var(--border)}.grade-card:active{transform:translateY(1px);box-shadow:0 2px 0 var(--border)}.grade-card .mathayom{font-size:15px;color:var(--accent);font-weight:600;position:relative;z-index:1}.grade-card .grade-name{display:block;font-size:37px;line-height:1.3;font-weight:800;letter-spacing:-1px;margin:6px 0 16px;color:var(--accent)}.grade-card .grade-meta{font-size:13px;color:var(--accent);opacity:.95;margin-top:auto}.grade-number{position:absolute;top:-16px;right:8px;font-family:system-ui,sans-serif;font-size:156px;line-height:1.4;font-weight:900;color:var(--accent);opacity:.08;z-index:-1}.arrow{position:absolute;right:18px;bottom:17px;width:32px;height:32px;background:white;color:var(--accent);border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;font-size:20px}.grade-2{--accent:#976008;--tint:#fff5d9;--border:#f0dfac}.grade-3{--accent:#275cb3;--tint:#e9f1ff;--border:#cdddf5}.grade-4{--accent:#a64b32;--tint:#fff0e9;--border:#f1d5c7}.grade-5{--accent:#7046a5;--tint:#f0eaff;--border:#ddcff4}.grade-6{--accent:#286e86;--tint:#e3f5fa;--border:#c4e5ef}.cover-note{font-size:12px;line-height:1.65;color:#758199;margin:22px 0 0;text-align:center}.cover-note span{color:#d59527;margin-right:5px}
footer{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:68px;border-top:1px solid #e3e9f2;font-size:13px;color:#718097}footer a{text-decoration:none}footer strong{font-family:system-ui,sans-serif;color:#3d4e6a;font-weight:650;margin-left:9px}.footer-dot{padding:0 9px;color:#aab5c6}
.grade-view{max-width:1040px;margin:auto;padding:30px 0 56px;min-height:calc(100svh - 178px)}.back-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:15px;color:#516782;padding:9px 0;margin-bottom:18px}.back-link:hover{color:var(--blue)}.grade-banner{display:flex;align-items:center;justify-content:space-between;background:#e9f1ff;border:1px solid #d2e0f8;border-radius:24px;padding:25px 36px;gap:24px}.grade-banner h1{font-size:35px;line-height:1.4;letter-spacing:-1px;margin:10px 0}.grade-banner p{color:#536a8a;font-size:15px;line-height:1.7;margin:0}.grade-banner img{object-fit:contain;mix-blend-mode:multiply;max-width:25%;height:auto}.lesson-notice{display:flex;align-items:center;gap:14px;background:#fff9e9;border:1px solid #f3e6c4;color:#775c29;border-radius:14px;padding:12px 18px;margin:23px 0;font-size:14px;line-height:1.6}.lesson-notice p{margin:0}.notice-symbol{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1.5px solid #9b7840;border-radius:50%;font-family:serif;font-weight:bold}.lesson-list{display:grid;gap:18px}.package{border:1px solid var(--line);border-radius:20px;background:white;overflow:hidden}.package-heading{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line)}.package-no{font-family:system-ui,sans-serif;font-weight:800;color:#426bc4;background:#edf3ff;padding:9px 12px;border-radius:11px;font-size:15px}.package h2{font-size:19px;margin:0}.package-heading p{margin:4px 0 0;color:var(--muted);font-size:13px}.topics{padding:0 24px}.topic{border-bottom:1px solid #eef1f7}.topic:last-child{border-bottom:0}.topic summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 0;font-size:16px;font-weight:600;line-height:1.5}.topic summary::-webkit-details-marker{display:none}.topic summary::after{content:'+';font-family:system-ui;font-size:22px;font-weight:400;color:#6d85b4;flex:none}.topic[open] summary::after{content:'−'}.topic ul{margin:0;padding:0 0 19px 22px;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:9px;color:#5b6b82;font-size:14px;line-height:1.6}.empty-note{color:var(--muted);padding:15px 0}.catalog-error{padding:24px;background:#fff0eb;border:1px solid #ebc7bd;border-radius:16px;line-height:1.8}
@media(min-width:1400px){.cover{gap:80px}.grade-card{min-height:190px}.mascot-wrap{max-width:420px}}
@media(max-width:1100px){.page{padding:0 30px}.cover{gap:30px;grid-template-columns:minmax(240px,.8fr) minmax(430px,1.2fr)}.grade-card{min-height:170px;padding:20px 18px}.welcome h1{font-size:34px}.section-heading h2{font-size:23px}.class-count{display:none}}
@media(max-width:800px){.page{padding:0 22px}.site-header{height:94px}.brand-text{font-size:17px}.brand-text small{font-size:12px}.brand img{width:65px;height:58px}.school-tag{font-size:12px;padding:8px 10px}.cover{grid-template-columns:1fr;gap:25px;min-height:auto;padding-top:28px}.welcome{display:grid;grid-template-columns:1fr 210px;column-gap:8px;align-items:center;position:relative}.welcome>.eyebrow{grid-column:1}.welcome h1{grid-column:1;margin:9px 0;font-size:30px;line-height:1.4}.welcome-copy{grid-column:1;font-size:15px}.welcome-copy br{display:none}.mascot-wrap{grid-column:2;grid-row:1/5;width:210px;margin:0}.hello-note{font-size:12px;padding:4px 8px;top:0;right:0;border-width:1px;box-shadow:2px 2px 0 var(--ink)}.hello-note span{font-size:14px}.mascot-caption{display:none}.section-heading{margin:0 0 20px}.section-heading h2{font-size:24px}.grade-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.grade-card{min-height:155px;padding:18px 15px}.grade-card .mathayom{font-size:13px}.grade-card .grade-name{font-size:33px;margin:7px 0 14px}.grade-card .grade-meta{font-size:12px}.grade-number{font-size:140px}.arrow{width:25px;height:25px;font-size:17px;right:12px;bottom:13px}.grade-banner{padding:23px}.grade-banner h1{font-size:29px}.topic ul{grid-template-columns:1fr}footer{font-size:12px}.cover-note{font-size:12px}}
@media(max-width:540px){.page{padding:0 17px}.site-header{height:82px;gap:8px}.brand{gap:8px}.brand img{width:54px;height:52px}.brand-text{font-size:15px;letter-spacing:.6px}.brand-text small{font-size:12px}.school-tag{padding:7px 9px;font-size:12px;max-width:110px;white-space:normal;text-align:center}.status-dot{display:none}.welcome{grid-template-columns:1fr 140px}.mascot-wrap{width:150px;margin-left:-6px}.welcome h1{font-size:26px;letter-spacing:-.7px}.welcome-copy{font-size:14px;line-height:1.65}.eyebrow{font-size:11px;letter-spacing:1.7px}.hello-note{top:1%;right:3px}.cover{padding-top:27px;gap:30px}.section-heading h2{font-size:23px}.section-heading .eyebrow{font-size:11px}.grade-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grade-card{min-height:151px;border-radius:18px}.grade-card .grade-name{font-size:32px}.grade-number{font-size:135px}.grade-card .grade-meta{font-size:12px}.cover-note{margin-top:22px;line-height:1.7}.cover{padding-bottom:25px}.grade-banner{gap:6px;padding:22px 18px}.grade-banner h1{font-size:26px}.grade-banner img{max-width:29%}.grade-banner p{font-size:14px}.package-heading{padding:18px}.topics{padding:0 18px}.lesson-notice{font-size:13px;padding:13px}.topic summary{font-size:15px}.grade-view{padding-top:20px}footer{align-items:center;text-align:center;flex-direction:column;padding:18px 0;gap:8px;font-size:12px}.footer-dot{padding:0 5px}}
.start-topic{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;margin:0 0 18px;background:var(--blue);color:#fff;border-radius:10px;text-decoration:none;font-size:15px;font-weight:650}.start-topic:hover{background:#1748bf}.lesson-link{color:#244da7;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:5px 0;line-height:1.7}.lesson-link:hover{color:#143378}.unavailable-lesson{color:#81756b;font-size:13px}
/* A shared, outlined rainbow wordmark on sign-in, learning and admin pages. */
.brand-title{display:block;font-weight:900;letter-spacing:.055em;line-height:1.45}
.brand-word{display:inline-block;white-space:nowrap}
.brand-word>span{display:inline-block;color:#ff8266;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 0 #000}
.brand-word>span:nth-child(5n+2){color:#ffd458}
.brand-word>span:nth-child(5n+3){color:#63d6a0}
.brand-word>span:nth-child(5n+4){color:#65c9ff}
.brand-word>span:nth-child(5n){color:#c19aff}
.brand-word:nth-child(2)>span:nth-child(1){color:#65c9ff}
.brand-word:nth-child(2)>span:nth-child(2){color:#c19aff}
.brand-word:nth-child(2)>span:nth-child(3){color:#ff91b5}
.brand-word:nth-child(2)>span:nth-child(4){color:#ffd458}
@supports (-webkit-text-stroke:1px #000) and (paint-order:stroke fill){
  .brand-word>span{-webkit-text-stroke:.09em #000;paint-order:stroke fill;text-shadow:0 2px 0 #fff,0 3px 0 #00000026}
}
@media(forced-colors:active){.brand-word>span{color:CanvasText!important;-webkit-text-stroke:0;text-shadow:none}}
/* Six classmates, with stars that respond to pointer, keyboard and touch. */
.grade-card{min-height:200px}
.grade-card .mathayom,.grade-card .grade-name,.grade-card .grade-meta{position:relative;z-index:2;width:max-content;max-width:100%}
.grade-card .grade-meta{padding-right:32px}
.grade-number{opacity:.045}
.grade-mascot{position:absolute;right:10px;bottom:39px;width:44%;max-width:118px;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border:2px solid #fff;border-radius:18px;box-shadow:0 3px 8px #1b2d5210;pointer-events:none;user-select:none;z-index:1;transform-origin:center bottom;transition:transform .28s ease}
.grade-card .arrow{z-index:3}
.grade-sparkles{position:absolute;inset:0;z-index:4;pointer-events:none;user-select:none;overflow:hidden;border-radius:inherit}
.sparkle{position:absolute;display:block;font-family:system-ui,sans-serif;font-size:22px;line-height:1;color:#f4b827;text-shadow:0 1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff;opacity:0;transform:scale(.3) rotate(-20deg)}
.sparkle-1{left:9%;top:53%;--delay:0s;--tilt:15deg}
.sparkle-2{right:12%;top:15%;--delay:.16s;--tilt:-14deg;font-size:27px;color:#e6a019}
.sparkle-3{right:4%;top:55%;--delay:.32s;--tilt:22deg;font-size:17px}
.sparkle-4{left:43%;top:37%;--delay:.1s;--tilt:-18deg;font-size:16px;color:#fff4b2}
.sparkle-5{left:42%;bottom:12%;--delay:.26s;--tilt:16deg;font-size:20px}
.sparkle-6{right:33%;top:8%;--delay:.42s;--tilt:-12deg;font-size:15px}
@keyframes grade-star-pop{0%{opacity:0;transform:translateY(7px) scale(.25) rotate(-20deg)}35%{opacity:1;transform:translateY(-3px) scale(1.12) rotate(var(--tilt))}70%{opacity:1;transform:translateY(-7px) scale(.9) rotate(0deg)}100%{opacity:0;transform:translateY(-15px) scale(.3) rotate(20deg)}}
@media(hover:hover) and (pointer:fine){
  .grade-card:hover .sparkle{animation:grade-star-pop 1.9s var(--delay) infinite ease-in-out}
  .grade-card:hover .grade-mascot{transform:translateY(-4px) rotate(-3deg) scale(1.04)}
}
.grade-card:focus-visible .sparkle{animation:grade-star-pop 1.9s var(--delay) infinite ease-in-out}
.grade-card:focus-visible .grade-mascot{transform:translateY(-4px) rotate(-3deg) scale(1.04)}
.grade-card:active .sparkle{opacity:1;transform:scale(1)}
@media(max-width:1100px){.grade-card{min-height:190px}}
@media(max-width:800px){.grade-card{min-height:180px}.grade-mascot{right:8px;bottom:37px;max-width:95px;border-radius:14px}.sparkle{font-size:18px}.sparkle-2{font-size:23px}.sparkle-3,.sparkle-4,.sparkle-6{font-size:14px}}
@media(max-width:360px){.grade-card{padding-left:12px;padding-right:12px}.grade-card .mathayom{font-size:12px}.grade-card .grade-meta{font-size:11px;padding-right:26px}.grade-mascot{width:43%;right:6px;border-radius:12px}}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
  .grade-card .sparkle{animation:none!important}
  .grade-card:hover,.grade-card:active,.grade-card:focus-visible .grade-mascot,.grade-card:hover .grade-mascot{transform:none}
  .grade-card:focus-visible .sparkle{opacity:1;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){.grade-card:hover .sparkle{opacity:1;transform:scale(1)}}

/* Cartoon lesson menus reuse the six existing classmates and native details. */
.topics.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:22px;align-items:start}
.lesson-card{--lesson-accent:#226958;--lesson-tint:#e8f7f0;--lesson-border:#b9dfd0;min-width:0;border:1.5px solid var(--lesson-border);border-radius:20px;background:#fff;box-shadow:0 4px 0 var(--lesson-border);transition:box-shadow .22s ease,border-color .22s ease}
.lesson-card:last-child{border-bottom:1.5px solid var(--lesson-border)}
.lesson-color-2{--lesson-accent:#805109;--lesson-tint:#fff4cf;--lesson-border:#edda9b}
.lesson-color-3{--lesson-accent:#275cb3;--lesson-tint:#e9f1ff;--lesson-border:#c5d7f5}
.lesson-color-4{--lesson-accent:#984329;--lesson-tint:#fff0e9;--lesson-border:#efcaba}
.lesson-color-5{--lesson-accent:#7046a5;--lesson-tint:#f0eaff;--lesson-border:#d9c6f2}
.lesson-color-6{--lesson-accent:#286e86;--lesson-tint:#e3f5fa;--lesson-border:#b8e0ec}
.lesson-card>summary.lesson-choice{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:0;align-items:stretch;justify-content:stretch;border-radius:18px;position:relative;isolation:isolate;transition:transform .22s ease;line-height:1.5}
.lesson-card>summary::after{display:none}
.lesson-choice:focus-visible{outline:3px solid var(--lesson-accent);outline-offset:4px}
.topic-art{position:relative;display:flex;align-items:center;justify-content:center;height:154px;border-radius:18px 18px 0 0;background:var(--lesson-tint);pointer-events:none;user-select:none;overflow:hidden}
.topic-number{position:absolute;top:13px;left:14px;display:grid;place-items:center;min-width:32px;height:32px;padding:0 6px;background:#fff;border:1px solid var(--lesson-border);border-radius:11px;color:var(--lesson-accent);font-family:system-ui,sans-serif;font-size:14px;font-weight:800}
.topic-mascot{width:126px;height:126px;object-fit:contain;background:#fff;border:4px solid #fff;border-radius:24px;box-shadow:0 5px 12px #1b2d5214;transform:rotate(-2deg);transform-origin:center bottom;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.topic-sparkles{position:absolute;inset:0;pointer-events:none;user-select:none;overflow:hidden;z-index:2}
.topic-summary-copy{display:block;padding:16px 17px 17px;min-width:0}
.topic-name{display:block;min-height:3em;font-size:1.0625rem;font-weight:700;line-height:1.5;overflow-wrap:anywhere;color:var(--ink)}
.topic-choice-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:.875rem;font-weight:500;color:var(--lesson-accent)}
.topic-cue{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:4px 10px;border-radius:30px;background:var(--lesson-tint);font-weight:700;white-space:nowrap}
.cue-open{display:none}.lesson-card[open] .cue-open{display:inline}.lesson-card[open] .cue-closed{display:none}
.lesson-card[open]{border-color:var(--lesson-accent);box-shadow:0 4px 0 var(--lesson-accent)}
.topic-body{padding:0 14px 15px;min-width:0}
.topic-body .start-topic{display:flex;justify-content:center;width:100%;margin:0 0 12px;min-height:48px;font-size:1rem;line-height:1.5;text-align:center;background:var(--lesson-accent);box-shadow:0 3px 0 var(--lesson-border);transition:transform .18s ease}
.topic-body .start-topic:hover,.topic-body .start-topic:focus-visible{transform:translateY(-2px);filter:brightness(.95)}
.topic-body .topic-items{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:0;list-style:none;font-size:1rem;line-height:1.6}
.topic-items>li{min-width:0}
.topic-body .lesson-link{display:flex;align-items:center;gap:9px;position:relative;min-height:56px;width:100%;padding:9px;border:1px solid var(--lesson-border);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;font-size:1rem;line-height:1.6;transition:background .18s ease,transform .18s ease}
.lesson-link-mascot{display:block;flex:none;width:36px;height:36px;border:1px solid var(--lesson-border);border-radius:10px;object-fit:contain;pointer-events:none;user-select:none;transition:transform .22s ease}
.lesson-link-title{min-width:0;overflow-wrap:anywhere;flex:1}
.lesson-link-star{flex:none;color:#b87500;font-size:22px;line-height:1;opacity:0;transform:scale(.4) rotate(-25deg);transition:opacity .18s ease,transform .22s ease;pointer-events:none}
.topic-body .lesson-link:hover,.topic-body .lesson-link:focus-visible{background:var(--lesson-tint);transform:translateY(-2px);color:var(--lesson-accent)}
.lesson-link:hover .lesson-link-mascot,.lesson-link:focus-visible .lesson-link-mascot{transform:rotate(-6deg) scale(1.08)}
.lesson-link:hover .lesson-link-star,.lesson-link:focus-visible .lesson-link-star,.lesson-link:active .lesson-link-star{opacity:1;transform:scale(1) rotate(12deg)}
.topic-body .unavailable-lesson{display:block;padding:10px 12px;background:#f6f6f8;border-radius:10px;font-size:.875rem;line-height:1.7}
.is-unavailable .topic-meta{color:#8b4932}.topic-body .empty-note{font-size:.9375rem;line-height:1.7;margin:0 0 10px;padding:8px}
@media(hover:hover) and (pointer:fine){
  .lesson-choice:hover{transform:translateY(-4px)}
  .lesson-choice:hover .topic-mascot{transform:translateY(-4px) rotate(4deg) scale(1.05)}
  .lesson-choice:hover .sparkle{animation:grade-star-pop 1.9s var(--delay) infinite ease-in-out}
}
.lesson-choice:focus-visible .topic-mascot{transform:translateY(-4px) rotate(4deg) scale(1.05)}
.lesson-choice:focus-visible .sparkle{animation:grade-star-pop 1.9s var(--delay) infinite ease-in-out}
.lesson-choice:active .sparkle{opacity:1;transform:scale(1)}
.lesson-choice:active{transform:translateY(1px)}
@media(max-width:900px){.topics.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:18px}}
@media(max-width:560px){
  .topics.topic-grid{grid-template-columns:minmax(0,1fr);padding:14px;gap:16px}
  .lesson-card>summary.lesson-choice{grid-template-columns:110px minmax(0,1fr)}
  .topic-art{height:100%;min-height:158px;border-radius:18px 0 0 18px}
  .topic-mascot{width:90px;height:90px;border-radius:18px;border-width:3px;margin-top:13px}
  .topic-number{top:8px;left:8px;min-width:26px;height:26px;font-size:12px;border-radius:8px}
  .topic-summary-copy{padding:17px 13px}.topic-name{min-height:0;font-size:1rem}
  .topic-choice-footer{margin-top:12px;gap:7px;font-size:.875rem}
  .lesson-card[open] .topic-art{border-radius:18px 0 0 0}
  .topic-body{padding:3px 12px 13px}
}
@media(prefers-reduced-motion:reduce){
  .lesson-card .sparkle{animation:none!important}
  .lesson-choice:hover,.lesson-choice:active,.lesson-choice:focus-visible .topic-mascot,.lesson-choice:hover .topic-mascot,.topic-body .lesson-link:hover,.topic-body .lesson-link:focus-visible,.lesson-link:hover .lesson-link-mascot,.lesson-link:focus-visible .lesson-link-mascot,.topic-body .start-topic:hover,.topic-body .start-topic:focus-visible{transform:none}
  .lesson-choice:hover .sparkle,.lesson-choice:focus-visible .sparkle{opacity:1;transform:none}
}
@media(forced-colors:active){.lesson-card,.topic-art,.topic-mascot,.topic-cue,.topic-body .lesson-link{border:1px solid CanvasText}.topic-name,.topic-meta{color:CanvasText}}