@font-face{font-family:Berkeley Mono;src:url(/fonts/BerkeleyMono-Regular.otf)format("opentype");font-display:swap}:root{--bg:#fdfdfc;--fg:#1a1a1a;--muted:#6b6b66;color-scheme:light only}*{box-sizing:border-box}body{background:var(--bg);color:var(--muted);margin:0;font:16px/1.7 Berkeley Mono,ui-monospace,monospace}.page{grid-template-columns:140px minmax(0,1fr);gap:64px;max-width:920px;margin:0 auto;padding:80px 28px;display:grid}header{align-self:start;position:sticky;top:80px}.brand{margin:0 0 28px;line-height:0;display:inline-block}.brand img{border-radius:13px;width:56px;height:56px;display:block}nav{gap:10px;font-size:14px;display:grid}a{color:var(--fg);text-underline-offset:4px}nav a{color:var(--muted);text-decoration:none}nav a[aria-current=page],nav a:hover{color:var(--fg)}a:focus-visible{outline:1px solid var(--fg);outline-offset:5px}h1,h2{color:var(--fg);font-weight:400;line-height:1.4}h1{margin:0 0 28px;font-size:28px}h2{margin:36px 0 12px;font-size:18px}p{margin:0 0 18px}.date{margin:-14px 0 30px;font-size:12px}footer{margin-top:48px;font-size:12px}.home-links{flex-wrap:wrap;gap:12px 24px;font-size:14px;display:flex}.demo{margin:32px 0 0}.demo video{background:var(--fg);border-radius:12px;width:100%;height:auto;display:block}.demo video:focus-visible{outline:1px solid var(--fg);outline-offset:5px}.demo figcaption{margin-top:12px;font-size:12px}@media (width<=680px){.page{padding:32px 24px 48px;display:block}header{margin-bottom:44px;position:static}.brand{margin-bottom:14px}nav{gap:24px;display:flex}body{font-size:14px}h1{font-size:26px}}