.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"],
.pna-canon-slab[data-frame-tier="diamond-2"] {
  --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"],
.pna-canon-slab[data-frame-tier="gold-2"],
.pna-canon-slab[data-frame-tier="black-gold-2"] {
  --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"],
.pna-canon-slab[data-frame-tier="tungsten-2"] {
  --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-frame-tier="teal-2"] {
  --lab-steel-0: #071b1e;
  --lab-steel-1: #0e3034;
  --lab-steel-2: #1e626b;
  --lab-steel-3: #73f2ff;
  --lab-steel-4: #104048;
  --lab-steel-5: #061216;
  --lab-steel-6: #061114;
  --lab-dark-0: #0c252a;
  --lab-dark-1: #041013;
  --lab-dark-2: #174b52;
  --lab-dark-3: #020607;
  --lab-energy-1: #5ef4ff;
  --lab-light: #d7ffff;
  --lab-rail: #62eefa;
  --lab-rail-deep: #041013;
  --lab-rail-mid: #18808a;
  --lab-rail-line: #b7fbff;
  --lab-glass-line: rgba(116, 244, 255, 0.34);
  --lab-frame-inner: #79f5ff;
  --lab-stroke: #010607;
  --case-face: #061114;
  --case-highlight: #bffbff;
  --case-mid: #17646b;
  --case-shadow: #020607;
  --case-line: #010607;
  --case-glow: #5ef4ff;
  --lab-art-tint: rgba(94, 244, 255, 0.08);
}

.pna-canon-slab[data-frame-tier="diamond-2"] {
  --lab-steel-0: #f8ffff;
  --lab-steel-1: #bfdfee;
  --lab-steel-2: #ffffff;
  --lab-steel-3: #8cc6df;
  --lab-steel-4: #e8fbff;
  --lab-steel-5: #5c879d;
  --lab-steel-6: #f4fdff;
  --lab-dark-0: #f7ffff;
  --lab-dark-1: #98c3d8;
  --lab-dark-2: #d8f6ff;
  --lab-dark-3: #31576a;
  --lab-energy-1: #80efff;
  --lab-light: #ffffff;
  --lab-rail: #dffbff;
  --lab-rail-deep: #40677a;
  --lab-rail-mid: #9ed6ea;
  --lab-rail-line: #ffffff;
  --lab-glass-line: rgba(255, 255, 255, 0.58);
  --lab-frame-inner: #ffffff;
  --lab-stroke: #275066;
  --case-face: #f4fdff;
  --case-highlight: #ffffff;
  --case-mid: #a9d7ea;
  --case-shadow: #6a9bb4;
  --case-line: #31576a;
  --case-glow: #ffffff;
  --lab-art-tint: rgba(128, 239, 255, 0.07);
}

.pna-canon-slab[data-frame-tier="gold-2"] {
  --lab-steel-0: #ffe7a2;
  --lab-steel-1: #b87416;
  --lab-steel-2: #ffc746;
  --lab-steel-3: #fff2b8;
  --lab-steel-4: #9c5e0d;
  --lab-steel-5: #2f1b05;
  --lab-steel-6: #7b4508;
  --lab-dark-0: #4d2e07;
  --lab-dark-1: #201104;
  --lab-dark-2: #9e650f;
  --lab-dark-3: #130a02;
  --lab-energy-1: #ffc846;
  --lab-light: #fff1aa;
  --lab-rail: #ffd35d;
  --lab-rail-deep: #251302;
  --lab-rail-mid: #a96d12;
  --lab-rail-line: #fff0a2;
  --lab-glass-line: rgba(255, 216, 107, 0.44);
  --lab-frame-inner: #ffe27b;
  --lab-stroke: #170b01;
  --case-face: #5c3508;
  --case-highlight: #fff0a2;
  --case-mid: #b87514;
  --case-shadow: #180c01;
  --case-line: #170b01;
  --case-glow: #ffd35d;
  --lab-art-tint: rgba(255, 200, 70, 0.06);
}

.pna-canon-slab[data-frame-tier="tungsten-2"] {
  --lab-steel-0: #f3f8fb;
  --lab-steel-1: #8a969f;
  --lab-steel-2: #c9d4dc;
  --lab-steel-3: #313941;
  --lab-steel-4: #a9b5bf;
  --lab-steel-5: #171d24;
  --lab-steel-6: #dbe5eb;
  --lab-dark-0: #4a535c;
  --lab-dark-1: #10161d;
  --lab-dark-2: #76828d;
  --lab-dark-3: #070a0e;
  --lab-energy-1: #bff2ff;
  --lab-light: #f8fcff;
  --lab-rail: #d6e2e9;
  --lab-rail-deep: #111820;
  --lab-rail-mid: #6c7883;
  --lab-rail-line: #eef7fb;
  --lab-glass-line: rgba(225, 242, 250, 0.34);
  --lab-frame-inner: #f4fbff;
  --lab-stroke: #080d12;
  --case-face: #9daab4;
  --case-highlight: #f4fbff;
  --case-mid: #6f7b86;
  --case-shadow: #111820;
  --case-line: #080d12;
  --case-glow: #d8f5ff;
  --lab-art-tint: rgba(191, 242, 255, 0.05);
}

.pna-canon-slab[data-frame-tier="weathered"] {
  --lab-steel-0: #746d64;
  --lab-steel-1: #383634;
  --lab-steel-2: #57514b;
  --lab-steel-3: #181818;
  --lab-steel-4: #403c37;
  --lab-steel-5: #10100f;
  --lab-steel-6: #252420;
  --lab-dark-0: #2e2a25;
  --lab-dark-1: #100c09;
  --lab-dark-2: #4a372b;
  --lab-dark-3: #080604;
  --lab-energy-1: #a95426;
  --lab-light: #b5aa98;
  --lab-rail: #75665a;
  --lab-rail-deep: #120c08;
  --lab-rail-mid: #5c5148;
  --lab-rail-line: #9a816c;
  --lab-glass-line: rgba(155, 99, 67, 0.20);
  --lab-frame-inner: #8d6447;
  --lab-stroke: #080604;
  --case-face: #252420;
  --case-highlight: #a89e8d;
  --case-mid: #4b453d;
  --case-shadow: #0d0906;
  --case-line: #070504;
  --case-glow: #8f542f;
  --lab-art-tint: rgba(169, 84, 38, 0.04);
}

.pna-canon-slab[data-frame-tier="black-gold-2"] {
  --lab-steel-0: #030303;
  --lab-steel-1: #070605;
  --lab-steel-2: #10100e;
  --lab-steel-3: #211706;
  --lab-steel-4: #0b0906;
  --lab-steel-5: #030303;
  --lab-steel-6: #000000;
  --lab-dark-0: #111111;
  --lab-dark-1: #020202;
  --lab-dark-2: #241804;
  --lab-dark-3: #000000;
  --lab-energy-0: #1a0d02;
  --lab-energy-1: #ffb31e;
  --lab-energy-2: #fff0a8;
  --lab-energy-3: #d27708;
  --lab-energy-4: #120701;
  --lab-light: #ffe4a0;
  --lab-rail: #ffb31e;
  --lab-rail-deep: #050301;
  --lab-rail-mid: #8b5408;
  --lab-rail-line: #ffdf74;
  --lab-glass-line: rgba(255, 194, 58, 0.28);
  --lab-frame-inner: #ffc13d;
  --lab-stroke: #000000;
  --case-face: #030303;
  --case-highlight: #f5c34b;
  --case-mid: #1d1203;
  --case-shadow: #000000;
  --case-line: #000000;
  --case-glow: #ffbb2a;
  --lab-art-tint: rgba(255, 179, 30, 0.05);
}

.pna-canon-slab[data-frame-tier="none"] .shell,
.pna-canon-slab[data-frame-tier="none"] .corners,
.pna-canon-slab[data-frame-tier="none"] .rails,
.pna-canon-slab[data-frame-tier="none"] .style,
.pna-canon-slab[data-frame-tier="none"] .geometry,
.pna-canon-slab[data-frame-tier="none"] .pna-glb-frame-canvas {
  opacity: 0 !important;
  pointer-events: none;
}

.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;
}