.portal-demo-access { margin: 0 0 1.5rem; color: #002147; }
.portal-demo-title { margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; }
.portal-demo-options { display: flex; flex-wrap: wrap; gap: .625rem; }
.portal-demo-option { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: 1 1 10rem; min-height: 2.75rem; padding: .625rem .75rem; border: 1px solid #a9c8dc; border-radius: .75rem; background: #f1f8fc; color: #002147; font-size: .875rem; font-weight: 600; text-decoration: none; transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out; }
.portal-demo-option:hover { background: #dcefff; border-color: #306389; color: #002147; }
.portal-demo-option[aria-current="true"] { background: #002147; border-color: #002147; color: #fff; }
.portal-demo-option:focus-visible { outline: 2px solid #306389; outline-offset: 3px; }
.portal-demo-status { min-height: 2.5em; margin: .75rem 0 0; color: #36516b; font-size: .875rem; line-height: 1.5; }
.portal-login-input-shell.is-demo-filling { background: #eaf6ff; border-color: #306389; }
.portal-login-input-shell.is-demo-ready { background: #f1f8fc; border-color: #a9c8dc; }
.portal-login-input { caret-color: #002147; }
@media (prefers-reduced-motion: reduce) {
    .portal-demo-option, .portal-login-input-shell { transition: none; }
    .portal-login-input-shell:focus-within { transform: none; }
}