/* Chapter navigation and a compact, tactile learning path. */
.learning-page{max-width:760px;margin:auto;padding:0 24px 40px;color:#3d4b4e;--learn-color:#58b932;--learn-shade:#399622}
.learning-page *{box-sizing:border-box}
.learning-page a{text-decoration:none}
.learning-page button{font:inherit;cursor:pointer}
.learn-tabs{display:flex;gap:28px;border-bottom:2px solid #e4e9e5;margin-bottom:24px}
.learn-tabs a{padding:17px 2px 13px;font-weight:900;font-size:15px;color:#7b898b;border-bottom:3px solid transparent;margin-bottom:-2px}
.learn-tabs a[aria-current]{color:#2796bf;border-color:#36acd6}
.learn-heading{position:relative;padding:8px 35px 24px;text-align:center}
.learn-heading h1{font-size:26px;line-height:1.2;margin:0 0 12px}
.learn-heading p{font-size:16px;line-height:1.5;color:#7d898b;margin:0}
.learn-close{position:absolute;left:0;top:0;min-width:36px;min-height:44px;font-size:32px;color:#748487}
.learn-unit-banner{display:flex;position:sticky;top:76px;z-index:8;border-radius:19px;background:var(--learn-color);box-shadow:0 5px 0 var(--learn-shade);color:white;overflow:hidden;margin:0 0 26px}
.learn-unit-banner>a{padding:17px 20px;flex:1;min-width:0;color:inherit}
.learn-unit-banner small{font-size:13px;font-weight:900;letter-spacing:.8px;color:#ffffffdc}
.learn-unit-banner h1{font-size:22px;line-height:1.2;margin:5px 0 6px;color:white}
.learn-unit-banner a>span{font-size:12px;font-weight:800;display:flex;align-items:center;gap:4px;color:white}
.learn-unit-banner a>span svg{width:12px;height:12px}
.learn-unit-banner>button{flex:none;background:transparent;border:0;border-left:2px solid #00000013;width:68px;color:white}
.learn-unit-banner>button svg{width:36px;height:36px}
.learn-unit{padding:8px 0 26px;scroll-margin-top:220px}
.learn-unit>h2{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;align-items:center;text-align:center;font-size:17px;font-weight:900;color:#82918f;padding:18px 8px;margin:0 0 8px;border-bottom:2px solid #e9eeea;line-height:1.35}
.learn-unit>h2>span{font-size:11px;letter-spacing:.8px}
.learn-stops{position:relative;padding:20px 0 0;isolation:isolate}
.learn-stop{position:relative;display:flex;flex-direction:column;align-items:center;width:174px;margin:0 auto 36px;transform:translateX(var(--offset));z-index:2}
.learn-node{position:relative;background:none;border:0;padding:10px;width:100px;height:104px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.learn-node-face{width:78px;height:68px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--learn-color);box-shadow:0 8px 0 var(--learn-shade),inset 0 3px 0 #ffffff28;transition:transform .12s,box-shadow .12s}
.learn-node-face svg{width:38px;height:38px;filter:drop-shadow(0 2px 0 #0000000b)}
.learn-node.is-open .learn-node-face svg path{fill:white;stroke:white}
.learn-node.is-locked .learn-node-face{background:#e2e8e5;box-shadow:0 8px 0 #cbd5ce,inset 0 3px 0 #ffffff50}
.learn-node.is-locked svg{opacity:.7;width:33px;height:33px}
.learn-node.is-done .learn-node-face{background:#ffd166;box-shadow:0 8px 0 #dcae42,inset 0 3px 0 #ffffff60}
.learn-node:active .learn-node-face{transform:translateY(5px);box-shadow:0 3px 0 var(--learn-shade)}
.learn-node:focus-visible{outline:3px solid #2aa9d6;outline-offset:6px}
.learn-ring{position:absolute;inset:-2px 0 0;width:100px;height:104px;overflow:visible;pointer-events:none;transform:rotate(-90deg)}
.learn-ring circle{fill:none;stroke:#dfe8dc;stroke-width:5}
.learn-ring circle+circle{stroke:var(--learn-color);stroke-linecap:round}
.learn-node-title{font-size:14px;line-height:1.3;font-weight:800;text-align:center;max-width:160px;margin-top:8px}
.learn-next-label{font-size:10px;letter-spacing:.7px;background:white;border:2px solid #dce7d6;border-bottom-width:4px;border-radius:10px;padding:5px 10px;margin-top:8px;color:var(--learn-shade);font-weight:900}
.learn-path-dog{position:absolute;right:0;top:35%;width:clamp(90px,25%,155px);height:auto;max-height:160px;object-fit:contain;z-index:0;pointer-events:none}
.learn-unit-reward{display:flex;align-items:center;gap:14px;max-width:430px;margin:10px auto 0;padding:16px 14px;border:2px solid #e2e9df;border-bottom-width:5px;border-radius:18px;background:#fff;color:#758779;font-size:13px;font-weight:900}
.learn-unit-reward>svg:first-child{width:48px;height:48px}
.learn-unit-reward>svg:last-child{width:17px;height:17px}
.learn-unit-reward span{flex:1;min-width:0}.learn-unit-reward small{display:block;margin-top:5px;font-size:11px;font-weight:700;color:#8a9690}
.learn-path-end{text-align:center;border-top:2px solid #e5ebe5;padding:32px 12px}.learn-path-end img{height:130px}.learn-path-end h2{font-size:22px;margin:14px 0 22px}
.learn-jump{position:fixed;bottom:calc(var(--safe-bottom,0px) + 102px);right:max(24px,calc((100vw - 750px)/2));width:48px;height:52px;border:2px solid #cbdedc;border-bottom-width:5px;background:#fff;border-radius:15px;font-size:28px!important;font-weight:900!important;color:#24a4cf;z-index:10}
.learn-chapters{display:grid;gap:24px;margin-bottom:30px}
.learn-chapter-card{border:2px solid #e0e6e1;border-bottom-width:6px;border-radius:23px;overflow:hidden;background:white}
.learn-chapter-cover{height:210px;position:relative;display:flex;align-items:center;padding:24px;background:color-mix(in srgb,var(--learn-color) 20%,#fff);overflow:hidden}
.learn-chapter-cover img{position:absolute;right:-7px;bottom:-5px;width:50%;height:180px;object-fit:contain;border-radius:30px;mix-blend-mode:multiply}
.learn-speech{position:relative;z-index:1;max-width:58%;background:#fff;border-radius:18px;padding:16px;font-size:17px;font-weight:800;line-height:1.45;color:#4c6264;box-shadow:0 3px 0 #00000008}
.learn-chapter-info{padding:22px}.learn-chapter-info>div>small{font-size:11px;letter-spacing:.7px;color:var(--learn-shade);font-weight:900}
.learn-chapter-info h2{font-size:24px;line-height:1.25;margin:6px 0 17px}
.learn-meter{height:22px;background:#e6ebe7;border-radius:20px;overflow:hidden;position:relative;width:100%;font-size:12px;font-weight:900;text-align:center}
.learn-meter i{display:block;height:100%;border-radius:inherit;background:var(--learn-color,#69be47);box-shadow:inset 0 5px 0 #ffffff30}
.learn-meter span{position:absolute;inset:0;color:#405740;line-height:22px}
.learn-text-link{display:block;color:#289cc7;font-size:13px;font-weight:900;padding:16px 0;text-align:center;min-height:44px}
.learn-chapter-info>.learn-text-link{text-align:left}
.learn-chapter-info details{border-top:2px solid #edf0ed}.learn-chapter-info summary{padding:12px 0;cursor:pointer;font-size:14px;font-weight:800;color:#7c8b84;min-height:44px}
.learn-unit-link{display:flex;align-items:center;gap:15px;justify-content:space-between;padding:14px 0;border-top:1px solid #e8eee9;color:#526660;font-weight:800;font-size:14px;line-height:1.4;min-height:50px}.learn-unit-link small{color:#85958a;flex:none}.learn-unit-link svg{width:20px;height:20px}
.learning-page>.btn{display:block;width:100%;text-align:center}
.learn-lesson-sheet{text-align:center;padding:4px 8px 12px}.learn-sheet-icon svg{height:62px;width:62px;margin:4px 0 12px}
.learn-lesson-sheet>small{font-size:11px;letter-spacing:.7px;font-weight:900;color:#73a852}.learn-lesson-sheet h2{font-size:25px;line-height:1.2;margin:10px 0}.learn-lesson-sheet p{line-height:1.5;font-size:15px;color:#7d8982}.learn-lesson-sheet .learn-step{color:#4b6258;font-weight:800;font-size:14px}.learn-lesson-sheet>.btn{width:100%;margin:8px 0}
.learn-prereq{display:block;background:#f1f8ee;border:2px solid #dfebd9;border-radius:12px;width:100%;padding:13px;margin:8px 0;font:inherit;color:#507047;font-weight:800;cursor:pointer}
.learn-practice-hero{position:relative;overflow:hidden;background:#26adde;color:white;border-radius:22px;padding:28px 24px;display:flex;align-items:center;min-height:260px;gap:12px}
.learn-practice-hero>div{flex:1;min-width:0;position:relative;z-index:1}.learn-practice-hero small{font-weight:900;font-size:10px;letter-spacing:.6px}.learn-practice-hero h1{color:white;font-size:27px;line-height:1.2;margin:12px 0}.learn-practice-hero p{color:#eafbff;font-size:16px;line-height:1.5;max-width:300px}.learn-practice-hero .btn{font-size:12px;background:white;color:#2093bd;box-shadow:0 5px 0 #bde5f4;width:auto;display:inline-block;margin-top:8px}
.learn-practice-hero>img{width:30%;max-width:150px;object-fit:contain;align-self:flex-end}
.learn-practice-list{padding:26px 0}.learn-practice-list>h2{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#83948d;margin:0 0 20px}
.learn-objective{display:flex;align-items:center;gap:18px;width:100%;border:2px solid #e0e7e1;border-bottom-width:5px;border-radius:17px;background:#fff;padding:18px;color:#4c6055;text-align:left;min-height:90px;margin:0 0 14px;font-family:inherit}
.learn-objective>span{flex:1;min-width:0}.learn-objective b{display:block;font-size:17px;line-height:1.3}.learn-objective small{display:block;color:#829185;font-size:12px;line-height:1.5;margin-top:5px}.learn-objective svg{width:44px;height:44px}.learn-objective>svg:last-child:not(:first-child){width:30px;height:30px}
.learn-objectives{padding-bottom:20px}.learn-empty{padding:28px 12px;line-height:1.6;text-align:center;color:#819087}
@media(min-width:1100px){.learn-jump{right:calc(300px + 2vw)}.learn-unit-banner{top:80px}.learn-chapters{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.learn-chapter-cover{height:180px;padding:15px}.learn-speech{font-size:14px;padding:12px;max-width:65%}.learn-chapter-cover img{height:140px}.learn-chapter-info{padding:18px}.learn-chapter-info h2{font-size:21px}}
@media(max-width:600px){.learning-page{padding:0 18px 24px}.learn-unit-banner{top:62px}.learn-unit-banner>a{padding:16px}.learn-unit-banner h1{font-size:20px}.learn-unit-banner>button{width:56px}.learn-unit-banner small{font-size:11px}.learn-chapter-cover{height:200px}.learn-path-dog{width:100px;right:-8px;top:42%}.learn-stops{padding-bottom:4px}.learn-jump{right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 91px)}.learn-practice-hero{padding:22px 18px}.learn-practice-hero>img{width:26%}.learn-practice-hero h1{font-size:24px}.learn-practice-hero p{font-size:15px}.learn-objective{gap:12px;padding:16px}.learn-heading h1{font-size:23px}}
@media(max-width:360px){.learning-page{padding-inline:12px}.learn-stop{width:156px;transform:translateX(calc(var(--offset) * .7))}.learn-node-title{font-size:13px}.learn-path-dog{width:80px;right:0}.learn-speech{font-size:15px}.learn-practice-hero>img{display:none}.learn-unit-banner h1{font-size:18px}.learn-unit-reward{font-size:12px}}
@media(prefers-reduced-motion:reduce){.learn-node-face{transition:none}}

/* Keep the two learning destinations and current unit reachable while scrolling. */
.learn-tabs{position:sticky;top:calc(var(--header-height,64px) + var(--safe-t,0px));z-index:12;background:#fffcf7}
.learning-page .learn-unit-banner{top:calc(var(--header-height,64px) + var(--safe-t,0px) + 60px)}
.learn-unit{scroll-margin-top:270px}
.learn-path-dog{mix-blend-mode:multiply}

.learn-practice-hero>img{border-radius:50%;padding:6px;background:#f0fbff}
.program-reading{max-width:740px;margin:auto;line-height:1.65;color:#4d6158}
.program-reading h1{font-size:clamp(24px,4vw,33px);line-height:1.2;margin:10px 0}
.program-reading h2{font-size:23px;line-height:1.3;margin:22px 0 12px}.program-reading h3{font-size:16px;line-height:1.4;margin:21px 0 8px}
.program-reading p,.program-reading li{font-size:15px;line-height:1.7;overflow-wrap:anywhere}.program-reading p{margin:10px 0}.program-reading li{margin-bottom:10px}.program-reading ul,.program-reading ol{padding-left:23px}
.program-reading>section{padding:12px 2px 18px}.program-reading small{font-size:11px;line-height:1.5;color:#7d9085;font-weight:800}
.program-guide-cover{display:flex;align-items:center;gap:16px;padding:24px;border-radius:22px;background:#e7f3dc}.program-guide-cover>div{flex:1;min-width:0}.program-guide-cover>img{width:28%;max-width:130px;border-radius:50%}.program-guide-cover p{color:#729267}
.program-guide-start{padding:24px 0 6px}.program-guide-start>.btn{display:block;width:100%;margin-top:22px}.program-detail{padding:0 18px 4px;background:white;border:2px solid #e1e8e1;border-bottom-width:4px;border-radius:17px;margin:16px 0}.program-detail>summary{padding:17px 0;font-size:15px;font-weight:900;cursor:pointer;min-height:52px}.program-detail[open]{padding-bottom:20px}
.program-module{background:white;border:2px solid #e1e9df;border-bottom-width:5px;border-radius:18px;margin-bottom:16px;overflow:hidden}.program-module>summary{display:flex;align-items:center;gap:15px;padding:18px;cursor:pointer;list-style:none}.program-module>summary::-webkit-details-marker{display:none}.program-module>summary:after{content:'+';font-size:24px;margin-left:auto;color:#7c9d6d}.program-module[open]>summary:after{content:'−'}.program-module-number{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:#e8f4dc;color:#5b9e3c;font-weight:900;flex:none}.program-module summary b{font-size:16px;line-height:1.3;display:block}.program-module summary small{display:block;margin-top:5px}.program-module-body{border-top:2px solid #eff3ed;padding:4px 20px 20px}.program-module-body>.btn{display:block;width:100%;margin:24px 0 16px;text-align:center}.program-lead{font-weight:800;color:#60804f}.program-reference{padding:16px 0;border-top:1px solid #e0e9dc}.program-reference h3{margin:5px 0}.program-reference a{color:#2498bc}.program-reference p{font-size:13px}
.program-path-guide{display:flex;gap:14px;align-items:center;padding:15px 16px;background:white;border:2px solid #e0eadb;border-radius:16px;margin-bottom:20px;color:#547646}.program-path-guide span{flex:1;min-width:0}.program-path-guide b{display:block;font-size:14px;line-height:1.4}.program-path-guide small{display:block;font-size:11px;line-height:1.5;color:#85977c;margin-top:4px}.program-path-guide svg{width:28px;height:28px}.program-path-guide>svg:last-child{width:16px;height:16px}
.exercise-program-guides{background:#f1f7ec;border:2px solid #dfead6;border-radius:15px;padding:16px;margin:16px 0;font-size:14px}.exercise-program-guides>a{display:block;padding:10px 0;color:#3391b1;font-size:13px;font-weight:800}
.learn-text-link>.paint-icon{width:20px;height:20px;margin-right:5px}
@media(max-width:360px){.program-guide-cover{padding:18px;gap:10px}.program-guide-cover>img{display:none}.program-module>summary{padding:14px;gap:10px}.program-module-body{padding-inline:14px}.program-reading p,.program-reading li{font-size:14px}.program-detail{padding-inline:14px}}