/* Keep the underline near the lettering without reducing the touch target. */
:root{--stage:166px}
.chapter-nav{min-height:44px}
.chapter-nav a{position:relative;border-bottom:0;min-height:44px}
.chapter-nav a::after{content:"";position:absolute;bottom:9px;left:0;right:0;height:1px;background:currentColor;opacity:0;transition:opacity 180ms var(--ease)}
.chapter-nav a[aria-current]::after,.chapter-nav a:hover::after{opacity:1}
@property --fade-left{syntax:"<length>";inherits:false;initial-value:0px}
@property --fade-right{syntax:"<length>";inherits:false;initial-value:0px}
@media(max-width:650px){
 :root{--stage:112px}
 .chapter-nav{min-height:47px;--fade-right:24px;mask-image:linear-gradient(to right,transparent,#000 var(--fade-left),#000 calc(100% - var(--fade-right)),transparent);transition:--fade-left 180ms ease-out,--fade-right 180ms ease-out}
 .chapter-nav a::after{left:10px;right:10px;bottom:9px}
}
@media(prefers-reduced-motion:reduce){.chapter-nav,.chapter-nav a::after{transition:none}}