@font-face { font-family: "Space Grotesk"; src: url("/fonts/SpaceGrotesk-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Bold-subset.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--scroll-pad-top, 0px); scroll-padding-bottom: var(--scroll-pad-bottom, 0px); } body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-16); line-height: var(--lh-body); } button, input, select, textarea { font: inherit; color: var(--text); } input, select, textarea { background-color: var(--surface); } a { color: var(--link); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .chrome :focus-visible { outline-color: var(--chrome-link); } .is-busy { cursor: progress; } .is-busy::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 8px; vertical-align: -0.15em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: busy-spin .7s linear infinite; } @keyframes busy-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .is-busy::before { animation: none; } } .mono, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }