:root {
  color-scheme: light;
  --bg: #f4f1ea;
  --ink: #1c1915;
  --muted: #6d665c;
  --card: #fffcf7;
  --line: #e4ddd2;
  --accent: #1c1915;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "SF Pro Text", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  background: radial-gradient(1200px 500px at 10% -10%, #fff8e8, transparent), var(--bg);
  color: var(--ink);
}

.page {
  width: min(640px, calc(100% - 32px));
  margin: 48px auto 80px;
}

.brand h1 { margin: 0 0 8px; font-size: 2rem; letter-spacing: -0.03em; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--muted); margin: 0 0 12px; }
.lede, .muted, .hint { color: var(--muted); line-height: 1.5; }
.lede { margin: 0 0 28px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 16px;
}

.product { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.kicker { margin: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; color: var(--muted); }
.product h2 { margin: 6px 0 4px; font-size: 1.35rem; }
.price { text-align: right; }
.amount { font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; }
.ccy { display: block; color: var(--muted); font-size: 0.8rem; }

apple-pay-button { --apple-pay-button-width: 100%; --apple-pay-button-height: 48px; display: block; }
#apple-pay-slot { margin-bottom: 12px; }

button.secondary {
  width: 100%;
  height: 48px;
  border: 1px solid var(--ink);
  background: transparent;
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button.secondary:hover { background: var(--ink); color: #fff; }

.hint { font-size: 0.88rem; margin: 12px 0 0; }
#result-json { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.82rem; }
textarea {
  width: 100%;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #fff;
}

details summary { cursor: pointer; font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }