:root { color-scheme: light; --paper: #f7f5f0; --ink: #0b2036; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { isolation: isolate; background: var(--paper); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("paper.svg"); opacity: .36; }
main { min-height: 100svh; display: grid; place-items: center; padding: 72px 28px 96px; }
.identity { width: min(760px, 78vw); margin: 0; transform: translateY(-2vh); }
.identity img { width: 100%; height: auto; display: block; }
footer { position: fixed; bottom: max(26px, env(safe-area-inset-bottom)); left: max(32px, env(safe-area-inset-left)); right: max(32px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: end; gap: 18px; font-size: 11px; line-height: 1.6; letter-spacing: .035em; color: #666d70; }
footer small { font-size: inherit; }
footer a { color: inherit; text-decoration: none; padding: 8px 0; }
footer a:hover { color: var(--ink); }
footer a:focus-visible { outline: 2px solid #f56618; outline-offset: 5px; border-radius: 2px; }
@media (max-width: 600px) { .identity { width: min(520px, 88vw); } main { padding-inline: 16px; } footer { left: 20px; right: 20px; font-size: 10px; } }
@media (max-height: 400px) { main { padding-top: 20px; padding-bottom: 72px; } .identity { width: min(580px, 70vw); transform: none; } }