:root { color-scheme: dark; font: 16px/1.65 system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #07101a; color: #e4f5f0; }
main { width: min(840px, 100%); padding: clamp(20px, 4vw, 40px); border: 1px solid #294356; border-radius: 20px; background: #0d1d29; }
h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); }
.eyebrow { color: #5ce0b4; font-size: 12px; letter-spacing: .14em; margin: 0 0 8px; }
canvas { width: 100%; height: auto; display: block; border-radius: 10px; }
.inputs { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.inputs label { display: grid; gap: 4px; flex: 1; min-width: 180px; }
select, input[type=number] { padding: 10px; border: 1px solid #375668; border-radius: 6px; font: inherit; background: #08131e; color: inherit; width: 100%; }
.consent { display: flex; align-items: baseline; gap: 10px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
button { padding: 10px 24px; border: 1px solid #375668; border-radius: 8px; background: #173747; color: inherit; font: inherit; cursor: pointer; }
#start { background: #5ce0b4; color: #062419; border-color: #5ce0b4; font-weight: 700; }
button:disabled { opacity: .4; cursor: default; }
:focus-visible { outline: 3px solid #8bcfff; outline-offset: 3px; }
#status { background: #08131e; border-left: 3px solid #5ce0b4; padding: 14px; min-height: 65px; }
pre { overflow-wrap: anywhere; white-space: pre-wrap; font-size: 12px; }
.note { color: #96afbc; font-size: 13px; }
summary { cursor: pointer; }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.metrics > div { padding: 16px; background: #08131e; border: 1px solid #294356; border-radius: 10px; }
.metrics span, .metrics small { display: block; color: #96afbc; font-size: 12px; }
.metrics strong { display: block; color: #5ce0b4; font-size: clamp(22px, 4vw, 32px); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .metrics { grid-template-columns: 1fr; } }