/* =========================================================
   Q&Q AI / 跨量数资 — editorial industrial infrastructure skin
   Source of truth: 跨量数资 DESIGN_SYSTEM.md
   ========================================================= */

:root {
  --qq-bg: #ffffff;
  --qq-ink: #0b1220;
  --qq-blue: #2457e6;
  --qq-blue-soft: #e8efff;
  --qq-navy: #15233d;
  --qq-mute: #727c8e;
  --qq-line: #d9dee7;
  --qq-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Inter, sans-serif;
  --qq-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html {
  background: var(--qq-bg);
}

body {
  margin: 0;
  background: var(--qq-bg);
  color: var(--qq-ink);
  font-family: var(--qq-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

:lang(zh) {
  font-family: var(--qq-sans) !important;
}

::selection {
  background: var(--qq-ink);
  color: var(--qq-bg);
}

/* The React deck scales a locked 1280×720 canvas to the viewport. */
.slide,
.qq-slide {
  width: 1280px !important;
  height: 720px !important;
  max-height: 720px;
  overflow: hidden !important;
  position: relative;
  background-color: var(--qq-bg) !important;
  color: var(--qq-ink);
  font-family: var(--qq-sans) !important;
}

/* Faint engineering grid + paper grain from the reference site. */
.qq-slide-grid {
  background-image:
    linear-gradient(rgba(11, 18, 32, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 18, 32, 0.038) 1px, transparent 1px),
    linear-gradient(rgba(11, 18, 32, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 18, 32, 0.018) 1px, transparent 1px) !important;
  background-size: 72px 72px, 72px 72px, 9px 9px, 9px 9px !important;
  opacity: 0.72;
}

.qq-slide-texture {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E") !important;
  opacity: 0.032;
  mix-blend-mode: multiply;
}

/* Typography: Chinese-first, medium weight, mono metadata. */
.qq-slide h1,
.qq-slide h2,
.qq-slide h3,
.qq-slide h4,
.qq-slide [style*="Archivo Black"],
.qq-slide [style*="Space Grotesk"] {
  font-family: var(--qq-sans) !important;
  font-weight: 500 !important;
}

.qq-slide [style*="letter-spacing: 0.1em"],
.qq-slide [style*="letter-spacing: 0.12em"],
.qq-slide [style*="letter-spacing: 0.14em"],
.qq-slide [style*="letter-spacing: 0.16em"],
.qq-slide [style*="letter-spacing: 0.18em"] {
  font-family: var(--qq-mono) !important;
  font-weight: 500 !important;
}

.qq-slide [style*="font-weight: 600"],
.qq-slide [style*="font-weight: 650"],
.qq-slide [style*="font-weight: 700"],
.qq-slide [style*="font-weight: 750"],
.qq-slide [style*="font-weight: 800"],
.qq-slide [style*="font-weight: 850"],
.qq-slide [style*="font-weight: 900"] {
  font-weight: 500 !important;
}

/* Flat institutional geometry: hairlines, square frames, no app chrome. */
.qq-slide [style*="border-radius"],
.qq-slide img,
.qq-slide video,
.qq-slide button,
#root > button {
  border-radius: 0 !important;
}

.qq-slide [style*="box-shadow"],
.qq-slide [style*="text-shadow"],
.qq-slide [style*="drop-shadow"] {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.qq-slide [style*="backdrop-filter"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Remove decorative gradients while keeping the data and layout intact. */
.qq-slide [style*="linear-gradient"],
.qq-slide [style*="radial-gradient"] {
  background-image: none !important;
}

.qq-slide img:not(.qq-cover-cube),
.qq-slide video {
  max-width: 100%;
  max-height: min(50vh, 400px);
  object-fit: contain;
}

.qq-slide svg {
  shape-rendering: geometricPrecision;
}

.qq-slide svg text {
  font-family: var(--qq-mono) !important;
  font-weight: 500 !important;
}

.qq-slide a {
  color: var(--qq-blue) !important;
  text-underline-offset: 3px;
}

/* Cover: replace the old ship image with the reference site's voxel identity. */
.qq-cover-cube {
  position: absolute !important;
  top: 108px !important;
  right: 34px !important;
  width: 40% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 0.98 !important;
}

.qq-cover-wash {
  background: transparent !important;
}

/* App shell and controls follow the same sharp, quiet language. */
#root > button {
  top: 16px !important;
  right: 20px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--qq-line) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--qq-blue) !important;
  font-family: var(--qq-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
}

#root > div {
  background: var(--qq-bg) !important;
}

#root [style*="position: fixed"][style*="bottom: 14px"] {
  color: var(--qq-mute) !important;
  font-family: var(--qq-mono) !important;
  letter-spacing: 0.04em !important;
}

#root [style*="position: fixed"][style*="bottom: 0px"][style*="height: 2px"] {
  height: 1px !important;
  background: var(--qq-line) !important;
}

#root [style*="position: fixed"][style*="bottom: 0px"] > div {
  background: var(--qq-blue) !important;
}

/* Short viewports: keep controls legible without competing with content. */
@media (max-height: 700px) {
  #root [style*="bottom: 14px"] {
    bottom: 8px !important;
  }
}

@media (max-height: 600px) {
  #root [style*="bottom: 14px"][style*="left: 20px"] {
    display: none !important;
  }
}

@media (max-height: 500px) {
  #root > button {
    top: 8px !important;
    right: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
  }
}