:root { color-scheme: light dark; --fg: #1d1d1f; --bg: #fafafa; --muted: #6e6e73; --warn: #b3261e; --line: #d2d2d7; }
@media (prefers-color-scheme: dark) { :root { --fg: #f5f5f7; --bg: #121214; --muted: #a1a1a6; --warn: #ff6b60; --line: #3a3a3c; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 -apple-system, system-ui, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px; }
h1 { font-size: 22px; }
.muted { color: var(--muted); }
.env { font-size: 40px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 16px 0; }
.env.production { color: var(--warn); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; border-top: 1px solid var(--line); padding-top: 12px; }
dt { color: var(--muted); }
dd { margin: 0; font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
dd.flag-on { color: var(--warn); font-weight: 700; }
button { font-size: 17px; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); padding: 12px; }
#status.error { color: var(--warn); font-weight: 700; }
@media (max-width: 480px) { dl { grid-template-columns: 1fr; } .env { font-size: 30px; } }