.hud-demo{margin:34px 0 0;padding:22px;border:1px solid #665238;border-radius:7px;background:linear-gradient(120deg,#211b14,#151311 65%);box-shadow:inset 0 0 0 4px #16130f}.hud-demo-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.hud-demo h3{margin:0 0 4px;color:#d2b27e;font-size:17px}.hud-demo-heading p{margin:0;color:var(--muted);font-size:12px}.hud-demo-toggle{flex-shrink:0;border:1px solid #685438;background:#19150f;color:#d9c399;padding:8px 14px;border-radius:4px;cursor:pointer;font-size:12px}.hud-demo-toggle:hover{border-color:var(--gold);background:#2a2117}.hud-demo-image{display:block;width:100%;height:auto;border-radius:3px}.hud-demo figcaption{font-size:11px;text-align:left;padding-top:12px;color:var(--muted)}@media(max-width:760px){.hud-demo{padding:14px;margin-top:24px}.hud-demo-heading{align-items:flex-start;gap:12px;margin-bottom:12px}.hud-demo h3{font-size:15px}.hud-demo-heading p{font-size:11px}.hud-demo-toggle{padding:7px 9px}.hud-demo figcaption{font-size:10px}}@media(prefers-reduced-motion:reduce){.hud-demo{scroll-behavior:auto}}

/* Keep the four-channel HUD demonstration readable in every language. */
.hud-demo, .hud-demo h3, .hud-demo-toggle { font-family: "Segoe UI", "Microsoft YaHei", "Yu Gothic", sans-serif; letter-spacing: normal; }
.hud-demo h3 { font-weight: 600; }