/* A quiet pulse and a raised button. Its centre never moves between missions. */
html[data-design="2026"] .trailStop>.trailNode{animation:none!important;transform:none;will-change:auto;isolation:isolate}
html[data-design="2026"] .trailStop>.trailNode:active{transform:none}
html[data-design="2026"] .trailStop .trailDisc{background:linear-gradient(145deg,color-mix(in srgb,var(--disc-color) 86%,white),var(--disc-color) 50%,color-mix(in srgb,var(--disc-color) 85%,black));border:1px solid color-mix(in srgb,var(--disc-color) 75%,white);box-shadow:inset 0 2px 0 #ffffff22,inset 0 -7px 0 var(--disc-depth),0 5px 0 color-mix(in srgb,var(--disc-depth) 78%,black),0 9px 10px #082c342e;transition:box-shadow .18s,filter .18s}
html[data-design="2026"] .trailStop.isLocked .trailDisc{background:linear-gradient(145deg,var(--surface2),var(--surface));border-color:var(--border);box-shadow:inset 0 1px 0 #ffffff0c,inset 0 -6px 0 var(--disc-depth),0 4px 0 #092e3544;filter:saturate(.5)}
html[data-design="2026"] .trailDisc>.volumeNodeIcon{width:34px;height:36px;margin-top:-4px;filter:drop-shadow(0 3px 0 #0b68535c) drop-shadow(0 -1px 0 #ffffff22);stroke-width:1.7;transform:none;fill:none}
html[data-design="2026"] .trailStop.isCurrent>.trailNode:after{content:''!important;display:block!important;position:absolute;inset:-7px;border:3px solid var(--trail);border-radius:50%;background:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--trail) 15%,transparent);z-index:-1;pointer-events:none;opacity:.6;animation:missionCirclePulse 2.8s cubic-bezier(.45,0,.25,1) infinite!important}
html[data-design="2026"] .trailStop>.trailNode:active .trailDisc{filter:brightness(1.08);box-shadow:inset 0 2px 0 #ffffff22,inset 0 -4px 0 var(--disc-depth),0 2px 0 var(--disc-depth),0 5px 7px #082c3420}
html[data-design="2026"] .trailTypeHint{font-weight:650;letter-spacing:.1px;text-shadow:0 2px 3px #092d3540}
html[data-design="2026"] .sectionScenery .sceneryLandmark svg,html[data-design="2026"] .sectionScenery .sceneryLandmarkSecondary svg{filter:drop-shadow(0 5px 0 #082d3a2c) drop-shadow(2px 9px 7px #062f3d2e)}
html[data-design="2026"] .sectionScenery .sceneryPlace,html[data-design="2026"] .sectionScenery .sceneryPlaceSecondary{text-shadow:0 2px 3px #062c3b55;line-height:1.5;font-weight:600}html[data-design="2026"] .sectionScenery :is(.sceneryPlace,.sceneryPlaceSecondary) small{font-weight:400;font-size:.85em;opacity:.8}
html[data-design="2026"] #sidebar nav button svg.illustratedIcon{width:25px;height:27px;filter:drop-shadow(0 2px 0 #092f3b35)}
@keyframes missionCirclePulse{0%,100%{transform:scale(.98);opacity:.28}48%{transform:scale(1.045);opacity:.75}}
@media(prefers-reduced-motion:reduce){html[data-design="2026"] .trailStop.isCurrent>.trailNode:after{animation:none!important;opacity:.5}html[data-design="2026"] .trailStop .trailDisc{transition:none}}
html[data-design="2026"] .primary:not(:disabled){box-shadow:inset 0 1px 0 #ffffff1c,0 3px 0 color-mix(in srgb,var(--green) 72%,#123b3e);border-bottom-width:2px}html[data-design="2026"] .primary:not(:disabled):active{box-shadow:inset 0 1px 0 #ffffff15,0 1px 0 color-mix(in srgb,var(--green) 72%,#123b3e)}html[data-design="2026"] :is(.practiceShortcut,.crystalProduct,.journeyQuestArt,.milestoneCard){box-shadow:inset 0 1px 0 #ffffff08,0 3px 0 #072f3a24}html #modal .crystalProductArt{box-shadow:inset 0 2px 0 #ffffff0c,0 4px 0 #082f3d30}html #modal .crystalProductArt>svg{filter:drop-shadow(0 3px 0 #092f3e30)}html #modal .crystalProductArt>span{box-shadow:0 3px 0 #072f3b2b}html #modal .crystalProductArt>span svg{filter:drop-shadow(0 1px 0 #89582955)}

/* A solid raised token; the breathing light remains outside the progress ring. */
html[data-design="2026"] .trailStop .trailDisc{border:0;background:radial-gradient(ellipse at 36% 19%,#ffffff24,transparent 55%),linear-gradient(165deg,color-mix(in srgb,var(--disc-color) 94%,white) 0%,var(--disc-color) 62%,color-mix(in srgb,var(--disc-color) 91%,black) 100%);box-shadow:inset 0 2px 0 #ffffff38,inset 0 -3px 0 #00000012,0 7px 0 var(--disc-depth),0 9px 0 color-mix(in srgb,var(--disc-depth) 75%,black),0 12px 8px #062c3430;transition:translate .16s ease,box-shadow .16s ease}
html[data-design="2026"] .trailStop.isCurrent .trailDisc{--disc-color:#42d9ac;--disc-depth:#168d71}
html[data-design="2026"] .trailDisc>.volumeNodeIcon{width:37px;height:39px;margin-top:-1px;filter:drop-shadow(0 2px 0 #116a5680) drop-shadow(0 1px 1px #083e3d30);stroke-width:1.7}
html[data-design="2026"] .trailStop.isLocked .volumeNodeIcon{opacity:.65;filter:grayscale(.65) drop-shadow(0 2px 0 #082e3540)}
html[data-design="2026"] .trailStop.isCurrent>.trailNode:after{inset:-6px;border-width:3px;background:none;box-shadow:none;z-index:0}
html[data-design="2026"] .trailStop>.trailNode:active .trailDisc{translate:0 4px;box-shadow:inset 0 2px 0 #ffffff25,0 3px 0 var(--disc-depth),0 5px 0 color-mix(in srgb,var(--disc-depth) 75%,black),0 7px 5px #062c3420}
@media(prefers-reduced-motion:reduce){html[data-design="2026"] .trailStop .trailDisc{transition:none}}
/* Landmarks are recognizable destinations, with captions sized for a phone. */
html[data-design="2026"] .sectionScenery{--tourism-size:clamp(176px,51vw,214px)}
html[data-design="2026"] .sectionScenery :is(.sceneryLandmark,.sceneryLandmarkSecondary){width:var(--tourism-size);opacity:.86}
html[data-design="2026"] .sectionScenery .sceneryLandmark{right:8px}
html[data-design="2026"] .sectionScenery .sceneryLandmarkSecondary{left:8px;opacity:.74}
html[data-design="2026"] .sectionScenery :is(.sceneryPlace,.sceneryPlaceSecondary){width:var(--tourism-size);max-width:var(--tourism-size);font-size:14px;line-height:1.4;padding:0 5px;opacity:1;color:var(--text)}
html[data-design="2026"] .sectionScenery .sceneryPlace{right:8px;top:calc(25% + var(--tourism-size)*.6667 + 8px)}
html[data-design="2026"] .sectionScenery .sceneryPlaceSecondary{left:8px;top:calc(72% + var(--tourism-size)*.7 + 8px)}
html[data-design="2026"] .sectionScenery :is(.sceneryPlace,.sceneryPlaceSecondary)>small{font-size:11px;line-height:1.4;color:var(--sub);opacity:1;margin-top:3px}

/* Current mission keeps its progress ring, with no animated surrounding halo. */
html[data-design="2026"] .trailStop.isCurrent>.trailNode:after{content:none!important;display:none!important;animation:none!important}
html[data-design="2026"] .trailStop.isCurrent>.trailNode:before,html[data-design="2026"] .trailStop.isCurrent .nodeMissionRing{animation:none!important}

/* Keep the top controls readable while the trail passes behind them. */
html[data-design="2026"] .travelDestinationBar{display:none!important}
html[data-design="2026"] body.pathHome .workspace>header{background:transparent!important;box-shadow:none!important;border-bottom:0!important;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="2026"] body.pathHome .workspace>header:after{content:'';position:absolute;inset:0 0 -24px;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--bg) 8%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 42px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 42px),transparent 100%)}

@media(max-width:760px){html[data-design="2026"] #sidebar{background:color-mix(in srgb,var(--bg) 38%,transparent)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;box-shadow:0 -5px 18px #072e3418!important}}
@keyframes sectionBannerSway{0%,100%{transform:translateY(-4px) rotate(-.4deg)}50%{transform:translateY(5px) rotate(.4deg)}}

@media(prefers-reduced-motion:reduce){html[data-design="2026"] body.pathHome .workspace>header>.pathSectionBanner{animation:none!important}}
html[data-design="2026"] .sectionScenery .sceneryStreet[data-street-theme]{width:152px;max-width:none;opacity:.9}
html[data-design="2026"] .sceneryStreet[data-street-theme]>small{font-size:11px;line-height:1.4;text-align:center;color:var(--text);padding:0;margin-top:6px}

/* Scenic storytelling belongs only to the learning route, never behind forms. */
html[data-design="2026"] .appWorld,html[data-design="2026"] .travelLandscape{display:none!important}
html[data-design="2026"] body:not(.pathHome) :is(.sectionScenery,.routeBiomeBackdrop),html[data-design="2026"] body.authPage :is(.sectionScenery,.routeBiomeBackdrop){display:none!important}
html[data-design="2026"] .sectionScenery{background:none!important}
html[data-design="2026"] .sectionScenery .routeTerrain{opacity:.17;mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
html[data-design="2026"] .sectionScenery .mapDetail{display:none!important}
html[data-design="2026"] .sectionScenery[data-chapter="canal"] :is(.mapBoat,.mapLotus),html[data-design="2026"] .sectionScenery[data-chapter="market"] .mapLanterns{display:block!important;opacity:.22;left:auto;right:12px;max-width:72px}
html[data-design="2026"] .sectionScenery[data-chapter="canal"] .mapLotus{left:12px;right:auto}
html[data-design="2026"] .sectionScenery .sceneryStreet[data-street-theme]{left:auto;right:12px;width:152px;opacity:.88}
html[data-design="2026"] .sectionScenery[data-chapter="skyline"] .sceneryStreet{width:170px}
html[data-design="2026"] .sectionScenery .sceneryStreet>svg{filter:drop-shadow(0 5px 0 #082d3a20)}

/* Quiet, compact navigation with a single outline icon family. */
html[data-design="2026"] #sidebar nav button .navLineIcon{width:23px!important;height:23px!important;filter:none!important;opacity:1;animation:none!important;fill:none;stroke:currentColor;flex:none}
@media(max-width:760px){
 html[data-design="2026"] body #sidebar{padding:4px 5px!important;border-radius:21px;background:color-mix(in srgb,var(--bg) 18%,transparent)!important;border-color:color-mix(in srgb,var(--text) 12%,transparent)!important;box-shadow:0 3px 12px #072e3412!important}
 html[data-design="2026"] body #sidebar nav button{min-height:48px;padding:4px 2px!important;gap:3px;font-size:8px!important;line-height:1.2;border:0!important;border-radius:14px;color:color-mix(in srgb,var(--text) 70%,transparent);box-shadow:none!important;position:relative}
 html[data-design="2026"] body #sidebar nav button.active{background:transparent!important;color:var(--green);box-shadow:none!important}
 html[data-design="2026"] body #sidebar nav button.active .navLineIcon{stroke-width:2.2}
 html[data-design="2026"] body #sidebar nav button.active:after{content:'';position:absolute;bottom:1px;left:calc(50% - 7px);width:14px;height:2px;border-radius:2px;background:currentColor}
}
html[data-design="2026"] .trailRoute .routeSegment{stroke-width:3;stroke-dasharray:none;opacity:.34}
html[data-design="2026"] .trailRoute .routeSegment.routeDone{opacity:.6}
html[data-design="2026"] .trailRoute .routeSegment.routeNext{opacity:.65}
@media(max-width:760px){html[data-design="2026"] body #sidebar nav [data-page].active[aria-current="page"]{background:transparent!important;border-color:transparent!important;color:var(--green)!important;box-shadow:none!important}html[data-design="2026"] body #sidebar nav button{font-size:9px!important}}

@media(max-width:760px){
 html[data-design="2026"]:not([data-theme="light"]) body #sidebar,html[data-design="2026"][data-theme="light"] body #sidebar{background:color-mix(in srgb,var(--bg) 10%,transparent)!important;border-color:color-mix(in srgb,var(--text) 10%,transparent)!important;box-shadow:0 2px 12px #082b3412!important}
 html[data-design="2026"]:not([data-theme="light"]) body #sidebar nav [data-page].active,html[data-design="2026"]:not([data-theme="light"]) body #sidebar nav [data-page][aria-current=page]{background:#ffffff10!important;border-color:transparent!important;color:var(--text)!important;box-shadow:none!important;border-radius:30px}
 html[data-design="2026"] body #sidebar nav button.active:after{display:none}
}
html[data-design="2026"] .continuousSection{content-visibility:visible;contain-intrinsic-size:none}


html[data-design="2026"] body.pathHome .workspace>header:after{bottom:auto;height:calc(var(--path-stats-height,70px) + 12px);mask-image:linear-gradient(#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent)}
html[data-design="2026"] .pathSectionBanner{transition:background-color .35s ease,border-color .35s ease,color .2s ease}

html[data-design="2026"] .trailStop:not(.isCurrent) .nodeMissionRing{display:none!important}
html[data-design="2026"] .trailStop.isCurrent>.trailNode:before{content:none!important}
html[data-design="2026"] .trailStop.isCurrent .nodeMissionRing{overflow:visible;opacity:1}
@keyframes currentTokenHop{0%,65%,100%{translate:0 0}78%{translate:0 -4px}90%{translate:0 -1px}}
@media(prefers-reduced-motion:no-preference){html[data-design="2026"] .trailStop.isCurrent:not(.isDone) .trailDisc{animation:currentTokenHop 2.8s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){html[data-design="2026"] .trailStop.isCurrent .trailDisc{animation:none!important}}