* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 76px;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 480px; margin: 0 auto; padding: 16px 20px 0; }
.num { font-variant-numeric: tabular-nums; }
.hero { font-size: 60px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; }
.h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.022em; }
.sub { font-size: 14px; color: var(--text-2); }
.muted { color: var(--text-3); }

.card { background: var(--surface); border-radius: var(--radius-card); padding: 14px 16px; }

.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 52px; padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
}
.row:last-child { border-bottom: none; }
.row-label { font-size: 16px; font-weight: 500; }

.check {
  width: 44px; height: 44px; border: none; background: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.check i {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--border); display: block;
  transition: background var(--tap) var(--ease), border-color var(--tap) var(--ease);
}
.check[aria-pressed='true'] i { background: var(--text-1); border-color: var(--text-1); }

.bar { height: 6px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--text-1); border-radius: var(--radius-pill); transition: width var(--sheet) var(--ease); }

.pill {
  font-size: 14px; font-weight: 600; color: var(--bg); background: var(--text-1);
  border: none; border-radius: var(--radius-pill); padding: 12px 24px;
  min-height: 44px; cursor: pointer;
  transition: transform var(--tap) var(--ease);
}
.pill:active { transform: scale(0.97); }

.field {
  font: inherit; font-variant-numeric: tabular-nums; color: inherit;
  background: none; border: none; width: 100%;
  font-size: 60px; font-weight: 700; letter-spacing: -0.022em;
}
.field:focus { outline: none; }
.field::placeholder {
  color: var(--text-3); opacity: 1;
  font-size: 26px; font-weight: 500; letter-spacing: -0.01em;
}

/* iOS Safari force-zooms the page when a focused input is under 16px.
   Every input in this app must therefore be 16px or larger. Do not use
   maximum-scale=1 to suppress it -- that disables pinch-zoom entirely. */
input, select, textarea { font-size: 16px; }

.inline-num {
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: none;
  border: none;
  text-align: right;
  min-height: 44px;
}
.inline-num:focus { outline: none; color: var(--text-1); }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around;
  padding: 10px 0 22px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid var(--border);
}
.tabs button {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: -0.01em;
  min-width: 88px; min-height: 44px;
  transition: color var(--tap) var(--ease);
}
.tabs button[aria-current='true'] { color: var(--text-1); font-weight: 600; }

.screen { display: none; }
.screen[data-active='true'] { display: block; }