body[data-screen=stages]{background:#f5faf6;background-image:none}
[data-screen=stages].explore{max-width:640px;margin:auto;padding-top:24px}
[data-screen=stages] .explore-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
[data-screen=stages] .explore-heading h1{font-size:30px;margin:0 0 6px;line-height:1.25}
[data-screen=stages] .explore-heading p{font-size:14px;margin:0;color:#688276}
[data-screen=stages] #open-collection{font:700 13px/1.4 sans-serif;white-space:nowrap;padding:10px 13px;border:2px solid #d5e3d9;border-radius:14px;background:white;color:#416556;box-shadow:none}
#open-collection #discovery-count{display:block;font-size:17px}
#courses.courses{display:block;margin:0}
.path-unit{margin:0 0 20px}
.unit-banner{background:var(--unit);color:white;border-radius:18px;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:5px solid #0002}
.unit-banner span{font:700 12px/1.3 sans-serif;letter-spacing:1.5px;color:#fffd}
.unit-banner .unit-title{font-size:25px;line-height:1.25;margin:6px 0}
.unit-banner .unit-subtitle{font-size:14px;line-height:1.5;margin:0;color:#ffffffe0}
.unit-banner .unit-score{font-size:16px;white-space:nowrap;border:2px solid #ffffff60;border-radius:12px;padding:10px;letter-spacing:0}
.path-trail{list-style:none;margin:0;padding:46px 0 12px;position:relative}
.path-step{position:relative;min-height:174px;padding-bottom:32px;display:flex;align-items:center;flex-direction:column}
.node-wrap{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;margin-left:calc(var(--offset)*2)}
.path-node{width:94px;height:88px;border:0;border-radius:50%;background:var(--unit);box-shadow:0 7px 0 color-mix(in srgb,var(--unit),#142c30 35%);padding:6px;position:relative;cursor:pointer;transition:filter .15s,transform .15s}
.path-node:active{transform:translateY(4px);box-shadow:0 3px 0 color-mix(in srgb,var(--unit),#142c30 35%)}
.path-node:focus-visible{outline:3px solid #243e4d;outline-offset:7px}
.path-node .node-art{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#eff2df;aspect-ratio:auto}
.path-node .node-art img{width:100%;height:100%;object-fit:contain;display:block}
.node-status{position:absolute;right:-5px;bottom:-6px;background:#fff9e8;border:3px solid var(--unit);color:var(--unit);border-radius:50%;width:29px;height:29px;display:grid;place-items:center;font:700 17px/1 sans-serif}
.node-name{font-size:14px;color:#395748;margin-top:16px;background:#f5faf6;padding:2px 5px;max-width:170px;text-align:center;line-height:1.4}
.current .path-node{outline:7px solid #dae8dd;outline-offset:7px;background:#edb745;box-shadow:0 7px 0 #b67e25}
.current .node-status{border-color:#edb745;color:#a76b19}
.start-bubble{position:absolute;bottom:calc(100% + 13px);white-space:nowrap;color:var(--unit);font-size:14px;font-weight:700;background:white;border:2px solid #d9e6dd;border-radius:10px;padding:8px 12px}
.start-bubble::after{content:'';position:absolute;left:calc(50% - 6px);bottom:-7px;width:10px;height:10px;background:white;border-right:2px solid #d9e6dd;border-bottom:2px solid #d9e6dd;transform:rotate(45deg)}
.path-step.current{margin-top:26px}
.locked .path-node{background:#d8e2dc;box-shadow:0 7px 0 #b4c6bb}
.locked .node-art{filter:grayscale(1);opacity:.5}
.locked .node-status{border-color:#b4c6bb;color:#748e7f;background:#eef3ee}
.locked .node-name{color:#829588}
.stage-popover{position:relative;z-index:3;width:min(320px,calc(100% - 16px));margin-top:18px;padding:18px;border:2px solid var(--unit);border-radius:18px;background:white;box-shadow:0 5px 0 #dce8df}
.stage-popover[hidden]{display:none}
.stage-popup-label{font-size:12px;font-weight:700;color:var(--unit)}
.stage-popover h3{margin:6px 0;font-size:22px;color:#263e46}
.stage-popover p{font-size:14px;line-height:1.6;color:#5e7568;margin:8px 0 16px}
.stage-popover button{width:100%;padding:12px;border-radius:12px;background:var(--unit);color:white;font-size:15px;font-weight:700;border:0;box-shadow:0 4px 0 #193d3333;min-height:46px}
.path-reward{display:flex;align-items:center;flex-direction:column;gap:7px;padding:8px 0 32px;color:#829588}
.path-reward>span{display:grid;place-items:center;width:64px;height:58px;border:3px solid #c7d7cc;border-radius:18px;background:#e6eee7;font-size:36px;box-shadow:0 5px #c7d7cc}
.path-reward strong{font-size:15px;margin-top:9px}.path-reward small{font-size:12px}
.path-reward.earned{color:#a17627}.path-reward.earned>span{background:#ffe29a;border-color:#d7ac55;box-shadow:0 5px #d7ac55}
@media(max-width:480px){[data-screen=stages].explore{padding-top:18px}.unit-banner{padding:17px}.unit-banner .unit-title{font-size:23px}[data-screen=stages] .explore-heading h1{font-size:27px}.path-node{width:88px;height:82px}}
@media(prefers-reduced-motion:reduce){.path-node{transition:none}}
.stage-popover{scroll-margin-bottom:110px;scroll-margin-top:20px}

/* A single measured curve joins every node, including the course reward. */
.trail-connector{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.trail-connector path{fill:none;stroke:#d8e5dc;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.path-step,.path-reward{position:relative;z-index:1}
.path-reward strong,.path-reward small{background:#f5faf6;padding:0 5px}
.unit-banner{padding:12px 16px;border-bottom-width:3px;border-radius:14px;gap:10px}
.unit-banner>.unit-copy{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:3px}
.unit-banner span{font-size:11px;letter-spacing:.8px}
.unit-banner .unit-title{font-size:20px;line-height:1.2;margin:0}
.unit-banner .unit-subtitle{grid-column:1/-1;font-size:12px;line-height:1.4}
.unit-banner .unit-score{font-size:14px;padding:7px 9px;border-radius:10px}

[data-screen=stages] .explore-heading{align-items:flex-start;text-align:left}
[data-screen=stages] .explore-heading>div{width:100%;text-align:left}
.unit-banner{width:100%;text-align:left;cursor:pointer;box-shadow:none;font:inherit}
.unit-banner .unit-copy{flex:1;min-width:0}
.unit-banner .unit-title{font-family:'Jua',sans-serif;font-size:20px;letter-spacing:0;color:white}
.unit-banner .unit-subtitle{font-size:12px;font-weight:400;letter-spacing:0}
.unit-banner .unit-chevron{font-size:22px;line-height:1;transition:transform .18s}
.unit-banner[aria-expanded=true] .unit-chevron{transform:rotate(180deg)}
.unit-banner:focus-visible{outline:3px solid #203747;outline-offset:4px}
.path-trail[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.unit-banner .unit-chevron{transition:none}}