/* Motion edition of the previous white guide. */
:root{--motion-blue:#2348db;--motion-soft:#eaf0ff}
body{animation:guidePageIn .55s ease both}@keyframes guidePageIn{from{opacity:.4}to{opacity:1}}
header.hero{background:linear-gradient(120deg,#f6f9ff,#edf4ff,#f6faf5,#f6f9ff)!important;background-size:300% 300%!important;border:1px solid #e2e9f2!important;border-radius:16px!important;padding:30px!important;animation:heroLift .7s cubic-bezier(.16,1,.3,1) both,heroFlow 16s ease infinite!important;overflow:hidden!important}
@keyframes heroLift{from{opacity:.5;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes heroFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
header.hero h1{background:linear-gradient(110deg,#192b25,#2348db,#5270b9,#192b25)!important;background-size:240% 100%!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;animation:titleFlow 10s ease infinite;position:relative;z-index:1}@keyframes titleFlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
header.hero>.tag{display:inline-block!important;background:#eaf0ff;border:1px solid #d3e0ff;border-radius:20px;padding:4px 10px;color:#2348b8;animation:badgeBreath 3.2s ease-in-out infinite}@keyframes badgeBreath{50%{box-shadow:0 3px 12px #2348db18;transform:scale(1.035)}}
.hero .meta,.hero .tags{animation:metaIn .6s cubic-bezier(.16,1,.3,1) both;animation-delay:.16s}.hero .tags{animation-delay:.26s}@keyframes metaIn{from{opacity:.3;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.hero .deco{display:block!important;position:absolute;right:24px;top:30px;width:105px;height:105px;border:1px solid #a7bdf34d;border-radius:50%;pointer-events:none;transform:translateY(var(--parallax-y,0px)) rotate(var(--parallax-r,0deg));opacity:.6}.hero .deco::before{content:'';position:absolute;inset:18px;border:1px dashed #9cb3e266;border-radius:50%}.hero .deco::after{display:none}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border-top:1px solid #dce5ec;margin-top:24px;padding-top:20px}.hero-stat strong{display:block;font-size:27px;line-height:1.4;font-weight:600;color:#274773;font-variant-numeric:tabular-nums}.hero-stat span{font-size:11px;color:#637468}
#progress{background:linear-gradient(90deg,#2348db,#8ba9f0);box-shadow:0 1px 7px #2348db55}.side-inner{animation:sidebarIn .6s cubic-bezier(.16,1,.3,1) both}@keyframes sidebarIn{from{opacity:.3;translate:-12px 0}to{opacity:1;translate:0 0}}
.motion-ready .motion-reveal{opacity:.25;translate:0 16px;transition:opacity .55s ease,translate .55s cubic-bezier(.16,1,.3,1);transition-delay:var(--arrival-delay,0ms)}.motion-ready .motion-reveal.motion-in{opacity:1;translate:0 0}.motion-ready .term.motion-reveal{translate:var(--arrival-x,0px) 14px}.motion-ready .term.motion-in{translate:0 0}.motion-ready .term.reveal{opacity:1;transform:none}.motion-ready .mapbox .m-pill{transition:scale .4s cubic-bezier(.16,1,.3,1),opacity .4s ease,background .18s,border-color .18s;transition-delay:var(--pill-delay,0ms),var(--pill-delay,0ms),0ms,0ms}.motion-ready .mapbox:not(.motion-in) .m-pill{scale:.88;opacity:.2}.motion-ready .mapbox.motion-in .m-pill{scale:1;opacity:1}
.part-title .icon,.part-title svg{transition:transform .2s}.part-title.motion-in .icon{animation:iconPop .5s ease}@keyframes iconPop{0%{scale:.8}65%{scale:1.08}100%{scale:1}}
.term{position:relative;isolation:isolate;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}.term::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(200px circle at var(--spot-x,50%) var(--spot-y,50%),#2348db0e,transparent 75%);opacity:0;transition:opacity .2s}.term::after{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;background:#2348db;scale:1 0;transform-origin:bottom;transition:scale .2s;pointer-events:none}.term .num{transition:transform .2s}.product{transition:transform .22s,box-shadow .22s;border-radius:10px}.p-logo{position:relative;overflow:hidden;transition:transform .25s}.p-logo::after{content:'';position:absolute;inset:-30% -110%;background:linear-gradient(110deg,transparent 43%,#ffffff44 50%,transparent 57%);animation:logoShine 4.4s ease-in-out infinite;pointer-events:none}@keyframes logoShine{0%,30%{translate:-35% 0}70%,100%{translate:35% 0}}
.p-badge,.p-name,.product li,.avatar,.tags span,.toc-link{transition:transform .2s,color .2s,background .2s}.p-link::after{display:inline-block;transition:transform .2s,opacity .2s}.m-pill:active,.toc-link:active,.primary-link:active,button:active{transform:scale(.97)}:focus-visible{outline:2px solid #2348db;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.term:hover{transform:translateY(-3px);box-shadow:0 8px 18px #192b2509}.term:hover::before{opacity:1}.term:hover::after{scale:1 1}.term:hover .num{transform:scale(1.08) rotate(-5deg)}.product:hover{transform:translateY(-3px);box-shadow:0 8px 20px #192b2509}.product:hover .p-logo{transform:scale(1.08) rotate(-4deg)}.product:hover .p-badge{transform:translateY(-2px)}.product:hover li.adv,.product:hover li.lim{transform:translateX(3px)}.product:hover .p-link::after{transform:translate(3px,-3px);opacity:.65}.part-title .icon:hover,.avatar:hover{transform:translateY(-2px) rotate(-4deg)}.tags span:hover,.toc-link:hover{transform:translateY(-2px)}}
.product-filter-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.product-filter-bar button{background:white;border:1px solid #dce4dd;border-radius:7px;padding:9px 12px;font:inherit;font-size:12px;min-height:40px;color:#506859;cursor:pointer}.product-filter-bar button[aria-pressed=true]{background:#eaf0ff;color:#2348b8;border-color:#bacdfa}.filter-status,.free-source-note{grid-column:1/-1;font-size:12px;color:#64756c;margin:0 0 12px}.product[hidden],.group-title[hidden]{display:none!important}
.mobile-search{display:none;margin:16px 0}.mobile-search input{min-height:46px;width:100%;border:1px solid #dce5da;border-radius:8px;background:white;padding:10px 14px;font:inherit}.shortcut-label{font-size:10px;color:#76877b;display:block;padding-top:6px}.side-res small{display:block;font-size:11px;line-height:1.6;color:#6b7d71;margin-top:4px}.side-res b{color:#2348db;background:#eaf0ff}.mobile-results{background:white;border:1px solid #dce5da;border-radius:8px;margin-top:8px;padding:6px;max-height:320px;overflow:auto}.mobile-results:empty{display:none}.mobile-results a{display:block;padding:10px;color:#294c39;text-decoration:none;font-size:13px}.mobile-results small{display:block;font-size:11px;color:#64756c}.side-empty{padding:12px;font-size:13px;color:#64756c}
#toTop{overflow:visible}#toTop::before{content:'';position:absolute;inset:-3px;border:1px solid #2348db44;border-radius:50%;animation:topPulse 2.8s ease-out infinite;pointer-events:none}@keyframes topPulse{0%{scale:.9;opacity:.6}80%,100%{scale:1.45;opacity:0}}
.detail{max-height:min(560px,calc(100dvh - 32px));overflow:auto;border-radius:12px;border:1px solid #dce4dd;background:#fff;box-shadow:0 12px 26px #192b2514}.detail.show{animation:detailIn .2s ease both}@keyframes detailIn{from{opacity:.5;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-width:1279px){.mobile-search{display:block}.side-inner{animation:none}.hero .deco{display:none!important}}
@media(max-width:1099px){.motion-ready .term.motion-reveal{translate:0 12px}.motion-ready .term.motion-in{translate:0 0}}
@media(min-width:1100px){.part .terms{display:grid;column-count:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.part > .terms > .term{min-width:0;margin:0}}
@media(max-width:639px){header.hero{padding:24px 20px!important}.hero h1{font-size:28px!important}.hero-stats{gap:8px}.hero-stat strong{font-size:24px}.detail{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:100%!important;max-height:78dvh;border-radius:16px 16px 0 0}.product-filter-bar button{min-height:44px}.term::after{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .motion-reveal,.motion-ready .term.motion-reveal{opacity:1!important;translate:0 0!important}.motion-ready .mapbox .m-pill{opacity:1!important;scale:1!important}.hero .deco{transform:none!important}.term:hover,.product:hover,.term .num,.p-logo,.p-badge,.product li,.avatar,.tags span,.toc-link{transform:none!important}.detail.show{translate:0 0!important}#toTop::before{display:none}}

.system-map .system-node{animation:none!important}

.term::before{width:auto;transform:none!important}
.part-title.motion-in::before{animation:iconPop .5s ease}
@media(max-width:639px){.detail,.detail.show{transform:none!important}body:has(.detail.show) #detailMask{visibility:visible;opacity:1;background:#192b2533}.detail{padding-bottom:max(18px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.part-title.motion-in::before{animation:none!important}.m-pill:active,button:active,.primary-link:active{transform:none!important}}
