:root { color-scheme: light dark; font-family: system-ui, -apple-system, sans-serif; }
body { margin: 0; padding: 1.2rem; line-height: 1.5; }
main { max-width: 32rem; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 0 0 0.6rem; }
.state { font-size: 1.3rem; font-weight: 600; margin: 0 0 1rem; }
.state.ok { color: #1a7f37; }
.state.warn { color: #9a6700; }
.state.error { color: #cf222e; }
dl { display: grid; grid-template-columns: 6rem 1fr; gap: 0.3rem 0.8rem; margin: 0 0 1rem; }
dt { opacity: 0.7; }
dd { margin: 0; font-variant-numeric: tabular-nums; word-break: break-all; }
.notice { font-size: 0.85rem; opacity: 0.8; }
.events { font-size: 0.8rem; opacity: 0.8; padding-left: 1.2rem; }
dd.warn { color: #9a6700; font-weight: 600; }
.gate { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; gap: 1rem;
  align-items: center; justify-content: center; padding: 2rem; background: Canvas; text-align: center; }
.gate[hidden] { display: none; }
.gate button { font: inherit; font-size: 1.3rem; font-weight: 600; padding: 1.2rem 1.6rem; border-radius: 1rem;
  border: 2px solid currentColor; background: transparent; color: #1a7f37; }
.gate p { max-width: 26rem; opacity: 0.8; }