:root {
  --pink: oklch(65% .23 12);
  --yellow: oklch(95% .19 105);
  --muted-foreground: oklch(55% .05 250);
  --white: #fff;
  --light: #f1f1f1;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--foreground);
  background: var(--pink);
}
@font-face {
  font-family: 'Inter';
  src: url('./UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7__3100e775e861.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
.app { min-height: 100vh; max-width: 430px; margin: 0 auto; background: var(--pink); }
.progress-header { padding: 32px 20px 0; }
.progress-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: rgb(255 255 255 / 80%); font-size: 12px; font-weight: 600; }
.progress-label strong { color: var(--yellow); font-weight: 700; }
.progress-track { height: 6px; width: 100%; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 20%); }
.progress-fill { height: 100%; width: 25%; background: var(--yellow); border-radius: inherit; transition: width .7s ease-out; }
.step-content { padding: 24px 20px 32px; }
.card { background: var(--white); border-radius: 20px; padding: 24px; }
.verification-card { text-align: center; }
.shield-circle { width: 96px; height: 96px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in oklab, var(--pink) 10%, transparent); color: var(--pink); }
.shield-icon { animation: pulse-red 2.2s ease-in-out infinite; }
.shield-icon.finished { animation: none; }
@keyframes pulse-red { 50% { opacity: .55; transform: scale(.94); } }
h1 { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.25; }
.description { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted-foreground); }
.inner-progress { margin-top: 20px; height: 8px; overflow: hidden; background: var(--light); border-radius: 999px; }
.inner-progress > div { width: 0%; height: 100%; border-radius: inherit; background: var(--pink); transition: width .2s; }
.checks { margin-top: 20px; display: grid; gap: 12px; text-align: left; }
.check-row { display: flex; align-items: center; gap: 12px; color: var(--muted-foreground); font-size: 13px; }
.check-indicator { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--light); display: flex; align-items: center; justify-content: center; }
.check-row.complete { color: var(--foreground); font-weight: 600; }
.check-row.complete .check-indicator { background: var(--pink); color: var(--white); }
.check-row.complete .check-indicator::after { content: '✓'; font-size: 13px; font-weight: 900; }
.primary-button { margin-top: 20px; width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: var(--yellow); color: var(--foreground); font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform .2s, opacity .2s; }
.primary-button:active:not(:disabled) { transform: scale(.98); }
.primary-button:disabled { opacity: .5; cursor: default; }
.primary-button:focus-visible, .choice:focus-within { outline: 2px solid var(--foreground); outline-offset: 3px; }
.badge { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--pink) 10%, transparent); color: var(--pink); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.muted { color: var(--muted-foreground); font-size: 13px; }
.top-space { margin: 16px 0 4px; }
.account-title { font-size: 28px; font-weight: 900; margin: 0; line-height: 1; }
.small { font-size: 12px; margin: 4px 0 0; }
.detail-list { margin-top: 20px; }
.detail-list > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--light); font-size: 13px; }
.detail-list > div:last-child { border: 0; padding-bottom: 0; }
.detail-list span { color: var(--muted-foreground); }
.detail-list strong { white-space: nowrap; }
.below-button { margin: 12px 0 0; text-align: center; color: rgb(255 255 255 / 80%); font-size: 12px; }
.confirmation-title { font-size: 19px; font-weight: 900; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.confirmation-shield { color: var(--pink); }
.confirmation-description { margin: 0 0 16px; line-height: 1.6; }
.choices { display: grid; gap: 12px; }
.choice { display: flex; align-items: flex-start; gap: 12px; border: 2px solid #e5e7eb; border-radius: 12px; padding: 16px; font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice:has(input:checked) { border-color: var(--pink); background: color-mix(in oklab, var(--pink) 5%, transparent); }
.choice-box { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; background: var(--light); color: transparent; text-align: center; line-height: 22px; font-weight: 900; }
.choice input:checked + .choice-box { background: var(--pink); color: var(--white); }
.finish-card { text-align: center; }
.finish-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border-radius: 50%; background: color-mix(in oklab, var(--pink) 10%, transparent); color: var(--pink); font-size: 32px; font-weight: 700; }
.finish-card h2 { font-size: 22px; margin: 0; font-weight: 900; }
.session-box { background: #f8f8f8; padding: 16px; margin-top: 20px; border-radius: 12px; }
.session-box p { margin: 0; color: var(--muted-foreground); font-size: 12px; }
.session-box strong { display: block; color: var(--pink); font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; }
.demo-disclosure { margin: 0; padding: 0 20px 20px; color: rgb(255 255 255 / 80%); text-align: center; font-size: 11px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.detail-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-foreground);
}

.detail-list span svg {
  flex-shrink: 0;
  color: var(--pink);
}

.below-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}