/* A stationary enamel plaque surrounds the existing native reading scroller.
   Only the viewport above it is masked; neither the plaque nor its rail fades. */
body #menu.menu[data-mode=about] .reading-frame{
 position:relative;isolation:isolate;display:flex;flex-direction:column;
 flex:0 1 auto;min-width:0;min-height:0;max-height:100%;width:100%;
 --reading-rail-inset:0px;
}
body #menu.menu[data-mode=about] .reading-frame:has([hidden]){display:none!important}
body #menu.menu[data-mode=about] .reading-frame::before,
body #menu.menu[data-mode=about] .reading-frame::after{
 content:"";position:absolute;inset:2px calc(2px + var(--reading-rail-inset)) 8px 2px;
 pointer-events:none;border:1px solid #b9b28ac7;border-radius:3px 16px 3px 16px;
}
body #menu.menu[data-mode=about] .reading-frame::before{
 z-index:0;background:radial-gradient(ellipse at 12% 0,#55736940,transparent 65%),linear-gradient(150deg,#23424a,#102a32);
 box-shadow:0 24px 90px #0009;
}
body #menu.menu[data-mode=about] .reading-frame::after{
 z-index:2;box-shadow:inset 0 0 0 4px #091e27,inset 0 0 0 5px #9aa58644;
}
body #menu.menu[data-mode=about] .reading-frame>.scroll-fade-viewport{position:relative;z-index:1}
body #menu.menu[data-mode=about] :is(#creditsSheet,#storySheet){
 background:none;box-shadow:none;border-color:transparent;
}
body #menu.menu[data-mode=about] #storySheet>.reading-heading{padding:30px 36px 0}
body #menu.menu[data-mode=about] #storyTitle{text-wrap:balance;overflow-wrap:break-word}
body #menu.menu[data-mode=about] #storyPage{padding-top:20px}
@media(max-width:599px){
 body #menu.menu[data-mode=about] #storySheet>.reading-heading{padding:22px 20px 0}
 body #menu.menu[data-mode=about] #storyPage{padding-top:16px}
}