#top-down-course{--paper:oklch(98% .009 88);--ink:oklch(26% .024 65);--muted:oklch(47% .022 65);--line:oklch(85% .018 80);--honey:oklch(84% .12 84);--honey-light:oklch(96% .035 86);--green:oklch(35% .047 162);--green-light:oklch(94% .03 153);--blue:oklch(49% .17 263);--serif:'Spectral',Georgia,serif;--sans:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);font:16px/1.6 var(--sans);background:var(--paper)}
#top-down-course,#top-down-course *{box-sizing:border-box}
#top-down-course [hidden]{display:none!important}
#top-down-course .course-main{max-width:1200px;margin:auto;padding:38px 40px 48px}
#top-down-course p,#top-down-course li,#top-down-course dd{font-size:var(--body-size,18px);line-height:var(--body-lh,1.65);color:var(--body-ink,var(--ink));max-width:72ch}
#top-down-course p{margin:0 0 18px}
#top-down-course h2{font:400 34px/1.2 var(--serif);letter-spacing:-.5px;margin:0 0 20px;text-wrap:balance}
#top-down-course h3{font:500 24px/1.3 var(--serif);margin:26px 0 14px;text-wrap:balance}
#top-down-course .explainer{max-width:820px;margin:0 auto 48px}
#top-down-course ul,#top-down-course ol{padding-left:24px}
#top-down-course li{margin-bottom:12px}
#top-down-course a{color:var(--green);text-underline-offset:4px}
#top-down-course button,#top-down-course input,#top-down-course textarea{font:inherit;color:inherit;max-width:100%;touch-action:manipulation}
#top-down-course button{min-height:48px;border:1px solid var(--line);padding:12px 18px;border-radius:8px;background:var(--paper);cursor:pointer;text-align:left;line-height:1.4}
#top-down-course button:hover:not(:disabled){background:var(--honey-light);border-color:var(--green)}
#top-down-course button:disabled{opacity:.6;cursor:default}
#top-down-course button.primary{background:var(--honey);color:var(--ink);border-color:var(--honey);font-weight:700;box-shadow:0 3px 0 oklch(67% .1 80)}
#top-down-course button.primary:hover:not(:disabled){background:oklch(80% .13 84)}
#top-down-course button.primary:disabled{box-shadow:none}
#top-down-course button.secondary{background:transparent}
#top-down-course :is(button,a,input,textarea,summary):focus-visible{outline:3px solid var(--blue);outline-offset:4px}
#top-down-course :is(h2,[tabindex='-1']){scroll-margin-top:96px}
#top-down-course :is(h2,[tabindex='-1']):focus{outline:2px solid var(--blue);outline-offset:5px}
#top-down-course #lesson{scroll-margin-top:96px}
#top-down-course .passport{border-block:1px solid var(--line);margin-bottom:12px}
#top-down-course .passport summary{display:flex;justify-content:space-between;gap:12px;min-height:52px;align-items:center;cursor:pointer}
#top-down-course .passport summary::after{content:'+';font-size:24px}
#top-down-course .passport[open] summary::after{content:'−'}
#top-down-course .passport summary strong{font-variant-numeric:tabular-nums}
#top-down-course .passport p,#top-down-course #save-note{font-size:14px;color:var(--muted)}
#top-down-course #stamps{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
#top-down-course #stamps li{flex:1 1 150px;border:1px dashed var(--line);border-radius:8px;padding:14px;font-size:14px;color:var(--muted)}
#top-down-course #stamps li.earned{background:var(--honey);color:var(--ink);border-style:solid}
#top-down-course .chapter-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:26px 0 30px}
#top-down-course .chapter-nav button{display:flex;gap:10px;align-items:center;border:0;border-bottom:2px solid var(--line);border-radius:0;background:transparent;padding:12px 8px}
#top-down-course .chapter-nav span{width:26px;height:26px;flex:0 0 26px;text-align:center;border:1px solid var(--line);border-radius:50%;line-height:24px;font-size:13px}
#top-down-course .chapter-nav [aria-current]{border-bottom-color:var(--green);font-weight:700;color:var(--green)}
#top-down-course .chapter-nav [aria-current] span{background:var(--green);color:var(--paper)}
#top-down-course .chapter-opening{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:36px;align-items:start;margin-bottom:34px}
#top-down-course .chapter-art{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
#top-down-course .chapter-label,#top-down-course .check-label,#top-down-course .activity-label{font-size:14px;font-weight:700;color:var(--green);margin-bottom:12px}
#top-down-course .comparison{border-block:1px solid var(--line);padding:18px 0 0;margin:22px 0}
#top-down-course .experiment{background:var(--honey-light);border:1px solid var(--line);padding:30px;border-radius:12px;max-width:820px;margin:30px auto}
#top-down-course .experiment h3:first-child{margin-top:0}
#top-down-course .ambiguous{max-width:360px;margin:25px auto}
#top-down-course .ambiguous svg{display:block;width:100%;height:auto}
#top-down-course figcaption{font-size:14px;color:var(--muted);margin-top:10px}
#top-down-course label{display:block;font-weight:600;margin:16px 0 9px}
#top-down-course input[type=text],#top-down-course textarea{width:100%;background:var(--paper);border:1px solid var(--muted);border-radius:6px;padding:12px;min-height:48px;font-size:16px;display:block;margin-bottom:20px}
#top-down-course textarea{resize:vertical}
#top-down-course fieldset{border:0;margin:22px 0;padding:0;min-width:0}
#top-down-course legend{font-weight:600}
#top-down-course fieldset label{display:flex;align-items:center;gap:12px;min-height:48px;font-weight:400;margin:0;padding:8px 0;cursor:pointer}
#top-down-course input[type=radio]{width:20px;height:20px;flex:0 0 20px;accent-color:var(--green);margin:0}
#top-down-course .cue{background:var(--green-light);padding:18px;border-radius:8px;margin-top:24px}
#top-down-course .target-text{font:500 30px/1.4 var(--serif);padding:28px 20px;border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow-wrap:anywhere}
#top-down-course .activity-error{color:oklch(40% .11 30);font-size:16px;margin:18px 0 0}
#top-down-course .activity-error:empty{display:none}
#top-down-course dl{margin:24px 0}
#top-down-course dt{font-weight:700;font-size:14px;color:var(--muted)}
#top-down-course dd{margin:3px 0 18px;overflow-wrap:anywhere;white-space:pre-wrap}
#top-down-course .check{border-top:1px solid var(--line);padding:26px 0 12px;max-width:820px;margin:0 auto}
#top-down-course .check h3{margin-top:0}
#top-down-course .choices{display:grid;gap:10px;margin:20px 0}
#top-down-course .choices button{background:oklch(99.5% .004 85);font-size:16px}
#top-down-course .choices button.correct{background:var(--green-light);border-color:var(--green);opacity:1}
#top-down-course .feedback{padding:16px;border-radius:8px}
#top-down-course .feedback:empty{display:none}
#top-down-course .feedback.success{background:var(--green-light)}
#top-down-course .feedback.retry{background:var(--honey-light)}
#top-down-course .next,#top-down-course #finish{display:block;margin:24px auto 14px}
#top-down-course .chapter-gate{font-size:14px;text-align:center;color:var(--muted);margin:12px auto}
#top-down-course .reflection,#top-down-course #completion{max-width:820px;margin:28px auto}
#top-down-course #completion{background:var(--green-light);padding:26px;border-radius:12px}
#top-down-course #completion h3{margin-top:0}
#top-down-course .course-progress{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:32px 0 20px;padding-top:22px;border-top:1px solid var(--line)}
#top-down-course .course-progress label{font-size:14px;font-weight:400;margin:0}
#top-down-course progress{accent-color:var(--green);height:10px;flex:1;min-width:80px;max-width:300px}
#top-down-course #reset{font-size:14px}
#top-down-course #reset-confirm{padding:22px;background:var(--honey-light);margin-top:18px;border-radius:10px}
#top-down-course #reset-confirm button{margin:4px 8px 4px 0}
#top-down-course .faq{max-width:820px;margin:52px auto 0;border-top:1px solid var(--line);padding-top:32px}
@media(max-width:760px){#top-down-course .course-main{padding:26px 20px 36px}#top-down-course .chapter-opening{grid-template-columns:1fr;gap:24px}#top-down-course .chapter-art{max-height:330px}#top-down-course h2{font-size:30px}#top-down-course h3{font-size:23px}#top-down-course .chapter-nav{gap:4px}#top-down-course .chapter-nav button{flex-direction:column;padding:9px 2px;gap:6px;font-size:13px}#top-down-course .passport summary{font-size:14px;flex-wrap:wrap}#top-down-course .experiment{padding:20px}#top-down-course .target-text{font-size:26px;padding:20px 12px}#top-down-course .explainer{margin-bottom:34px}#top-down-course .primary{width:100%;text-align:center}#top-down-course .course-progress{gap:10px}#top-down-course .course-progress label{flex-basis:100%}}
@media(max-width:360px){#top-down-course .course-main{padding-inline:14px}#top-down-course .experiment{padding:16px}#top-down-course .chapter-nav button{font-size:12px}#top-down-course .passport summary::after{display:none}}
@media(prefers-reduced-motion:reduce){#top-down-course,#top-down-course *,#top-down-course *::before,#top-down-course *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}