/*
 * [INPUT]: index.html 与 app.js 的语义类名，base.css 的主题变量。
 * [OUTPUT]: 首屏 Canvas 叠层、数据标记与动态控制。
 * [POS]: dist 样式模块 engine，由 styles.css 按依赖顺序加载。
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

#engine-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.engine-core {
  position: absolute;
  top: 48%;
  left: 52%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  pointer-events: none;
}
.engine-core .engine-word {
  font-size: 87px;
  letter-spacing: -8px;
  text-shadow: 0 0 35px #090e07;
}
.core-caption {
  font: 9px var(--mono);
  letter-spacing: 4px;
  margin-top: 14px;
  color: #b4c69c;
  padding-left: 5px;
}
.data-chip {
  position: absolute;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px 13px;
  background: #10170fe8;
  border: 1px solid #445736;
  border-radius: 6px;
  box-shadow: 0 10px 30px #0003;
  font: 11px var(--mono);
  backdrop-filter: blur(10px);
  animation: chip-float 6s ease-in-out infinite;
}
.input-chip {
  left: 5%;
  top: 28%;
}
.output-chip {
  right: 4%;
  top: 62%;
  animation-delay: -3s;
}
.data-chip small {
  display: block;
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: #869a75;
  margin-bottom: 7px;
}
.data-chip b {
  color: var(--accent);
  font-weight: 400;
}
.chip-icon {
  color: #b4d48f;
  font-size: 20px;
  margin-right: 3px;
}
.data-chip em {
  display: block;
  font: 9px var(--mono);
  color: #7c8f6d;
  margin-top: 8px;
}
.data-chip strong {
  font-weight: 400;
  color: #c5d6b5;
  float: right;
  margin-left: 25px;
}
.visual-axis {
  position: absolute;
  bottom: 73px;
  left: 25px;
  font: 9px var(--mono);
  color: #6c7d5e;
  display: flex;
  gap: 12px;
  transform: rotate(-8deg);
}
.motion-toggle {
  position: absolute;
  right: 20px;
  top: 54px;
  width: 32px;
  height: 32px;
  color: #9eae91;
  background: transparent;
  border: 1px solid #34432a;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.motion-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.pause-symbol {
  font-size: 14px;
}
.hero-visual:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 25px;
  right: 25px;
  height: 1px;
  background: #2a3d231f;
  pointer-events: none;
}
.hero-visual:after {
  content: "";
  position: absolute;
  top: 60px;
  bottom: 60px;
  left: 50%;
  width: 1px;
  background: #2a3d2333;
  pointer-events: none;
}
@keyframes chip-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}