.mobile-page,.menu-toggle{display:none}
.photo-slot-extra{background:#6c00ed}

@media(min-width:768px){
  :root[data-page] .site-header nav a[aria-current="page"]{color:var(--green)}
}

@media(max-width:767px){
  .desktop-page{display:none}
  .mobile-page{display:block}
  html{scroll-padding-top:calc(85 / 375 * 100vw + 12px)}
  .site-header{height:calc(85 / 375 * 100vw);padding:0;gap:0;--menu-background:var(--page)}
  [data-page=top][data-theme=normal] .site-header{--menu-background:var(--green)}
  .site-header[data-surface=paper]{--menu-background:var(--paper)}
  .site-header[data-surface=green]{--menu-background:var(--green)}
  .home-logo{position:absolute;left:calc(12 / 375 * 100vw);top:calc(23 / 375 * 100vw);width:calc(116 / 375 * 100vw);height:calc(27 / 375 * 100vw);margin:0}
  .menu-toggle{position:absolute;left:calc(130 / 375 * 100vw);top:calc(36.5 / 375 * 100vw);transform:translateY(-50%);display:flex;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;padding:10px;border:0;background:transparent;color:inherit}
  .menu-toggle span{display:block;width:calc(24 / 375 * 100vw);max-width:36px;height:1px;background:currentColor}
  .site-header nav{position:absolute;left:calc(111.56 / 375 * 100vw);top:calc(58 / 375 * 100vw);display:none;flex-direction:column;gap:0;width:calc(166 / 375 * 100vw);padding:7px 0 3px;border:1px solid currentColor;border-top:0;background:var(--menu-background);font-size:calc(14 / 375 * 100vw);line-height:1.45;white-space:nowrap}
  .site-header[data-menu-open=true] nav{display:flex}
  .site-header nav a{display:flex;align-items:center;min-height:24px;padding:0 calc(12 / 375 * 100vw)}
  .site-header nav a::after{display:none}
  .about-toggle{position:absolute;top:calc(12 / 375 * 100vw);right:calc(9 / 375 * 100vw);width:calc(82 / 375 * 100vw);min-width:44px;min-height:44px;gap:calc(5 / 375 * 100vw);margin:0;align-items:flex-end;font-size:calc(12 / 375 * 100vw);line-height:1.15;white-space:nowrap}
  .moon-icon{width:calc(46 / 375 * 100vw);height:calc(46 / 375 * 100vw)}
  #about-dialog{top:calc(85 / 375 * 100vw + 8px);right:8px;width:min(263.44px,calc(100vw - 24px));max-height:calc(100dvh - 85 / 375 * 100vw - 24px)}
  .site-footer{height:calc(100 / 375 * 100vw);gap:calc(8 / 375 * 100vw);flex-direction:column;font-size:calc(12 / 375 * 100vw);padding:calc(8 / 375 * 100vw) 12px;line-height:1.4}
  .site-footer a{order:-1;display:flex;align-items:center;justify-content:center;min-height:44px}
  .site-footer small{white-space:nowrap}
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
  .site-header[data-menu-open=true] nav{animation:menu-appear .22s cubic-bezier(.2,.7,.3,1) both}
  @keyframes menu-appear{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
}