body {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #292b35;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1120px;
    margin: 0 auto;
    padding: 23px 28px;
    border-bottom: 1px solid #e4e5eb;
    gap: 24px;
}

.site-header a { text-decoration: none; color: inherit; }
.site-brand { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { position: relative; display: block; flex: 0 0 auto; width: 42px; height: 42px; }
.brand-mark img, .brand-mark canvas { display: block; width: 100%; height: 100%; }
.brand-mark canvas { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.brand-mark.is-ready canvas { visibility: visible; }
.brand-mark.is-ready img { visibility: hidden; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
    .brand-mark.is-ready canvas { visibility: hidden; }
    .brand-mark.is-ready img { visibility: visible; }
}
.site-header nav { display: flex; gap: 8px; margin-left: auto; }
.site-header nav a { font-size: 14px; padding: 9px 15px; border-radius: 20px; color: #646876; }
.site-header nav a:hover { color: #514264; background: #eee9f1; }
.site-header nav a[aria-current="page"] { background: #ebe5f0; color: #514264; }
a:focus-visible, button:focus-visible { outline: 2px solid #716294; outline-offset: 5px; }

footer {
    text-align: center;
    padding: 28px 20px;
    color: #646876;
    font-size: 12px;
}

.fullwidth {
    width: 98vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 600px) {
    .site-header { padding: 18px 22px; gap: 12px; flex-wrap: wrap; }
    .site-brand { font-size: 18px; gap: 8px; }
    .brand-mark { width: 34px; height: 34px; }
    .site-header nav { gap: 0; }
    .site-header nav a { padding: 8px 12px; }
}

.logo-unit { display: inline-flex; flex-direction: column; align-items: center; }
.brand-divider { color: #a2a5af; font-weight: 400; }
.logo-toggle { width: 32px; height: 32px; padding: 8px; border: 0; border-radius: 50%; background: none; color: #858a99; cursor: pointer; }
.logo-toggle svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.logo-control-play { display: none; fill: currentColor; stroke: none; }
.logo-toggle[data-paused="true"] .logo-control-pause { display: none; }
.logo-toggle[data-paused="true"] .logo-control-play { display: block; }
.logo-toggle:hover { color: #514264; background: #eee9f1; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
    .logo-toggle { display: none; }
}