@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* Roles (TAM-100). Syntax colours are the flyers': GitHub light on white, the brand's
   github-prettylights-dark on black. */
:root, [data-theme="light"] {
  --surface: #FFFFFF; --text: #000000; --text-2: #707070; --link: #0000FF; --focus: #FFD923;
  --syn-fg: #1F2328; --syn-k: #CF222E; --syn-v: #953800; --syn-e: #8250DF; --syn-c: #6E7781;
}
[data-theme="dark"] {
  --surface: #000000; --text: #FFFFFF; --text-2: #999999; --link: #79C0FF;
  --syn-fg: #E6EDF3; --syn-k: #FF7B72; --syn-v: #FFA657; --syn-e: #D2A8FF; --syn-c: #8B949E;
}

* { box-sizing: border-box; }
html { background: var(--surface); color: var(--text); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 18px/28px 'IBM Plex Sans', system-ui, sans-serif; }
main, footer { max-width: 640px; margin: 0 auto; padding: 0 16px; }

.hero { padding: 24px 0 64px; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.label { margin: 0; font: 400 14px/20px 'IBM Plex Mono', monospace; letter-spacing: 0.005em; text-transform: uppercase; color: var(--text-2); }
.wordmark {
  flex: none; width: 89px; height: 36px; background: var(--text);
  -webkit-mask: url('/brand/wordmark.svg') center / contain no-repeat;
  mask: url('/brand/wordmark.svg') center / contain no-repeat;
}
h1 { margin: 48px 0 0; font: 800 clamp(40px, 11vw, 64px)/1.05 'Montserrat', sans-serif; letter-spacing: -0.01em; overflow-wrap: break-word; }
.lead { margin: 24px 0 0; font: 700 20px/28px 'Montserrat', sans-serif; }

.code { margin: 48px 0 0; font: 400 15px/24px 'IBM Plex Mono', monospace; white-space: pre-wrap; color: var(--syn-fg); }
.code code { font: inherit; }
.code-line { display: grid; }
.code-line[hidden] { display: none; }
.code-line > .ghost, .code-line > .typed { grid-area: 1 / 1; }
.code-line > .ghost { visibility: hidden; }
.tok-p { color: var(--syn-fg); }
.tok-k { color: var(--syn-k); }
.tok-v { color: var(--syn-v); }
.tok-e { color: var(--syn-e); }
.tok-c { color: var(--syn-c); font-style: italic; }
html[data-hero="pending"] body { opacity: 0; animation: reveal 0s 1s forwards; }
@keyframes reveal { to { opacity: 1; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

main > section:not(.hero) { padding-top: 64px; }
h2 { margin: 0 0 24px; font: 700 clamp(24px, 6vw, 30px)/1.25 'Montserrat', sans-serif; }
p { margin: 0 0 16px; }
strong { font-weight: 500; }
.closer { margin-top: 24px; }

.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 12px 0; border-top: 1px solid var(--text); }
.facts li:last-child { border-bottom: 1px solid var(--text); }

.cta { padding-bottom: 96px; }
.button {
  display: inline-flex; align-items: center; height: 40px; padding: 0 24px; margin: 8px 0 24px;
  border-radius: 4px; background: var(--text); color: var(--surface);
  font: 400 14px/1 'IBM Plex Mono', monospace; letter-spacing: 0.01em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
a { color: var(--link); }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

footer { padding-bottom: 32px; }
.tabs { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px dashed var(--text-2); }
.tabs span { height: 72px; display: grid; place-items: center; border-left: 1px dashed var(--text-2); }
.tabs span:first-child { border-left: 0; }
.tabs span::before {
  content: ''; width: 28px; height: 28px; background: var(--text);
  -webkit-mask: url('/brand/symbol.svg') center / contain no-repeat;
  mask: url('/brand/symbol.svg') center / contain no-repeat;
}
.signature { margin: 24px 0 8px; font: italic 400 14px/20px 'IBM Plex Mono', monospace; color: var(--syn-c); }
footer nav { display: flex; flex-wrap: wrap; gap: 24px; font: 400 14px/20px 'IBM Plex Mono', monospace; }
footer nav a { color: var(--text); display: inline-block; padding: 2px 0; }

@media (min-width: 768px) {
  main, footer { padding-inline: 24px; }
  body { font-size: 20px; line-height: 30px; }
  .hero { padding: 48px 0 96px; }
  main > section:not(.hero) { padding-top: 96px; }
}