#ring-nav{
  position:fixed; left:40px; bottom:40px; z-index:60;
  width:62px; height:62px;
}
.rn-ring-btn{ display:block; width:100%; height:100%; padding:0; border:0;
  background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.rn-ring-btn:focus-visible{ outline:2px solid #ffa84a; outline-offset:6px;
  border-radius:50%; }
.rn-ring-svg{ width:100%; height:100%; overflow:visible; display:block;
  transition:transform .6s var(--ease); }
#ring-nav:hover .rn-ring-svg,
.rn-ring-btn:focus-visible .rn-ring-svg{ transform:scale(1.06); }

.rn-disk{
  fill:url(#rn-accretion);
  transform-origin:50% 50%;
  animation:rn-spin 26s linear infinite;
  transition:opacity .5s var(--ease);
}
#ring-nav:hover .rn-disk{ opacity:.85; }

.rn-event{
  fill:#000; stroke:none;
  filter:drop-shadow(0 0 3px rgba(255,150,60,.4));
}
@keyframes rn-spin{ to{ transform:rotate(360deg); } }

.rn-bound-dot{
  fill:#ffe6c2;
  filter:drop-shadow(0 0 1.5px #ffb86a) drop-shadow(0 0 4px rgba(255,150,60,.7));
  transition:opacity .3s var(--ease);
}

.rn-layer{ position:fixed; inset:0; z-index:59; pointer-events:none; }
.rn-fx{ position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .6s var(--ease); }

.rn-layer.escaped .rn-fx, .rn-layer.open .rn-fx{ opacity:1; }

.rn-laser{
  fill:#eaf7ff;
  filter:drop-shadow(0 0 2px var(--blue)) drop-shadow(0 0 7px var(--glow));
}

.rn-track{ stroke:rgba(200,208,214,.30); stroke-width:1;
  opacity:0; transition:opacity .6s var(--ease); }
.rn-layer.escaped .rn-track{ opacity:1; }

.rn-words{ position:absolute; inset:0; }
.rn-word{
  position:fixed; pointer-events:auto;
  transform:translateY(10px) scale(.96); opacity:0; filter:blur(5px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);

  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(15px,2.2vw,30px); font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--fog); white-space:nowrap; line-height:1;
}

.rn-word.rn-sm{ font-size:clamp(12px,1.76vw,24px); }
.rn-word.show{ opacity:1; transform:none; filter:none; }

.rn-word.lit{ color:#c7d2d8; }

.rn-word:focus-visible{ opacity:1; transform:none; filter:none;
  outline:2px solid var(--blue); outline-offset:4px; color:var(--paper); }
.rn-word:hover,
.rn-word:focus-visible{ color:var(--paper); text-shadow:0 0 18px rgba(34,187,255,.25); }
.rn-word::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.rn-word:hover::after{ transform:scaleX(1); }

.rn-word.glitch{ position:fixed; }
.rn-word.glitch::before,
.rn-word.glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0;
  width:100%; height:100%; pointer-events:none;
}
.rn-word.glitch::before{
  color:#22bbff; z-index:-1;
  animation:glx1 8s steps(2) infinite; opacity:.5;
}
.rn-word.glitch::after{
  color:#ff5a7a; z-index:-1;
  animation:glx2 9.5s steps(2) infinite; opacity:.4;
}
@keyframes glx1{
  0%,92%,100%{ transform:translate(0,0); clip-path:inset(0 0 0 0); }
  93%{ transform:translate(-2px,1px); clip-path:inset(20% 0 55% 0); }
  96%{ transform:translate(2px,-1px); clip-path:inset(60% 0 10% 0); }
}
@keyframes glx2{
  0%,90%,100%{ transform:translate(0,0); clip-path:inset(0 0 0 0); }
  91%{ transform:translate(2px,0); clip-path:inset(10% 0 70% 0); }
  95%{ transform:translate(-2px,1px); clip-path:inset(50% 0 20% 0); }
}

@media (max-width:720px){
  .rn-word{ font-size:19px; letter-spacing:.10em; }
  .rn-word.rn-sm{ font-size:15px; }
}