ul[role=navigation]{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin:2rem 0;padding:1rem;list-style:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(90deg,#f8fafc,#f1f5f9,#f8fafc);border-radius:1rem;box-shadow:0 4px 20px rgba(0,0,0,.08)}ul[role=navigation] li{margin:0;position:relative;z-index:.5}ul[role=navigation] li a{display:flex;align-items:center;justify-content:center;min-width:3rem;height:3rem;padding:0 .75rem;border-radius:.5rem;font-size:1rem;font-weight:600;color:#1e293b;background-color:#fff;text-decoration:none;transition:all .2s ease;border:none;box-shadow:0 2px 6px rgba(0,0,0,.1);cursor:pointer}ul[role=navigation] li a:hover:not([aria-disabled=true]){transform:translateY(-3px);box-shadow:0 8px 15px rgba(0,0,0,.1);background-color:#fff}ul[role=navigation] li a:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--color-primary-500),.4),0 2px 6px rgba(0,0,0,.1)}ul[role=navigation] li.selected a{background:linear-gradient(135deg,var(--color-primary-500),var(--color-primary-600));color:white;font-weight:700;box-shadow:0 6px 15px rgba(var(--color-primary-500),.4)}ul[role=navigation] li.next a,ul[role=navigation] li.previous a{background-color:#fff;padding:0 1.5rem;font-weight:600;color:var(--color-primary-700);position:relative;overflow:hidden}ul[role=navigation] li.next a:before,ul[role=navigation] li.previous a:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,rgba(var(--color-primary-500),.1) 0,rgba(var(--color-primary-600),.1) 50%,rgba(var(--color-primary-500),.1) 100%);z-index:-1;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s ease-out}ul[role=navigation] li.next a:hover:before,ul[role=navigation] li.previous a:hover:before{transform:scaleX(1)}ul[role=navigation] li.next a:hover:not([aria-disabled=true]),ul[role=navigation] li.previous a:hover:not([aria-disabled=true]){color:var(--color-primary-800)}ul[role=navigation] li.disabled a{opacity:.5;cursor:not-allowed;background-color:#f1f5f9;color:#94a3b8;box-shadow:none}ul[role=navigation] li a:active:not([aria-disabled=true]){transform:scale(.95) translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.1)}ul[role=navigation] li:not(.selected):not(.disabled) a:after{content:"";position:absolute;bottom:-5px;left:50%;width:10px;height:10px;border-radius:50%;background-color:var(--color-primary-500);transform:translateX(-50%) scale(0);opacity:0;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}ul[role=navigation] li:not(.selected):not(.disabled) a:hover:after{transform:translateX(-50%) scale(1);opacity:1}ul[role=navigation] li:has(>span){display:flex;align-items:center;justify-content:center;min-width:3rem;height:3rem;font-size:1.25rem;color:#64748b}@media (max-width:640px){ul[role=navigation]{padding:.75rem;border-radius:.75rem;gap:.35rem}ul[role=navigation] li a{min-width:2.5rem;height:2.5rem;font-size:.9rem}ul[role=navigation] li.next a,ul[role=navigation] li.previous a{padding:0 1rem}}ul[role=navigation] li.first a,ul[role=navigation] li.last a{font-size:.85rem;padding:0 .5rem;background:#f8fafc;border:1px solid #e2e8f0}ul[role=navigation] li.first a:hover,ul[role=navigation] li.last a:hover{background:#f1f5f9;border-color:#cbd5e1}