@font-face { font-family: 'Archivo Black'; src: url('/archivo-black.ttf') format('truetype'); font-style: normal; font-weight: 900; font-display: swap; }
:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #080808; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid #111; outline-offset: 6px; }
.page { min-height: 100svh; padding: max(30px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); display: flex; flex-direction: column; }
.wordmark { border: 0; background: transparent; padding: 0; color: inherit; text-align: left; font-family: 'Archivo Black', Arial, sans-serif; display: inline-block; font-size: clamp(28px, 3.5vw, 48px); font-weight: 900; letter-spacing: -.065em; text-decoration: none; }
main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 64px; }
h1 { margin: 0; max-width: 1450px; font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif; font-weight: 900; font-size: clamp(2.6rem, 8vw, 7.5rem); line-height: 1.04; letter-spacing: -.065em; overflow-wrap: anywhere; hyphens: none; text-wrap: pretty; }
h1.long { font-size: clamp(2rem, 6.6vw, 6rem); }
h1.very-long { font-size: clamp(1.8rem, 5.5vw, 5rem); }
#notice { font-size: 1rem; line-height: 1.6; color: #666; max-width: 38em; }
#notice:empty { display: none; }
footer { text-align: center; }
#details { background: transparent; border: 0; padding: 14px 6px; color: #666; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; gap: 10px; }
#details:disabled { opacity: .5; cursor: default; }
#details svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; background: #fff; color: #111; padding: max(30px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); overflow-y: auto; }
.dialog-content { max-width: 720px; margin: 0 auto; }
.back { border: 0; background: transparent; padding: 12px 0; color: #666; }
.eyebrow { margin-top: 65px; color: #777; font-size: .85rem; letter-spacing: .06em; }
h2 { font-size: clamp(2rem, 6vw, 3.3rem); line-height: 1.08; letter-spacing: -.055em; margin: 16px 0 30px; }
#explanation { font-size: 1.15rem; line-height: 1.75; white-space: pre-line; }
h3 { margin-top: 40px; font-size: 1rem; }
#sources { list-style: none; padding: 0; }
#sources li { margin: 22px 0; line-height: 1.5; overflow-wrap: anywhere; }
#sources a { text-underline-offset: 4px; }
#sources span { display: block; color: #777; font-size: .9rem; margin-top: 5px; }
.metadata, #source-note, #share-status { color: #777; font-size: .9rem; line-height: 1.6; }
.metadata { margin-top: 40px; }
.share { border: 0; background: #111; color: #fff; padding: 15px 20px; margin-top: 20px; }
@media (min-width: 800px) { .page { padding: 42px 5vw 30px; } main { max-width: 1500px; } }
@media (prefers-reduced-motion: no-preference) { dialog[open] .dialog-content { animation: enter .18s ease-out; } @keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

.wordmark:disabled { cursor: default; opacity: 1; color: inherit; }
#installation { width: min(29rem, calc(100% - 32px)); height: fit-content; max-height: calc(100svh - 32px); margin: auto; padding: 28px; border: 1px solid #e5e5e5; }
#installation::backdrop { background: rgb(0 0 0 / 25%); }
#installation h2 { overflow-wrap: anywhere; font-size: 2.2rem; margin: 30px 0 20px; }
#install-description, #install-steps { font-size: 1rem; line-height: 1.65; }
#install-steps { padding-left: 24px; }
#install-steps li { padding-left: 4px; margin-block: 12px; }
#install-steps:empty, #install-note:empty, #install-status:empty { display: none; }
#install-confirm { margin-top: 8px; }
#install-note { margin-top: 20px; }

.share:disabled { opacity: .5; cursor: wait; }