:root{--dk:#1D4E5F;--mid:#4A7C8C;--iv:#F2F6F7;--pale:#D6E4E8;--ink:#17262c;--line:#d5e0e4}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--dk);line-height:1.2;font-weight:600}
h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:.2em 0 .4em}h2{font-size:1.5rem;margin:1.8em 0 .5em}h3{font-size:1.15rem;margin:.2em 0 .3em}
a{color:var(--dk)}img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:5}
header.site .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.brand{font-family:Georgia,serif;font-size:1.35rem;font-weight:700;color:var(--dk);text-decoration:none;letter-spacing:.04em}
nav.main{display:flex;gap:18px;flex-wrap:wrap;font-size:.95rem;align-items:center}
nav.main a{text-decoration:none;color:var(--ink)}nav.main a:hover{color:var(--dk);text-decoration:underline}
details.more{position:relative}details.more summary{cursor:pointer;list-style:none}details.more summary::-webkit-details-marker{display:none}
details.more div{position:absolute;background:#fff;border:1px solid var(--line);padding:10px 14px;display:flex;flex-direction:column;gap:8px;min-width:200px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.crumbs{font-size:.85rem;color:var(--mid);margin:18px 0 0}.crumbs a{color:var(--mid)}
.hero{background:var(--iv);padding:56px 0}.hero p.lead{font-size:1.2rem;max-width:620px}
.btn{display:inline-block;background:var(--dk);color:#fff;padding:12px 24px;border-radius:4px;text-decoration:none;font-weight:600}
.btn:hover{background:#163c49}.btn.alt{background:#fff;color:var(--dk);border:1px solid var(--dk)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin:20px 0}
.card{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.card:hover{border-color:var(--mid)}.card .ph,.card img{aspect-ratio:1/1;width:100%;object-fit:cover}
.card .t{padding:12px 14px 16px}.card .t b{display:block;color:var(--dk);font-family:Georgia,serif;font-size:1.05rem;line-height:1.3}.card .t span{font-size:.9rem;color:#4b5b61}
.ph{background:repeating-linear-gradient(45deg,var(--iv),var(--iv) 12px,var(--pale) 12px,var(--pale) 24px);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--mid);font-size:.8rem;padding:12px}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:start;margin:26px 0}
@media(max-width:800px){.split{grid-template-columns:1fr}}
ul.tick{padding-left:1.1em}ul.tick li{margin:.3em 0}
ol.steps{padding-left:1.3em}ol.steps li{margin:.5em 0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
details.faq{border-top:1px solid var(--line);padding:12px 0}details.faq summary{cursor:pointer;font-weight:600;color:var(--dk)}
.todo{background:#fff6e0;border:1px dashed #d9a400;padding:10px 14px;border-radius:4px;font-size:.9rem;color:#6b4e00;margin:14px 0}
.cta{background:var(--iv);padding:36px 0;margin-top:48px;text-align:center}
.tw{overflow-x:auto;margin:16px 0}.tw table{border-collapse:collapse;width:100%;font-size:.95rem}.tw th{background:var(--dk);color:#fff;text-align:left;padding:8px 10px}.tw td{border-bottom:1px solid var(--line);padding:8px 10px;vertical-align:top}
.art{max-width:760px;margin:0 auto;padding:10px 0 30px}.art h2{margin-top:1.8em}.art p,.art li{line-height:1.7}.art img.gh{width:100%;height:auto;border-radius:6px;margin:10px 0}.art code{background:var(--pale);padding:1px 5px;border-radius:3px;font-size:.9em}
.answer{background:var(--iv);border-left:4px solid var(--mid);padding:14px 18px;border-radius:4px;margin:18px 0}.credit{font-size:.8rem;color:#4b5b61}
.card.g img{aspect-ratio:16/9;height:auto;object-fit:cover}
footer.site{border-top:1px solid var(--line);padding:30px 0;font-size:.9rem;color:#4b5b61;margin-top:0}
footer.site .wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
footer.site a{color:#4b5b61}