html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; font-family: system-ui, sans-serif; background: #fff; color: #1b3827; }
#viewport { position: absolute; inset: 0; touch-action: none; }
canvas { width: 100%; height: 100%; display: block; }
.toolbar { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 2px; pointer-events: none; }
button { pointer-events: auto; min-width: 32px; min-height: 32px; padding: 4px 6px; border: 0; background: transparent; border-radius: 0; color: #1b3827; cursor: pointer; font: inherit; font-size: 11px; line-height: 16px; }
button:hover { text-decoration: underline; text-underline-offset: 3px; }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible { outline: 3px solid #5d813f; outline-offset: 2px; }
#rainfall[aria-pressed="true"] { color: #087da5; text-decoration: underline; text-underline-offset: 3px; }
#rainfall-density { pointer-events: auto; align-self: center; font-size: 10px; padding-left: 5px; }
#rainfall-density[hidden], #runoff-note[hidden] { display: none; }
select { font: inherit; color: #1b3827; background: #ffffffdb; border: 0; padding: 4px; }
#runoff-note { position: absolute; bottom: 8px; left: 12px; right: 12px; width: fit-content; max-width: calc(100% - 40px); margin: 0; padding: 4px 6px; background: #ffffffdb; color: #1b5260; font-size: 10px; line-height: 1.5; pointer-events: none; }
#status { position: absolute; left: 12px; top: 55px; right: 12px; padding: 8px 10px; background: #fffffff0; border-radius: 5px; font-size: 12px; }
#status:empty { display: none; }
@media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }