* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0f1220; color: #e8ebf5; padding: 24px; text-align: center;
}
header h1 { margin: 0 0 4px; font-size: 24px; }
header p { margin: 0; color: #9aa3c0; }
main { margin-top: 20px; }
.controls {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px;
}
.controls label, .controls button, .controls select {
  background: #1b2036; color: #e8ebf5; border: 1px solid #2c3354;
  padding: 8px 12px; border-radius: 8px; font-size: 14px;
}
.controls button { cursor: pointer; }
.stage { display: inline-block; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
canvas#glcanvas { display: block; max-width: 100%; background: #000; }
.compare { display: flex; gap: 16px; justify-content: center; margin-top: 18px; }
.compare div { background: #1b2036; padding: 8px; border-radius: 10px; }
.compare span { display: block; font-size: 12px; color: #9aa3c0; margin-bottom: 4px; }
footer { margin-top: 24px; color: #6b7396; font-size: 12px; }