.archive-hero { padding: 76px 0 45px; }.eyebrow { margin: 0 0 15px; color: #79e8d1; font: 750 .76rem ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }.archive-hero h1 { margin: 0; font-size: clamp(3.1rem, 7.8vw, 6.4rem); line-height: .97; letter-spacing: -.075em; }.archive-hero h1 em { color: var(--site-accent); font-style: normal; }.archive-hero > p:not(.eyebrow) { max-width: 670px; margin: 27px 0 0; color: var(--site-muted); line-height: 1.8; }.archive-count { display: inline-block; margin-top: 24px; padding: 8px 11px; border-radius: 7px; background: #163e3a; color: #8df0db; font-size: .82rem; font-weight: 750; }.syntax-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 25px 0 84px; border-top: 1px solid var(--site-line); }.syntax-card { position: relative; min-height: 190px; padding: 22px; overflow: hidden; border: 1px solid var(--site-line); border-radius: 15px; background: #ffffff0a; }.syntax-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--site-accent); content: ""; }.syntax-card:nth-child(4n + 2)::before { background: #ec6995; }.syntax-card:nth-child(4n + 3)::before { background: #4bd2b5; }.syntax-card:nth-child(4n)::before { background: #e2a13d; }.card-number { color: #aaa4ba; font: .72rem ui-monospace, monospace; }.syntax-card h2 { margin: 15px 0 12px; color: #fff; font-size: 1.3rem; line-height: 1.3; overflow-wrap: anywhere; }.card-details p { margin: 0; color: #c3bed0; font-size: .9rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }.card-details .explanation { color: #e5e1ee; }.card-details .detail-term { margin-top: 12px; color: #8df0db; font-weight: 720; }.card-details .detail + .detail { margin-top: 6px; }.card-details .detail-term + .detail { margin-top: 3px; } @media (max-width: 680px) { .archive-hero { padding-top: 59px; }.syntax-list { grid-template-columns: 1fr; }.syntax-card { min-height: auto; } }
.archive-page > main:not(#loginScreen), .archive-page > .site-footer { display: none; }.archive-page.archive-open > main:not(#loginScreen), .archive-page.archive-open > .site-footer { display: block; }.archive-page.archive-open #loginScreen { display: none; }.unlock-screen { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 24px; }.unlock-card { width: min(100%, 420px); padding: 32px; border: 1px solid var(--site-line); border-radius: 16px; background: linear-gradient(145deg, #ffffff13, #ffffff06); box-shadow: 0 18px 50px #0007; }.lock-icon { font-size: 34px; }.unlock-card h1 { margin: 12px 0 8px; font-size: 24px; letter-spacing: -.04em; }.unlock-card p { color: var(--site-muted); line-height: 1.55; }.unlock-card label { display: block; margin: 20px 0 7px; }.password-row { display: flex; gap: 8px; }.password-row input { min-width: 0; flex: 1; }.unlock-card > button[type=submit] { width: 100%; margin-top: 16px; }.unlock-card input { padding: 10px 12px; border: 1px solid var(--site-line); border-radius: 8px; outline: 0; background: #ffffff0c; color: var(--site-ink); font: inherit; }.unlock-card input:focus { border-color: var(--site-accent); box-shadow: 0 0 0 3px #ad8cff29; }.unlock-card button { cursor: pointer; border: 0; border-radius: 8px; padding: 10px 13px; background: var(--site-accent); color: #171126; font: inherit; font-weight: 750; }.unlock-card .secondary { background: #ffffff18; color: var(--site-ink); }.status { min-height: 24px; margin-bottom: 0; color: #ffb4c4 !important; } @media (max-width: 680px) { .archive-hero { padding-top: 59px; }.syntax-list { grid-template-columns: 1fr; }.syntax-card { min-height: auto; } }