:root { color-scheme: light; --ink: #17161c; --muted: #5b5965; --line: rgba(23, 22, 28, .12); --brand: #e2552b; }
* { box-sizing: border-box; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 400 17px/1.65 "Figtree", "Segoe UI", system-ui, sans-serif;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
}
header, main, footer { max-width: 760px; margin: 0 auto; }
header { padding-block: 22px; border-bottom: 1px solid var(--line); }
.logo { font: 800 1.15rem/1 "Bricolage Grotesque", "Segoe UI", sans-serif; text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 10px; }
.logo i { width: 38px; height: 28px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; color: #fff; font-style: normal; font-size: .8rem; }
main { padding-block: 40px 60px; }
h1 { font: 800 clamp(2.2rem, 6vw, 3.2rem)/1.05 "Bricolage Grotesque", "Segoe UI", sans-serif; letter-spacing: -.03em; margin: 0 0 24px; }
h2 { font: 700 1.2rem/1.3 "Bricolage Grotesque", "Segoe UI", sans-serif; margin: 32px 0 8px; }
p { margin: 0 0 12px; color: var(--muted); max-width: 68ch; }
.stand { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .85rem; }
a { color: var(--ink); }
footer { border-top: 1px solid var(--line); padding-block: 24px 40px; font-size: .9rem; }