.starfield circle.tell {
      animation: twk 9s ease-in-out infinite !important;
      r: 3.6px;
    }
    
    .scene.sky-live .starfield { pointer-events: auto; }
    .scene.sky-live .starfield circle {
      cursor: pointer;
      
      pointer-events: all; stroke: transparent; stroke-width: 16;
    }
    
    
    .starfield.narrowed circle { opacity: .18; transition: opacity .4s ease; }
    .starfield.narrowed circle.lit { opacity: 1; }
    
    .sky-ping { fill: none; stroke: var(--sand-light, #f3e6cd); stroke-width: 1.4;
                animation: ping 1.6s ease-out infinite; }
    @keyframes ping {
      0%   { r: 4px;  opacity: .85; }
      100% { r: 22px; opacity: 0; }
    }
    .skylines {
      position: fixed; inset: 0; width: 100%; height: 100%;
      z-index: 4; pointer-events: none; opacity: 0;
      transition: opacity .45s ease;
    }
    .skylines.on { opacity: .78; }
    .skylines line {
      stroke: var(--sand-light, #f3e6cd); stroke-width: 1.1;
      stroke-linecap: round; vector-effect: non-scaling-stroke;
      stroke-dasharray: 3 4;
    }
    .skylines text {
      fill: var(--sand-light, #f3e6cd); font-size: 13px;
      font-family: var(--font-body); opacity: .95;
      
      paint-order: stroke; stroke: rgba(4, 20, 25, .8); stroke-width: 3px;
      stroke-linejoin: round;
    }
    .skytag {
      position: fixed; z-index: 44; transform: translate(-50%, -140%);
      background: rgba(8, 30, 38, .92); color: var(--sand-light, #f3e6cd);
      border: 1px solid rgba(250, 243, 232, .35); border-radius: 999px;
      padding: .3rem .7rem; font-size: .82rem; white-space: nowrap;
      pointer-events: none; box-shadow: 0 6px 18px rgba(4, 20, 25, .5);
    }
    .skytag b { font-family: var(--font-brand); }
    .skytag i { font-style: normal; opacity: .72; }
    
    .skylist {
      position: fixed; z-index: 45; left: 50%; bottom: 6svh;
      transform: translateX(-50%); width: min(92vw, 24rem);
      max-height: 62svh; overflow-y: auto;
      touch-action: none;      
      background: linear-gradient(165deg, rgba(16, 50, 60, .40), rgba(16, 50, 60, .24));
      backdrop-filter: blur(14px) saturate(130%);
      -webkit-backdrop-filter: blur(14px) saturate(130%);
      border: 1px solid rgba(250, 243, 232, .30); border-radius: 1.1rem;
      box-shadow: 0 24px 60px rgba(4, 20, 25, .5);
      padding: 1.1rem 1.2rem; color: var(--white);
    }
    .skylist h2 { font-family: var(--font-brand); font-size: 1.15rem; margin: 0;
                  cursor: grab; user-select: none; }
    .skylist.dragging { transition: none; }
    .skylist.dragging h2 { cursor: grabbing; }
    .skylist.placed { transition: left .35s ease, top .35s ease, bottom .35s ease; }
    
    .skygrab {
      width: 42px; height: 4px; border-radius: 999px; margin: -.35rem auto .55rem;
      background: rgba(250, 243, 232, .38); cursor: grab;
    }
    
    .skylist:not(.listopen) .skyface,
    .skylist:not(.listopen) ul,
    .skylist:not(.listopen) .skylist-foot { display: none; }
    
    .skylist.peek { max-height: 21rem; }
    .skylist.peek .skyface, .skylist.peek ul,
    .skylist.peek .skylist-foot { display: none; }
    
    .skymore {
      display: flex; align-items: baseline; gap: .4rem; width: 100%;
      background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
      font: inherit; color: var(--white); text-align: left;
    }
    
    .skymore::after {
      content: '\25be'; font-size: 1.05em; opacity: .8; line-height: 1;
      transition: transform .18s ease;
    }
    .skylist.listopen .skymore::after { transform: rotate(180deg); }
    .skymore:hover::after, .skymore:focus-visible::after { opacity: 1; }
    .skymore span { border-bottom: 1px dotted rgba(250, 243, 232, .35); }
    .skylist-sub { margin: .15rem 0 .7rem; font-size: .82rem; opacity: .75; }
    
    .skylist-sub { font-style: italic; }
    .skyrows { margin: 0 0 .8rem; }
    .skyrow { display: grid; grid-template-columns: 5.6rem 1fr; gap: .5rem;
              padding: .28rem 0; font-size: .88rem; line-height: 1.4; }
    .skyrow dt { font-family: var(--font-brand); font-weight: 700;
                 color: var(--sand-light, #f3e6cd); opacity: .85; }
    .skyrow dd { margin: 0; color: var(--white); }
    .skyrow:has(dd:empty) { display: none; }
    @media (max-width: 420px) {
      .skyrow { grid-template-columns: 1fr; gap: .1rem; }
    }
    .skyface { display: flex; flex-wrap: wrap; gap: .32rem; margin: 0 0 .7rem; }
    .skyface button {
      background: rgba(250, 243, 232, .10); color: var(--white);
      border: 1px solid rgba(250, 243, 232, .28); border-radius: 999px;
      padding: .24rem .6rem; font: inherit; font-size: .78rem; cursor: pointer;
    }
    .skyface button[aria-pressed="true"] {
      background: rgba(250, 243, 232, .26);
      border-color: rgba(250, 243, 232, .75);
    }
    .skylist li.hidden-here b::after { content: ' \00b7 behind the scene';
      font-weight: 400; opacity: .55; font-size: .74rem; }
    .skylist ul { list-style: none; margin: 0; padding: 0; }
    .skylist li { display: flex; justify-content: space-between; gap: .6rem;
                  padding: .4rem .1rem; border-bottom: 1px solid rgba(250,243,232,.12);
                  font-size: .9rem; cursor: pointer; }
    .skylist li:last-child { border-bottom: 0; }
    .skylist li:hover, .skylist li:focus-visible { background: rgba(250,243,232,.08); }
    .skylist li span { opacity: .7; font-size: .82rem; }
    .skylist li.planet b::after { content: ' ·  planet'; font-weight: 400;
                                  opacity: .6; font-size: .78rem; }
    .skylist-x { position: absolute; top: .4rem; right: .6rem; background: none;
                 border: 0; color: var(--white); opacity: .7; font-size: 1.4rem;
                 cursor: pointer; }
    .skylist-foot { margin: .7rem 0 0; font-size: .76rem; opacity: .6; }
    
    .page .sky-whisper { pointer-events: auto; }
    
    body.stargazing .doors .card {
      opacity: .12; pointer-events: none; transition: opacity .5s ease;
    }
    body.stargazing .card--trivia .qtile { visibility: hidden; }
    .sky-whisper {
      
      display: inline-block; padding: .55rem .4rem; margin-bottom: .35rem;
      min-height: 44px; line-height: 1.9; opacity: 0; transition: opacity 1.2s ease; cursor: pointer;
                   background: none; border: 0; color: inherit; font: inherit;
                   text-decoration: underline dotted; }
    .sky-whisper.on { opacity: .85; }
    
    .sky-whisper[hidden] { display: none; }
    
    footer .sky-whisper::before { content: '\00b7'; margin: 0 .1em 0 .35em;
      display: inline-block; text-decoration: none;
      font-size: .8rem; line-height: 1; opacity: .8; }