* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0f1218; color: #e6e9ef; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Noto Sans CJK SC", sans-serif; }
.topnav {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: rgba(15, 18, 24, 0.72); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topnav a { color: #aab3c2; text-decoration: none; padding: 4px 10px; border-radius: 6px; }
.topnav a.active, .topnav a:hover { color: #fff; background: rgba(255,255,255,0.1); }
.topnav .spacer { flex: 1; }
.topnav label { display: inline-flex; align-items: center; gap: 6px; color: #aab3c2; }
.topnav select, .topnav button { background: #1b2029; color: #e6e9ef; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 4px 8px; font: inherit; }
.topnav button { cursor: pointer; }
input[type=range] { width: 120px; }
#stage { padding-top: 48px; }