:root {
    /* UI Theme */
    --bg-color: #2E3440;
    --panel-color: #3B4252;
    --text-color: #D8DEE9;
    --accent-color: #88C0D0;
    --link-color: #81A1C1;
    --button-color: #5E81AC;
    --button-hover: #81A1C1;
  
    --visible-color: #A3BE8C;
    --hidden-color: #BF616A;
    --hover-color: #88C0D0;
    --active-color: #8FBCBB;
    --key-color: #EBCB8B;
  
    /* Star Class Colors */
    --star-O: #88C0D0;
    --star-B: #8FBCBB;
    --star-A: #ECEFF4;
    --star-F: #E5E9F0;
    --star-G: #EBCB8B;
    --star-K: #D08770;
    --star-M: #BF616A;
  }

      /* NORD */
      .theme-nord {
        --bg-color: #2E3440;
        --text-color: #D8DEE9;
        --visible-color: #A3BE8C;
        --hidden-color: #BF616A;
        --hover-color: #88C0D0;
        --active-color: #8FBCBB;
        --key-color: #EBCB8B;
      
        --star-O: #88C0D0;
        --star-B: #8FBCBB;
        --star-A: #ECEFF4;
        --star-F: #E5E9F0;
        --star-G: #EBCB8B;
        --star-K: #D08770;
        --star-M: #BF616A;
      }
      
      /* ONE DARK */
      .theme-onedark {
        --bg-color: #282c34;
        --text-color: #abb2bf;
        --visible-color: #98c379;
        --hidden-color: #e06c75;
        --hover-color: #61afef;
        --active-color: #56b6c2;
        --key-color: #e5c07b;
      
        --star-O: #61afef;
        --star-B: #56b6c2;
        --star-A: #dcdfe4;
        --star-F: #e5c07b;
        --star-G: #e0af68;
        --star-K: #d19a66;
        --star-M: #e06c75;
      }
      
      /* DRACULA */
      .theme-dracula {
        --bg-color: #282a36;
        --text-color: #f8f8f2;
        --visible-color: #50fa7b;
        --hidden-color: #ff5555;
        --hover-color: #8be9fd;
        --active-color: #6272a4;
        --key-color: #f1fa8c;
      
        --star-O: #8be9fd;
        --star-B: #50fa7b;
        --star-A: #f8f8f2;
        --star-F: #f1fa8c;
        --star-G: #ffb86c;
        --star-K: #ff79c6;
        --star-M: #ff5555;
      }
      
      /* SOLARIZED DARK */
      .theme-solarized-dark {
        --bg-color: #002b36;
        --text-color: #839496;
        --visible-color: #859900;
        --hidden-color: #dc322f;
        --hover-color: #268bd2;
        --active-color: #2aa198;
        --key-color: #b58900;
      
        --star-O: #268bd2;
        --star-B: #2aa198;
        --star-A: #eee8d5;
        --star-F: #b58900;
        --star-G: #cb4b16;
        --star-K: #dc322f;
        --star-M: #d33682;
      }
      
      /* SOLARIZED LIGHT */
      .theme-solarized-light {
        --bg-color: #fdf6e3;
        --text-color: #657b83;
        --visible-color: #859900;
        --hidden-color: #dc322f;
        --hover-color: #268bd2;
        --active-color: #2aa198;
        --key-color: #b58900;
      
        --star-O: #268bd2;
        --star-B: #2aa198;
        --star-A: #002b36;
        --star-F: #b58900;
        --star-G: #cb4b16;
        --star-K: #dc322f;
        --star-M: #d33682;
      }
      
      /* GRUVBOX DARK */
      .theme-gruvbox-dark {
        --bg-color: #282828;
        --text-color: #ebdbb2;
        --visible-color: #b8bb26;
        --hidden-color: #fb4934;
        --hover-color: #83a598;
        --active-color: #8ec07c;
        --key-color: #fabd2f;
      
        --star-O: #83a598;
        --star-B: #8ec07c;
        --star-A: #ebdbb2;
        --star-F: #fabd2f;
        --star-G: #fe8019;
        --star-K: #d79921;
        --star-M: #fb4934;
      }
      
      /* MONOKAI */
      .theme-monokai {
        --bg-color: #272822;
        --text-color: #f8f8f2;
        --visible-color: #a6e22e;
        --hidden-color: #f92672;
        --hover-color: #66d9ef;
        --active-color: #fd971f;
        --key-color: #e6db74;
      
        --star-O: #66d9ef;
        --star-B: #a1efe4;
        --star-A: #f8f8f2;
        --star-F: #e6db74;
        --star-G: #fd971f;
        --star-K: #f92672;
        --star-M: #f44747;
      }
    

  body {
    margin: 0;
    font-family: monospace;
    background: var(--bg-color);
    color: var(--text-color);
    margin-inline: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  h1 {
    color: var(--accent-color);
  }
  
  .section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--panel-color);
    border-radius: 8px;
  }
  
  a {
    color: var(--link-color);
    word-break: break-word;
  }
  
  button {
    margin-top: 1rem;
    padding: 8px 16px;
    background: var(--button-color);
    border: none;
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
  }
  
  button:hover {
    background: var(--button-hover);
  }
  
  ol {
    padding-left: 1.2rem;
  }
  
  /* === Sky Viewer Styles === */
  

  #wrapper {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.6s ease, transform 0.6s ease;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
   }
  
  #wrapper.loaded {
    opacity: 1;
    transform: scale(1);
  }
  
  canvas {
    display: block;
    width: 100%;
  }
  
  #wrapper.info-visible canvas {
    flex: 0 0 70vh;
    max-height: 70vh;
  }
  
  #wrapper.info-hidden canvas {
    flex: 1;
    max-height: none;
  }
  
  #info {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background: rgba(46, 52, 64, 0.95);
    padding: 12px;
    font-size: 14px;
    font-family: monospace;
    border-top: 1px solid #4C566A;
    transition: height 0.3s ease, opacity 0.2s ease;
  }
  
  .info-block {
    margin: 0 12px 12px;
    text-align: center;
    min-width: 150px;
  }
  
  .tooltip {
    position: absolute;
    background: rgba(46, 52, 64, 0.9);
    border: 1px solid #4C566A;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 1000;
    display: none;
    font-family: monospace;
  }
  
  .moon-phase {
    width: 32px;
    height: 32px;
    margin: 5px auto;
    position: relative;
  }
  
  #command-bar {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: rgba(46, 52, 64, 1);
    border-top: 1px solid #4C566A;
    padding: 10px;
    font-family: monospace;
    font-size: 14px;
  }
  
  .cmd-text {
    color: var(--text-color);
    margin: 0 15px;
    cursor: pointer;
    user-select: none;
  }
  
  .cmd-text:hover {
    color: var(--hover-color);
  }
  
  .cmd-text.active {
    color: var(--active-color);
  }
  
  .cmd-key {
    color: var(--key-color);
    margin-right: 5px;
  }
  
  .currently-visible {
    color: var(--visible-color);
    font-weight: bold;
  }
  
  .currently-hidden {
    color: var(--hidden-color);
  }
  
  .ascii-box {
    border: 1px solid #4C566A;
    padding: 5px 10px;
    display: inline-block;
  }
  
  /* Star spectral classes */
  .star.O { color: var(--star-O); }
  .star.B { color: var(--star-B); }
  .star.A { color: var(--star-A); }
  .star.F { color: var(--star-F); }
  .star.G { color: var(--star-G); }
  .star.K { color: var(--star-K); }
  .star.M { color: var(--star-M); }