.role-lens{border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 82%, transparent);border-radius:1rem;grid-template-columns:minmax(9rem,.7fr) minmax(20rem,1.45fr) minmax(13rem,.8fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);padding:1.2rem 1.35rem;display:grid}.role-lens__heading p{margin:0}.role-lens__heading p:last-child{margin-top:.3rem;font-size:.9rem;font-weight:630}.role-lens__control{grid-template-columns:repeat(3,1fr);display:grid;position:relative}.role-lens__track{background:var(--line-strong);height:1px;position:absolute;top:.45rem;left:16%;right:16%}.role-lens__option{min-height:2.75rem;color:var(--muted);cursor:pointer;font-family:var(--font-mono), monospace;letter-spacing:.06em;text-transform:uppercase;background:0 0;border:0;flex-direction:column;align-items:center;gap:.55rem;padding:0;font-size:.62rem;display:flex;position:relative}.role-lens__node{z-index:1;border:1px solid var(--line-strong);background:var(--surface);width:.85rem;height:.85rem;transition:background .22s var(--ease-out), border .22s var(--ease-out), transform .22s var(--ease-out);border-radius:50%}.role-lens__option[data-active=true]{color:var(--ink)}.role-lens__option[data-active=true] .role-lens__node{border:3px solid var(--blue-soft);background:var(--blue);box-shadow:0 0 0 1px var(--blue);transform:scale(1.12)}.role-lens__note{color:var(--muted);margin:0;font-size:.78rem;line-height:1.5}@media (max-width:760px){.role-lens{grid-template-columns:1fr;gap:1.2rem}.role-lens__note{min-height:2.4em}}
