*{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}
  #views button{font-size:11px!important}
}

@media(max-width:768px){
  body{cursor:auto!important}
  #cd,#cr{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}
  #rctrl{gap:8px}
  #domain{display:none!important}
  #lb{font-size:9.5px!important;padding:5px 9px!important;flex-shrink:0}
  #admin-link{width:26px!important;height:26px!important;flex-shrink:0}
  #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}
  #exit{top:96px!important}
  #skyTop{top:88px!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}
}
@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}
  #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}
}

/* ===== 星途 (star journey view) ============================================
   Structural + stateful styles for the elements src/starmap.js drives via
   class toggles (.on) and repeated markup (chips, hop links) -- everything
   one-off gets inline styles directly in template.html per this file's
   existing convention; these are the pieces that need real CSS (transitions,
   :hover, multiple instances). Dark theme is scoped to `body.sky-dark`,
   toggled by src/app.js's setView() only while the 星图 view is active. */
#skyTop{position:fixed;top:56px;left:0;right:0;padding:16px 20px 30px;pointer-events:none;z-index:6;background:linear-gradient(180deg,rgba(16,12,8,.85),rgba(16,12,8,0));display:none;}
#skyTitle{margin:2px 0 0;font-size:16px;font-weight:600;color:#eae7e0;}
#skySub{font-size:11px;color:#b8ad98;margin-top:2px;}

#picker{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:6;width:min(720px,94vw);margin-bottom:calc(18px + env(safe-area-inset-bottom));display:flex;gap:8px;flex-wrap:wrap;justify-content:center;transition:opacity .4s;}
.pk-label{width:100%;text-align:center;font-size:12px;color:#b8ad98;letter-spacing:.08em;margin-bottom:2px;}
.path-chip{cursor:none;border:1px solid rgba(234,231,224,.14);background:rgba(22,17,12,.6);color:#eae7e0;padding:8px 15px;border-radius:100px;font-size:13px;letter-spacing:.02em;backdrop-filter:blur(8px);transition:.2s;display:flex;align-items:center;gap:7px;}
.path-chip:hover{border-color:rgba(234,231,224,.4);}
.path-chip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.path-chip .n{font-size:11px;color:#b8ad98;}

#hud{position:fixed;left:0;right:0;bottom:0;z-index:7;padding:0 16px calc(18px + env(safe-area-inset-bottom));display:flex;justify-content:center;transform:translateY(120%);transition:transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none;}
#hud.on{transform:none;}
#hud .card{pointer-events:auto;width:min(560px,94vw);background:rgba(22,17,12,.74);backdrop-filter:blur(16px);border:1px solid rgba(234,231,224,.14);border-radius:18px;padding:18px 20px 16px;}
#cYr{font-family:'Songti SC','Noto Serif SC',Georgia,serif;font-size:13px;color:#d4b25a;letter-spacing:.1em;}
#cName{margin:4px 0 8px;font-size:19px;line-height:1.3;font-weight:600;color:#eae7e0;}
#cAlso{font-size:12px;color:#b8ad98;margin-bottom:12px;line-height:1.7;}
.hop{cursor:none;color:#eae7e0;border-bottom:1px dashed rgba(234,231,224,.4);}
.hop:hover{color:#fff;}
#hud .bar{display:flex;align-items:center;gap:10px;}
.nav{cursor:none;border:1px solid rgba(234,231,224,.14);background:rgba(234,231,224,.06);color:#eae7e0;width:40px;height:40px;border-radius:50%;font-size:17px;display:flex;align-items:center;justify-content:center;transition:.2s;flex:0 0 auto;}
.nav:hover{background:rgba(234,231,224,.16);}
.nav[disabled]{opacity:.3;cursor:default;}
#prog{flex:1;font-size:12px;color:#b8ad98;text-align:center;letter-spacing:.04em;}
#read{text-decoration:none;color:#d4b25a;font-size:12px;letter-spacing:.05em;flex:0 0 auto;}

#exit{position:fixed;top:72px;right:18px;z-index:8;cursor:none;font-size:12px;color:#b8ad98;background:none;border:none;letter-spacing:.05em;opacity:0;transition:.3s;}
#exit.on{opacity:1;}
#exit:hover{color:#eae7e0;}

body.sky-dark #topbar{background:rgba(16,12,8,.82)!important;}
body.sky-dark #logo-main,body.sky-dark #view-graph{color:#eae7e0!important;}
body.sky-dark #view-stories,body.sky-dark #view-blog{color:#9a948c!important;}
body.sky-dark #domain{color:#8a8478!important;}
body.sky-dark #lb{color:#b8ad98!important;border-color:rgba(234,231,224,.14)!important;}
body.sky-dark #legend>div{color:#8a8478!important;}
body.sky-dark #hint{color:#8a8478!important;}
body.sky-dark #cd{background:#eae7e0!important;}
body.sky-dark #cr{border-color:rgba(234,231,224,.3)!important;}
body.sky-dark #lb:hover{color:#eae7e0!important;border-color:rgba(234,231,224,.4)!important}

@media(prefers-reduced-motion:reduce){#hud,#picker,#exit{transition:none!important;}}