/* Selected identity: geometric Human Design emblem, outlined wordmark. */
.logo,
.chart-workspace .logo{
    display:flex;
    align-items:center;
    width:100%;
    max-width:222px;
    color:var(--text);
    text-decoration:none;
    line-height:1;
}
.logo .brand-logo{
    display:block;
    flex:none;
    width:100%;
    max-width:none;
    height:auto;
    overflow:visible;
    fill:currentColor;
}
.brand-symbol{display:block;fill:currentColor;height:auto}
.tagline,
.chart-workspace .tagline{
    max-width:230px;
    margin:10px auto 0;
    color:var(--muted);
    font:400 12px/1.6 ChartaInterface,Arial,sans-serif;
    letter-spacing:0;
}
.chart-workspace .tagline:after{content:none}
.chart-workspace .logo{margin-inline:auto}
.auth-story{background:var(--sidebar)}
.auth-story .logo{max-width:270px}
.auth-story>.eyebrow{margin-top:48px}
.auth-story h1{
    font-family:ChartaInterface,Arial,sans-serif;
    font-size:54px;
    font-weight:700;
    line-height:1.08;
    letter-spacing:-1.2px;
    margin:24px 0;
}
.auth-story h1 em{font:inherit;color:var(--accent)}
.auth-brand-art{
    display:flex;
    align-items:center;
    justify-content:center;
    height:165px;
    margin:30px 0 25px;
    color:var(--text);
    opacity:.16;
}
.auth-brand-art .brand-symbol{width:145px;height:165px;max-width:100%}
@media(max-width:850px){
    .auth-story .logo{max-width:215px}
    .auth-story h1{font-size:32px;line-height:1.18;margin-top:22px;letter-spacing:-.7px}
    .auth-brand-art{display:none}
}
@media(max-width:700px){
    .logo,.chart-workspace .logo{max-width:205px;margin:0}
    .tagline,.chart-workspace .tagline{display:block;margin:4px 0 0;font-size:11px;max-width:none}
}
@media(max-width:420px){
    .auth-story h1{font-size:29px}
    .auth-story .logo{max-width:200px}
}