@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/fraunces-latin-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("./fonts/ibm-plex-sans-latin.woff2") format("woff2"); }
:root { color-scheme: light; --canvas:#f7f4ea; --ink:#173024; --muted:#4d6257; --link:#165a3d; --leaf:#236746; --amber:#f2b84b; --line:#c9d7cc; }
* { box-sizing: border-box; } body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.6 "IBM Plex Sans", Arial, sans-serif; } a { color: var(--link); text-underline-offset: .18em; } a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.shell { max-width: 1184px; margin: 0 auto; padding: 32px; } header { border-bottom: 1px solid var(--line); padding-bottom: 16px; } .brand { align-items: center; color: var(--ink); display: inline-flex; font-weight: 600; gap: 8px; text-decoration: none; } .brand img { height: 28px; width: 28px; }
main { max-width: 68ch; padding: 64px 0 96px; } .eyebrow { color: var(--leaf); font-size: .75rem; font-weight: 600; letter-spacing: .08em; margin: 0 0 12px; text-transform: uppercase; } h1 { font: 600 clamp(2.5rem, 5vw, 4.5rem)/1 "Fraunces", Georgia, serif; letter-spacing: -.03em; margin: 0 0 24px; } h2 { font: 600 2rem/1.1 "Fraunces", Georgia, serif; margin: 64px 0 24px; }
.intro { font-size: 1.25rem; line-height: 1.55; margin: 0 0 24px; } .limitation { border-left: 4px solid var(--amber); color: var(--muted); margin: 0; padding-left: 16px; } #status { color: var(--muted); font-weight: 600; min-height: 1.6em; margin: 32px 0 0; }
.ranking { border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; } .row { align-items: start; border-bottom: 1px solid var(--line); display: grid; gap: 16px; grid-template-columns: 40px minmax(0, 1fr) max-content; padding: 24px 0; } .rank, .downloads { font-variant-numeric: tabular-nums; font-weight: 600; } .downloads { text-align: right; white-space: nowrap; } .details { min-width: 0; } .repository { font-weight: 600; overflow-wrap: anywhere; } .reason { color: var(--muted); margin: 4px 0 0; }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 1rem; padding-top: 16px; } footer p { margin: 0 0 12px; }
@media (max-width: 640px) { .shell { padding: 20px; } main { padding: 48px 0 64px; } h2 { margin-top: 48px; } .row { gap: 12px; grid-template-columns: 28px minmax(0, 1fr); } .downloads { grid-column: 2; text-align: left; } }