* { box-sizing: border-box; } :root { color-scheme: dark; font: 16px/1.55 system-ui, sans-serif; background: #101113; color: #f4f4f5; } body { margin: 0; } main { max-width: 40rem; margin: auto; padding: max(2rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom)); } h1 { line-height: 1.12; font-size: 2rem; margin: 1rem 0; letter-spacing: -.04em; } h2 { font-size: 1.1rem; margin-top: 2rem; } p { color: #c6c8cd; } button { display: block; width: 100%; min-height: 48px; border: 1px solid #595d65; border-radius: 10px; background: #25282e; color: #fff; font: inherit; padding: .7rem; cursor: pointer; } button:disabled { opacity: .5; cursor: default; } button:focus-visible, summary:focus-visible { outline: 3px solid #bfc5ff; outline-offset: 3px; } .badge { color: #d8d5ff; font-size: .75rem; letter-spacing: .08em; } ol { padding-left: 1.4rem; } li { margin: 1.25rem 0; } li p { margin: .25rem 0; overflow-wrap: anywhere; } pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; } [hidden] { display: none; }