/* ───────────────────────────────────────────────────────────────────────────── panel — the floating segmented bar. One component, every template. It replaces the three hand-built `.float` bars that had drifted to three different corner radii. The shape, from the references Pawel picked: [ mark ] [ item ][ item ][ item ][ item ] [ CTA ] — a dark rounded shell, each item its OWN rounded button rather than bare text, the current one outlined in the accent, and one solid accent CTA on the end. That segmentation is the whole difference: bare text links read as a nav, buttons-in-a-shell read as a device. Type is deliberately NOT the reference's grotesk — Space Grotesk, ours, tighter and squarer than the body Inter so the bar reads as an object sitting ON the page rather than part of it. ───────────────────────────────────────────────────────────────────────── */ .np{ /* knobs — override per template, or per instance with a style attribute */ --np-shell:#232020; /* the bar itself */ --np-mark:#131111; /* logo tile, a shade deeper than shell */ --np-btn:transparent; /* resting button fill */ --np-btn-line:#ffffff26; /* resting button border */ --np-btn-ink:#ffffffc4; --np-btn-ink-hi:#fff; --np-accent:#E8C468; /* current + CTA */ --np-accent-ink:#1B1712; /* text ON the accent */ --np-radius:17px; --np-radius-btn:11px; --np-gap:5px; /* top/right pinned to auto ON PURPOSE. The component is a