/* Small celestial bodies, not a ring of interface badges. */
.locked-node{width:30px;height:30px;min-width:0;min-height:0;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#bdc8dc;box-shadow:none;transition:opacity .2s;touch-action:manipulation}
.locked-node:before{content:'';position:absolute;inset:auto;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border:1px solid hsl(var(--lock-hue) 32% 73% / .18);border-radius:50%;background:none;box-shadow:0 0 7px hsl(var(--lock-hue) 55% 70% / .09);transition:width .2s,height .2s,border-color .2s,box-shadow .2s}
.locked-node:after{display:none}
.locked-node .node-mark{position:relative;inset:auto;display:block;width:7px;height:7px;transform:none;border:0;border-radius:50%;background:radial-gradient(circle at 27% 24%,hsl(var(--lock-hue) 30% 82%),hsl(var(--lock-hue) 25% 38%) 40%,#03060b 83%);box-shadow:-1px -1px 2px hsl(var(--lock-hue) 50% 72% / .2),0 0 8px hsl(var(--lock-hue) 55% 70% / .12);transition:opacity .2s}
.locked-node .icon{position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%);opacity:0;stroke:currentColor;stroke-width:1.4;transition:opacity .2s}
.locked-node[data-kind=moon] .node-mark{width:11px;height:11px}
.locked-node[data-kind=moon]:before{width:17px;height:17px;border-color:hsl(var(--lock-hue) 32% 73% / .07)}
.locked-node[data-kind=beacon] .node-mark{width:3px;height:3px;background:hsl(var(--lock-hue) 35% 83%);box-shadow:0 0 6px hsl(var(--lock-hue) 55% 75% / .42)}
.locked-node[data-kind=beacon]:before{width:8px;height:8px;opacity:.28}
.locked-node[data-depth=back]:before{opacity:.32}
.locked-node:hover,.locked-node:focus-visible{border:0;background:transparent;box-shadow:none;color:#e0dff0}
.locked-node:hover:before,.locked-node:focus-visible:before{width:22px;height:22px;border-color:hsl(var(--lock-hue) 45% 80% / .55);box-shadow:0 0 11px hsl(var(--lock-hue) 60% 72% / .16)}
.locked-node:hover .icon,.locked-node:focus-visible .icon{opacity:.9}
.locked-node:hover .node-mark,.locked-node:focus-visible .node-mark{opacity:.1}
.locked-node[data-occluded=true]{visibility:hidden;pointer-events:none}
.locked-node:focus-visible{outline:1px solid #adb9d570;outline-offset:-2px}
@media(max-width:700px){.locked-node{width:44px;height:44px}.locked-node:before{width:12px;height:12px}.locked-node .node-mark{width:6px;height:6px}.locked-node[data-kind=moon] .node-mark{width:9px;height:9px}.locked-node[data-kind=beacon] .node-mark{width:3px;height:3px}.locked-node .icon{width:8px;height:8px}.locked-node:hover:before,.locked-node:focus-visible:before{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.locked-node,.locked-node:before,.locked-node .node-mark,.locked-node .icon{transition:none}}
