/* Menu-only styles. The upper constellation and global landing styles are untouched. */
.app-menu{min-width:0;width:100%;scroll-margin-top:86px}
.app-menu-intro{margin:0 0 16px;color:var(--pvg-ink-dim);font-size:14px;text-align:center}
.app-menu .app-options {
 width:min(100%,760px);
 margin:0 auto;
 grid-template-columns:repeat(6,minmax(0,1fr));
 grid-auto-flow:row;
 grid-auto-columns:auto;
 gap:12px;
 border:0;
 padding:6px 4px 18px;
 overflow:visible;
 scroll-snap-type:none;
}
.app-menu .app-option {
 position:relative;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:10px;
 padding:6px 0 20px;
 min-height:0;
 border:0;
 border-radius:0;
 background:transparent;
 font-size:12px;
 letter-spacing:0;
 text-transform:none;
 white-space:nowrap;
}
.app-menu .app-option::after {
 content:"";
 position:absolute;
 bottom:4px;
 left:calc(50% - 12px);
 width:24px;
 height:3px;
 border-radius:3px;
 background:transparent;
}
.app-menu .app-option:is(:hover,:focus-visible,.is-active){color:var(--pvg-green);background:transparent}
.app-menu .app-option.is-active{font-weight:700}
.app-menu .app-option.is-active::after{background:var(--pvg-green)}
.app-menu .app-option-icon{width:76px;max-width:100%;margin:0}
.app-menu .app-option-icon img{filter:none}
.app-menu .app-option:is(:hover,:focus-visible,.is-active) .app-option-icon img{filter:none;transform:translateY(-4px)}
.app-menu .app-copy{position:relative;padding:29px 0 0;border-bottom:0;overflow-anchor:none}
.app-menu .app-copy.is-switching{pointer-events:none;will-change:opacity,transform}
.app-menu .app-panel:not(.app-panel-default){padding-bottom:27px}
.app-menu .app-panel-default{padding-bottom:28px}
.app-menu [data-app-demo]{display:block}
.app-menu [hidden]{display:none!important}
@media(max-width:800px){
 .app-menu .app-options{width:min(100%,420px);grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
 .app-menu .app-option-icon{width:64px}
 .app-menu .app-panel p{font-size:14px}
}
@media(max-width:520px){.app-menu .app-option{font-size:11px}.app-menu .app-copy{padding-top:24px}.app-menu .app-panel p{font-size:13px;line-height:1.7}.app-menu .app-panel h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){
 .app-menu .app-option-icon img{transition:none}
 .app-menu .app-option:is(:hover,:focus-visible,.is-active) .app-option-icon img{transform:none}
}
