.promotion-panel {
    --promotion-color: #d04444;
    --promotion-action-color: #93c2ff;
    --promotion-action-border: #93c2ff66;
    --promotion-left: max(20px, env(safe-area-inset-left));
    --promotion-right: max(20px, env(safe-area-inset-right));
    --promotion-top: max(20px, env(safe-area-inset-top));
    --promotion-bottom: max(20px, env(safe-area-inset-bottom));
    position: fixed;
    right: var(--promotion-right);
    bottom: var(--promotion-bottom);
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: min(390px, calc(100% - 40px));
    max-height: min(640px, 70vh);
    max-height: min(640px, 70dvh);
    border: 1px solid #ffffff26;
    border-radius: 4px;
    background: var(--promotion-background-color, rgba(2, 7, 16, .97));
    box-shadow: 0 12px 32px #000b;
    color: var(--promotion-text-color, #fff);
    font: 1rem/1.45 "Cubyte VCR", ui-monospace, monospace;
    text-shadow: 0 2px 5px #000;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    isolation: isolate;
    overflow: hidden;
}
.promotion-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--promotion-background-intensity, .25); z-index: -1; pointer-events: none; }
.promotion-actions a { background: var(--promotion-action-background, transparent); }
.promotion-panel[data-button-alignment="center"] .promotion-actions a { margin-inline: auto; }
.promotion-panel[data-button-alignment="right"] .promotion-actions a { margin-left: auto; }
.promotion-panel[data-position^="top-"] { top: var(--promotion-top); bottom: auto; }
.promotion-panel[data-position^="center"] { top: 50%; bottom: auto; transform: translateY(-50%); }
.promotion-panel[data-position$="-left"] { left: var(--promotion-left); right: auto; }
.promotion-panel[data-position$="-center"], .promotion-panel[data-position="center"] { left: 50%; right: auto; transform: translateX(-50%); }
.promotion-panel[data-position="center"] { transform: translate(-50%, -50%); }
.promotion-panel.promotion-preview { top: auto; bottom: auto; left: auto; right: auto; transform: none; }
.promotion-panel[hidden], .promotion-panel [hidden] { display: none !important; }
.promotion-heading { display: flex; align-items: flex-start; gap: 8px; padding: 16px 12px 8px 18px; flex-shrink: 0; }
.promotion-heading h2 { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; color: var(--promotion-color); font: inherit; font-size: 1.35rem; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.promotion-close { flex-shrink: 0; width: 44px; height: 44px; margin: -8px -4px 0 0; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 2rem; cursor: pointer; }
.promotion-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 16px; }
.promotion-body p { margin: 8px 0 0; white-space: pre-wrap; }
.promotion-image { display: block; width: 100%; height: auto; margin: 8px 0 12px; }
.promotion-actions { flex-shrink: 0; padding: 0 18px 18px; }
.promotion-actions a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: fit-content; max-width: 100%; min-height: 44px; padding: 8px 12px; color: var(--promotion-action-color); border: 1px solid var(--promotion-action-border); text-decoration: none; font: inherit; box-sizing: border-box; }
.promotion-close:hover, .promotion-actions a:hover { color: var(--promotion-color); }
.promotion-panel :focus-visible { outline: 2px solid var(--promotion-action-color); outline-offset: 2px; }
.promotion-preview { position: static; width: min(390px, 100%); margin: 16px 0; z-index: auto; }
.promotion-preview-note { flex-shrink: 0; margin: 0; padding: 0 18px 8px; color: var(--promotion-action-color); font-size: .85rem; }
.promotion-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
    .promotion-panel { --promotion-left: max(12px, env(safe-area-inset-left)); --promotion-right: max(12px, env(safe-area-inset-right)); --promotion-top: max(12px, env(safe-area-inset-top)); --promotion-bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100% - var(--promotion-left) - var(--promotion-right)); max-height: 60vh; max-height: 60dvh; }
    .promotion-preview { width: 100%; }
}