main { max-width: 880px; margin: 0 auto; padding: 28px 16px calc(120px + env(safe-area-inset-bottom)); } header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 22px; } .brand { color: inherit; text-decoration: none; font-size: 21px; font-weight: 600; letter-spacing: -.02em; text-shadow: 0 1px 12px rgba(8, 12, 24, .4); } .brand span { color: var(--ink-soft); font-weight: 400; } .avatar { position: relative; width: 42px; height: 42px; padding: 3px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; } .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: .92; } .avatar::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; box-shadow: var(--edge); pointer-events: none; } h2 { margin: 32px 6px 12px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-soft); text-shadow: 0 1px 10px rgba(8, 12, 24, .45); scroll-margin-top: 20px; } .pages { display: grid; } .page { grid-area: 1 / 1; min-width: 0; visibility: hidden; pointer-events: none; transform: translateX(-28px); transition: transform .6s cubic-bezier(.2, .8, .2, 1), visibility .6s; } .page.active { visibility: visible; pointer-events: auto; transform: none; } .page.active ~ .page { transform: translateX(28px); } .page h2 { opacity: 0; transition: opacity .18s ease; } .page.active h2 { opacity: 1; transition: opacity .45s ease .1s; } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; } } footer { margin-top: 40px; text-align: center; font-size: 12px; color: var(--ink-soft); text-shadow: 0 1px 10px rgba(8, 12, 24, .5); }