/* Last: animations and the rules for narrow widths. Must load last. */
@keyframes sheet{from{transform:translateX(16px);opacity:0}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.3);opacity:0}}
@keyframes slide{from{opacity:0;transform:translateY(-6px)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

@container (max-width:1100px){.c-xl{display:none}}
@container (max-width:940px){.c-lg{display:none}}
@container (max-width:820px){
  .hero-in{grid-template-columns:1fr}
  .chart{border-left:0;border-top:1px solid var(--line)}
  .two,.two.even{grid-template-columns:1fr}
}
@container (max-width:760px){.c-md{display:none}.de{display:none}.mo{display:inline}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:560px){
  .c-sm{display:none}.mo2{display:inline}

  .hero-in>div:first-child{padding:22px 18px 24px}
  .chart{padding:18px 18px 10px}

  .book{grid-template-columns:1fr;gap:10px}
  .books,.list{padding:2px 14px}
  .sel{flex:1 1 150px}
}
@media (max-width:520px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .rail .logo{flex:1;padding:0}
  .ws,.who-n,.rail-foot .me{display:none}
  .rail-foot{margin:0;padding:0;order:2}

  .nav{order:4;flex:1 1 100%;flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .nav a{white-space:nowrap}

}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}