.xp{grid-template-columns:minmax(280px,360px) minmax(0,1fr);align-items:start;gap:44px;display:grid;position:relative}.xp-stage{top:calc(var(--nav) + 14px);height:calc(100vh - var(--nav) - 28px);border:1px solid var(--line2);border-radius:var(--radius);z-index:2;background:radial-gradient(ellipse at 60% 40%,#ff6a130f,transparent 60%),linear-gradient(var(--line) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/32px 32px,var(--bg2);background-blend-mode:normal;flex-direction:column;grid-area:1/2;min-height:520px;display:flex;position:sticky;overflow:hidden}.xp-stage:before{content:"";background:linear-gradient(var(--bg2),#0f1216b8);pointer-events:none;position:absolute;inset:0}.xp-hud{border-bottom:1px solid var(--line);background:#0a0c0f99;flex:none;align-items:center;gap:14px;padding:10px 16px;display:flex;position:relative}.xp-title{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:11px;overflow:hidden}.xp-dots{gap:2px;margin-left:auto;display:flex}.xp-dots a{border-radius:6px;place-items:center;width:24px;height:32px;display:grid}.xp-dots i{background:var(--line2);border-radius:50%;width:7px;height:7px;transition:background .3s,transform .3s,box-shadow .3s}.xp-dots a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}.xp-dots a.done i{background:#ff6a1380}.xp-dots a.cur i{background:var(--orange);box-shadow:0 0 10px var(--orange);transform:scale(1.35)}.xp-dots a:hover i{background:var(--text)}.xp-count{letter-spacing:.1em;color:var(--dim);white-space:nowrap;font-size:12px}.xp-count b{color:var(--orange);font-weight:500}.xp-bar{background:0 0;height:2px;position:absolute;bottom:-1px;left:0;right:0}.xp-bar i{background:linear-gradient(90deg,var(--orange),#ffb27a);transform-origin:0;transform:scaleX(var(--p,0));transition:transform .5s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0;box-shadow:0 0 12px #ff6a13b3}.xp-vis{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.xp-steps{grid-area:1/1;padding:28vh 0 46vh;list-style:none}.xp-step{min-height:78vh;scroll-margin-top:calc(var(--nav) + 40px);align-items:center;display:flex}.xp-step>div{background:var(--surface);border:1px solid var(--line);opacity:.38;border-radius:14px;padding:22px 22px 20px;transition:opacity .4s,border-color .4s,box-shadow .4s}.xp-step.on>div{opacity:1;border-color:#ff6a1373;box-shadow:0 20px 50px -30px #ff6a1359}.xp-step .k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:10px;display:block}.xp-step h3{margin-bottom:8px;font-size:22px}.xp-step p{color:#d7dde3;font-size:16px}.xp-step p+p{margin-top:8px}.xp-step strong{color:var(--text)}.xp-step .math{background:var(--bg2);border:1px solid var(--line);font:500 13px/1.55 var(--mono);color:var(--muted);overflow-wrap:anywhere;border-radius:8px;margin-top:12px;padding:10px 12px;display:block}.xp-step .math b{color:var(--orange);font-weight:500}.xp-step a{color:var(--orange);text-underline-offset:3px;text-decoration:underline #ff6a1373}.xp.js [data-at]{opacity:0;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}.xp.js [data-at].vis{opacity:1}.xp-cam{width:100%;height:100%;display:block}.xp-world{transform-origin:0 0;transition:transform .9s cubic-bezier(.65,0,.25,1)}@media (width>=901px) and (width<=1180px){.xp{grid-template-columns:minmax(260px,300px) minmax(0,1fr);gap:28px}.xp-dots{gap:0}.xp-step h3{font-size:20px}.xp-step p{font-size:15.5px}}@media (width<=900px){.xp{--xp-sh:clamp(340px,52vh,540px);display:block}@supports (height:1svh){.xp{--xp-sh:clamp(340px,52svh,540px)}}.xp-stage{top:var(--nav);height:var(--xp-sh);border-top:0;border-radius:0 0 14px 14px;min-height:0;margin:0 -16px;box-shadow:0 18px 30px -12px #000000d9}.xp-dots{display:none}.xp-count{margin-left:auto}.xp-steps{z-index:1;padding:4vh 0 30vh;position:relative}.xp-step{min-height:66vh;display:block}.xp-step>div{top:calc(var(--nav) + var(--xp-sh) + 12px);opacity:.25;padding:16px 16px 14px;position:sticky}.xp-step h3{margin-bottom:6px;font-size:19px}.xp-step p{font-size:15px;line-height:1.55}.xp-step .math{margin-top:10px;padding:8px 10px;font-size:12.5px}}@media (prefers-reduced-motion:reduce){.xp.js [data-at]{opacity:1;transition:none}.xp *,.xp :before,.xp :after{transition:none!important;animation:none!important}.xp-step>div{opacity:1}}