:root { color-scheme: light; font: 18px/1.6 system-ui, sans-serif; color: #172328; background: #f4f3ee; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1000px; margin: auto; padding: 72px 28px 32px; }
.eyebrow, .tag { font-size: .7rem; letter-spacing: .14em; font-weight: 700; }
.eyebrow { color: #365d57; margin-bottom: 64px; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.08; letter-spacing: -.055em; margin: 0 0 24px; }
.intro { color: #52615f; margin-bottom: 48px; }
.demo { display: block; color: inherit; text-decoration: none; background: #fff; border: 1px solid #cbd2cd; border-radius: 12px; padding: 30px; max-width: 740px; }
.demo + .demo { margin-top: 20px; }
.demo:hover { border-color: #365d57; }
.demo:focus-visible { outline: 3px solid #365d57; outline-offset: 6px; }
.tag { color: #365d57; }
h2 { font-size: 1.4rem; line-height: 1.3; }
.demo p { color: #52615f; }
.action { font-weight: 650; }
footer { margin-top: 72px; font-size: .75rem; color: #52615f; }