:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 1rem; }
main { max-width: 32rem; margin: 0 auto; }
nav { display: grid; gap: .75rem; margin-top: 1.5rem; }
nav a { display: block; padding: 1rem; border-radius: .5rem; border: 1px solid currentColor; text-align: center; text-decoration: none; color: inherit; font-size: 1.1rem; }
.homebar { position: sticky; top: 0; z-index: 10; margin: -1rem -1rem .75rem; padding: .6rem 1rem; background: Canvas; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.homebar a { color: inherit; text-decoration: none; font-weight: 600; }
.pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; width: min(18rem, 100%); box-sizing: border-box; margin: 2rem auto; text-align: center; }
.pin input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 1.6rem; padding: .6rem; text-align: center; letter-spacing: .3rem; }
.pin input.masked { -webkit-text-security: disc; }
.pin button { width: 100%; box-sizing: border-box; font: inherit; padding: .8rem; border-radius: .5rem; border: 1px solid #2e9e5b; background: #2e9e5b; color: #fff; cursor: pointer; }
.pin .error { color: #c0392b; min-height: 1.2em; margin: 0; }