#nadi{
  position:fixed;
  z-index:2147483000;
  width:var(--nd);height:var(--nd);

  border-radius:50% !important;
  clip-path:circle(50% at 50% 50%);
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  display:grid;place-items:center;
  isolation:isolate;
  background:var(--nd-kaca);
  border:1px solid var(--nd-tepi);
  -webkit-backdrop-filter:blur(var(--nd-blur)) saturate(1.5);
  backdrop-filter:blur(var(--nd-blur)) saturate(1.5);
  box-shadow:0 8px 26px rgba(0,0,0,.30),
             inset 0 1px 1px rgba(255,255,255,.55),
             inset 0 -8px 14px rgba(0,0,0,.18);
  transition:box-shadow .2s ease,opacity .3s ease;
}
#nadi:focus-visible{outline:2px solid var(--nd-ikon);outline-offset:3px}
#nadi *{border-radius:50% !important}
#nadi .nd-ikon,#nadi .nd-ikon svg{border-radius:0 !important;clip-path:none}
#nadi.nd-tarik{cursor:grabbing;
  box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.6)}

#nadi .nd-kaca{position:absolute;inset:0;border-radius:50% !important;clip-path:circle(50% at 50% 50%);overflow:hidden;pointer-events:none;
  backdrop-filter:url(#nd-air);-webkit-backdrop-filter:url(#nd-air)}

#nadi .nd-kilau{position:absolute;inset:0;border-radius:50% !important;clip-path:circle(50% at 50% 50%);pointer-events:none;
  background:
    radial-gradient(42% 34% at 32% 24%,rgba(255,255,255,.8),transparent 62%),
    radial-gradient(30% 24% at 72% 80%,rgba(255,255,255,.35),transparent 68%),
    radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.22) 100%)}

#nadi .nd-ikon{position:relative;z-index:2;width:38%;height:38%;pointer-events:none;display:grid;place-items:center}
#nadi .nd-ikon svg{width:100%;height:100%;fill:var(--nd-ikon)}
#nadi .nd-putar{display:block !important}
#nadi .nd-jeda{display:none !important}
#nadi.nd-main .nd-putar{display:none !important}
#nadi.nd-main .nd-jeda{display:block !important}

#nadi.nd-nunggu{animation:nd-denyut 1.9s ease-in-out infinite}
@keyframes nd-denyut{
  50%{box-shadow:0 8px 26px rgba(0,0,0,.3),0 0 0 6px rgba(255,255,255,.10),
      inset 0 1px 1px rgba(255,255,255,.55)}}

@media (prefers-reduced-motion:reduce){
  #nadi{transition:none}
  #nadi.nd-nunggu{animation:none}
}