:root {
    --sidebar-width: 260px;
    --color-bg: #f6f7f7;
    --color-shell: #fbfbfb;
    --color-sidebar: #ffffff;
    --color-panel: #ffffff;
    --color-soft: #f4f5f9;
    --color-soft-2: #d7ead7;
    --color-primary: rgba(67, 76, 228, 1);
    --color-primary-hover: rgb(53, 60, 204);
    --color-accent: #00a32a;
    --color-cta: #000000;
    --color-cta-hover: #1d2327;
    --color-pink: #d94f9f;
    --color-text: #282834;
    --color-muted: #646970;
    --color-border: rgb(223, 225, 235);
    --color-danger: #d8362e;
    --color-success: #008710;
    --color-warning: #f2b66d;
    --radius: 10px;
    --shadow: none;
    --panel-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}

.app-logo {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-size: 1rem;
    text-align: left;
}

.app-logo-mark {
    width: 1.35em;
    height: 1.35em;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--color-primary);
    color: #ffffff;
    border-radius: var(--radius);
    border-radius:0.45em;
}

.app-logo-mark svg {
    width: 0.75em;
    height: 0.75em;
    display: block;
    fill: currentColor;
    stroke: none;
}

.app-logo-copy,
.app-logo-copy strong,
.app-logo-copy span {
    display: block;
}

.app-logo-copy strong {
    color: var(--color-text);
    font-size: 1.1em;
    line-height:  initial;
    letter-spacing: -0.021em;
    margin-top: -0.15em;
}

.app-logo-copy span {
    margin-top: 0.125em;
    color: var(--color-muted);
    font-size: 0.7em;
    line-height: 1.2;
}