:root { --bg:#fbf6ee; --card:#fffdf8; --text:#3b3028; --soft:#6f6258; --accent:#5f8a6b; --line:#eadfcf; --btn:#a8543a; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1d1a17; --card:#26221e; --text:#efe6da; --soft:#b7aa9b; --accent:#8fbf9c; --line:#3a342e; --btn:#d9805f; }
}
* { 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: 2rem; margin: 28px 0 4px; }
h2 { font-size: 1.25rem; margin: 36px 0 10px; color: var(--accent); }
h3 { font-size: 1.02rem; margin: 22px 0 4px; }
.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); }
.btn { display:inline-block; background: var(--btn); color:#fff; font-weight:700; text-decoration:none; padding:10px 18px; border-radius:12px; }
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; }
footer { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 16px; color: var(--soft); font-size: .93rem; }
footer a { margin-right: 14px; }