:root {
  --quantum-card-w: 870.391px;
  --quantum-card-h: 417.594px;
  --quantum-card-left: calc(50% - var(--quantum-card-w) / 2);
  --quantum-card-top: calc(clamp(58px, 8.5vh, 96px) - 69px);
  --quantum-card-tilt: rotateX(5deg) rotateY(-6deg) rotateZ(-3deg);
  --puzzle-scroll-x: 0px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050505;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.experience,
.side-page,
.quantum-page {
  position: fixed;
  inset: 0;
}

.experience {
  width: 100vw;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: #050505;
}

.side-page {
  z-index: 9;
  overflow: clip;
  background: #000;
  opacity: 1;
  transform: translateX(0);
  overscroll-behavior: none;
}

.quantum-page {
  overflow: clip;
  background:
    radial-gradient(circle at 32% 24%, rgba(41, 183, 255, 0.24), transparent 34%),
    radial-gradient(circle at 70% 78%, rgba(128, 255, 182, 0.14), transparent 36%),
    #020202;
  perspective: 1450px;
  perspective-origin: 50% 42%;
}

.quantum-page::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

.quantum-bg-video {
  position: absolute;
  z-index: 0;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: blur(34px) brightness(0.48) saturate(1.22);
  transform: translate3d(0, 0, 0) scale(1.12);
  transform-origin: center;
  backface-visibility: hidden;
  pointer-events: none;
}

.quantum-gradient {
  display: none;
  pointer-events: none;
}

.quantum-card {
  position: fixed;
  z-index: 2;
  border-radius: 14px;
  background: #07121f;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.18);
  transition:
    transform 1.05s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.72s ease,
    filter 0.72s ease,
    box-shadow 0.72s ease;
  will-change: transform, opacity, filter;
  transform-origin: center;
  backface-visibility: hidden;
}

.quantum-card-plane {
  position: fixed;
  z-index: 8;
  left: calc(var(--quantum-card-left) - var(--quantum-card-w));
  top: var(--quantum-card-top);
  width: calc(var(--quantum-card-w) * 4);
  height: calc(var(--quantum-card-h) * 2);
  display: grid;
  grid-template-columns: repeat(4, var(--quantum-card-w));
  grid-template-rows: repeat(2, var(--quantum-card-h));
  gap: 0;
  opacity: 1;
  filter: blur(0);
  transform: var(--quantum-card-tilt) translate3d(var(--puzzle-scroll-x), 0, 80px);
  transform-origin: calc(var(--quantum-card-w) * 1.5) calc(var(--quantum-card-h) * 0.5);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.quantum-card-plane .quantum-card {
  position: relative;
  left: auto;
  top: auto;
  width: var(--quantum-card-w);
  height: var(--quantum-card-h);
  border-radius: 14px;
  box-shadow: none;
  transform: none;
  transition: none;
  pointer-events: auto;
  --card-trace-color: rgba(255, 255, 255, 0.62);
  --card-trace-shadow: rgba(0, 0, 0, 0.74);
  --card-trace-duration: 19s;
  --card-trace-direction: normal;
}

.mirror-card {
  --mirror-video-zoom: 1.24;
  background: #06121f;
}

.video-card {
  --dashboard-video-zoom: 1.24;
  background: #06121f;
}

.mirror-video-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  transform: translateZ(0);
  transform-style: flat;
  backface-visibility: hidden;
}

.dashboard-video-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  transform: translateZ(0);
  transform-style: flat;
  backface-visibility: hidden;
}

.mirror-video-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 9, 18, 0.06), rgba(3, 9, 18, 0.24)),
    radial-gradient(circle at 28% 24%, rgba(0, 153, 255, 0.12), transparent 38%);
  pointer-events: none;
}

.dashboard-video-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 9, 18, 0.05), rgba(3, 9, 18, 0.2)),
    radial-gradient(circle at 30% 22%, rgba(0, 153, 255, 0.1), transparent 38%);
  pointer-events: none;
}

.mirror-card-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0) scale(var(--mirror-video-zoom));
  transform-origin: center;
  transform-style: flat;
  backface-visibility: hidden;
}

.dashboard-card-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0) scale(var(--dashboard-video-zoom));
  transform-origin: center;
  transform-style: flat;
  backface-visibility: hidden;
}

.mirror-card-link {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  border-radius: inherit;
  cursor: pointer;
  background: transparent;
}

.mirror-card-link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.68);
  outline-offset: -5px;
}

.quantum-card-plane .quantum-card:nth-child(1) {
  --card-trace-color: rgba(111, 225, 255, 0.66);
  --card-trace-duration: 21s;
}

.quantum-card-plane .quantum-card:nth-child(2) {
  --card-trace-color: rgba(255, 255, 255, 0.62);
  --card-trace-direction: reverse;
}

.quantum-card-plane .quantum-card:nth-child(3) {
  --card-trace-color: rgba(143, 255, 185, 0.6);
  --card-trace-duration: 23s;
}

.quantum-card-plane .quantum-card:nth-child(4) {
  --card-trace-color: rgba(255, 210, 120, 0.58);
  --card-trace-direction: reverse;
  --card-trace-duration: 20s;
}

.quantum-card-plane .quantum-card:nth-child(5) {
  --card-trace-color: rgba(194, 157, 255, 0.62);
  --card-trace-direction: reverse;
  --card-trace-duration: 24s;
}

.quantum-card-plane .quantum-card:nth-child(6) {
  --card-trace-color: rgba(255, 151, 202, 0.58);
  --card-trace-duration: 22s;
}

.quantum-card-plane .quantum-card:nth-child(7) {
  --card-trace-color: rgba(116, 255, 232, 0.6);
  --card-trace-direction: reverse;
  --card-trace-duration: 25s;
}

.quantum-card-plane .quantum-card:nth-child(8) {
  --card-trace-color: rgba(185, 255, 129, 0.58);
  --card-trace-duration: 21.5s;
}

.quantum-card-plane:has(.quantum-card:hover) .quantum-card,
.quantum-card-plane.is-card-hovered .quantum-card {
  --card-trace-color: rgba(255, 255, 255, 0.82);
  --card-trace-shadow: rgba(0, 0, 0, 0.86);
}

.card-border-svg {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--card-trace-color);
  pointer-events: none;
}

.card-border-canvas {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity 0.18s ease;
}

.card-border-svg rect {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

.card-border-main {
  stroke-width: 1.08;
  stroke-dasharray: none;
  opacity: 1;
  filter: drop-shadow(0 0 2.6px rgba(255, 255, 255, 0.18));
  transition: filter 1.25s ease;
}

.quantum-card-plane .quantum-card:hover .card-border-main,
.quantum-card-plane .quantum-card.is-hovered .card-border-main {
  filter:
    drop-shadow(0 0 4.2px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 4.2px rgba(0, 255, 224, 0.18))
    drop-shadow(0 0 4.2px rgba(255, 70, 222, 0.2));
}

.card-gradient-stop {
  transition: stop-color 1.35s ease, stop-opacity 1.35s ease;
}

.card-stop-base {
  stop-color: rgba(255, 255, 255, 0.2);
}

.card-stop-soft {
  stop-color: rgba(255, 255, 255, 0.34);
}

.card-stop-hot {
  stop-color: rgba(255, 255, 255, 0.92);
}

.quantum-card-plane .quantum-card:hover .card-stop-base,
.quantum-card-plane .quantum-card.is-hovered .card-stop-base {
  stop-color: rgba(30, 255, 214, 0.82);
}

.quantum-card-plane .quantum-card:hover .card-stop-soft,
.quantum-card-plane .quantum-card.is-hovered .card-stop-soft {
  stop-color: rgba(116, 122, 255, 0.76);
}

.quantum-card-plane .quantum-card:hover .card-stop-hot,
.quantum-card-plane .quantum-card.is-hovered .card-stop-hot {
  stop-color: rgba(255, 255, 255, 0.98);
}

.quantum-card-plane .quantum-card:hover .card-stop-pink,
.quantum-card-plane .quantum-card.is-hovered .card-stop-pink {
  stop-color: rgba(255, 70, 222, 0.9);
}

.card-border-base {
  display: none;
  stroke: var(--card-trace-color);
  stroke-width: 0.78;
  opacity: 0;
  filter: drop-shadow(0 0 1.25px var(--card-trace-color));
  animation: cardWholeBorderBreathe 6.8s ease-in-out infinite alternate;
  transition: stroke 1.8s ease, opacity 1.8s ease, filter 1.8s ease;
}

.card-border-shadow {
  display: none;
  stroke: rgba(0, 0, 0, 0.62);
  stroke-width: 1.35;
  opacity: 0;
  filter: blur(0.55px);
  transition: opacity 1.35s ease;
}

.card-border-trace {
  display: none;
  stroke: transparent;
  stroke-width: 0;
  stroke-dasharray: none;
  opacity: 0;
  animation: none;
}

.card-border-sheen {
  display: none;
  stroke-width: 1.18;
  stroke-dasharray: none;
  opacity: 0.9;
  filter: drop-shadow(0 0 4.6px var(--card-trace-color));
  transition: opacity 0.45s ease, filter 0.45s ease;
}

.card-border-rgb {
  display: none;
  stroke-width: 1.24;
  stroke-dasharray: none;
  opacity: 0;
  filter: drop-shadow(0 0 4.8px currentColor);
  animation: none;
  transition: opacity 2.1s ease, filter 2.1s ease;
}

.card-border-rgb-full {
  display: none;
  stroke-width: 1.24;
  stroke-dasharray: none;
  opacity: 0;
  filter: drop-shadow(0 0 5.5px rgba(255, 80, 224, 0.34)) drop-shadow(0 0 5.5px rgba(0, 255, 224, 0.28));
  transition: opacity 1.25s ease, filter 1.25s ease;
}

.card-border-rgb-sheen {
  display: none;
  stroke-width: 1.75;
  stroke-dasharray: none;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.7));
  transition: opacity 1.35s ease, filter 1.35s ease;
}

.card-border-rgb-cyan {
  color: rgba(0, 255, 224, 0.92);
  stroke: currentColor;
  animation-delay: 0s;
}

.card-border-rgb-white {
  color: rgba(255, 255, 255, 0.95);
  stroke: currentColor;
  animation-delay: -9.3s;
}

.card-border-rgb-magenta {
  color: rgba(255, 70, 222, 0.9);
  stroke: currentColor;
  animation-delay: -18.6s;
}

.quantum-card-plane:has(.quantum-card:hover) .card-border-base,
.quantum-card-plane.is-card-hovered .card-border-base {
  stroke: rgba(255, 255, 255, 0.82);
  opacity: 0;
  filter: drop-shadow(0 0 1.45px rgba(255, 255, 255, 0.38));
}

.quantum-card-plane:has(.quantum-card:hover) .card-border-trace,
.quantum-card-plane.is-card-hovered .card-border-trace {
  stroke: rgba(255, 255, 255, 0.88);
  opacity: 0;
  filter: drop-shadow(0 0 5.2px rgba(255, 255, 255, 0.74));
}

.quantum-card-plane:has(.quantum-card:hover) .card-border-sheen,
.quantum-card-plane.is-card-hovered .card-border-sheen {
  opacity: 0.82;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.66));
}

.quantum-card-plane .quantum-card:hover .card-border-trace,
.quantum-card-plane .quantum-card.is-hovered .card-border-trace {
  opacity: 0;
}

.quantum-card-plane .quantum-card:hover .card-border-rgb,
.quantum-card-plane .quantum-card.is-hovered .card-border-rgb {
  opacity: 0;
}

.quantum-card-plane .quantum-card:hover .card-border-sheen,
.quantum-card-plane .quantum-card.is-hovered .card-border-sheen {
  opacity: 0;
}

.quantum-card-plane .quantum-card:hover .card-border-base,
.quantum-card-plane .quantum-card.is-hovered .card-border-base {
  opacity: 0;
}

.quantum-card-plane .quantum-card:hover .card-border-rgb-white,
.quantum-card-plane .quantum-card.is-hovered .card-border-rgb-white {
  opacity: 0;
}

.quantum-card-plane .quantum-card:hover .card-border-rgb-cyan,
.quantum-card-plane .quantum-card.is-hovered .card-border-rgb-cyan,
.quantum-card-plane .quantum-card:hover .card-border-rgb-magenta,
.quantum-card-plane .quantum-card.is-hovered .card-border-rgb-magenta {
  opacity: 0;
}

.quantum-card-plane .quantum-card:hover .card-border-rgb-full,
.quantum-card-plane .quantum-card.is-hovered .card-border-rgb-full {
  opacity: 1;
}

.quantum-card-plane .quantum-card:hover .card-border-rgb-sheen,
.quantum-card-plane .quantum-card.is-hovered .card-border-rgb-sheen {
  opacity: 0;
}

@keyframes cardSvgTrace {
  to {
    stroke-dashoffset: -1000;
  }
}

.card-border-glow {
  display: none;
}

.card-side-flash {
  display: block;
  position: absolute;
  z-index: 8;
  top: 14px;
  bottom: 14px;
  width: 1px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent 0%, var(--card-trace-color) 18%, rgba(255, 255, 255, 0.86) 50%, var(--card-trace-color) 82%, transparent 100%);
  filter: blur(0.35px) drop-shadow(0 0 6px var(--card-trace-color));
  opacity: 0;
  pointer-events: none;
  transition: background 1.5s ease, filter 1.5s ease, opacity 0.18s ease;
}

.card-side-flash-left {
  left: 1px;
  animation: cardSideFlash var(--card-trace-duration) ease-in-out infinite;
}

.card-side-flash-right {
  right: 1px;
  animation: cardSideFlash var(--card-trace-duration) ease-in-out infinite reverse;
}

.quantum-card-plane:has(.quantum-card:hover) .card-side-flash,
.quantum-card-plane.is-card-hovered .card-side-flash {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.42) 18%, rgba(255, 255, 255, 0.96) 50%, rgba(255, 255, 255, 0.42) 82%, transparent 100%);
  filter: blur(0.35px) drop-shadow(0 0 7px rgba(255, 255, 255, 0.7));
}

.quantum-card-plane .quantum-card:hover .card-side-flash,
.quantum-card-plane .quantum-card.is-hovered .card-side-flash {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 255, 224, 0.84) 16%, rgba(255, 255, 255, 0.96) 50%, rgba(255, 70, 222, 0.86) 84%, transparent 100%);
  filter: blur(0.35px) drop-shadow(0 0 7px rgba(255, 70, 222, 0.55)) drop-shadow(0 0 7px rgba(0, 255, 224, 0.45));
}

@keyframes cardSideFlash {
  0%, 39%, 66%, 100% {
    opacity: 0;
  }

  48%, 54% {
    opacity: 0.86;
  }
}

@keyframes cardWholeBorderBreathe {
  from {
    opacity: 0.28;
    filter: drop-shadow(0 0 1.4px currentColor);
  }

  to {
    opacity: 0.4;
    filter: drop-shadow(0 0 2.6px currentColor);
  }
}

.card-ghost {
  opacity: 0.98;
  z-index: 2;
}

.card-tile,
.card-bottom,
.quantum-page.dashboard-only .card-bottom,
.quantum-page.dashboard-only.is-bottom-active .card-bottom {
  left: calc(var(--quantum-card-left) + var(--tile-inline-x, 0px) + var(--tile-block-x, 0px));
  top: calc(var(--quantum-card-top) + var(--tile-inline-y, 0px) + var(--tile-block-y, 0px));
  bottom: auto;
  width: var(--quantum-card-w);
  height: var(--quantum-card-h);
  opacity: 1;
  filter: blur(0);
  transform: var(--quantum-card-tilt) translate3d(0, 0, 80px);
  z-index: 8;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.42);
}

.quantum-card-plane .card-tile,
.quantum-card-plane .card-bottom,
.quantum-page.dashboard-only .quantum-card-plane .card-bottom,
.quantum-page.dashboard-only.is-bottom-active .quantum-card-plane .card-bottom {
  left: auto;
  top: auto;
  transform: none;
  box-shadow: none;
}

.quantum-card-plane .card-bottom {
  grid-column: 2;
  grid-row: 2;
}

.quantum-card-plane .card-flight-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.quantum-card-plane .card-bottom.is-restoring-grid .card-border-canvas,
.quantum-card-plane .card-bottom.is-restoring-grid .card-side-flash {
  opacity: 0;
}

.card-top-left,
.card-lower-left {
  --tile-inline-x: -850.46px;
  --tile-inline-y: 108.25px;
}

.card-top-right,
.card-lower-right {
  --tile-inline-x: 850.46px;
  --tile-inline-y: -108.25px;
}

.card-lower-left,
.card-lower-center,
.card-lower-right {
  --tile-block-x: 39.29px;
  --tile-block-y: 409.36px;
}

.excel-app-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 128%;
  height: 128%;
  border: 0;
  background: #0d1b2a;
  opacity: 1;
  transform: scale(0.78125);
  transform-origin: 0 0;
  transition: opacity 0.5s ease, transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}

.card-bottom.is-docking .excel-app-frame {
  transition: none;
}

.quantum-card .excel-open-layer {
  position: absolute;
  z-index: 10;
  inset: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  opacity: 0;
  pointer-events: auto;
}

.card-flight-plane {
  position: fixed;
  z-index: 24;
  left: calc(var(--quantum-card-left) - var(--quantum-card-w));
  top: var(--quantum-card-top);
  width: calc(var(--quantum-card-w) * 4);
  height: calc(var(--quantum-card-h) * 2);
  display: grid;
  grid-template-columns: repeat(4, var(--quantum-card-w));
  grid-template-rows: repeat(2, var(--quantum-card-h));
  gap: 0;
  transform-origin: calc(var(--quantum-card-w) * 1.5) calc(var(--quantum-card-h) * 0.5);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  pointer-events: none;
  will-change: transform;
}

.card-flight-plane .quantum-card {
  position: relative;
  left: auto;
  top: auto;
  width: var(--quantum-card-w);
  height: var(--quantum-card-h);
  border-radius: 14px;
  transform: none;
  transition: none;
  contain: layout paint style;
  isolation: isolate;
  outline: 1px solid transparent;
  clip-path: inset(0 round 14px);
}

.quantum-page.dashboard-only .card-flight-plane .quantum-card,
.quantum-page.dashboard-only.is-bottom-active .card-flight-plane .quantum-card {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  width: var(--quantum-card-w);
  height: var(--quantum-card-h);
  transform: none;
  box-shadow: none;
}

.card-flight-plane .card-bottom {
  grid-column: 2;
  grid-row: 2;
  z-index: 24;
  pointer-events: auto;
  will-change: transform;
}

.card-flight-plane .card-border-canvas,
.card-flight-plane .card-side-flash {
  visibility: hidden;
  opacity: 0;
}

.card-flight-plane .is-flight-card::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(190, 225, 255, 0.42);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
    0 0 18px rgba(58, 179, 255, 0.22),
    0 0 26px rgba(255, 80, 224, 0.14);
  pointer-events: none;
  transform: translateZ(0);
}

.card-flight-plane.is-returning .is-flight-card {
  box-shadow: none;
}

.card-flight-plane.is-returning .is-flight-card::after {
  opacity: 0;
}

.card-flight-plane .excel-app-frame {
  transition: none;
}

.card-flight-plane .excel-open-layer {
  pointer-events: none;
}

.card-flight-plane.is-fullscreen {
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  transform: none;
  transform-origin: center;
}

.card-flight-plane.is-fullscreen .card-bottom {
  position: fixed;
  left: 3vw;
  top: 3vh;
  width: 94vw;
  height: 94vh;
  border-radius: 18px;
  clip-path: inset(0 round 18px);
  transform: none;
  z-index: 24;
  pointer-events: auto;
}

.quantum-page.dashboard-only .card-flight-plane.is-fullscreen .card-bottom,
.quantum-page.dashboard-only.is-bottom-active .card-flight-plane.is-fullscreen .card-bottom {
  position: fixed;
  left: 3vw;
  top: 3vh;
  width: 94vw;
  height: 94vh;
  border-radius: 18px;
  clip-path: inset(0 round 18px);
  transform: none;
  z-index: 24;
  pointer-events: auto;
}

.card-flight-plane.is-fullscreen .excel-app-frame {
  width: 100%;
  height: 100%;
  transform: none;
}

.card-flight-plane.is-fullscreen .excel-open-layer {
  pointer-events: none;
}

@media (max-height: 840px) {
  .card-flight-plane.is-fullscreen .excel-app-frame {
    width: 100%;
    height: 100%;
    transform: none;
    transform-origin: 0 0;
  }
}

@media (max-width: 860px) {
  :root {
    --quantum-card-w: min(92vw, 760px);
    --quantum-card-h: min(72vh, 720px);
    --quantum-card-top: clamp(42px, 8vh, 78px);
    --quantum-card-tilt: rotateX(5deg) rotateY(-5deg) rotateZ(-2.5deg);
  }

  .experience {
    min-height: 560px;
  }

  .card-flight-plane.is-fullscreen .card-bottom {
    left: 2vw;
    top: 2vh;
    width: 96vw;
    height: 96vh;
    border-radius: 14px;
    clip-path: inset(0 round 14px);
  }

  .quantum-page.dashboard-only .card-flight-plane.is-fullscreen .card-bottom,
  .quantum-page.dashboard-only.is-bottom-active .card-flight-plane.is-fullscreen .card-bottom {
    left: 2vw;
    top: 2vh;
    width: 96vw;
    height: 96vh;
    border-radius: 14px;
    clip-path: inset(0 round 14px);
  }
}

@media (max-width: 560px) {
  :root {
    --quantum-card-w: 94vw;
    --quantum-card-h: 76vh;
    --quantum-card-top: 8vh;
    --quantum-card-tilt: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

  .card-bottom,
  .quantum-page.dashboard-only .card-bottom,
  .quantum-page.dashboard-only.is-bottom-active .card-bottom {
    border-radius: 12px;
  }
}