/* One transparent source; colours belong to the page theme, not the image. */
:root { --seiryn-purple: #bd93f9; --seiryn-lettering: #f8f8f2; }
:root[data-theme="alucard"] { --seiryn-purple: #644ac9; --seiryn-lettering: #1f1f1f; }
.seiryn-logo { position: relative; display: inline-block; background: none; }
.seiryn-logo::before, .seiryn-logo-stacked::after {
    content: ""; position: absolute;
    background-color: var(--seiryn-purple);
    mask-image: url('/assets/seiryn-v2/master.png');
    mask-repeat: no-repeat;
}
/* Isolate the dragon from the source without changing the original artwork. */
.seiryn-logo::before {
    width: 46%; height: 78%; left: 27%; top: 11%;
    mask-size: 718.22% 210.69%; mask-position: 22.135% 49.142%;
}
.seiryn-logo-horizontal::before {
    inset: 0; width: 100%; height: 100%;
    mask-size: auto 212%; mask-position: center;
    background: linear-gradient(to right, var(--seiryn-purple) calc(50% - 24px), var(--seiryn-lettering) calc(50% - 24px));
}
.seiryn-logo-stacked::before { width: 39%; height: 66%; left: 30.5%; top: 6%; }
.seiryn-logo-stacked::after {
    width: 78%; height: 13.33%; left: 11%; top: 78%;
    mask-size: 216.61% 633.57%; mask-position: 65.654% 54.886%;
    background-color: var(--seiryn-lettering);
}
.seiryn-brand { position: relative; }
/* The original label reserves its exact width, including responsive wrapping. */
.seiryn-brand-space { visibility: hidden; }
.seiryn-brand-art {
    position: absolute; inset: 50% auto auto 0; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center;
    width: 100%; min-width: 108px; max-width: 132px; pointer-events: none;
}
.seiryn-brand-art .seiryn-logo { width: 100%; height: 36px; border-radius: 4px; }
.seiryn-brand-art small {
    display: block; color: var(--fg, #f8f8f2); font: 600 9px/12px var(--font-ui, sans-serif);
    letter-spacing: .03em; white-space: nowrap;
}
body .brand-mark.seiryn-logo { background: none; border-color: transparent; }
body .wordmark .brand-mark.seiryn-logo { transform: none; border-radius: 8px; }
body .orb-core .seiryn-logo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.seiryn-mark.seiryn-logo { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 9px; }
.seiryn-footer-logo { width: 108px; height: 36px; border-radius: 5px; vertical-align: middle; }
.seiryn-footer { padding-block: 16px; }

/* Shared app navigation rhythm; compact screens retain accessible wrapping. */
:root { --seiryn-nav-height: 64px; }
@media screen {
    body .hub-link > span { margin-top: 8px; }
    body .topbar .seiryn-brand, body .builder-toolbar .editor-heading { min-width: 108px; min-height: 48px; }
    body :is(.topbar, .builder-toolbar) {
        box-sizing: border-box;
        min-height: var(--seiryn-nav-height);
        padding-block: 8px;
        align-items: center;
    }
}
@media screen and (max-width: 640px) {
    body .header-icon.hub-link > span { left: auto; right: 0; transform: none; }
}
@media screen and (min-width: 1081px) {
    body :is(.topbar, .builder-toolbar) {
        height: var(--seiryn-nav-height);
        max-height: var(--seiryn-nav-height);
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
    body .topbar #statusSentence { min-width: 0; flex: 1 1 0; }
    body .builder-toolbar .header-tools { flex-shrink: 0; flex-wrap: nowrap; }
    body .topbar .topbar-left { flex-direction: row; align-items: center; gap: 16px; }
    body .builder-toolbar .editor-heading { flex: 0 0 132px; width: 132px; height: 48px; }
    body .builder-toolbar .editor-heading .seiryn-brand-space { display: none; }
    body .builder-toolbar :is(.editor-store, #draft-status) { min-width: 0; }
}