/* VP Studio family header (option B). Shared by Geometry for Design, Forms and Light Lab.
   Layout: [mark + VP Studio] / [tool name ▾ -> family menu] ......... [site's own controls]
   Self-contained tokens (--vf-*) so it drops into any site; colours match the Studio. */
.vf-bar{--vf-surface:#fff;--vf-ink:#18181b;--vf-ink-2:#52525b;--vf-ink-3:#a1a1aa;--vf-hair:#e4e4e7;--vf-hair-2:#d4d4d8;--vf-hover:#f4f4f5;--vf-vp1:#2c58c9;--vf-vp2:#c0346a;
  position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 16px;background:var(--vf-surface);border-bottom:1px solid var(--vf-hair);font:14px/1.3 "Geist","Inter","Helvetica Neue",Arial,system-ui,sans-serif;color:var(--vf-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vf-bar{--vf-surface:#17181b;--vf-ink:#f4f4f5;--vf-ink-2:#a1a1aa;--vf-ink-3:#63636b;--vf-hair:#2a2b30;--vf-hair-2:#3a3b41;--vf-hover:#222327;--vf-vp1:#7c9cf5;--vf-vp2:#f07aa5}}
:root[data-theme="dark"] .vf-bar{--vf-surface:#17181b;--vf-ink:#f4f4f5;--vf-ink-2:#a1a1aa;--vf-ink-3:#63636b;--vf-hair:#2a2b30;--vf-hair-2:#3a3b41;--vf-hover:#222327;--vf-vp1:#7c9cf5;--vf-vp2:#f07aa5}
.vf-brand{display:inline-flex;align-items:center;gap:8px;color:var(--vf-ink);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;flex:none;min-height:36px}
.vf-mark{width:24px;height:24px;flex:none;display:block}
.vf-mark .h{stroke:var(--vf-ink);stroke-width:1.6;stroke-linecap:round;fill:none}
.vf-mark .l{stroke:var(--vf-vp1);stroke-width:2;stroke-linecap:round;fill:none}
.vf-mark .r{stroke:var(--vf-vp2);stroke-width:2;stroke-linecap:round;fill:none}
.vf-mark .c{fill:var(--vf-surface);stroke:var(--vf-ink);stroke-width:1.6}
.vf-slash{color:var(--vf-ink-3);font-size:18px;flex:none}
.vf-fam{position:relative;flex:none;min-width:0}
.vf-fam>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:1px solid var(--vf-hair-2);border-radius:8px;font-weight:500;font-size:14px;white-space:nowrap;cursor:pointer;user-select:none}
.vf-fam>summary::-webkit-details-marker{display:none}
.vf-fam>summary:hover,.vf-fam[open]>summary{background:var(--vf-hover)}
.vf-car{width:12px;height:12px;fill:none;stroke:var(--vf-ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.vf-fam[open] .vf-car{transform:rotate(180deg)}
.vf-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:50;min-width:248px;display:flex;flex-direction:column;padding:6px;background:var(--vf-surface);border:1px solid var(--vf-hair);border-radius:10px;box-shadow:0 1px 2px rgb(0 0 0 / .06),0 10px 28px rgb(0 0 0 / .16)}
.vf-menu .vf-mh{font:500 10.5px/1 "Geist Mono",ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--vf-ink-3);padding:8px 10px 6px}
.vf-menu a{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:7px;color:var(--vf-ink);text-decoration:none;font-size:14px;font-weight:500}
.vf-menu a small{font-size:12px;font-weight:400;color:var(--vf-ink-2)}
.vf-menu a:hover{background:var(--vf-hover)}
.vf-menu a[aria-current="page"]{background:var(--vf-hover);font-weight:600}
.vf-menu hr{border:0;border-top:1px solid var(--vf-hair);margin:4px 0;width:100%}
.vf-menu .vf-by{margin:4px 0 0;padding:8px 10px 4px;border-top:1px solid var(--vf-hair);font-size:12px;color:var(--vf-ink-2)}
.vf-menu .vf-by a{display:inline;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px}
.vf-menu .vf-by a:hover{background:none;color:var(--vf-ink)}
.vf-sp{flex:1;min-width:0}
.vf-bar :focus-visible{outline:2px solid var(--vf-ink);outline-offset:2px}
@media (max-width:360px){.vf-bar{gap:8px;padding:6px 12px}.vf-brand b{display:none}.vf-slash{display:none}}
@media (max-width:480px){.vf-fam{position:static}.vf-menu{left:12px;right:12px;min-width:0}}
/* Touch: the tool button stays 36px to the eye, its tap area grows to 44px. */
@media (pointer:coarse){.vf-brand{min-height:44px}.vf-fam>summary{position:relative}.vf-fam>summary::after{content:"";position:absolute;inset:-4px -2px}.vf-menu a{min-height:44px;justify-content:center}}
@media (prefers-reduced-motion:reduce){.vf-car{transition:none}}