*{box-sizing:border-box}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.6}
a{color:var(--accent)}a:focus-visible,label:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999em}.skip:focus{left:var(--gap);top:var(--gap);background:var(--card);padding:.5em;z-index:9}
header{background:var(--card);border-bottom:1px solid var(--border)}
.bar{max-width:var(--maxw);margin:auto;padding:var(--gap);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.logo{font-weight:800;font-size:1.3rem;text-decoration:none;color:var(--fg)}
details.nav{position:relative}details.nav summary{cursor:pointer;list-style:none;padding:.4em .8em;border:1px solid var(--border);border-radius:var(--radius)}
details.nav summary::-webkit-details-marker{display:none}
nav ul{list-style:none;margin:0;padding:0}nav li a{display:block;padding:.5em .8em;text-decoration:none;border-radius:var(--radius)}
nav a[aria-current]{background:var(--accent);color:var(--accent-fg)}
details.nav ul{position:absolute;right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);min-width:14rem;z-index:5}
.wide{display:none}
@media(min-width:60rem){details.nav{display:none}.wide{display:block}.wide ul{display:flex;gap:.25rem}}
main{max-width:var(--maxw);margin:auto;padding:var(--gap)}
.hero h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.15;margin:.5em 0 .25em}.lead{font-size:1.2rem;color:var(--muted)}
.btn{display:inline-block;background:var(--accent);color:var(--accent-fg);padding:.75em 1.4em;border-radius:var(--radius);text-decoration:none;font-weight:700}
.grid{display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:calc(var(--gap)*2)}
@media(min-width:40rem){.grid{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--gap)}.card h2{margin-top:0;font-size:1.25rem}
.ph{background:var(--ph-bg);color:var(--ph-fg);border:2px dashed var(--ph-fg);padding:.5em;border-radius:var(--radius);font-weight:600}
footer{border-top:1px solid var(--border);margin-top:calc(var(--gap)*3);padding:var(--gap);text-align:center;color:var(--muted)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
img,svg{max-width:100%;height:auto}a,summary{overflow-wrap:anywhere}