@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@300;600&family=Roboto:wght@300;400;500&family=Roboto+Mono&display=swap');
:root{--cyan:rgb(0,255,212);--gray:rgb(138,138,134);--bg:rgb(243,243,239);--sand:rgb(231,231,223)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font:15px/1.6 Roboto,Arial,Helvetica,sans-serif;color:#000}
.wrap{max-width:960px;margin:0 auto;padding:24px 16px}
header.hero{background:#000;color:#fff;padding:34px 36px 30px}
.label{font:11px/16px "Roboto Mono",Menlo,Consolas,monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan)}
.label.g{color:var(--gray)}
h1,h2,h3{font-family:Blinker,"Trebuchet MS",Arial,sans-serif}
h1{font-weight:300;font-size:40px;line-height:44px;margin:14px 0 12px}
.lede{font-weight:300;font-size:16px;color:var(--sand);margin:0}
.rule{width:56px;height:2px;background:var(--cyan);margin:22px 0 12px}
main{background:#fff;padding:32px 36px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:16px 0}
.card{padding:18px;background:var(--sand)}.card.dark{background:#000;color:#fff}
.card h3{margin:6px 0;font-size:19px;font-weight:600}
.btn{display:inline-block;margin-top:12px;padding:10px 14px;background:var(--cyan);color:#000;text-decoration:none;font-weight:500;font-size:13px}
pre,code{font-family:"Roboto Mono",Menlo,Consolas,monospace;font-size:13px}pre{background:var(--sand);padding:12px;overflow:auto}
table{border-collapse:collapse;width:100%;font-size:13px}td,th{border-bottom:1px solid var(--sand);padding:6px;text-align:left;vertical-align:top}
select{font:inherit;padding:4px;margin:4px 8px 4px 0}
footer{font:10px/15px "Roboto Mono",monospace;color:var(--gray);padding:18px 36px}