:root { color-scheme: light; background: linear-gradient(110deg, #e2e3e5 0%, #f1f2f3 50%, #e2e3e5 100%); color: #27272a; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
main { width: 100%; max-width: 430px; margin-inline: auto; background: linear-gradient(90deg, #e4e5e7, #f3f3f4 50%, #e4e5e7); }
.slice { position: relative; margin: 0; padding: 0; }
.slice img { display: block; width: 100%; height: auto; }
.cta { position: absolute; display: block; border-radius: 3px; background: transparent; -webkit-tap-highlight-color: transparent; }
.cta:focus-visible { outline: 3px solid #21628a; outline-offset: 4px; }
.cta:active { box-shadow: inset 0 0 0 2px #c6d9e4; }
dialog { width: min(340px, calc(100% - 40px)); border: 0; border-radius: 8px; padding: 28px; line-height: 1.8; color: #27272a; background: #fafaf8; }
dialog::backdrop { background: rgb(0 0 0 / 45%); }
dialog p { margin: 0 0 20px; }
dialog button { min-height: 44px; padding: 10px 24px; border: 0; border-radius: 3px; background: #27272a; color: white; font: inherit; cursor: pointer; }