.mur-demo-banner { position: fixed; z-index: 10020; top: 10px; left: 50%; display: flex; box-sizing: border-box; width: min(920px,calc(100vw - 28px)); align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px 10px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; background: #1e2751 url('../img/background2.jpg') center/cover no-repeat; box-shadow: 0 8px 28px rgba(15,23,42,.25); color: #fff; font-size: 12px; transform: translateX(-50%); }
.mur-demo-banner-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.mur-demo-banner-copy strong { flex: 0 0 auto; font-size: 13px; }
.mur-demo-banner-copy span { line-height: 1.35; opacity: .9; white-space: normal; }
.mur-demo-banner-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.mur-demo-banner-actions form { margin: 0; }
.mur-demo-banner button { min-height: 32px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 5px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mur-demo-banner button:hover,.mur-demo-banner button:focus-visible { background: #fff; color: #1e2751; }
.mur-demo-tour { position: absolute; inset: 0; pointer-events: none; }
.mur-demo-tour.is-positioning :is(.mur-demo-shade,.mur-demo-tour-card) { visibility: hidden; }
.mur-demo-shade { position: fixed; z-index: 10000; background: rgba(15,23,42,.72); pointer-events: auto; }
.mur-demo-tour-card { position: fixed; z-index: 10010; bottom: 16px; width: min(410px,calc(100vw - 24px)); padding: 19px 20px 16px; border: 1px solid var(--border,#d5d8df); border-radius: 9px; background: var(--surface,#fff); box-shadow: 0 18px 52px rgba(15,23,42,.35); color: var(--text,#111827); pointer-events: auto; }
.mur-demo-tour-card[data-placement="top"] { top: 72px; bottom: auto; }
.mur-demo-tour-card[data-placement="bottom"] { top: auto; bottom: 16px; }
.mur-demo-tour-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted,#5f6470); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mur-demo-tour-card h2 { margin: 8px 0 7px; color: var(--heading,#111b46); font-size: 20px; line-height: 1.25; }
.mur-demo-tour-card p { margin: 0; font-size: 13px; line-height: 1.55; }
.mur-demo-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--border,#d5d8df); }
.mur-demo-tour-actions > span { display: flex; gap: 7px; }
.mur-demo-tour-actions button { min-height: 35px; padding: 7px 11px; border: 1px solid color-mix(in srgb,var(--heading,#1e2751) 48%,var(--border,#d5d8df)); border-radius: 5px; background: var(--surface,#fff); color: var(--heading,#1e2751); font: inherit; font-weight: 700; cursor: pointer; }
.mur-demo-tour-actions button:disabled { opacity: .45; cursor: default; }
.mur-demo-tour-actions .mur-demo-tour-primary { border-color: #1e2751; background: #1e2751 url('../img/background2.jpg') center/cover no-repeat; color: #fff; }
.mur-demo-tour-highlight { position: relative; z-index: 10001 !important; border-radius: 5px; outline: 3px solid #70b9f2 !important; outline-offset: 4px; box-shadow: 0 0 0 7px rgba(112,185,242,.22) !important; }
dialog.mur-demo-tour-highlight { position: fixed; }
.mur-demo-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.mur-demo-tour-active { overflow-x: hidden; }
@media (max-width:700px) {
    .mur-demo-banner { top: 6px; gap: 8px; padding: 8px; }
    .mur-demo-banner-copy span { display: block; font-size: 10px; }
    .mur-demo-banner-replay { display: none; }
    .mur-demo-banner-actions { margin-left: auto; }
    .mur-demo-tour-card { right: 12px !important; left: 12px !important; width: auto; padding: 16px; }
    .mur-demo-tour-card[data-placement="top"] { top: 62px; }
    .mur-demo-tour-actions { align-items: stretch; flex-direction: column-reverse; }
    .mur-demo-tour-actions > span { display: grid; grid-template-columns: 1fr 1fr; }
    .mur-demo-tour-actions button { min-height: 42px; }
}
@media (prefers-reduced-motion:no-preference) { .mur-demo-tour-highlight { transition: outline-color .15s ease; } }
@media (forced-colors:active) { .mur-demo-shade { background: rgba(0,0,0,.7); } .mur-demo-tour-highlight { outline: 4px solid Highlight !important; } }
