:root { --ink:#2b2320; --paper:#faf7f0; --accent:#C76B43; --green:#2E5D3A; --muted:#7a6f66; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#ece5da; --paper:#191512; --accent:#d98a63; --green:#7fb08a; --muted:#9c9188; }
}
* { box-sizing: border-box; }
body { overflow-wrap:break-word; margin:0; font:17px/1.65 Georgia, 'Times New Roman', serif; color:var(--ink); background:var(--paper); }
header, footer { font-family: -apple-system, 'Segoe UI', sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.brand { font-weight:700; color:var(--accent); text-decoration:none; font-size:1.05rem; letter-spacing:.01em; }
nav a { color:var(--muted); text-decoration:none; margin-left:1.1rem; font-size:.95rem; }
nav a:hover { color:var(--accent); }
main { max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
h1 { font-size:1.9rem; line-height:1.25; color:var(--green); }
h2 { font-size:1.25rem; margin-top:2.2rem; color:var(--green); }
a { color:var(--accent); }
table { border-collapse:collapse; width:100%; font-size:.92rem; display:block; overflow-x:auto; }
th, td { border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); padding:.5rem .6rem; text-align:left; vertical-align:top; }
blockquote { margin:1rem 0; padding:.6rem 1rem; border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
footer { max-width:44rem; margin:0 auto; padding:1.5rem 1.25rem 3rem; color:var(--muted); font-size:.9rem; border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
footer a { color:var(--muted); }
strong { color:var(--ink); }
hr { border:none; border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent); margin:2rem 0; }

body.landing { font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; line-height:1.55; }
.landing h1, .landing h2, .landing h3 { font-family: Georgia, 'Times New Roman', serif; color:var(--green); }
.landing main { max-width:64rem; padding:0 1.25rem 4rem; }
.landing section { padding:3.5rem 0 0; }
.landing footer { max-width:64rem; }
.landing nav a { white-space:nowrap; }
@media (max-width: 30rem) { .landing nav .wide-only { display:none; } }
.hero { display:grid; grid-template-columns: 1fr; gap:2rem; align-items:center; padding-top:3rem; }
@media (min-width: 48rem) { .hero { grid-template-columns: 1.15fr 1fr; padding-top:4.5rem; } }
.hero-icon { width:72px; height:72px; border-radius:18px; display:block; margin-bottom:1.25rem; }
.hero h1 { font-size:clamp(2.2rem, 5vw, 3.2rem); line-height:1.1; margin:0 0 1rem; }
.lede { font-size:1.2rem; color:var(--muted); margin:0 0 1.75rem; max-width:32rem; }
.badge { display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--green); background:color-mix(in srgb, var(--green) 12%, transparent); padding:.3rem .65rem; border-radius:999px; margin-bottom:1rem; }
.ctas { display:flex; flex-wrap:wrap; gap:.75rem; }
.btn { display:inline-block; padding:.8rem 1.3rem; border-radius:12px; font-weight:600; text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.06); }
.btn-ghost { border:1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); color:var(--ink); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.mosaic { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.mosaic img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:16px; display:block; }
.section-title { font-size:1.9rem; margin:0 0 .5rem; }
.section-lede { color:var(--muted); margin:0 0 2rem; max-width:40rem; }
.features { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1rem; }
.card { padding:1.35rem; border-radius:16px; background:color-mix(in srgb, var(--ink) 4%, transparent); border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.card h3 { font-size:1.15rem; margin:0 0 .4rem; }
.card p { margin:0; color:var(--muted); }
.shots { display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory; }
.shots figure { margin:0; flex:0 0 auto; max-width:85vw; }
.shots figcaption { max-width:20rem; font-size:.9rem; color:var(--muted); margin-top:.75rem; }
.shots img { max-width:100%; object-fit:contain; height:32rem; max-height:70vh; border-radius:24px; scroll-snap-align:start; box-shadow:0 8px 30px color-mix(in srgb, var(--ink) 18%, transparent); }
.built { list-style:none; padding:0; display:grid; grid-template-columns:1fr; gap:1.25rem 2rem; }
@media (min-width: 48rem) { .built { grid-template-columns:1fr 1fr; } }
.built li { padding-left:1rem; border-left:3px solid var(--accent); }
.built strong { display:block; }
.built span { color:var(--muted); }
.support { padding:1.75rem; border-radius:16px; background:color-mix(in srgb, var(--green) 8%, transparent); }
.support p { margin:.4rem 0; }
.byline { font-size:.95rem; color:var(--muted); margin:1.2rem 0 0; }
.walkthrough { width:100%; max-height:75vh; border-radius:16px; background:#191512; }
a:focus-visible { outline:3px solid var(--green); outline-offset:4px; }