:root {
      color-scheme: dark;
      background: #000;
      --gold: #ad995d;
      --gold-dim: #776a43;
      --gold-faint: #453e2a;
      --turn: 13.333333s;
      --rose-size: clamp(7rem, 13vw, 10.5rem);
    }

    .compass {
      display: block;
      width: min(calc(var(--rose-size) * 4.375), 63vw, 63svh);
      height: auto;
      overflow: visible;
      color: var(--gold);
      fill: none;
      stroke: currentColor;
      stroke-width: 0.55;
      stroke-linejoin: miter;
    }

    .fine { color: var(--gold-dim); stroke-width: 0.45; }
    .face-dark { fill: #080806; }
    .face-light { fill: url(#engraving); }
    .inner-face { fill: none; }
    .seam { stroke-width: 0.35; }
    .cardinal { font: 17.28px Georgia, serif; fill: currentColor; stroke: none; text-anchor: middle; dominant-baseline: central; }
    .orbit { color: var(--gold-dim); stroke-width: 0.7; }
    .rotor.orbit { animation-duration: 4.40917s; animation-direction: reverse; }
    .sun-spin { transform-box: view-box; transform-origin: 0 0; animation: revolution 0.888889s linear infinite; }
    .sun-core { fill: none; stroke: currentColor; stroke-width: 1.2; }
    .moon-phase { fill: none; stroke: var(--gold); stroke-width: 0.9; }
    .rotor {
      transform-box: view-box;
      transform-origin: 0 0;
      animation: revolution var(--turn) linear infinite;
    }
    .rose-motion { transform-box: view-box; transform-origin: 0 0; }
    .rose-bottom { animation: bottom-revolution 7.692308s linear infinite; }
    .rose-top { animation: top-oscillation 2.5s ease-in-out infinite; }
    .curve-rotor { animation-duration: 23.076923s; animation-direction: reverse; }
    .cardinal-dots {
      transform-box: fill-box;
      transform-origin: center;
      stroke: var(--gold);
      stroke-width: 1;
      stroke-linecap: round;
      stroke-dasharray: 0.1 4;
      animation: revolution 1s linear infinite;
    }
    .celestial-dots {
      fill: var(--gold);
      stroke: none;
      transform-box: view-box;
      transform-origin: 0 0;
      animation: revolution 24s linear infinite reverse;
    }
    .celestial-dot { animation: dot-flicker var(--flicker-period) linear infinite; animation-delay: var(--flicker-delay); }
    @keyframes dot-flicker {
      0%, 25%, 100% { opacity: 0; }
      35% { opacity: 0.3; }
      50%, 70% { opacity: 0.85; }
      85% { opacity: 0.45; }
      95% { opacity: 0; }
    }
    .dust { fill: var(--gold-dim); stroke: none; opacity: 0.2; }
    .radar-grid { fill: none; stroke: #f1d994; stroke-width: 0.55; opacity: 0.4; }
    .outer-dots { fill: none; stroke: var(--gold-dim); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 0.1 5; transform-box: view-box; transform-origin: 0 0; animation: optical-wobble 0.9s ease-in-out infinite; }
    .thermal-image { filter: url(#thermal-optics); }
    .evaporating-dot { fill: #d4bb78; stroke: none; opacity: 0; animation: evaporate var(--life) linear infinite; animation-delay: var(--delay); }
    @keyframes evaporate {
      0% { opacity: 0; transform: translate(0, 0); }
      15% { opacity: 0.65; }
      55% { opacity: 0.3; }
      100% { opacity: 0; transform: translate(var(--drift), var(--rise)); }
    }

    @keyframes revolution {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes bottom-revolution {
      from { transform: rotate(22.5deg); }
      to { transform: rotate(382.5deg); }
    }


    @keyframes top-oscillation {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(3.5deg); }
      50% { transform: rotate(0deg); }
      75% { transform: rotate(-3.5deg); }
    }


    @keyframes optical-wobble {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      :root { --turn: 53.333333s; }
      .curve-rotor { animation-duration: 69.230769s; }
      .rose-bottom { animation-duration: 30.769231s; }
      .rose-top { animation-duration: 10s; }
      .rotor.orbit { animation-duration: 17.636683s; }
      .sun-spin { animation-duration: 3.555556s; }
      .cardinal-dots { animation-duration: 4s; }
      .outer-dots { animation-duration: 3.6s; }
      .evaporating-dot { animation-duration: calc(var(--life) * 3); }
    }

@media (max-width: 600px) { .compass { width: min(calc(var(--rose-size) * 4.375), 63vw, 53.2svh); } }