:root {
      --bg: #f3f5f1;
      --paper: #ffffff;
      --ink: #1b241c;
      --muted: #5c675e;
      --line: #dde3da;
      --green: #3d5a3e;
      --green-dark: #2c4330;
      --gold: #8a6e32;
      --gold-soft: #f6f0e2;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
      line-height: 1.65;
    }

    a { color: var(--green-dark); }

    .top {
      background: var(--green-dark);
      color: #f4f7f2;
    }

    .top-inner {
      max-width: 820px;
      margin: 0 auto;
      padding: 28px 20px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .top-copy { min-width: 0; }

    .store-link {
      flex: 0 0 auto;
      display: block;
      line-height: 0;
    }

    .store-link:focus-visible {
      outline: 2px solid #d7c48a;
      outline-offset: 4px;
      border-radius: 8px;
    }

    .store-badge {
      display: block;
      height: 40px;
      width: auto;
    }

    .store-badge[hidden] { display: none; }

    .brand {
      margin: 0;
      font-size: 0.82rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #d7c48a;
    }

    .top h1 {
      margin: 8px 0 0;
      font-size: 1.7rem;
      line-height: 1.25;
      font-weight: 700;
    }

    .controls {
      position: sticky;
      top: 0;
      z-index: 2;
      background: rgba(243, 245, 241, 0.94);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(8px);
    }

    .controls-inner {
      max-width: 820px;
      margin: 0 auto;
      padding: 12px 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    button {
      appearance: none;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      border-radius: 999px;
      padding: 8px 14px;
      font: inherit;
      font-size: 0.92rem;
      cursor: pointer;
    }

    button[aria-pressed="true"] {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
    }

    .spacer { flex: 1 1 12px; }

    main {
      max-width: 820px;
      margin: 0 auto;
      padding: 8px 20px 64px;
    }

    article {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 28px 26px 36px;
      margin-top: 18px;
    }

    article h1 {
      margin: 0 0 8px;
      font-size: 1.55rem;
      line-height: 1.3;
      color: var(--green-dark);
    }

    article h2 {
      margin: 2rem 0 0.6rem;
      padding-top: 0.4rem;
      font-size: 1.15rem;
      color: var(--green-dark);
    }

    article h3 {
      margin: 1.3rem 0 0.4rem;
      font-size: 1rem;
    }

    article p { margin: 0.75rem 0; }

    article ul,
    article ol {
      margin: 0.6rem 0 0.9rem;
      padding-left: 1.3rem;
    }

    article li + li { margin-top: 0.25rem; }

    article hr {
      border: 0;
      border-top: 1px solid var(--line);
      margin: 1.6rem 0;
    }

    article strong { color: var(--green-dark); }

    footer {
      max-width: 820px;
      margin: 0 auto;
      padding: 0 20px 40px;
      color: var(--muted);
      font-size: 0.88rem;
    }

    @media (max-width: 640px) {
      .top-inner { align-items: flex-start; flex-direction: column; }
      .top h1 { font-size: 1.35rem; }
      article { padding: 22px 16px 28px; }
    }

    @media print {
      .controls { display: none; }
      body { background: #fff; }
      article { border: 0; }
      article[hidden] { display: none !important; }
    }