/* The fixed chrome: name, scroll cue, footer note. */
/* ── HUD ─────────────────────────────────────────────────────── */
  .hud {
    position: fixed; z-index: 4;
    font-size: var(--fs-cap); letter-spacing: .075em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .hud-bl { bottom: 28px; left: 30px; transition: opacity .45s ease; }
  .hud-bl.gone { opacity: 0; pointer-events: none; }

  /* Frosted bar, Apple-style: transparent at rest, blurs in on scroll. */
  .hud-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 6;
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px clamp(18px, 3vw, 30px);
    transition: background .45s ease, backdrop-filter .45s ease, opacity .5s ease;
    pointer-events: none;
  }
  .hud-bar > * { pointer-events: auto; }
  .hud-bar.scrolled {
    background: var(--bar);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  /* The lighter tier (src/main.js): a backdrop blur over a canvas that changes
     every frame is re-blurred every frame, and integrated GPUs feel it. The
     bar goes a little more opaque instead. */
  :root.lite .hud-bar.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none;
                                 background: color-mix(in srgb, var(--bar) 100%, var(--bg) 35%); }
  /* UI font, not the mono the readouts used. */
  .hud-name {
    font-family: inherit; color: var(--ink);
    font-size: var(--fs-sub); font-weight: 600; letter-spacing: -.012em;
    text-transform: none;
  }


  .hud-actions { display: flex; align-items: center; gap: 14px; }

  .toggle {
    -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
    width: 46px; height: 26px; border-radius: 13px; background: var(--hair);
    position: relative; pointer-events: auto;
    transition: background .4s cubic-bezier(.32,.9,.24,1);
  }
  .toggle::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%; background: var(--bg);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform .45s cubic-bezier(.32,.9,.24,1);
  }
  :root[data-theme="dark"] .toggle::after { transform: translateX(20px); }
  .toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* ── The cursor (src/ui/cursor.js) ──────────────────────────────
     White artwork blended with `difference`: it comes out dark on the light
     sections, light on the dark ones, and splits across an edge — no backdrop
     detection and no state to keep in step. The native cursor goes everywhere,
     including the grab states the planets set: the arrow's size carries those. */
  :root.has-cursor, :root.has-cursor * { cursor: none !important; }
  .cursor {
    position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
    opacity: 0; will-change: transform; mix-blend-mode: difference;
    transition: opacity .2s linear;
  }
  .cursor.on { opacity: 1; }
  .cursor svg {
    display: block; width: 36px; height: 36px; margin: -7px 0 0 -7px;
    transition: transform .18s cubic-bezier(.32,.9,.24,1);
    transform: scale(1);
  }
  .cursor.over svg { transform: scale(1.9); }    /* over a planet you can drag: bigger, still the arrow */
  .cursor.down svg { transform: scale(1.35); }
  /* Over a link or a button the arrow becomes a pointing hand, a little larger,
     and stops turning with its travel — a hand that spins reads as a glitch. */
  .cursor .cur-hand { display: none; }
  .cursor.link .cur-arrow { display: none; }
  .cursor.link .cur-hand { display: block; }
  .cursor.link svg { transform: scale(1.3); margin: -9px 0 0 -12px; }
  .cursor.link.down svg { transform: scale(1.15); }
  @media (hover: none) { .cursor { display: none; } }

  .scrollcue { display: flex; align-items: center; gap: 10px; }
  .scrollcue i { width: 1px; height: 26px; background: var(--hair); position: relative; overflow: hidden; }
  .scrollcue i::after {
    content: ""; position: absolute; inset: 0; background: var(--accent);
    animation: cue 2.4s cubic-bezier(.6,0,.3,1) infinite;
  }
  @keyframes cue { 0% { transform: translateY(-100%) } 60%,100% { transform: translateY(100%) } }