html, body {
      margin: 0;
      height: 100%;
      overflow: hidden;
      background: radial-gradient(circle at top, #0d203e 0%, #071121 45%, #02060d 100%);
      font-family: Arial, Helvetica, sans-serif;
      color: #fff;
    }

    #app {
      position: fixed;
      inset: 0;
    }

    #infoBox {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      min-width: 420px;
      max-width: 760px;
      text-align: center;
      background: rgba(0, 50, 60, 0.92);
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 14px;
      padding: 10px 14px;
      backdrop-filter: blur(4px);
      box-shadow: 0 0 20px rgba(0,0,0,0.35);
    }

    #infoBox h1 {
      margin: 0 0 6px 0;
      font-size: 22px;
      color: #ffe77a;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    #infoBox .sub {
      font-size: 14px;
      line-height: 1.35;
      color: #e9eefc;
    }

    #leftPanel, #rightPanel {
      position: absolute;
      top: 95px;
      z-index: 20;
      max-height: calc(100vh - 110px);
      overflow-y: auto;
      background: rgba(0, 50, 60, 0.92);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 0 20px rgba(0,0,0,0.35);
      backdrop-filter: blur(6px);
    }

#leftPanel{
  left:14px;
  width:330px;
}

    #rightPanel {
      right: 14px;
      width: 310px;
    }

    .panelTitle {
      font-size: 17px;
      color: #7fd7ff;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }

    label {
      display: block;
      font-size: 13px;
      color: #cfe9ff;
      margin-bottom: 4px;
    }

    select, button {
      width: 100%;
      box-sizing: border-box;
      height: 34px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.18);
      background: #10203a;
      color: #fff;
      padding: 4px 8px;
      font-size: 14px;
    }

    button {
      cursor: pointer;
      font-weight: 700;
    }

    button:hover {
      filter: brightness(1.08);
    }

    .btnRow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 6px;
    }

    .btnPrimary { background: #17457d; }
    .btnGreen { background: #1d6e4f; }
    .btnOrange { background: #86551b; }
    .btnRed { background: #8a2e2e; }

    .readout {
      margin-top: 10px;
      font-size: 13px;
      line-height: 1.45;
      color: #eef6ff;
      background: rgba(255,255,255,0.05);
      border-radius: 10px;
      padding: 10px;
    }

    .smallNote {
      margin-top: 10px;
      color: #cad9f8;
      font-size: 12px;
      line-height: 1.45;
    }

    .legend {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 10px;
      font-size: 13px;
    }

    .swatch {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
      box-shadow: 0 0 10px rgba(255,255,255,0.2);
    }

    .eqBlock {
      margin-bottom: 14px;
      padding: 10px 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 12px;
    }

    .eqTitle {
      color: #ffe77a;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 8px;
    }

.eqLine {
  color: #ffffff;
  text-align: center;
  margin-bottom: 8px;
  word-break: break-word;
  line-height: 1.35;
}

.bigEq {
  font-size: 24px;
  font-weight: 700;
  color: #eaf6ff;
}

.smallEq {
  font-size: 18px;
  color: #e7f2ff;
  padding: 4px 2px 0 2px;
}

.solutionEq {
  font-size: 22px;
  font-weight: 700;
  color: #f4fbff;
}

.orbitalChartTitle{
  margin-top:10px;
  margin-bottom:8px;
  color:#7fd7ff;
  font-size:14px;
  font-weight:700;
  text-align:center;
}

.orbitalImageWrap{
  width:100%;
  max-width:280px;
  margin:0 auto;
  background:rgba(255,255,255,0.97);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 0 18px rgba(0,0,0,0.28);
  padding:6px;
  box-sizing:border-box;
}

#orbitalChartImage{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}

    .fixedPointNote {
      margin-top: 10px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.05);
      border-radius: 10px;
      color: #eef6ff;
      font-size: 13px;
    }

    @media (max-width: 1200px) {
      #leftPanel, #rightPanel {
        top: 105px;
        max-height: calc(100vh - 120px);
      }
      #leftPanel { width: 300px; }
      #rightPanel { width: 290px; }
    }