/* ===== PXP STUDIO — shared layer across all 3 directions ===== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,75..125,400..900;1,75..125,400..900&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:#080a18;
  --ink-2:#0d1130;
  --paper:#c4caf0;
  --paper-2:#d8dcf6;
  --blue:#4f63ff;
  --blue-bright:#6c8bff;
  --violet:#8b5cf6;
  --halo:#a9b6ff;
  --white:#eef0ff;
  --mono:"Space Mono",ui-monospace,monospace;
  --sans:"Archivo","Archivo",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}

.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em}

/* ===== Direction switcher (shared) ===== */
.pxp-switch{
  position:fixed;z-index:9999;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:stretch;gap:1px;
  background:rgba(8,10,24,.62);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(169,182,255,.28);border-radius:100px;padding:5px;
  font-family:var(--mono);box-shadow:0 18px 50px -18px rgba(0,0,0,.7);
}
.pxp-switch .lbl{
  display:flex;align-items:center;gap:7px;padding:0 14px 0 16px;color:#aab2e6;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
}
.pxp-switch .lbl b{color:#fff;font-weight:700}
.pxp-switch .dot{width:6px;height:6px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 10px var(--blue-bright);animation:pxpPulse 2.4s ease-in-out infinite}
@keyframes pxpPulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.pxp-switch a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:78px;padding:8px 16px;border-radius:100px;color:#c3c9ee;
  transition:background .35s,color .35s;line-height:1.1;
}
.pxp-switch a .n{font-size:13px;font-weight:700;letter-spacing:.05em}
.pxp-switch a .t{font-size:8px;letter-spacing:.2em;opacity:.72;margin-top:2px;text-transform:uppercase}
.pxp-switch a:hover{color:#fff}
.pxp-switch a.active{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff}
.pxp-switch a.active .t{opacity:.85}
@media(max-width:560px){
  .pxp-switch a{min-width:62px;padding:7px 10px}
  .pxp-switch .lbl{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}