/* experience layer */
.env-lines{position:absolute;inset:0;width:100%;height:100%}

/* 3D tilt */
.tilt{transform-style:preserve-3d}
.tilt.tilting{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-4px,0)!important;transition:transform .15s ease-out,box-shadow .5s var(--ease-out)!important;box-shadow:0 30px 60px -32px rgba(31,26,21,.5)}
.tilt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),rgba(255,255,255,0) 45%);opacity:0;transition:opacity .4s var(--ease-out);z-index:3}
.tilt.tilting::after{opacity:1}
.crit,.pcard,.feat,.pack,.usp .ph,.flav{position:relative}

/* page transition veil */
.xp-veil{position:fixed;inset:0;z-index:200;pointer-events:none;display:grid;place-items:center;background:var(--ink);clip-path:inset(0 100% 0 0);transition:clip-path .5s cubic-bezier(.65,0,.35,1)}
.xp-veil.cover{clip-path:inset(0 0 0 0);pointer-events:auto}
.xp-veil.out{clip-path:inset(0 0 0 100%)}
.xp-veil.instant{transition:none}
.xp-veil svg{width:min(80vw,900px);height:120px;overflow:visible}
.xp-veil path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.xp-veil.cover path{stroke-dashoffset:0;transition:stroke-dashoffset .6s .1s cubic-bezier(.65,0,.35,1)}

/* route diagrams */
.xr{position:relative}
.xr-wrap{width:100%}
.xr-svg{width:100%;height:auto;overflow:visible;display:block}
.xr-path{fill:none;stroke:var(--xr-line,rgba(127,112,96,.55));stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1),stroke .4s,stroke-width .4s,opacity .4s;vector-effect:non-scaling-stroke}
.xr-svg.in .xr-path{stroke-dashoffset:0}
.xr-path.hot{stroke:var(--xr-hot,#F1C24B)}
.xr-path.muted{stroke-dasharray:.012 .018;opacity:.55}
.xr-svg.in .xr-path.muted{stroke-dashoffset:0}
.xr-svg.focus .xr-path:not(.lit){opacity:.22}
.xr-path.lit{stroke:var(--accent);stroke-width:2.6}
.xr-dot{fill:var(--xr-line-solid,#8C7F70);opacity:0;transition:opacity .6s}
.xr-dot.hot{fill:var(--xr-hot,#F1C24B)}
.xr-svg.in .xr-dot{opacity:1}
.xr-node{cursor:pointer;outline:none}
.xr-node .xr-hit{fill:transparent}
.xr-node .xr-c{fill:var(--xr-node,#2E261F);stroke:var(--xr-stroke,rgba(239,229,212,.4));stroke-width:1.5;transition:transform .45s cubic-bezier(.34,1.56,.64,1),fill .3s;transform-box:fill-box;transform-origin:center}
.xr-node.hub .xr-c,.xr-node.live .xr-c{fill:var(--accent);stroke:none}
.xr-node.here .xr-c{stroke:var(--xr-hot,#F1C24B);stroke-width:3}
.xr-node.muted .xr-c{fill:transparent;stroke-dasharray:3 4}
.xr-node:hover .xr-c,.xr-node:focus-visible .xr-c,.xr-node.lit .xr-c{transform:scale(1.25)}
.xr-node:focus-visible .xr-hit{stroke:var(--accent);stroke-width:2}
.xr-pulse{fill:var(--accent);opacity:.35;transform-box:fill-box;transform-origin:center;animation:xrp 3.2s cubic-bezier(.16,1,.3,1) -1s infinite}
@keyframes xrp{0%{transform:scale(1);opacity:.45}100%{transform:scale(2.8);opacity:0}}
.xr-l{font-family:var(--body);font-weight:700;font-size:17px;fill:var(--xr-text,#EFE5D4)}
.xr-s{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--xr-sub,rgba(239,229,212,.55))}
.xr-b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--xr-hot,#F1C24B)}
.xr-info{margin-top:18px;min-height:86px;border-radius:20px;padding:18px 22px;background:var(--xr-panel,rgba(239,229,212,.06));border:1px solid var(--xr-stroke,rgba(239,229,212,.16));display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;color:var(--xr-text,#EFE5D4)}
.xr-info b{font-family:var(--display);font-size:24px;letter-spacing:-.02em}
.xr-info p{flex:1 1 300px;color:var(--xr-sub2,rgba(239,229,212,.75));margin:0}
.xr-info .mono{opacity:.7}
.xr-info.pop{animation:xrpop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes xrpop{from{transform:translateY(8px) scale(.98);opacity:.4}}
.xr-go{font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding:6px 0}
.xr.light{--xr-line:rgba(31,26,21,.35);--xr-line-solid:#8C7F70;--xr-node:#F7F0E4;--xr-stroke:rgba(31,26,21,.35);--xr-text:#1F1A15;--xr-sub:rgba(31,26,21,.55);--xr-sub2:rgba(31,26,21,.72);--xr-panel:rgba(255,255,255,.45);--xr-hot:var(--accent)}
@media (max-width:680px){.xr-l{font-size:15px}.xr-s{font-size:10px}}

/* dock */
.xp-dock{position:fixed;z-index:120;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.xp-orb{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;background:#1F1A15;color:#F7F0E4;border-radius:999px;padding:10px 18px 10px 10px;font:700 14px var(--body);box-shadow:0 18px 40px -16px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.xp-orb:hover{transform:translateY(-3px) scale(1.03)}
.xp-orb svg{width:36px;height:36px;border-radius:50%;background:var(--accent);padding:6px}
.xp-orb path{fill:none;stroke:#FFF6EA;stroke-width:1.6;stroke-dasharray:60;stroke-dashoffset:0;animation:orbdraw 6s cubic-bezier(.65,0,.35,1) -2s infinite}
.xp-orb circle{fill:#FFF6EA}
@keyframes orbdraw{0%{stroke-dashoffset:60}40%,100%{stroke-dashoffset:0}}
.xp-dock.hint .xp-orb{animation:hint 1.6s cubic-bezier(.34,1.56,.64,1) 3}
@keyframes hint{0%,100%{transform:none}30%{transform:translateY(-8px) scale(1.05)}}
.xp-dock.hint .xp-orb::after{content:"Explore the group";position:absolute;right:0;bottom:calc(100% + 10px);white-space:nowrap;background:#F7F0E4;color:#1F1A15;font:500 13px var(--body);padding:8px 12px;border-radius:12px;box-shadow:0 10px 30px -12px rgba(0,0,0,.4)}
.xp-orb{position:relative}
.xp-panel{width:min(420px,calc(100vw - 36px));background:#1F1A15;color:#EFE5D4;border-radius:28px;padding:18px 18px 16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform-origin:bottom right;animation:panel .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes panel{from{opacity:0;transform:translateY(14px) scale(.94)}}
.xp-head{display:flex;justify-content:space-between;align-items:center;color:rgba(239,229,212,.65)}
.xp-x{width:40px;height:40px;border-radius:50%;border:0;background:rgba(239,229,212,.1);color:#EFE5D4;cursor:pointer;font-size:15px}
.xp-map .xr-info{display:none}
.xp-map{--accent:#E0654B;margin:4px -6px 0}
.xp-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.xp-tg{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(239,229,212,.25);background:transparent;color:#EFE5D4;border-radius:999px;padding:8px 14px 8px 8px;font:500 13px var(--body);cursor:pointer;min-height:40px}
.xp-sw{width:30px;height:18px;border-radius:99px;background:rgba(239,229,212,.2);position:relative;transition:background .3s}
.xp-sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#EFE5D4;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.xp-tg[aria-pressed="true"] .xp-sw{background:#E0654B}
.xp-tg[aria-pressed="true"] .xp-sw::after{transform:translateX(12px)}
.xp-pitch{margin-left:auto;color:#F1C24B;font-weight:700;text-decoration:none;font-size:14px;padding:8px 4px}
@media (max-width:520px){.xp-orb span{display:none}.xp-orb{padding:8px}}
@media (prefers-reduced-motion:reduce){.xp-veil{display:none}}