.learning-page{position:relative;isolation:isolate;width:min(calc(100% - 44px),1160px);margin:auto;padding:45px 0 80px}.learning-head{text-align:center;max-width:850px;margin:0 auto 48px}.learning-head h1{font:900 clamp(48px,7vw,82px)/1.02 var(--ecg-font-pixel);letter-spacing:-.075em;text-shadow:5px 5px #020305,8px 8px #192333}.learning-head h1 em{font-style:normal;color:transparent;background:linear-gradient(90deg,var(--ecg-red),#dfe5ec,var(--ecg-cyan));-webkit-background-clip:text;background-clip:text;text-shadow:none}.learning-head>p:last-child{max-width:620px;margin:20px auto;color:var(--ecg-muted);font:14px/1.7 var(--ecg-font-pixel)}.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.four-routes{grid-template-columns:repeat(4,1fr)}.single-route{grid-template-columns:minmax(280px,390px);justify-content:center}.route-card{--route:var(--ecg-cyan);position:relative;display:grid;grid-template-rows:auto 220px 1fr;min-height:470px;padding:10px;border:0;background:#05080d;color:#fff;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 3px #38485b,inset 0 0 0 7px #111a25,inset 0 -11px #020305,0 9px #000;clip-path:polygon(10px 0,calc(100% - 10px) 0,calc(100% - 10px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 10px,100% 10px,100% calc(100% - 10px),calc(100% - 4px) calc(100% - 10px),calc(100% - 4px) calc(100% - 4px),calc(100% - 10px) calc(100% - 4px),calc(100% - 10px) 100%,10px 100%,10px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 10px),0 calc(100% - 10px),0 10px,4px 10px,4px 4px,10px 4px);transition:.2s}.route-card.active:hover,.route-card.active:focus-visible{transform:translateY(-10px);outline:none;box-shadow:inset 0 0 0 3px var(--route),inset 0 0 0 7px #111a25,inset 0 -11px #020305,0 12px #000,0 23px 40px color-mix(in srgb,var(--route) 25%,#000)}.route-card.active:active,.route-card.active.is-pressed{transform:translateY(5px) scale(.985)}.route-title{display:flex;justify-content:space-between;align-items:center;padding:16px;background:linear-gradient(#17313b,#0c171e);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--route) 55%,#354354),inset 0 -5px #05080d}.route-title h2{font:900 clamp(20px,2vw,27px)/1 var(--ecg-font-pixel);letter-spacing:-.06em}.route-title span{order:2;padding:5px;color:var(--route);background:#05080d;font:900 9px var(--ecg-font-pixel)}.route-art{position:relative;display:grid;place-items:center;overflow:hidden;margin-top:5px;background:radial-gradient(circle,color-mix(in srgb,var(--route) 18%,transparent),transparent 55%),linear-gradient(#101a27,#060a10);box-shadow:inset 0 0 0 4px #020407,inset 0 0 0 7px color-mix(in srgb,var(--route) 24%,#1a2632)}.route-art:before{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff08 2px,transparent 2px),linear-gradient(90deg,#ffffff08 2px,transparent 2px);background-size:20px 20px}.route-info{display:grid;grid-template-rows:1fr auto;padding:20px 17px;background:linear-gradient(#111925,#080d14);box-shadow:inset 0 0 0 2px #283746}.route-info p{color:#c5ccd6;font:14px/1.65 var(--ecg-font-pixel)}.route-info>span{display:flex;justify-content:space-between;margin-top:17px;padding:14px;background:linear-gradient(#dbfbff,var(--route));color:#041014;box-shadow:inset 0 0 0 3px var(--route),inset 0 -6px #08616b,0 6px #010203;font:900 11px var(--ecg-font-pixel)}.pixel-family,.pixel-handheld,.pixel-repair{position:relative;z-index:2;display:flex;align-items:end;gap:8px}.pixel-family i{display:grid;place-items:center;width:52px;height:75px;background:#18303d;color:var(--route);border:5px solid #061018;box-shadow:0 0 0 3px var(--route),6px 6px #020406;font:900 13px var(--ecg-font-pixel)}.pixel-family i:nth-child(2){height:105px}.pixel-family i:nth-child(3){width:75px;height:60px}.pixel-handheld{width:150px;height:80px;background:#18303d;border:6px solid #061018;box-shadow:0 0 0 4px var(--route),9px 9px #020406}.pixel-handheld i{position:absolute;left:38px;right:38px;top:12px;bottom:12px;background:#061018}.pixel-handheld b:before,.pixel-handheld b:after{content:"";position:absolute;top:31px;width:12px;height:12px;background:var(--route)}.pixel-handheld b:before{left:12px}.pixel-handheld b:after{right:12px}.pixel-repair{display:grid;place-items:center;width:135px;height:95px;background:#18303d;border:6px solid #061018;box-shadow:0 0 0 4px var(--route),9px 9px #020406}.pixel-repair b{color:var(--route);font-size:36px}.pixel-repair i{position:absolute;left:-25px;bottom:-18px;color:var(--ecg-red);font:900 38px var(--ecg-font-pixel)}.route-card.active:hover .pixel-family,.route-card.active:hover .pixel-handheld,.route-card.active:hover .pixel-repair{animation:routeHover .7s steps(2,end) infinite}.locked-route{filter:grayscale(.85) brightness(.65);cursor:not-allowed}.locked-route .route-title{background:linear-gradient(#303640,#171b22)}.locked-route .route-info>span{background:#242a32;color:#747e8a;box-shadow:inset 0 0 0 3px #444d59,inset 0 -6px #0b0e12,0 6px #010203}.route-lock{position:relative;z-index:5;display:grid;place-items:center;width:76px;height:67px;background:#303742;color:#9099a6;box-shadow:inset 0 0 0 4px #10151b,inset 0 0 0 7px #687382;font:900 27px var(--ecg-font-pixel)}.route-chain{position:absolute;z-index:4;width:150%;height:18px;background:repeating-linear-gradient(90deg,#242b34 0 10px,#7c8795 10px 15px,#303844 15px 25px,#11161d 25px 31px);border:4px solid #090c10}.rc1{transform:rotate(28deg)}.rc2{transform:rotate(-28deg)}.locked-route.is-denied{animation:routeShake .48s steps(2,end)}.locked-route.is-denied .route-lock{color:#ffb0bf;background:#762336;box-shadow:inset 0 0 0 4px #19040a,inset 0 0 0 7px var(--ecg-red),0 0 25px #ff285888}@keyframes routeHover{50%{transform:translateY(-7px)}}@keyframes routeShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-7px)}80%{transform:translateX(7px)}}@media(max-width:1050px){.route-grid,.four-routes{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.learning-page{width:calc(100% - 28px);padding-top:30px}.learning-head h1{font-size:clamp(38px,11vw,58px)}.learning-head>p:last-child{font-size:13px}.route-grid,.four-routes{grid-template-columns:1fr}.route-card{min-height:450px}.route-info p{font-size:15px}.route-info>span{font-size:12px}}@media(prefers-reduced-motion:reduce){.route-card.active:hover .pixel-family,.route-card.active:hover .pixel-handheld,.route-card.active:hover .pixel-repair,.locked-route.is-denied{animation:none}}