:root{--bg:#f8fafc;--fg:#334155;--head:#1e293b;--muted:#64748b;--line:#e2e8f0;--accent:#2563eb;--card:#ffffff;--onaccent:#ffffff}
@media (prefers-color-scheme:dark){:root{--bg:#10151c;--fg:#cbd5e1;--head:#f1f5f9;--muted:#94a3b8;--line:#26303d;--accent:#6db3f2;--card:#171e28;--onaccent:#10151c}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:8px;top:8px;background:var(--card);color:var(--head);padding:.6rem .9rem;border-radius:8px;z-index:10}

/* header and navigation */
.site-header{background:var(--card);border-bottom:1px solid var(--line)}
.bar{max-width:60rem;margin:0 auto;padding:.6rem 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.2rem 1.2rem}
.brand{font-weight:700;color:var(--head);text-decoration:none;font-size:1.15rem;padding:.4rem 0}
.site-header nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.1rem;margin:0;padding:0}
.site-header nav a{display:block;padding:.6rem .8rem;border-radius:8px;color:var(--fg);text-decoration:none;font-weight:500}
.site-header nav a:hover{background:var(--bg)}
.site-header nav a[aria-current="page"]{color:var(--accent);background:var(--bg);font-weight:700}

/* layout */
.wrap{max-width:60rem;margin:0 auto;padding:1.5rem 16px 3rem}
.narrow{max-width:46rem}
.crumbs{font-size:.88rem;color:var(--muted);margin:0 0 1rem}
.crumbs a{color:var(--muted)}
h1{font-size:1.9rem;line-height:1.25;color:var(--head);margin:.3rem 0 .5rem}
h2{font-size:1.3rem;color:var(--head);margin:2.2rem 0 .6rem}
h3{color:var(--head)}
p{margin:.7rem 0}
.lead{font-size:1.15rem;color:var(--fg)}
.muted{color:var(--muted)}
.meta{color:var(--muted);font-size:.9rem;margin:0 0 1rem}
.tag{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* hero */
.hero{background:var(--card);border-bottom:1px solid var(--line);padding:2.5rem 16px 2.2rem}
.hero .in{max-width:60rem;margin:0 auto}
.hero h1{font-size:2.1rem}

/* buttons */
.btn{display:inline-block;padding:.75rem 1.2rem;border-radius:8px;background:var(--accent);color:var(--onaccent);font-weight:600;text-decoration:none;margin:.3rem .5rem .3rem 0}
.btn.alt{background:transparent;color:var(--accent);border:2px solid var(--accent);padding:.65rem 1.1rem}
.btn.block{display:block;text-align:center;margin:.6rem 0 0}
.btn.fb{background:#2563eb;color:#fff}
.btn.vb{background:#7c3aed;color:#fff}
.btn.wa{background:#15803d;color:#fff}
.btn.em{background:#475569;color:#fff}

/* cards and boxes */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.card .pad{padding:16px}
.card h3{margin:.2rem 0;font-size:1.1rem}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.facts{color:var(--muted);font-size:.92rem;margin:.3rem 0 .8rem}
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}
.answer{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:14px 16px;margin:1rem 0}
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin:1rem 0}

/* listing page */
.layout{display:grid;gap:20px}
@media(min-width:760px){.layout{grid-template-columns:2fr 1fr}.full{grid-column:1/-1}}
dl{display:grid;grid-template-columns:9rem 1fr;gap:.6rem 1rem;margin:0;font-size:.95rem}
dt{color:var(--muted)}
dd{margin:0;font-weight:500}
dd small{display:block;font-weight:400;color:var(--muted)}
.price{font-size:1.6rem;font-weight:700;color:var(--head);margin:.2rem 0 1rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:10px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.95rem;background:var(--card)}
th,td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
th{color:var(--head)}
ul{padding-left:1.3rem}
li{margin:.4rem 0}
.sources li{font-size:.92rem}
.note{color:var(--muted);font-size:.92rem}

/* footer */
.site-footer{border-top:1px solid var(--line);background:var(--card);margin-top:2rem}
.foot{max-width:60rem;margin:0 auto;padding:1.4rem 16px 2.5rem;display:grid;gap:.8rem;font-size:.92rem;color:var(--muted)}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin:0;padding:0}
.foot a{color:var(--muted)}