:root { color-scheme: dark; --ink: #f5f4ed; --muted: #a6a69e; --bg: #0d1110; --panel: #17201d; --line: #294038; --accent: #b6ff64; }
* { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; } header, main, footer { max-width: 1120px; margin: auto; padding-left: 24px; padding-right: 24px; } header { height: 76px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); } .brand { font-weight: 800; font-size: 1.2rem; letter-spacing: -.04em; } nav { display: flex; gap: 20px; } a { color: inherit; text-decoration: none; } nav a, footer, .eyebrow { color: var(--muted); } nav a:hover, h2 a:hover { color: var(--accent); } main { min-height: calc(100vh - 144px); padding-top: 76px; padding-bottom: 76px; } footer { border-top: 1px solid var(--line); padding-top: 24px; padding-bottom: 36px; font-size: .9rem; } .hero { max-width: 780px; } .eyebrow { letter-spacing: .12em; font-size: .72rem; font-weight: 700; } h1 { font-size: clamp(2.8rem, 8vw, 6.2rem); letter-spacing: -.07em; line-height: .93; margin: .2em 0; } h2 { letter-spacing: -.035em; } .hero > p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: 1.2rem; } .actions { display: flex; gap: 12px; margin-top: 30px; } .button { background: var(--accent); color: #101510; padding: 11px 17px; border-radius: 999px; font-weight: 700; } .button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 24px; } article { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } article p { color: var(--muted); } .status { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; } .available { background: #284f25; color: var(--accent); } .planned { background: #2c2c29; color: #ccc9b9; } pre { overflow: auto; padding: 18px; background: #080b0a; border: 1px solid var(--line); border-radius: 8px; } code { color: var(--accent); } @media (max-width: 620px) { header { height: auto; padding-top: 18px; padding-bottom: 18px; gap: 12px; flex-direction: column; } main { padding-top: 42px; } nav { gap: 12px; font-size: .9rem; } }