@view-transition { navigation: auto; }

@keyframes fade-in  { from { opacity: 0; filter: blur(4px); } }
@keyframes fade-out { to   { opacity: 0; filter: blur(4px); } }

::view-transition-old(root) { animation: 0.3s ease-in  fade-out; }
::view-transition-new(root) { animation: 0.3s ease-out fade-in;  }

body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 1rem; }
nav { display: flex; gap: 1rem; margin-bottom: 2rem; }
label { display: block; margin-bottom: 0.75rem; }
input { display: block; width: 100%; padding: 0.5rem; margin-top: 0.25rem; box-sizing: border-box; }
button { padding: 0.5rem 1rem; cursor: pointer; }
.error { color: red; }
.success { color: green; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid #ddd; }