:root { color-scheme: light }
  * { box-sizing: border-box }
  body { margin:0; font:16px/1.6 ui-sans-serif,system-ui,sans-serif; color:#1a1512; background:#faf7f2 }
  #app { max-width:760px; margin:0 auto; padding:32px 24px }
  header { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.01em; padding-bottom:28px }
  .mark { color:#8a5a2b; font-size:22px }
  h1 { font-size:38px; line-height:1.15; letter-spacing:-.03em; margin:.2em 0 .3em }
  p { color:#5b5048; max-width:44ch }
  .buy { display:inline-block; margin:18px 0 34px; background:#8a5a2b; color:#fff;
         text-decoration:none; padding:12px 20px; border-radius:10px; font-weight:600 }
  .beans { list-style:none; padding:0; margin:0; display:grid; gap:10px }
  .beans li { display:flex; justify-content:space-between; padding:14px 16px; background:#fff;
              border:1px solid #eadfd2; border-radius:12px }
  .beans span { color:#8a7c6e }
  footer { margin-top:40px; padding-top:20px; border-top:1px solid #eadfd2; color:#8a7c6e; font-size:14px }