:root {
    --phosphor: #00ff5f;
    --soft-phosphor: #00a040;
    --dim: #007a30;
    --pink: #ff5fff;
    --soft-pink: #ffafff;
    --pink-glow: rgba(255, 95, 255, 0.35);
    --sun: #ffd900;
    --sun-glow: rgba(255, 217, 0, 0.45);
    --earth: #4ab2ff;
    --earth-soft: #1f7fd1;
    --earth-glow: rgba(74, 178, 255, 0.5);
    --bg: #050a05;
    --panel: #0a1408;
    --panel-edge: #163018;
    --panel-edge-pink: #4a0040;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background:
      radial-gradient(ellipse at top, #0c1c0c 0%, #050a05 60%),
      var(--bg);
    color: var(--phosphor);
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    text-shadow: 0 0 4px currentColor;
    min-height: 100vh;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      0deg,
      rgba(0, 255, 95, 0.04) 0px,
      rgba(0, 255, 95, 0.04) 1px,
      transparent 1px,
      transparent 3px
    );
    z-index: 1000;
    mix-blend-mode: screen;
  }

  main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    position: relative;
    z-index: 1;
  }

  header.brand-header {
    border-bottom: 1px solid var(--panel-edge);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
  }

  h1.brand {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    margin: 0;
    color: var(--phosphor);
    text-shadow: 0 0 12px var(--phosphor), 0 0 24px var(--phosphor);
  }

  h1.brand .sub {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--soft-phosphor);
    letter-spacing: 0.18em;
    margin-top: 0.3rem;
    text-shadow: 0 0 4px currentColor;
  }

  .meta {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }

  .pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--pink);
    color: var(--bg);
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: none;
    box-shadow: 0 0 14px var(--pink-glow);
  }

  .pill.dim-pill {
    background: transparent;
    color: var(--soft-phosphor);
    border: 1px solid var(--panel-edge);
    box-shadow: none;
    text-shadow: 0 0 4px currentColor;
  }

  h2 {
    font-size: 1.05rem;
    color: var(--phosphor);
    letter-spacing: 0.1em;
    margin: 2rem 0 0.4rem;
    text-shadow: 0 0 6px var(--phosphor);
  }

  h2::before { content: '◢ '; color: var(--pink); }

  .dim, p.dim, .desc { color: var(--soft-phosphor); font-size: 0.85rem; }
  .pink { color: var(--pink); }
  a { color: var(--pink); text-decoration: none; border-bottom: 1px dashed var(--pink); }
  a:hover { color: var(--soft-pink); border-bottom-style: solid; }

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
  }

  .card {
    border: 1px solid var(--panel-edge);
    background: var(--panel);
    padding: 1rem 1.25rem;
    position: relative;
    overflow: hidden;
  }

  .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
    background: var(--phosphor);
    box-shadow: 0 0 8px var(--phosphor);
  }

  .card.haz { border-color: var(--panel-edge-pink); }
  .card.haz::before { background: var(--pink); box-shadow: 0 0 12px var(--pink); }

  .card .label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--soft-phosphor);
    margin-bottom: 0.25rem;
  }
  .card .value {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 10px currentColor;
  }
  .card.haz .value { color: var(--pink); }

  section.chart-section {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--panel-edge);
    background: linear-gradient(180deg, var(--panel) 0%, transparent 100%);
  }

  section.chart-section svg { width: 100%; height: auto; display: block; }

  .axis-label, .axis-tick { fill: var(--soft-phosphor); font-size: 11px; font-family: inherit; }
  .axis-line { stroke: var(--soft-phosphor); stroke-width: 1; }
  .grid-line { stroke: var(--panel-edge); stroke-width: 1; stroke-dasharray: 2,3; }
  .point { fill: var(--phosphor); }
  .point.haz { fill: var(--pink); }
  .bar { fill: var(--phosphor); }
  .bar.haz { fill: var(--pink); }
  .orbit-sun { fill: var(--sun); filter: drop-shadow(0 0 8px var(--sun-glow)); }
  .orbit-earth-orbit { fill: none; stroke: var(--earth-soft); stroke-width: 1.2; stroke-dasharray: 4,4; opacity: 0.85; }
  .orbit-earth-body { fill: var(--earth); filter: drop-shadow(0 0 6px var(--earth-glow)); }
  .orbit-asteroid { fill: none; stroke: var(--pink); stroke-width: 1.5; }
  .orbit-marker { fill: var(--pink); }
  .orbit-grid { fill: none; stroke: var(--panel-edge); stroke-width: 1; stroke-dasharray: 2,3; opacity: 0.7; }
  .orbit-axis { stroke: var(--panel-edge); stroke-width: 1; }
  .orbit-focus { stroke: var(--soft-phosphor); stroke-width: 1; stroke-dasharray: 3,3; opacity: 0.7; }
  .orbit-peri { fill: var(--pink); }
  .orbit-aphe { fill: #c8a0ff; }
  .orbit-label { fill: var(--soft-phosphor); font-size: 11px; font-family: inherit; }
  .orbit-au-label { fill: var(--soft-phosphor); font-size: 10px; font-family: inherit; opacity: 0.7; }
  .orbit-tick { fill: var(--soft-phosphor); }
  .orbit-tick-label { fill: var(--soft-phosphor); font-size: 10px; font-family: inherit; opacity: 0.85; letter-spacing: 0.05em; }

  /* Snapshot: hidden by default, revealed via URL :target when user clicks an approach date */
  .orbit-snapshot {
    opacity: 0;
    transition: opacity 0.35s ease-out;
    pointer-events: none;
  }
  .orbit-snapshot:target {
    opacity: 1;
  }
  .snap-halo {
    fill: rgba(255, 255, 255, 0.08);
    stroke: #fff;
    stroke-width: 1;
    opacity: 0.6;
  }
  .snap-earth {
    fill: var(--earth);
    stroke: #fff;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 8px var(--earth-glow));
  }
  .snap-asteroid {
    fill: var(--pink);
    stroke: #fff;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 8px var(--pink-glow));
  }
  .snap-connector {
    stroke: #fff;
    stroke-width: 1;
    stroke-dasharray: 2,2;
    opacity: 0.7;
  }
  .snap-ray {
    stroke: var(--sun);
    stroke-width: 1;
    stroke-dasharray: 4,3;
    opacity: 0.5;
  }
  .snap-label {
    fill: #fff;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    paint-order: stroke;
    stroke: rgba(5, 10, 5, 0.9);
    stroke-width: 3;
  }

  .approach-link {
    color: var(--pink);
    border-bottom-style: dotted;
    font-variant-numeric: tabular-nums;
  }
  .approach-link:hover, .approach-link:focus {
    color: var(--soft-pink);
    background: rgba(255, 95, 255, 0.08);
  }
  .orbit-now {
    fill: var(--pink);
    filter: drop-shadow(0 0 6px var(--pink));
  }

  .orbit-caption {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    color: var(--soft-phosphor);
    text-align: center;
    letter-spacing: 0.06em;
  }

  .orbit-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.4rem 1rem;
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--panel-edge);
    background: rgba(10, 20, 8, 0.6);
    font-size: 0.78rem;
  }

  .legend-entry {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--soft-phosphor);
    text-shadow: none;
  }

  .legend-swatch {
    display: inline-block;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 4px currentColor;
  }

  .legend-sun {
    background: var(--sun);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--sun-glow);
  }
  .legend-earth-orbit {
    background: transparent;
    border: 1px dashed var(--earth-soft);
    box-shadow: none;
  }
  .legend-earth-body {
    background: var(--earth);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--earth-glow);
    animation: pulse 1.6s ease-in-out infinite;
  }
  .legend-asteroid {
    background: transparent;
    border: 1.5px solid var(--pink);
    box-shadow: none;
  }
  .legend-peri { background: var(--pink); border-radius: 50%; }
  .legend-aphe { background: #c8a0ff; border-radius: 50%; }
  .legend-tick {
    background: var(--soft-phosphor);
    border-radius: 50%;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 3px var(--soft-phosphor);
  }
  .legend-now {
    background: var(--pink);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--pink);
    animation: pulse 1.4s ease-in-out infinite;
  }
  .legend-grid {
    background: transparent;
    border: 1px dashed var(--panel-edge);
    box-shadow: none;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.85rem;
  }
  th, td { padding: 0.55rem 0.75rem; text-align: left; }
  th {
    color: var(--soft-phosphor);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--soft-phosphor);
  }
  tbody tr { border-bottom: 1px solid var(--panel-edge); }
  tbody tr:hover { background: rgba(0, 255, 95, 0.05); }
  tbody tr.haz-row td.glyph { color: var(--pink); }
  tbody tr.haz-row td.name { color: var(--soft-pink); text-shadow: 0 0 6px var(--pink); }
  td.glyph { font-size: 1rem; width: 1.5rem; }
  td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--soft-phosphor); }
  td.name a { font-weight: 500; }

  footer.report-footer {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--panel-edge);
    text-align: center;
    color: var(--soft-phosphor);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }

  footer.report-footer .robco { color: var(--phosphor); font-weight: 700; letter-spacing: 0.15em; }

  @media (prefers-reduced-motion: reduce) {
    body::before { display: none; }
    .legend-now, .legend-earth-body { animation: none; }
  }

  @media (max-width: 760px) {
    main { padding: 1rem 0.85rem 2.5rem; }
    h1.brand { font-size: 1.55rem; letter-spacing: 0.08em; }
    h1.brand .sub { font-size: 0.62rem; letter-spacing: 0.12em; }
    h2 { font-size: 0.92rem; margin-top: 1.25rem; }
    .meta { gap: 0.4rem; }
    .pill { padding: 0.18rem 0.55rem; font-size: 0.72rem; }
    .cards { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
    .card { padding: 0.7rem 0.85rem; }
    .card .label { font-size: 0.62rem; letter-spacing: 0.14em; }
    .card .value { font-size: 1.5rem; }
    section.chart-section { padding: 0.85rem 0.7rem; }
    table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
      font-size: 0.78rem;
      -webkit-overflow-scrolling: touch;
    }
    th, td { padding: 0.4rem 0.55rem; }
    .orbit-legend {
      grid-template-columns: 1fr;
      padding: 0.65rem 0.8rem;
      font-size: 0.72rem;
    }
    .orbit-caption { font-size: 0.7rem; }
  }

  @media (max-width: 480px) {
    .cards { grid-template-columns: 1fr; }
    h1.brand { font-size: 1.25rem; }
    body::before { display: none; }
    section.chart-section { padding: 0.7rem 0.5rem; }
  }