/* star-tree — the start page's linktree (assets/star-tree.js) on top of the star in star-menu.css: the
   overlay the link names are drawn in, the focus state, and the size of the bloom. */
#sn {
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5; overflow: visible;
}
.sn-t { font-family: "Milksea", "Tilt Neon", sans-serif; letter-spacing: .06em; }

/* the bloom's size until star-tree.js fits it to the screen from the measured names (it sets --s inline) */
.center-nav { --s: min(440px, 60vmin); }
/* a direction in focus brightens; the other three arms stay as they are */
.center-nav.sn-focus .quad.sn-on { opacity: 1 !important; }

/* the page is one drag surface on touch: nothing scrolls, bounces, selects or flashes under the finger */
html, body {
    touch-action: none; overscroll-behavior: none;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* every link as a plain list, off screen */
.sn-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}