* { box-sizing: border-box; }
body { margin: 0; font-family: 'DM Sans', system-ui, sans-serif; color: #1A1036; }
a { color: inherit; text-decoration: none; }
.sample-body { background: #EFEAF8; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 40px; gap: 20px; }
.sample-navigation { width: 100%; max-width: 560px; font-size: 14px; }
.sample-navigation > a { display: inline-flex; padding: 8px 0; font-weight: 700; }
.sample-navigation > div { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.sample-navigation > div a { padding: 10px 14px; border-radius: 999px; background: #FFFBF2; font-weight: 700; }
.sample-navigation a[aria-current] { color: #FF8AD0; background: #1A1036; }
.sample-navigation p { font-size: 13px; line-height: 1.5; color: #4B4468; margin: 0; }
.sample-page { max-width: 390px; border-radius: 24px; box-shadow: 0 20px 60px rgba(26,16,54,.12); }
.sample-page > :first-child { border-radius: 24px 24px 0 0; }
.sample-page > :last-child { border-radius: 0 0 24px 24px; margin-top: 16px; }
.sample-page div[style*="gap:8px"] { flex-wrap: wrap; }
.sample-page div[style*="justify-content:space-between"] { gap: 10px; }
.sample-page div[style*="align-items:baseline"] { flex-wrap: wrap; }
.sample-action { border: 0; font: inherit; text-align: center; cursor: pointer; padding: 10px 12px; min-height: 44px; height: auto !important; }
.sample-action:hover { filter: brightness(.96); }
dialog { width: min(440px, calc(100% - 32px)); padding: 28px; border: 2px solid #1A1036; border-radius: 28px; background: #FFFBF2; color: #1A1036; }
dialog::backdrop { background: rgba(26,16,54,.5); }
dialog h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; line-height: 1.05; margin: 0 0 16px; }
dialog p { line-height: 1.6; }
dialog .btn { display: inline-flex; border-radius: 999px; padding: 14px 22px; font-weight: 700; }
dialog .btn-ink { background: #1A1036; color: #FF8AD0; }
.sample-dismiss { margin-top: 16px; padding: 10px 0; border: 0; background: transparent; color: #1A1036; font-weight: 700; cursor: pointer; }
@media (max-width: 400px) { .sample-body { padding: 16px 12px 28px; } }