:root{--bg:#fbfbf8;--ink:#1d2326;--soft:#5d676c;--line:#9aa3a7;--hair:#d9dcd8;--root:#0f6b6b;--bar:#f1f1ec;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;line-height:1.6;font-size:17px}
a{color:var(--root)}
.bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 1.2rem;border-bottom:1px solid var(--hair);background:var(--bg);position:sticky;top:0;z-index:2}
.bar .home{font-weight:600;color:var(--ink);text-decoration:none;font-size:1.05rem}
.bar nav{display:flex;gap:1rem;margin-left:auto}.bar nav a{text-decoration:none;font-size:.95rem}.bar nav a:hover{text-decoration:underline}
main{max-width:48rem;margin:0 auto;padding:1.2rem 1.2rem 4rem}
h1{font-size:1.7rem;line-height:1.25;margin:.6rem 0 1rem}
h2{font-size:1.25rem;margin:2.2rem 0 .5rem;scroll-margin-top:4rem}
p{margin:0 0 .9rem}
.aside{color:var(--soft);border-left:3px solid var(--hair);padding-left:.9rem}
.try{background:var(--bar);border:1px solid var(--hair);border-radius:.5rem;padding:.6rem .8rem}
.toc{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:1.2rem 0 .5rem;font-size:.95rem}
figure{margin:.6rem 0 1.2rem}figure img{width:100%;height:auto;border:1px solid var(--hair);border-radius:.5rem;display:block}
.sheet{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;border:1px solid var(--hair);border-radius:.6rem;padding:.9rem;margin:0 0 1.2rem;background:#fff}
.sheet h2{margin:0;font-size:1.15rem}
.sheet img{width:100%;height:auto;border:1px solid var(--hair);border-radius:.4rem}
.sheet .dl{display:flex;gap:1rem;flex-wrap:wrap;font-size:.95rem}
.back{margin-top:2.5rem;font-weight:600}
@media (min-width:1000px){main{max-width:60rem}}