:root { color-scheme: light; --ink:#1b1b1c; --mut:#656568; --bg:#f6f4ef; --card:#fff; --line:#e8e4dc; --accent:#6b4226; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink); background:var(--bg); }
header { background:#fff; border-bottom:1px solid var(--line); padding:14px 22px; display:flex; justify-content:space-between; align-items:center; }
.logo { font-weight:700; letter-spacing:-.02em; }
nav a { color:var(--mut); text-decoration:none; margin-left:16px; font-size:14px; }
.hero { max-width:920px; margin:0 auto; padding:56px 22px 24px; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); letter-spacing:-.03em; margin:0 0 12px; }
.hero p { color:var(--mut); max-width:54ch; }
.grid { max-width:920px; margin:0 auto; padding:12px 22px 64px; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }
.card .swatch { height:110px; border-radius:12px; margin-bottom:12px; }
.badge { display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#8a5a34; background:#f0e6da; padding:3px 8px; border-radius:999px; margin-bottom:10px; }
footer { border-top:1px solid var(--line); padding:20px 22px; color:var(--mut); font-size:13px; }
.note { max-width:920px; margin:0 auto 32px; padding:14px 16px; background:#fff8e8; border:1px solid #f0d9a0; border-radius:12px; font-size:13px; color:#6a5420; }
code { font-size:12px; background:#ece9e2; padding:1px 5px; border-radius:4px; }