@import url('/live-map.css');
@import url('/lesson-entry.css');
@font-face{font-family:'Path Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url('/learning-explanation-assets/fraunces.woff2') format('woff2')}
body.path-page{background:#fffdf7;color:#254e3e}body.path-page>header{display:none}.path-home{max-width:1100px;margin:auto;padding:30px 32px 70px}.path-nav{display:flex;justify-content:space-between;align-items:center;gap:16px}.path-nav>span{letter-spacing:2px;font-size:13px;text-transform:uppercase}.path-nav>div{display:flex;gap:16px;align-items:center}.path-nav button{border:0;background:none}.path-profile{border:1px solid #ccd6c3;border-radius:50%;font-size:25px;width:48px;height:48px;display:grid;place-items:center;text-decoration:none}.path-home h1{font-size:clamp(34px,5vw,64px);letter-spacing:-1.8px;line-height:1.15;margin:65px 0 90px}.path-road{display:flex;gap:24px;position:relative;align-items:flex-start;margin:0 0 58px}.path-road:before{content:'';position:absolute;border-top:3px solid #c2cfb3;left:10%;right:10%;top:48px;transform:rotate(-2deg)}.path-node{position:relative;flex:1;min-width:0;border:0;background:transparent!important;padding:0 6px;color:#254e3e;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;overflow-wrap:anywhere}.path-symbol{display:grid;place-items:center;width:90px;height:90px;flex:none;background:#dce6cf;font-size:30px;border-radius:50%;color:#254e3e}.path-node.recording .path-symbol{border-radius:24px;background:#cfded1}.path-node.dori .path-symbol{border-radius:12px 28px 28px 12px;background:#e5e7ce;font-size:36px}.path-node.trainer .path-symbol{background:#f9ddc5;border-radius:50%}.path-node.complete .path-symbol{background:#8ba37f;color:white}.path-node.current .path-symbol{background:#254e3e;color:#fffdf7;box-shadow:0 0 0 7px #e8ecdf}.path-label{font-size:17px;line-height:1.5;max-width:100%;white-space:normal}.path-node small{font-size:13px;max-width:100%;line-height:1.5}.path-actions{text-align:center}.path-actions .primary{border-radius:40px;padding:18px 36px;font-size:22px;background:#254e3e}.path-actions p{margin:20px 0 12px}.path-actions h2{font-size:25px}.path-secondary{margin-top:54px}.path-secondary>details{margin:25px 0}.path-secondary summary{cursor:pointer;padding:15px 0}.path-all{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 20px;padding:25px 0}.path-all .path-symbol{height:65px;width:65px;font-size:23px}.path-all .path-label{font-size:15px}.path-all .path-node{border:0}.path-future{text-align:center;margin:48px 0;color:#62745e}.path-home #path-panel:not(:empty){max-width:750px;margin:35px auto;padding:25px;background:#f2f3e9;border-radius:20px;overflow-wrap:anywhere}.path-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.path-week>div{font-size:13px;overflow-wrap:anywhere}.path-secondary select{max-width:100%}@media(max-width:600px){.path-home{padding:22px 18px 45px}.path-home h1{margin:35px 0 50px}.path-road{gap:32px;flex-direction:column}.path-road:before{left:38px;top:0;bottom:30px;border-top:0;border-left:2px solid #c2cfb3;transform:none}.path-road .path-node{display:grid;grid-template-columns:76px 1fr;text-align:left;gap:8px 22px;width:100%;align-items:center}.path-road .path-symbol{grid-row:span 2;width:76px;height:76px}.path-all{grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 8px}.path-all .path-label{font-size:13px}.path-all .path-symbol{width:56px;height:56px}.path-week{grid-template-columns:repeat(4,minmax(0,1fr))}.path-nav{gap:6px}.path-nav>div{gap:6px}.path-nav>span{font-size:11px}.path-actions .primary{font-size:19px}}
.path-road .path-node.current:after{content:"•ᴗ•";position:absolute;top:-28px;left:50%;transform:translateX(-50%) rotate(-5deg);display:grid;place-items:center;width:40px;height:37px;border:2px solid #254e3e;border-radius:24px 24px 13px 13px;background:#fffdf7;color:#254e3e;font-size:18px;pointer-events:none}@media(max-width:600px){.path-road .path-node.current:after{left:44px;top:-22px;width:32px;height:30px;font-size:15px}}
.path-road{margin-top:130px}.path-callout{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);width:100%;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:3px;color:#254e3e;font-size:clamp(17px,2vw,23px);font-weight:750;line-height:1.2;overflow-wrap:normal}.path-callout svg{width:54px;height:63px;flex:none}.path-road .path-node.current:has(.path-callout):after{display:none}.path-node:focus-visible{outline:3px solid #254e3e;outline-offset:8px;border-radius:12px}
@media(max-width:600px){.path-road{margin-top:0;gap:36px}.path-road .path-callout{position:static;transform:none;width:auto;max-width:none;grid-column:2;grid-row:1;flex-direction:row-reverse;justify-content:flex-end;gap:6px;font-size:19px;text-align:left}.path-road .path-callout svg{width:33px;height:39px;transform:rotate(90deg)}.path-road .path-node:has(.path-callout) .path-symbol{grid-column:1;grid-row:1 / span 3}.path-road .path-node:has(.path-callout) .path-label,.path-road .path-node:has(.path-callout) small{grid-column:2}}
.path-browse{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px}.path-browse button{display:flex;align-items:center;justify-content:center;gap:14px;min-height:64px;border:2px solid #254e3e;border-radius:18px;background:#254e3e;color:#fffdf7;font-size:18px;font-weight:650;padding:10px 20px}.path-browse button span{font-size:42px;line-height:1}.path-browse [data-road-home]{background:transparent;color:#254e3e;border-color:transparent;font-size:16px}.path-browse button:disabled{opacity:.4;cursor:default}.path-range{font-size:14px;text-align:center;color:#536750;margin:14px 0 0}.path-home:has(.path-browse) h1{margin-bottom:32px}@media(max-width:600px){.path-browse{display:grid;grid-template-columns:1fr 1fr;gap:8px}.path-browse button{flex-direction:column;gap:3px;font-size:15px;padding:10px 6px}.path-browse [data-road-home]{grid-row:2;grid-column:1 / -1;min-height:44px;font-size:15px}.path-browse [data-road-next]{flex-direction:column-reverse;grid-column:2;grid-row:1}.path-range{margin-bottom:32px}}

/* Keep pagination announcements accessible without a visible step counter. */
.path-range{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Owned lessons stay compact; upcoming lessons keep their premium character art. */
.path-home{--path-lesson-font:'Path Fraunces',Georgia,serif}
.path-main-road{container-type:inline-size}
.path-home .path-road{gap:18px;isolation:isolate}
.path-home .path-road:before{top:56px;left:12%;right:12%;transform:rotate(-1.8deg);z-index:-1}
.path-home .path-node{gap:0;padding:0 2px 7px;border-radius:15px;overflow-wrap:normal;isolation:isolate}
.path-home .path-node.current:after{display:none}
.path-home .path-symbol{position:relative;display:grid;place-items:center;width:112px;height:112px;flex:none;margin:0;border-radius:29px;color:#254e3e;transition:transform .2s,box-shadow .3s}
.path-home .path-node.unlocked .path-symbol{width:80px;height:80px;margin:16px 0;border-radius:22px;border:0;box-shadow:none}
.path-home .path-node.recording.unlocked .path-symbol{background:#d2e2d0}
.path-home .path-node.dori.unlocked .path-symbol{background:#f2e4ac}
.path-home .path-node.trainer .path-symbol{background:#dfe3df;color:#5e6a60;box-shadow:none;border:0}
.path-home .path-node.recording.locked .path-symbol{background:radial-gradient(ellipse at 38% 20%,#fbfff4,#dcebd8 75%);border:1px solid #adcaad;box-shadow:inset 0 2px 1px #fff,0 7px 0 #adc5a4,0 15px 19px -10px #355d3b5c,0 0 27px 3px #b2d29464}
.path-home .path-node.dori.locked .path-symbol{background:radial-gradient(ellipse at 38% 20%,#fffefa,#f4e8ba 78%);border:1px solid #deca8d;box-shadow:inset 0 2px 1px #fff,0 7px 0 #d8c596,0 15px 19px -10px #88653654,0 0 29px 3px #efce766b}
.path-home .path-symbol>svg{width:32px;height:32px}
.path-home .path-text{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:22px;width:100%;min-width:0}
.path-home .path-label{font-family:var(--path-lesson-font);font-size:22px;font-weight:550;line-height:1.25;letter-spacing:-.5px;max-width:100%;white-space:normal}
.path-home .path-topic{font-family:var(--path-lesson-font);font-size:19px;font-weight:550;line-height:1.35;letter-spacing:-.35px;max-width:100%}
.path-home .path-text small{margin-top:3px}
.path-home .path-mallo{display:block;width:108px;height:108px;position:relative;transform-origin:50% 85%;filter:drop-shadow(0 4px 2px #4b352e25)}
.path-home .path-mallo img{width:100%;height:100%;display:block;object-fit:contain}
.path-home .path-node.dori.locked .path-mallo{animation:path-mallo-breathe 5.6s ease-in-out infinite}
.path-home .path-node.dori.unlocked .path-mallo{width:54%;height:54%;filter:none}
.path-home .path-eye{display:block;position:absolute;background:#fbf9f8;top:58.5%;width:7.5%;height:10.3%;border-radius:50%;opacity:0}
.path-home .path-eye.left{left:38%}.path-home .path-eye.right{left:53.9%}
.path-home .path-eye:after{content:'';height:1.8px;position:absolute;left:12%;right:12%;top:50%;background:#30282b;border-radius:5px;transform:rotate(-5deg)}
.path-home .path-node.dori.locked .path-eye{animation:path-mallo-blink 6.4s infinite}
.path-home .path-teacher{width:75px;height:108px;object-fit:contain;display:block;filter:drop-shadow(0 4px 2px #23352c29);transform-origin:50% 92%}
.path-home .path-node.recording.unlocked .path-teacher{width:38%;height:54%;filter:none}
.path-home .path-spark{position:absolute;left:-40px;top:-40px;width:calc(100% + 80px);height:calc(100% + 80px);pointer-events:none;z-index:4}
.path-home .path-callout{bottom:calc(100% + 14px);font-size:18px;line-height:1.25}
.path-home .path-callout svg{width:48px;height:61px}
.path-home .path-all .path-node{min-width:0}
.path-home .path-all .path-label{font-size:20px}
.path-home .path-all .path-topic{font-size:18px}
@media(hover:hover){.path-home .path-node:hover .path-symbol{transform:translateY(-3px)}.path-home .path-node.recording.locked:hover .path-teacher{transform:rotate(-3deg);transition:transform .25s}}
.path-home .path-node:active .path-symbol{transform:translateY(2px)}
@keyframes path-mallo-breathe{0%,100%{transform:translateY(1px) rotate(-1.5deg)}45%{transform:translateY(-3px) rotate(1.5deg)}70%{transform:translateY(-1px) rotate(.5deg)}}
@keyframes path-mallo-blink{0%,43%,47%,78%,82%,100%{opacity:0}44%,46%,79%,81%{opacity:1}}
@container(max-width:600px){
 .path-home .path-road{flex-direction:column;margin-top:32px;gap:33px}
 .path-home .path-road:before{left:46px;top:35px;bottom:61px;right:auto;width:0;border-top:0;border-left:2px solid #c2cfb3;transform:none}
 .path-home .path-road .path-node{display:grid;grid-template-columns:94px minmax(0,1fr);gap:0 24px;align-items:center;text-align:left;padding:0;min-height:98px;width:100%}
 .path-home .path-road .path-symbol{width:94px;height:94px;border-radius:25px;grid-column:1;grid-row:1 / span 2}
 .path-home .path-road .path-node.unlocked .path-symbol{width:68px;height:68px;margin:13px;border-radius:19px}
 .path-home .path-road .path-mallo{width:92px;height:92px}
 .path-home .path-road .path-teacher{width:64px;height:92px}
 .path-home .path-road .path-node.dori.unlocked .path-mallo{width:54%;height:54%}
 .path-home .path-road .path-node.recording.unlocked .path-teacher{width:38%;height:54%}
 .path-home .path-road .path-text{grid-column:2;margin:0;align-items:flex-start;gap:3px}
 .path-home .path-road .path-label{font-size:22px}
 .path-home .path-road .path-topic{font-size:18px}
 .path-home .path-road .path-callout{position:static;transform:none;width:auto;max-width:none;white-space:normal;flex-direction:row-reverse;grid-column:2;grid-row:1;align-self:end;justify-content:flex-end;gap:4px;font-size:15px;line-height:1.25;margin-bottom:8px}
 .path-home .path-road .path-callout svg{width:24px;height:28px;transform:rotate(90deg)}
 .path-home .path-road .path-node:has(.path-callout) .path-symbol{grid-row:1 / span 2}
 .path-home .path-road .path-node:has(.path-callout) .path-text{align-self:start;grid-row:2}
 .path-home .path-road .path-node:has(.path-callout){min-height:106px}
}
@container(max-width:345px){
 .path-home .path-road .path-node{grid-template-columns:82px minmax(0,1fr);gap:0 18px}
 .path-home .path-road .path-symbol{width:82px;height:82px;border-radius:22px}
 .path-home .path-road .path-mallo{width:80px;height:80px}
 .path-home .path-road .path-teacher{width:57px;height:80px}
 .path-home .path-road .path-node.unlocked .path-symbol{width:60px;height:60px;margin:11px;border-radius:17px}
 .path-home .path-road:before{left:40px}
 .path-home .path-road .path-label{font-size:20px}
 .path-home .path-road .path-topic{font-size:17px}
 .path-home .path-road .path-callout{font-size:13px}
}
@media(max-width:600px){
 .path-home .path-all{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 12px}
 .path-home .path-all .path-symbol{width:94px;height:94px;border-radius:25px}
 .path-home .path-all .path-node.unlocked .path-symbol{width:68px;height:68px;margin:13px;border-radius:19px}
 .path-home .path-all .path-mallo{width:92px;height:92px}
 .path-home .path-all .path-teacher{width:64px;height:92px}
 .path-home .path-all .path-node.dori.unlocked .path-mallo{width:54%;height:54%}
 .path-home .path-all .path-node.recording.unlocked .path-teacher{width:38%;height:54%}
 .path-home .path-all .path-text{margin-top:17px}
 .path-home .path-all .path-label{font-size:19px}
 .path-home .path-all .path-topic{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.path-home .path-mallo,.path-home .path-eye{animation:none!important}.path-home .path-symbol,.path-home .path-teacher{transition:none!important}.path-home .path-node:hover .path-symbol,.path-home .path-node:active .path-symbol,.path-home .path-node.recording.locked:hover .path-teacher{transform:none}}
.path-home .path-complete-badge{position:absolute;right:-5px;top:-5px;display:grid;place-items:center;width:27px;height:27px;border:3px solid #fffdf7;border-radius:50%;background:#27804c;color:#fff;box-shadow:0 2px 4px #254e3e15;z-index:5;pointer-events:none}
.path-home .path-complete-badge svg{width:17px;height:17px}
@container(max-width:600px){.path-home .path-road .path-complete-badge{width:25px;height:25px}.path-home .path-road .path-complete-badge svg{width:16px;height:16px}}
@media(max-width:600px){.path-home .path-all .path-complete-badge{width:25px;height:25px}.path-home .path-all .path-complete-badge svg{width:16px;height:16px}}