html, body { margin: 0; width: 100%; height: 100%; background: #071012; color: #dce8e8; }
body { display: flex; flex-direction: column; height: 100dvh; font: 14px/1.45 system-ui, sans-serif; }
.demo-header { flex: none; padding: 12px max(16px, 3vw); border-bottom: 1px solid #285057; }
h1 { margin: 0; font-size: 1.1rem; }
h1 span { color: #e2ad62; }
p { margin: 5px 0; }
#demoStatus { color: #9af7ff; }
#demoStatus[data-state="error"] { color: #f0cf96; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
a, button { color: #9af7ff; font: inherit; }
a { display: inline-flex; align-items: center; min-height: 44px; }
button { min-height: 44px; border: 1px solid #e2ad62; border-radius: 5px; background: #102328; padding: 8px 14px; cursor: pointer; }
:focus-visible { outline: 3px solid #e2ad62; outline-offset: 3px; }
#riskGraphDemo { display: block; width: 100%; flex: 1 0 480px; min-height: 480px; border: 0; }
[hidden], #riskGraphDemo[hidden] { display: none; }