/* Reference-based starting values, not measurements exported from a design file.
   Use a 1920 × 1080 logical stage; scale it uniformly inside the viewport.
   All dimensions below are logical CSS pixels, including at 3840 × 2160. */
:root {
  --stage-width: 1920px;
  --stage-height: 1080px;
  --stage-scale: 1;
  --font-display: "Microsoft YaHei", "Noto Sans CJK SC", "PingFang SC", sans-serif;
  --font-body: "Microsoft YaHei", "Noto Sans CJK SC", "PingFang SC", sans-serif;

  --color-backdrop: #020b21;
  --color-background: #03142f;
  --color-panel-deep: #031b3b;
  --color-panel-mid: #06356c;
  --color-panel-fill: rgb(4 35 78 / 68%);
  --color-panel-fill-quiet: rgb(3 24 56 / 64%);
  --color-panel-highlight: rgb(3 98 199 / 42%);
  --color-border: #159cea;
  --color-border-quiet: #145988;
  --color-cyan: #2ddeff;
  --color-blue: #168fff;
  --color-text: #f5f9ff;
  --color-text-secondary: #c4e5ff;
  --color-text-muted: #82b8df;

  --font-title: 48px;
  --font-subtitle: 25px;
  --font-section: 32px;
  --font-module: 24px;
  --font-card-title: 26px;
  --font-body-size: 21px;
  --font-caption: 18px;
  --font-loop: 25px;
  --weight-title: 800;
  --weight-heading: 700;
  --weight-body: 500;

  --safe-margin: 20px;
  --panel-padding: 28px;
  --panel-gap: 12px;
  --panel-cut: 12px;
  --panel-radius: 4px;
  --border-width: 1px;
  --accent-width: 4px;
  --line-height-title: 1.15;
  --line-height-body: 1.35;
  --heading-tracking: 0.04em;
  --background-opacity: 0.32;
  --background-dim-opacity: 0.30;
  --background-vignette: radial-gradient(ellipse at 50% 36%, transparent 15%, rgb(1 9 28 / 54%) 100%);
  --panel-gradient: linear-gradient(145deg, rgb(5 55 112 / 64%), rgb(3 26 65 / 74%));
  --panel-header-gradient: linear-gradient(180deg, #064a96 0%, #063f87 55%, #032754 100%);
  --cyan-glow: 0 0 6px rgb(18 190 255 / 45%);
  --panel-glow: inset 0 0 18px rgb(0 119 255 / 14%), 0 0 6px rgb(0 151 255 / 16%);
  --text-glow: 0 0 4px rgb(121 189 255 / 20%);

  --z-background: 0;
  --z-background-dim: 1;
  --z-panel-fill: 10;
  --z-connectors: 20;
  --z-scenes: 30;
  --z-frames: 40;
  --z-labels: 50;
  --z-hit-areas: 60;
  --z-drawer: 100;
  --interaction-duration: 160ms;
}

/* Optional neutral building blocks. These do not implement the complete screen. */
.platform-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-backdrop);
  font-family: var(--font-body);
  color: var(--color-text);
}
.platform-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-width);
  height: var(--stage-height);
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: center;
  isolation: isolate;
}
.scene-asset {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.platform-icon {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  color: var(--color-cyan);
  flex: 0 0 auto;
}
.platform-button {
  min-width: 48px;
  min-height: 44px;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  touch-action: manipulation;
}
.platform-button:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --interaction-duration: 0ms; }
}