:root { --bg:#f3ebdd; --card:#fffdf8; --text:#2f2a26; --soft:#5f554c; --accent:#2f5d57; --line:#d9ccb6; --btn:#9a4b28; --btn-text:#fffdf8; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1d2321; --card:#272f2c; --text:#f1eadd; --soft:#b4a99a; --accent:#8fc3b7; --line:#3c4743; --btn:#e3987a; --btn-text:#13201c; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.65 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 24px 18px 64px; }
nav { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-weight:600; }
a { color: var(--accent); }
h1 { font-size: 2.2rem; margin: 28px 0 4px; }
h2 { font-size: 1.25rem; margin: 36px 0 10px; color: var(--accent); }
.tag { font-size: 1.1rem; color: var(--soft); margin: 0 0 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; margin: 16px 0; }
.status { border-left: 4px solid var(--btn); }
ol.how { padding-left: 1.3rem; }
ol.how li { margin: 10px 0; }
ul { padding-left: 1.2rem; }
li { margin: 6px 0; }
.shots { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-top:12px; }
.shots img { width:100%; height:auto; border-radius:14px; border:1px solid var(--line); display:block; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; margin: 10px 0; }
summary { cursor:pointer; font-weight:700; }
details p { margin: 8px 0 4px; }
.note { color: var(--soft); font-size: .93rem; }
footer { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 16px; color: var(--soft); font-size: .93rem; }
footer a { margin-right: 14px; }