body { display: grid; place-items: center; min-height: 100svh; overflow: auto; padding: 0; }
.constellation { width: min(1200px, 100%, calc((100svh - 200px) * 1.5)); height: auto; aspect-ratio: 3 / 2; }
.status { bottom: 5rem; }
.constellation svg { position: absolute; inset: 0; pointer-events: none; }
.star-label, .star-subtitle { display: none; }
.constellation-links { position: absolute; inset: 0; }
.star-link, .prism-link {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: .55rem;
  min-width: 44px;
  min-height: 64px;
  padding: 0 .75rem .6rem;
  color: #e8ecff;
  text-decoration: none;
  text-align: center;
  font-size: .85rem;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 5px;
}
.star-link::before { content: ''; width: 36px; height: 36px; flex: 0 0 36px; }
.star-link small { color: var(--muted); font-size: .68rem; letter-spacing: .08em; }
.star-link:hover, .prism-link:hover { color: var(--gold); }
.star-link.witnessed { color: var(--gold); }
.prism-link { left: 50%; top: 48.75%; transform: translate(-50%, -50%); min-height: 120px; justify-content: center; }
.prism-link span { padding: .3rem .6rem; background: rgba(3,4,10,.84); }
.recognition { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 2rem; }
.recognition:not([open]) { display: none; }
.recognition[open] { opacity: 1; pointer-events: auto; align-content: center; gap: 2rem; }
.recognition::backdrop { background: #000; }
.recognition p { text-align: center; line-height: 1.8; }
.recognition a { color: var(--gold); min-height: 44px; display: inline-block; padding: .75rem; }
.recognition-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
@media (max-width: 900px), (max-height: 600px) {
  body { display: block; padding: 0 1rem 6rem; }
  .brand { position: relative; top: auto; left: auto; padding: 1.5rem 0 1rem; text-align: center; }
  .brand h1 { font-size: clamp(1.3rem, 5vw, 2rem); }
  .constellation { width: min(660px, 100%); aspect-ratio: auto; margin: 0 auto; }
  .constellation svg { opacity: .4; }
  .constellation svg .star, .constellation svg .thread, .constellation svg .orbit { display: none; }
  .constellation-links { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: center; }
  .star-link, .prism-link { position: static; transform: none; width: 100%; min-height: 80px; padding: .75rem .25rem; font-size: .8rem; letter-spacing: .08em; }
  .star-link::before { width: 7px; height: 7px; flex-basis: 7px; border-radius: 50%; background: var(--star-color, #e8c978); box-shadow: 0 0 14px var(--star-color, #e8c978); }
  .star-link small { font-size: .65rem; }
  [data-star="archive"] { grid-area: 1 / 1 / 2 / 3; }
  [data-star="journal"] { grid-area: 2 / 1; }
  [data-star="characters"] { grid-area: 2 / 2; }
  .prism-link { grid-area: 3 / 1 / 4 / 3; min-height: 130px; }
  [data-star="world"] { grid-area: 4 / 1; }
  [data-star="compact"] { grid-area: 4 / 2; }
  [data-star="codex"] { grid-area: 5 / 1 / 6 / 3; }
  .witness { position: relative; left: auto; bottom: auto; transform: none; margin: 2rem auto 0; text-align: center; }
  .status, .hint { display: none; }
}