@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');
* { box-sizing: border-box; }
body { margin: 0; background: #060f20; color: #e8f0fb; font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
section { display: flex; align-items: flex-start; justify-content: center; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); }
section img { width: 100%; max-width: 900px; height: auto; border-radius: 8px; display: block; box-shadow: 0 12px 48px #0009; margin-bottom: 8px; }
footer { flex-shrink: 0; padding: 6px 16px max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dots { display: flex; gap: 2px; }
.dots a { min-width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.dots a::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: #3b6bb559; transition: width .3s; }
.dots a[aria-current]::before { width: 20px; background: #e63946; }
.categories { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.categories a { display: flex; align-items: center; min-height: 28px; font-size: 10px; padding: 3px 10px; border-radius: 99px; color: #88a9da; border: 1px solid transparent; }
.categories a[aria-current] { background: #e6394624; color: #ef6570; border-color: #e6394659; }
:focus-visible { outline: 2px solid #ef6570; outline-offset: 2px; }
body.interactive { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.interactive main { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.interactive .track { display: flex; height: 100%; transition: transform .42s cubic-bezier(.4,0,.2,1); }
.interactive section { flex: 0 0 100%; min-width: 0; min-height: 0; height: 100%; overflow: hidden; align-items: center; }
.interactive section img { width: 100%; height: 100%; max-width: none; min-height: 0; object-fit: contain; margin: 0; border-radius: 0; box-shadow: none; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: #1a3d70; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .interactive .track, .dots a::before { transition: none; } }

@media (max-width: 600px) {
  section { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  section img { border-radius: 0; box-shadow: none; }
}