/* Generated from styles.css for FTP-safe upload. Keep order. */
.rear-film {
  fill: #050607;
  opacity: 0.96;
}

.rear-board rect {
  fill: #070809;
  stroke: rgba(255, 255, 255, 0.18);
}

.rear-board circle {
  fill: #0c0d0e;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.2;
}

.svg-chassis {
  fill: url("#metalTop");
  stroke: rgba(39, 49, 53, 0.9);
  stroke-width: 1.6;
}

.svg-brushed-metal {
  fill: url("#brushedMetalPattern");
  opacity: 0.72;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.svg-inner-ridge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.1;
}

.svg-rim-base-light,
.svg-rim-sweep {
  fill: none;
  pointer-events: none;
}

.svg-rim-base-light {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.2;
  opacity: 0.58;
  mix-blend-mode: screen;
  animation: rimBaseBreath 6.8s ease-in-out infinite;
}

.svg-rim-sweep {
  stroke: rgba(255, 255, 255, 0.74);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 86 914;
  stroke-dashoffset: 1000;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(118, 236, 255, 0.4));
  mix-blend-mode: screen;
  animation: none;
}

.svg-frame-diagonal-light rect,
.svg-screen-diagonal-light rect {
  fill: url("#diagonalSweepGradient");
}

.svg-frame-pointer-light {
  mix-blend-mode: screen;
}

.svg-frame-pointer-glow,
.svg-pointer-glare {
  pointer-events: none;
  transform: translate3d(var(--glare-x), var(--glare-y), 0);
  transform-box: view-box;
  transition: opacity 0.2s ease, transform 0.08s linear;
  will-change: opacity, transform;
}

.svg-frame-pointer-glow {
  fill: url("#framePointerGlow");
  opacity: 0;
}

.display-stack.is-interacting .svg-frame-pointer-glow {
  opacity: 0.62;
}

.svg-frame-diagonal-light {
  opacity: 1;
  mix-blend-mode: screen;
  animation: none;
}

.svg-screen-diagonal-light {
  opacity: 1;
  mix-blend-mode: screen;
  animation: none;
}

.svg-screen-interactive-layer {
  mix-blend-mode: screen;
}

.svg-screen-active-lines {
  fill: url("#interactiveScanPattern");
  opacity: 0.05;
  animation: screenActivityShift 2.6s linear infinite;
  transform-box: fill-box;
  will-change: opacity, transform;
}

.display-stack.is-interacting .svg-screen-active-lines {
  opacity: 0.16;
  animation-duration: 1.2s;
}

.svg-pointer-glare {
  fill: url("#interactivePointerGlow");
  opacity: 0;
}

.display-stack.is-interacting .svg-pointer-glare {
  opacity: 0.5;
}

.svg-click-flash {
  fill: #ffffff;
  opacity: 0;
}

.display-stack.is-tapped .svg-click-flash {
  animation: moduleTapFlash 0.62s ease-out;
}

.svg-corner-glows circle {
  fill: url("#rimCornerGlow");
  opacity: 0;
  mix-blend-mode: screen;
  transform-box: fill-box;
  transform-origin: center;
  animation: none;
}

.svg-corner-glows circle:nth-child(2) {
  animation-delay: -1.4s;
}

.svg-corner-glows circle:nth-child(3) {
  animation-delay: -2.8s;
}

.svg-corner-glows circle:nth-child(4) {
  animation-delay: -4.2s;
}

.svg-metal-light,
.svg-metal-shadow {
  fill: none;
  stroke-linecap: round;
}

.svg-metal-light {
  stroke: url("#metalGlint");
  stroke-width: 2.4;
  opacity: 0.72;
}

.svg-metal-light-top,
.svg-metal-light-bottom {
  opacity: 0.64;
}

.svg-metal-light-left,
.svg-metal-light-right {
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 1.5;
  opacity: 0.58;
}

.svg-metal-shadow {
  stroke: rgba(8, 13, 16, 0.38);
  stroke-width: 2;
}

.svg-screen-frame {
  fill: url("#bezelDepth");
  stroke: rgba(236, 239, 234, 0.26);
  stroke-width: 1;
}

.svg-bezel-shimmer {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-linecap: round;
  stroke-width: 1.6;
  stroke-dasharray: 130 870;
  stroke-dashoffset: 1000;
  opacity: 0;
  mix-blend-mode: screen;
  animation: none;
}

.svg-bezel-shimmer-top {
  opacity: 0;
}

.svg-bezel-shimmer-bottom {
  opacity: 0;
  animation-delay: 0s;
}

.svg-screen {
  fill: url("#blackGlass");
  stroke: rgba(0, 0, 0, 0.78);
  stroke-width: 1;
}

.svg-backlight-glow {
  fill: url("#screenBloom");
  opacity: 0.16;
  mix-blend-mode: screen;
  animation: backlightBreath 6.2s ease-in-out infinite;
}

.svg-test-bars {
  opacity: 1;
  animation: colorBarPulse 4.6s ease-in-out infinite;
}

.display-stack.is-interacting .svg-test-bars {
  animation-duration: 2.4s;
}

.svg-rgb {
  fill: url("#rgbPixelPattern");
  opacity: 0;
  mix-blend-mode: multiply;
  animation: none;
}

.svg-screen-bloom {
  fill: url("#screenBloom");
  opacity: 0;
  mix-blend-mode: screen;
  animation: none;
}

.svg-screen-edge-shade {
  fill: url("#screenEdgeShade");
  opacity: 0;
  mix-blend-mode: multiply;
}

.svg-screen-side-shade {
  fill: url("#screenSideShade");
  opacity: 0;
  mix-blend-mode: multiply;
}

.svg-sheen {
  fill: url("#glassHighlight");
  opacity: 0.14;
  mix-blend-mode: screen;
  animation: svgGlassTravel 7s ease-in-out infinite;
}

.svg-scan {
  fill: rgba(255, 255, 255, 0.1);
  mix-blend-mode: screen;
  opacity: 0.22;
  animation: svgScanTravel 4.8s ease-in-out infinite;
}

.module-spec-cards {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transform-style: preserve-3d;
}

.spec-card {
  position: absolute;
  display: grid;
  min-width: 116px;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(225, 238, 241, 0.78)),
    rgba(255, 255, 255, 0.82);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  transform-style: preserve-3d;
  animation: specCardFloat 7.2s ease-in-out infinite;
}

.spec-card strong {
  color: #0f151a;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
}

.spec-card small {
  color: #596673;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spec-card-a {
  top: 74px;
  left: 6px;
  transform: translateZ(76px) rotateZ(-5deg);
}

.spec-card-b {
  right: 8px;
  bottom: 118px;
  border-color: rgba(138, 239, 255, 0.38);
  background:
    linear-gradient(135deg, rgba(244, 253, 254, 0.96), rgba(209, 244, 247, 0.78)),
    rgba(244, 253, 254, 0.82);
  animation-delay: -2.4s;
  transform: translateZ(92px) rotateZ(4deg);
}

.spec-card-c {
  bottom: 52px;
  left: 98px;
  animation-delay: -4.8s;
  transform: translateZ(58px) rotateZ(3deg);
}

.display-stack.is-interacting .spec-card {
  box-shadow: 0 24px 42px rgba(16, 28, 36, 0.16);
}

.svg-screen-inner-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 0.85;
  mix-blend-mode: screen;
}

.svg-lower-lip,
.svg-bottom-edge,
.svg-right-edge {
  fill: url("#metalSide");
  stroke: rgba(43, 52, 57, 0.42);
  stroke-width: 1;
}

.svg-tabs path,
.svg-port-row path,
.svg-side-details path {
  fill: #788386;
  stroke: rgba(35, 43, 47, 0.65);
  stroke-width: 1;
}

.svg-port-row path {
  fill: #293136;
}

.svg-cad-rib {
  fill: none;
  stroke: rgba(245, 248, 246, 0.42);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.rib-top,
.rib-left,
.rib-right {
  opacity: 0.42;
}

.rib-bottom {
  opacity: 0.58;
}

.svg-edge-notches path {
  fill: #545f63;
  stroke: rgba(32, 40, 45, 0.58);
  stroke-width: 1;
}

.svg-screws circle {
  fill: #11181c;
  stroke: #c9d1cf;
  stroke-width: 3;
}

@keyframes realisticModuleFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes floorShadowBreath {
  0%,
  100% {
    opacity: 0.78;
    transform: scaleX(0.96);
  }

  50% {
    opacity: 0.52;
    transform: scaleX(1.04);
  }
}

@keyframes ambientPlaneDrift {
  0%,
  100% {
    opacity: 0.58;
    translate: 0 0;
  }

  50% {
    opacity: 0.86;
    translate: 10px -8px;
  }
}

@keyframes ambientGridSlide {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 84px 42px, 84px 42px;
  }
}

@keyframes ambientScanTravel {
  0% {
    transform: translateX(0) rotateZ(18deg);
    opacity: 0;
  }

  18%,
  72% {
    opacity: 0.42;
  }

  100% {
    transform: translateX(300%) rotateZ(18deg);
    opacity: 0;
  }
}

@keyframes specCardFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -10px;
  }
}

@keyframes rimBaseBreath {
  0%,
  100% {
    opacity: 0.46;
  }

  44% {
    opacity: 0.78;
  }

  70% {
    opacity: 0.56;
  }
}

@keyframes diagonalModuleSweep {
  0% {
    opacity: 0;
    transform: translate(-360px, 270px) rotate(45deg);
  }

  18%,
  68% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate(760px, -390px) rotate(45deg);
  }
}

@keyframes diagonalScreenSweep {
  0% {
    opacity: 0;
    transform: translate(-320px, 220px) rotate(45deg);
  }

  20%,
  64% {
    opacity: 0.34;
  }

  100% {
    opacity: 0;
    transform: translate(720px, -360px) rotate(45deg);
  }
}

@keyframes rimSweep {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }

  10%,
  82% {
    opacity: 0.86;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes cornerGlowPulse {
  0%,
  100% {
    opacity: 0.12;
    transform: scale(0.92);
  }

  48% {
    opacity: 0.34;
    transform: scale(1.08);
  }
}

@keyframes bezelShimmer {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }

  20%,
  72% {
    opacity: 0.62;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes svgGlassTravel {
  0%,
  100% {
    transform: translateX(-260px);
  }

  52% {
    transform: translateX(250px);
  }
}

@keyframes svgScanTravel {
  0% {
    transform: translateY(-34px);
    opacity: 0;
  }

  12%,
  82% {
    opacity: 0.42;
  }

  100% {
    transform: translateY(120px);
    opacity: 0;
  }
}

@keyframes backlightBreath {
  0%,
  100% {
    opacity: 0.22;
  }

  45% {
    opacity: 0.38;
  }

  70% {
    opacity: 0.28;
  }
}

@keyframes screenActivityShift {
  0% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(18px);
  }
}

@keyframes moduleTapFlash {
  0% {
    opacity: 0;
  }

  18% {
    opacity: 0.24;
  }

  100% {
    opacity: 0;
  }
}

@keyframes colorBarPulse {
  0%,
  100% {
    filter: saturate(1.02) brightness(1);
  }

  48% {
    filter: saturate(1.14) brightness(1.06);
  }
}

@keyframes svgPixelShift {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(18px, 18px);
  }
}

@keyframes rgbVerticalGlow {
  0%,
  100% {
    opacity: 0.1;
  }

  45% {
    opacity: 0.17;
  }

  70% {
    opacity: 0.13;
  }
}

.module-batch {
  position: absolute;
  inset: 40px 52px auto auto;
  width: 374px;
  height: 280px;
  transform: translateZ(-60px);
}

.module-batch img {
  position: absolute;
  width: 100%;
  height: auto;
  filter: saturate(0.78) contrast(0.96);
  opacity: 0.24;
}

.module-batch img:nth-child(1) {
  transform: translate(-44px, -28px) rotate(-2deg);
}

.module-batch img:nth-child(2) {
  transform: translate(-24px, -14px) rotate(-1deg);
}

.module-batch img:nth-child(3) {
  opacity: 0.34;
  transform: translate(-4px, 0) rotate(0deg);
}

.module-back-reference {
  position: absolute;
  right: 6px;
  bottom: 18px;
  width: 430px;
  height: 226px;
  overflow: hidden;
  border: 4px solid #aeb7bc;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 12% 88%, rgba(255, 255, 255, 0.24)),
    linear-gradient(145deg, #cfd4d4, #8f999b 48%, #d8dddd);
  box-shadow: 0 22px 42px rgba(25, 39, 46, 0.16);
  opacity: 0.42;
  transform: translateZ(-38px) rotate(-1deg);
}

.module-back-reference::before {
  position: absolute;
  inset: 7% 5%;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(75, 88, 94, 0.22);
}

.module-back-reference::after {
  position: absolute;
  right: 8%;
  bottom: 12%;
  width: 11%;
  height: 11%;
  border: 2px solid rgba(62, 75, 82, 0.38);
  border-radius: 6px;
  content: "";
}

.module-front-photo {
  position: absolute;
  z-index: 5;
  top: 22px;
  left: 24px;
  width: 590px;
  filter: drop-shadow(0 30px 48px rgba(15, 27, 35, 0.26));
  animation: moduleFloat 6s ease-in-out infinite;
}

.module-front-photo > img {
  display: block;
  width: 100%;
  height: auto;
}

.lcd-active-area {
  position: absolute;
  inset: 13% 9% 19% 9%;
  overflow: hidden;
  border-radius: 3px;
  opacity: 0.34;
  mix-blend-mode: screen;
  pointer-events: none;
}

.module-side-photo {
  position: absolute;
  z-index: 4;
  right: 42px;
  bottom: 2px;
  width: 388px;
  filter: drop-shadow(0 20px 28px rgba(15, 27, 35, 0.16));
  opacity: 0.9;
  transform: translateZ(10px);
}

.module-side-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.hd-lcd-module {
  position: absolute;
  z-index: 5;
  top: 38px;
  left: 10px;
  width: 610px;
  aspect-ratio: 16 / 9;
  transform: rotateZ(2deg) rotateX(7deg) rotateY(-7deg);
  transform-style: preserve-3d;
  animation: hdModuleFloat 7s ease-in-out infinite;
}