*{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  /* .sw/.bw cards were <article>, now <a> (real hrefs for crawlers/keyboard
     users) -- without this the UA stylesheet's link underline/color bleeds
     into every child (title, badges, index numbers). */
  a.sw,a.bw{display:block;text-decoration:none;color:inherit;}
  a.sw *,a.bw *{text-decoration:none;}
  body{background:#eae7e0;color:#1e1a16;font-family:'Noto Sans SC','Inter',sans-serif;font-weight:300;overflow:hidden;cursor:none;-webkit-font-smoothing:antialiased;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  ::selection{background:rgba(30,26,22,0.12);}

/* Tablet gap: the topbar needs ~1150px to lay out its three groups without
   overlapping, but the mobile rules below only kick in at 768px. */
@media(min-width:769px) and (max-width:1150px){
  #domain{display:none}
  #filters{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:44vw}
  #filters::-webkit-scrollbar{display:none}
  #filters button{padding:5px 9px}
  #si{width:96px!important}
  #views button{font-size:11px!important}
}

@media(max-width:768px){
  body{cursor:auto!important}
  #cd,#cr{display:none!important}
  #ht{display:none!important}
  #topbar{height:auto;min-height:88px;flex-wrap:wrap;padding:8px 12px;gap:6px;row-gap:8px}
  #brand{gap:8px}
  #logo-main{font-size:15px!important}
  #views{margin-left:2px!important;padding-left:10px!important}
  #view-graph,#view-blog{font-size:11px!important}
  #filters{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%;gap:3px;order:3;width:100%}
  #filters::-webkit-scrollbar{display:none}
  #filters button{font-size:9.5px!important;padding:4px 8px!important}
  #rctrl{gap:8px}
  #domain{display:none!important}
  #sw{max-width:40vw}
  #si{width:100%!important;font-size:10px!important;padding:5px 8px 5px 24px!important;min-width:0}
  #lb{font-size:9.5px!important;padding:5px 9px!important;flex-shrink:0}
  #admin-link{width:26px!important;height:26px!important;flex-shrink:0}
  #panel{width:calc(100% - 16px)!important;top:88px!important;right:8px!important;max-width:360px;bottom:8px;border-radius:8px!important}
  #legend{display:none!important}
  #hint{display:none!important}
  /* #stories is the default landing view -- it must clear the taller mobile
     topbar exactly like #blog does, or the page title sits under it. */
  #stories{inset:88px 0 0 0!important}
  #stories-inner{padding:28px 16px 80px!important}
  #stories-inner h1{font-size:26px!important}
  #stories-inner .sw:first-of-type{display:block!important}
  #stories-inner .sw:first-of-type>div:first-child{margin-bottom:16px}
  #stories-inner .stitle{font-size:18px!important}
  #stories-inner .sgrid{grid-template-columns:1fr!important;gap:28px!important}
  #blog{inset:88px 0 0 0!important}
  #blog-inner{padding:28px 16px 80px!important}
  #blog-inner .bw{display:block!important}
  #blog-inner .bw>div{width:100%!important;max-width:100%!important}
  #blog-inner .bw>div[style*="aspect-ratio"]{aspect-ratio:16/9!important;margin-bottom:16px}
  #blog-inner h1{font-size:28px!important}
  #blog-inner .bw .btitle{font-size:20px!important}
  #blog-inner .bw:first-of-type .btitle{font-size:22px!important}
  #blog-inner .bw p{font-size:12.5px!important;line-height:1.9!important}
  #phd{padding:14px 16px 10px}
  #pb{padding:14px 16px}
  #pname{font-size:19px!important}
  #pdesc{font-size:12px!important;line-height:1.85}
}
@media(max-width:480px){
  #topbar{padding:6px 8px;gap:4px;row-gap:6px}
  #logo-main{font-size:13px!important}
  #brand img{width:20px!important;height:20px!important}
  #views{margin-left:0!important;padding-left:8px!important}
  #view-graph,#view-blog{font-size:10px!important}
  #sw{max-width:50vw}
  #stories-inner{padding:22px 12px 70px!important}
  #stories-inner h1{font-size:21px!important}
  #blog-inner{padding:22px 12px 70px!important}
  #blog-inner h1{font-size:22px!important}
  #panel{width:100%!important;right:0!important;border-radius:0!important}
  #pconns{gap:8px!important}
}