@property --rx { syntax: "<angle>"; inherits: false; initial-value: 10deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.map-wrap {
  perspective: 2200px;
  perspective-origin: 50% 40%;
  padding-left: 4px;
  padding-right: 4px;
}
.map-sizer {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: --rx .3s ease-out, --ry .3s ease-out;
  animation: map-in .5s cubic-bezier(.2, .8, .2, 1) backwards;
  background: none;
  box-shadow: none;
}
@keyframes map-in {
  from {
    --rx: 60deg;
    opacity: 0;
    translate: 0 60px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.map-canvas {
  transform-style: preserve-3d;
}
.edges {
  transform: translateZ(1px);
}
.edges path.gain,
.edges path.loss {
  stroke-dasharray: 6 4;
}
@media (hover: hover) {
  .map-wrap:hover .edges path.gain,
  .map-wrap:hover .edges path.loss {
    animation: edge-flow 1.2s linear infinite;
  }
}
@keyframes edge-flow {
  to {
    stroke-dashoffset: -10;
  }
}
.node {
  transform: translateZ(18px);
  transform-style: preserve-3d;
  transition: transform .25s, background .4s;
  animation: node-in .4s cubic-bezier(.2, .9, .3, 1.3) backwards;
  animation-delay: var(--d, 0s);
}
@keyframes node-in {
  from {
    transform: translateZ(90px) scale(.6);
    opacity: 0;
  }
}
.node .lb {
}@supports (color: color-mix(in srgb, red, red)){.node .lb{
  box-shadow:
    0 1px 0 #fff6 inset,
    0 3px 0 color-mix(in srgb, var(--tint) 70%, #000),
    0 8px 14px -6px #0006;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--tint) 85%, #fff),
      var(--tint))}}
.node.lift {
  transform: translateZ(40px) scale(1.4);
  z-index: 50;
  background: var(--card);
  box-shadow: 0 12px 30px -8px #0009;
}
.node.lift .lb {
}@supports (color: color-mix(in srgb, red, red)){.node.lift .lb{
  box-shadow: 0 4px 0 color-mix(in srgb, var(--strong) 60%, #000), 0 16px 24px -8px #0008}}
.node.flash-up .lb,
.node.flash-down .lb {
  animation: lb-bump .8s ease-out;
}
@keyframes lb-bump {
  30% {
    transform: translateZ(24px) rotateX(-14deg);
  }
}
.node .chg.up {
}@supports (color: color-mix(in srgb, red, red)){.node .chg.up{
  text-shadow: 0 0 10px color-mix(in srgb, var(--up) 60%, transparent)}}
.node .chg.down {
}@supports (color: color-mix(in srgb, red, red)){.node .chg.down{
  text-shadow: 0 0 10px color-mix(in srgb, var(--down) 60%, transparent)}}
.node.pressed {
  transform: translateZ(70px) scale(1.5);
  z-index: 50;
  transition: transform .18s;
}
.sheet-body {
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .map-sizer,
  .node,
  .node .lb,
  .edges path {
    animation: none !important;
  }
}
html,
body {
  overflow-x: hidden;
}
#board,
#profit {
  max-width: none;
  padding-left: 12px;
  padding-right: 12px;
}
#board {
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  align-items: start;
}
#profit .psec,
#profit .pgrid {
  transform-style: preserve-3d;
}
#profit .pgrid {
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}
.group,
.pcard,
.news-card {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateZ(var(--tz, 0px));
  transition: transform .25s ease-out, box-shadow .25s;
}@supports (color: color-mix(in srgb, red, red)){.group,
.pcard,
.news-card{
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, #fff 10%, transparent),
      transparent 40%);
  box-shadow:
    0 1px 0 #fff8 inset,
    0 6px 0 color-mix(in srgb, var(--card) 78%, #000),
    0 24px 40px -14px #0007}}
@media (hover: hover) {
  .group:hover,
  .pcard:hover,
  .news-card:hover {
    --tz: 24px;
  }@supports (color: color-mix(in srgb, red, red)){.group:hover,
  .pcard:hover,
  .news-card:hover{
    box-shadow:
      0 1px 0 #fff8 inset,
      0 8px 0 color-mix(in srgb, var(--card) 72%, #000),
      0 40px 60px -20px #0008}}
}
.tiles {
  transform-style: preserve-3d;
}
.tile {
  transform: translateZ(10px);
  transition: transform .2s, background .4s;
}@supports (color: color-mix(in srgb, red, red)){.tile{
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, #fff 25%, transparent),
      transparent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tint) 65%, #000), 0 8px 14px -6px #0006}}
@media (hover: hover) {
  .tile:hover {
    transform: translateZ(30px) scale(1.04);
  }
}
.tile.pressed {
  transform: translateZ(50px) scale(1.08);
}
.pcard.pressed,
.news-card.pressed {
  --tz: 50px;
}
.tile.flash-up,
.tile.flash-down {
  animation: lb-bump .8s ease-out;
}
.enter .group,
.enter .pcard,
.enter .psec h3 {
  animation: card-in .45s cubic-bezier(.2, .9, .3, 1.15) backwards;
  animation-delay: calc(var(--i, 0) * 25ms);
}
@keyframes card-in {
  from {
    transform: perspective(1000px) rotateX(-50deg) translateY(30px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .group,
  .pcard,
  .news-card,
  .tile {
    animation: none !important;
    transition: none;
  }
}