/* Rated-N nav mark, 3D (lab, 2026-10-06). Pairs with nav-mark.js. The same sixteen-layer vector N as the flip screen's .n3d
   and the connected scene's mark, at nav size: neon face #00ff6a (Rated-N Magenta 3D, 2026-10-07), magenta body, a 3px float over 7 s, a slow sway, a pointer
   tilt on hover. Everything is scoped under .rnm so it never touches the page's own rules. */
/* 2026-10-07: --rnm-size is registered as a length so a page that sets it in em (the hero's .66em) hands every layer the SAME
   pixel value; unregistered, each SVG layer re-resolved the em against its own font size and the hero stack came out twice as deep. */
@property --rnm-size{syntax:'<length>';inherits:true;initial-value:28px}
.rnm{position:relative;display:inline-block;width:var(--rnm-size,28px);aspect-ratio:124/130;perspective:260px;flex:none;vertical-align:middle}
.rnm-fl,.rnm-sw,.rnm-tilt{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.rnm-fl{animation:rnmFloat 7s ease-in-out infinite}
@keyframes rnmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--rnm-size,28px) * -.14))}}   /* 2026-10-07 (Jay: "doesn't float or tilt"): ~4px at nav size, scales with the mark */
.rnm-sw{animation:rnmSway 8s ease-in-out infinite}
@keyframes rnmSway{0%{transform:rotateY(-22deg) rotateX(8deg)}50%{transform:rotateY(22deg) rotateX(-6deg)}100%{transform:rotateY(-22deg) rotateX(8deg)}}   /* was ±9°: invisible at 28px; ±22° shows the magenta body */
.rnm-tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.rnm-l{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translateZ(calc(var(--k) * var(--rnm-size,28px) * -0.0174));
  fill:color-mix(in srgb,#ff4fd0 calc(100% - var(--k) * 4%),#4a0838);backface-visibility:visible}
.rnm-l.k1{fill:#ff5fc8}
.rnm-l.k15{fill:#ff4fd0;filter:drop-shadow(0 0 3px rgba(255,79,208,.72)) drop-shadow(0 0 9px rgba(255,79,208,.315))}   /* 2026-10-07 (Jay): glow 10% lower */
.rnm-l.k0{fill:#00ff6a;filter:drop-shadow(0 0 2px rgba(0,255,106,.855)) drop-shadow(0 0 6px rgba(0,255,106,.54)) drop-shadow(0 0 14px rgba(0,255,106,.315))}
.rnm-sh{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translateZ(.3px);fill:#fff;opacity:0;
  -webkit-mask-image:linear-gradient(115deg,transparent 42%,#000 50%,transparent 58%);mask-image:linear-gradient(115deg,transparent 42%,#000 50%,transparent 58%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;animation:rnmShine 11s ease-in-out infinite 3s}
@keyframes rnmShine{0%{-webkit-mask-position:130% 0;mask-position:130% 0;opacity:0}6%{opacity:.55}18%{-webkit-mask-position:-130% 0;mask-position:-130% 0;opacity:0}100%{-webkit-mask-position:-130% 0;mask-position:-130% 0;opacity:0}}
/* 2026-10-06: the N-tracing pulse (data-pulse). Three pieces of the letter, the left wall, the diagonal and the right wall, each
   breathing magenta in turn on a slow 7 s cycle with a soft overlap, so the N surfaces through the green face like a colour change
   moving across skin. Low and smooth on purpose: it reveals, it never flashes. */
.rnm-np{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translateZ(.6px);pointer-events:none}
.rnm-np path{fill:#ff4fd0;opacity:0;filter:drop-shadow(0 0 3px rgba(255,79,208,.5));animation:rnmNP 7s cubic-bezier(.45,0,.55,1) infinite}
.rnm-np .np2{animation-delay:.9s}.rnm-np .np3{animation-delay:1.8s}
@keyframes rnmNP{0%,62%,100%{opacity:0}16%{opacity:.72}30%{opacity:.8}46%{opacity:.22}}
@media (prefers-reduced-motion:reduce){.rnm-fl,.rnm-sw,.rnm-sh{animation:none!important}.rnm-tilt{transform:none!important;transition:none}.rnm-np path{animation:none!important;opacity:.32}}