.pna-canon-slab {
  --slab-w: 360px;
  --slab-h: 520px;
  --slab-d: 26px;
  --lab-steel-0: #07131a;
  --lab-steel-1: #214853;
  --lab-steel-2: #79bdc8;
  --lab-steel-3: #0b1b22;
  --lab-steel-4: #365f69;
  --lab-steel-5: #c3f5fb;
  --lab-steel-6: #071018;
  --lab-dark-0: #17313a;
  --lab-dark-1: #071118;
  --lab-dark-2: #254c57;
  --lab-dark-3: #050b0f;
  --lab-energy-0: #0b222b;
  --lab-energy-1: #5eeaff;
  --lab-energy-2: #e8fdff;
  --lab-energy-3: #61eaff;
  --lab-energy-4: #0c2028;
  --lab-light: #f2feff;
  --lab-rail: #90eefa;
  --lab-rail-deep: #071018;
  --lab-rail-mid: #2c7281;
  --lab-rail-line: #baf8ff;
  --lab-glass-line: rgba(180, 246, 255, 0.42);
  --lab-frame-inner: #9ef3ff;
  --lab-stroke: #020608;
  --lab-art-tint: rgba(94, 234, 255, 0.08);
  --case-face: var(--lab-steel-6);
  --case-highlight: var(--lab-light);
  --case-mid: var(--lab-steel-4);
  --case-shadow: var(--lab-dark-1);
  --case-line: var(--lab-stroke);
  --case-glow: var(--lab-frame-inner);
  width: var(--slab-w);
  height: var(--slab-h);
  position: relative;
  transform-style: preserve-3d;
  background: transparent;
  color: #11151a;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.66),
    0 0 0 1px rgba(150, 225, 245, 0.14);
}

.pna-canon-slab[data-frame-tier="diamond"] {
  --lab-steel-0: #ffffff;
  --lab-steel-1: #a8d8ef;
  --lab-steel-2: #effcff;
  --lab-steel-3: #78a8c8;
  --lab-steel-4: #ffffff;
  --lab-steel-5: #42677f;
  --lab-steel-6: #f8fdff;
  --lab-dark-0: #effcff;
  --lab-dark-1: #78a8c8;
  --lab-dark-2: #42677f;
  --lab-dark-3: #23465a;
  --lab-energy-0: #23465a;
  --lab-energy-1: #50e1ff;
  --lab-energy-2: #ffffff;
  --lab-energy-3: #96ffff;
  --lab-energy-4: #42677f;
  --lab-light: #ffffff;
  --lab-rail: #b5e9ff;
  --lab-rail-deep: #23465a;
  --lab-rail-mid: #78a8c8;
  --lab-rail-line: #ffffff;
  --lab-glass-line: rgba(255, 255, 255, 0.52);
  --lab-frame-inner: #ffffff;
  --lab-stroke: #23465a;
  --lab-art-tint: rgba(80, 225, 255, 0.07);
}

.pna-canon-slab[data-frame-tier="gold"] {
  --lab-steel-0: #fff2bb;
  --lab-steel-1: #9a6a22;
  --lab-steel-2: #ffe79a;
  --lab-steel-3: #5b3a15;
  --lab-steel-4: #f0c25a;
  --lab-steel-5: #2f2210;
  --lab-steel-6: #fff4c5;
  --lab-dark-0: #3a2812;
  --lab-dark-1: #2d1d09;
  --lab-dark-2: #8d5e1e;
  --lab-dark-3: #1e1407;
  --lab-energy-0: #3a2812;
  --lab-energy-1: #ffc53a;
  --lab-energy-2: #fff4b8;
  --lab-energy-3: #ffe25e;
  --lab-energy-4: #2d1c08;
  --lab-light: #fff7cf;
  --lab-rail: #ffe39a;
  --lab-rail-deep: #2d1d09;
  --lab-rail-mid: #8d5e1e;
  --lab-rail-line: #fff4c5;
  --lab-glass-line: rgba(255, 232, 170, 0.44);
  --lab-frame-inner: #fff4c5;
  --lab-stroke: #1e1407;
  --lab-art-tint: rgba(255, 198, 42, 0.06);
}

.pna-canon-slab[data-frame-tier="tungsten"] {
  --lab-steel-0: #eef7fb;
  --lab-steel-1: #6e777f;
  --lab-steel-2: #d9e3e8;
  --lab-steel-3: #3b4046;
  --lab-steel-4: #c8d2d8;
  --lab-steel-5: #20242a;
  --lab-steel-6: #f3fbff;
  --lab-dark-0: #20242a;
  --lab-dark-1: #15191f;
  --lab-dark-2: #4b535a;
  --lab-dark-3: #080a0d;
  --lab-energy-0: #20242a;
  --lab-energy-1: #7dd7ff;
  --lab-energy-2: #f8fdff;
  --lab-energy-3: #9faab2;
  --lab-energy-4: #15191e;
  --lab-light: #f8fdff;
  --lab-rail: #dce7eb;
  --lab-rail-deep: #15191e;
  --lab-rail-mid: #687179;
  --lab-rail-line: #f3fbff;
  --lab-glass-line: rgba(245, 252, 255, 0.30);
  --lab-frame-inner: #f3fbff;
  --lab-stroke: #080a0d;
  --lab-art-tint: rgba(125, 215, 255, 0.05);
}

.pna-canon-slab[data-flat="true"] {
  cursor: default;
  box-shadow: none;
}

.pna-slab-face,
.pna-slab-edge,
.pna-canon-slab .frame-svg {
  position: absolute;
}

.pna-slab-face {
  top: 0;
  left: 0;
  width: var(--slab-w);
  height: var(--slab-h);
  border-radius: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.pna-slab-front {
  transform: translateZ(calc(var(--slab-d) / 2));
  background: transparent;
  overflow: visible;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--case-line) 62%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--case-highlight) 22%, transparent),
    0 30px 80px rgba(0, 0, 0, 0.7);
}

.pna-slab-back {
  transform: translateZ(calc(var(--slab-d) / -2)) rotateY(180deg);
  background: #0a0c0f url("../assets/card-back.png") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--case-glow) 24%, transparent),
    inset 0 0 50px color-mix(in srgb, var(--case-shadow) 70%, #000000);
}

.pna-slab-edge {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--case-highlight) 58%, transparent), color-mix(in srgb, var(--case-mid) 54%, var(--case-shadow)) 30%, color-mix(in srgb, var(--case-shadow) 86%, #000000) 70%, color-mix(in srgb, var(--case-glow) 44%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-line) 64%, transparent);
}

.pna-edge-top,
.pna-edge-bottom {
  width: var(--slab-w);
  height: var(--slab-d);
  left: 0;
}

.pna-edge-top {
  top: calc(var(--slab-d) * -0.5);
  transform: rotateX(90deg);
  transform-origin: 50% 50%;
}

.pna-edge-bottom {
  top: calc(var(--slab-h) - var(--slab-d) * 0.5);
  transform: rotateX(-90deg);
  transform-origin: 50% 50%;
}

.pna-edge-left,
.pna-edge-right {
  width: var(--slab-d);
  height: var(--slab-h);
  top: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--case-highlight) 58%, transparent), color-mix(in srgb, var(--case-mid) 54%, var(--case-shadow)) 30%, color-mix(in srgb, var(--case-shadow) 86%, #000000) 70%, color-mix(in srgb, var(--case-glow) 44%, transparent));
}

.pna-edge-left {
  left: calc(var(--slab-d) * -0.5);
  transform: rotateY(-90deg);
  transform-origin: 50% 50%;
}

.pna-edge-right {
  left: calc(var(--slab-w) - var(--slab-d) * 0.5);
  transform: rotateY(90deg);
  transform-origin: 50% 50%;
}

.pna-canon-slab .frame-svg {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 1;
}

.pna-canon-slab .frame-svg text,
.pna-canon-slab .frame-svg image {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.pna-canon-slab .layer {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.pna-canon-slab[data-step="final"] .layout,
.pna-canon-slab[data-step="final"] .shell,
.pna-canon-slab[data-step="final"] .corners,
.pna-canon-slab[data-step="final"] .rails,
.pna-canon-slab[data-step="final"] .style {
  opacity: 1;
}

.pna-canon-slab[data-step="final"] .infinity-chamber {
  opacity: 0.96;
}

.pna-canon-slab .infinity-chamber {
  opacity: 0;
  mix-blend-mode: screen;
}

.pna-canon-slab .infinity-chamber .depth-slow,
.pna-canon-slab .infinity-chamber .depth-mid,
.pna-canon-slab .infinity-chamber .depth-fast {
  transform-box: fill-box;
  transform-origin: center;
}

.pna-canon-slab .mirror-ring {
  fill: none;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pna-canon-slab .mirror-glow {
  fill: none;
  stroke: var(--lab-energy-1);
  stroke-linecap: round;
  opacity: 0.34;
  stroke-dasharray: 86 54;
}

.pna-canon-slab .mirror-vanish {
  opacity: 0.38;
}

.pna-canon-slab .pna-foil-canvas {
  position: absolute;
  left: 15.5452%;
  top: 26.5934%;
  width: 68.9096%;
  height: 49.7854%;
  border-radius: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.78;
  transform: translateZ(1px);
  transition: opacity 0.16s ease;
}

.pna-canon-slab[data-foil-mode="none"] .pna-foil-canvas {
  opacity: 0;
}

.pna-canon-slab .pna-slab-glass {
  position: absolute;
  inset: 0;
  border-radius: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.32;
  transform: translateZ(2px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pna-canon-slab .pna-slab-glass::before,
.pna-canon-slab .pna-slab-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pna-canon-slab .pna-slab-glass::before {
  background:
    linear-gradient(112deg, transparent 9%, rgba(255, 255, 255, 0.03) 28%, rgba(255, 255, 255, 0.18) 43%, rgba(255, 255, 255, 0.035) 54%, transparent 71%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 17%, transparent 78%, rgba(255, 255, 255, 0.08));
  transform: translateX(calc(var(--mx, 0) * 0.18px));
}

.pna-canon-slab .pna-slab-glass::after {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.20), transparent 7%),
    radial-gradient(circle at 83% 88%, rgba(255, 255, 255, 0.12), transparent 10%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.10), transparent 9%, transparent 91%, rgba(255, 255, 255, 0.08));
  opacity: 0.74;
}

.pna-canon-slab [data-pna-art] {
  image-rendering: auto;
}

.pna-canon-slab[data-pixelated="true"] [data-pna-art] {
  image-rendering: pixelated;
}

.pna-canon-slab [data-pna-footer][data-long="true"] {
  animation: pnaFooterTicker 9s linear infinite;
}

@keyframes pnaFooterTicker {
  0%, 16% { transform: translateX(0); }
  84%, 100% { transform: translateX(var(--pna-footer-shift, -280px)); }
}

.pna-card-slab-wrap .pna-canon-slab,
.card-slab-wrap .pna-canon-slab {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: scale(var(--slab-scale, 0.55));
}

.vslab-3d > .pna-canon-slab,
.slab > .pna-canon-slab {
  transform: none;
  box-shadow: none;
}