@charset "UTF-8";
    html,
    body {
      height: 100%;
      margin: 0;
    }

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    header.top-bar {
      flex-shrink: 0;
    }

    main {
      flex-grow: 1;
      padding-top: 105.6px;
      /* 96 * 1.1 */
    }

    .hero {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
    }

    .hero-content {
      width: 100%;
      max-width: 100%;
    }

    .hero img {
      display: block;
      width: 100%;
      height: auto;
    }

    .footer-bottom {
      flex-shrink: 0;
    }

    .planets {
      display: flex;
      flex-wrap: wrap;
      gap: 15.84px;
      /* 14.4 * 1.1 */
      justify-content: flex-start;
      margin-bottom: 15.84px;
      /* 14.4 * 1.1 */
    }

    .planet {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to bottom, #2a2a3c, #1f1f2b);
      padding: 9.24px 10.56px;
      /* 8.4 * 1.1 | 9.6 * 1.1 */
      border-radius: 9.24px;
      /* 8.4 * 1.1 */
      min-width: 70.2px;
      /* 72 * 1.1 */
      min-height: 52.8px;
      /* 48 * 1.1 */
      box-shadow: inset 0 0 0 1.1px rgba(255, 255, 255, 0.08);
      transition: transform 0.2s ease;
    }

    .planet:hover {
      transform: scale(1.05);
    }

    .planet-symbol {
      font-size: 22.44px;
      /* 20.4 * 1.1 */
      margin-bottom: 2.64px;
      /* 2.4 * 1.1 */
    }

    .planet-label {
      font-size: 11.88px;
      /* 10.8 * 1.1 */
      font-weight: 500;
      text-align: center;
      color: #dddddd;
      line-height: 1.3;
    }

    .planet[data-planet="sun"] .planet-symbol {
      color: #ffd700;
    }

    .planet[data-planet="moon"] .planet-symbol {
      color: #cccccc;
    }

    .planet[data-planet="mercury"] .planet-symbol {
      color: #a0c2c9;
    }

    .planet[data-planet="venus"] .planet-symbol {
      color: #e091b6;
    }

    .planet[data-planet="mars"] .planet-symbol {
      color: #ff5e5e;
    }

    .planet[data-planet="jupiter"] .planet-symbol {
      color: #ffcc80;
    }

    .planet[data-planet="saturn"] .planet-symbol {
      color: #d4b06f;
    }

    .planet[data-planet="uranus"] .planet-symbol {
      color: #78d9ff;
    }

    .planet[data-planet="neptune"] .planet-symbol {
      color: #7fa8ff;
    }

    .planet[data-planet="pluto"] .planet-symbol {
      color: #a594f9;
    }

    .aspects {
      display: flex;
      flex-wrap: wrap;
      gap: 21.12px;
      /* 19.2 * 1.1 */
      justify-content: flex-start;
      margin: 26.4px 0;
      /* 24 * 1.1 */
    }

    .aspect-pill,
    .ingress-pill {
      display: inline-flex;
      align-items: center;
      gap: 3.96px;
      /* 3.6 * 1.1 */
      background: linear-gradient(to bottom, #2a2a3c, #1f1f2b);
      border-radius: 9.24px;
      /* 8.4 * 1.1 */
      padding: 5.28px 7.92px;
      /* 4.8 * 1.1 | 7.2 * 1.1 */
      font-size: 11.88px;
      /* 10.8 * 1.1 */
      font-weight: 500;
      color: #e2e2e2;
      box-shadow: inset 0 0 0 1.1px rgba(255, 255, 255, 0.05);
      justify-content: flex-start;
      flex-grow: 0;
    }

    .aspect-icon {
      font-size: 18.48px;
      /* 16.8 * 1.1 */
      width: 22.44px;
      /* 20.4 * 1.1 */
      text-align: center;
    }

    .aspect-icon.conjunct {
      color: #f2c744;
    }

    .aspect-icon.opposition {
      color: #ff7b7b;
    }

    .aspect-icon.trine {
      color: #7bd97b;
    }

    .aspect-icon.square {
      color: #e25b5b;
    }

    .aspect-icon.sextile {
      color: #72baff;
    }

    .ingress {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 9.24px;
      /* 8.4 * 1.1 */
    }

    .ingress-icon {
      font-size: 18.48px;
      /* 16.8 * 1.1 */
      width: 15.84px;
      /* 14.4 * 1.1 */
      color: #9fc9ff;
      text-align: center;
    }

    .ingress-icon.sun {
      color: #ffd700;
    }

    .ingress-icon.moon {
      color: #cccccc;
    }

    .ingress-icon.mercury {
      color: #a0c2c9;
    }

    .ingress-icon.venus {
      color: #e091b6;
    }

    .ingress-icon.mars {
      color: #ff5e5e;
    }

    .ingress-icon.jupiter {
      color: #ffcc80;
    }

    .ingress-icon.saturn {
      color: #d4b06f;
    }

    .ingress-icon.uranus {
      color: #78d9ff;
    }

    .ingress-icon.neptune {
      color: #7fa8ff;
    }

    .ingress-icon.pluto {
      color: #a594f9;
    }

    .footer {
      position: absolute;
      bottom: 17.16px;
      /* 15.6 * 1.1 */
      left: 26.4px;
      /* 24 * 1.1 */
      right: 26.4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13.2px;
      /* 12 * 1.1 */
      color: #bbbbbb;
    }

    .moon-phase {
      font-size: 17.16px;
      /* 15.6 * 1.1 */
      color: #cccccc;
    }

    .date {
      font-size: 21.12px;
      /* 19.2 * 1.1 */
      font-weight: 400;
      color: #e0e0e0;
    }

    .date-row {
      display: flex;
      flex-wrap: wrap;
      gap: 13.2px;
      /* 12 * 1.1 */
      justify-content: flex-start;
      margin-top: 35.2px;
      /* 32 * 1.1 */
      margin-bottom: 17.6px;
      /* 16 * 1.1 */
    }

    .date-pill {
      display: inline-flex;
      align-items: center;
      background: linear-gradient(to bottom, #2a2a3c, #1f1f2b);
      border-radius: 7.7px;
      /* 7 * 1.1 */
      padding: 6.6px 11px;
      /* 6 * 1.1 | 10 * 1.1 */
      font-size: 17.2px;
      /* 12 * 1.1 */
      font-weight: 500;
      color: #e2e2e2;
      box-shadow: inset 0 0 0 1.1px rgba(255, 255, 255, 0.08);
      white-space: nowrap;
    }

    .date-pill .moon-phase {
      font-weight: 400;
      color: #cccccc;
      margin-left: 11px;
      /* 10 * 1.1 */
      font-size: 12.1px;
      /* 11 * 1.1 */
    }

    .aspect-icon.conjunct {
      color: #f2c744;
    }

    .aspect-icon.opposition {
      color: #ff7b7b;
    }

    .aspect-icon.trine {
      color: #7bd97b;
    }

    .aspect-icon.square {
      color: #e25b5b;
    }

    .aspect-icon.sextile {
      color: #72baff;
    }

    .planet-symbol.sun {
      color: #ffd700;
    }

    .planet-symbol.moon {
      color: #cccccc;
    }

    .planet-symbol.mercury {
      color: #a0c2c9;
    }

    .planet-symbol.venus {
      color: #e091b6;
    }

    .planet-symbol.mars {
      color: #ff5e5e;
    }

    .planet-symbol.jupiter {
      color: #ffcc80;
    }

    .planet-symbol.saturn {
      color: #d4b06f;
    }

    .planet-symbol.uranus {
      color: #78d9ff;
    }

    .planet-symbol.neptune {
      color: #7fa8ff;
    }

    .planet-symbol.pluto {
      color: #a594f9;
    }


    .top-bar-nav {
      display: flex;
      gap: 12px;
      margin-left: auto;
      align-items: center;
    }

    .nav-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to bottom, #2a2a3c, #1f1f2b);
      padding: 8px 10px;
      border-radius: 8px;
      min-width: 72px;
      min-height: 58px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      font-size: 12px;
      font-weight: 500;
      color: #dddddd;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-button:hover {
      transform: scale(1.05);
    }

    .nav-button.disabled {
      opacity: 0.3;
      pointer-events: none;
      cursor: default;
    }

    .nav-icon {
      font-size: 20px;
      margin-bottom: 2px;
    }

  .nav-button img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
  .nav-button span {
    margin-left: 8px;
    vertical-align: middle;
  }
.digest-pill {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to bottom, #2a2a3c, #1f1f2b);
  border-radius: 7.7px; /* 7 * 1.1 */
  padding: 6.6px 11px; /* 6 * 1.1 | 10 * 1.1 */
  font-size: 17.2px; /* 12 * 1.1 */
  font-weight: 400;
  color: #e2e2e2;
  box-shadow: inset 0 0 0 1.1px rgba(255, 255, 255, 0.08);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease;
}

.digest-pill:hover {
  transform: scale(1.05);
  background: linear-gradient(to bottom, #3a3a5c, #2f2f3b);
}

.digest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}