:root {
      --sidebar-w: 252px;
      --bg: #07091a;
      --sidebar-bg: #040610;
      --sidebar-hover: #0b1030;
      --sidebar-active: #0f1e48;
      --accent: #6aaaf8;
      --text-light: #c0d4f4;
      --text-dim: #4868a0;
      --header-h: 52px;
    }

    * { margin:0; padding:0; box-sizing:border-box; }

    body {
      font-family:'微軟正黑體','Noto Sans TC',sans-serif;
      background:var(--bg);
      display:flex;
      height:100vh;
      overflow:hidden;
    }

    #overlay {
      display:none; position:fixed; inset:0;
      background:rgba(0,0,0,0.65); z-index:15; backdrop-filter:blur(2px);
    }
    #overlay.visible { display:block; }

    #sidebar {
      width:var(--sidebar-w); min-width:var(--sidebar-w);
      background:var(--sidebar-bg);
      display:flex; flex-direction:column;
      height:100vh; overflow:hidden;
      box-shadow:3px 0 24px rgba(0,0,0,0.6);
      z-index:20; transition:transform .28s ease;
    }

    .sidebar-header {
      padding:1.3rem 1rem 1rem;
      border-bottom:1px solid rgba(255,255,255,0.08);
      flex-shrink:0; display:flex;
      align-items:flex-start; justify-content:space-between;
    }
    .sidebar-header .logo {
      font-size:1.28rem; color:var(--accent);
      font-weight:bold; letter-spacing:.1em;
      display:flex; align-items:center; gap:.5rem;
      cursor:pointer; text-decoration:none;
      transition:color .2s;
    }
    .sidebar-header .logo:hover { color:#90c8ff; }
    .sidebar-header .tagline {
      font-size:.72rem; color:var(--text-dim);
      margin-top:.3rem; letter-spacing:.1em;
    }
    #sidebar-close {
      display:none; background:none; border:none;
      color:var(--text-dim); font-size:1.4rem;
      cursor:pointer; padding:0 0 0 .5rem; line-height:1; flex-shrink:0;
    }

    .star-list {
      list-style:none; overflow-y:auto; flex:1; padding:.4rem 0 .6rem;
    }
    .star-list::-webkit-scrollbar { width:4px; }
    .star-list::-webkit-scrollbar-track { background:transparent; }
    .star-list::-webkit-scrollbar-thumb { background:#1a3060; border-radius:3px; }

    .group-header {
      display:flex; align-items:center; gap:.5rem;
      padding:.6rem 1rem .6rem .9rem;
      cursor:pointer; user-select:none;
      transition:background .18s;
      border-left:3px solid transparent;
    }
    .group-header:hover { background:rgba(255,255,255,0.05); }
    .group-header:focus-visible,
    .star-item:focus-visible {
      outline:2px solid var(--accent);
      outline-offset:-2px;
      background:rgba(106,170,248,0.12);
    }
    .group-header.has-active { border-left-color:var(--accent); }

    .group-icon { font-size:.95rem; flex-shrink:0; }
    .group-label {
      flex:1; font-size:.8rem; font-weight:bold;
      letter-spacing:.12em; color:var(--text-dim); text-transform:uppercase;
    }
    .group-header.has-active .group-label { color:var(--accent); }

    .group-badge {
      font-size:.68rem; background:rgba(106,170,248,0.12);
      color:var(--text-dim); border-radius:8px; padding:.05rem .45rem; flex-shrink:0;
    }
    .group-header.has-active .group-badge { background:rgba(106,170,248,0.25); color:var(--accent); }

    .group-arrow {
      font-size:.78rem; color:var(--text-dim);
      transition:transform .22s ease; flex-shrink:0; line-height:1;
    }
    .group-header.open .group-arrow { transform:rotate(90deg); }

    .group-list {
      list-style:none; max-height:0; overflow:hidden;
      transition:max-height .28s ease;
    }
    .group-list.open { max-height:600px; }

    .star-item {
      display:flex; align-items:center; gap:.65rem;
      padding:.58rem 1rem .58rem 1.65rem;
      cursor:pointer; transition:background .18s;
      border-left:3px solid transparent; user-select:none;
    }
    .star-item:hover { background:var(--sidebar-hover); }
    .star-item.active { background:var(--sidebar-active); border-left-color:var(--accent); }
    .star-item .dot {
      width:9px; height:9px; border-radius:50%; flex-shrink:0;
      box-shadow:0 0 6px currentColor;
    }
    .star-item .info { flex:1; min-width:0; }
    .star-item .name { font-size:.9rem; color:var(--text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .star-item .latin { font-size:.67rem; color:var(--text-dim); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .star-item.active .name  { color:#fff; }
    .star-item.active .latin { color:#80b0e8; }

    .ext-tag {
      font-size:.58rem; color:#5878a8;
      background:rgba(106,170,248,0.08);
      border:1px solid rgba(106,170,248,0.25);
      border-radius:7px; padding:.02rem .35rem;
      margin-left:.4rem; vertical-align:1.5px;
      letter-spacing:.08em; font-weight:normal;
    }
    .star-item.active .ext-tag { color:#90b8e8; border-color:rgba(144,184,232,0.45); }

    .sidebar-footer {
      padding:.8rem 1rem; border-top:1px solid rgba(255,255,255,0.06);
      font-size:.7rem; color:var(--text-dim); letter-spacing:.06em; flex-shrink:0;
    }
    .star-count { color:var(--accent); font-weight:bold; }

    #main {
      flex:1; display:flex; flex-direction:column;
      min-width:0; height:100vh;
    }

    #topbar {
      height:var(--header-h); min-height:var(--header-h);
      background:#080c20; border-bottom:1px solid #1a2848;
      display:flex; align-items:center; padding:0 1.5rem; gap:1rem;
      box-shadow:0 2px 12px rgba(0,0,0,0.5); z-index:5;
    }
    #menu-toggle {
      display:none; background:none; border:none; cursor:pointer;
      padding:.3rem .5rem; color:#6aaaf8; font-size:1.35rem;
      line-height:1; border-radius:6px; transition:background .15s; flex-shrink:0;
    }
    #menu-toggle:hover { background:rgba(106,170,248,0.15); }

    #topbar .breadcrumb { font-size:.88rem; color:#4878b0; display:flex; align-items:center; gap:.5rem; }
    #topbar .breadcrumb .sep { color:#2a4870; }
    #topbar .home-link {
      color:#6aaaf8; cursor:pointer; font-size:.88rem;
      text-decoration:none; transition:color .2s;
    }
    #topbar .home-link:hover { color:#90c8ff; text-decoration:underline; }
    #topbar .current-name { font-size:.95rem; color:#c0d8f8; font-weight:bold; }
    #topbar .current-latin { font-size:.78rem; color:#5880b0; font-style:italic; }
    #topbar .open-btn {
      margin-left:auto; padding:.38rem 1rem;
      background:var(--sidebar-active); color:#c0d8f8; border:none;
      border-radius:6px; font-size:.82rem; cursor:pointer;
      text-decoration:none; display:flex; align-items:center; gap:.4rem;
      transition:background .2s; white-space:nowrap; letter-spacing:.05em;
    }
    #topbar .open-btn:hover { background:#1a3060; }

    #viewer { flex:1; border:none; display:block; background:var(--bg); }

    /* ===== Welcome / Sky Map Area ===== */
    #welcome {
      flex:1; display:flex; flex-direction:column;
      align-items:center; justify-content:flex-start;
      overflow-y:auto; padding:1.2rem 1.5rem 1.5rem;
      background:var(--bg);
    }
    #welcome::-webkit-scrollbar { width:4px; }
    #welcome::-webkit-scrollbar-thumb { background:#1a3060; border-radius:3px; }

    .welcome-top {
      text-align:center; margin-bottom:1.2rem; flex-shrink:0;
    }
    .welcome-top h2 {
      font-size:1.25rem; color:#90b8e8;
      font-weight:normal; letter-spacing:.12em;
    }
    .welcome-top p {
      font-size:.82rem; color:#4070a0;
      line-height:1.8; margin-top:.35rem;
    }

    .sky-maps-container {
      display:flex; gap:1.5rem; flex-wrap:wrap;
      justify-content:center; width:100%;
    }

    .sky-map-wrap {
      display:flex; flex-direction:column; align-items:center;
      flex:1; min-width:270px; max-width:340px;
    }
    .sky-map-wrap h3 {
      font-size:1.02rem; color:#c0a050;
      letter-spacing:.15em; margin-bottom:.6rem;
      display:flex; align-items:center; gap:.45rem;
    }
    .sky-map-wrap h3 .season-icon { font-size:1.1rem; }
    .sky-map-wrap .map-desc {
      font-size:.8rem; color:#4060a0;
      text-align:center; margin-top:.6rem; line-height:1.7;
    }

    .sky-map-svg {
      width:100%; height:auto; border-radius:50%;
      box-shadow:0 0 30px rgba(50,100,255,0.12), 0 0 60px rgba(20,50,150,0.08);
      cursor:default;
    }

    /* Constellation clickable groups */
    .const-group {
      cursor:pointer;
    }
    .const-group .const-lines {
      transition:stroke .2s, stroke-opacity .2s;
    }
    .const-group .const-label {
      transition:fill .2s;
    }
    .const-group:hover .const-lines,
    .const-group:focus-visible .const-lines {
      stroke:#f0c060 !important; stroke-opacity:1 !important;
    }
    .const-group:hover .const-label,
    .const-group:focus-visible .const-label {
      fill:#f0c060 !important;
    }
    .const-group .const-stars circle {
      transition:fill .2s, r .15s;
    }
    .const-group:hover .const-stars circle,
    .const-group:focus-visible .const-stars circle {
      fill:#ffe090 !important;
    }

    /* Non-linked faint constellations */
    .const-faint { cursor:default; pointer-events:none; }

    .welcome-hint {
      margin-top:1rem; font-size:.78rem; color:#3a6090;
      display:flex; align-items:center; gap:.5rem; flex-shrink:0;
    }
    .hint-desktop { display:flex; }
    .hint-mobile  { display:none; }

    @media (max-width:640px) {
      html, body { overflow:hidden; height:100%; }
      #sidebar {
        position:fixed; left:0; top:0;
        width:78vw; max-width:300px; min-width:unset;
        height:100vh; height:100dvh;
        transform:translateX(-100%);
      }
      #sidebar.open { transform:translateX(0); }
      #sidebar-close { display:block; }
      #main { width:100%; height:100vh; height:100dvh; padding-top:var(--header-h); }
      #topbar { position:fixed; top:0; left:0; right:0; z-index:10; padding:0 .75rem; gap:.6rem; }
      #menu-toggle { display:block; }
      #topbar .breadcrumb { gap:.3rem; font-size:.82rem; }
      #topbar .breadcrumb .home-text { display:none; }
      #topbar .breadcrumb .sep { display:none; }
      #topbar .current-latin { display:none; }
      #topbar .open-btn { padding:.38rem .65rem; font-size:.75rem; }
      .star-item { padding:.75rem 1rem .75rem 1.65rem; }
      .star-item .name { font-size:.95rem; }
      .hint-desktop { display:none; }
      .hint-mobile  { display:flex; }
      #welcome { padding:.8rem; }
      .sky-maps-container { gap:1rem; }
      .sky-map-wrap { min-width:220px; }
    }