.demo-role-menu{position:relative;flex-shrink:0}.demo-role-menu summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;border:1px solid #cfdaed;border-radius:10px;background:#f4f7ff;padding:10px 12px;color:#294f85;font-size:13px;white-space:nowrap}.demo-role-menu summary::-webkit-details-marker{display:none}.demo-role-menu summary:focus-visible{outline:3px solid #699afa;outline-offset:2px}.demo-role-badge{font-size:9px;font-weight:800;letter-spacing:.7px;background:#dce8fe;color:#285db1;padding:4px 5px;border-radius:4px}.demo-role-panel{position:absolute;right:0;top:calc(100% + 8px);width:330px;padding:20px;background:white;border:1px solid #d4e0ee;border-radius:14px;box-shadow:0 14px 36px #152a4a24;z-index:40;color:#263d59;white-space:normal}.demo-role-panel>strong{font-size:17px}.demo-role-panel p{font-size:13px;line-height:1.5;margin:10px 0;color:#657993}.demo-role-panel label{display:block;font-size:12px;font-weight:700;margin:14px 0 6px}.hp-nav-right .demo-role-panel select{display:block;width:100%;font-size:14px}.demo-role-panel small{display:block;font-size:11px;color:#698097;margin-top:8px;line-height:1.5}.demo-role-panel .demo-local-note{padding-top:12px;border-top:1px solid #e3eaf3;font-size:12px}.demo-session-identity{background:#eef4ff;color:#385c92;border-radius:8px;padding:10px;font-size:13px}.demo-access-mode .hp-global-nav{gap:16px}.demo-access-mode .hp-nav-right{gap:10px}.demo-access-mode .hp-nav-right>#hpClientPicker{width:170px}
@media(max-width:1050px){.hp-brand b{font-size:18px}.hp-global-nav{padding:12px 16px;gap:12px}.hp-nav-right>label{display:none}.hp-global-nav nav button{padding:9px}.hp-nav-right>#hpClientPicker{max-width:150px}.demo-role-menu summary{font-size:12px;padding:9px}.demo-role-badge{display:none}}
@media(max-width:760px){.hp-nav-right .demo-role-panel select{width:100%;max-width:none}.demo-role-panel{left:0;right:auto;width:min(330px,calc(100vw - 36px))}.hp-nav-right{flex-wrap:wrap}.demo-access-mode .hp-nav-right>#hpClientPicker{flex:1;min-width:110px;max-width:none}.hp-nav-avatar{display:none}.demo-role-menu summary{font-size:12px}.hp-global-nav .hp-nav-right{margin:0}}
@media print{.demo-role-menu{display:none}}
.demo-session-switch{font-size:11px;padding:7px 9px;background:#f4f7fc;border:1px solid #dae4f1;color:#687d98;border-radius:8px;align-self:center}