:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #172333; background: #f6f4ee; }
* { box-sizing: border-box; }
body { margin: 0; padding: 48px 20px; }
main { max-width: 480px; margin: 0 auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: #536170; }
h1 { font-size: 2rem; line-height: 1.15; margin: 16px 0; }
h2 { font-size: 1.2rem; }
p { margin: 16px 0; }
a { color: #204f8b; text-underline-offset: .18em; }
.methods { display: grid; gap: 12px; margin: 24px 0; }
.method, .primary, button { display: block; width: 100%; padding: 13px 16px; border: 1px solid #8a949f; border-radius: 4px; background: transparent; font: inherit; text-align: center; color: #172333; text-decoration: none; }
.primary, .method:first-child:not([disabled]) { background: #172333; color: white; border-color: #172333; }
button[disabled] { color: #65717d; background: #e9e7e2; }
.unavailable-label { font-size: .8rem; display: block; }
details { margin: 24px 0; border-top: 1px solid #b9bfc5; padding-top: 16px; }
summary { cursor: pointer; }
.identifier { overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: .85rem; }
:focus-visible { outline: 3px solid #377aca; outline-offset: 3px; }
[hidden] { display: none !important; }
@media (max-width: 420px) { body { padding: 28px 18px; } h1 { font-size: 1.75rem; } }