:root { --ink:#1a1a1a; --muted:#6b6b6b; --line:#e6e2dc; --gold:#a8842c; --bg:#fbfaf8; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.top { display:flex; align-items:baseline; gap:12px; padding:20px 24px; border-bottom:1px solid var(--line); }
.brand { font-size:20px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--ink); }
.by { color:var(--muted); font-size:13px; }
main { max-width:1120px; margin:0 auto; padding:32px 24px 64px; }
h1 { font-weight:500; font-size:28px; margin:0 0 8px; }
.lead { color:var(--muted); margin:0 0 32px; }
.grid { display:grid; gap:28px; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); }
.card { background:#fff; border:1px solid var(--line); border-radius:2px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.card img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.card h2 { font-size:15px; font-weight:500; margin:0; }
.price { color:var(--muted); margin:0; font-size:14px; }
.try { margin-top:auto; padding:12px; border:0; background:var(--ink); color:#fff; cursor:pointer; letter-spacing:.06em; }
.try:hover { background:var(--gold); }
.shop { color:var(--muted); font-size:13px; text-decoration:none; }
.shop:hover { color:var(--gold); }
.result { max-width:520px; margin:0 auto; text-align:center; }
.result img { width:100%; border:1px solid var(--line); }
.btn { display:block; margin:12px 0; padding:14px; background:var(--ink); color:#fff; text-decoration:none; }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
.bottom { padding:24px; border-top:1px solid var(--line); text-align:center; }
.bottom a { color:var(--muted); font-size:13px; }