:root {
    --ubx-bg: #08090d;
    --ubx-surface: rgba(19, 22, 30, 0.82);
    --ubx-surface-strong: rgba(31, 34, 45, 0.94);
    --ubx-border: rgba(255, 255, 255, 0.1);
    --ubx-text: #f2eee8;
    --ubx-muted: #aaa7a2;
    --ubx-primary: #8fd6a3;
    --ubx-primary-rgb: 143, 214, 163;
    --ubx-accent: #8aa4ff;
    --ubx-copper: #d77a4a;
    --ubx-rust: #9f5136;
    --ubx-steel: #7f8da3;
    --ubx-kind-place: var(--ubx-primary);
    --ubx-kind-place-rgb: var(--ubx-primary-rgb);
    --ubx-kind-region: #8aa4ff;
    --ubx-kind-region-rgb: 138, 164, 255;
    --ubx-kind-category: #c084fc;
    --ubx-kind-category-rgb: 192, 132, 252;
    --ubx-kind-list: #5eead4;
    --ubx-kind-list-rgb: 94, 234, 212;
    --ubx-kind-postal: #f59e0b;
    --ubx-kind-postal-rgb: 245, 158, 11;
    --ubx-kind-person: #f472b6;
    --ubx-kind-person-rgb: 244, 114, 182;
    --ubx-kind-chat: #86efac;
    --ubx-kind-chat-rgb: 134, 239, 172;
    --ubx-kind-premium: #ffb86b;
    --ubx-kind-premium-rgb: 255, 184, 107;
    --ubx-ambient-secondary-rgb: 138, 164, 255;
    --ubx-sticky-top: 6.25rem;
    --ubx-motion-smooth: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --bs-primary: #8fd6a3;
    --bs-primary-rgb: 143, 214, 163;
}

[data-bs-theme="light"] {
    --ubx-bg: #f4f0e8;
    --ubx-surface: rgba(255, 253, 248, 0.88);
    --ubx-surface-strong: rgba(255, 255, 252, 0.98);
    --ubx-border: rgba(48, 67, 54, 0.15);
    --ubx-text: #172019;
    --ubx-muted: #647067;
    --ubx-primary: #2b7f53;
    --ubx-primary-rgb: 43, 127, 83;
    --ubx-accent: #3f6fc2;
    --ubx-copper: #9b653f;
    --ubx-rust: #32734f;
    --ubx-steel: #66758a;
    --ubx-kind-place: var(--ubx-primary);
    --ubx-kind-place-rgb: var(--ubx-primary-rgb);
    --ubx-kind-region: #4964c8;
    --ubx-kind-region-rgb: 73, 100, 200;
    --ubx-kind-category: #8b4eca;
    --ubx-kind-category-rgb: 139, 78, 202;
    --ubx-kind-list: #178f82;
    --ubx-kind-list-rgb: 23, 143, 130;
    --ubx-kind-postal: #b45309;
    --ubx-kind-postal-rgb: 180, 83, 9;
    --ubx-kind-person: #b6427a;
    --ubx-kind-person-rgb: 182, 66, 122;
    --ubx-kind-chat: #3f8f55;
    --ubx-kind-chat-rgb: 63, 143, 85;
    --ubx-kind-premium: #b36b2f;
    --ubx-kind-premium-rgb: 179, 107, 47;
    --ubx-ambient-secondary-rgb: 73, 100, 200;
    --ubx-sticky-top: 6.25rem;
    --ubx-motion-smooth: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --bs-primary: #2f7d55;
    --bs-primary-rgb: 47, 125, 85;
}

[data-ubx-theme="moss"] {
    --ubx-bg: #07110d;
    --ubx-surface: rgba(15, 27, 22, 0.84);
    --ubx-surface-strong: rgba(23, 42, 34, 0.95);
    --ubx-border: rgba(171, 255, 206, 0.13);
    --ubx-text: #effbf3;
    --ubx-muted: #a4bbae;
    --ubx-primary: #74d99f;
    --ubx-primary-rgb: 116, 217, 159;
    --ubx-accent: #5eead4;
    --ubx-ambient-secondary-rgb: 94, 234, 212;
    --bs-primary: #74d99f;
    --bs-primary-rgb: 116, 217, 159;
}

[data-bs-theme="light"][data-ubx-theme="moss"] {
    --ubx-bg: #edf7ef;
    --ubx-surface: rgba(250, 255, 249, 0.86);
    --ubx-surface-strong: rgba(255, 255, 252, 0.97);
    --ubx-border: rgba(35, 92, 57, 0.17);
    --ubx-text: #132018;
    --ubx-muted: #5b6c60;
    --ubx-primary: #2f8f58;
    --ubx-primary-rgb: 47, 143, 88;
    --ubx-accent: #168f82;
    --ubx-ambient-secondary-rgb: 22, 143, 130;
    --bs-primary: #2f8f58;
    --bs-primary-rgb: 47, 143, 88;
}

[data-ubx-theme="ember"] {
    --ubx-bg: #130b08;
    --ubx-surface: rgba(35, 20, 14, 0.84);
    --ubx-surface-strong: rgba(54, 30, 19, 0.95);
    --ubx-border: rgba(255, 183, 107, 0.16);
    --ubx-text: #fff5ec;
    --ubx-muted: #c4a997;
    --ubx-primary: #ff9f5a;
    --ubx-primary-rgb: 255, 159, 90;
    --ubx-accent: #f472b6;
    --ubx-ambient-secondary-rgb: 244, 114, 182;
    --bs-primary: #ff9f5a;
    --bs-primary-rgb: 255, 159, 90;
}

[data-bs-theme="light"][data-ubx-theme="ember"] {
    --ubx-bg: #fff1e4;
    --ubx-surface: rgba(255, 250, 245, 0.86);
    --ubx-surface-strong: rgba(255, 252, 248, 0.97);
    --ubx-border: rgba(153, 77, 38, 0.17);
    --ubx-text: #24150e;
    --ubx-muted: #765e50;
    --ubx-primary: #c35f2e;
    --ubx-primary-rgb: 195, 95, 46;
    --ubx-accent: #b6427a;
    --ubx-ambient-secondary-rgb: 182, 66, 122;
    --bs-primary: #c35f2e;
    --bs-primary-rgb: 195, 95, 46;
}

[data-ubx-theme="violet"] {
    --ubx-bg: #0d0a18;
    --ubx-surface: rgba(25, 18, 43, 0.84);
    --ubx-surface-strong: rgba(40, 29, 66, 0.95);
    --ubx-border: rgba(183, 148, 246, 0.17);
    --ubx-text: #f7f1ff;
    --ubx-muted: #b7aacd;
    --ubx-primary: #b794f6;
    --ubx-primary-rgb: 183, 148, 246;
    --ubx-accent: #22d3ee;
    --ubx-ambient-secondary-rgb: 34, 211, 238;
    --bs-primary: #b794f6;
    --bs-primary-rgb: 183, 148, 246;
}

[data-bs-theme="light"][data-ubx-theme="violet"] {
    --ubx-bg: #f5efff;
    --ubx-surface: rgba(253, 249, 255, 0.86);
    --ubx-surface-strong: rgba(255, 252, 255, 0.97);
    --ubx-border: rgba(101, 69, 158, 0.18);
    --ubx-text: #20162f;
    --ubx-muted: #695c7c;
    --ubx-primary: #7451c7;
    --ubx-primary-rgb: 116, 81, 199;
    --ubx-accent: #087990;
    --ubx-ambient-secondary-rgb: 8, 121, 144;
    --bs-primary: #7451c7;
    --bs-primary-rgb: 116, 81, 199;
}

[data-ubx-theme="steel"] {
    --ubx-bg: #071019;
    --ubx-surface: rgba(14, 25, 37, 0.84);
    --ubx-surface-strong: rgba(21, 39, 57, 0.95);
    --ubx-border: rgba(125, 211, 252, 0.16);
    --ubx-text: #edf8ff;
    --ubx-muted: #9fb5c4;
    --ubx-primary: #7dd3fc;
    --ubx-primary-rgb: 125, 211, 252;
    --ubx-accent: #a3e635;
    --ubx-ambient-secondary-rgb: 163, 230, 53;
    --bs-primary: #7dd3fc;
    --bs-primary-rgb: 125, 211, 252;
}

[data-bs-theme="light"][data-ubx-theme="steel"] {
    --ubx-bg: #eef7fb;
    --ubx-surface: rgba(249, 253, 255, 0.86);
    --ubx-surface-strong: rgba(252, 254, 255, 0.97);
    --ubx-border: rgba(33, 91, 119, 0.17);
    --ubx-text: #0f1d26;
    --ubx-muted: #566a76;
    --ubx-primary: #1f7ea8;
    --ubx-primary-rgb: 31, 126, 168;
    --ubx-accent: #648f12;
    --ubx-ambient-secondary-rgb: 100, 143, 18;
    --bs-primary: #1f7ea8;
    --bs-primary-rgb: 31, 126, 168;
}

[data-ubx-theme="nocturne"] {
    --ubx-bg: #050816;
    --ubx-surface: rgba(11, 18, 36, 0.86);
    --ubx-surface-strong: rgba(17, 32, 62, 0.96);
    --ubx-border: rgba(96, 165, 250, 0.18);
    --ubx-text: #edf5ff;
    --ubx-muted: #a8b8cf;
    --ubx-primary: #60a5fa;
    --ubx-primary-rgb: 96, 165, 250;
    --ubx-accent: #c084fc;
    --ubx-ambient-secondary-rgb: 192, 132, 252;
    --bs-primary: #60a5fa;
    --bs-primary-rgb: 96, 165, 250;
}

[data-bs-theme="light"][data-ubx-theme="nocturne"] {
    --ubx-bg: #edf4ff;
    --ubx-surface: rgba(248, 251, 255, 0.87);
    --ubx-surface-strong: rgba(252, 254, 255, 0.98);
    --ubx-border: rgba(45, 88, 154, 0.18);
    --ubx-text: #101827;
    --ubx-muted: #56657a;
    --ubx-primary: #2f6fbc;
    --ubx-primary-rgb: 47, 111, 188;
    --ubx-accent: #7c3bc7;
    --ubx-ambient-secondary-rgb: 124, 59, 199;
    --bs-primary: #2f6fbc;
    --bs-primary-rgb: 47, 111, 188;
}

[data-ubx-theme="signal"] {
    --ubx-bg: #16070b;
    --ubx-surface: rgba(36, 16, 22, 0.86);
    --ubx-surface-strong: rgba(62, 23, 32, 0.96);
    --ubx-border: rgba(251, 113, 133, 0.19);
    --ubx-text: #fff1f3;
    --ubx-muted: #d5a7ae;
    --ubx-primary: #fb7185;
    --ubx-primary-rgb: 251, 113, 133;
    --ubx-accent: #38bdf8;
    --ubx-ambient-secondary-rgb: 56, 189, 248;
    --bs-primary: #fb7185;
    --bs-primary-rgb: 251, 113, 133;
}

[data-bs-theme="light"][data-ubx-theme="signal"] {
    --ubx-bg: #fff0f2;
    --ubx-surface: rgba(255, 248, 249, 0.87);
    --ubx-surface-strong: rgba(255, 252, 252, 0.98);
    --ubx-border: rgba(155, 50, 66, 0.18);
    --ubx-text: #261014;
    --ubx-muted: #7a5860;
    --ubx-primary: #c43d52;
    --ubx-primary-rgb: 196, 61, 82;
    --ubx-accent: #1478a8;
    --ubx-ambient-secondary-rgb: 20, 120, 168;
    --bs-primary: #c43d52;
    --bs-primary-rgb: 196, 61, 82;
}

[data-ubx-theme="petrol"] {
    --ubx-bg: #04110f;
    --ubx-surface: rgba(9, 33, 31, 0.86);
    --ubx-surface-strong: rgba(13, 54, 50, 0.96);
    --ubx-border: rgba(45, 212, 191, 0.17);
    --ubx-text: #eefdfb;
    --ubx-muted: #9cc9c4;
    --ubx-primary: #2dd4bf;
    --ubx-primary-rgb: 45, 212, 191;
    --ubx-accent: #a3e635;
    --ubx-ambient-secondary-rgb: 163, 230, 53;
    --bs-primary: #2dd4bf;
    --bs-primary-rgb: 45, 212, 191;
}

[data-bs-theme="light"][data-ubx-theme="petrol"] {
    --ubx-bg: #eafaf7;
    --ubx-surface: rgba(248, 255, 253, 0.87);
    --ubx-surface-strong: rgba(252, 255, 254, 0.98);
    --ubx-border: rgba(24, 103, 95, 0.18);
    --ubx-text: #0c211f;
    --ubx-muted: #54726d;
    --ubx-primary: #13887c;
    --ubx-primary-rgb: 19, 136, 124;
    --ubx-accent: #5d8e13;
    --ubx-ambient-secondary-rgb: 93, 142, 19;
    --bs-primary: #13887c;
    --bs-primary-rgb: 19, 136, 124;
}

[data-ubx-theme="sodium"] {
    --ubx-bg: #160c04;
    --ubx-surface: rgba(37, 21, 9, 0.86);
    --ubx-surface-strong: rgba(64, 35, 12, 0.96);
    --ubx-border: rgba(249, 115, 22, 0.18);
    --ubx-text: #fff4ea;
    --ubx-muted: #d5b89d;
    --ubx-primary: #f97316;
    --ubx-primary-rgb: 249, 115, 22;
    --ubx-accent: #22d3ee;
    --ubx-ambient-secondary-rgb: 34, 211, 238;
    --bs-primary: #f97316;
    --bs-primary-rgb: 249, 115, 22;
}

[data-bs-theme="light"][data-ubx-theme="sodium"] {
    --ubx-bg: #fff3e6;
    --ubx-surface: rgba(255, 250, 244, 0.87);
    --ubx-surface-strong: rgba(255, 253, 249, 0.98);
    --ubx-border: rgba(156, 80, 23, 0.18);
    --ubx-text: #27160b;
    --ubx-muted: #795f48;
    --ubx-primary: #c25a11;
    --ubx-primary-rgb: 194, 90, 17;
    --ubx-accent: #087990;
    --ubx-ambient-secondary-rgb: 8, 121, 144;
    --bs-primary: #c25a11;
    --bs-primary-rgb: 194, 90, 17;
}

html {
    scroll-behavior: smooth;
}

.ubx-sticky-landscape {
    position: static;
}

@media (min-width: 992px) and (orientation: landscape) {
    .ubx-sticky-landscape {
        position: sticky;
        top: var(--ubx-sticky-top);
        align-self: flex-start;
        z-index: 5;
    }

    .ubx-sticky-landscape.ubx-ad {
        margin-top: 0 !important;
    }
}

.ubx-skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.7rem 1rem;
    color: #160d08;
    background: var(--ubx-primary);
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.ubx-skip-link:focus {
    transform: translateY(0);
}

.ubx-body {
    min-height: 100vh;
    color: var(--ubx-text);
    background:
        radial-gradient(circle at top left, rgba(var(--ubx-primary-rgb), 0.14), transparent 28rem),
        radial-gradient(circle at 85% 20%, rgba(var(--ubx-ambient-secondary-rgb), 0.14), transparent 24rem),
        linear-gradient(180deg, #11121a 0%, var(--ubx-bg) 48%, #040508 100%);
}

[data-bs-theme="light"] .ubx-body {
    background:
        radial-gradient(circle at top left, rgba(var(--ubx-primary-rgb), 0.16), transparent 31rem),
        radial-gradient(circle at 86% 16%, rgba(var(--ubx-ambient-secondary-rgb), 0.1), transparent 27rem),
        radial-gradient(circle at 18% 94%, rgba(var(--ubx-kind-premium-rgb), 0.07), transparent 25rem),
        linear-gradient(180deg, #fffdf8 0%, var(--ubx-bg) 52%, #e8e0d3 100%);
}

.text-secondary {
    color: var(--ubx-muted) !important;
}

.fw-black {
    font-weight: 900;
    letter-spacing: -0.055em;
}

.btn-primary {
    --bs-btn-color: #07140d;
    --bs-btn-bg: var(--ubx-primary);
    --bs-btn-border-color: var(--ubx-primary);
    --bs-btn-hover-color: #07140d;
    --bs-btn-hover-bg: #a8e8b7;
    --bs-btn-hover-border-color: #a8e8b7;
    --bs-btn-active-color: #07140d;
    --bs-btn-active-bg: #75c989;
    --bs-btn-active-border-color: #75c989;
    box-shadow: 0 0 16px rgba(var(--ubx-primary-rgb), 0.12);
}

.btn-outline-light {
    --bs-btn-border-color: rgba(255, 255, 255, 0.22);
}

.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    --bs-btn-color: #160d08;
    --bs-btn-bg: var(--ubx-kind-premium);
    --bs-btn-border-color: var(--ubx-kind-premium);
    --bs-btn-hover-color: #160d08;
    --bs-btn-hover-bg: #ffc98f;
    --bs-btn-hover-border-color: #ffc98f;
    --bs-btn-active-color: #160d08;
    --bs-btn-active-bg: #e6a35b;
    --bs-btn-active-border-color: #e6a35b;
    box-shadow:
        0 0 0 0.08rem rgba(var(--ubx-kind-premium-rgb), 0.18),
        0 0 22px rgba(var(--ubx-kind-premium-rgb), 0.14);
}

.btn-outline-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    --bs-btn-color: var(--ubx-text);
    --bs-btn-border-color: rgba(var(--ubx-kind-premium-rgb), 0.42);
    --bs-btn-hover-color: #160d08;
    --bs-btn-hover-bg: var(--ubx-kind-premium);
    --bs-btn-hover-border-color: var(--ubx-kind-premium);
    --bs-btn-active-color: #160d08;
    --bs-btn-active-bg: var(--ubx-kind-premium);
    --bs-btn-active-border-color: var(--ubx-kind-premium);
}

[data-bs-theme="light"] .btn-outline-light {
    --bs-btn-color: var(--ubx-text);
    --bs-btn-bg: rgba(255, 255, 255, 0.42);
    --bs-btn-border-color: rgba(var(--ubx-primary-rgb), 0.24);
    --bs-btn-hover-color: #fffdf8;
    --bs-btn-hover-bg: var(--ubx-primary);
    --bs-btn-hover-border-color: var(--ubx-primary);
    --bs-btn-active-color: #fffdf8;
    --bs-btn-active-bg: #236a45;
    --bs-btn-active-border-color: #236a45;
}

[data-bs-theme="light"] .btn-premium {
    --bs-btn-color: #fffaf3;
    --bs-btn-hover-color: #fffaf3;
    --bs-btn-hover-bg: #a85d35;
    --bs-btn-hover-border-color: #a85d35;
    --bs-btn-active-color: #fffaf3;
    --bs-btn-active-bg: #85442d;
    --bs-btn-active-border-color: #85442d;
    box-shadow:
        0 0 0 0.08rem rgba(var(--ubx-kind-premium-rgb), 0.12),
        0 0 18px rgba(var(--ubx-kind-premium-rgb), 0.1);
}

[data-bs-theme="light"] .btn-outline-premium {
    --bs-btn-hover-color: #fffaf3;
    --bs-btn-active-color: #fffaf3;
}

[data-bs-theme="light"] .btn-primary {
    --bs-btn-color: #fffdf8;
    --bs-btn-hover-color: #fffdf8;
    --bs-btn-hover-bg: #256d48;
    --bs-btn-hover-border-color: #256d48;
    --bs-btn-active-color: #fffdf8;
    --bs-btn-active-bg: #1f5d3d;
    --bs-btn-active-border-color: #1f5d3d;
}

.btn:focus-visible,
.nav-link:focus-visible,
.navbar-brand:focus-visible,
.ubx-breadcrumb a:focus-visible,
.ubx-place-card a:focus-visible,
.ubx-media-card:focus-visible,
.ubx-region-card:focus-visible,
.ubx-map-dot:focus-visible,
.ubx-footer a:focus-visible {
    outline: 3px solid rgba(var(--ubx-primary-rgb), 0.85);
    outline-offset: 4px;
    box-shadow: 0 0 0 0.25rem rgba(var(--ubx-primary-rgb), 0.18);
}

.ubx-navbar {
    --bs-navbar-color: rgba(242, 238, 232, 0.78);
    --bs-navbar-hover-color: var(--ubx-primary);
    --bs-navbar-active-color: var(--ubx-primary);
    --bs-navbar-brand-color: var(--ubx-text);
    --bs-navbar-brand-hover-color: var(--ubx-primary);
    --bs-navbar-toggler-border-color: var(--ubx-border);
    background: rgba(8, 9, 13, 0.74);
    border-bottom: 1px solid var(--ubx-border);
    backdrop-filter: blur(22px);
}

.ubx-navbar > .container {
    position: relative;
}

[data-bs-theme="light"] .ubx-navbar {
    --bs-navbar-color: rgba(23, 32, 25, 0.72);
    --bs-navbar-hover-color: var(--ubx-primary);
    --bs-navbar-active-color: var(--ubx-primary);
    --bs-navbar-brand-color: var(--ubx-text);
    --bs-navbar-brand-hover-color: var(--ubx-primary);
    background: rgba(255, 253, 248, 0.86);
    box-shadow: 0 0.85rem 2.2rem rgba(48, 67, 54, 0.08);
}

.ubx-brand-mark {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: #160d08;
    background: var(--ubx-primary);
    border-radius: 0.8rem;
    font-weight: 900;
}

.ubx-brand {
    min-width: max-content;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.ubx-brand-mark-logo {
    overflow: hidden;
    background:
        radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.22), transparent 38%),
        rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0.8rem 2.2rem rgba(0, 0, 0, 0.22);
}

.ubx-brand-mark-logo img {
    width: 92%;
    height: 92%;
    object-fit: contain;
    filter: drop-shadow(0 0.25rem 0.55rem rgba(0, 0, 0, 0.28));
}

.ubx-brand-text {
    line-height: 1;
}

.ubx-brand-icon,
.ubx-nav-icon,
.ubx-btn-icon,
.ubx-badge-icon,
.ubx-inline-icon,
.ubx-link-icon,
.ubx-feature-icon,
.ubx-footer-icon,
.ubx-theme-icon,
.ubx-phone-icon,
.ubx-card-stat-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.145em;
}

.ubx-brand-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.ubx-nav-icon,
.ubx-btn-icon,
.ubx-badge-icon,
.ubx-inline-icon,
.ubx-link-icon,
.ubx-footer-icon,
.ubx-phone-icon,
.ubx-card-stat-icon {
    width: 1em;
    height: 1em;
}

.ubx-feature-icon {
    width: 1.3rem;
    height: 1.3rem;
}

.nav-link,
.btn,
.badge,
.ubx-footer-link,
.ubx-card-stat {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
}

.btn,
.badge {
    justify-content: center;
}

.ubx-footer-link {
    color: inherit;
    text-decoration: none;
}

.ubx-footer-link:hover {
    color: var(--ubx-primary);
}

.ubx-nav-premium {
    color: var(--ubx-kind-premium) !important;
    font-weight: 800;
}

.ubx-nav-auth {
    align-items: center;
}

.ubx-nav-auth .btn {
    white-space: nowrap;
}

.ubx-nav-live-explore {
    color: #86efac !important;
    font-weight: 900;
    padding-inline: 0.75rem !important;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.18);
    border-radius: 999px;
}

.ubx-nav-live-explore:hover,
.ubx-nav-live-explore:focus {
    color: #bbf7d0 !important;
    background: rgba(74, 222, 128, 0.15);
    box-shadow: 0 0.8rem 1.6rem rgba(74, 222, 128, 0.08);
}

.ubx-live-mini-badge,
.ubx-live-status-pill {
    gap: 0.35rem;
    align-items: center;
}

.ubx-live-mini-badge .ubx-ops-live-dot,
.ubx-live-status-pill .ubx-ops-live-dot,
.ubx-nav-live-explore .ubx-ops-live-dot {
    width: 0.48rem;
    height: 0.48rem;
}

.ubx-live-status-pill.text-bg-success .ubx-ops-live-dot,
.ubx-live-mini-badge.text-bg-success .ubx-ops-live-dot {
    background: #f0fdf4;
    box-shadow: 0 0 0 0.2rem rgba(240, 253, 244, 0.2);
}

.ubx-nav-premium::after,
.ubx-premium-mark::after {
    display: block;
    width: 1.5rem;
    height: 0.12rem;
    margin-top: 0.15rem;
    content: "";
    background: linear-gradient(90deg, rgba(var(--ubx-kind-premium-rgb), 0.95), transparent);
    border-radius: 999px;
}

.ubx-premium-mark {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--ubx-kind-premium);
    font-weight: 900;
    line-height: 1;
}

.ubx-premium-mark-inline {
    transform: translateY(0.04rem);
}

.ubx-premium-mark-inline::after {
    width: 1.25rem;
    height: 0.1rem;
}

.ubx-supporters-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.22);
    isolation: isolate;
}

.ubx-supporters-card::before {
    position: absolute;
    inset: -38% -18% auto auto;
    z-index: -1;
    width: 18rem;
    height: 18rem;
    content: "";
    background:
        radial-gradient(circle, rgba(var(--ubx-kind-premium-rgb), 0.2), transparent 62%);
    filter: blur(0.4rem);
    opacity: 0.78;
    pointer-events: none;
}

.ubx-supporters-list {
    display: grid;
    gap: 0.65rem;
}

.ubx-supporter-row,
.ubx-supporter-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.ubx-supporter-row {
    position: relative;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.14);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.045);
    transition:
        border-color var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        transform var(--ubx-motion-smooth);
}

.ubx-supporter-row:hover {
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.34);
    box-shadow: 0 0.95rem 2.2rem rgba(var(--ubx-kind-premium-rgb), 0.12);
    transform: translateY(-0.08rem);
}

.ubx-supporter-rank {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ubx-kind-premium);
    background: rgba(var(--ubx-kind-premium-rgb), 0.12);
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.2);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.ubx-supporter-copy,
.ubx-supporter-mini span {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.ubx-supporter-copy strong,
.ubx-supporter-mini strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-supporter-copy small,
.ubx-supporter-mini small {
    color: var(--ubx-muted);
}

.ubx-supporters-newest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.ubx-supporter-mini {
    min-width: 0;
    padding: 0.65rem;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ubx-supporter-mini:hover {
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.22);
    box-shadow: 0 0.8rem 1.8rem rgba(var(--ubx-kind-premium-rgb), 0.08);
}

.ubx-supporters-card-compact .ubx-supporter-row {
    padding: 0.52rem 0.62rem;
}

.ubx-supporters-card-compact .ubx-supporters-newest-grid {
    grid-template-columns: 1fr;
}

[data-bs-theme="light"] .ubx-supporter-row,
[data-bs-theme="light"] .ubx-supporter-mini {
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.16);
}

.ubx-link-icon {
    opacity: 0.78;
    transition:
        opacity var(--ubx-motion-smooth),
        transform var(--ubx-motion-smooth);
}

a:hover .ubx-link-icon {
    opacity: 1;
    transform: translateX(0.15rem);
}

.ubx-theme-switcher {
    display: flex;
    align-items: center;
}

.ubx-theme-toggle {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--ubx-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-theme-toggle::after {
    margin-left: 0.05rem;
}

.ubx-theme-icon {
    color: var(--ubx-primary);
    filter: drop-shadow(0 0 0.22rem rgba(var(--ubx-primary-rgb), 0.22));
}

.ubx-theme-menu {
    --bs-dropdown-min-width: 9.5rem;
}

.ubx-theme-menu .dropdown-header {
    color: var(--ubx-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-theme-style-option {
    width: 100%;
    gap: 0.75rem;
    padding: 0.65rem 0.72rem;
    text-align: left;
}

.ubx-theme-style-option.is-locked {
    opacity: 0.74;
}

.ubx-theme-style-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    width: 100%;
}

.ubx-theme-style-meta strong,
.ubx-theme-style-meta small {
    display: block;
}

.ubx-theme-style-meta small {
    margin-top: 0.1rem;
    color: var(--ubx-muted);
    font-weight: 600;
    white-space: normal;
}

.ubx-theme-style-swatch {
    width: 1.55rem;
    height: 1.55rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.9), transparent 0.25rem),
        linear-gradient(135deg, var(--ubx-style-swatch), rgba(var(--ubx-style-swatch-rgb), 0.38));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 0 1.1rem rgba(var(--ubx-style-swatch-rgb), 0.28);
}

.ubx-addon-shop {
    position: relative;
}

.ubx-addon-sidebar {
    overflow: hidden;
}

.ubx-addon-sidebar::after {
    position: absolute;
    inset: auto -18% -24% 28%;
    width: 16rem;
    height: 16rem;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-primary-rgb), 0.18), transparent 68%);
    filter: blur(0.5rem);
}

.ubx-addon-balance {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.1rem 0.8rem;
    align-items: end;
    padding: 1rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.22);
    border-radius: 1.25rem;
    background: rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-addon-balance strong {
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 0.9;
}

.ubx-addon-wallet {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.05rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.26);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 12% 16%, rgba(var(--ubx-primary-rgb), 0.26), transparent 44%),
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.13), rgba(var(--ubx-kind-premium-rgb), 0.08));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1rem 2rem rgba(0, 0, 0, 0.14);
}

.ubx-addon-wallet::after {
    position: absolute;
    inset: 0.65rem;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
}

.ubx-addon-wallet-orb {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    place-items: center;
    color: #1d1608;
    font-size: 1.3rem;
    font-weight: 900;
    border-radius: 1rem;
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 0.46rem),
        linear-gradient(135deg, var(--ubx-primary), var(--ubx-kind-premium));
    box-shadow:
        0 0.85rem 1.7rem rgba(var(--ubx-primary-rgb), 0.2),
        0 0 1.1rem rgba(var(--ubx-kind-premium-rgb), 0.18);
}

.ubx-addon-wallet-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}

.ubx-addon-wallet-value strong {
    color: var(--ubx-text);
    font-size: clamp(2.35rem, 5vw, 3.9rem);
    line-height: 0.88;
    letter-spacing: -0.055em;
}

.ubx-addon-wallet-value span {
    color: var(--ubx-muted);
    font-size: 0.92rem;
    font-weight: 800;
}

.ubx-addon-credit-button {
    gap: 0.45rem;
}

.ubx-addon-credit-button span {
    color: var(--ubx-kind-premium);
    filter: drop-shadow(0 0 0.35rem rgba(var(--ubx-kind-premium-rgb), 0.26));
}

.ubx-addon-price {
    color: #160d08;
    background: var(--ubx-primary);
    box-shadow: 0 0 1.25rem rgba(var(--ubx-primary-rgb), 0.24);
}

.ubx-addon-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--addon-accent-rgb), 0.2);
    border-radius: 1.5rem;
    background:
        linear-gradient(145deg, rgba(var(--addon-accent-rgb), 0.1), transparent 42%),
        var(--ubx-surface);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.18);
    transition:
        transform var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth);
}

.ubx-addon-card:hover {
    transform: translateY(-0.08rem);
    border-color: rgba(var(--addon-accent-rgb), 0.28);
    box-shadow:
        0 1rem 2.25rem rgba(0, 0, 0, 0.2),
        0 0 0.85rem rgba(var(--addon-accent-rgb), 0.08);
}

.ubx-addon-card.is-active {
    border-color: rgba(var(--addon-accent-rgb), 0.52);
}

.ubx-addon-theme-preview {
    position: relative;
    min-height: 9.25rem;
    padding: 1.1rem;
    background:
        radial-gradient(circle at 78% 22%, rgba(var(--addon-accent-rgb), 0.48), transparent 0.35rem),
        radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.16), transparent 0.18rem),
        linear-gradient(135deg, var(--addon-preview-from), var(--addon-preview-to));
}

.ubx-addon-theme-window {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    left: 1.1rem;
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--addon-preview-surface), transparent 12%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 0 2rem rgba(var(--addon-accent-rgb), 0.2);
}

.ubx-addon-theme-window span {
    display: block;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.ubx-addon-theme-window span:first-child {
    width: 48%;
    background: var(--addon-accent);
}

.ubx-addon-theme-window span:nth-child(2) {
    width: 78%;
}

.ubx-addon-theme-window span:nth-child(3) {
    width: 62%;
}

.ubx-addon-theme-glow {
    position: absolute;
    right: 18%;
    bottom: -18%;
    width: 9rem;
    height: 9rem;
    border-radius: 999px;
    background: rgba(var(--addon-accent-rgb), 0.28);
    filter: blur(2.2rem);
}

[data-bs-theme="light"] .ubx-addon-card {
    box-shadow: 0 1rem 2rem rgba(45, 35, 24, 0.12);
}

.ubx-addon-feature-grid {
    align-items: stretch;
}

.ubx-addon-feature-card,
.ubx-theme-card,
.ubx-credit-package-card,
.ubx-credit-feature-card,
.ubx-credit-reward-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.18);
    border-radius: 1.45rem;
    background:
        linear-gradient(145deg, rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.08), transparent 44%),
        var(--ubx-surface);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.18);
    transition:
        transform var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        filter var(--ubx-motion-smooth);
}

.ubx-addon-feature-card,
.ubx-credit-feature-card {
    padding: 1.35rem;
}

.ubx-addon-feature-card::after {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 4.8rem;
    height: 4.8rem;
    content: "";
    pointer-events: none;
    border-radius: 999px;
    background: rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.12);
    filter: blur(1.65rem);
    opacity: 0.74;
}

.ubx-addon-feature-card.is-featured {
    border-color: rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.36);
    box-shadow:
        0 1.15rem 2.6rem rgba(0, 0, 0, 0.2),
        0 0 0 0.08rem rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.12),
        0 0 1.2rem rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.08);
}

.ubx-addon-feature-card:hover,
.ubx-theme-card:hover,
.ubx-credit-package-card:hover,
.ubx-credit-feature-card:hover,
.ubx-credit-reward-card:hover {
    transform: translateY(-0.08rem);
    border-color: rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.3);
    box-shadow:
        0 1.1rem 2.4rem rgba(0, 0, 0, 0.2),
        0 0 0.9rem rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.08);
    filter: saturate(1.015);
}

.ubx-addon-feature-icon {
    display: inline-grid;
    width: 2.65rem;
    height: 2.65rem;
    margin-bottom: 1rem;
    place-items: center;
    color: var(--addon-accent, var(--ubx-primary));
    border: 1px solid rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.22);
    border-radius: 0.9rem;
    background: rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.12);
}

.ubx-addon-feature-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.ubx-addon-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    padding-top: 1rem;
}

.ubx-addon-benefit-row {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    color: var(--ubx-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.ubx-addon-benefit-row span {
    display: inline-grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    color: var(--addon-accent, var(--ubx-primary));
    border-radius: 999px;
    background: rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.12);
}

.ubx-addon-benefit-row svg {
    width: 0.78rem;
    height: 0.78rem;
}

.ubx-addon-price-chip,
.ubx-addon-muted-chip {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    min-height: 2.1rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.ubx-addon-price-chip {
    color: #1d1608;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.8), transparent 0.42rem),
        linear-gradient(135deg, var(--ubx-primary), var(--ubx-kind-premium));
    box-shadow:
        0 0.65rem 1.35rem rgba(var(--ubx-primary-rgb), 0.16),
        0 0 0.85rem rgba(var(--ubx-kind-premium-rgb), 0.12);
}

.ubx-addon-muted-chip {
    color: var(--ubx-text);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.055);
}

.ubx-theme-hero,
.ubx-credit-hero,
.ubx-credit-sidebar {
    position: relative;
    overflow: hidden;
}

.ubx-theme-hero::after,
.ubx-credit-sidebar::after {
    position: absolute;
    inset: auto -12% -35% auto;
    width: 18rem;
    height: 18rem;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-primary-rgb), 0.16), transparent 68%);
    filter: blur(0.4rem);
}

.ubx-theme-balance,
.ubx-credit-balance {
    display: grid;
    gap: 0.05rem;
    padding: 1rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.22);
    border-radius: 1.2rem;
    background: rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-theme-balance strong,
.ubx-credit-balance strong {
    color: var(--ubx-text);
    font-size: clamp(2.1rem, 4vw, 3.25rem);
    line-height: 0.92;
}

.ubx-theme-card.is-active {
    border-color: rgba(var(--addon-accent-rgb), 0.48);
    box-shadow:
        0 1.2rem 2.5rem rgba(0, 0, 0, 0.22),
        0 0 0 0.12rem rgba(var(--addon-accent-rgb), 0.12);
}

.ubx-theme-card-preview {
    min-height: 10.5rem;
}

.ubx-theme-preview-orb {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), transparent 0.35rem),
        var(--addon-accent);
    box-shadow: 0 0 1.2rem rgba(var(--addon-accent-rgb), 0.22);
}

.ubx-theme-card-notes,
.ubx-credit-hints {
    display: grid;
    gap: 0.45rem;
}

.ubx-theme-card-notes span,
.ubx-credit-hints span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ubx-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.ubx-theme-card-notes span::before,
.ubx-credit-hints span::before {
    width: 0.45rem;
    height: 0.45rem;
    content: "";
    background: var(--ubx-primary);
    border-radius: 999px;
    box-shadow: 0 0 0.6rem rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-credit-shop {
    --addon-accent: var(--ubx-kind-premium);
    --addon-accent-rgb: var(--ubx-kind-premium-rgb);
}

.ubx-credit-package-card {
    min-height: 100%;
    padding: 1.35rem;
    padding-right: 7.1rem;
    --addon-accent: var(--ubx-primary);
    --addon-accent-rgb: var(--ubx-primary-rgb);
}

.ubx-credit-package-image {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 0;
    width: 5.4rem;
    height: 5.4rem;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 1.25rem;
    background: rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.1);
    box-shadow:
        0 0.8rem 1.8rem rgba(0, 0, 0, 0.2),
        0 0 1.2rem rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.16);
}

.ubx-credit-package-card > :not(.ubx-credit-package-image) {
    position: relative;
    z-index: 1;
}

.ubx-credit-package-card.is-highlighted {
    --addon-accent: var(--ubx-kind-premium);
    --addon-accent-rgb: var(--ubx-kind-premium-rgb);
}

.ubx-credit-package-amount {
    display: flex;
    align-items: end;
    gap: 0.55rem;
    padding: 0.85rem 0;
}

.ubx-credit-package-amount strong {
    line-height: 0.88;
}

.ubx-credit-package-amount span {
    margin-bottom: 0.35rem;
    color: var(--ubx-muted);
    font-weight: 800;
}

.ubx-credit-bonus {
    color: var(--ubx-kind-premium);
    font-size: 0.9rem;
    font-weight: 800;
}

@media (max-width: 575.98px) {
    .ubx-credit-package-card {
        padding-top: 7rem;
        padding-right: 1.35rem;
    }

    .ubx-credit-package-image {
        left: 1rem;
        right: auto;
    }
}

.ubx-credit-feature-card {
    --addon-accent: var(--ubx-kind-list);
    --addon-accent-rgb: var(--ubx-kind-list-rgb);
}

.ubx-credit-reward-card {
    --addon-accent: var(--ubx-kind-person);
    --addon-accent-rgb: var(--ubx-kind-person-rgb);
}

.ubx-credit-feature-card p {
    margin: 0.55rem 0 0;
    color: var(--ubx-muted);
    font-size: 0.92rem;
}

.ubx-dropdown-menu {
    --bs-dropdown-min-width: 11rem;
    --bs-dropdown-padding-x: 0.35rem;
    --bs-dropdown-padding-y: 0.35rem;
    --bs-dropdown-color: var(--ubx-text);
    --bs-dropdown-link-color: var(--ubx-text);
    --bs-dropdown-link-hover-color: var(--ubx-text);
    --bs-dropdown-link-active-color: #160d08;
    --bs-dropdown-link-active-bg: var(--ubx-primary);
    --bs-dropdown-bg: rgba(19, 22, 30, 0.94);
    --bs-dropdown-border-color: var(--ubx-border);
    --bs-dropdown-border-radius: 1rem;
    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.36),
        0 0 18px rgba(var(--ubx-primary-rgb), 0.07);
    backdrop-filter: blur(20px);
}

.ubx-mega-item {
    position: static;
}

.ubx-mega-menu {
    width: min(42rem, calc(100vw - 2rem));
    padding: 0.75rem;
    right: auto !important;
    left: 50% !important;
    margin-top: 0.55rem;
    transform: translateX(-50%);
}

.ubx-mega-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.ubx-mega-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ubx-mega-link {
    display: grid;
    grid-template-columns: 2.15rem 1fr;
    gap: 0.7rem;
    align-items: start;
    min-height: 4.2rem;
    padding: 0.75rem;
    color: var(--ubx-text);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.035);
    transition:
        background var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        transform var(--ubx-motion-smooth);
}

.ubx-mega-link:hover,
.ubx-mega-link:focus {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.08);
    box-shadow: 0 0.45rem 1.25rem rgba(var(--ubx-primary-rgb), 0.08);
    transform: translateY(-0.04rem);
}

.ubx-mega-link-disabled,
.ubx-mega-link-disabled:hover,
.ubx-mega-link-disabled:focus {
    cursor: not-allowed;
    opacity: 0.68;
    transform: none;
    box-shadow: none;
}

.ubx-mega-icon {
    display: inline-grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    color: var(--ubx-primary);
    background: rgba(var(--ubx-primary-rgb), 0.12);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    border-radius: 0.75rem;
}

.ubx-mega-icon svg {
    width: 1rem;
    height: 1rem;
}

.ubx-mega-link .ubx-menu-label,
.ubx-mega-link small {
    display: block;
}

.ubx-mega-link .ubx-menu-label {
    margin-bottom: 0.15rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.ubx-mega-link small {
    color: var(--ubx-muted);
    line-height: 1.35;
}

.ubx-account-toggle {
    min-width: 6rem;
}

.ubx-account-progress-card {
    padding: 1rem;
    background:
        radial-gradient(circle at 92% 8%, rgba(var(--ubx-kind-person-rgb), 0.16), transparent 12rem),
        rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(var(--ubx-kind-person-rgb), 0.18);
    border-radius: 1.25rem;
}

.ubx-account-hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ubx-account-hub-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    background: linear-gradient(180deg, rgba(var(--ubx-primary-rgb), 0.78), rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.22));
    opacity: 0.9;
}

.ubx-account-hub-card .btn {
    margin-top: auto;
}

.ubx-account-mini-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    color: var(--ubx-muted);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--ubx-border);
    border-radius: 0.8rem;
    font-size: 0.82rem;
}

.ubx-account-mini-progress strong {
    color: var(--ubx-text);
    white-space: nowrap;
}

.ubx-settings-nav {
    position: sticky;
    top: 5rem;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    border-radius: 1.35rem;
}

.ubx-settings-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0.55rem 0.9rem;
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--ubx-border);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
}

.ubx-settings-nav a:hover,
.ubx-settings-nav a:focus {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.13);
    border-color: rgba(var(--ubx-primary-rgb), 0.26);
}

.ubx-settings-section {
    scroll-margin-top: 7rem;
    margin-top: 1.35rem;
}

.ubx-settings-section + .ubx-settings-section {
    margin-top: 2.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--ubx-border);
}

.ubx-settings-section .ubx-glass {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
}

.ubx-settings-section .ubx-glass:not(.ubx-kind-person) {
    background: rgba(var(--ubx-surface-rgb), 0.62);
}

.ubx-settings-section .form-control,
.ubx-settings-section .input-group-text {
    border-color: rgba(var(--ubx-primary-rgb), 0.18);
}

.ubx-settings-section .form-label {
    font-weight: 800;
}

.ubx-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.72rem;
    font-weight: 800;
}

.ubx-dropdown-item:hover,
.ubx-dropdown-item:focus {
    background: rgba(var(--ubx-primary-rgb), 0.13);
    color: var(--ubx-text);
}

.ubx-dropdown-item.active::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    background: currentColor;
    border-radius: 50%;
}

[data-bs-theme="light"] .ubx-theme-toggle {
    background: rgba(255, 255, 255, 0.72);
}

[data-bs-theme="light"] .ubx-dropdown-menu {
    --bs-dropdown-bg: rgba(255, 253, 248, 0.97);
    box-shadow:
        0 22px 70px rgba(48, 67, 54, 0.14),
        0 0 16px rgba(var(--ubx-primary-rgb), 0.07);
}

.ubx-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 9rem) 0 4rem;
}

.ubx-hero--search {
    overflow: visible;
    z-index: 20;
}

.ubx-hero.ubx-hero--search::after {
    --ubx-hero-search-glow-size: min(42rem, calc(100vw - 2rem));
    right: 0;
    width: var(--ubx-hero-search-glow-size);
    height: var(--ubx-hero-search-glow-size);
}

.ubx-hero::after {
    position: absolute;
    inset: auto -15% -35% auto;
    z-index: -1;
    width: 42rem;
    height: 42rem;
    content: "";
    background: rgba(var(--ubx-primary-rgb), 0.07);
    filter: blur(24px);
    border-radius: 999px;
}

.ubx-eyebrow {
    color: var(--ubx-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ubx-glass,
.ubx-place-card,
.ubx-premium {
    background: linear-gradient(145deg, var(--ubx-surface), rgba(255, 255, 255, 0.035));
    border: 1px solid var(--ubx-border);
    border-radius: 1.6rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px);
}

.ubx-place-card,
.ubx-region-card,
.ubx-nearby-card,
.ubx-media-card,
.ubx-feature-card,
.ubx-topic-card,
.ubx-category-card,
.ubx-content-card,
.ubx-rank-list a,
.ubx-rank-link {
    transform-style: preserve-3d;
    transition:
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        background var(--ubx-motion-smooth),
        filter var(--ubx-motion-smooth),
        backdrop-filter var(--ubx-motion-smooth);
}

.ubx-place-card:hover,
.ubx-region-card:hover,
.ubx-nearby-card:hover,
.ubx-media-card:hover,
.ubx-feature-card:hover,
.ubx-topic-card:hover,
.ubx-category-card:hover,
.ubx-content-card:hover,
.ubx-rank-list a:hover,
.ubx-rank-link:hover {
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
    filter: saturate(1.03);
    backdrop-filter: blur(19px);
}

[data-bs-theme="light"] .ubx-place-card:hover,
[data-bs-theme="light"] .ubx-region-card:hover,
[data-bs-theme="light"] .ubx-nearby-card:hover,
[data-bs-theme="light"] .ubx-media-card:hover,
[data-bs-theme="light"] .ubx-feature-card:hover,
[data-bs-theme="light"] .ubx-topic-card:hover,
[data-bs-theme="light"] .ubx-category-card:hover,
[data-bs-theme="light"] .ubx-content-card:hover,
[data-bs-theme="light"] .ubx-rank-list a:hover,
[data-bs-theme="light"] .ubx-rank-link:hover {
    box-shadow:
        0 1.15rem 2.9rem rgba(48, 67, 54, 0.12),
        0 0 1.1rem rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

[data-bs-theme="light"] .ubx-glass,
[data-bs-theme="light"] .ubx-place-card,
[data-bs-theme="light"] .ubx-premium {
    border-color: rgba(48, 67, 54, 0.13);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(var(--ubx-primary-rgb), 0.055)),
        var(--ubx-surface);
    box-shadow:
        0 1.05rem 3.1rem rgba(48, 67, 54, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

[data-bs-theme="light"] .ubx-addon-feature-card,
[data-bs-theme="light"] .ubx-theme-card,
[data-bs-theme="light"] .ubx-credit-package-card,
[data-bs-theme="light"] .ubx-credit-feature-card,
[data-bs-theme="light"] .ubx-credit-reward-card {
    background:
        linear-gradient(145deg, rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.105), transparent 48%),
        rgba(255, 255, 255, 0.74);
    border-color: rgba(var(--addon-accent-rgb, var(--ubx-primary-rgb)), 0.2);
    box-shadow:
        0 1rem 2.6rem rgba(72, 54, 38, 0.095),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
    color: var(--ubx-text);
    background-color: rgba(255, 255, 255, 0.66);
    border-color: rgba(72, 54, 38, 0.16);
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    background-color: rgba(255, 255, 255, 0.86);
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    box-shadow: 0 0 0 0.22rem rgba(var(--ubx-primary-rgb), 0.14);
}

[data-bs-theme="light"] .dropdown-menu {
    background: rgba(255, 252, 246, 0.94);
    border-color: rgba(72, 54, 38, 0.14);
    box-shadow: 0 1rem 2.6rem rgba(72, 54, 38, 0.13);
}

[data-bs-theme="light"] .ubx-place-card:hover,
[data-bs-theme="light"] .ubx-region-card:hover,
[data-bs-theme="light"] .ubx-nearby-card:hover,
[data-bs-theme="light"] .ubx-media-card:hover,
[data-bs-theme="light"] .ubx-feature-card:hover,
[data-bs-theme="light"] .ubx-topic-card:hover,
[data-bs-theme="light"] .ubx-category-card:hover,
[data-bs-theme="light"] .ubx-content-card:hover,
[data-bs-theme="light"] .ubx-rank-list a:hover,
[data-bs-theme="light"] .ubx-rank-link:hover {
    box-shadow:
        0 18px 48px rgba(72, 54, 38, 0.13),
        0 0 20px rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ubx-hero-card {
    transform: rotate(1deg);
    animation: ubx-float-card 9s ease-in-out infinite;
}

.ubx-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    max-width: 46rem;
    padding: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ubx-border);
    border-radius: 1.1rem;
}

[data-bs-theme="light"] .ubx-search {
    border-color: rgba(var(--ubx-primary-rgb), 0.14);
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 0.8rem 2rem rgba(72, 54, 38, 0.08);
}

.ubx-search .form-control {
    color: var(--ubx-text);
    background: transparent;
    border: 0;
}

.ubx-search .form-control:focus {
    box-shadow: none;
}

.ubx-live-search-wrap {
    position: relative;
    max-width: 46rem;
    z-index: 40;
}

.ubx-hero--search .ubx-live-search-wrap {
    z-index: 2200;
}

.ubx-live-search-wrap.ms-lg-auto {
    margin-left: auto;
}

.ubx-live-search-results {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    left: 0;
    display: grid;
    gap: 0.65rem;
    max-height: min(32rem, 62vh);
    padding: 0.15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-0.35rem) scale(0.985);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
    z-index: 1050;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ubx-primary-rgb), 0.45) transparent;
}

.ubx-hero--search .ubx-live-search-results {
    z-index: 2201;
}

.ubx-live-search-results[hidden] {
    display: none;
}

.ubx-live-search-results.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ubx-live-search-status,
.ubx-live-search-item {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)),
        rgba(15, 18, 28, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.18),
        0 0 18px rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.08);
}

[data-bs-theme="light"] .ubx-live-search-status,
[data-bs-theme="light"] .ubx-live-search-item {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.58)),
        rgba(255, 255, 255, 0.76);
    border-color: rgba(72, 54, 38, 0.12);
    box-shadow:
        0 14px 34px rgba(72, 54, 38, 0.1),
        0 0 18px rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.08);
}

.ubx-live-search-status {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
    color: var(--ubx-muted);
}

.ubx-live-search-dot {
    width: 0.7rem;
    height: 0.7rem;
    background: rgb(var(--ubx-primary-rgb));
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(var(--ubx-primary-rgb), 0.32);
}

.ubx-live-search-item {
    --ubx-card-accent-rgb: var(--ubx-kind-place-rgb);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.32rem;
    color: inherit;
    opacity: 0;
    transform: translateY(0.35rem);
    animation: ubx-live-search-item-in 260ms ease forwards;
    animation-delay: var(--ubx-live-delay, 0ms);
}

.ubx-live-search-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    min-width: 0;
    padding: 0.52rem;
    color: inherit;
    text-decoration: none;
    border-radius: 0.76rem;
}

.ubx-live-search-main:hover,
.ubx-live-search-main:focus-visible {
    color: inherit;
    background: rgba(255, 255, 255, 0.045);
}

.ubx-live-search-item.ubx-kind-list {
    --ubx-card-accent-rgb: var(--ubx-kind-list-rgb);
}

.ubx-live-search-item.ubx-kind-category {
    --ubx-card-accent-rgb: var(--ubx-kind-category-rgb);
}

.ubx-live-search-item.ubx-kind-region {
    --ubx-card-accent-rgb: var(--ubx-kind-region-rgb);
}

.ubx-live-search-item.ubx-kind-postal {
    --ubx-card-accent-rgb: var(--ubx-kind-postal-rgb);
}

.ubx-live-search-item:hover,
.ubx-live-search-item:focus-visible {
    color: inherit;
    transform: translateY(-0.04rem);
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.2),
        0 0 18px rgba(var(--ubx-card-accent-rgb), 0.12);
}

.ubx-live-search-icon {
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    background: rgba(var(--ubx-card-accent-rgb), 0.17);
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.28);
    border-radius: 0.85rem;
}

.ubx-live-search-icon svg {
    width: 1.12rem;
    height: 1.12rem;
    fill: rgb(var(--ubx-card-accent-rgb));
    filter: drop-shadow(0 0 8px rgba(var(--ubx-card-accent-rgb), 0.34));
}

.ubx-live-search-copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.ubx-live-search-kicker,
.ubx-live-search-copy small,
.ubx-live-search-excerpt {
    color: var(--ubx-muted);
}

.ubx-live-search-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-live-search-copy strong {
    overflow: hidden;
    font-size: 0.98rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-live-search-excerpt {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-live-search-arrow {
    color: rgb(var(--ubx-card-accent-rgb));
    font-weight: 800;
    padding-inline: 0.55rem;
}

.ubx-live-search-map-action {
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    color: rgb(var(--ubx-card-accent-rgb));
    background:
        radial-gradient(circle at 50% 35%, rgba(var(--ubx-card-accent-rgb), 0.18), transparent 62%),
        rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.24);
    border-radius: 0.82rem;
    text-decoration: none;
    transition:
        transform var(--ubx-motion-smooth),
        background var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth);
}

.ubx-live-search-map-action:hover,
.ubx-live-search-map-action:focus-visible {
    color: rgb(var(--ubx-card-accent-rgb));
    background: rgba(var(--ubx-card-accent-rgb), 0.14);
    border-color: rgba(var(--ubx-card-accent-rgb), 0.38);
    box-shadow: 0 0 1rem rgba(var(--ubx-card-accent-rgb), 0.16);
    transform: translateY(-0.05rem) scale(1.02);
}

.ubx-live-search-map-action svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.ubx-live-search-results.has-map-focus .ubx-live-search-map-action {
    animation: ubx-map-focus-pulse 520ms ease;
}

.ubx-map-focus-ring {
    animation: ubx-map-focus-ring 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 0.75rem rgba(var(--ubx-kind-premium-rgb), 0.38));
}

.ubx-pagination {
    --ubx-card-accent: var(--ubx-primary);
    --ubx-card-accent-rgb: var(--ubx-primary-rgb);
}

.ubx-pagination-lists {
    --ubx-card-accent: var(--ubx-kind-list);
    --ubx-card-accent-rgb: var(--ubx-kind-list-rgb);
}

.ubx-pagination-shell {
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--ubx-card-accent-rgb), 0.2);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.16),
        0 0 20px rgba(var(--ubx-card-accent-rgb), 0.08);
}

.ubx-pagination-shell::before {
    position: absolute;
    inset: -8rem -7rem auto auto;
    z-index: -1;
    width: 18rem;
    height: 18rem;
    content: "";
    background: radial-gradient(circle, rgba(var(--ubx-card-accent-rgb), 0.12), transparent 68%);
    border-radius: 999px;
}

.ubx-pagination-badge {
    color: var(--ubx-text);
    background: rgba(var(--ubx-card-accent-rgb), 0.16);
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.32);
    box-shadow: 0 0 14px rgba(var(--ubx-card-accent-rgb), 0.08);
}

.ubx-pagination .pagination {
    --bs-pagination-color: var(--ubx-text);
    --bs-pagination-bg: rgba(255, 255, 255, 0.05);
    --bs-pagination-border-color: rgba(255, 255, 255, 0.1);
    --bs-pagination-hover-color: var(--ubx-text);
    --bs-pagination-hover-bg: rgba(var(--ubx-card-accent-rgb), 0.16);
    --bs-pagination-hover-border-color: rgba(var(--ubx-card-accent-rgb), 0.34);
    --bs-pagination-focus-color: var(--ubx-text);
    --bs-pagination-focus-bg: rgba(var(--ubx-card-accent-rgb), 0.18);
    --bs-pagination-focus-box-shadow: 0 0 0 0.22rem rgba(var(--ubx-card-accent-rgb), 0.18);
    --bs-pagination-active-color: #08110f;
    --bs-pagination-active-bg: var(--ubx-card-accent);
    --bs-pagination-active-border-color: var(--ubx-card-accent);
    --bs-pagination-disabled-color: rgba(242, 238, 232, 0.42);
    --bs-pagination-disabled-bg: rgba(255, 255, 255, 0.035);
    --bs-pagination-disabled-border-color: rgba(255, 255, 255, 0.08);
}

.ubx-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    min-height: 2.8rem;
    gap: 0.35rem;
    border-radius: 999px !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-weight: 800;
    transition:
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        background-color var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth);
}

.ubx-pagination .page-link:hover,
.ubx-pagination .page-link:focus-visible {
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.14),
        0 0 14px rgba(var(--ubx-card-accent-rgb), 0.1);
    transform: translateY(-1px);
}

.ubx-pagination .page-item.active .page-link {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18),
        0 0 16px rgba(var(--ubx-card-accent-rgb), 0.14);
}

[data-bs-theme="light"] .ubx-pagination .pagination {
    --bs-pagination-bg: rgba(255, 255, 255, 0.68);
    --bs-pagination-border-color: rgba(72, 54, 38, 0.14);
    --bs-pagination-disabled-color: rgba(33, 24, 18, 0.38);
    --bs-pagination-disabled-bg: rgba(255, 255, 255, 0.44);
    --bs-pagination-disabled-border-color: rgba(72, 54, 38, 0.1);
}

@keyframes ubx-live-search-item-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ubx-map-focus-pulse {
    0%,
    100% {
        box-shadow: 0 0 1rem rgba(var(--ubx-card-accent-rgb), 0.12);
    }
    45% {
        box-shadow:
            0 0 0 0.22rem rgba(var(--ubx-card-accent-rgb), 0.16),
            0 0 1.35rem rgba(var(--ubx-card-accent-rgb), 0.24);
    }
}

@keyframes ubx-map-focus-ring {
    0%,
    100% {
        opacity: 0.72;
        stroke-width: 2;
    }
    50% {
        opacity: 1;
        stroke-width: 3.2;
    }
}

.ubx-map-preview,
.ubx-map-page {
    position: relative;
    overflow: hidden;
    min-height: 22rem;
    background: #12141d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.2rem;
}

[data-bs-theme="light"] .ubx-map-preview,
[data-bs-theme="light"] .ubx-map-page {
    background: #efe4d4;
    border-color: rgba(72, 54, 38, 0.12);
}

.ubx-map-page {
    min-height: min(74vh, 46rem);
}

.ubx-map-premium-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr));
    gap: 0.65rem;
}

.ubx-map-premium-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.72rem 0.85rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    border-radius: 0.95rem;
    background:
        linear-gradient(145deg, rgba(var(--ubx-primary-rgb), 0.08), rgba(255, 255, 255, 0.035)),
        rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-map-premium-stat strong {
    color: var(--ubx-text);
    font-size: clamp(1.18rem, 2vw, 1.55rem);
    line-height: 1;
}

.ubx-map-premium-stat small {
    color: var(--ubx-muted);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ubx-map-premium-stat-premium {
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.32);
    background:
        linear-gradient(145deg, rgba(var(--ubx-kind-premium-rgb), 0.17), rgba(var(--ubx-primary-rgb), 0.045)),
        rgba(255, 255, 255, 0.05);
}

.ubx-map-preview .leaflet-container,
.ubx-map-page .leaflet-container,
.leaflet-container {
    width: 100%;
    height: 100%;
    color: #172017;
    background: #10121a;
}

.ubx-map-preview.leaflet-container,
.ubx-map-preview .leaflet-container {
    min-height: 22rem;
}

.ubx-map-page.leaflet-container,
.ubx-map-page .leaflet-container {
    min-height: min(74vh, 46rem);
}

[data-bs-theme="light"] .leaflet-container {
    color: var(--ubx-text);
    background: #efe4d4;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    color: var(--ubx-text);
    background: #10121a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="light"] .leaflet-popup-content-wrapper,
[data-bs-theme="light"] .leaflet-popup-tip {
    color: var(--ubx-text);
    background: #fffaf3;
    border-color: rgba(72, 54, 38, 0.15);
}

.leaflet-popup-content a {
    color: var(--ubx-primary);
    font-weight: 700;
}

.leaflet-control-zoom,
.leaflet-control-fullscreen,
.leaflet-control-scale-line {
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
        rgba(8, 9, 13, 0.46) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.78rem !important;
    box-shadow:
        0 0.7rem 1.7rem rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.leaflet-top .leaflet-control {
    margin-top: 0.75rem;
}

.leaflet-left .leaflet-control {
    margin-left: 0.75rem;
}

.leaflet-right .leaflet-control {
    margin-right: 0.75rem;
}

.leaflet-bottom .leaflet-control {
    margin-bottom: 0.75rem;
}

.leaflet-control-zoom {
    display: grid;
    gap: 0.22rem;
    padding: 0.22rem;
}

.leaflet-control-zoom a,
.leaflet-control-fullscreen a {
    width: 2.05rem !important;
    height: 2.05rem !important;
    color: var(--ubx-text) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.095) !important;
    border-radius: 0.56rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
    line-height: 2rem !important;
    transition:
        background var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        transform var(--ubx-motion-smooth);
}

.leaflet-control-zoom a + a {
    border-top: 1px solid rgba(255, 255, 255, 0.095) !important;
}

.leaflet-control-fullscreen {
    padding: 0.22rem;
}

.leaflet-control-scale-line {
    padding: 0.18rem 0.45rem !important;
    color: var(--ubx-text) !important;
    font-weight: 800;
    text-shadow: none !important;
}

[data-bs-theme="light"] .leaflet-control-zoom,
[data-bs-theme="light"] .leaflet-control-fullscreen,
[data-bs-theme="light"] .leaflet-control-scale-line {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.48)),
        rgba(255, 250, 243, 0.62) !important;
    border-color: rgba(72, 54, 38, 0.1) !important;
    box-shadow:
        0 0.8rem 2rem rgba(72, 54, 38, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

[data-bs-theme="light"] .leaflet-control-zoom a,
[data-bs-theme="light"] .leaflet-control-fullscreen a {
    color: var(--ubx-text) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
        rgba(255, 255, 255, 0.46) !important;
    border-color: rgba(72, 54, 38, 0.11) !important;
    box-shadow:
        0 0.45rem 1rem rgba(72, 54, 38, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus-visible,
.leaflet-control-fullscreen a:hover,
.leaflet-control-fullscreen a:focus-visible {
    color: var(--ubx-text) !important;
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.16), rgba(255, 255, 255, 0.045)),
        rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(var(--ubx-primary-rgb), 0.26) !important;
    box-shadow:
        0 0 0.85rem rgba(var(--ubx-primary-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
    transform: translateY(-0.02rem);
}

[data-bs-theme="light"] .leaflet-control-zoom a:hover,
[data-bs-theme="light"] .leaflet-control-zoom a:focus-visible,
[data-bs-theme="light"] .leaflet-control-fullscreen a:hover,
[data-bs-theme="light"] .leaflet-control-fullscreen a:focus-visible {
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.16), rgba(255, 255, 255, 0.56)),
        rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(var(--ubx-primary-rgb), 0.26) !important;
}

a.leaflet-fullscreen-icon {
    position: relative;
    background-image: none !important;
    font-size: 0;
}

a.leaflet-fullscreen-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin: auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9V5h4v2H7v2H5Zm10-4h4v4h-2V7h-2V5ZM7 15v2h2v2H5v-4h2Zm10 2v-2h2v4h-4v-2h2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9V5h4v2H7v2H5Zm10-4h4v4h-2V7h-2V5ZM7 15v2h2v2H5v-4h2Zm10 2v-2h2v4h-4v-2h2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

a.leaflet-fullscreen-icon.leaflet-fullscreen-on::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5v4H5V7h2V5h2Zm6 0h2v2h2v2h-4V5ZM5 15h4v4H7v-2H5v-2Zm14 0v2h-2v2h-2v-4h4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5v4H5V7h2V5h2Zm6 0h2v2h2v2h-4V5ZM5 15h4v4H7v-2H5v-2Zm14 0v2h-2v2h-2v-4h4Z'/%3E%3C/svg%3E");
}

.leaflet-tooltip {
    color: var(--ubx-text);
    background: rgba(7, 11, 9, 0.92);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.34);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

[data-bs-theme="light"] .leaflet-tooltip {
    color: var(--ubx-text);
    background: rgba(255, 250, 243, 0.94);
    box-shadow: 0 12px 32px rgba(72, 54, 38, 0.16);
}

.leaflet-tooltip-top::before {
    border-top-color: rgba(8, 9, 13, 0.92);
}

.ubx-marker-cluster {
    display: grid;
    place-items: center;
    color: #160d08;
    background:
        radial-gradient(circle at 35% 30%, #d5f3dc, var(--ubx-primary) 52%, rgba(var(--ubx-primary-rgb), 0.72));
    border: 2px solid rgba(8, 9, 13, 0.82);
    border-radius: 999px;
    box-shadow:
        0 0 0 0.7rem rgba(var(--ubx-primary-rgb), 0.16),
        0 16px 34px rgba(0, 0, 0, 0.34);
    font-size: 0.9rem;
    font-weight: 900;
}

.ubx-marker-cluster span {
    line-height: 1;
}

.ubx-place-marker {
    display: grid;
    place-items: center;
    background: transparent;
}

.ubx-place-marker span {
    position: relative;
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    background: var(--ubx-primary);
    border: 2px solid rgba(8, 9, 13, 0.84);
    border-radius: 999px;
    box-shadow:
        0 0 0 0.65rem rgba(var(--ubx-primary-rgb), 0.16),
        0 12px 26px rgba(0, 0, 0, 0.34);
}

.ubx-place-marker.ubx-map-marker-member span,
.ubx-place-marker.ubx-map-marker-member_group span,
.ubx-place-marker.ubx-map-marker-tactical span {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    color: #071009;
    background: var(--ubx-marker-color, var(--ubx-primary));
    border-color: rgba(8, 9, 13, 0.88);
    box-shadow:
        0 0 0 0.42rem color-mix(in srgb, var(--ubx-marker-color, var(--ubx-primary)) 18%, transparent),
        0 14px 30px rgba(0, 0, 0, 0.34);
}

.ubx-place-marker.ubx-map-marker-tactical span {
    border-radius: 0.72rem 0.72rem 0.72rem 0.18rem;
    transform: rotate(-45deg);
}

.ubx-place-marker.ubx-map-marker-tactical span b {
    transform: rotate(45deg);
}

.ubx-place-marker.ubx-map-marker-member span,
.ubx-place-marker.ubx-map-marker-member_group span {
    border-radius: 999px;
}

.ubx-place-marker.ubx-map-marker-member_group span {
    box-shadow:
        0 0 0 0.5rem rgba(167, 139, 250, 0.18),
        0 16px 34px rgba(0, 0, 0, 0.38);
}

.ubx-place-marker.ubx-map-marker-member.ubx-map-marker-freshness-aging span {
    color: #1d1304;
    border-style: dashed;
    box-shadow:
        0 0 0 0.42rem rgba(245, 158, 11, 0.18),
        0 14px 30px rgba(0, 0, 0, 0.34);
}

.ubx-place-marker.ubx-map-marker-member.ubx-map-marker-freshness-stale {
    opacity: 0.68;
}

.ubx-place-marker.ubx-map-marker-member.ubx-map-marker-freshness-stale span {
    color: #0f172a;
    border-style: dashed;
    filter: saturate(0.55);
    box-shadow:
        0 0 0 0.34rem rgba(148, 163, 184, 0.15),
        0 10px 22px rgba(0, 0, 0, 0.28);
}

.ubx-place-marker.ubx-map-marker-member.ubx-map-marker-freshness-stale span b::after {
    content: '!';
    position: absolute;
    transform: translate(0.58rem, -0.58rem);
    display: grid;
    place-items: center;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    color: #fff;
    background: #fb7185;
    font-size: 0.52rem;
    line-height: 1;
}

.ubx-map-freshness-note {
    display: inline-block;
    margin-top: 0.2rem;
    color: #fbbf24;
    font-weight: 700;
}

.ubx-place-marker span b {
    line-height: 1;
    font-size: 0.68rem;
    font-weight: 900;
}

.ubx-map-filter-control {
    width: min(15rem, calc(100vw - 2rem));
    max-height: min(22rem, calc(100vh - 8rem));
    overflow: auto;
    padding: 0.34rem;
    color: var(--ubx-text);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
        rgba(8, 9, 13, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.92rem;
    box-shadow:
        0 0.7rem 1.7rem rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    transition:
        border-radius var(--ubx-motion-smooth),
        background var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth);
}

.ubx-map-filter-control[data-collapsed="false"] {
    padding: 0.42rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(8, 9, 13, 0.58);
    border-radius: 0.78rem;
    box-shadow:
        0 0.9rem 2rem rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

[data-bs-theme="light"] .ubx-map-filter-control {
    color: var(--ubx-text);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.48)),
        rgba(255, 250, 243, 0.56);
    border-color: rgba(72, 54, 38, 0.1);
    box-shadow: 0 0.8rem 2rem rgba(72, 54, 38, 0.1);
}

[data-bs-theme="light"] .ubx-map-filter-control[data-collapsed="false"] {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58)),
        rgba(255, 250, 243, 0.72);
}

.ubx-map-filter-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.34rem 0.48rem 0.34rem 0.58rem;
    color: var(--ubx-text);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 0.62rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075);
    text-align: left;
    transition:
        background var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth);
}

.ubx-map-filter-control[data-collapsed="false"] .ubx-map-filter-toggle {
    border-radius: 0.56rem;
}

.ubx-map-filter-toggle:hover,
.ubx-map-filter-toggle:focus-visible {
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.13), rgba(255, 255, 255, 0.045)),
        rgba(255, 255, 255, 0.055);
    border-color: rgba(var(--ubx-primary-rgb), 0.24);
    box-shadow:
        0 0 0.85rem rgba(var(--ubx-primary-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    transform: translateY(-0.02rem);
}

[data-bs-theme="light"] .ubx-map-filter-toggle,
[data-bs-theme="light"] .ubx-map-filter-group summary label,
[data-bs-theme="light"] .ubx-map-filter-categories label,
[data-bs-theme="light"] .ubx-map-filter-reset {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
        rgba(255, 255, 255, 0.46);
    border-color: rgba(72, 54, 38, 0.11);
    box-shadow:
        0 0.45rem 1rem rgba(72, 54, 38, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

[data-bs-theme="light"] .ubx-map-filter-toggle:hover,
[data-bs-theme="light"] .ubx-map-filter-toggle:focus-visible,
[data-bs-theme="light"] .ubx-map-filter-group summary label:hover,
[data-bs-theme="light"] .ubx-map-filter-categories label:hover,
[data-bs-theme="light"] .ubx-map-filter-reset:hover {
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.16), rgba(255, 255, 255, 0.56)),
        rgba(255, 255, 255, 0.62);
    border-color: rgba(var(--ubx-primary-rgb), 0.26);
}

.ubx-map-filter-toggle span {
    overflow: hidden;
    font-size: 0.76rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-map-filter-toggle small {
    color: var(--ubx-muted);
    font-size: 0.64rem;
    font-weight: 800;
    white-space: nowrap;
}

.ubx-map-filter-toggle b {
    width: 0.52rem;
    height: 0.52rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.72;
    transform: translateY(-1px) rotate(45deg);
    transition: transform var(--ubx-motion-smooth);
}

.ubx-map-filter-toggle[aria-expanded="true"] b {
    transform: translateY(2px) rotate(225deg);
}

.ubx-map-filter-body {
    padding: 0.38rem 0.05rem 0.05rem;
}

.ubx-map-filter-head,
.ubx-map-filter-group summary,
.ubx-map-filter-categories label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.48rem;
}

.ubx-map-filter-head {
    padding: 0 0.2rem 0.36rem;
    margin-bottom: 0.42rem;
    border-bottom: 1px solid var(--ubx-border);
}

.ubx-map-filter-head strong {
    font-size: 0.76rem;
}

.ubx-map-filter-head span,
.ubx-map-filter-group small,
.ubx-map-filter-categories small {
    color: var(--ubx-muted);
    font-size: 0.66rem;
    font-weight: 700;
}

.ubx-map-filter-group {
    padding: 0.26rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-bs-theme="light"] .ubx-map-filter-group {
    border-bottom-color: rgba(72, 54, 38, 0.1);
}

.ubx-map-filter-group:last-child {
    border-bottom: 0;
}

.ubx-map-filter-group summary {
    cursor: pointer;
    list-style: none;
}

.ubx-map-filter-group summary::-webkit-details-marker {
    display: none;
}

.ubx-map-filter-group summary label,
.ubx-map-filter-categories label {
    min-width: 0;
    margin: 0;
    cursor: pointer;
    font-size: 0.76rem;
}

.ubx-map-filter-group summary label,
.ubx-map-filter-categories label,
.ubx-map-filter-reset {
    padding: 0.38rem 0.52rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 0.52rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    transition:
        background var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth);
}

.ubx-map-filter-group summary label:hover,
.ubx-map-filter-categories label:hover {
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.12), rgba(255, 255, 255, 0.035)),
        rgba(255, 255, 255, 0.05);
    border-color: rgba(var(--ubx-primary-rgb), 0.2);
    box-shadow:
        0 0 0.75rem rgba(var(--ubx-primary-rgb), 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: translateY(-0.015rem);
}

.ubx-map-filter-group input,
.ubx-map-filter-categories input {
    accent-color: var(--ubx-primary);
}

.ubx-map-filter-group span,
.ubx-map-filter-categories span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-map-filter-categories {
    display: grid;
    gap: 0.18rem;
    padding: 0.34rem 0 0 0.58rem;
}

.ubx-map-filter-categories label {
    color: var(--ubx-muted);
    font-size: 0.7rem;
}

.ubx-map-filter-categories input:disabled + span {
    opacity: 0.45;
}

.ubx-map-filter-reset {
    width: 100%;
    margin-top: 0.42rem;
    color: var(--ubx-text);
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.1), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.035);
    font-size: 0.7rem;
    font-weight: 800;
}

.ubx-map-filter-reset:hover {
    color: var(--ubx-text);
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.16), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.055);
    border-color: rgba(var(--ubx-primary-rgb), 0.26);
    box-shadow:
        0 0 0.9rem rgba(var(--ubx-primary-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-0.015rem);
}

.ubx-map-filter-premium {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.34rem 0.5rem;
    align-items: start;
    margin-top: 0.52rem;
    padding: 0.56rem 0.6rem;
    color: var(--ubx-text);
    background:
        linear-gradient(135deg, rgba(var(--ubx-kind-premium-rgb), 0.14), rgba(var(--ubx-kind-premium-rgb), 0.045)),
        rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.2);
    border-radius: 0.58rem;
    box-shadow: 0 0 1.1rem rgba(var(--ubx-kind-premium-rgb), 0.08);
    font-size: 0.68rem;
    line-height: 1.28;
}

.ubx-map-filter-premium a,
.ubx-map-filter-premium span:last-child {
    grid-column: 2;
    color: var(--ubx-kind-premium);
    font-weight: 900;
    text-decoration: none;
}

.ubx-map-filter-premium .ubx-map-filter-premium-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: 0.18rem;
    padding: 0.28rem 0.54rem;
    color: #1b1400;
    background: linear-gradient(135deg, var(--ubx-kind-premium), rgba(var(--ubx-kind-premium-rgb), 0.72));
    border-radius: 999px;
    box-shadow: 0 0 0.9rem rgba(var(--ubx-kind-premium-rgb), 0.18);
}

.ubx-map-filter-premium a:hover {
    text-decoration: none;
    transform: translateY(-0.01rem);
}

.ubx-map-filter-premium-mark {
    width: 0.66rem;
    height: 0.66rem;
    margin-top: 0.12rem;
    background: var(--ubx-kind-premium);
    border-radius: 999px;
    box-shadow: 0 0 0.85rem rgba(var(--ubx-kind-premium-rgb), 0.4);
}

.ubx-map-filter-context {
    margin: 0.48rem 0 0;
    padding: 0.48rem 0.58rem;
    color: var(--ubx-muted);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.54rem;
    font-size: 0.68rem;
    line-height: 1.3;
}

[data-bs-theme="light"] .ubx-map-filter-context {
    color: rgba(28, 32, 30, 0.68);
    background: rgba(255, 255, 255, 0.64);
    border-color: rgba(28, 32, 30, 0.09);
}

.ubx-ops-wide-container {
    max-width: 1760px;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.ubx-ops-wide-container.ubx-ops-presentation-container {
    max-width: 1880px;
}

.ubx-explore-session-summary {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}

.ubx-explore-session-summary.is-live {
    border-color: rgba(74, 222, 128, 0.22);
    box-shadow:
        0 1.15rem 2.4rem rgba(0, 0, 0, 0.16),
        0 0 1.2rem rgba(74, 222, 128, 0.07);
}

.ubx-explore-session-summary.is-live::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.25rem;
    content: "";
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.95), rgba(var(--ubx-primary-rgb), 0.18));
}

.ubx-active-explore-strip {
    position: relative;
    overflow: hidden;
    border-color: rgba(74, 222, 128, 0.18);
}

.ubx-active-explore-strip::before {
    position: absolute;
    inset: -45% -12% auto auto;
    width: 18rem;
    height: 18rem;
    content: "";
    background: radial-gradient(circle, rgba(74, 222, 128, 0.16), transparent 62%);
    filter: blur(0.35rem);
    pointer-events: none;
}

.ubx-active-explore-strip > * {
    position: relative;
    z-index: 1;
}

.ubx-active-explore-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.ubx-active-explore-card {
    display: grid;
    gap: 0.35rem;
    min-height: 8rem;
    padding: 0.95rem;
    color: var(--ubx-text);
    text-decoration: none;
    background:
        linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(var(--ubx-primary-rgb), 0.045)),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(74, 222, 128, 0.16);
    border-radius: 1rem;
    transition:
        border-color var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        transform var(--ubx-motion-smooth);
}

.ubx-active-explore-card:hover,
.ubx-active-explore-card:focus {
    color: var(--ubx-text);
    border-color: rgba(74, 222, 128, 0.28);
    box-shadow: 0 1rem 2rem rgba(74, 222, 128, 0.09);
    transform: translateY(-0.05rem);
}

.ubx-active-explore-card strong,
.ubx-active-explore-card span {
    display: block;
}

.ubx-active-explore-card strong {
    font-size: 1.02rem;
    line-height: 1.2;
}

.ubx-active-explore-card span {
    color: var(--ubx-muted);
    font-size: 0.82rem;
}

.ubx-active-explore-card-status {
    display: inline-flex !important;
    gap: 0.4rem;
    align-items: center;
    width: fit-content;
    padding: 0.25rem 0.48rem;
    color: #bbf7d0 !important;
    background: rgba(74, 222, 128, 0.11);
    border: 1px solid rgba(74, 222, 128, 0.17);
    border-radius: 999px;
    font-size: 0.72rem !important;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .ubx-active-explore-grid {
        grid-template-columns: 1fr;
    }

    .ubx-nav-live-explore {
        width: fit-content;
        margin-block: 0.3rem;
    }
}

.ubx-explore-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.ubx-explore-summary-stats span {
    display: grid;
    gap: 0.1rem;
    padding: 0.6rem 0.45rem;
    color: var(--ubx-muted);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.12);
    border-radius: 0.85rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.ubx-explore-summary-stats strong {
    color: var(--ubx-text);
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
}

.ubx-explore-summary-members {
    display: flex;
    align-items: center;
    min-height: 2rem;
}

.ubx-explore-summary-members span,
.ubx-explore-summary-members small {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-right: -0.42rem;
    color: var(--ubx-text);
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 45%),
        rgba(var(--ubx-kind-chat-rgb), 0.3);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.ubx-explore-summary-members small {
    color: var(--ubx-muted);
    background: rgba(255, 255, 255, 0.055);
}

[data-bs-theme="light"] .ubx-explore-summary-stats span {
    background: rgba(255, 255, 255, 0.56);
    border-color: rgba(35, 92, 57, 0.12);
}

.ubx-ops-dashboard {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--ubx-kind-chat-rgb), 0.18), transparent 24rem),
        radial-gradient(circle at 88% 8%, rgba(var(--ubx-primary-rgb), 0.12), transparent 20rem),
        rgba(255, 255, 255, 0.045);
}

.ubx-ops-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--ubx-kind-chat-rgb), 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ubx-kind-chat-rgb), 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 72%);
}

.ubx-ops-dashboard > * {
    position: relative;
    z-index: 1;
}

.ubx-ops-command-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.ubx-ops-command-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.ubx-ops-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.ubx-ops-status-tile {
    padding: 0.85rem 0.95rem;
    background: rgba(5, 10, 12, 0.32);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.14);
    border-radius: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ubx-ops-status-tile span,
.ubx-ops-panel-title small {
    display: block;
    color: var(--ubx-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-ops-status-tile strong {
    display: block;
    color: var(--ubx-text);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.1;
}

.ubx-ops-status-tile small {
    color: var(--ubx-muted);
    font-size: 0.78rem;
}

.ubx-ops-map-stage,
.ubx-ops-side-rail {
    height: 100%;
}

.ubx-ops-map-stage {
    display: grid;
    gap: 0.75rem;
}

.ubx-ops-map-toolbar,
.ubx-ops-panel-title {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.ubx-ops-map-toolbar {
    padding: 0.8rem 0.95rem;
    background: rgba(5, 10, 12, 0.36);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.15);
    border-radius: 1rem;
}

.ubx-ops-map-toolbar strong,
.ubx-ops-panel-title span {
    font-weight: 850;
}

.ubx-ops-map-chip {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.35rem 0.55rem;
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.ubx-ops-live-dot {
    display: inline-block;
    width: 0.62rem;
    height: 0.62rem;
    background: #94a3b8;
    border-radius: 999px;
    box-shadow: 0 0 0 0.25rem rgba(148, 163, 184, 0.14);
}

.ubx-ops-live-dot.is-online {
    background: #4ade80;
    box-shadow: 0 0 0 0.25rem rgba(74, 222, 128, 0.15), 0 0 16px rgba(74, 222, 128, 0.34);
    animation: ubx-live-pulse 1.9s ease-in-out infinite;
}

.ubx-ops-live-dot.is-aging {
    background: #f59e0b;
    box-shadow: 0 0 0 0.25rem rgba(245, 158, 11, 0.14), 0 0 12px rgba(245, 158, 11, 0.22);
}

.ubx-ops-live-dot.is-stale {
    background: #94a3b8;
    box-shadow: 0 0 0 0.24rem rgba(148, 163, 184, 0.12);
}

.ubx-ops-live-dot.is-offline {
    background: #64748b;
}

.ubx-live-search-icon .ubx-ops-live-dot {
    margin: auto;
}

@keyframes ubx-live-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.14);
        opacity: 0.78;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ubx-ops-live-dot.is-online {
        animation: none;
    }
}

.ubx-ops-map-panel {
    height: 100%;
    background: rgba(2, 6, 8, 0.42);
    border-color: rgba(var(--ubx-kind-chat-rgb), 0.18);
}

.ubx-ops-map-panel .ubx-map-preview,
.ubx-ops-map-panel .ubx-map-preview.leaflet-container,
.ubx-ops-map-panel .ubx-map-preview .leaflet-container {
    min-height: clamp(30rem, 62vh, 46rem);
}

.ubx-ops-dashboard[data-ubx-presentation-mode="true"] {
    border-color: rgba(var(--ubx-kind-chat-rgb), 0.24);
    box-shadow:
        0 1.5rem 4rem rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-ops-dashboard[data-ubx-presentation-mode="true"] .ubx-ops-map-panel .ubx-map-preview,
.ubx-ops-dashboard[data-ubx-presentation-mode="true"] .ubx-ops-map-panel .ubx-map-preview.leaflet-container,
.ubx-ops-dashboard[data-ubx-presentation-mode="true"] .ubx-ops-map-panel .ubx-map-preview .leaflet-container {
    min-height: clamp(38rem, 74vh, 58rem);
}

.ubx-ops-presentation-hint {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    padding: 0.85rem 1rem;
    color: var(--ubx-muted);
    background:
        linear-gradient(135deg, rgba(var(--ubx-kind-chat-rgb), 0.12), rgba(var(--ubx-primary-rgb), 0.08)),
        rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.18);
    border-radius: 1rem;
    font-size: 0.88rem;
    font-weight: 650;
}

.ubx-ops-presentation-container .ubx-ops-support-row {
    opacity: 0.9;
}

.ubx-ops-side-rail {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.ubx-ops-panel {
    padding: 1rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
        rgba(5, 10, 12, 0.24);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.14);
    border-color: rgba(var(--ubx-kind-chat-rgb), 0.14);
    border-radius: 1rem;
}

.ubx-ops-panel-title {
    margin-bottom: 0.85rem;
}

.ubx-ops-marker-list {
    display: grid;
    max-height: 24rem;
    gap: 0.65rem;
    overflow: auto;
    padding-right: 0.2rem;
}

.ubx-ops-marker-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px dashed rgba(var(--ubx-kind-chat-rgb), 0.18);
    border-radius: 0.9rem;
}

.ubx-ops-marker-token {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.ubx-ops-marker-token b {
    display: inline-grid;
    place-items: center;
    min-width: 1.75rem;
    min-height: 1.45rem;
    color: #071009;
    background: var(--ubx-primary);
    border-radius: 0.45rem;
    font-size: 0.65rem;
}

.ubx-ops-scenario-grid,
.ubx-ops-export-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.ubx-ops-scenario-card,
.ubx-ops-export-card {
    display: grid;
    gap: 0.7rem;
    min-height: 100%;
    padding: 0.85rem;
    color: var(--ubx-text);
    text-decoration: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
        rgba(4, 8, 10, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.ubx-ops-export-card {
    grid-template-columns: auto 1fr;
    align-items: center;
    transition:
        border-color var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        transform var(--ubx-motion-smooth);
}

.ubx-ops-export-card:hover,
.ubx-ops-export-card:focus {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-kind-chat-rgb), 0.26);
    box-shadow: 0 0.9rem 1.8rem rgba(var(--ubx-kind-chat-rgb), 0.08);
    transform: translateY(-0.04rem);
}

.ubx-ops-export-card svg,
.ubx-ops-scenario-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.ubx-ops-export-card > svg,
.ubx-ops-scenario-icon {
    display: inline-grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    color: var(--ubx-kind-chat);
    background: rgba(var(--ubx-kind-chat-rgb), 0.12);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.16);
    border-radius: 0.85rem;
}

.ubx-ops-export-card span,
.ubx-ops-export-card strong,
.ubx-ops-export-card small,
.ubx-ops-scenario-card strong,
.ubx-ops-scenario-card small {
    display: block;
}

.ubx-ops-export-card strong,
.ubx-ops-scenario-card strong {
    font-size: 0.92rem;
}

.ubx-ops-export-card small,
.ubx-ops-scenario-card small,
.ubx-ops-scenario-card li {
    color: var(--ubx-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.ubx-ops-handoff-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.ubx-ops-handoff-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
    padding: 0.75rem;
    color: var(--ubx-text);
    text-align: left;
    text-decoration: none;
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.105), rgba(255, 255, 255, 0.03)),
        rgba(4, 8, 10, 0.24);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.12);
    border-radius: 0.9rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    transition:
        border-color var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        transform var(--ubx-motion-smooth);
}

button.ubx-ops-handoff-action {
    width: 100%;
    border-color: rgba(var(--ubx-kind-chat-rgb), 0.12);
    font: inherit;
}

.ubx-ops-handoff-action:hover,
.ubx-ops-handoff-action:focus {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.26);
    box-shadow: 0 0.85rem 1.55rem rgba(var(--ubx-primary-rgb), 0.08);
    transform: translateY(-0.035rem);
}

.ubx-ops-handoff-action > svg {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0.48rem;
    color: var(--ubx-primary);
    background: rgba(var(--ubx-primary-rgb), 0.12);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.14);
    border-radius: 0.78rem;
}

.ubx-ops-handoff-action span,
.ubx-ops-handoff-action strong,
.ubx-ops-handoff-action small {
    display: block;
    min-width: 0;
}

.ubx-ops-handoff-action strong {
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-ops-handoff-action small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ubx-muted);
    font-size: 0.72rem;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ubx-ops-scenario-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
}

.ubx-ops-scenario-card ul {
    display: grid;
    gap: 0.35rem;
    padding-left: 1.05rem;
    margin: 0;
}

.ubx-ops-scenario-primary .ubx-ops-scenario-icon {
    color: var(--ubx-primary);
    background: rgba(var(--ubx-primary-rgb), 0.12);
    border-color: rgba(var(--ubx-primary-rgb), 0.18);
}

.ubx-ops-scenario-premium .ubx-ops-scenario-icon {
    color: var(--ubx-kind-premium);
    background: rgba(var(--ubx-kind-premium-rgb), 0.12);
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.18);
}

.ubx-ops-scenario-place .ubx-ops-scenario-icon {
    color: var(--ubx-kind-place);
    background: rgba(var(--ubx-kind-place-rgb), 0.12);
    border-color: rgba(var(--ubx-kind-place-rgb), 0.18);
}

[data-bs-theme="light"] .ubx-ops-dashboard {
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--ubx-kind-chat-rgb), 0.16), transparent 24rem),
        radial-gradient(circle at 88% 8%, rgba(var(--ubx-primary-rgb), 0.12), transparent 20rem),
        rgba(255, 255, 255, 0.6);
}

[data-bs-theme="light"] .ubx-ops-status-tile,
[data-bs-theme="light"] .ubx-ops-map-toolbar,
[data-bs-theme="light"] .ubx-ops-panel,
[data-bs-theme="light"] .ubx-ops-map-panel,
[data-bs-theme="light"] .ubx-ops-scenario-card,
[data-bs-theme="light"] .ubx-ops-handoff-action,
[data-bs-theme="light"] .ubx-ops-export-card {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(35, 92, 57, 0.13);
}

.ubx-explore-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
}

[data-bs-theme="light"] .ubx-explore-panel {
    background: rgba(255, 250, 243, 0.54);
    border-color: rgba(72, 54, 38, 0.12);
}

@media (max-width: 991.98px) {
    .ubx-ops-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-ops-scenario-grid,
    .ubx-ops-handoff-strip,
    .ubx-ops-export-grid {
        grid-template-columns: 1fr;
    }

    .ubx-ops-map-panel .ubx-map-preview,
    .ubx-ops-map-panel .ubx-map-preview.leaflet-container,
    .ubx-ops-map-panel .ubx-map-preview .leaflet-container {
        min-height: 26rem;
    }
}

@media (max-width: 575.98px) {
    .ubx-ops-command-bar,
    .ubx-ops-map-toolbar,
    .ubx-ops-panel-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .ubx-ops-command-meta {
        justify-content: flex-start;
    }

    .ubx-ops-status-grid {
        grid-template-columns: 1fr;
    }

    .ubx-ops-map-panel .ubx-map-preview,
    .ubx-ops-map-panel .ubx-map-preview.leaflet-container,
    .ubx-ops-map-panel .ubx-map-preview .leaflet-container {
        min-height: 22rem;
    }
}

.ubx-explore-marker-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
}

[data-bs-theme="light"] .ubx-explore-marker-row {
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(72, 54, 38, 0.12);
}

.ubx-explore-marker-dot {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: #071009;
    background: var(--ubx-primary);
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-map-marker-color-blue { background: #38bdf8; }
.ubx-map-marker-color-green { background: #4ade80; }
.ubx-map-marker-color-amber { background: #f59e0b; }
.ubx-map-marker-color-red { background: #fb7185; }
.ubx-map-marker-color-purple { background: #a78bfa; }
.ubx-map-marker-color-gray { background: #94a3b8; }

.ubx-map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--ubx-primary-rgb), 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ubx-primary-rgb), 0.08) 1px, transparent 1px);
    background-size: 36px 36px;
}

.ubx-map-dot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 2;
    width: 0.9rem;
    height: 0.9rem;
    background: var(--ubx-primary);
    border: 2px solid rgba(8, 9, 13, 0.8);
    border-radius: 999px;
    box-shadow: 0 0 0 0.7rem rgba(var(--ubx-primary-rgb), 0.13);
    animation: ubx-map-dot-pulse 4.8s ease-in-out infinite;
    transition:
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth);
}

.ubx-map-dot:nth-of-type(2n) {
    animation-delay: -1.4s;
}

.ubx-map-dot:nth-of-type(3n) {
    animation-delay: -2.6s;
}

.ubx-map-dot:hover,
.ubx-map-dot:focus-visible {
    transform: translate(-1px, -1px) scale(1.08);
    box-shadow:
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.1),
        0 0 18px rgba(var(--ubx-primary-rgb), 0.18);
}

.ubx-map-preview-cta {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.95rem;
    border-radius: 999rem;
    box-shadow:
        0 0.9rem 2rem rgba(0, 0, 0, 0.24),
        0 0 18px rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-map-noscript {
    position: absolute;
    inset: 1rem;
    z-index: 3;
    overflow: auto;
    padding: 1rem;
    color: var(--ubx-text);
    background: rgba(8, 9, 13, 0.88);
    border: 1px solid var(--ubx-border);
    border-radius: 1rem;
    backdrop-filter: blur(14px);
}

[data-bs-theme="light"] .ubx-map-noscript {
    background: rgba(255, 250, 243, 0.9);
}

.ubx-map-noscript a,
.ubx-map-attribution {
    color: var(--ubx-primary);
}

.ubx-kind-place {
    --ubx-card-accent: var(--ubx-kind-place);
    --ubx-card-accent-rgb: var(--ubx-kind-place-rgb);
}

.ubx-kind-region {
    --ubx-card-accent: var(--ubx-kind-region);
    --ubx-card-accent-rgb: var(--ubx-kind-region-rgb);
}

.ubx-kind-category {
    --ubx-card-accent: var(--ubx-kind-category);
    --ubx-card-accent-rgb: var(--ubx-kind-category-rgb);
}

.ubx-kind-list {
    --ubx-card-accent: var(--ubx-kind-list);
    --ubx-card-accent-rgb: var(--ubx-kind-list-rgb);
}

.ubx-kind-person {
    --ubx-card-accent: var(--ubx-kind-person);
    --ubx-card-accent-rgb: var(--ubx-kind-person-rgb);
}

.ubx-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    flex: 0 0 auto;
    border-radius: 1.15rem;
    color: var(--ubx-text);
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.24), transparent 42%),
        linear-gradient(145deg, rgba(var(--ubx-kind-person-rgb), 0.52), rgba(var(--ubx-kind-region-rgb), 0.28));
    border: 1px solid rgba(var(--ubx-kind-person-rgb), 0.28);
    box-shadow: 0 0 18px rgba(var(--ubx-kind-person-rgb), 0.08);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.ubx-avatar-prestige {
    --ubx-avatar-size: 4.2rem;
    --ubx-prestige-a: var(--ubx-kind-person);
    --ubx-prestige-b: var(--ubx-kind-region);
    --ubx-prestige-c: var(--ubx-primary);
    position: relative;
    display: inline-grid;
    width: calc(var(--ubx-avatar-size) * 1.52);
    height: calc(var(--ubx-avatar-size) * 1.62);
    flex: 0 0 auto;
    place-items: center;
    isolation: isolate;
}

.ubx-avatar-prestige-xs {
    --ubx-avatar-size: 2.05rem;
}

.ubx-avatar-prestige-sm {
    --ubx-avatar-size: 3.05rem;
}

.ubx-avatar-prestige-md {
    --ubx-avatar-size: 4.2rem;
}

.ubx-avatar-prestige-lg {
    --ubx-avatar-size: 7.2rem;
}

.ubx-mini-avatar {
    display: inline-grid;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    place-items: center;
    color: #07140d;
    background: linear-gradient(135deg, var(--ubx-kind-person), var(--ubx-primary));
    border-radius: 0.78rem;
    box-shadow: 0 0.55rem 1.2rem rgba(var(--ubx-kind-person-rgb), 0.16);
}

.ubx-avatar-prestige-tier-1,
.ubx-avatar-prestige-tier-2 {
    --ubx-prestige-a: #8aa4ff;
    --ubx-prestige-b: #5eead4;
}

.ubx-avatar-prestige-tier-3,
.ubx-avatar-prestige-tier-4 {
    --ubx-prestige-a: #c084fc;
    --ubx-prestige-b: #f472b6;
}

.ubx-avatar-prestige-tier-5,
.ubx-avatar-prestige-tier-6 {
    --ubx-prestige-a: var(--ubx-kind-premium);
    --ubx-prestige-b: #c084fc;
    --ubx-prestige-c: #8aa4ff;
}

.ubx-avatar-prestige-tier-7,
.ubx-avatar-prestige-tier-8 {
    --ubx-prestige-a: #f472b6;
    --ubx-prestige-b: var(--ubx-kind-premium);
    --ubx-prestige-c: #5eead4;
}

.ubx-avatar-prestige::before {
    position: absolute;
    inset: 9% 5% 2%;
    z-index: -2;
    content: "";
    background:
        radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--ubx-prestige-a) 28%, transparent), transparent 62%),
        radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--ubx-prestige-b) 18%, transparent), transparent 70%);
    filter: blur(1.1rem);
    opacity: 0.72;
}

.ubx-avatar-prestige-ring {
    position: absolute;
    inset: 11% 9% 14%;
    z-index: -1;
    border-radius: 42% 42% 47% 47%;
    background:
        conic-gradient(
            from -88deg,
            var(--ubx-prestige-a) 0 var(--ubx-prestige-progress),
            rgba(255, 255, 255, 0.12) 0 100%
        );
    clip-path: polygon(
        50% 0,
        59% 9%,
        72% 4%,
        79% 16%,
        93% 17%,
        89% 33%,
        100% 43%,
        89% 55%,
        94% 72%,
        76% 76%,
        69% 91%,
        50% 84%,
        31% 91%,
        24% 76%,
        6% 72%,
        11% 55%,
        0 43%,
        11% 33%,
        7% 17%,
        21% 16%,
        28% 4%,
        41% 9%
    );
    box-shadow:
        inset 0 0 0 calc(var(--ubx-avatar-size) * 0.075) rgba(255, 255, 255, 0.11),
        0 0 calc(var(--ubx-avatar-size) * 0.34) color-mix(in srgb, var(--ubx-prestige-a) 22%, transparent);
}

.ubx-avatar-prestige-ring::after {
    position: absolute;
    inset: 13%;
    content: "";
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.2), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.ubx-avatar-prestige-core {
    display: grid;
    width: var(--ubx-avatar-size);
    height: var(--ubx-avatar-size);
    place-items: center;
    overflow: hidden;
    color: var(--ubx-text);
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.28), transparent 42%),
        linear-gradient(145deg, rgba(var(--ubx-kind-person-rgb), 0.55), rgba(var(--ubx-kind-region-rgb), 0.3));
    border: max(1px, calc(var(--ubx-avatar-size) * 0.035)) solid rgba(255, 255, 255, 0.44);
    border-radius: 50%;
    box-shadow:
        0 0 0 calc(var(--ubx-avatar-size) * 0.08) rgba(8, 9, 13, 0.34),
        0 0 calc(var(--ubx-avatar-size) * 0.28) rgba(0, 0, 0, 0.28);
    font-size: calc(var(--ubx-avatar-size) * 0.38);
    font-weight: 900;
    letter-spacing: -0.05em;
}

.ubx-avatar-prestige-core img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ubx-avatar-lightbox-trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    background: transparent;
    border: 0;
    border-radius: inherit;
}

.ubx-avatar-prestige-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ubx-avatar-prestige-marker {
    position: absolute;
    top: 48%;
    left: 50%;
    width: calc(var(--ubx-avatar-size) * 0.17);
    color: rgba(255, 255, 255, 0.34);
    transform:
        translate(-50%, -50%)
        rotate(var(--ubx-marker-angle))
        translateY(calc(var(--ubx-avatar-size) * -0.72))
        rotate(var(--ubx-marker-angle-neg));
    filter: drop-shadow(0 0 calc(var(--ubx-avatar-size) * 0.07) rgba(0, 0, 0, 0.36));
}

.ubx-avatar-prestige-marker.is-filled {
    color: var(--ubx-prestige-b);
    filter:
        drop-shadow(0 0 calc(var(--ubx-avatar-size) * 0.08) color-mix(in srgb, var(--ubx-prestige-b) 44%, transparent))
        drop-shadow(0 0 calc(var(--ubx-avatar-size) * 0.04) rgba(0, 0, 0, 0.36));
}

.ubx-avatar-prestige-marker svg {
    display: block;
    width: 100%;
    height: auto;
}

.ubx-avatar-prestige-marker path {
    fill: currentColor;
}

.ubx-avatar-prestige-marker circle {
    fill: rgba(8, 9, 13, 0.62);
}

.ubx-avatar-prestige-level {
    position: absolute;
    bottom: 1%;
    left: 50%;
    padding: 0.24rem 0.58rem;
    color: #120d08;
    background:
        linear-gradient(135deg, var(--ubx-prestige-b), var(--ubx-prestige-a)),
        var(--ubx-primary);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    box-shadow:
        0 0 0 0.15rem rgba(8, 9, 13, 0.28),
        0 0 1rem color-mix(in srgb, var(--ubx-prestige-a) 18%, transparent);
    font-size: calc(var(--ubx-avatar-size) * 0.115);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1;
    transform: translateX(-50%);
    white-space: nowrap;
}

[data-bs-theme="light"] .ubx-avatar-prestige-core {
    box-shadow:
        0 0 0 calc(var(--ubx-avatar-size) * 0.08) rgba(255, 248, 238, 0.74),
        0 0 calc(var(--ubx-avatar-size) * 0.24) rgba(72, 54, 38, 0.18);
}

[data-bs-theme="light"] .ubx-avatar-prestige-marker circle {
    fill: rgba(255, 248, 238, 0.76);
}

.ubx-profile-hero-card,
.ubx-profile-achievements-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ubx-profile-hero-card::before,
.ubx-profile-achievements-panel::before {
    position: absolute;
    inset: -18% -8% auto auto;
    z-index: -1;
    width: min(24rem, 58vw);
    aspect-ratio: 1;
    content: "";
    background:
        radial-gradient(circle at center, rgba(var(--ubx-kind-person-rgb), 0.18), transparent 64%),
        var(--ubx-profile-avatar-bg, none);
    background-position: center;
    background-size: cover;
    border-radius: 999px;
    filter: blur(18px) saturate(1.08);
    opacity: 0.22;
    transform: rotate(-7deg);
}

.ubx-profile-hero-card::after,
.ubx-profile-achievements-panel::after {
    position: absolute;
    inset: auto auto -22% -10%;
    z-index: -1;
    width: 18rem;
    aspect-ratio: 1;
    content: "";
    background: radial-gradient(circle, rgba(var(--ubx-card-accent-rgb, var(--ubx-kind-person-rgb)), 0.16), transparent 68%);
    filter: blur(16px);
    border-radius: 999px;
}

.ubx-profile-hero-card.has-profile-banner::before {
    inset: 0;
    z-index: 1;
    width: auto;
    aspect-ratio: auto;
    background:
        radial-gradient(circle at 15% 35%, rgba(6, 7, 11, 0.5), transparent 34rem),
        linear-gradient(135deg, rgba(6, 7, 11, 0.92), rgba(6, 7, 11, 0.42) 46%, rgba(6, 7, 11, 0.78));
    background-position: center;
    background-size: cover;
    border-radius: inherit;
    filter: saturate(1.06);
    opacity: 1;
    transform: none;
}

.ubx-profile-banner-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(5px) saturate(1.08) brightness(0.9);
    transform: scale(1.035);
}

.ubx-profile-banner-lightbox {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(7, 9, 13, 0.45);
    backdrop-filter: blur(14px);
}

.ubx-profile-hero-card.has-profile-banner > *:not(.ubx-profile-banner-image):not(.ubx-profile-banner-lightbox) {
    position: relative;
    z-index: 2;
}

.ubx-profile-gallery-grid,
.ubx-profile-media-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
}

.ubx-profile-gallery-card,
.ubx-profile-media-card,
.ubx-profile-media-manage-item,
.ubx-profile-comment-card,
.ubx-profile-recent-media-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(var(--ubx-kind-person-rgb), 0.09), rgba(255, 255, 255, 0.035)),
        var(--ubx-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.35rem;
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.12);
}

.ubx-profile-gallery-image-button,
.ubx-profile-recent-media-image-button {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    background: transparent;
    border: 0;
}

.ubx-profile-gallery-card img,
.ubx-profile-media-manage-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ubx-profile-gallery-body {
    padding: 1rem;
}

.ubx-profile-recent-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 0.8rem;
}

.ubx-profile-recent-media-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ubx-profile-recent-media-link {
    position: relative;
    z-index: 2;
    display: block;
    color: inherit;
    text-decoration: none;
}

.ubx-profile-recent-media-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.ubx-profile-recent-media-card span {
    display: block;
    padding: 0.75rem;
    font-size: 0.88rem;
    font-weight: 700;
}

.ubx-lightbox-trigger {
    cursor: zoom-in;
}

.ubx-profile-comment-card {
    padding: 1rem;
}

.ubx-profile-banner-preview {
    position: relative;
    display: grid;
    min-height: 12rem;
    overflow: hidden;
    place-items: center;
    color: var(--ubx-muted);
    background:
        linear-gradient(135deg, rgba(var(--ubx-kind-person-rgb), 0.14), rgba(var(--ubx-kind-premium-rgb), 0.08)),
        var(--ubx-profile-banner-preview, var(--ubx-surface));
    background-position: center;
    background-size: cover;
}

.ubx-profile-banner-preview.is-empty {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}

.ubx-profile-banner-preview img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ubx-profile-media-card .form-check,
.ubx-profile-media-manage-item form {
    position: relative;
    z-index: 1;
}

.ubx-profile-achievements-panel .ubx-achievement-card {
    background:
        linear-gradient(145deg, rgba(var(--ubx-kind-person-rgb), 0.09), rgba(255, 255, 255, 0.035)),
        var(--ubx-surface);
}

.ubx-kind-chat {
    --ubx-card-accent: var(--ubx-kind-chat);
    --ubx-card-accent-rgb: var(--ubx-kind-chat-rgb);
}

.ubx-section-progression {
    background:
        radial-gradient(circle at 16% 6%, rgba(var(--ubx-kind-person-rgb), 0.11), transparent 22rem),
        radial-gradient(circle at 86% 28%, rgba(var(--ubx-kind-premium-rgb), 0.08), transparent 24rem);
}

.ubx-progression-rule {
    --ubx-card-accent: var(--ubx-kind-person);
    --ubx-card-accent-rgb: var(--ubx-kind-person-rgb);
}

.ubx-achievement-card {
    --ubx-card-accent: var(--ubx-kind-person);
    --ubx-card-accent-rgb: var(--ubx-kind-person-rgb);
    border-color: rgba(var(--ubx-kind-person-rgb), 0.2);
    transition:
        transform var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        opacity var(--ubx-motion-smooth);
}

.ubx-achievement-card.is-unlocked {
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.34);
    box-shadow:
        0 1rem 2.2rem rgba(0, 0, 0, 0.14),
        0 0 18px rgba(var(--ubx-kind-premium-rgb), 0.08);
}

.ubx-achievement-card.is-locked {
    opacity: 0.76;
}

.ubx-achievement-card:hover {
    transform: translateY(-0.08rem);
    border-color: rgba(var(--ubx-card-accent-rgb), 0.32);
    box-shadow:
        0 1.1rem 2.35rem rgba(0, 0, 0, 0.16),
        0 0 1rem rgba(var(--ubx-card-accent-rgb), 0.08);
}

.ubx-achievement-icon {
    display: inline-grid;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    place-items: center;
    color: #160d08;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.36), transparent 42%),
        linear-gradient(135deg, var(--ubx-kind-person), var(--ubx-kind-region));
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 1rem;
    box-shadow: 0 0 14px rgba(var(--ubx-kind-person-rgb), 0.1);
}

.ubx-achievement-card.is-unlocked .ubx-achievement-icon {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.36), transparent 42%),
        linear-gradient(135deg, var(--ubx-kind-premium), var(--ubx-kind-person));
    box-shadow: 0 0 16px rgba(var(--ubx-kind-premium-rgb), 0.16);
}

.ubx-achievement-svg {
    width: 1.18rem;
    height: 1.18rem;
}

.ubx-achievement-state,
.ubx-credit-pill {
    color: #160d08;
    background: linear-gradient(135deg, var(--ubx-kind-premium), rgba(var(--ubx-kind-premium-rgb), 0.76));
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.35);
}

.ubx-credit-pill::before {
    content: "⚡";
    font-weight: 900;
}

.ubx-achievement-progress {
    height: 0.52rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
}

.ubx-achievement-progress .progress-bar {
    background: linear-gradient(90deg, var(--ubx-primary), var(--ubx-kind-premium));
    border-radius: inherit;
}

.ubx-mini-stat {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
    justify-content: flex-lg-end;
}

.ubx-mini-stat strong {
    color: var(--ubx-kind-premium);
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
}

.ubx-mini-stat span {
    color: var(--ubx-muted);
    font-size: 0.92rem;
}

.ubx-kind-premium {
    --ubx-card-accent: var(--ubx-kind-premium);
    --ubx-card-accent-rgb: var(--ubx-kind-premium-rgb);
}

.ubx-premium-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #1b1007 !important;
    background:
        linear-gradient(135deg, #fff3bf 0%, var(--ubx-kind-premium) 44%, #f59e0b 100%) !important;
    border: 1px solid rgba(255, 246, 214, 0.86);
    box-shadow:
        0 0.42rem 1rem rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(49, 31, 12, 0.18),
        0 0 18px rgba(var(--ubx-kind-premium-rgb), 0.22);
    text-shadow: none;
}

.ubx-premium-pill .ubx-premium-mark {
    color: #1b1007 !important;
}

.ubx-premium-pill .ubx-premium-mark::after {
    background: linear-gradient(90deg, rgba(27, 16, 7, 0.88), transparent);
}

[data-bs-theme="light"] .ubx-premium-pill {
    color: #1b1007 !important;
    background:
        linear-gradient(135deg, #fff7d6 0%, #f4b35f 48%, #c76f12 100%) !important;
    border-color: rgba(87, 50, 14, 0.24);
    box-shadow:
        0 0.35rem 0.9rem rgba(74, 44, 15, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.66);
}

[data-bs-theme="light"] .ubx-premium-pill .ubx-premium-mark {
    color: #1b1007 !important;
}

.ubx-premium-price-note,
.ubx-premium-region-card {
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.24);
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--ubx-kind-premium-rgb), 0.16), transparent 34%),
        rgba(var(--ubx-kind-premium-rgb), 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-premium-region-card strong {
    color: var(--ubx-kind-premium);
}

.ubx-creator-badge {
    gap: 0.35rem;
    color: #07140d;
    background: linear-gradient(135deg, var(--ubx-primary), rgba(var(--ubx-primary-rgb), 0.72));
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.36);
    box-shadow: 0 0 14px rgba(var(--ubx-primary-rgb), 0.13);
    font-size: 0.9rem;
    letter-spacing: 0;
}

.ubx-creator-panel {
    position: relative;
    overflow: hidden;
}

.ubx-creator-panel::before {
    content: "";
    position: absolute;
    inset: auto -18% -42% 42%;
    height: 12rem;
    background: radial-gradient(circle, rgba(var(--ubx-primary-rgb), 0.16), transparent 66%);
    pointer-events: none;
}

.ubx-creator-panel-icon {
    display: inline-grid;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 2.7rem;
    place-items: center;
    color: #07140d;
    background: linear-gradient(135deg, var(--ubx-primary), rgba(var(--ubx-primary-rgb), 0.70));
    border-radius: 1rem;
    box-shadow: 0 0 18px rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-creator-progress {
    height: 0.55rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.ubx-creator-progress .progress-bar {
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-primary-rgb), 0.62));
    border-radius: inherit;
}

.ubx-creator-progress-badge {
    color: rgba(var(--ubx-primary-rgb), 0.96);
    background: rgba(var(--ubx-primary-rgb), 0.12);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.24);
}

.ubx-creator-requirements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.ubx-creator-requirement {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.65rem;
    padding: 0.65rem 0.75rem;
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
}

.ubx-creator-requirement.is-met {
    background: rgba(var(--ubx-primary-rgb), 0.11);
    border-color: rgba(var(--ubx-primary-rgb), 0.22);
}

.ubx-creator-requirement-state {
    display: inline-flex;
    color: var(--ubx-muted);
}

.ubx-creator-requirement.is-met .ubx-creator-requirement-state {
    color: var(--ubx-primary);
}

.ubx-creator-state,
.ubx-creator-apply-form {
    padding: 0.95rem;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.1rem;
}

.ubx-creator-state {
    display: grid;
    gap: 0.2rem;
}

.ubx-creator-state span {
    color: var(--ubx-muted);
}

.ubx-creator-state.is-met {
    background: rgba(var(--ubx-primary-rgb), 0.10);
    border-color: rgba(var(--ubx-primary-rgb), 0.22);
}

.ubx-creator-state.is-warning {
    background: rgba(255, 193, 7, 0.10);
    border-color: rgba(255, 193, 7, 0.22);
}

@media (max-width: 575.98px) {
    .ubx-creator-requirements {
        grid-template-columns: 1fr;
    }
}

.ubx-icon {
    display: inline-grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    color: #160d08;
    background: var(--ubx-card-accent, var(--ubx-primary));
    border-radius: 0.9rem;
    font-weight: 900;
    box-shadow: 0 0 0 0.22rem rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.16);
    transition:
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth);
}

.ubx-place-card {
    position: relative;
    overflow: hidden;
}

.ubx-place-card.is-premium-locked {
    --ubx-card-accent: var(--ubx-kind-premium);
    --ubx-card-accent-rgb: var(--ubx-kind-premium-rgb);
}

.ubx-place-card:hover {
    transform: perspective(900px) translateY(-3px) scale(1.004) rotateX(0.35deg) rotateY(-0.3deg);
}

.ubx-place-card:hover .ubx-icon,
.ubx-feature-card:hover .ubx-icon,
.ubx-topic-card:hover .ubx-icon,
.ubx-category-card:hover .ubx-icon,
.ubx-content-card:hover .ubx-icon {
    transform: translateZ(8px) scale(1.015);
    box-shadow:
        0 0 0 0.18rem rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.14),
        0 0 16px rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.14);
}

.ubx-place-card-media {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 12rem;
    padding: 1rem;
    background:
        linear-gradient(145deg, rgba(var(--ubx-card-accent-rgb), 0.18), transparent),
        linear-gradient(35deg, #211a18, #08090d);
}

[data-bs-theme="light"] .ubx-place-card-media {
    background:
        linear-gradient(145deg, rgba(var(--ubx-card-accent-rgb), 0.18), transparent),
        linear-gradient(35deg, #f0dcc6, #fffaf3);
}

.ubx-place-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter var(--ubx-motion-smooth);
}

.ubx-place-card:hover .ubx-place-card-media img,
.ubx-media-card:hover img {
    transform: scale(1.018);
    filter: saturate(1.03) contrast(1.01);
}

.ubx-place-card-media-has-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(180deg, rgba(8, 9, 13, 0.16), rgba(8, 9, 13, 0.72)),
        radial-gradient(circle at top left, rgba(var(--ubx-card-accent-rgb), 0.26), transparent 50%);
}

.ubx-place-card.is-premium-locked .ubx-place-card-media {
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    background:
        radial-gradient(circle at 50% 15%, rgba(var(--ubx-kind-premium-rgb), 0.28), transparent 42%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.065) 0 1px, transparent 1px 18px),
        linear-gradient(135deg, rgba(25, 18, 12, 0.94), rgba(6, 7, 10, 0.98));
}

[data-bs-theme="light"] .ubx-place-card.is-premium-locked .ubx-place-card-media {
    background:
        radial-gradient(circle at 50% 15%, rgba(var(--ubx-kind-premium-rgb), 0.24), transparent 42%),
        repeating-linear-gradient(135deg, rgba(72, 54, 38, 0.07) 0 1px, transparent 1px 18px),
        linear-gradient(135deg, rgba(255, 248, 238, 0.96), rgba(240, 226, 208, 0.92));
}

.ubx-place-card-lock-visual {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.1rem;
    color: var(--ubx-text);
    text-align: center;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.34);
    border-radius: 1.1rem;
    backdrop-filter: blur(14px);
}

[data-bs-theme="light"] .ubx-place-card-lock-visual {
    background: rgba(255, 250, 243, 0.66);
}

.ubx-place-card-lock-icon {
    width: 2.35rem;
    height: 2.35rem;
    color: var(--ubx-kind-premium);
}

.ubx-place-card-lock-actions {
    position: relative;
    z-index: 4;
}

.ubx-place-card-media .ubx-place-card-category,
.ubx-place-card-media .ubx-place-card-premium,
.ubx-place-card-media .ubx-place-card-privacy,
.ubx-card-stat {
    position: absolute;
    z-index: 2;
}

.ubx-list-card-media {
    --ubx-card-accent: var(--ubx-kind-list);
    --ubx-card-accent-rgb: var(--ubx-kind-list-rgb);
    background:
        linear-gradient(145deg, rgba(var(--ubx-kind-list-rgb), 0.18), transparent),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 16px),
        linear-gradient(35deg, #181c2c, #05060a);
}

.ubx-place-card-media .badge {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.52) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ubx-place-card-media .ubx-place-card-category {
    top: 0.85rem;
    left: 0.85rem;
    max-width: calc(100% - 1.7rem);
}

.ubx-place-card-media.ubx-place-card-media-premium .ubx-place-card-category {
    max-width: calc(100% - 8.4rem);
}

.ubx-place-card-media .ubx-place-card-premium {
    top: 0.85rem;
    right: 0.85rem;
    left: auto;
    max-width: 7.1rem;
}

.ubx-place-card-media .ubx-place-card-privacy {
    bottom: 0.85rem;
    left: 0.85rem;
    max-width: calc(100% - 8rem);
}

.ubx-place-card-media .ubx-premium-pill {
    color: #1b1007 !important;
    background:
        linear-gradient(135deg, #fff6ce 0%, #ffc66d 46%, #f59e0b 100%) !important;
    border-color: rgba(255, 246, 214, 0.9);
}

.ubx-place-card-media .ubx-premium-pill .ubx-premium-mark {
    color: #1b1007 !important;
}

[data-bs-theme="light"] .ubx-place-card-media .badge {
    color: var(--ubx-text) !important;
    background: rgba(255, 250, 243, 0.78) !important;
    border-color: rgba(72, 54, 38, 0.14);
}

[data-bs-theme="light"] .ubx-place-card-media .ubx-premium-pill {
    color: #1b1007 !important;
    background:
        linear-gradient(135deg, #fff7d6 0%, #f4b35f 48%, #c76f12 100%) !important;
    border-color: rgba(87, 50, 14, 0.24);
}

.ubx-card-stat {
    right: 0.85rem;
    bottom: 0.85rem;
    padding: 0.38rem 0.62rem;
    color: var(--ubx-text);
    background: rgba(0, 0, 0, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

[data-bs-theme="light"] .ubx-card-stat {
    color: var(--ubx-text);
    background: rgba(255, 250, 243, 0.78);
    border-color: rgba(72, 54, 38, 0.14);
}

.ubx-region-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.45rem;
    min-height: 10rem;
    padding: 1rem;
    --ubx-card-accent: var(--ubx-kind-region);
    --ubx-card-accent-rgb: var(--ubx-kind-region-rgb);
    color: var(--ubx-text);
    text-decoration: none;
    background:
        radial-gradient(circle at top right, rgba(138, 164, 255, 0.15), transparent 55%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
    border: 1px solid var(--ubx-border);
    border-radius: 1.25rem;
}

.ubx-region-card:hover {
    color: var(--ubx-text);
    background:
        radial-gradient(circle at top right, rgba(var(--ubx-card-accent-rgb), 0.18), transparent 55%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
    transform: perspective(900px) translateY(-3px) scale(1.004) rotateX(0.35deg) rotateY(0.3deg);
}

.ubx-region-card-label {
    color: var(--ubx-card-accent);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.ubx-region-card strong {
    font-size: 1.35rem;
    line-height: 1.1;
}

.ubx-region-card small {
    color: var(--ubx-muted);
    font-weight: 700;
}

.ubx-region-community-block {
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--ubx-kind-chat-rgb), 0.18);
}

.ubx-type-feature-block {
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--ubx-kind-list-rgb), 0.2);
}

.ubx-type-feature-block::before {
    content: "";
    position: absolute;
    inset: auto -9rem -14rem auto;
    width: 28rem;
    height: 28rem;
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-kind-list-rgb), 0.15), transparent 65%);
}

.ubx-region-community-block::before {
    content: "";
    position: absolute;
    inset: -35% auto auto -8rem;
    width: 24rem;
    height: 24rem;
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-kind-chat-rgb), 0.16), transparent 65%);
}

.ubx-region-community-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.55rem;
    min-height: 13rem;
    padding: 1rem;
    --ubx-card-accent: var(--ubx-kind-region);
    --ubx-card-accent-rgb: var(--ubx-kind-region-rgb);
    color: var(--ubx-text);
    text-decoration: none;
    background:
        radial-gradient(circle at top right, rgba(var(--ubx-card-accent-rgb), 0.16), transparent 58%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.18);
    border-radius: 1.35rem;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.ubx-region-community-card:hover {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-card-accent-rgb), 0.34);
    background:
        radial-gradient(circle at top right, rgba(var(--ubx-card-accent-rgb), 0.23), transparent 58%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045));
    transform: perspective(900px) translateY(-3px) scale(1.004) rotateX(0.35deg);
}

.ubx-region-community-icon {
    display: inline-grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    color: var(--ubx-card-accent);
    background: rgba(var(--ubx-card-accent-rgb), 0.12);
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.24);
    border-radius: 0.95rem;
}

.ubx-region-community-title {
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.18;
}

.ubx-region-community-card small {
    color: var(--ubx-muted);
    font-weight: 700;
    line-height: 1.45;
}

.ubx-nearby-card {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    color: var(--ubx-text);
    background:
        radial-gradient(circle at top right, rgba(var(--ubx-primary-rgb), 0.13), transparent 50%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
    border: 1px solid var(--ubx-border);
    border-radius: 1.3rem;
}

.ubx-nearby-card:hover {
    transform: perspective(900px) translateY(-3px) scale(1.004) rotateX(0.35deg);
}

.ubx-distance-badge {
    display: inline-flex;
    padding: 0.4rem 0.65rem;
    color: #160d08;
    background: var(--ubx-primary);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 900;
}

.ubx-section-rankings {
    background:
        radial-gradient(circle at 14% 16%, rgba(var(--ubx-primary-rgb), 0.1), transparent 24rem),
        radial-gradient(circle at 88% 20%, rgba(138, 164, 255, 0.1), transparent 22rem);
}

.ubx-rank-list {
    display: grid;
    gap: 0.7rem;
    padding: 0;
    margin: 1rem 0 0;
    list-style: none;
    counter-reset: ubx-rank;
}

.ubx-rank-list li {
    counter-increment: ubx-rank;
}

.ubx-rank-list a,
.ubx-rank-link {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    --ubx-card-accent: var(--ubx-primary);
    --ubx-card-accent-rgb: var(--ubx-primary-rgb);
    color: var(--ubx-text);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
}

[data-bs-theme="light"] .ubx-rank-list a,
[data-bs-theme="light"] .ubx-rank-link,
[data-bs-theme="light"] .ubx-phone-card,
[data-bs-theme="light"] .ubx-phone-row,
[data-bs-theme="light"] .ubx-breadcrumb,
[data-bs-theme="light"] .ubx-media-card,
[data-bs-theme="light"] .ubx-media-detail {
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(72, 54, 38, 0.14);
}

.ubx-rank-list a {
    position: relative;
    padding-left: 3.1rem;
}

.ubx-rank-list a::before {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    color: #160d08;
    content: counter(ubx-rank);
    background: var(--ubx-primary);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    transform: translateY(-50%);
}

.ubx-rank-list a:hover,
.ubx-rank-link:hover {
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.075);
    transform: translateY(-1px);
}

.ubx-rank-list small,
.ubx-rank-link span {
    color: var(--ubx-muted);
    font-weight: 700;
}

.ubx-premium {
    --ubx-card-accent: var(--ubx-kind-premium);
    --ubx-card-accent-rgb: var(--ubx-kind-premium-rgb);
    background:
        radial-gradient(circle at top right, rgba(var(--ubx-kind-premium-rgb), 0.22), transparent 22rem),
        linear-gradient(145deg, rgba(32, 27, 19, 0.96), rgba(10, 11, 16, 0.95));
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.26);
    box-shadow:
        0 24px 76px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(var(--ubx-kind-premium-rgb), 0.08);
}

[data-bs-theme="light"] .ubx-premium {
    background:
        radial-gradient(circle at top right, rgba(var(--ubx-kind-premium-rgb), 0.18), transparent 22rem),
        linear-gradient(145deg, rgba(255, 250, 241, 0.96), rgba(241, 225, 205, 0.9));
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.22);
}

.ubx-premium-product-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 14px 34px rgba(var(--ubx-kind-premium-rgb), 0.22);
}

.ubx-premium-feature-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: center;
    padding: 0.62rem 0.75rem;
    color: var(--ubx-text);
    background: rgba(var(--ubx-kind-premium-rgb), 0.08);
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.16);
    border-radius: 0.9rem;
    font-size: 0.92rem;
    font-weight: 800;
}

.ubx-premium-feature-list .ubx-premium-choice-state {
    width: 1.25rem;
    height: 1.25rem;
    color: #221407;
    background: var(--ubx-kind-premium);
    box-shadow: none;
}

.ubx-premium-feature-list .ubx-premium-choice-state svg {
    width: 0.68rem;
    height: 0.68rem;
}

.ubx-premium-comparison {
    position: relative;
    overflow: hidden;
    --ubx-card-accent: var(--ubx-kind-premium);
    --ubx-card-accent-rgb: var(--ubx-kind-premium-rgb);
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.24);
}

.ubx-premium-comparison::before {
    position: absolute;
    inset: -10rem -8rem auto auto;
    z-index: -1;
    width: 26rem;
    height: 26rem;
    content: "";
    background:
        radial-gradient(circle, rgba(var(--ubx-card-accent-rgb), 0.14), transparent 68%);
    border-radius: 999px;
    filter: blur(10px);
}

.ubx-premium-decision {
    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.28),
        0 0 26px rgba(var(--ubx-kind-premium-rgb), 0.12);
}

.ubx-premium-choice {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.16);
    border-radius: 1.25rem;
}

.ubx-premium-tier-overview {
    --ubx-card-accent: var(--ubx-kind-premium);
    --ubx-card-accent-rgb: var(--ubx-kind-premium-rgb);
}

.ubx-premium-tier-card .ubx-premium-choice-header {
    min-height: 11.5rem;
}

.ubx-premium-tier-icon {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    color: var(--ubx-kind-premium);
    background: rgba(var(--ubx-kind-premium-rgb), 0.12);
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.24);
    border-radius: 1rem;
}

.ubx-premium-tier-card .ubx-premium-choice-state {
    color: var(--ubx-kind-premium);
    background: rgba(var(--ubx-kind-premium-rgb), 0.1);
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.22);
}

.ubx-premium-choice-header {
    display: flex;
    flex-direction: column;
    min-height: 10rem;
}

.ubx-premium-choice-header .text-secondary {
    max-width: 32rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.ubx-premium-choice-featured {
    background:
        radial-gradient(circle at top right, rgba(var(--ubx-kind-premium-rgb), 0.2), transparent 58%),
        rgba(255, 255, 255, 0.075);
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.38);
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.18),
        0 0 22px rgba(var(--ubx-kind-premium-rgb), 0.12);
}

.ubx-premium-choice-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 1.15rem;
}

.ubx-premium-choice-item {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: 0.58rem;
    align-items: center;
    min-height: 3.35rem;
    padding: 0.56rem 0.68rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.82rem;
}

.ubx-premium-choice-item strong,
.ubx-premium-choice-item small {
    display: block;
}

.ubx-premium-choice-item strong {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ubx-text);
    font-size: 0.84rem;
    line-height: 1.15;
}

.ubx-premium-choice-icon {
    width: 1em;
    height: 1em;
    color: rgba(var(--ubx-kind-premium-rgb), 0.92);
}

.ubx-premium-choice-item small {
    margin-top: 0.08rem;
    color: var(--ubx-muted);
    font-size: 0.77rem;
    font-weight: 700;
    line-height: 1.25;
}

.ubx-premium-featured-note {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    color: var(--ubx-kind-premium);
    background: rgba(var(--ubx-kind-premium-rgb), 0.1);
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.2);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.1;
}

.ubx-premium-choice-state {
    display: inline-grid;
    width: 1.28rem;
    height: 1.28rem;
    place-items: center;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
}

.ubx-premium-choice-state svg {
    width: 0.68rem;
    height: 0.68rem;
}

.ubx-premium-choice-item-muted .ubx-premium-choice-state {
    color: rgba(208, 213, 221, 0.82);
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.28);
}

.ubx-premium-choice-item-good {
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.24);
    background:
        linear-gradient(135deg, rgba(var(--ubx-kind-premium-rgb), 0.08), transparent),
        rgba(255, 255, 255, 0.052);
}

.ubx-premium-choice-item-good .ubx-premium-choice-state {
    color: #221407;
    background: var(--ubx-kind-premium);
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.38);
    box-shadow: 0 0 12px rgba(var(--ubx-kind-premium-rgb), 0.13);
}

.ubx-premium-choice-bridge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    color: #160d08;
    background: var(--ubx-kind-premium);
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(var(--ubx-kind-premium-rgb), 0.16);
    font-weight: 900;
}

.ubx-premium-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.85rem;
}

.ubx-premium-quick-row {
    display: grid;
    gap: 0.45rem;
    min-height: 9rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(var(--ubx-kind-premium-rgb), 0.14);
    border-radius: 1rem;
}

.ubx-premium-quick-row span {
    color: var(--ubx-text);
    font-weight: 900;
}

.ubx-premium-quick-row small {
    color: var(--ubx-muted);
    font-weight: 700;
}

.ubx-premium-quick-row strong {
    color: var(--ubx-kind-premium);
    font-weight: 900;
}

.ubx-premium-separator {
    position: relative;
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.ubx-premium-separator::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100%, 66rem);
    height: 1px;
    content: "";
    background:
        linear-gradient(90deg, transparent, rgba(var(--ubx-kind-premium-rgb), 0.52), rgba(var(--ubx-primary-rgb), 0.24), transparent);
    transform: translateX(-50%);
}

.ubx-premium-benefit {
    --ubx-card-accent: var(--ubx-kind-premium);
    --ubx-card-accent-rgb: var(--ubx-kind-premium-rgb);
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.18);
    transition:
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth);
}

.ubx-premium-benefit:hover {
    box-shadow:
        0 16px 46px rgba(0, 0, 0, 0.18),
        0 0 16px rgba(var(--ubx-card-accent-rgb), 0.1);
    transform: translateY(-2px);
}

.ubx-comparison-table {
    overflow: hidden;
    color: var(--ubx-text);
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.18);
    border-radius: 1.2rem;
    --bs-table-bg: transparent;
    --bs-table-color: var(--ubx-text);
    --bs-table-border-color: rgba(255, 255, 255, 0.09);
}

.ubx-comparison-table th,
.ubx-comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--bs-table-border-color);
}

.ubx-comparison-table thead th {
    color: var(--ubx-text);
    background: rgba(var(--ubx-card-accent-rgb), 0.12);
    border-bottom: 1px solid rgba(var(--ubx-card-accent-rgb), 0.22);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ubx-comparison-table tbody tr {
    transition:
        background var(--ubx-motion-smooth),
        transform var(--ubx-motion-smooth);
}

.ubx-comparison-table tbody tr:hover {
    background: rgba(var(--ubx-card-accent-rgb), 0.07);
    transform: translateY(-1px);
}

.ubx-comparison-table tbody tr:last-child th,
.ubx-comparison-table tbody tr:last-child td {
    border-bottom: 0;
}

.ubx-comparison-feature {
    color: var(--ubx-text);
    font-weight: 900;
}

.ubx-comparison-free {
    color: var(--ubx-muted);
}

.ubx-comparison-premium {
    color: var(--ubx-kind-premium);
    font-weight: 800;
}

.ubx-comparison-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    color: var(--ubx-text);
    background: rgba(var(--ubx-card-accent-rgb), 0.18);
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.28);
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(var(--ubx-card-accent-rgb), 0.1);
}

.ubx-comparison-badge-stacked {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.12rem;
    max-width: 7rem;
    padding: 0.48rem 0.75rem 0.5rem;
    border-radius: 1rem;
}

.ubx-comparison-badge-stacked small {
    color: var(--ubx-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.ubx-comparison-badge-stacked .ubx-premium-mark {
    line-height: 1.1;
}

@media (min-width: 992px) {
    .ubx-premium-choice-header {
        min-height: 11.25rem;
    }
}

[data-bs-theme="light"] .ubx-comparison-table {
    --bs-table-border-color: rgba(55, 43, 35, 0.1);
}

[data-bs-theme="light"] .ubx-comparison-table thead th {
    background: rgba(var(--ubx-card-accent-rgb), 0.13);
}

[data-bs-theme="light"] .ubx-premium-choice,
[data-bs-theme="light"] .ubx-premium-quick-row {
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.22);
}

[data-bs-theme="light"] .ubx-premium-choice-item {
    background: rgba(255, 255, 255, 0.48);
    border-color: rgba(72, 54, 38, 0.12);
}

[data-bs-theme="light"] .ubx-premium-choice-item-muted .ubx-premium-choice-state {
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.22);
}

[data-bs-theme="light"] .ubx-premium-choice-featured {
    background:
        radial-gradient(circle at top right, rgba(var(--ubx-kind-premium-rgb), 0.15), transparent 58%),
        rgba(255, 255, 255, 0.76);
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.34);
}

.ubx-error-page {
    position: relative;
    overflow: hidden;
}

.ubx-error-page::before {
    position: absolute;
    inset: 3rem auto auto -12rem;
    z-index: -1;
    width: 32rem;
    height: 32rem;
    content: "";
    background:
        radial-gradient(circle, rgba(var(--ubx-primary-rgb), 0.16), transparent 68%);
    border-radius: 999px;
    filter: blur(12px);
}

.ubx-error-card {
    position: relative;
    overflow: hidden;
    --ubx-card-accent: var(--ubx-kind-region);
    --ubx-card-accent-rgb: var(--ubx-kind-region-rgb);
}

.ubx-error-card::after {
    position: absolute;
    inset: auto -6rem -8rem auto;
    width: 18rem;
    height: 18rem;
    content: "";
    background: rgba(var(--ubx-card-accent-rgb), 0.16);
    border-radius: 999px;
    filter: blur(8px);
}

.ubx-error-code {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.8rem;
    color: #160d08;
    background: var(--ubx-primary);
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(var(--ubx-primary-rgb), 0.14);
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 900;
    letter-spacing: -0.08em;
    line-height: 1;
}

.ubx-error-search {
    max-width: 100%;
}

.ubx-error-tip {
    --ubx-card-accent: var(--ubx-kind-place);
    --ubx-card-accent-rgb: var(--ubx-kind-place-rgb);
    transition:
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        background var(--ubx-motion-smooth);
}

.ubx-error-tip:hover {
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(var(--ubx-card-accent-rgb), 0.1);
    transform: translateY(-2px);
}

.ubx-error-tip-map {
    --ubx-card-accent: var(--ubx-kind-region);
    --ubx-card-accent-rgb: var(--ubx-kind-region-rgb);
}

.ubx-error-tip-faq {
    --ubx-card-accent: var(--ubx-kind-category);
    --ubx-card-accent-rgb: var(--ubx-kind-category-rgb);
}

.ubx-phone-card {
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.4rem;
}

.ubx-phone-row {
    padding: 0.9rem 1rem;
    --ubx-card-accent: var(--ubx-primary);
    --ubx-card-accent-rgb: var(--ubx-primary-rgb);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    transition:
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        background var(--ubx-motion-smooth);
}

.ubx-app-promo .ubx-phone-row {
    display: flex;
    gap: 0.42rem;
    align-items: center;
}

.ubx-phone-row:hover {
    background: rgba(255, 255, 255, 0.075);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.16),
        0 0 14px rgba(var(--ubx-card-accent-rgb), 0.08);
    transform: translateY(-1px);
}

.ubx-planning-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.ubx-planning-check-card,
.ubx-planning-next-step {
    border: 1px solid rgba(var(--ubx-kind-list-rgb), 0.18);
    background:
        radial-gradient(circle at 85% 0%, rgba(var(--ubx-kind-list-rgb), 0.14), transparent 55%),
        rgba(255, 255, 255, 0.055);
    border-radius: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-planning-check-card {
    padding: 0.78rem 0.85rem;
}

.ubx-planning-check-card span {
    display: block;
    color: var(--ubx-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ubx-planning-check-card strong {
    display: block;
    margin-top: 0.18rem;
    color: var(--ubx-text);
    font-size: 1.08rem;
    line-height: 1.1;
}

.ubx-planning-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.ubx-planning-action-card {
    display: block;
    width: 100%;
    min-height: 100%;
    padding: 0.9rem;
    border: 1px solid rgba(var(--ubx-kind-list-rgb), 0.2);
    border-radius: 1.05rem;
    color: var(--ubx-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--ubx-kind-list-rgb), 0.16), transparent 52%),
        rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 12px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

button.ubx-planning-action-card {
    appearance: none;
    cursor: pointer;
}

.ubx-planning-action-card:hover,
.ubx-planning-action-card:focus-visible {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-kind-list-rgb), 0.36);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 16px 34px rgba(var(--ubx-kind-list-rgb), 0.13);
}

.ubx-planning-action-card span {
    display: block;
    color: var(--ubx-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ubx-planning-action-card strong {
    display: block;
    margin-top: 0.24rem;
    color: var(--ubx-text);
    font-size: 0.98rem;
    line-height: 1.15;
}

.ubx-planning-action-card small {
    display: block;
    margin-top: 0.38rem;
    color: var(--ubx-muted);
    line-height: 1.35;
}

.ubx-planning-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin-top: 0.72rem;
}

.ubx-planning-action-card.is-disabled {
    opacity: 0.72;
}

[data-bs-theme="light"] .ubx-planning-check-card,
[data-bs-theme="light"] .ubx-planning-next-step {
    background:
        radial-gradient(circle at 85% 0%, rgba(var(--ubx-kind-list-rgb), 0.10), transparent 55%),
        rgba(255, 255, 255, 0.72);
}

[data-bs-theme="light"] .ubx-planning-action-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--ubx-kind-list-rgb), 0.10), transparent 52%),
        rgba(255, 255, 255, 0.74);
}

@media (max-width: 991.98px) {
    .ubx-planning-action-grid {
        grid-template-columns: 1fr;
    }
}

.ubx-place-type-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    align-items: center;
    margin-top: 0.75rem;
}

.ubx-place-type-pill {
    --ubx-type-color: var(--ubx-primary);
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    max-width: 100%;
    padding: 0.28rem 0.56rem;
    overflow: hidden;
    color: var(--ubx-text);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--ubx-type-color) 16%, transparent),
            rgba(255, 255, 255, 0.055)
        );
    border: 1px solid color-mix(in srgb, var(--ubx-type-color) 34%, rgba(255, 255, 255, 0.14));
    border-radius: 999px;
}

.ubx-place-type-dot {
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--ubx-type-color);
    border-radius: 999px;
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--ubx-type-color) 18%, transparent);
}

.ubx-place-type-count {
    display: inline-grid;
    min-width: 1.2rem;
    height: 1.2rem;
    place-items: center;
    padding: 0 0.26rem;
    color: var(--ubx-text);
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.09);
    border-radius: 999px;
}

.ubx-section {
    position: relative;
}

.ubx-home-section {
    padding-top: clamp(4.5rem, 7vw, 7rem) !important;
    padding-bottom: clamp(4.5rem, 7vw, 7rem) !important;
}

.ubx-section-research {
    background:
        linear-gradient(90deg, rgba(var(--ubx-primary-rgb), 0.06), transparent 52%),
        linear-gradient(180deg, transparent, rgba(138, 164, 255, 0.035));
}

.ubx-section-categories {
    background:
        radial-gradient(circle at 18% 10%, rgba(var(--ubx-kind-category-rgb), 0.12), transparent 22rem),
        radial-gradient(circle at 85% 40%, rgba(var(--ubx-kind-place-rgb), 0.07), transparent 24rem);
}

.ubx-section-place-types {
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--ubx-kind-list-rgb), 0.08), transparent 26rem),
        linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.018), transparent);
}

.ubx-place-type-showcase {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(26rem, 1.1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}

.ubx-place-type-copy {
    max-width: 42rem;
}

.ubx-place-type-list {
    display: grid;
    gap: 0.7rem;
}

.ubx-place-type-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.95rem 1rem;
    color: var(--ubx-text);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 1.1rem;
    transition:
        transform var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        background var(--ubx-motion-smooth);
}

.ubx-place-type-row:hover,
.ubx-place-type-row:focus-visible {
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.068);
    border-color: color-mix(in srgb, var(--ubx-type-accent, var(--ubx-primary)) 44%, rgba(255, 255, 255, 0.14));
    transform: translateX(0.2rem);
}

.ubx-place-type-row-dot {
    width: 0.8rem;
    height: 0.8rem;
    background: var(--ubx-type-accent, var(--ubx-primary));
    border-radius: 999px;
    box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--ubx-type-accent, var(--ubx-primary)) 16%, transparent);
}

.ubx-place-type-row-body {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.ubx-place-type-row-title {
    font-weight: 900;
    line-height: 1.2;
}

.ubx-place-type-row-text {
    overflow: hidden;
    color: var(--ubx-muted);
    font-size: 0.88rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-place-type-row-count {
    padding: 0.28rem 0.55rem;
    color: var(--ubx-muted);
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 999px;
}

[data-bs-theme="light"] .ubx-place-type-row {
    background: rgba(255, 250, 243, 0.62);
    border-color: rgba(72, 54, 38, 0.11);
}

[data-bs-theme="light"] .ubx-place-type-row:hover,
[data-bs-theme="light"] .ubx-place-type-row:focus-visible {
    background: rgba(255, 250, 243, 0.86);
}

.ubx-feature-card,
.ubx-topic-card,
.ubx-category-card,
.ubx-content-card {
    position: relative;
    overflow: hidden;
    --ubx-card-accent: var(--ubx-primary);
    --ubx-card-accent-rgb: var(--ubx-primary-rgb);
}

.ubx-collapse-trigger {
    display: block;
    appearance: none;
    color: var(--ubx-text);
    font: inherit;
    cursor: pointer;
}

.ubx-collapse-trigger h3,
.ubx-collapse-trigger p {
    position: relative;
    z-index: 2;
}

.ubx-collapse-trigger h3 {
    margin-top: 0.65rem;
}

.ubx-collapse-trigger p {
    min-height: 3.3rem;
}

.ubx-section-research .ubx-collapse-trigger p,
.ubx-section-info .ubx-collapse-trigger p,
.ubx-section-place-types .ubx-content-card .small.text-secondary,
.ubx-section-categories .ubx-category-card .small.text-secondary {
    display: -webkit-box;
    min-height: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ubx-collapse-trigger:hover,
.ubx-collapse-trigger:focus-visible,
.ubx-collapse-trigger[aria-expanded="true"] {
    color: var(--ubx-text);
}

.ubx-collapse-trigger:focus-visible {
    outline: 0.18rem solid rgba(var(--ubx-card-accent-rgb), 0.42);
    outline-offset: 0.16rem;
}

.ubx-collapse-trigger[aria-expanded="true"] {
    background:
        radial-gradient(circle at 18% 8%, rgba(var(--ubx-card-accent-rgb), 0.18), transparent 16rem),
        rgba(255, 255, 255, 0.082);
    border-color: rgba(var(--ubx-card-accent-rgb), 0.36);
    box-shadow:
        0 14px 42px rgba(0, 0, 0, 0.18),
        0 0 18px rgba(var(--ubx-card-accent-rgb), 0.1);
}

.ubx-collapse-trigger[aria-expanded="true"] .ubx-link-icon {
    transform: rotate(90deg);
}

.ubx-collapse-trigger-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    color: var(--ubx-card-accent);
    background: rgba(var(--ubx-card-accent-rgb), 0.14);
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.28);
    border-radius: 0.95rem;
    box-shadow: 0 0 14px rgba(var(--ubx-card-accent-rgb), 0.08);
}

.ubx-collapse-stack {
    display: grid;
    gap: 1rem;
}

.ubx-collapse-panel {
    position: relative;
    overflow: hidden;
    --ubx-card-accent: var(--ubx-primary);
    --ubx-card-accent-rgb: var(--ubx-primary-rgb);
}

.ubx-collapse-panel::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.32rem;
    content: "";
    background: var(--ubx-card-accent);
    opacity: 0.9;
}

.ubx-collapse-panel::after {
    position: absolute;
    inset: -35% auto auto 52%;
    width: 28rem;
    height: 28rem;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-card-accent-rgb), 0.11), transparent 64%);
    transform: translateX(-50%);
}

.ubx-collapse-panel > * {
    position: relative;
    z-index: 2;
}

.ubx-feature-card::before,
.ubx-topic-card::before,
.ubx-category-card::before,
.ubx-content-card::before,
.ubx-place-card::before,
.ubx-region-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 3;
    width: 0.28rem;
    content: "";
    pointer-events: none;
    background: var(--ubx-card-accent, var(--ubx-primary));
    opacity: 0.84;
}

.ubx-feature-card:hover,
.ubx-topic-card:hover,
.ubx-category-card:hover,
.ubx-content-card:hover {
    transform: perspective(900px) translateY(-3px) scale(1.004) rotateX(0.35deg) rotateY(-0.25deg);
}

.ubx-inline-link-group {
    position: relative;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.ubx-inline-link-group span {
    width: 100%;
    color: var(--ubx-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ubx-inline-link-group a {
    display: inline-flex;
    max-width: 100%;
    padding: 0.24rem 0.52rem;
    color: var(--ubx-text);
    font-size: 0.78rem;
    line-height: 1.2;
    text-decoration: none;
    background: rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.1);
    border: 1px solid rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.22);
    border-radius: 999px;
}

.ubx-inline-link-group a:hover,
.ubx-inline-link-group a:focus-visible {
    color: var(--ubx-text);
    background: rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.18);
    border-color: rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.38);
    transform: translateY(-1px);
}

.ubx-feature-flow-heading {
    max-width: 52rem;
}

.ubx-section-features {
    background:
        radial-gradient(circle at 12% 5%, rgba(var(--ubx-kind-region-rgb), 0.12), transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(var(--ubx-kind-list-rgb), 0.09), transparent 26rem),
        linear-gradient(180deg, transparent, rgba(var(--ubx-primary-rgb), 0.035));
}

.ubx-feature-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    align-items: stretch;
}

.ubx-home-feature-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 14.5rem;
    padding: clamp(1.05rem, 2vw, 1.45rem);
    --ubx-card-accent: var(--ubx-primary);
    --ubx-card-accent-rgb: var(--ubx-primary-rgb);
    border-color: rgba(var(--ubx-card-accent-rgb), 0.22);
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--ubx-card-accent-rgb), 0.18), transparent 15rem),
        linear-gradient(145deg, var(--ubx-surface), rgba(255, 255, 255, 0.035));
    transition:
        transform var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth);
}

.ubx-home-feature-card::after {
    position: absolute;
    right: -6rem;
    bottom: -7rem;
    width: 15rem;
    height: 15rem;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-card-accent-rgb), 0.12), transparent 66%);
}

.ubx-home-feature-card > * {
    position: relative;
    z-index: 2;
}

.ubx-home-feature-card-head {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    min-width: 0;
    margin-bottom: 1rem;
}

.ubx-home-feature-card-head > div:last-child {
    min-width: 0;
}

.ubx-home-feature-card .text-secondary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ubx-home-feature-card.is-wide {
    grid-column: span 2;
}

.ubx-home-feature-card.is-wide .text-secondary {
    max-width: 42rem;
}

.ubx-home-feature-card:hover {
    border-color: rgba(var(--ubx-card-accent-rgb), 0.34);
    box-shadow:
        0 1.1rem 2.6rem rgba(0, 0, 0, 0.2),
        0 0 1rem rgba(var(--ubx-card-accent-rgb), 0.08);
    transform: translateY(-2px);
}

.ubx-feature-overview-card {
    border-color: rgba(var(--ubx-kind-list-rgb), 0.18);
}

.ubx-feature-check {
    display: inline-grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    color: var(--ubx-kind-list);
    background: rgba(var(--ubx-kind-list-rgb), 0.12);
    border: 1px solid rgba(var(--ubx-kind-list-rgb), 0.24);
    border-radius: 999px;
}

.ubx-feature-bullet-list {
    display: grid;
    gap: 0.45rem;
    padding-left: 1.1rem;
    margin-bottom: 1.35rem;
}

.ubx-feature-bullet-list li::marker {
    color: var(--ubx-card-accent);
}

.ubx-feature-flow {
    position: relative;
    display: grid;
    gap: 1.3rem;
}

.ubx-feature-flow::before {
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 50%;
    width: 1px;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(var(--ubx-primary-rgb), 0.45), rgba(var(--ubx-kind-region-rgb), 0.24), transparent);
    transform: translateX(-50%);
}

.ubx-feature-flow-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(2.6rem, 4rem) minmax(0, 1fr);
    align-items: center;
    --ubx-card-accent: var(--ubx-primary);
    --ubx-card-accent-rgb: var(--ubx-primary-rgb);
}

.ubx-feature-flow-item.ubx-kind-region {
    --ubx-card-accent: var(--ubx-kind-region);
    --ubx-card-accent-rgb: var(--ubx-kind-region-rgb);
}

.ubx-feature-flow-item.ubx-kind-list {
    --ubx-card-accent: var(--ubx-kind-list);
    --ubx-card-accent-rgb: var(--ubx-kind-list-rgb);
}

.ubx-feature-flow-item.ubx-kind-chat {
    --ubx-card-accent: var(--ubx-kind-chat);
    --ubx-card-accent-rgb: var(--ubx-kind-chat-rgb);
}

.ubx-feature-flow-item.ubx-kind-premium {
    --ubx-card-accent: var(--ubx-kind-premium);
    --ubx-card-accent-rgb: var(--ubx-kind-premium-rgb);
}

.ubx-home-feature-card.ubx-kind-region {
    --ubx-card-accent: var(--ubx-kind-region);
    --ubx-card-accent-rgb: var(--ubx-kind-region-rgb);
}

.ubx-home-feature-card.ubx-kind-list {
    --ubx-card-accent: var(--ubx-kind-list);
    --ubx-card-accent-rgb: var(--ubx-kind-list-rgb);
}

.ubx-home-feature-card.ubx-kind-chat {
    --ubx-card-accent: var(--ubx-kind-chat);
    --ubx-card-accent-rgb: var(--ubx-kind-chat-rgb);
}

.ubx-home-feature-card.ubx-kind-premium {
    --ubx-card-accent: var(--ubx-kind-premium);
    --ubx-card-accent-rgb: var(--ubx-kind-premium-rgb);
}

.ubx-feature-flow-marker {
    z-index: 3;
    display: grid;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    justify-self: center;
    color: var(--ubx-text);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.24), transparent 42%),
        rgba(var(--ubx-card-accent-rgb), 0.2);
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.46);
    border-radius: 999px;
    box-shadow:
        0 0 0 0.42rem rgba(var(--ubx-card-accent-rgb), 0.06),
        0 1rem 2.4rem rgba(0, 0, 0, 0.22);
}

.ubx-feature-flow-card {
    position: relative;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: clamp(1.2rem, 3vw, 2rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--ubx-card-accent-rgb), 0.22), transparent 16rem),
        linear-gradient(145deg, var(--ubx-surface), rgba(255, 255, 255, 0.045));
    border-color: rgba(var(--ubx-card-accent-rgb), 0.22);
    transition:
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth);
}

.ubx-feature-flow-card::after {
    position: absolute;
    right: -7rem;
    bottom: -8rem;
    width: 18rem;
    height: 18rem;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-card-accent-rgb), 0.16), transparent 66%);
}

.ubx-feature-flow-title {
    line-height: 1.18;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.ubx-feature-flow-item.is-reverse .ubx-feature-flow-card {
    grid-column: 3;
}

.ubx-feature-flow-icon {
    display: grid;
    flex: 0 0 3.1rem;
    width: 3.1rem;
    height: 3.1rem;
    place-items: center;
    color: var(--ubx-card-accent);
    background: rgba(var(--ubx-card-accent-rgb), 0.13);
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.28);
    border-radius: 1.05rem;
    box-shadow: 0 0 1.2rem rgba(var(--ubx-card-accent-rgb), 0.1);
}

.ubx-feature-flow-card > * {
    position: relative;
    z-index: 2;
}

.ubx-feature-flow-card:hover {
    transform: translateY(-2px);
}

.ubx-home-strip {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: 1rem;
    align-items: center;
}

.ubx-home-strip::after {
    position: absolute;
    inset: auto -8rem -11rem auto;
    width: 22rem;
    height: 22rem;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-kind-list-rgb), 0.12), transparent 68%);
}

.ubx-home-list-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    --ubx-card-accent: var(--ubx-kind-list);
    --ubx-card-accent-rgb: var(--ubx-kind-list-rgb);
    border-color: rgba(var(--ubx-card-accent-rgb), 0.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--ubx-card-accent-rgb), 0.15), transparent 18rem),
        linear-gradient(145deg, var(--ubx-surface), rgba(255, 255, 255, 0.035));
}

.ubx-home-list-card::after {
    position: absolute;
    right: -5rem;
    bottom: -6rem;
    width: 14rem;
    height: 14rem;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-card-accent-rgb), 0.13), transparent 68%);
}

.ubx-home-list-card > * {
    position: relative;
    z-index: 1;
}

.ubx-home-list-card-head {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    background:
        linear-gradient(90deg, rgba(var(--ubx-card-accent-rgb), 0.12), transparent),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.ubx-home-list-icon {
    display: grid;
    width: 2.85rem;
    height: 2.85rem;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ubx-card-accent);
    background: rgba(var(--ubx-card-accent-rgb), 0.13);
    border: 1px solid rgba(var(--ubx-card-accent-rgb), 0.25);
    border-radius: 1rem;
}

.ubx-home-list-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.ubx-home-list-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.ubx-home-list-stats span {
    padding: 0.3rem 0.58rem;
    color: var(--ubx-muted);
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
}

.ubx-home-list-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1rem;
}

.ubx-home-list-body .text-secondary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ubx-home-list-places {
    display: grid;
    gap: 0.5rem;
    margin-top: auto;
}

.ubx-home-list-places a {
    display: grid;
    gap: 0.08rem;
    padding: 0.62rem 0.72rem;
    color: var(--ubx-text);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 0.9rem;
    transition:
        transform var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        background var(--ubx-motion-smooth);
}

.ubx-home-list-places a:hover,
.ubx-home-list-places a:focus-visible {
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(var(--ubx-card-accent-rgb), 0.25);
    transform: translateX(0.12rem);
}

.ubx-home-list-places span {
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-home-list-places small {
    overflow: hidden;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-home-list-footer {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.25rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

[data-bs-theme="light"] .ubx-home-list-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--ubx-card-accent-rgb), 0.12), transparent 18rem),
        linear-gradient(145deg, rgba(255, 250, 243, 0.9), rgba(255, 255, 255, 0.56));
    border-color: rgba(72, 54, 38, 0.1);
}

[data-bs-theme="light"] .ubx-home-list-card-head {
    border-bottom-color: rgba(72, 54, 38, 0.08);
}

[data-bs-theme="light"] .ubx-home-list-stats span,
[data-bs-theme="light"] .ubx-home-list-places a {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(72, 54, 38, 0.1);
}

@media (max-width: 991.98px) {
    .ubx-place-type-showcase {
        grid-template-columns: 1fr;
    }

    .ubx-place-type-copy {
        max-width: none;
    }

    .ubx-feature-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-feature-flow::before {
        left: 1.625rem;
    }

    .ubx-feature-flow-item,
    .ubx-feature-flow-item.is-reverse {
        grid-template-columns: 3.25rem minmax(0, 1fr);
        gap: 1rem;
    }

    .ubx-feature-flow-marker {
        grid-column: 1;
    }

    .ubx-feature-flow-card,
    .ubx-feature-flow-item.is-reverse .ubx-feature-flow-card {
        grid-column: 2;
    }
}

@media (max-width: 575.98px) {
    .ubx-home-section {
        padding-top: 3.4rem !important;
        padding-bottom: 3.4rem !important;
    }

    .ubx-feature-overview-grid {
        grid-template-columns: 1fr;
    }

    .ubx-home-feature-card {
        grid-column: auto;
        min-height: 0;
        padding: 1.05rem;
    }

    .ubx-home-feature-card.is-wide {
        grid-column: auto;
    }

    .ubx-home-feature-card-head {
        align-items: flex-start;
        gap: 0.72rem;
    }

    .ubx-home-feature-card .ubx-feature-flow-title {
        font-size: 1.08rem;
        line-height: 1.2;
    }

    .ubx-home-feature-card .text-secondary {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    .ubx-home-feature-card .btn {
        width: 100%;
        justify-content: center;
    }

    .ubx-place-type-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ubx-place-type-row-count {
        grid-column: 2;
        justify-self: start;
    }

    .ubx-home-strip {
        grid-template-columns: 1fr;
    }

    .ubx-feature-flow-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ubx-section-place-scroll {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 30%, rgba(var(--ubx-kind-place-rgb), 0.1), transparent 24rem),
        radial-gradient(circle at 86% 50%, rgba(var(--ubx-kind-region-rgb), 0.08), transparent 26rem),
        linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.018), transparent);
}

.ubx-place-marquee {
    overflow: hidden;
    padding: 0.35rem 0 1.1rem;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ubx-place-marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.ubx-place-marquee.is-enhanced .ubx-place-marquee-track {
    animation: ubx-place-marquee 72s linear infinite;
}

.ubx-place-marquee:hover .ubx-place-marquee-track,
.ubx-place-marquee:focus-within .ubx-place-marquee-track,
.ubx-place-marquee.is-enhanced:hover .ubx-place-marquee-track,
.ubx-place-marquee.is-enhanced:focus-within .ubx-place-marquee-track {
    animation-play-state: paused;
}

.ubx-place-marquee-group {
    display: flex;
    flex: 0 0 auto;
    gap: 0.85rem;
    padding-right: 0.85rem;
}

.ubx-place-marquee-item {
    position: relative;
    display: grid;
    flex: 0 0 clamp(15rem, 22vw, 19rem);
    width: clamp(15rem, 22vw, 19rem);
    min-height: 7.25rem;
    align-content: center;
    gap: 0.32rem;
    padding: 1rem 1.05rem 1rem 1.2rem;
    overflow: hidden;
    color: var(--ubx-text);
    text-decoration: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
        rgba(9, 12, 12, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.3rem;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.18);
    transition:
        transform var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth),
        background var(--ubx-motion-smooth);
}

.ubx-place-marquee-item[data-place-marquee-url] {
    cursor: pointer;
}

.ubx-place-marquee-item::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.24rem;
    content: "";
    background: linear-gradient(180deg, var(--ubx-primary), var(--ubx-accent, var(--ubx-primary)));
    opacity: 0.85;
}

.ubx-place-marquee-item::after {
    position: absolute;
    right: -2.8rem;
    bottom: -3.5rem;
    width: 7rem;
    height: 7rem;
    content: "";
    background: radial-gradient(circle, rgba(var(--ubx-kind-region-rgb), 0.16), transparent 68%);
    border-radius: 999px;
}

.ubx-place-marquee-item:hover,
.ubx-place-marquee-item:focus-visible {
    color: var(--ubx-text);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.04)),
        rgba(9, 12, 12, 0.34);
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    transform: translateY(-0.16rem);
}

.ubx-place-marquee-kicker,
.ubx-place-marquee-title,
.ubx-place-marquee-meta {
    position: relative;
    z-index: 1;
}

.ubx-place-marquee-kicker {
    width: fit-content;
    max-width: 100%;
    padding: 0.18rem 0.5rem;
    overflow: hidden;
    color: var(--ubx-muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.065);
    border-radius: 999px;
}

.ubx-place-marquee-title {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.22;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-place-marquee-meta {
    overflow: hidden;
    color: var(--ubx-muted);
    font-size: 0.86rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-bs-theme="light"] .ubx-place-marquee-item {
    color: var(--ubx-text);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 250, 243, 0.56)),
        rgba(255, 250, 243, 0.74);
    border-color: rgba(72, 54, 38, 0.11);
    box-shadow: 0 1.1rem 2.8rem rgba(77, 57, 38, 0.12);
}

@keyframes ubx-place-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-33.333333%, 0, 0);
    }
}

@keyframes ubx-float-card {
    0%,
    100% {
        transform: rotate(1deg) translate3d(0, 0, 0);
    }

    50% {
        transform: rotate(0.35deg) translate3d(0, -0.45rem, 0);
    }
}

@keyframes ubx-map-dot-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 0.62rem rgba(var(--ubx-primary-rgb), 0.12),
            0 10px 24px rgba(0, 0, 0, 0.24);
    }

    50% {
        box-shadow:
            0 0 0 0.9rem rgba(var(--ubx-primary-rgb), 0.18),
            0 16px 34px rgba(0, 0, 0, 0.32);
    }
}

.ubx-faq {
    display: grid;
    gap: 0.9rem;
}

.ubx-faq .accordion-item {
    overflow: hidden;
    color: var(--ubx-text);
    background: linear-gradient(145deg, var(--ubx-surface), rgba(255, 255, 255, 0.035));
    border: 1px solid var(--ubx-border);
    border-radius: 1.1rem;
}

.ubx-faq .accordion-item.ubx-kind-premium {
    --ubx-card-accent: var(--ubx-kind-premium);
    --ubx-card-accent-rgb: var(--ubx-kind-premium-rgb);
    border-color: rgba(var(--ubx-kind-premium-rgb), 0.32);
    box-shadow: 0 0 18px rgba(var(--ubx-kind-premium-rgb), 0.07);
}

.ubx-faq .accordion-item.ubx-kind-premium .accordion-button {
    color: var(--ubx-kind-premium);
}

.ubx-faq .accordion-button {
    color: var(--ubx-text);
    background: transparent;
    font-weight: 800;
}

.ubx-faq .accordion-button:not(.collapsed) {
    color: var(--ubx-primary);
    background: rgba(var(--ubx-primary-rgb), 0.08);
    box-shadow: none;
}

.ubx-faq .accordion-button:focus {
    border-color: rgba(var(--ubx-primary-rgb), 0.35);
    box-shadow: 0 0 0 0.2rem rgba(var(--ubx-primary-rgb), 0.18);
}

.ubx-meta-pill {
    color: var(--ubx-text) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

a.ubx-meta-pill {
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

a.ubx-meta-pill:hover {
    color: var(--ubx-primary) !important;
    background: rgba(var(--ubx-primary-rgb), 0.1) !important;
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
}

.ubx-breadcrumb {
    display: inline-flex;
    max-width: 100%;
    padding: 0.45rem 0.65rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    backdrop-filter: blur(16px);
}

.ubx-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ubx-breadcrumb li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.ubx-breadcrumb li:not(:last-child)::after {
    margin: 0 0.45rem;
    color: rgba(255, 255, 255, 0.28);
    content: "/";
}

[data-bs-theme="light"] .ubx-breadcrumb li:not(:last-child)::after {
    color: rgba(72, 54, 38, 0.35);
}

.ubx-breadcrumb a {
    color: var(--ubx-text);
    text-decoration: none;
}

.ubx-breadcrumb a:hover {
    color: var(--ubx-primary);
}

.ubx-breadcrumb span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-media-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.75rem;
    height: 100%;
    padding: 0.85rem;
    color: var(--ubx-text);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ubx-border);
    border-radius: 1.2rem;
    --ubx-card-accent: var(--ubx-primary);
    --ubx-card-accent-rgb: var(--ubx-primary-rgb);
}

.ubx-media-card:hover {
    color: var(--ubx-text);
    transform: perspective(900px) translateY(-3px) scale(1.004) rotateX(0.35deg);
}

.ubx-media-card img,
.ubx-media-detail img,
.ubx-media-detail video {
    width: 100%;
    background: #0d130f;
    border-radius: 0.9rem;
    object-fit: cover;
}

[data-bs-theme="light"] .ubx-media-card img,
[data-bs-theme="light"] .ubx-media-detail img,
[data-bs-theme="light"] .ubx-media-detail video,
[data-bs-theme="light"] .ubx-video-thumb {
    background: #eadcc9;
}

.ubx-media-card img {
    aspect-ratio: 4 / 3;
}

.ubx-media-card small {
    color: var(--ubx-muted);
}

.ubx-image-lightbox .modal-dialog {
    max-width: min(96vw, 1180px);
}

.ubx-image-lightbox .modal-content {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.ubx-lightbox-figure {
    overflow: hidden;
    margin: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--ubx-primary-rgb), 0.18), transparent 32rem),
        rgba(6, 7, 11, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: clamp(1.1rem, 3vw, 2rem);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.45);
}

.ubx-lightbox-image {
    display: block;
    width: 100%;
    max-height: 82vh;
    object-fit: contain;
    background: #05070b;
}

.ubx-lightbox-caption {
    padding: 0.85rem 1.1rem 1rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
}

.ubx-lightbox-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 3;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0.65rem;
    background-color: rgba(6, 7, 11, 0.58);
    border-radius: 999px;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.28);
    opacity: 1;
}

.ubx-video-thumb {
    display: grid;
    aspect-ratio: 4 / 3;
    place-items: center;
    color: var(--ubx-primary);
    background:
        radial-gradient(circle at center, rgba(var(--ubx-primary-rgb), 0.16), transparent 45%),
        #0d130f;
    border-radius: 0.9rem;
    font-weight: 800;
}

.ubx-media-detail {
    overflow: hidden;
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ubx-border);
    border-radius: 1.6rem;
}

.ubx-media-detail img,
.ubx-media-detail video {
    max-height: 72vh;
    border-radius: 1.6rem 1.6rem 0 0;
}

.ubx-media-detail figcaption {
    padding: 1.25rem;
}

.ubx-comment {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ubx-comment:last-of-type {
    border-bottom: 0;
}

.ubx-separator {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--ubx-muted);
    font-size: 0.85rem;
}

.ubx-separator::before,
.ubx-separator::after {
    flex: 1;
    height: 1px;
    content: "";
    background: rgba(255, 255, 255, 0.12);
}

.ubx-auth-scene {
    position: relative;
    min-height: clamp(42rem, 78vh, 58rem);
    overflow: hidden;
    isolation: isolate;
}

.ubx-auth-scene::before,
.ubx-auth-scene::after {
    position: absolute;
    inset: auto;
    content: "";
    pointer-events: none;
    z-index: -2;
    border-radius: 999rem;
    filter: blur(4rem);
}

.ubx-auth-scene::before {
    width: 34rem;
    height: 34rem;
    left: 50%;
    top: 8%;
    transform: translateX(-50%);
    background:
        radial-gradient(circle, rgba(var(--ubx-primary-rgb), 0.18), transparent 64%),
        radial-gradient(circle at 70% 30%, rgba(var(--ubx-kind-premium-rgb), 0.12), transparent 58%);
}

.ubx-auth-scene::after {
    width: 46rem;
    height: 18rem;
    left: 50%;
    bottom: 3rem;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.08), transparent 68%);
    opacity: 0.72;
}

.ubx-auth-card {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-color: rgba(var(--ubx-primary-rgb), 0.24);
}

.ubx-auth-card::before {
    position: absolute;
    inset: -35% -20% auto auto;
    width: 16rem;
    height: 16rem;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-kind-premium-rgb), 0.16), transparent 66%);
    filter: blur(1.5rem);
}

.ubx-icon-pill {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--ubx-primary);
    background: rgba(var(--ubx-primary-rgb), 0.15);
    box-shadow: 0 14px 34px rgba(var(--ubx-primary-rgb), 0.14);
}

.ubx-icon-pill svg {
    width: 1.15rem;
    height: 1.15rem;
}

.ubx-premium-icon-pill {
    color: var(--ubx-kind-premium);
    background: rgba(var(--ubx-kind-premium-rgb), 0.15);
    box-shadow: 0 14px 34px rgba(var(--ubx-kind-premium-rgb), 0.16);
}

.ubx-auth-benefits {
    position: relative;
    z-index: 2;
    padding-top: 1rem;
    border-top: 1px solid var(--ubx-border);
}

.ubx-auth-benefit {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    height: 100%;
    padding: 0.7rem 0.75rem;
    color: var(--ubx-text);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.25;
    background: rgba(var(--ubx-primary-rgb), 0.08);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.16);
    border-radius: 1rem;
}

.ubx-auth-benefit-icon {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    place-items: center;
    color: var(--ubx-primary);
    background: rgba(var(--ubx-primary-rgb), 0.12);
    border-radius: 999px;
}

.ubx-auth-smoke {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
    mix-blend-mode: screen;
}

.ubx-auth-smoke span {
    position: absolute;
    display: block;
    width: clamp(14rem, 30vw, 30rem);
    height: clamp(14rem, 30vw, 30rem);
    left: var(--ubx-smoke-left);
    bottom: var(--ubx-smoke-bottom);
    border-radius: 999rem;
    background:
        radial-gradient(circle at 38% 42%, rgba(255, 255, 255, 0.16), transparent 0 28%, rgba(255, 255, 255, 0.08) 42%, transparent 70%),
        radial-gradient(circle at 62% 62%, rgba(var(--ubx-primary-rgb), 0.11), transparent 58%),
        radial-gradient(circle at 50% 50%, rgba(var(--ubx-kind-premium-rgb), 0.08), transparent 64%);
    filter: blur(1.25rem);
    transform: translate3d(-50%, 0, 0) scale(var(--ubx-smoke-scale));
    animation: ubx-auth-smoke-rise var(--ubx-smoke-duration) ease-in-out infinite;
    animation-delay: var(--ubx-smoke-delay);
}

.ubx-auth-smoke span:nth-child(1) {
    --ubx-smoke-left: 24%;
    --ubx-smoke-bottom: -8rem;
    --ubx-smoke-scale: 1;
    --ubx-smoke-duration: 16s;
    --ubx-smoke-delay: -3s;
}

.ubx-auth-smoke span:nth-child(2) {
    --ubx-smoke-left: 55%;
    --ubx-smoke-bottom: -10rem;
    --ubx-smoke-scale: 1.26;
    --ubx-smoke-duration: 21s;
    --ubx-smoke-delay: -11s;
}

.ubx-auth-smoke span:nth-child(3) {
    --ubx-smoke-left: 78%;
    --ubx-smoke-bottom: -7rem;
    --ubx-smoke-scale: 0.92;
    --ubx-smoke-duration: 18s;
    --ubx-smoke-delay: -7s;
}

@keyframes ubx-auth-smoke-rise {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 5rem, 0) scale(var(--ubx-smoke-scale)) rotate(0deg);
    }

    18% {
        opacity: 0.72;
    }

    52% {
        opacity: 0.42;
        transform: translate3d(calc(-50% + 2.4rem), -9rem, 0) scale(calc(var(--ubx-smoke-scale) * 1.18)) rotate(16deg);
    }

    100% {
        opacity: 0;
        transform: translate3d(calc(-50% - 2rem), -24rem, 0) scale(calc(var(--ubx-smoke-scale) * 1.45)) rotate(34deg);
    }
}

.ubx-ad {
    min-height: 5.5rem;
    display: grid;
    place-items: center;
    color: var(--ubx-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 1rem;
}

.ubx-section-blog {
    background:
        radial-gradient(circle at 18% 10%, rgba(var(--ubx-kind-region-rgb), 0.11), transparent 21rem),
        radial-gradient(circle at 88% 72%, rgba(var(--ubx-primary-rgb), 0.09), transparent 18rem);
}

.ubx-blog-card {
    position: relative;
    overflow: hidden;
    border-left: 0.22rem solid var(--ubx-kind-region);
    transition:
        transform var(--ubx-motion-smooth),
        box-shadow var(--ubx-motion-smooth),
        border-color var(--ubx-motion-smooth);
}

.ubx-blog-card:hover,
.ubx-blog-card:focus-within {
    transform: translateY(-0.16rem);
    border-color: var(--ubx-primary);
    box-shadow:
        0 1.1rem 2.4rem rgba(0, 0, 0, 0.18),
        0 0 1.15rem rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-blog-card-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.22), rgba(var(--ubx-kind-region-rgb), 0.14)),
        rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ubx-blog-card-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.ubx-blog-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform var(--ubx-motion-smooth), filter var(--ubx-motion-smooth);
}

.ubx-blog-card:hover .ubx-blog-card-cover img,
.ubx-blog-card:focus-within .ubx-blog-card-cover img {
    transform: scale(1.035);
    filter: saturate(1.05);
}

.ubx-blog-card-cover-empty {
    min-height: 7rem;
}

.ubx-blog-card-cover-fallback img {
    filter: saturate(0.95) contrast(1.02);
    opacity: 0.92;
}

.ubx-blog-content {
    font-size: 1.06rem;
    line-height: 1.78;
}

.ubx-blog-content h2,
.ubx-blog-content h3,
.ubx-blog-content h4 {
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    letter-spacing: -0.035em;
}

.ubx-blog-content p,
.ubx-blog-content ul,
.ubx-blog-content blockquote,
.ubx-blog-content pre,
.ubx-blog-media {
    margin-bottom: 1.35rem;
}

.ubx-blog-content a {
    color: var(--ubx-primary);
    font-weight: 700;
    text-underline-offset: 0.2em;
}

.ubx-blog-content blockquote {
    padding: 1rem 1.25rem;
    color: var(--ubx-muted);
    border-left: 0.22rem solid var(--ubx-primary);
    background: rgba(255, 255, 255, 0.035);
    border-radius: 0 1rem 1rem 0;
}

.ubx-share-box {
    position: relative;
    overflow: hidden;
    border-left: 0.22rem solid var(--ubx-card-accent, var(--ubx-primary));
}

.ubx-share-box::before {
    content: "";
    position: absolute;
    inset: -35% auto auto -15%;
    width: 12rem;
    height: 12rem;
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.16), transparent 68%);
}

.ubx-share-icon {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    color: var(--ubx-card-accent, var(--ubx-primary));
    background: rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.13);
    border: 1px solid rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.24);
    border-radius: 999px;
}

.ubx-share-icon-svg {
    width: 1.15rem;
    height: 1.15rem;
}

.ubx-share-input-group {
    position: relative;
    z-index: 1;
}

.ubx-share-input {
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.045);
    border-color: var(--ubx-border);
    font-size: 0.92rem;
}

.ubx-share-input:focus {
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.5);
    box-shadow: 0 0 0 0.2rem rgba(var(--ubx-card-accent-rgb, var(--ubx-primary-rgb)), 0.14);
}

.ubx-blog-content pre {
    padding: 1rem;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--ubx-border);
    border-radius: 1rem;
}

.ubx-blog-media {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--ubx-border);
    border-radius: 1.35rem;
}

.ubx-blog-media img,
.ubx-blog-media video,
.ubx-blog-content p > img {
    display: block;
    width: 100%;
    height: auto;
}

.ubx-blog-media figcaption {
    padding: 0.85rem 1rem;
    color: var(--ubx-muted);
    font-size: 0.92rem;
}

.ubx-chat-list-item {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform var(--ubx-motion-smooth), box-shadow var(--ubx-motion-smooth), border-color var(--ubx-motion-smooth);
}

.ubx-chat-list-item:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 1rem 2.5rem rgba(var(--ubx-kind-chat-rgb), 0.13);
}

.ubx-chat-avatar {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    color: #07140d;
    background: linear-gradient(135deg, var(--ubx-kind-chat), var(--ubx-primary));
    border-radius: 1rem;
    box-shadow: 0 0.75rem 1.7rem rgba(var(--ubx-kind-chat-rgb), 0.18);
}

.ubx-friend-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.ubx-chat-avatar-lg {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1.15rem;
}

.ubx-web-chat-shell {
    display: grid;
    min-height: min(72vh, 48rem);
    overflow: hidden;
    grid-template-rows: auto minmax(18rem, 1fr) auto;
}

.ubx-web-chat-shell-compact {
    min-height: min(52vh, 34rem);
    grid-template-rows: auto minmax(14rem, 1fr) auto;
}

.ubx-web-chat-header,
.ubx-web-chat-composer {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.14);
    border-color: var(--ubx-border);
}

.ubx-web-chat-header {
    border-bottom: 1px solid var(--ubx-border);
}

.ubx-web-chat-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    border-top: 1px solid var(--ubx-border);
}

.ubx-web-chat-messages {
    overflow-y: auto;
    padding: 1rem;
    scroll-behavior: smooth;
}

.ubx-web-message {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    margin: 0.55rem 0;
}

.ubx-web-message-own {
    justify-content: flex-end;
}

.ubx-web-message-other {
    justify-content: flex-start;
}

.ubx-web-message-bubble {
    max-width: min(38rem, 86%);
    padding: 0.78rem 0.95rem;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid var(--ubx-border);
    border-radius: 1.1rem;
}

.ubx-web-message-with-avatar .ubx-web-message-bubble {
    max-width: min(36rem, calc(100% - 3.4rem));
}

.ubx-web-message-own .ubx-web-message-bubble {
    color: #07140d;
    background: linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.95), rgba(var(--ubx-kind-chat-rgb), 0.85));
    border-color: rgba(var(--ubx-primary-rgb), 0.4);
}

.ubx-web-message-own .text-secondary {
    color: rgba(7, 20, 13, 0.68) !important;
}

.ubx-chat-day-divider {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.ubx-chat-day-divider span {
    padding: 0.25rem 0.7rem;
    color: var(--ubx-muted);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--ubx-border);
    border-radius: 999px;
    font-size: 0.78rem;
}

.ubx-chat-empty {
    display: grid;
    min-height: 18rem;
    place-items: center;
    align-content: center;
    text-align: center;
}

.ubx-chat-member-row,
.ubx-message-place {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ubx-border);
    border-radius: 0.9rem;
}

.ubx-message-place {
    justify-content: flex-start;
    font-size: 0.9rem;
}

.ubx-footer {
    margin-top: 4rem;
    padding: 3rem 0;
    color: var(--ubx-muted);
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--ubx-primary-rgb), 0.08), transparent 32rem),
        rgba(0, 0, 0, 0.28);
    border-top: 1px solid var(--ubx-border);
}

.ubx-footer-logo {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
}

.ubx-footer h2 {
    letter-spacing: 0.08em;
}

.ubx-footer .btn {
    white-space: nowrap;
}

.ubx-showcase {
    --showcase-depth: 1200px;
    --cinema-open: 0;
    --cinema-progress: 0;
    overflow: clip;
    background:
        radial-gradient(circle at 12% 12%, rgba(var(--ubx-primary-rgb), 0.16), transparent 30rem),
        radial-gradient(circle at 90% 18%, rgba(var(--ubx-ambient-secondary-rgb), 0.12), transparent 28rem),
        radial-gradient(circle at 72% 82%, rgba(var(--ubx-kind-list-rgb), 0.08), transparent 32rem);
}

.ubx-showcase-cinema-layer {
    position: fixed;
    inset: 0;
    z-index: 1030;
    pointer-events: none;
}

.ubx-cinema-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: calc(0.34 - (var(--cinema-open) * 0.08));
    mix-blend-mode: screen;
}

.ubx-cinema-letterbox {
    position: absolute;
    right: 0;
    left: 0;
    height: clamp(2.2rem, 6vw, 5.2rem);
    opacity: calc(0.86 - (var(--cinema-open) * 0.34));
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.92));
    transition: opacity 180ms ease;
}

.ubx-cinema-letterbox-top {
    top: 0;
    transform: translateY(calc(-58% * var(--cinema-open)));
}

.ubx-cinema-letterbox-bottom {
    bottom: 0;
    transform: translateY(calc(58% * var(--cinema-open)));
}

.ubx-cinema-vignette,
.ubx-cinema-grain {
    position: absolute;
    inset: 0;
}

.ubx-cinema-vignette {
    opacity: calc(0.38 - (var(--cinema-open) * 0.1));
    background:
        radial-gradient(circle at 50% 42%, transparent 0 44%, rgba(0, 0, 0, 0.28) 72%, rgba(0, 0, 0, 0.62) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.24), transparent 24%, transparent 72%, rgba(0, 0, 0, 0.3));
}

.ubx-cinema-grain {
    opacity: 0.035;
    mix-blend-mode: soft-light;
    background-image:
        repeating-radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(117deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px);
    background-size: 9rem 9rem, 15rem 15rem;
    animation: ubx-cinema-grain 14s steps(5) infinite;
}

.ubx-cinema-cue {
    position: absolute;
    right: max(1.2rem, env(safe-area-inset-right));
    bottom: max(1.2rem, env(safe-area-inset-bottom));
    display: grid;
    gap: 0.12rem;
    max-width: min(20rem, calc(100vw - 2.4rem));
    padding: 0.72rem 0.9rem;
    color: var(--ubx-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--ubx-primary-rgb), 0.18), transparent 8rem),
        rgba(8, 11, 15, 0.58);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
    transform:
        translateY(calc(0.65rem * (1 - var(--cinema-open))))
        scale(calc(0.98 + (var(--cinema-open) * 0.02)));
}

.ubx-cinema-cue small {
    color: var(--ubx-primary);
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-cinema-cue strong {
    font-size: 0.9rem;
    line-height: 1.2;
}

.ubx-showcase-hero,
.ubx-showcase-section {
    position: relative;
    padding: clamp(4rem, 9vw, 8rem) 0;
}

.ubx-showcase-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 980px;
}

.ubx-showcase.is-motion-managed .ubx-motion-scope:not(.is-cinema-active) *,
.ubx-showcase.is-motion-managed .ubx-motion-scope:not(.is-cinema-active)::before,
.ubx-showcase.is-motion-managed .ubx-motion-scope:not(.is-cinema-active)::after,
.ubx-showcase.is-motion-managed .ubx-showcase-section:not(.is-cinema-active) *,
.ubx-showcase.is-motion-managed .ubx-showcase-section:not(.is-cinema-active)::before,
.ubx-showcase.is-motion-managed .ubx-showcase-section:not(.is-cinema-active)::after {
    animation-play-state: paused !important;
}

.ubx-showcase-hero {
    min-height: 100vh;
    padding: 0;
    isolation: isolate;
}

.ubx-showcase-hero-grid,
.ubx-showcase-hero::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
}

.ubx-showcase-hero::before {
    z-index: -3;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.04), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(var(--ubx-primary-rgb), 0.08), transparent 42rem);
}

.ubx-showcase-hero-grid {
    z-index: -2;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 5rem 5rem;
    mask-image: radial-gradient(circle at 50% 44%, black, transparent 74%);
    transform: perspective(900px) rotateX(62deg) translateY(-18%);
    transform-origin: top;
}

.ubx-showcase-ambient {
    position: absolute;
    z-index: -1;
    width: min(44rem, 90vw);
    aspect-ratio: 1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(48px);
    opacity: 0.4;
}

.ubx-showcase-ambient-one {
    top: 8%;
    right: 5%;
    background: rgba(var(--ubx-primary-rgb), 0.32);
    animation: ubx-showcase-drift 16s ease-in-out infinite alternate;
}

.ubx-showcase-ambient-two {
    bottom: 6%;
    left: -10%;
    background: rgba(var(--ubx-ambient-secondary-rgb), 0.28);
    animation: ubx-showcase-drift 20s ease-in-out -4s infinite alternate-reverse;
}

.ubx-showcase-title {
    max-width: 15ch;
    font-size: clamp(3.25rem, 7.2vw, 6.2rem);
    font-weight: 950;
    line-height: 0.94;
    letter-spacing: -0.065em;
}

.ubx-showcase-lead {
    max-width: 42rem;
}

.ubx-hero-scene-panel {
    display: grid;
    gap: 0.18rem;
    max-width: 38rem;
    padding: 0.95rem 1.05rem;
    margin-top: 1.15rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.16);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.12), transparent 10rem),
        rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(16px);
}

.ubx-hero-scene-panel small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-hero-scene-panel strong {
    color: var(--ubx-text);
}

.ubx-hero-scene-panel span {
    color: var(--ubx-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.ubx-hero-scene-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.ubx-hero-scene-controls button {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.52rem 0.7rem;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ubx-hero-scene-controls button:hover,
.ubx-hero-scene-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    background: rgba(var(--ubx-primary-rgb), 0.1);
    box-shadow: 0 0.75rem 1.6rem rgba(var(--ubx-primary-rgb), 0.1);
    transform: translateY(-0.05rem);
}

.ubx-hero-scene-controls svg {
    width: 0.94rem;
    height: 0.94rem;
    color: var(--ubx-primary);
}

.ubx-hero-storyboard {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.62rem;
    max-width: 42rem;
    margin-top: 1rem;
    padding: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.35rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
        rgba(7, 11, 15, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1.4rem 3.2rem rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px);
}

.ubx-hero-storyboard::before {
    position: absolute;
    inset: 50% 1rem auto;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--ubx-primary-rgb), 0.42), transparent);
    transform: translateY(-50%);
    pointer-events: none;
}

.ubx-hero-storyboard > i {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.38rem rgba(var(--ubx-primary-rgb), 0.1),
        0 0 1.3rem rgba(var(--ubx-primary-rgb), 0.65);
    transform: translateY(-50%);
    animation: ubx-storyboard-cursor 12s ease-in-out infinite;
}

.ubx-hero-storyboard button {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.08rem;
    min-height: 5.35rem;
    padding: 0.82rem 0.82rem 0.75rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    transform: translateZ(0);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ubx-hero-storyboard button:hover,
.ubx-hero-storyboard button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
    background:
        radial-gradient(circle at 20% 0, rgba(var(--ubx-primary-rgb), 0.18), transparent 5rem),
        rgba(255, 255, 255, 0.06);
    box-shadow:
        0 1rem 2.4rem rgba(var(--ubx-primary-rgb), 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    transform: translateY(-0.12rem);
}

.ubx-hero-storyboard span {
    width: fit-content;
    color: var(--ubx-primary);
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.ubx-hero-storyboard strong {
    font-size: 0.88rem;
    line-height: 1.1;
}

.ubx-hero-storyboard small {
    color: var(--ubx-muted);
    font-size: 0.72rem;
    line-height: 1.25;
}

.ubx-showcase-hero .col-xl-6 > .ubx-hero-storyboard {
    max-width: none;
    margin: 0 0 0.65rem;
}

.ubx-showcase-hero .col-xl-6 > .ubx-hero-storyboard button {
    min-height: 4.35rem;
    padding: 0.62rem 0.68rem 0.58rem;
}

.ubx-showcase-reveal {
    opacity: 0;
    transform: translateY(2rem) scale(0.985);
    transition:
        opacity 760ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-showcase-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ubx-showcase-info-card {
    --info-left: 50vw;
    --info-top: 50vh;
    position: fixed;
    z-index: 1200;
    left: var(--info-left);
    top: var(--info-top);
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.95rem 1rem 1rem;
    pointer-events: none;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.24);
    border-radius: 1.25rem;
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.16), transparent 44%),
        rgba(var(--ubx-surface-rgb), 0.9);
    box-shadow:
        0 1.1rem 3.2rem rgba(0, 0, 0, 0.28),
        0 0 2.4rem rgba(var(--ubx-primary-rgb), 0.14);
    backdrop-filter: blur(22px);
    opacity: 0;
    transform: translate(-50%, calc(-100% - 0.7rem)) scale(0.96) rotateX(8deg);
    transform-origin: 50% 100%;
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-showcase-info-card::before {
    content: "";
    position: absolute;
    inset: 0.55rem auto 0.55rem 0.55rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ubx-primary), rgba(var(--ubx-ambient-secondary-rgb), 0.78));
    box-shadow: 0 0 1.2rem rgba(var(--ubx-primary-rgb), 0.45);
}

.ubx-showcase-info-card.is-below {
    transform: translate(-50%, 0.7rem) scale(0.96) rotateX(-8deg);
    transform-origin: 50% 0;
}

.ubx-showcase-info-card.is-visible {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 0.9rem)) scale(1) rotateX(0deg);
}

.ubx-showcase-info-card.is-visible.is-below {
    transform: translate(-50%, 0.9rem) scale(1) rotateX(0deg);
}

.ubx-showcase-info-card-label {
    display: block;
    margin: 0 0 0.35rem 0.55rem;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-showcase-info-card p {
    margin: 0 0 0 0.55rem;
    color: var(--ubx-body-color);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ubx-showcase [data-landing-showcase-target~="tooltip"] {
    position: relative;
}

.ubx-showcase [data-landing-showcase-target~="tooltip"].is-info-active {
    border-color: rgba(var(--ubx-primary-rgb), 0.48) !important;
    box-shadow:
        0 0.7rem 1.6rem rgba(0, 0, 0, 0.18),
        0 0 0 0.18rem rgba(var(--ubx-primary-rgb), 0.13) !important;
}

.ubx-showcase-chapter-rail {
    position: fixed;
    z-index: 1040;
    top: 50%;
    left: max(1rem, env(safe-area-inset-left));
    display: grid;
    gap: 0.42rem;
    width: 7.2rem;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 20% 10%, rgba(var(--ubx-primary-rgb), 0.13), transparent 8rem),
        rgba(8, 11, 15, 0.64);
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(20px);
    transform: translateY(-50%);
}

.ubx-chapter-progress {
    position: absolute;
    top: 0.7rem;
    bottom: 0.7rem;
    left: 0.55rem;
    width: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.ubx-chapter-progress::before {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: inherit;
    background: linear-gradient(180deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 0.95));
    transform: scaleY(var(--chapter-progress, 0));
    transform-origin: top;
}

.ubx-showcase-chapter-rail small {
    margin: 0.1rem 0.1rem 0.2rem 0.9rem;
    color: var(--ubx-primary);
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-showcase-chapter-rail button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.38rem;
    align-items: center;
    padding: 0.42rem 0.48rem 0.42rem 0.72rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 0;
    border-radius: 0.85rem;
    background: transparent;
    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.ubx-showcase-chapter-rail button:hover,
.ubx-showcase-chapter-rail button.is-active {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.12);
    transform: translateX(0.12rem);
}

.ubx-showcase-chapter-rail b {
    color: var(--ubx-primary);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
}

.ubx-showcase-chapter-rail span {
    overflow: hidden;
    font-size: 0.74rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-showcase-orbit {
    position: relative;
    min-height: min(42rem, 86vh);
    perspective: var(--showcase-depth);
    transform-style: preserve-3d;
}

.ubx-showcase-orbit,
.ubx-showcase-core-card,
.ubx-showcase-map-model,
.ubx-hero-place-card,
.ubx-hero-list-card,
.ubx-hero-chat-card,
.ubx-hero-log-card,
.ubx-hero-phone-preview,
.ubx-showcase-floating-card,
.ubx-showcase-map-route,
.ubx-showcase-pin {
    transition:
        opacity 280ms ease,
        filter 280ms ease,
        transform 680ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ubx-showcase-orbit-ring {
    position: absolute;
    inset: 14%;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.2);
    border-radius: 999px;
    transform: rotateX(68deg) rotateZ(calc(var(--scroll-progress, 0) * 70deg));
    box-shadow: 0 0 4rem rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-showcase-orbit-ring-b {
    inset: 21% 7%;
    border-color: rgba(var(--ubx-ambient-secondary-rgb), 0.18);
    transform: rotateX(72deg) rotateZ(calc(var(--scroll-progress, 0) * -95deg));
}

.ubx-showcase-core-card,
.ubx-map-exploder,
.ubx-tactical-board,
.ubx-showcase-final-card,
.ubx-showcase-feature {
    position: relative;
    border: 1px solid var(--ubx-border);
    background:
        radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 255, 255, 0.11), transparent 26rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        var(--ubx-surface);
    box-shadow:
        0 2rem 6rem rgba(0, 0, 0, 0.26),
        0 0 3rem rgba(var(--ubx-primary-rgb), 0.08);
    backdrop-filter: blur(24px);
}

.ubx-showcase-tilt {
    transform:
        perspective(var(--showcase-depth))
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.ubx-showcase-tilt:hover {
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    box-shadow:
        0 2.5rem 6.5rem rgba(0, 0, 0, 0.32),
        0 0 4rem rgba(var(--ubx-primary-rgb), 0.14);
}

.ubx-showcase-core-card {
    width: min(34rem, 92vw);
    margin: 4rem auto 0;
    padding: 1rem;
    border-radius: 2rem;
    transform:
        perspective(var(--showcase-depth))
        rotateX(calc(11deg - var(--scroll-lift, 0) * 5deg))
        rotateY(calc(-18deg + var(--scroll-lift, 0) * 13deg))
        translateY(calc(var(--scroll-lift, 0) * -1.2rem));
}

.ubx-showcase-device-top {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.25rem 0.35rem 0.9rem;
}

.ubx-showcase-device-top span {
    flex: 0 0 auto;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
}

.ubx-showcase-device-top strong {
    overflow: hidden;
    margin-left: 0.45rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-showcase-product-screen {
    position: relative;
    min-height: 25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.45rem;
    background:
        radial-gradient(circle at 20% 18%, rgba(var(--ubx-primary-rgb), 0.12), transparent 15rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(7, 11, 14, 0.86);
}

.ubx-showcase-map-model {
    position: absolute;
    inset: 4.8rem 1rem 1rem 12.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.15rem;
    background:
        linear-gradient(35deg, transparent 0 43%, rgba(82, 126, 142, 0.18) 43% 49%, transparent 49%),
        linear-gradient(112deg, transparent 0 34%, rgba(235, 224, 200, 0.08) 34% 35%, transparent 35%),
        radial-gradient(circle at 24% 32%, rgba(91, 131, 98, 0.2), transparent 13rem),
        linear-gradient(135deg, rgba(40, 57, 51, 0.86), rgba(15, 23, 25, 0.94));
    box-shadow:
        0 1.2rem 2.8rem rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.ubx-showcase-map-plane {
    position: absolute;
    inset: -10%;
    border-radius: 1.1rem;
    background:
        linear-gradient(24deg, transparent 0 42%, rgba(226, 218, 190, 0.12) 42% 43%, transparent 43%),
        linear-gradient(112deg, transparent 0 55%, rgba(226, 218, 190, 0.1) 55% 56%, transparent 56%),
        linear-gradient(78deg, transparent 0 34%, rgba(226, 218, 190, 0.08) 34% 35%, transparent 35%);
    opacity: 0.86;
}

.ubx-hero-product-sidebar,
.ubx-hero-place-card {
    position: absolute;
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background: rgba(10, 12, 18, 0.7);
    box-shadow: 0 1.1rem 2.4rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
}

.ubx-hero-product-sidebar {
    top: 1rem;
    left: 1rem;
    display: grid;
    gap: 0.45rem;
    width: 10.4rem;
    padding: 0.8rem;
}

.ubx-hero-product-sidebar label {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.ubx-hero-product-sidebar strong {
    font-size: 0.95rem;
}

.ubx-hero-product-sidebar span {
    padding: 0.38rem 0.5rem;
    color: var(--ubx-muted);
    font-size: 0.76rem;
    border-radius: 0.68rem;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-hero-product-sidebar span.active {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-hero-place-card {
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: 0.12rem;
    width: min(18rem, 52%);
    padding: 0.85rem;
    animation: ubx-reel-popover 5.6s ease-in-out infinite;
}

.ubx-hero-place-card small,
.ubx-hero-place-card span {
    color: var(--ubx-muted);
}

.ubx-hero-list-card,
.ubx-hero-chat-card,
.ubx-hero-log-card {
    position: absolute;
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background: rgba(10, 12, 18, 0.72);
    box-shadow: 0 1.1rem 2.4rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
}

.ubx-hero-list-card {
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: 0.14rem;
    width: min(18rem, 52%);
    padding: 0.85rem;
    opacity: 0;
    transform: translate3d(1.2rem, 1.3rem, 0) scale(0.94);
}

.ubx-hero-chat-card {
    bottom: 1rem;
    left: 1rem;
    width: 13rem;
    padding: 0.78rem;
    opacity: 0;
    transform: translate3d(-1.2rem, 1.3rem, 0) scale(0.94);
}

.ubx-hero-chat-card p {
    max-width: 88%;
    padding: 0.42rem 0.54rem;
    margin: 0.36rem 0 0;
    color: var(--ubx-muted);
    font-size: 0.76rem;
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.07);
}

.ubx-hero-chat-card p.right {
    margin-left: auto;
    color: #07140d;
    background: var(--ubx-primary);
}

.ubx-hero-log-card {
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: 0.65rem;
    align-items: center;
    width: min(19rem, 60%);
    padding: 0.82rem;
    opacity: 0;
    transform: translate3d(0.8rem, 1.4rem, 0) scale(0.94);
}

.ubx-hero-log-card > span {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    color: #07140d;
    font-size: 0.78rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-hero-list-card small,
.ubx-hero-chat-card small,
.ubx-hero-log-card small,
.ubx-hero-list-card span,
.ubx-hero-log-card em {
    color: var(--ubx-muted);
}

.ubx-hero-list-card strong,
.ubx-hero-log-card strong {
    display: block;
}

.ubx-hero-map-road,
.ubx-hero-map-water {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.ubx-hero-map-road {
    height: 0.2rem;
    border-radius: 999px;
    background: rgba(226, 218, 190, 0.22);
}

.ubx-hero-map-road.road-a {
    top: 46%;
    left: -6%;
    width: 112%;
    transform: rotate(-14deg);
}

.ubx-hero-map-road.road-b {
    top: 60%;
    left: 21%;
    width: 74%;
    transform: rotate(34deg);
}

.ubx-hero-map-water {
    right: -8%;
    bottom: 15%;
    width: 56%;
    height: 18%;
    border-radius: 999px;
    background: rgba(66, 126, 148, 0.22);
    transform: rotate(-16deg);
}

.ubx-showcase-map-route {
    position: absolute;
    z-index: 2;
    top: 42%;
    left: 21%;
    width: 58%;
    height: 20%;
    border-top: 3px solid rgba(var(--ubx-primary-rgb), 0.9);
    border-right: 3px solid rgba(var(--ubx-primary-rgb), 0.55);
    border-radius: 100% 30% 100% 20%;
    filter: drop-shadow(0 0 1rem rgba(var(--ubx-primary-rgb), 0.36));
    transform: rotate(-13deg);
}

.ubx-showcase-pin,
.ubx-map-exploder-marker {
    position: absolute;
    display: inline-grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    z-index: 3;
    border-radius: 999px;
    color: #07140d;
    font-size: 0.62rem;
    font-weight: 950;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.13),
        0 0 2rem rgba(var(--ubx-primary-rgb), 0.32);
}

.ubx-showcase-pin b {
    font: inherit;
}

.pin-a { top: 31%; left: 35%; width: 2.1rem; height: 2.1rem; }
.pin-b { top: 55%; left: 63%; width: 1.9rem; height: 1.9rem; animation-delay: -1.2s; }
.pin-c {
    top: 29%;
    right: 17%;
    width: 1.15rem;
    height: 1.15rem;
    background: var(--ubx-kind-category);
    animation-delay: -2.1s;
}

.ubx-showcase-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.12), transparent 58%);
    animation: ubx-showcase-scan 4.6s ease-in-out infinite;
}

.ubx-showcase-orbit[data-hero-scene="map"] .ubx-showcase-map-model,
.ubx-showcase-orbit[data-hero-scene="map"] .ubx-hero-product-sidebar,
.ubx-showcase-orbit[data-hero-scene="place"] .ubx-hero-place-card,
.ubx-showcase-orbit[data-hero-scene="plan"] .ubx-hero-list-card,
.ubx-showcase-orbit[data-hero-scene="team"] .ubx-hero-chat-card,
.ubx-showcase-orbit[data-hero-scene="team"] .ubx-hero-phone-preview,
.ubx-showcase-orbit[data-hero-scene="memory"] .ubx-hero-log-card {
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    box-shadow:
        0 1.35rem 3rem rgba(var(--ubx-primary-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-showcase-orbit[data-hero-scene="place"] .ubx-hero-place-card {
    transform: translate3d(-0.8rem, -0.6rem, 130px) scale(1.04);
}

.ubx-showcase-orbit[data-hero-scene="plan"] .ubx-hero-place-card,
.ubx-showcase-orbit[data-hero-scene="team"] .ubx-hero-place-card,
.ubx-showcase-orbit[data-hero-scene="memory"] .ubx-hero-place-card {
    opacity: 0.35;
    filter: saturate(0.82);
    transform: translate3d(0.6rem, 0.8rem, 0) scale(0.94);
}

.ubx-showcase-orbit[data-hero-scene="plan"] .ubx-hero-list-card {
    opacity: 1;
    transform: translate3d(-1.1rem, -0.8rem, 120px) scale(1.04);
}

.ubx-showcase-orbit[data-hero-scene="team"] .ubx-hero-chat-card {
    opacity: 1;
    transform: translate3d(0.8rem, -0.8rem, 130px) scale(1.05);
}

.ubx-showcase-orbit[data-hero-scene="team"] .ubx-hero-phone-preview {
    transform: perspective(800px) rotateX(2deg) rotateY(-12deg) rotateZ(2deg) translate3d(-0.8rem, -0.9rem, 150px) scale(1.05);
}

.ubx-showcase-orbit[data-hero-scene="team"] .ubx-showcase-map-route,
.ubx-showcase-orbit[data-hero-scene="plan"] .ubx-showcase-map-route {
    transform: rotate(-13deg) scale(1.08);
    filter: drop-shadow(0 0 1.5rem rgba(var(--ubx-primary-rgb), 0.46));
}

.ubx-showcase-orbit[data-hero-scene="memory"] .ubx-hero-log-card {
    opacity: 1;
    transform: translate3d(-1.2rem, -0.9rem, 130px) scale(1.05);
}

.ubx-showcase-orbit[data-hero-scene="memory"] .ubx-showcase-pin:not(.pin-b),
.ubx-showcase-orbit[data-hero-scene="memory"] .ubx-hero-product-sidebar,
.ubx-showcase-orbit[data-hero-scene="memory"] .ubx-hero-phone-preview {
    opacity: 0.48;
    filter: saturate(0.84);
}

.ubx-showcase-orbit[data-hero-scene="plan"] .ubx-showcase-command-strip [data-hero-step="plan"],
.ubx-showcase-orbit[data-hero-scene="team"] .ubx-showcase-command-strip [data-hero-step="team"],
.ubx-showcase-orbit[data-hero-scene="place"] .ubx-showcase-command-strip [data-hero-step="place"],
.ubx-showcase-orbit[data-hero-scene="map"] .ubx-showcase-command-strip [data-hero-step="map"] {
    color: #07140d;
    background: var(--ubx-primary);
}

.ubx-hero-phone-preview {
    position: absolute;
    z-index: 4;
    right: 2%;
    bottom: 2%;
    width: min(12.5rem, 34vw);
    min-height: 20rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.7rem;
    background:
        radial-gradient(circle at 24% 14%, rgba(var(--ubx-primary-rgb), 0.16), transparent 9rem),
        rgba(8, 10, 14, 0.82);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
    transform: perspective(800px) rotateX(3deg) rotateY(-18deg) rotateZ(4deg);
    animation: ubx-hero-phone-float 7.5s ease-in-out infinite;
}

.ubx-hero-phone-notch {
    width: 3.5rem;
    height: 0.32rem;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.ubx-hero-phone-preview strong,
.ubx-hero-phone-preview span {
    display: block;
    text-align: center;
}

.ubx-hero-phone-preview span {
    color: var(--ubx-primary);
    font-size: 0.78rem;
    font-weight: 850;
}

.ubx-hero-phone-map {
    position: relative;
    height: 13rem;
    margin-top: 0.8rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.1rem;
    background:
        repeating-linear-gradient(0deg, transparent 0 2rem, rgba(255, 255, 255, 0.055) 2rem 2.05rem),
        repeating-linear-gradient(90deg, transparent 0 2rem, rgba(255, 255, 255, 0.055) 2rem 2.05rem),
        rgba(13, 18, 20, 0.9);
}

.ubx-hero-phone-map .building,
.ubx-hero-phone-map .person,
.ubx-hero-phone-map .marker {
    position: absolute;
}

.ubx-hero-phone-map .building {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.62rem;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-hero-phone-map .building.a {
    top: 15%;
    left: 13%;
    width: 35%;
    height: 25%;
    transform: rotate(-7deg);
}

.ubx-hero-phone-map .building.b {
    right: 14%;
    bottom: 16%;
    width: 27%;
    height: 46%;
    transform: rotate(5deg);
}

.ubx-hero-phone-map .person,
.ubx-hero-phone-map .marker {
    display: inline-grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 999px;
}

.ubx-hero-phone-map .person {
    color: #07140d;
    font-size: 0.65rem;
    font-weight: 950;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.45rem rgba(var(--ubx-primary-rgb), 0.13);
}

.ubx-hero-phone-map .person.a { top: 41%; left: 31%; }
.ubx-hero-phone-map .person.b { top: 61%; right: 26%; }

.ubx-hero-phone-map .marker {
    top: 21%;
    right: 28%;
    color: var(--ubx-text);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.5);
    background: rgba(var(--ubx-kind-chat-rgb), 0.32);
}

.ubx-hero-phone-map .marker svg {
    width: 0.82rem;
    height: 0.82rem;
}

.ubx-showcase-command-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-top: 0.9rem;
}

.ubx-showcase-command-strip span {
    padding: 0.65rem 0.75rem;
    color: var(--ubx-muted);
    text-align: center;
    border: 1px solid var(--ubx-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-showcase-floating-card {
    position: absolute;
    display: grid;
    gap: 0.22rem;
    width: min(13rem, 44vw);
    padding: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.25rem;
    background: rgba(12, 14, 20, 0.66);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    animation: ubx-showcase-float 7s ease-in-out infinite;
}

.ubx-showcase-floating-card strong {
    line-height: 1.1;
}

.ubx-showcase-floating-card span {
    color: var(--ubx-muted);
    font-size: 0.86rem;
}

.card-map {
    top: 7%;
    left: 2%;
}

.card-chat {
    right: 0;
    bottom: 15%;
    animation-delay: -2s;
}

.card-logbook {
    left: 12%;
    bottom: 0;
    color: var(--ubx-kind-list);
    animation-delay: -4s;
}

.ubx-showcase-director {
    position: relative;
    z-index: 2;
    margin-top: clamp(-4rem, -5vw, -2rem);
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

.ubx-director-strip {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) auto minmax(24rem, 1.15fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    padding: clamp(1rem, 2.4vw, 1.45rem);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.6rem;
    background:
        radial-gradient(circle at 20% 40%, rgba(var(--ubx-primary-rgb), 0.14), transparent 16rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
        rgba(var(--ubx-surface-rgb), 0.72);
    box-shadow:
        0 1.8rem 4rem rgba(0, 0, 0, 0.2),
        0 0 3rem rgba(var(--ubx-primary-rgb), 0.06);
    backdrop-filter: blur(22px);
}

.ubx-tour-play-button .icon-pause,
.ubx-director-play .icon-pause,
.ubx-tour-play-button.is-playing .icon-play,
.ubx-director-play.is-playing .icon-play {
    display: none;
}

.ubx-tour-play-button.is-playing .icon-pause,
.ubx-director-play.is-playing .icon-pause {
    display: inline-block;
}

.ubx-director-play {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 1rem;
    color: #07140d;
    font-weight: 950;
    white-space: nowrap;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 1rem 2.2rem rgba(var(--ubx-primary-rgb), 0.2),
        0 0 0 0.4rem rgba(var(--ubx-primary-rgb), 0.08);
    transition:
        transform 180ms ease,
        filter 180ms ease,
        box-shadow 180ms ease;
}

.ubx-director-play:hover {
    filter: brightness(1.04);
    transform: translateY(-0.08rem);
    box-shadow:
        0 1.2rem 2.6rem rgba(var(--ubx-primary-rgb), 0.25),
        0 0 0 0.48rem rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-director-play.is-playing {
    color: var(--ubx-text);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.36);
    background:
        radial-gradient(circle at 18% 50%, rgba(var(--ubx-primary-rgb), 0.2), transparent 7rem),
        rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1rem 2.3rem rgba(0, 0, 0, 0.18),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.09);
}

.ubx-director-copy {
    display: grid;
    gap: 0.25rem;
}

.ubx-director-copy small {
    color: var(--ubx-primary);
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-director-copy strong {
    font-size: clamp(1.35rem, 2.5vw, 2.1rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.045em;
}

.ubx-director-copy span {
    color: var(--ubx-muted);
}

.ubx-director-frames {
    display: grid;
    grid-template-columns: auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.ubx-director-frames span {
    display: grid;
    gap: 0.18rem;
    min-width: 4.35rem;
    padding: 0.65rem 0.7rem;
    color: var(--ubx-muted);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-director-frames b {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.ubx-director-frames i {
    position: relative;
    display: block;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.ubx-director-frames i::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(var(--ubx-primary-rgb), 0), rgba(var(--ubx-primary-rgb), 0.75), rgba(var(--ubx-kind-chat-rgb), 0));
    transform: translateX(-110%);
    animation: ubx-director-flow 3.8s ease-in-out infinite;
}

.ubx-director-frames i:nth-of-type(2)::before { animation-delay: 0.55s; }
.ubx-director-frames i:nth-of-type(3)::before { animation-delay: 1.1s; }
.ubx-director-frames i:nth-of-type(4)::before { animation-delay: 1.65s; }

.ubx-director-demo-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.9rem;
}

.ubx-director-demo-board button {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem 0.72rem;
    align-items: start;
    min-height: 8.4rem;
    padding: 1rem;
    color: var(--ubx-text);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026)),
        rgba(var(--ubx-surface-rgb), 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1.1rem 2.7rem rgba(0, 0, 0, 0.17);
    transform: perspective(900px) translateZ(0);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease,
        background 180ms ease;
}

.ubx-director-demo-board button::after {
    position: absolute;
    inset: auto 1rem 0.9rem 1rem;
    height: 2px;
    content: "";
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--ubx-primary-rgb), 0.8), rgba(var(--ubx-kind-chat-rgb), 0.2));
    transform: scaleX(0.24);
    transform-origin: left;
    opacity: 0.52;
    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

.ubx-director-demo-board button:hover {
    border-color: rgba(var(--ubx-primary-rgb), 0.32);
    background:
        radial-gradient(circle at 15% 0, rgba(var(--ubx-primary-rgb), 0.15), transparent 8rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        rgba(var(--ubx-surface-rgb), 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 1.35rem 3.1rem rgba(var(--ubx-primary-rgb), 0.1),
        0 1rem 2.4rem rgba(0, 0, 0, 0.16);
    transform: perspective(900px) translateY(-0.18rem) rotateX(1deg);
}

.ubx-director-demo-board button:hover::after {
    transform: scaleX(1);
    opacity: 0.9;
}

.ubx-director-demo-icon {
    grid-row: span 2;
    display: inline-grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    color: var(--ubx-primary);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.2);
    border-radius: 0.88rem;
    background: rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-director-demo-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.ubx-director-demo-board strong {
    align-self: end;
    font-size: 1rem;
    line-height: 1.1;
}

.ubx-director-demo-board small {
    grid-column: 2;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    line-height: 1.42;
}

.ubx-film-spine {
    position: relative;
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.ubx-film-spine-board {
    display: grid;
    grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
    max-width: 1500px;
    margin: 0 auto;
    padding: clamp(1rem, 2.4vw, 1.6rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 12% 20%, rgba(var(--ubx-primary-rgb), 0.13), transparent 36%),
        rgba(255, 255, 255, 0.045);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(22px);
}

.ubx-film-spine-copy {
    display: grid;
    align-content: center;
}

.ubx-film-spine-copy h2 {
    margin: 0 0 0.8rem;
    color: #fff;
    font-size: clamp(1.65rem, 3vw, 2.7rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.ubx-film-spine-copy p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
}

.ubx-film-spine-reel {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.7rem;
    perspective: 1200px;
}

.ubx-film-spine-shot {
    position: relative;
    display: grid;
    min-height: 13rem;
    overflow: hidden;
    padding: 0.85rem;
    color: rgba(255, 255, 255, 0.76);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(9, 14, 12, 0.72);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
    transform-style: preserve-3d;
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.ubx-film-spine-shot:hover {
    color: #fff;
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    box-shadow: 0 24px 68px rgba(var(--ubx-primary-rgb), 0.14), 0 20px 55px rgba(0, 0, 0, 0.28);
    transform: translateY(-0.35rem) rotateX(4deg);
}

.ubx-film-spine-shot b {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    color: rgb(var(--ubx-primary-rgb));
    border-radius: 0.9rem;
    background: rgba(var(--ubx-primary-rgb), 0.13);
}

.ubx-film-spine-shot span {
    position: relative;
    z-index: 2;
    align-self: end;
}

.ubx-film-spine-shot strong,
.ubx-film-spine-shot small {
    display: block;
}

.ubx-film-spine-shot strong {
    color: #fff;
}

.ubx-film-spine-shot small {
    color: rgba(255, 255, 255, 0.55);
}

.ubx-film-spine-shot i {
    position: absolute;
    inset: auto 0.7rem 4.6rem;
    height: 4.2rem;
    overflow: hidden;
    border-radius: 0.9rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 32% 38%, rgba(var(--ubx-primary-rgb), 0.28), transparent 22%),
        linear-gradient(135deg, #1d2a24, #2c3a31);
    background-size: 18px 18px, 18px 18px, auto, auto;
    transform: translateZ(32px);
}

.ubx-film-spine-shot i::before,
.ubx-film-spine-shot i::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgb(var(--ubx-primary-rgb));
    box-shadow: 0 0 0 8px rgba(var(--ubx-primary-rgb), 0.08);
    animation: ubx-film-spine-pulse 3s ease-in-out infinite;
}

.ubx-film-spine-shot i::before {
    top: 36%;
    left: 34%;
    width: 1rem;
    height: 1rem;
}

.ubx-film-spine-shot i::after {
    right: 22%;
    bottom: 25%;
    width: 0.72rem;
    height: 0.72rem;
    animation-delay: 0.8s;
}

.ubx-film-spine-shot:nth-child(2) i::before { left: 54%; }
.ubx-film-spine-shot:nth-child(3) i::after { right: 46%; background: rgba(var(--ubx-kind-list-rgb), 0.95); }
.ubx-film-spine-shot:nth-child(5) i::before { background: rgba(var(--ubx-kind-chat-rgb), 0.95); }
.ubx-film-spine-shot:nth-child(6) i::after { background: #fff; }

.ubx-story-film {
    position: relative;
    overflow: clip;
}

.ubx-story-film::before {
    position: absolute;
    inset: 4% -18% auto;
    height: 44rem;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 45%, rgba(var(--ubx-primary-rgb), 0.18), transparent 22rem),
        radial-gradient(circle at 78% 35%, rgba(var(--ubx-kind-chat-rgb), 0.12), transparent 24rem);
    filter: blur(0.4px);
}

.ubx-story-controls {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.5rem;
}

.ubx-story-director-controls {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.35rem;
}

.ubx-story-director-controls small {
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ubx-story-play-button {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.72rem 0.92rem;
    color: var(--ubx-text);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.28);
    border-radius: 999px;
    background:
        radial-gradient(circle at 20% 10%, rgba(var(--ubx-primary-rgb), 0.2), transparent 8rem),
        rgba(var(--ubx-surface-rgb), 0.62);
    box-shadow:
        0 1rem 2.4rem rgba(0, 0, 0, 0.16),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.1);
    backdrop-filter: blur(16px);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ubx-story-play-button:hover,
.ubx-story-play-button:focus {
    border-color: rgba(var(--ubx-primary-rgb), 0.48);
    box-shadow:
        0 1.15rem 2.8rem rgba(0, 0, 0, 0.2),
        0 0 2.8rem rgba(var(--ubx-primary-rgb), 0.16);
    transform: translateY(-0.08rem);
}

.ubx-story-play-button svg {
    width: 1.05rem;
    height: 1.05rem;
}

.ubx-story-play-button .icon-play {
    display: inline-block;
}

.ubx-story-play-button .icon-pause,
.ubx-story-play-button.is-playing .icon-play {
    display: none;
}

.ubx-story-play-button.is-playing .icon-pause {
    display: inline-block;
}

.ubx-story-controls button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.85rem 0.95rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid var(--ubx-border);
    border-radius: 1.1rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(var(--ubx-surface-rgb), 0.56);
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(16px);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ubx-story-controls button:hover,
.ubx-story-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
    background:
        radial-gradient(circle at 18% 50%, rgba(var(--ubx-primary-rgb), 0.18), transparent 12rem),
        rgba(var(--ubx-surface-rgb), 0.72);
    box-shadow:
        0 1.1rem 2.8rem rgba(0, 0, 0, 0.18),
        0 0 2.4rem rgba(var(--ubx-primary-rgb), 0.08);
    transform: translateX(0.18rem);
}

.ubx-story-controls b {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: #07140d;
    font-size: 0.76rem;
    border-radius: 0.8rem;
    background: var(--ubx-primary);
}

.ubx-story-controls span {
    overflow: hidden;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-story-stage {
    position: relative;
    min-height: clamp(43rem, 68vw, 57rem);
    overflow: hidden;
    border: 1px solid var(--ubx-border);
    border-radius: clamp(1.8rem, 3vw, 2.7rem);
    background:
        radial-gradient(circle at var(--shine-x, 45%) var(--shine-y, 30%), rgba(255, 255, 255, 0.12), transparent 24rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        linear-gradient(135deg, rgba(12, 20, 20, 0.96), rgba(7, 9, 14, 0.99));
    box-shadow:
        0 3.2rem 8.5rem rgba(0, 0, 0, 0.36),
        0 0 5rem rgba(var(--ubx-primary-rgb), 0.08);
    transform:
        perspective(var(--showcase-depth))
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    isolation: isolate;
}

.ubx-story-backdrop,
.story-light,
.story-floor {
    position: absolute;
    pointer-events: none;
}

.ubx-story-backdrop {
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.story-light {
    width: 28rem;
    height: 28rem;
    border-radius: 999px;
    filter: blur(26px);
    opacity: 0.44;
    animation: ubx-reel-light-drift 12s ease-in-out infinite alternate;
}

.story-light.light-one {
    top: -8rem;
    left: 4%;
    background: rgba(var(--ubx-primary-rgb), 0.2);
}

.story-light.light-two {
    right: -4rem;
    bottom: -10rem;
    background: rgba(var(--ubx-kind-chat-rgb), 0.14);
    animation-delay: -4s;
}

.story-floor {
    inset: 35% -18% -22%;
    opacity: 0.27;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 4.4rem 4.4rem;
    mask-image: radial-gradient(ellipse at 50% 45%, black, transparent 76%);
    transform: perspective(860px) rotateX(64deg) translateY(7rem);
    transform-origin: bottom;
}

.ubx-story-caption {
    position: absolute;
    z-index: 16;
    right: 1.15rem;
    bottom: 1.15rem;
    display: grid;
    gap: 0.28rem;
    width: min(27rem, calc(100% - 2.3rem));
    padding: 1rem 1.08rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.25rem;
    background: rgba(8, 11, 15, 0.72);
    box-shadow: 0 1.7rem 3.8rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px);
}

.ubx-story-caption small {
    color: var(--ubx-primary);
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-story-caption strong {
    font-size: 1.25rem;
    line-height: 1.08;
}

.ubx-story-caption span {
    color: var(--ubx-muted);
    line-height: 1.44;
}

.ubx-story-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem;
    margin-top: 0.35rem;
}

.ubx-story-progress i {
    height: 0.22rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
}

.ubx-story-progress i::before {
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 0.9));
    transform: scaleX(0);
    transform-origin: left;
}

.ubx-story-progress i.is-active::before {
    transform: scaleX(1);
    transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-story-stage.is-playing .ubx-story-progress i.is-active::before {
    animation: ubx-story-progress-play 5.2s linear both;
    transition: none;
}

.ubx-story-demo-console {
    position: absolute;
    z-index: 18;
    top: 1.1rem;
    left: 1.1rem;
    display: grid;
    gap: 0.65rem;
    width: min(22rem, calc(100% - 2.2rem));
    padding: 0.88rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--ubx-primary-rgb), 0.24), transparent 9rem),
        rgba(7, 10, 14, 0.74);
    box-shadow:
        0 1.4rem 3.4rem rgba(0, 0, 0, 0.28),
        0 0 2rem rgba(var(--ubx-primary-rgb), 0.08);
    backdrop-filter: blur(18px);
    transform: translateZ(260px);
}

.ubx-story-demo-console > small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-story-demo-actions {
    display: flex;
    gap: 0.42rem;
    flex-wrap: wrap;
}

.ubx-story-demo-actions button {
    display: inline-flex;
    gap: 0.34rem;
    align-items: center;
    padding: 0.46rem 0.58rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ubx-story-demo-actions button:hover,
.ubx-story-demo-actions button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    background: rgba(var(--ubx-primary-rgb), 0.16);
    box-shadow: 0 0.65rem 1.6rem rgba(var(--ubx-primary-rgb), 0.12);
    transform: translateY(-0.05rem);
}

.ubx-story-demo-actions svg {
    width: 0.92rem;
    height: 0.92rem;
}

.ubx-story-demo-console output {
    min-height: 2.45rem;
    padding: 0.58rem 0.65rem;
    color: var(--ubx-text);
    font-size: 0.84rem;
    font-weight: 760;
    line-height: 1.34;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.07);
}

.ubx-story-browser,
.ubx-story-search-card,
.ubx-story-place-card,
.ubx-story-list-card,
.ubx-story-chat-card,
.ubx-story-log-card,
.ubx-story-phone {
    position: absolute;
    z-index: 4;
    transform-style: preserve-3d;
    transition:
        opacity 560ms ease,
        filter 560ms ease,
        transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-story-browser {
    inset: 8% 9% 20% 8%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.55rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        rgba(12, 15, 20, 0.82);
    box-shadow: 0 2.3rem 5.4rem rgba(0, 0, 0, 0.33);
    backdrop-filter: blur(16px);
    transform: translate3d(0, 0, 135px) rotateX(7deg) rotateY(-6deg) rotateZ(-1deg);
}

.ubx-story-browser-top {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.72rem 0.82rem;
    color: var(--ubx-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 11, 15, 0.72);
}

.ubx-story-browser-top span {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.ubx-story-browser-top strong {
    margin-left: 0.35rem;
    font-size: 0.8rem;
}

.ubx-story-map {
    position: absolute;
    inset: 2.55rem 0 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 28% 24%, rgba(91, 131, 98, 0.22), transparent 17rem),
        radial-gradient(ellipse at 74% 68%, rgba(74, 118, 140, 0.16), transparent 16rem),
        linear-gradient(124deg, rgba(45, 60, 54, 0.96), rgba(18, 29, 31, 0.98));
}

.ubx-story-map::before {
    position: absolute;
    inset: -10%;
    content: "";
    background:
        linear-gradient(24deg, transparent 0 42%, rgba(226, 218, 190, 0.14) 42% 43%, transparent 43%),
        linear-gradient(112deg, transparent 0 55%, rgba(226, 218, 190, 0.11) 55% 56%, transparent 56%),
        linear-gradient(78deg, transparent 0 34%, rgba(226, 218, 190, 0.09) 34% 35%, transparent 35%);
    opacity: 0.78;
}

.story-map-road,
.story-map-rail,
.story-map-water {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.story-map-road {
    height: 0.28rem;
    border-radius: 999px;
    background: rgba(226, 218, 190, 0.28);
}

.story-map-road.road-a {
    top: 44%;
    left: -5%;
    width: 112%;
    transform: rotate(-12deg);
}

.story-map-road.road-b {
    top: 60%;
    left: 20%;
    width: 70%;
    transform: rotate(31deg);
}

.story-map-rail {
    top: 28%;
    left: -6%;
    width: 88%;
    height: 0.16rem;
    background: repeating-linear-gradient(90deg, rgba(210, 210, 190, 0.42) 0 0.8rem, transparent 0.8rem 1.3rem);
    transform: rotate(18deg);
}

.story-map-water {
    right: -8%;
    bottom: 16%;
    width: 58%;
    height: 18%;
    border-radius: 999px;
    background: rgba(70, 132, 150, 0.2);
    transform: rotate(-16deg);
}

.story-map-pin {
    position: absolute;
    z-index: 4;
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    color: #07140d;
    font-size: 0.76rem;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.48rem 0 rgba(0, 0, 0, 0.28),
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.3);
    animation: ubx-reel-pin-pulse 2.8s ease-in-out infinite;
}

.story-map-pin.pin-a { top: 39%; left: 46%; }
.story-map-pin.pin-b { top: 58%; left: 63%; animation-delay: -1s; }
.story-map-pin.pin-c {
    top: 31%;
    left: 68%;
    width: 1.45rem;
    height: 1.45rem;
    background: var(--ubx-kind-category);
    animation-delay: -1.8s;
}

.ubx-story-search-card,
.ubx-story-place-card,
.ubx-story-list-card,
.ubx-story-chat-card,
.ubx-story-log-card {
    display: grid;
    gap: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    background: rgba(8, 11, 15, 0.74);
    box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.ubx-story-search-card {
    top: 14%;
    left: 12%;
    width: min(18rem, 38%);
    padding: 0.85rem;
    transform: translate3d(-1.5rem, 0, 210px) rotateX(0deg) rotateY(7deg);
}

.ubx-story-search-card small,
.ubx-story-place-card small,
.ubx-story-list-card small,
.ubx-story-chat-card small,
.ubx-story-log-card small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-story-search-card strong,
.ubx-story-place-card strong,
.ubx-story-list-card strong,
.ubx-story-log-card strong {
    font-weight: 950;
    letter-spacing: -0.02em;
}

.ubx-story-search-card span,
.ubx-story-place-card span,
.ubx-story-list-card span,
.ubx-story-log-card span {
    color: var(--ubx-muted);
    font-size: 0.84rem;
}

.ubx-story-place-card {
    top: 18%;
    right: 8%;
    width: min(21rem, 40%);
    padding: 0.85rem;
    opacity: 0.7;
    transform: translate3d(5rem, 1.5rem, 70px) rotateY(-18deg) scale(0.86);
}

.story-photo-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 0.38rem;
    min-height: 5rem;
}

.story-photo-grid i {
    border-radius: 0.72rem;
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.22), rgba(var(--ubx-kind-chat-rgb), 0.12)),
        rgba(255, 255, 255, 0.08);
}

.story-photo-grid i:first-child {
    grid-row: span 2;
}

.story-place-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.story-place-actions button {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.42rem 0.55rem;
    color: var(--ubx-text);
    font-size: 0.78rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-story-list-card {
    left: 9%;
    bottom: 18%;
    width: min(19rem, 38%);
    padding: 0.9rem;
    opacity: 0.72;
    transform: translate3d(-3rem, 3rem, 75px) rotateY(14deg) rotateZ(-2deg) scale(0.86);
}

.story-list-bars {
    display: grid;
    gap: 0.34rem;
    margin-top: 0.3rem;
}

.story-list-bars i {
    width: var(--w, 60%);
    height: 0.38rem;
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.32);
}

.ubx-story-chat-card {
    right: 8%;
    bottom: 20%;
    width: min(19rem, 38%);
    padding: 0.82rem;
    opacity: 0.7;
    transform: translate3d(4.5rem, 3.8rem, 84px) rotateY(-16deg) scale(0.84);
}

.ubx-story-chat-card p {
    margin: 0;
    width: fit-content;
    max-width: 92%;
    padding: 0.55rem 0.66rem;
    color: var(--ubx-text);
    font-size: 0.84rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.07);
}

.ubx-story-chat-card .right {
    justify-self: end;
    color: #07140d;
    background: var(--ubx-primary);
}

.ubx-story-log-card {
    left: 14%;
    bottom: 14%;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    width: min(23rem, 46%);
    padding: 0.9rem;
    opacity: 0;
    transform: translate3d(-4rem, 4rem, 50px) rotateY(16deg) scale(0.82);
}

.story-avatar {
    display: grid;
    width: 3.2rem;
    aspect-ratio: 1;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-story-phone {
    right: 8%;
    bottom: 14%;
    width: min(15rem, 30%);
    min-height: 26rem;
    padding: 1.2rem 0.85rem 0.9rem;
    opacity: 0.62;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 2rem;
    background: rgba(8, 11, 15, 0.84);
    box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
    transform: translate3d(4rem, 3rem, 68px) rotateY(-22deg) rotateZ(4deg) scale(0.76);
}

.story-notch {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 4rem;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    transform: translateX(-50%);
}

.ubx-story-phone > strong {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.story-phone-map {
    position: relative;
    min-height: 20.8rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.35rem;
    background:
        repeating-linear-gradient(0deg, transparent 0 2.2rem, rgba(255, 255, 255, 0.055) 2.2rem 2.25rem),
        repeating-linear-gradient(90deg, transparent 0 2.2rem, rgba(255, 255, 255, 0.055) 2.2rem 2.25rem),
        rgba(var(--ubx-kind-chat-rgb), 0.08);
}

.story-phone-map .building,
.story-phone-map .person,
.story-phone-map em {
    position: absolute;
}

.story-phone-map .building {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.08);
}

.story-phone-map .building.a {
    top: 18%;
    left: 12%;
    width: 42%;
    height: 24%;
    transform: rotate(-6deg);
}

.story-phone-map .building.b {
    right: 14%;
    bottom: 18%;
    width: 36%;
    height: 28%;
    transform: rotate(9deg);
}

.story-phone-map .person,
.story-phone-map em {
    display: inline-grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border-radius: 999px;
}

.story-phone-map .person {
    color: #07140d;
    font-size: 0.68rem;
    font-weight: 950;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.45rem rgba(var(--ubx-primary-rgb), 0.13);
}

.story-phone-map .person.a { top: 40%; left: 30%; }
.story-phone-map .person.b { top: 61%; right: 26%; }

.story-phone-map em {
    top: 22%;
    right: 27%;
    color: var(--ubx-text);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.42);
    background: rgba(var(--ubx-kind-chat-rgb), 0.28);
}

.ubx-story-stage[data-story-scene="research"] .ubx-story-browser {
    transform: translate3d(0, 0, 155px) rotateX(7deg) rotateY(-6deg) rotateZ(-1deg);
}

.ubx-story-stage[data-story-scene="research"] .ubx-story-search-card {
    opacity: 1;
    transform: translate3d(-1.5rem, 0, 230px) rotateY(7deg) scale(1);
}

.ubx-story-stage[data-story-scene="inspect"] .ubx-story-browser {
    opacity: 0.48;
    filter: saturate(0.72) blur(0.35px);
    transform: translate3d(-7rem, -1rem, 35px) rotateX(11deg) rotateY(-12deg) scale(0.78);
}

.ubx-story-stage[data-story-scene="inspect"] .ubx-story-search-card {
    opacity: 0.35;
    transform: translate3d(-4rem, -1rem, 30px) rotateY(12deg) scale(0.72);
}

.ubx-story-stage[data-story-scene="inspect"] .ubx-story-place-card {
    z-index: 9;
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 210px) rotateY(0deg) scale(1.08);
}

.ubx-story-stage[data-story-scene="plan"] .ubx-story-browser {
    opacity: 0.42;
    filter: saturate(0.7) blur(0.38px);
    transform: translate3d(-5rem, -2rem, 30px) rotateX(13deg) rotateY(10deg) scale(0.72);
}

.ubx-story-stage[data-story-scene="plan"] .ubx-story-list-card,
.ubx-story-stage[data-story-scene="plan"] .ubx-story-chat-card,
.ubx-story-stage[data-story-scene="plan"] .ubx-story-phone {
    z-index: 10;
    opacity: 1;
    filter: none;
}

.ubx-story-stage[data-story-scene="plan"] .ubx-story-list-card {
    transform: translate3d(-1rem, -1.6rem, 200px) rotateY(4deg) rotateZ(-1deg) scale(1.02);
}

.ubx-story-stage[data-story-scene="plan"] .ubx-story-chat-card {
    transform: translate3d(0, 0.5rem, 218px) rotateY(-3deg) scale(1.02);
}

.ubx-story-stage[data-story-scene="plan"] .ubx-story-phone {
    transform: translate3d(0.4rem, -1rem, 230px) rotateY(-8deg) rotateZ(2deg) scale(0.94);
}

.ubx-story-stage[data-story-scene="memory"] .ubx-story-browser,
.ubx-story-stage[data-story-scene="memory"] .ubx-story-place-card,
.ubx-story-stage[data-story-scene="memory"] .ubx-story-list-card,
.ubx-story-stage[data-story-scene="memory"] .ubx-story-chat-card,
.ubx-story-stage[data-story-scene="memory"] .ubx-story-phone {
    opacity: 0.34;
    filter: saturate(0.68) blur(0.42px);
    transform: translate3d(0, -2rem, 28px) rotateX(12deg) scale(0.7);
}

.ubx-story-stage[data-story-scene="memory"] .ubx-story-log-card {
    z-index: 12;
    opacity: 1;
    transform: translate3d(0, 0, 220px) rotateY(0deg) scale(1.08);
}

.ubx-story-stage[data-demo-action="search"] .ubx-story-search-card,
.ubx-story-stage[data-demo-action="open-place"] .ubx-story-place-card,
.ubx-story-stage[data-demo-action="list"] .ubx-story-list-card,
.ubx-story-stage[data-demo-action="team"] .ubx-story-chat-card,
.ubx-story-stage[data-demo-action="team"] .ubx-story-phone,
.ubx-story-stage[data-demo-action="logbook"] .ubx-story-log-card {
    box-shadow:
        0 1.6rem 3.6rem rgba(0, 0, 0, 0.28),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.2);
}

.ubx-story-stage[data-demo-action="search"] .story-map-pin,
.ubx-story-stage[data-demo-action="team"] .person {
    animation: ubx-story-focus-pulse 1.7s ease-in-out infinite;
}

.ubx-story-stage[data-demo-action="open-place"] .pin-a {
    transform: scale(1.18);
    box-shadow:
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0.55rem 1.2rem rgba(0, 0, 0, 0.24);
}

@keyframes ubx-story-focus-pulse {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.35);
    }
}

.ubx-cinema-reel {
    position: relative;
    overflow: clip;
    padding-top: clamp(4rem, 9vw, 8rem);
    padding-bottom: clamp(4rem, 9vw, 8rem);
}

.ubx-cinema-reel::before {
    position: absolute;
    inset: 10% -10% auto;
    height: 34rem;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 40%, rgba(var(--ubx-primary-rgb), 0.16), transparent 18rem),
        radial-gradient(circle at 72% 48%, rgba(var(--ubx-kind-chat-rgb), 0.12), transparent 20rem);
    filter: blur(0.3px);
}

.ubx-reel-controls {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.5rem;
}

.ubx-reel-controls button {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    width: 100%;
    padding: 0.85rem 1rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid var(--ubx-border);
    border-radius: 1.1rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(var(--ubx-surface-rgb), 0.52);
    box-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(16px);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ubx-reel-controls button:hover,
.ubx-reel-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
    background:
        radial-gradient(circle at 20% 50%, rgba(var(--ubx-primary-rgb), 0.18), transparent 12rem),
        rgba(var(--ubx-surface-rgb), 0.7);
    box-shadow:
        0 1.1rem 2.8rem rgba(0, 0, 0, 0.18),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.08);
    transform: translateX(0.18rem);
}

.ubx-reel-controls button span {
    display: inline-grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    color: #07140d;
    font-size: 0.78rem;
    font-weight: 950;
    border-radius: 0.76rem;
    background: var(--ubx-primary);
    box-shadow: 0 0.7rem 1.4rem rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-reel-stage {
    --reel-map-x: 0;
    --reel-place-x: 7.8rem;
    --reel-lists-x: -6.6rem;
    --reel-chat-x: 10.5rem;
    --reel-explore-x: -8.4rem;
    position: relative;
    min-height: clamp(42rem, 66vw, 55rem);
    overflow: hidden;
    border: 1px solid var(--ubx-border);
    border-radius: clamp(1.7rem, 3vw, 2.6rem);
    background:
        radial-gradient(circle at var(--shine-x, 45%) var(--shine-y, 30%), rgba(255, 255, 255, 0.12), transparent 24rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        linear-gradient(135deg, rgba(14, 23, 24, 0.96), rgba(9, 11, 16, 0.98));
    box-shadow:
        0 3rem 8rem rgba(0, 0, 0, 0.34),
        0 0 5rem rgba(var(--ubx-primary-rgb), 0.08);
    transform:
        perspective(var(--showcase-depth))
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    isolation: isolate;
}

.ubx-reel-backdrop,
.ubx-reel-grid,
.ubx-reel-light {
    position: absolute;
    pointer-events: none;
}

.ubx-reel-backdrop {
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.ubx-reel-grid {
    inset: 13% -8% -26%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 4rem 4rem;
    opacity: 0.26;
    transform: perspective(800px) rotateX(64deg) translateY(8rem);
    transform-origin: 50% 100%;
}

.ubx-reel-light {
    width: 26rem;
    height: 26rem;
    border-radius: 999px;
    filter: blur(24px);
    opacity: 0.45;
    animation: ubx-reel-light-drift 11s ease-in-out infinite alternate;
}

.ubx-reel-light.light-a {
    top: -7rem;
    left: 6%;
    background: rgba(var(--ubx-primary-rgb), 0.18);
}

.ubx-reel-light.light-b {
    right: 2%;
    bottom: -10rem;
    background: rgba(var(--ubx-kind-chat-rgb), 0.14);
    animation-delay: -4s;
}

.ubx-reel-caption {
    position: absolute;
    z-index: 8;
    right: 1.2rem;
    bottom: 1.2rem;
    display: grid;
    gap: 0.25rem;
    width: min(26rem, calc(100% - 2.4rem));
    padding: 1rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.25rem;
    background: rgba(9, 12, 16, 0.7);
    box-shadow: 0 1.6rem 3.6rem rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(20px);
}

.ubx-reel-caption small {
    color: var(--ubx-primary);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-reel-caption strong {
    font-size: 1.25rem;
    line-height: 1.1;
}

.ubx-reel-caption span {
    color: var(--ubx-muted);
    line-height: 1.45;
}

.ubx-reel-inspector {
    position: absolute;
    z-index: 10;
    top: 3.35rem;
    right: 1.2rem;
    display: grid;
    gap: 0.18rem;
    width: min(20rem, calc(100% - 2.4rem));
    padding: 0.9rem 1rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.2);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 12% 20%, rgba(var(--ubx-primary-rgb), 0.16), transparent 10rem),
        rgba(8, 11, 15, 0.74);
    box-shadow:
        0 1.4rem 3.2rem rgba(0, 0, 0, 0.25),
        0 0 2rem rgba(var(--ubx-primary-rgb), 0.08);
    backdrop-filter: blur(18px);
}

.ubx-reel-inspector small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-reel-inspector strong {
    line-height: 1.08;
}

.ubx-reel-inspector span {
    color: var(--ubx-muted);
    font-size: 0.88rem;
    line-height: 1.42;
}

.ubx-reel-progress {
    position: absolute;
    z-index: 9;
    top: 1.15rem;
    right: 1.15rem;
    left: 1.15rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
    pointer-events: none;
}

.ubx-reel-progress span {
    position: relative;
    overflow: hidden;
    height: 0.24rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.ubx-reel-progress span::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 0.9));
    transform: scaleX(0);
    transform-origin: left;
}

.ubx-reel-progress span.is-active::before {
    animation: ubx-reel-progress 5.2s linear both;
}

.ubx-reel-progress span.is-paused::before {
    animation-play-state: paused;
}

.ubx-reel-screen {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        rgba(12, 15, 20, 0.82);
    box-shadow:
        0 2.2rem 4.8rem rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(16px);
    transform-style: preserve-3d;
    transition:
        opacity 520ms ease,
        filter 520ms ease,
        transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-reel-screen::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.24)),
        radial-gradient(circle at 50% 45%, transparent 42%, rgba(0, 0, 0, 0.2));
    mix-blend-mode: soft-light;
}

.ubx-reel-hotspot {
    position: absolute;
    z-index: 12;
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: #07140d;
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.42rem 0 rgba(0, 0, 0, 0.2),
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.13),
        0 0 2.4rem rgba(var(--ubx-primary-rgb), 0.34);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
    animation: ubx-hotspot-pulse 2.4s ease-in-out infinite;
}

.ubx-reel-hotspot:hover,
.ubx-reel-hotspot.is-active {
    transform: translateY(-0.16rem) scale(1.12);
    filter: saturate(1.08);
    box-shadow:
        0 0.55rem 0 rgba(0, 0, 0, 0.2),
        0 0 0 0.75rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0 3.2rem rgba(var(--ubx-primary-rgb), 0.44);
}

.hotspot-map { top: 38%; left: 50%; }
.hotspot-place { top: 47%; right: 1.3rem; }
.hotspot-lists { right: 1.2rem; bottom: 1.3rem; }
.hotspot-chat { top: 49%; right: 1.2rem; }
.hotspot-explore { top: 42%; left: 54%; }

.screen-map {
    inset: 7% 7% 18% 9%;
    border-radius: 1.55rem;
    transform:
        translate3d(var(--reel-map-x), 0, 140px)
        rotateX(8deg)
        rotateY(-7deg)
        rotateZ(-1deg);
}

.screen-place {
    top: 16%;
    right: 7%;
    width: min(29rem, 48%);
    height: 29rem;
    border-radius: 1.45rem;
    opacity: 0.52;
    filter: saturate(0.75) blur(0.2px);
    transform:
        translate3d(var(--reel-place-x), 1.5rem, 48px)
        rotateX(6deg)
        rotateY(-18deg)
        rotateZ(2deg)
        scale(0.82);
}

.screen-lists {
    top: 13%;
    left: 6%;
    width: min(28rem, 45%);
    height: 27rem;
    border-radius: 1.45rem;
    opacity: 0.48;
    filter: saturate(0.78) blur(0.25px);
    transform:
        translate3d(var(--reel-lists-x), 2rem, 42px)
        rotateX(8deg)
        rotateY(17deg)
        rotateZ(-4deg)
        scale(0.8);
}

.screen-chat {
    right: 9%;
    bottom: 14%;
    width: min(18rem, 32%);
    height: 32rem;
    border-radius: 2rem;
    opacity: 0.5;
    filter: saturate(0.8) blur(0.2px);
    transform:
        translate3d(var(--reel-chat-x), 1.8rem, 70px)
        rotateX(3deg)
        rotateY(-22deg)
        rotateZ(4deg)
        scale(0.76);
}

.screen-explore {
    left: 7%;
    bottom: 11%;
    width: min(33rem, 54%);
    height: 25rem;
    border-radius: 1.55rem;
    opacity: 0.46;
    filter: saturate(0.78) blur(0.22px);
    transform:
        translate3d(var(--reel-explore-x), 1.2rem, 54px)
        rotateX(17deg)
        rotateY(13deg)
        rotateZ(-3deg)
        scale(0.78);
}

.ubx-reel-stage[data-reel-scene="place"] {
    --reel-map-x: -9rem;
    --reel-place-x: 0;
}

.ubx-reel-stage[data-reel-scene="lists"] {
    --reel-map-x: 8rem;
    --reel-lists-x: 0;
}

.ubx-reel-stage[data-reel-scene="chat"] {
    --reel-map-x: -6rem;
    --reel-chat-x: 0;
}

.ubx-reel-stage[data-reel-scene="explore"] {
    --reel-map-x: 7rem;
    --reel-explore-x: 0;
}

.ubx-reel-stage[data-reel-scene="place"] .screen-place,
.ubx-reel-stage[data-reel-scene="lists"] .screen-lists,
.ubx-reel-stage[data-reel-scene="chat"] .screen-chat,
.ubx-reel-stage[data-reel-scene="explore"] .screen-explore,
.ubx-reel-stage[data-reel-scene="map"] .screen-map {
    z-index: 6;
    opacity: 1;
    filter: none;
    transform:
        translate3d(0, 0, 170px)
        rotateX(4deg)
        rotateY(0deg)
        rotateZ(0deg)
        scale(1);
}

.ubx-reel-stage[data-reel-scene="place"] .screen-map,
.ubx-reel-stage[data-reel-scene="lists"] .screen-map,
.ubx-reel-stage[data-reel-scene="chat"] .screen-map,
.ubx-reel-stage[data-reel-scene="explore"] .screen-map {
    opacity: 0.34;
    filter: saturate(0.65) blur(0.45px);
    transform:
        translate3d(var(--reel-map-x), -1rem, 20px)
        rotateX(13deg)
        rotateY(-10deg)
        rotateZ(-2deg)
        scale(0.74);
}

.ubx-reel-browserbar {
    position: relative;
    z-index: 4;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.72rem 0.82rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 11, 15, 0.72);
}

.ubx-reel-browserbar i {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.ubx-reel-browserbar span {
    overflow: hidden;
    margin-left: 0.35rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-reel-map-realistic {
    position: absolute;
    inset: 2.6rem 0 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 28% 24%, rgba(91, 131, 98, 0.22), transparent 17rem),
        radial-gradient(ellipse at 74% 68%, rgba(74, 118, 140, 0.16), transparent 16rem),
        linear-gradient(124deg, rgba(45, 60, 54, 0.96), rgba(18, 29, 31, 0.98));
}

.ubx-reel-map-realistic::before {
    position: absolute;
    inset: -10%;
    content: "";
    background:
        linear-gradient(24deg, transparent 0 42%, rgba(226, 218, 190, 0.12) 42% 43%, transparent 43%),
        linear-gradient(112deg, transparent 0 55%, rgba(226, 218, 190, 0.1) 55% 56%, transparent 56%),
        linear-gradient(78deg, transparent 0 34%, rgba(226, 218, 190, 0.08) 34% 35%, transparent 35%);
    opacity: 0.74;
}

.ubx-reel-map-search,
.ubx-reel-map-layer,
.ubx-reel-place-popover {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1rem;
    background: rgba(10, 12, 18, 0.72);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.23);
    backdrop-filter: blur(16px);
}

.ubx-reel-map-search {
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    width: min(20rem, 56%);
    padding: 0.72rem 0.85rem;
    color: var(--ubx-muted);
    font-weight: 800;
}

.ubx-reel-map-layer {
    top: 4.8rem;
    left: 1rem;
    display: grid;
    gap: 0.42rem;
    padding: 0.75rem;
}

.ubx-reel-map-layer span {
    padding: 0.42rem 0.58rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-reel-map-layer .active {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.16);
}

.reel-road,
.reel-river {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.reel-road {
    height: 0.22rem;
    border-radius: 999px;
    background: rgba(226, 218, 190, 0.24);
}

.road-one {
    top: 46%;
    left: -5%;
    width: 112%;
    transform: rotate(-12deg);
}

.road-two {
    top: 58%;
    left: 22%;
    width: 68%;
    transform: rotate(31deg);
}

.reel-river {
    right: -8%;
    bottom: 18%;
    width: 58%;
    height: 18%;
    border-radius: 999px;
    background: rgba(70, 132, 150, 0.2);
    transform: rotate(-16deg);
}

.reel-pin {
    position: absolute;
    z-index: 4;
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    color: #07140d;
    font-size: 0.76rem;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.45rem 0 rgba(0, 0, 0, 0.26),
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.3);
    animation: ubx-reel-pin-pulse 2.8s ease-in-out infinite;
}

.reel-pin-a { top: 39%; left: 46%; }
.reel-pin-b { top: 58%; left: 63%; animation-delay: -1.1s; }
.reel-pin-c {
    top: 31%;
    left: 68%;
    width: 1.45rem;
    height: 1.45rem;
    background: var(--ubx-kind-category);
    animation-delay: -2s;
}

.ubx-reel-place-popover {
    right: 1.2rem;
    bottom: 1.1rem;
    display: grid;
    gap: 0.12rem;
    width: min(22rem, 52%);
    padding: 1rem;
    animation: ubx-reel-popover 5.8s ease-in-out infinite;
}

.ubx-reel-place-popover small,
.ubx-reel-place-popover span {
    color: var(--ubx-muted);
}

.ubx-reel-place-layout {
    display: grid;
    grid-template-rows: 12rem 1fr auto;
    height: calc(100% - 2.6rem);
}

.ubx-reel-photo-wall {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.45rem;
    padding: 0.75rem;
}

.ubx-reel-photo-wall span {
    border-radius: 0.95rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent),
        radial-gradient(circle at 30% 20%, rgba(var(--ubx-primary-rgb), 0.18), transparent 7rem),
        linear-gradient(145deg, #2c332f, #10161a);
}

.ubx-reel-photo-wall span:first-child {
    grid-row: span 2;
}

.ubx-reel-place-content {
    padding: 0 1rem;
}

.ubx-reel-place-content small {
    color: var(--ubx-primary);
    font-weight: 900;
}

.ubx-reel-place-content h3 {
    margin: 0.28rem 0;
    font-weight: 950;
}

.ubx-reel-place-content p {
    margin: 0;
    color: var(--ubx-muted);
    font-size: 0.92rem;
}

.ubx-reel-place-actions,
.ubx-reel-comments,
.ubx-reel-list-items,
.ubx-reel-list-flow {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ubx-reel-place-actions {
    margin-top: 0.75rem;
}

.ubx-reel-place-actions span,
.ubx-reel-comments span,
.ubx-reel-list-items span,
.ubx-reel-list-flow span,
.ubx-reel-tactical-panel span {
    padding: 0.42rem 0.55rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-reel-comments {
    align-content: end;
    padding: 0.8rem 1rem 1rem;
}

.ubx-reel-list-board {
    display: grid;
    gap: 1rem;
    height: calc(100% - 2.6rem);
    padding: 1rem;
}

.ubx-reel-list-main {
    display: grid;
    gap: 0.12rem;
    padding: 1rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.22);
    border-radius: 1.1rem;
    background: rgba(var(--ubx-primary-rgb), 0.09);
}

.ubx-reel-list-main small,
.ubx-reel-list-main span {
    color: var(--ubx-muted);
}

.ubx-reel-list-main strong {
    font-size: 1.35rem;
}

.ubx-reel-list-items {
    display: grid;
}

.ubx-reel-list-items span {
    display: flex;
    align-items: center;
}

.ubx-reel-list-items b {
    width: 0.72rem;
    height: 0.72rem;
    margin-right: 0.45rem;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-reel-list-items em {
    margin-left: auto;
    color: var(--ubx-primary);
    font-style: normal;
}

.ubx-reel-list-flow {
    align-items: center;
    align-self: end;
}

.ubx-reel-list-flow i {
    flex: 1 1 2rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--ubx-primary-rgb), 0.2), rgba(var(--ubx-primary-rgb), 0.8));
}

.ubx-reel-phone {
    position: absolute;
    inset: 0.7rem;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.6rem;
    background: rgba(8, 10, 14, 0.92);
}

.ubx-reel-phone-top {
    justify-self: center;
    width: 4.2rem;
    height: 0.32rem;
    margin-top: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.ubx-reel-chat-header {
    display: grid;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.ubx-reel-chat-header small {
    color: var(--ubx-muted);
}

.ubx-reel-chat-messages {
    display: grid;
    align-content: end;
    gap: 0.55rem;
    padding: 1rem;
}

.ubx-reel-chat-messages span {
    max-width: 86%;
    padding: 0.62rem 0.72rem;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.065);
    animation: ubx-reel-message 5.6s ease-in-out infinite;
}

.ubx-reel-chat-messages .right {
    justify-self: end;
    color: #07140d;
    background: var(--ubx-primary);
}

.ubx-reel-chat-messages .media {
    color: var(--ubx-primary);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    background: rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-reel-chat-input {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0.75rem 0.75rem;
    padding: 0.65rem 0.78rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.ubx-reel-tactical {
    display: grid;
    grid-template-columns: 1fr 12rem;
    gap: 0.85rem;
    height: 100%;
    padding: 1rem;
}

.ubx-reel-tactical-map {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.2rem;
    background:
        repeating-linear-gradient(0deg, transparent 0 2.4rem, rgba(255, 255, 255, 0.055) 2.4rem 2.45rem),
        repeating-linear-gradient(90deg, transparent 0 2.4rem, rgba(255, 255, 255, 0.055) 2.4rem 2.45rem),
        rgba(13, 18, 20, 0.9);
}

.ubx-reel-tactical-map .building,
.ubx-reel-tactical-map .route,
.ubx-reel-tactical-map .person,
.ubx-reel-tactical-map .marker {
    position: absolute;
}

.ubx-reel-tactical-map .building {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-reel-tactical-map .building-a {
    top: 15%;
    left: 12%;
    width: 34%;
    height: 24%;
    transform: rotate(-7deg);
}

.ubx-reel-tactical-map .building-b {
    right: 13%;
    bottom: 18%;
    width: 25%;
    height: 48%;
    transform: rotate(5deg);
}

.ubx-reel-tactical-map .route {
    top: 44%;
    left: 23%;
    width: 55%;
    height: 22%;
    border-top: 3px solid rgba(var(--ubx-primary-rgb), 0.78);
    border-right: 3px solid rgba(var(--ubx-primary-rgb), 0.42);
    border-radius: 100% 30% 90% 20%;
    transform: rotate(13deg);
}

.ubx-reel-tactical-map .person,
.ubx-reel-tactical-map .marker {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
}

.ubx-reel-tactical-map .person {
    color: #07140d;
    font-weight: 950;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14);
}

.person-a { top: 38%; left: 34%; }
.person-b { top: 62%; right: 30%; }

.ubx-reel-tactical-map .marker {
    color: var(--ubx-text);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.5);
    background: rgba(var(--ubx-kind-chat-rgb), 0.32);
}

.marker-camera { top: 20%; right: 35%; }
.marker-entry { bottom: 18%; left: 20%; }

.ubx-reel-tactical-panel {
    display: grid;
    align-content: center;
    gap: 0.55rem;
}

.ubx-reel-tactical-panel strong {
    font-size: 1.1rem;
}

.ubx-preview-theater {
    position: relative;
    overflow: clip;
}

.ubx-preview-controls {
    display: grid;
    gap: 0.72rem;
    margin-top: 1.4rem;
}

.ubx-preview-controls button {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.82rem 0.95rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.1rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.035);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ubx-preview-controls button:hover,
.ubx-preview-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.18), transparent 56%),
        rgba(var(--ubx-primary-rgb), 0.075);
    transform: translateX(0.2rem);
    box-shadow: 0 1rem 2.2rem rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-preview-controls b {
    display: inline-grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    color: #07140d;
    font-size: 0.78rem;
    border-radius: 0.72rem;
    background: var(--ubx-primary);
}

.ubx-preview-controls span {
    font-weight: 850;
}

.ubx-preview-stage {
    position: relative;
    padding: clamp(0.8rem, 2vw, 1.1rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 22% 10%, rgba(var(--ubx-primary-rgb), 0.18), transparent 18rem),
        radial-gradient(circle at 78% 84%, rgba(var(--ubx-ambient-secondary-rgb), 0.16), transparent 20rem),
        rgba(255, 255, 255, 0.045);
    box-shadow:
        0 2rem 5rem rgba(0, 0, 0, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform:
        perspective(var(--showcase-depth))
        rotateX(calc(9deg - var(--scroll-lift, 0) * 5deg))
        rotateY(calc(-10deg + var(--scroll-lift, 0) * 7deg));
}

.ubx-preview-browser {
    position: relative;
    min-height: 39rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.55rem;
    background:
        linear-gradient(145deg, rgba(13, 17, 16, 0.94), rgba(24, 29, 27, 0.9)),
        rgba(7, 10, 10, 0.92);
    transform-style: preserve-3d;
}

.ubx-preview-browser::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.09), transparent 22% 74%, rgba(255, 255, 255, 0.045)),
        radial-gradient(circle at 55% 42%, transparent 0 45%, rgba(0, 0, 0, 0.22));
    mix-blend-mode: screen;
    opacity: 0.58;
}

.ubx-preview-browser-top {
    position: relative;
    z-index: 6;
    display: flex;
    gap: 0.48rem;
    align-items: center;
    padding: 0.72rem 0.9rem;
    color: var(--ubx-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
}

.ubx-preview-browser-top > span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
}

.ubx-preview-browser-top strong {
    margin-left: 0.4rem;
    font-size: 0.82rem;
}

.ubx-preview-browser-top em {
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
}

.ubx-preview-shot-list {
    position: absolute;
    top: 4.2rem;
    left: 50%;
    z-index: 8;
    display: flex;
    gap: 0.5rem;
    width: min(34rem, calc(100% - 2rem));
    padding: 0.48rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(7, 10, 10, 0.58);
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

.ubx-preview-shot-list span {
    display: inline-flex;
    flex: 1 1 0;
    gap: 0.38rem;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.42rem 0.5rem;
    color: var(--ubx-muted);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    border-radius: 999px;
    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.ubx-preview-shot-list b {
    color: var(--ubx-primary);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ubx-preview-shot-list span.is-active {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.11);
    transform: translateY(-0.04rem);
}

.ubx-preview-cursor {
    position: absolute;
    z-index: 12;
    top: 42%;
    left: 55%;
    --preview-cursor-rotate: 0deg;
    --preview-cursor-scale: 1;
    width: 1.15rem;
    height: 1.15rem;
    pointer-events: none;
    color: #07140d;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.48rem rgba(var(--ubx-primary-rgb), 0.16),
        0 0.9rem 1.9rem rgba(0, 0, 0, 0.24);
    transition:
        top 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
        left 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
        --preview-cursor-rotate 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
        --preview-cursor-scale 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: ubx-preview-cursor-click 3.2s ease-in-out infinite;
}

.ubx-preview-cursor::before {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 0.85rem;
    height: 1.35rem;
    content: "";
    border-right: 2px solid rgba(255, 255, 255, 0.82);
    border-bottom: 2px solid rgba(255, 255, 255, 0.82);
    transform: rotate(-28deg);
    transform-origin: top left;
}

.ubx-preview-cursor span {
    position: absolute;
    inset: -0.8rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.42);
    border-radius: 999px;
    animation: ubx-live-pulse 1.8s ease-out infinite;
}

.ubx-preview-main-map {
    position: absolute;
    inset: 3.2rem 1rem 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 22% 26%, rgba(92, 125, 83, 0.34), transparent 14rem),
        radial-gradient(circle at 76% 68%, rgba(83, 97, 118, 0.24), transparent 15rem),
        linear-gradient(135deg, #253027, #1a201e 54%, #242824);
    transform: translateZ(0);
}

.ubx-preview-main-map::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 2.4rem 2.4rem;
    opacity: 0.42;
}

.ubx-preview-map-tile,
.ubx-preview-map-road,
.ubx-preview-map-water,
.ubx-preview-route,
.ubx-preview-pin,
.ubx-preview-search-panel,
.ubx-preview-place-card,
.ubx-preview-list-card,
.ubx-preview-chat-card,
.ubx-preview-log-card,
.ubx-preview-phone,
.ubx-preview-caption {
    position: absolute;
    z-index: 4;
}

.ubx-preview-map-tile {
    border-radius: 48% 52% 42% 58%;
    background: rgba(76, 105, 72, 0.26);
}

.ubx-preview-map-tile.tile-a {
    top: -9%;
    right: -8%;
    width: 43%;
    height: 38%;
}

.ubx-preview-map-tile.tile-b {
    bottom: -12%;
    left: -8%;
    width: 58%;
    height: 42%;
    background: rgba(64, 93, 86, 0.26);
}

.ubx-preview-map-road {
    height: 2.6rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(118, 109, 91, 0.42);
    box-shadow: inset 0 0 1.3rem rgba(0, 0, 0, 0.18);
}

.ubx-preview-map-road.road-a {
    top: 55%;
    left: -7%;
    width: 70%;
    transform: rotate(-14deg);
}

.ubx-preview-map-road.road-b {
    top: 25%;
    right: -11%;
    width: 52%;
    height: 2rem;
    opacity: 0.78;
    transform: rotate(28deg);
}

.ubx-preview-map-water {
    top: 14%;
    left: 52%;
    width: 20%;
    height: 58%;
    border-radius: 999px;
    background: rgba(85, 120, 134, 0.24);
    filter: blur(0.2px);
    transform: rotate(18deg);
}

.ubx-preview-route {
    top: 38%;
    left: 23%;
    z-index: 5;
    width: 48%;
    height: 28%;
    border-top: 4px solid rgba(var(--ubx-primary-rgb), 0.78);
    border-right: 4px solid rgba(var(--ubx-primary-rgb), 0.48);
    border-radius: 100% 25% 90% 20%;
    filter: drop-shadow(0 0 1rem rgba(var(--ubx-primary-rgb), 0.3));
    transform: rotate(11deg);
}

.ubx-preview-pin {
    display: inline-grid;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.5rem rgba(var(--ubx-primary-rgb), 0.14),
        0 1rem 2.2rem rgba(0, 0, 0, 0.22);
    transition:
        transform 260ms ease,
        opacity 260ms ease,
        filter 260ms ease;
}

.ubx-preview-pin.pin-a { top: 27%; left: 31%; width: 2.9rem; height: 2.9rem; }
.ubx-preview-pin.pin-b { top: 44%; left: 56%; width: 2rem; height: 2rem; }
.ubx-preview-pin.pin-c { bottom: 23%; left: 42%; width: 2.4rem; height: 2.4rem; }
.ubx-preview-pin.pin-d { top: 55%; right: 20%; width: 2.15rem; height: 2.15rem; }

.ubx-preview-search-panel,
.ubx-preview-place-card,
.ubx-preview-list-card,
.ubx-preview-chat-card,
.ubx-preview-log-card,
.ubx-preview-caption {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.2rem;
    background: rgba(11, 15, 14, 0.72);
    backdrop-filter: blur(18px);
    box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.2);
    transition:
        transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 280ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ubx-preview-search-panel {
    top: 4.6rem;
    left: 2rem;
    width: 15rem;
    padding: 1rem;
}

.ubx-preview-search-panel small,
.ubx-preview-place-card small,
.ubx-preview-list-card small,
.ubx-preview-chat-card small,
.ubx-preview-log-card small,
.ubx-preview-caption small {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    color: var(--ubx-primary);
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ubx-preview-search-panel strong,
.ubx-preview-place-card strong,
.ubx-preview-list-card strong,
.ubx-preview-caption strong {
    display: block;
    margin-top: 0.28rem;
    color: var(--ubx-text);
}

.ubx-preview-search-panel span,
.ubx-preview-place-card span,
.ubx-preview-list-card span,
.ubx-preview-log-card em,
.ubx-preview-caption span {
    display: block;
    margin-top: 0.25rem;
    color: var(--ubx-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.ubx-preview-place-card {
    top: 7.8rem;
    right: 2.2rem;
    width: 16.5rem;
    padding: 1rem;
}

.ubx-preview-list-card {
    right: 3.2rem;
    bottom: 7.6rem;
    width: 17rem;
    padding: 1rem;
}

.ubx-preview-chat-card {
    bottom: 6.2rem;
    left: 2rem;
    width: 14.5rem;
    padding: 0.9rem;
}

.ubx-preview-chat-card p {
    max-width: 86%;
    padding: 0.48rem 0.62rem;
    margin: 0.42rem 0 0;
    color: var(--ubx-muted);
    font-size: 0.8rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.07);
}

.ubx-preview-chat-card .right {
    margin-left: auto;
    color: #07140d;
    background: var(--ubx-primary);
}

.ubx-preview-log-card {
    right: 2.2rem;
    bottom: 2.1rem;
    display: flex;
    gap: 0.72rem;
    align-items: center;
    width: 18rem;
    padding: 0.85rem;
}

.ubx-preview-log-card > span {
    display: inline-grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    color: #07140d;
    font-size: 0.84rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-preview-log-card strong {
    display: block;
}

.ubx-preview-phone {
    right: 8.4rem;
    bottom: 4.5rem;
    z-index: 5;
    width: 8.4rem;
    height: 14.5rem;
    padding: 0.85rem;
    color: var(--ubx-text);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.6rem;
    background: rgba(7, 9, 10, 0.86);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.32);
    transition:
        transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 280ms ease;
}

.ubx-preview-phone .notch {
    display: block;
    width: 3rem;
    height: 0.32rem;
    margin: 0 auto 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.ubx-preview-phone strong {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
}

.ubx-preview-phone div {
    position: relative;
    height: 9.2rem;
    overflow: hidden;
    border-radius: 1rem;
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        rgba(255, 255, 255, 0.055);
    background-size: 1.2rem 1.2rem;
}

.ubx-preview-phone .building,
.ubx-preview-phone b,
.ubx-preview-phone em {
    position: absolute;
}

.ubx-preview-phone .building {
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.1);
}

.ubx-preview-phone .building.a {
    top: 1.2rem;
    left: 1rem;
    width: 3rem;
    height: 2rem;
    transform: rotate(-8deg);
}

.ubx-preview-phone .building.b {
    right: 0.9rem;
    bottom: 1.3rem;
    width: 2rem;
    height: 4rem;
    transform: rotate(5deg);
}

.ubx-preview-phone b,
.ubx-preview-phone em {
    display: inline-grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 999px;
}

.ubx-preview-phone b {
    top: 4.2rem;
    left: 3.1rem;
    color: #07140d;
    font-size: 0.65rem;
    background: var(--ubx-primary);
}

.ubx-preview-phone em {
    right: 1rem;
    top: 2.7rem;
    color: var(--ubx-text);
    background: rgba(var(--ubx-ambient-secondary-rgb), 0.4);
}

.ubx-preview-caption {
    left: 50%;
    bottom: 2rem;
    z-index: 7;
    width: min(29rem, calc(100% - 4rem));
    padding: 1rem 1.15rem;
    transform: translateX(-50%) translateZ(80px);
}

.ubx-preview-live-action {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 9;
    display: flex;
    gap: 0.65rem;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.62rem 1rem;
    color: var(--ubx-muted);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    background: rgba(7, 10, 10, 0.62);
    backdrop-filter: blur(16px);
}

.ubx-preview-live-action .ubx-live-dot {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    margin: 0;
}

.ubx-preview-live-action small {
    font-size: 0.8rem;
    line-height: 1.35;
}

.ubx-preview-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.ubx-preview-timeline span {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.7rem;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.ubx-preview-timeline span.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    background: rgba(var(--ubx-primary-rgb), 0.09);
    transform: translateY(-0.08rem);
}

.ubx-preview-stage[data-preview-scenario="research"] .ubx-preview-search-panel,
.ubx-preview-stage[data-preview-scenario="research"] .ubx-preview-place-card,
.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-list-card,
.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-chat-card,
.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-phone,
.ubx-preview-stage[data-preview-scenario="memory"] .ubx-preview-log-card,
.ubx-preview-stage[data-preview-scenario="memory"] .ubx-preview-place-card {
    border-color: rgba(var(--ubx-primary-rgb), 0.4);
    box-shadow:
        0 1.3rem 2.8rem rgba(var(--ubx-primary-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-preview-stage[data-preview-scenario="research"] .ubx-preview-main-map {
    transform: scale(1.02);
}

.ubx-preview-stage[data-preview-scenario="research"] .ubx-preview-cursor {
    top: 36%;
    left: 59%;
    --preview-cursor-rotate: -8deg;
}

.ubx-preview-stage[data-preview-scenario="research"] .ubx-preview-list-card,
.ubx-preview-stage[data-preview-scenario="research"] .ubx-preview-chat-card,
.ubx-preview-stage[data-preview-scenario="research"] .ubx-preview-log-card,
.ubx-preview-stage[data-preview-scenario="research"] .ubx-preview-phone {
    opacity: 0.4;
    filter: saturate(0.84);
    transform: translateY(0.55rem) scale(0.96);
}

.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-search-panel {
    opacity: 0.52;
    transform: translate3d(-0.8rem, -0.2rem, 0) scale(0.96);
}

.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-place-card,
.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-log-card {
    opacity: 0.48;
    filter: saturate(0.88);
}

.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-list-card {
    transform: translate3d(-2rem, -3.2rem, 90px) scale(1.03);
}

.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-chat-card {
    transform: translate3d(1.4rem, -1.4rem, 120px) scale(1.05);
}

.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-phone {
    transform: translate3d(2.3rem, -2rem, 130px) rotateZ(3deg);
}

.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-cursor {
    top: 58%;
    left: 72%;
    --preview-cursor-rotate: 8deg;
    --preview-cursor-scale: 1.04;
}

.ubx-preview-stage[data-preview-scenario="team"] .pin-d,
.ubx-preview-stage[data-preview-scenario="team"] .ubx-preview-route {
    animation: ubx-soft-pulse 2.8s ease-in-out infinite;
}

.ubx-preview-stage[data-preview-scenario="memory"] .ubx-preview-search-panel,
.ubx-preview-stage[data-preview-scenario="memory"] .ubx-preview-chat-card,
.ubx-preview-stage[data-preview-scenario="memory"] .ubx-preview-phone {
    opacity: 0.44;
    transform: translateY(0.8rem) scale(0.95);
}

.ubx-preview-stage[data-preview-scenario="memory"] .ubx-preview-list-card {
    opacity: 0.52;
    filter: saturate(0.88);
}

.ubx-preview-stage[data-preview-scenario="memory"] .ubx-preview-log-card {
    transform: translate3d(-3rem, -2.8rem, 120px) scale(1.06);
}

.ubx-preview-stage[data-preview-scenario="memory"] .ubx-preview-place-card {
    transform: translate3d(-1.2rem, 1rem, 80px);
}

.ubx-preview-stage[data-preview-scenario="memory"] .ubx-preview-cursor {
    top: 70%;
    left: 61%;
    --preview-cursor-rotate: -3deg;
    --preview-cursor-scale: 0.98;
}

.ubx-product-simulator {
    position: relative;
    overflow: clip;
}

.ubx-product-simulator::before {
    position: absolute;
    inset: 8% -8% auto;
    height: 36rem;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 18% 32%, rgba(var(--ubx-primary-rgb), 0.16), transparent 18rem),
        radial-gradient(circle at 78% 42%, rgba(var(--ubx-ambient-secondary-rgb), 0.14), transparent 22rem);
    filter: blur(10px);
}

.ubx-simulator-controls {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.35rem;
}

.ubx-simulator-controls button {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.78rem;
    align-items: center;
    width: 100%;
    padding: 0.88rem 0.95rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.05rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(var(--ubx-surface-rgb), 0.55);
    transition:
        transform 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.ubx-simulator-controls button:hover,
.ubx-simulator-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.16), transparent 60%),
        rgba(var(--ubx-primary-rgb), 0.07);
    transform: translateX(0.22rem);
    box-shadow: 0 1rem 2rem rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-simulator-controls b {
    display: inline-grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    color: #07140d;
    font-size: 0.75rem;
    border-radius: 0.72rem;
    background: var(--ubx-primary);
}

.ubx-simulator-controls strong,
.ubx-simulator-controls small {
    display: block;
}

.ubx-simulator-controls strong {
    color: inherit;
    font-size: 0.95rem;
}

.ubx-simulator-controls small {
    margin-top: 0.1rem;
    color: var(--ubx-muted);
    font-weight: 650;
}

.ubx-simulator-stage {
    position: relative;
    padding: clamp(0.75rem, 2vw, 1.1rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 18% 12%, rgba(var(--ubx-primary-rgb), 0.18), transparent 18rem),
        radial-gradient(circle at 86% 76%, rgba(255, 255, 255, 0.09), transparent 18rem),
        rgba(255, 255, 255, 0.045);
    box-shadow:
        0 2rem 5rem rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform:
        perspective(var(--showcase-depth))
        rotateX(calc(8deg - var(--scroll-lift, 0) * 4deg))
        rotateY(calc(-8deg + var(--scroll-lift, 0) * 6deg));
    transform-style: preserve-3d;
}

.ubx-simulator-browser {
    position: relative;
    min-height: 43rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.55rem;
    background:
        linear-gradient(145deg, rgba(8, 11, 11, 0.97), rgba(21, 26, 24, 0.92)),
        rgba(8, 10, 10, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform-style: preserve-3d;
}

.ubx-simulator-browser::before {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 24% 78%, rgba(255, 255, 255, 0.045)),
        radial-gradient(circle at 52% 42%, transparent 0 48%, rgba(0, 0, 0, 0.28));
    opacity: 0.72;
}

.ubx-simulator-browserbar {
    position: relative;
    z-index: 28;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.72rem 0.9rem;
    color: var(--ubx-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
}

.ubx-simulator-browserbar > span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
}

.ubx-simulator-browserbar strong {
    max-width: 42%;
    margin-left: 0.4rem;
    overflow: hidden;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-simulator-browserbar em {
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 850;
}

.ubx-simulator-map {
    position: absolute;
    inset: 3.2rem 1rem 1rem;
    z-index: 1;
    overflow: hidden;
    border-radius: 1.35rem;
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(145deg, #223022, #18231e 48%, #24251e);
    background-size: 2.6rem 2.6rem, 2.6rem 2.6rem, auto;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform:
        translateZ(0)
        scale(var(--sim-map-scale, 1))
        translate(var(--sim-map-x, 0), var(--sim-map-y, 0));
    transform-origin: 50% 50%;
    transition: transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-simulator-map::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 25% 28%, rgba(255, 255, 255, 0.05), transparent 12rem),
        radial-gradient(circle at 70% 68%, rgba(0, 0, 0, 0.16), transparent 18rem);
}

.sim-land,
.sim-park,
.sim-water,
.sim-road,
.sim-rail,
.sim-route,
.sim-label,
.sim-hotspot {
    position: absolute;
    z-index: 2;
}

.sim-land {
    border-radius: 48% 52% 42% 58%;
    background: rgba(94, 119, 77, 0.22);
}

.sim-land.land-a {
    top: -11%;
    right: -6%;
    width: 45%;
    height: 35%;
}

.sim-land.land-b {
    bottom: -12%;
    left: -8%;
    width: 55%;
    height: 42%;
    background: rgba(83, 105, 87, 0.26);
}

.sim-park {
    border-radius: 1.4rem;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 9px),
        rgba(63, 95, 69, 0.25);
}

.sim-park.park-a {
    right: 13%;
    bottom: 15%;
    width: 24%;
    height: 19%;
    transform: rotate(-8deg);
}

.sim-water {
    top: 8%;
    left: 48%;
    width: 17%;
    height: 72%;
    border-radius: 999px;
    background: rgba(85, 122, 138, 0.28);
    transform: rotate(18deg);
}

.sim-road {
    height: 2.2rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, 0.16) 48% 52%, transparent 52%),
        rgba(127, 118, 96, 0.44);
    box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.14);
}

.sim-road.road-a {
    top: 54%;
    left: -8%;
    width: 68%;
    transform: rotate(-13deg);
}

.sim-road.road-b {
    top: 26%;
    right: -8%;
    width: 52%;
    height: 1.85rem;
    transform: rotate(25deg);
}

.sim-road.road-c {
    bottom: 22%;
    right: 18%;
    width: 44%;
    height: 1.65rem;
    opacity: 0.76;
    transform: rotate(-32deg);
}

.sim-rail {
    top: 35%;
    left: 11%;
    width: 54%;
    height: 0.34rem;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, rgba(222, 215, 190, 0.55) 0 0.8rem, transparent 0.8rem 1.5rem);
    opacity: 0.6;
    transform: rotate(14deg);
}

.sim-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

.sim-label.label-a { top: 22%; left: 19%; }
.sim-label.label-b { top: 43%; left: 56%; }
.sim-label.label-c { bottom: 29%; left: 27%; }

.sim-route {
    top: 35%;
    left: 26%;
    z-index: 4;
    width: 46%;
    height: 32%;
    border-top: 4px solid rgba(var(--ubx-primary-rgb), 0.7);
    border-right: 4px solid rgba(var(--ubx-primary-rgb), 0.5);
    border-radius: 100% 20% 90% 28%;
    opacity: 0.28;
    filter: drop-shadow(0 0 1rem rgba(var(--ubx-primary-rgb), 0.18));
    transform: rotate(8deg);
    transition:
        opacity 260ms ease,
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sim-hotspot {
    z-index: 8;
    display: inline-grid;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.44rem rgba(var(--ubx-primary-rgb), 0.15),
        0 1rem 2.2rem rgba(0, 0, 0, 0.22);
    transition:
        transform 220ms ease,
        opacity 220ms ease,
        filter 220ms ease,
        box-shadow 220ms ease;
}

.sim-hotspot:hover,
.sim-hotspot.is-active {
    transform: translateY(-0.18rem) scale(1.08);
    box-shadow:
        0 0 0 0.62rem rgba(var(--ubx-primary-rgb), 0.2),
        0 1.2rem 2.6rem rgba(0, 0, 0, 0.28);
}

.hotspot-cluster {
    top: 27%;
    left: 29%;
    width: 3rem;
    height: 3rem;
}

.hotspot-place {
    top: 43%;
    left: 58%;
    width: 2rem;
    height: 2rem;
}

.hotspot-place::before {
    width: 0.62rem;
    height: 0.62rem;
    content: "";
    border-radius: 999px;
    background: #07140d;
}

.hotspot-team {
    right: 18%;
    bottom: 27%;
    width: 2.15rem;
    height: 2.15rem;
}

.hotspot-logbook {
    bottom: 18%;
    left: 40%;
    width: 2.2rem;
    height: 2.2rem;
}

.ubx-sim-search,
.ubx-sim-place,
.ubx-sim-list,
.ubx-sim-chat,
.ubx-sim-logbook,
.ubx-sim-phone,
.ubx-sim-caption,
.ubx-sim-action {
    position: absolute;
    z-index: 12;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.15rem;
    background: rgba(9, 13, 12, 0.72);
    backdrop-filter: blur(18px);
    box-shadow: 0 1.3rem 2.8rem rgba(0, 0, 0, 0.23);
    transition:
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ubx-sim-search {
    top: 4.5rem;
    left: 2rem;
    width: 15rem;
    padding: 1rem;
}

.ubx-sim-search small,
.ubx-sim-place small,
.ubx-sim-list small,
.ubx-sim-chat small,
.ubx-sim-logbook small,
.ubx-sim-caption small {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ubx-sim-search strong,
.ubx-sim-place strong,
.ubx-sim-list strong,
.ubx-sim-logbook strong,
.ubx-sim-caption strong {
    display: block;
    margin-top: 0.28rem;
    color: var(--ubx-text);
}

.ubx-sim-search span,
.ubx-sim-place p,
.ubx-sim-list span,
.ubx-sim-logbook em,
.ubx-sim-caption span {
    display: block;
    margin: 0.28rem 0 0;
    color: var(--ubx-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.ubx-sim-place {
    top: 5.8rem;
    right: 1.8rem;
    width: 18rem;
    padding: 0.85rem;
    transform: translate3d(0.8rem, 0, 40px);
}

.ubx-sim-place-media {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, 3.1rem);
    gap: 0.35rem;
    margin-bottom: 0.7rem;
}

.ubx-sim-place-media span {
    border-radius: 0.75rem;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 35%),
        linear-gradient(145deg, rgba(104, 128, 98, 0.42), rgba(73, 83, 80, 0.38));
}

.ubx-sim-place-media span:first-child {
    grid-row: span 2;
}

.ubx-sim-place div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin-top: 0.7rem;
}

.ubx-sim-place div:last-child span {
    display: inline-flex;
    gap: 0.32rem;
    align-items: center;
    padding: 0.36rem 0.52rem;
    color: var(--ubx-muted);
    font-size: 0.74rem;
    font-weight: 750;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.ubx-sim-list {
    right: 3rem;
    bottom: 8rem;
    width: 15.5rem;
    padding: 0.95rem;
}

.ubx-sim-list i {
    display: block;
    height: 0.42rem;
    margin-top: 0.56rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.ubx-sim-list i:nth-of-type(1) { width: 90%; }
.ubx-sim-list i:nth-of-type(2) { width: 72%; }
.ubx-sim-list i:nth-of-type(3) { width: 54%; }

.ubx-sim-chat {
    bottom: 6.2rem;
    left: 2rem;
    width: 14rem;
    padding: 0.85rem;
}

.ubx-sim-chat p {
    max-width: 84%;
    padding: 0.46rem 0.58rem;
    margin: 0.42rem 0 0;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    border-radius: 0.82rem;
    background: rgba(255, 255, 255, 0.07);
}

.ubx-sim-chat p.right {
    margin-left: auto;
    color: #07140d;
    background: var(--ubx-primary);
}

.ubx-sim-chat > span {
    display: block;
    margin-top: 0.55rem;
    color: var(--ubx-muted);
    font-size: 0.74rem;
}

.ubx-sim-logbook {
    right: 2rem;
    bottom: 2rem;
    display: flex;
    gap: 0.72rem;
    align-items: center;
    width: 19rem;
    padding: 0.86rem;
}

.ubx-sim-logbook > span {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    color: #07140d;
    font-size: 0.82rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-sim-phone {
    right: 9rem;
    bottom: 4.5rem;
    width: 8.2rem;
    height: 14.2rem;
    padding: 0.82rem;
    color: var(--ubx-text);
    border-radius: 1.55rem;
    background: rgba(6, 8, 9, 0.86);
}

.ubx-sim-phone > span {
    display: block;
    width: 3rem;
    height: 0.32rem;
    margin: 0 auto 0.68rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.ubx-sim-phone strong {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
}

.ubx-sim-phone div {
    position: relative;
    height: 9.1rem;
    overflow: hidden;
    border-radius: 1rem;
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        rgba(255, 255, 255, 0.055);
    background-size: 1.15rem 1.15rem;
}

.ubx-sim-phone i {
    position: absolute;
}

.phone-road {
    top: 51%;
    left: -12%;
    width: 110%;
    height: 1.05rem;
    border-radius: 999px;
    background: rgba(127, 118, 96, 0.45);
    transform: rotate(-18deg);
}

.phone-pin {
    display: inline-grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 999px;
}

.phone-pin.a {
    top: 4.1rem;
    left: 3rem;
    color: #07140d;
    font-size: 0.65rem;
    background: var(--ubx-primary);
}

.phone-pin.b {
    top: 2.6rem;
    right: 1rem;
    color: var(--ubx-text);
    background: rgba(var(--ubx-ambient-secondary-rgb), 0.42);
}

.phone-building {
    right: 0.9rem;
    bottom: 1.25rem;
    width: 2rem;
    height: 3.8rem;
    border-radius: 0.42rem;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(5deg);
}

.ubx-sim-caption {
    left: 50%;
    bottom: 2rem;
    width: min(30rem, calc(100% - 4rem));
    padding: 1rem 1.15rem;
    transform: translateX(-50%) translateZ(95px);
}

.ubx-sim-action {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 18;
    display: flex;
    gap: 0.65rem;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.62rem 1rem;
    color: var(--ubx-muted);
    text-align: center;
    border-radius: 999px;
    background: rgba(7, 10, 10, 0.64);
}

.ubx-sim-action .ubx-live-dot {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    margin: 0;
}

.ubx-sim-action small {
    font-size: 0.8rem;
    line-height: 1.35;
}

.ubx-simulator-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.ubx-simulator-steps span {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.65rem;
    color: var(--ubx-muted);
    font-size: 0.8rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.ubx-simulator-steps span.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    background: rgba(var(--ubx-primary-rgb), 0.09);
    transform: translateY(-0.08rem);
}

.ubx-simulator-stage[data-scenario="discover"] {
    --sim-map-scale: 1.02;
    --sim-map-x: 0;
    --sim-map-y: 0;
}

.ubx-simulator-stage[data-scenario="inspect"] {
    --sim-map-scale: 1.08;
    --sim-map-x: -1.2rem;
    --sim-map-y: -0.7rem;
}

.ubx-simulator-stage[data-scenario="plan"] {
    --sim-map-scale: 1.06;
    --sim-map-x: 0.5rem;
    --sim-map-y: -0.2rem;
}

.ubx-simulator-stage[data-scenario="remember"] {
    --sim-map-scale: 1.03;
    --sim-map-x: -0.4rem;
    --sim-map-y: 0.55rem;
}

.ubx-simulator-stage[data-scenario="discover"] .ubx-sim-search,
.ubx-simulator-stage[data-scenario="inspect"] .ubx-sim-place,
.ubx-simulator-stage[data-scenario="plan"] .ubx-sim-list,
.ubx-simulator-stage[data-scenario="plan"] .ubx-sim-chat,
.ubx-simulator-stage[data-scenario="plan"] .ubx-sim-phone,
.ubx-simulator-stage[data-scenario="remember"] .ubx-sim-logbook,
.ubx-simulator-stage[data-scenario="remember"] .ubx-sim-place {
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    box-shadow:
        0 1.4rem 3rem rgba(var(--ubx-primary-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-simulator-stage[data-scenario="discover"] .ubx-sim-place,
.ubx-simulator-stage[data-scenario="discover"] .ubx-sim-list,
.ubx-simulator-stage[data-scenario="discover"] .ubx-sim-chat,
.ubx-simulator-stage[data-scenario="discover"] .ubx-sim-logbook,
.ubx-simulator-stage[data-scenario="discover"] .ubx-sim-phone {
    opacity: 0.42;
    filter: saturate(0.82);
    transform: translateY(0.6rem) scale(0.96);
}

.ubx-simulator-stage[data-scenario="inspect"] .ubx-sim-place {
    transform: translate3d(-1rem, 0.35rem, 125px) scale(1.04);
}

.ubx-simulator-stage[data-scenario="inspect"] .ubx-sim-search,
.ubx-simulator-stage[data-scenario="inspect"] .ubx-sim-list,
.ubx-simulator-stage[data-scenario="inspect"] .ubx-sim-chat,
.ubx-simulator-stage[data-scenario="inspect"] .ubx-sim-logbook,
.ubx-simulator-stage[data-scenario="inspect"] .ubx-sim-phone {
    opacity: 0.48;
    filter: saturate(0.86);
}

.ubx-simulator-stage[data-scenario="plan"] .ubx-sim-list {
    transform: translate3d(-2rem, -3.4rem, 120px) scale(1.05);
}

.ubx-simulator-stage[data-scenario="plan"] .ubx-sim-chat {
    transform: translate3d(1.35rem, -1.45rem, 130px) scale(1.06);
}

.ubx-simulator-stage[data-scenario="plan"] .ubx-sim-phone {
    transform: translate3d(2.4rem, -2.1rem, 145px) rotateZ(3deg);
}

.ubx-simulator-stage[data-scenario="plan"] .sim-route {
    opacity: 1;
    transform: rotate(8deg) scale(1.04);
}

.ubx-simulator-stage[data-scenario="plan"] .ubx-sim-search,
.ubx-simulator-stage[data-scenario="plan"] .ubx-sim-place,
.ubx-simulator-stage[data-scenario="plan"] .ubx-sim-logbook {
    opacity: 0.46;
    filter: saturate(0.86);
}

.ubx-simulator-stage[data-scenario="remember"] .ubx-sim-logbook {
    transform: translate3d(-3rem, -2.8rem, 140px) scale(1.07);
}

.ubx-simulator-stage[data-scenario="remember"] .ubx-sim-place {
    transform: translate3d(-1.2rem, 0.7rem, 80px) scale(0.98);
}

.ubx-simulator-stage[data-scenario="remember"] .ubx-sim-search,
.ubx-simulator-stage[data-scenario="remember"] .ubx-sim-list,
.ubx-simulator-stage[data-scenario="remember"] .ubx-sim-chat,
.ubx-simulator-stage[data-scenario="remember"] .ubx-sim-phone {
    opacity: 0.44;
    filter: saturate(0.84);
}

.ubx-flight-recorder {
    position: relative;
    overflow: clip;
}

.ubx-flight-recorder::before {
    position: absolute;
    inset: 14% -12% auto;
    height: 34rem;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 30% 42%, rgba(var(--ubx-primary-rgb), 0.18), transparent 19rem),
        radial-gradient(circle at 78% 46%, rgba(var(--ubx-kind-chat-rgb), 0.12), transparent 21rem);
    filter: blur(12px);
}

.ubx-flight-steps {
    display: grid;
    gap: 0.68rem;
    margin-top: 1.45rem;
}

.ubx-flight-player {
    display: flex;
    flex-wrap: wrap;
    gap: 0.72rem;
    align-items: center;
    margin-top: 1.15rem;
}

.ubx-flight-play-button {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.62rem 0.9rem;
    color: #07140d;
    font-weight: 850;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0.9rem 2rem rgba(var(--ubx-primary-rgb), 0.16);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}

.ubx-flight-play-button:hover {
    transform: translateY(-0.08rem);
    filter: brightness(1.04);
    box-shadow: 0 1.1rem 2.3rem rgba(var(--ubx-primary-rgb), 0.2);
}

.ubx-flight-play-button svg {
    width: 1rem;
    height: 1rem;
}

.ubx-flight-play-button .icon-pause,
.ubx-flight-play-button.is-playing .icon-play {
    display: none;
}

.ubx-flight-play-button.is-playing .icon-pause {
    display: inline-block;
}

.ubx-flight-player small {
    color: var(--ubx-muted);
    font-weight: 700;
}

.ubx-flight-steps button {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.82rem 0.95rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.08rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
        rgba(var(--ubx-surface-rgb), 0.56);
    transition:
        transform 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.ubx-flight-steps button:hover,
.ubx-flight-steps button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.4);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.15), transparent 60%),
        rgba(var(--ubx-primary-rgb), 0.065);
    transform: translateX(0.18rem);
    box-shadow: 0 1rem 2.1rem rgba(var(--ubx-primary-rgb), 0.09);
}

.ubx-flight-steps b {
    display: inline-grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    color: #07140d;
    font-size: 0.74rem;
    border-radius: 0.72rem;
    background: var(--ubx-primary);
}

.ubx-flight-steps strong,
.ubx-flight-steps small {
    display: block;
}

.ubx-flight-steps strong {
    color: inherit;
    font-size: 0.94rem;
}

.ubx-flight-steps small {
    margin-top: 0.08rem;
    color: var(--ubx-muted);
    font-weight: 650;
}

.ubx-flight-stage {
    position: relative;
    padding: clamp(0.8rem, 2vw, 1.05rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 18% 16%, rgba(var(--ubx-primary-rgb), 0.18), transparent 18rem),
        radial-gradient(circle at 84% 70%, rgba(255, 255, 255, 0.08), transparent 18rem),
        rgba(255, 255, 255, 0.045);
    box-shadow:
        0 2rem 5rem rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform:
        perspective(var(--showcase-depth))
        rotateX(calc(8deg - var(--scroll-lift, 0) * 4deg))
        rotateY(calc(8deg - var(--scroll-lift, 0) * 6deg));
    transform-style: preserve-3d;
}

.ubx-flight-desktop {
    position: relative;
    min-height: 41rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.55rem;
    background:
        linear-gradient(145deg, rgba(9, 12, 12, 0.97), rgba(22, 27, 25, 0.92)),
        rgba(8, 10, 10, 0.94);
    transform-style: preserve-3d;
}

.ubx-flight-recording-badge {
    position: absolute;
    top: 4.45rem;
    right: 1.7rem;
    z-index: 28;
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.45rem 0.62rem;
    color: var(--ubx-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(7, 10, 10, 0.62);
    backdrop-filter: blur(14px);
}

.ubx-flight-recording-badge span {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: #ff6b5f;
    box-shadow: 0 0 0 0.3rem rgba(255, 107, 95, 0.14);
    animation: ubx-recording-pulse 1.5s ease-in-out infinite;
}

.ubx-flight-desktop::before {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.075), transparent 23% 75%, rgba(255, 255, 255, 0.04)),
        radial-gradient(circle at 50% 46%, transparent 0 46%, rgba(0, 0, 0, 0.28));
    opacity: 0.72;
}

.ubx-flight-topbar {
    position: relative;
    z-index: 34;
    display: flex;
    gap: 0.48rem;
    align-items: center;
    padding: 0.72rem 0.9rem;
    color: var(--ubx-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
}

.ubx-flight-topbar > span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
}

.ubx-flight-topbar strong {
    margin-left: 0.4rem;
    font-size: 0.82rem;
}

.ubx-flight-topbar em {
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 850;
}

.ubx-flight-map-screen {
    position: absolute;
    inset: 3.2rem 1rem 1rem;
    overflow: hidden;
    border-radius: 1.35rem;
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(145deg, #223022, #18231e 48%, #24251e);
    background-size: 2.6rem 2.6rem, 2.6rem 2.6rem, auto;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform:
        translateZ(0)
        scale(var(--flight-map-scale, 1))
        translate(var(--flight-map-x, 0), var(--flight-map-y, 0));
    transform-origin: 50% 50%;
    transition: transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.flight-land,
.flight-water,
.flight-road,
.flight-rail,
.flight-pin,
.flight-route {
    position: absolute;
}

.flight-land {
    border-radius: 48% 52% 42% 58%;
    background: rgba(94, 119, 77, 0.22);
}

.flight-land.land-a {
    top: -11%;
    right: -6%;
    width: 45%;
    height: 35%;
}

.flight-land.land-b {
    bottom: -12%;
    left: -8%;
    width: 55%;
    height: 42%;
    background: rgba(83, 105, 87, 0.26);
}

.flight-water {
    top: 8%;
    left: 49%;
    width: 16%;
    height: 72%;
    border-radius: 999px;
    background: rgba(85, 122, 138, 0.27);
    transform: rotate(18deg);
}

.flight-road {
    height: 2.1rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, 0.15) 48% 52%, transparent 52%),
        rgba(127, 118, 96, 0.43);
}

.flight-road.road-a {
    top: 54%;
    left: -8%;
    width: 68%;
    transform: rotate(-13deg);
}

.flight-road.road-b {
    top: 25%;
    right: -8%;
    width: 52%;
    height: 1.8rem;
    transform: rotate(25deg);
}

.flight-rail {
    top: 36%;
    left: 11%;
    width: 54%;
    height: 0.34rem;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, rgba(222, 215, 190, 0.55) 0 0.8rem, transparent 0.8rem 1.5rem);
    opacity: 0.6;
    transform: rotate(14deg);
}

.flight-route {
    top: 35%;
    left: 26%;
    z-index: 4;
    width: 46%;
    height: 32%;
    border-top: 4px solid rgba(var(--ubx-primary-rgb), 0.7);
    border-right: 4px solid rgba(var(--ubx-primary-rgb), 0.5);
    border-radius: 100% 20% 90% 28%;
    opacity: 0.22;
    filter: drop-shadow(0 0 1rem rgba(var(--ubx-primary-rgb), 0.18));
    transform: rotate(8deg);
    transition: opacity 260ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.flight-pin {
    z-index: 6;
    display: inline-grid;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.44rem rgba(var(--ubx-primary-rgb), 0.15),
        0 1rem 2.2rem rgba(0, 0, 0, 0.22);
}

.flight-pin.pin-a { top: 27%; left: 29%; width: 3rem; height: 3rem; }
.flight-pin.pin-b { top: 43%; left: 58%; width: 2rem; height: 2rem; }
.flight-pin.pin-c { bottom: 18%; left: 40%; width: 2.2rem; height: 2.2rem; }
.flight-pin.pin-d { right: 18%; bottom: 27%; width: 2.15rem; height: 2.15rem; }

.ubx-flight-search-panel,
.ubx-flight-place-panel,
.ubx-flight-list-panel,
.ubx-flight-team-panel,
.ubx-flight-memory-panel,
.ubx-flight-narration {
    position: absolute;
    z-index: 12;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.15rem;
    background: rgba(9, 13, 12, 0.72);
    backdrop-filter: blur(18px);
    box-shadow: 0 1.3rem 2.8rem rgba(0, 0, 0, 0.23);
    transition:
        transform 540ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ubx-flight-search-panel {
    top: 4.5rem;
    left: 2rem;
    width: 15rem;
    padding: 1rem;
}

.ubx-flight-search-panel small,
.ubx-flight-place-panel small,
.ubx-flight-list-panel small,
.ubx-flight-team-panel small,
.ubx-flight-memory-panel small,
.ubx-flight-narration small {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ubx-flight-search-panel strong,
.ubx-flight-place-panel strong,
.ubx-flight-list-panel strong,
.ubx-flight-memory-panel strong,
.ubx-flight-narration strong {
    display: block;
    margin-top: 0.28rem;
    color: var(--ubx-text);
}

.ubx-flight-search-panel span,
.ubx-flight-place-panel span,
.ubx-flight-list-panel span,
.ubx-flight-memory-panel em,
.ubx-flight-narration span {
    display: block;
    margin-top: 0.26rem;
    color: var(--ubx-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.ubx-flight-place-panel {
    top: 5.8rem;
    right: 1.8rem;
    width: 17.5rem;
    padding: 0.86rem;
}

.flight-media {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: repeat(2, 3rem);
    gap: 0.34rem;
    margin-bottom: 0.68rem;
}

.flight-media i {
    border-radius: 0.72rem;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 35%),
        linear-gradient(145deg, rgba(104, 128, 98, 0.42), rgba(73, 83, 80, 0.38));
}

.flight-media i:first-child {
    grid-row: span 2;
}

.ubx-flight-list-panel {
    right: 3rem;
    bottom: 8rem;
    width: 15.5rem;
    padding: 0.95rem;
}

.ubx-flight-list-panel i {
    display: block;
    height: 0.42rem;
    margin-top: 0.56rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.ubx-flight-list-panel i:nth-of-type(1) { width: 90%; }
.ubx-flight-list-panel i:nth-of-type(2) { width: 72%; }
.ubx-flight-list-panel i:nth-of-type(3) { width: 54%; }

.ubx-flight-team-panel {
    bottom: 6.2rem;
    left: 2rem;
    width: 14rem;
    padding: 0.85rem;
}

.ubx-flight-team-panel p {
    max-width: 84%;
    padding: 0.46rem 0.58rem;
    margin: 0.42rem 0 0;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    border-radius: 0.82rem;
    background: rgba(255, 255, 255, 0.07);
}

.ubx-flight-team-panel p.right {
    margin-left: auto;
    color: #07140d;
    background: var(--ubx-primary);
}

.ubx-flight-team-panel > span {
    display: block;
    margin-top: 0.55rem;
    color: var(--ubx-muted);
    font-size: 0.74rem;
}

.ubx-flight-memory-panel {
    right: 2rem;
    bottom: 2rem;
    display: flex;
    gap: 0.72rem;
    align-items: center;
    width: 19rem;
    padding: 0.86rem;
}

.ubx-flight-memory-panel > span {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    color: #07140d;
    font-size: 0.82rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-flight-narration {
    left: 50%;
    bottom: 2rem;
    width: min(30rem, calc(100% - 4rem));
    padding: 1rem 1.15rem;
    transform: translateX(-50%) translateZ(100px);
}

.ubx-flight-progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.ubx-flight-progress span {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    justify-content: center;
    padding: 0.58rem 0.55rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.ubx-flight-progress span::before {
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    content: "";
    background: var(--ubx-primary);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}

.ubx-flight-progress span.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    background: rgba(var(--ubx-primary-rgb), 0.09);
    transform: translateY(-0.08rem);
}

.ubx-flight-stage.is-playing .ubx-flight-progress span.is-active::before {
    opacity: 1;
    animation: ubx-flight-progress 5.6s linear both;
}

.ubx-flight-stage[data-flight-scene="map"] {
    --flight-map-scale: 1.01;
}

.ubx-flight-stage[data-flight-scene="place"] {
    --flight-map-scale: 1.08;
    --flight-map-x: -1.1rem;
    --flight-map-y: -0.6rem;
}

.ubx-flight-stage[data-flight-scene="list"],
.ubx-flight-stage[data-flight-scene="team"] {
    --flight-map-scale: 1.06;
    --flight-map-x: 0.45rem;
}

.ubx-flight-stage[data-flight-scene="memory"] {
    --flight-map-scale: 1.03;
    --flight-map-y: 0.5rem;
}

.ubx-flight-stage[data-flight-scene="map"] .ubx-flight-search-panel,
.ubx-flight-stage[data-flight-scene="place"] .ubx-flight-place-panel,
.ubx-flight-stage[data-flight-scene="list"] .ubx-flight-list-panel,
.ubx-flight-stage[data-flight-scene="team"] .ubx-flight-team-panel,
.ubx-flight-stage[data-flight-scene="team"] .ubx-flight-list-panel,
.ubx-flight-stage[data-flight-scene="memory"] .ubx-flight-memory-panel,
.ubx-flight-stage[data-flight-scene="memory"] .ubx-flight-place-panel {
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    box-shadow:
        0 1.4rem 3rem rgba(var(--ubx-primary-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-flight-stage[data-flight-scene="map"] .ubx-flight-place-panel,
.ubx-flight-stage[data-flight-scene="map"] .ubx-flight-list-panel,
.ubx-flight-stage[data-flight-scene="map"] .ubx-flight-team-panel,
.ubx-flight-stage[data-flight-scene="map"] .ubx-flight-memory-panel,
.ubx-flight-stage[data-flight-scene="place"] .ubx-flight-search-panel,
.ubx-flight-stage[data-flight-scene="place"] .ubx-flight-list-panel,
.ubx-flight-stage[data-flight-scene="place"] .ubx-flight-team-panel,
.ubx-flight-stage[data-flight-scene="place"] .ubx-flight-memory-panel,
.ubx-flight-stage[data-flight-scene="list"] .ubx-flight-search-panel,
.ubx-flight-stage[data-flight-scene="list"] .ubx-flight-place-panel,
.ubx-flight-stage[data-flight-scene="list"] .ubx-flight-team-panel,
.ubx-flight-stage[data-flight-scene="list"] .ubx-flight-memory-panel,
.ubx-flight-stage[data-flight-scene="team"] .ubx-flight-search-panel,
.ubx-flight-stage[data-flight-scene="team"] .ubx-flight-place-panel,
.ubx-flight-stage[data-flight-scene="team"] .ubx-flight-memory-panel,
.ubx-flight-stage[data-flight-scene="memory"] .ubx-flight-search-panel,
.ubx-flight-stage[data-flight-scene="memory"] .ubx-flight-list-panel,
.ubx-flight-stage[data-flight-scene="memory"] .ubx-flight-team-panel {
    opacity: 0.45;
    filter: saturate(0.84);
}

.ubx-flight-stage[data-flight-scene="place"] .ubx-flight-place-panel {
    transform: translate3d(-1rem, 0.35rem, 130px) scale(1.04);
}

.ubx-flight-stage[data-flight-scene="list"] .ubx-flight-list-panel {
    transform: translate3d(-2rem, -3.4rem, 130px) scale(1.05);
}

.ubx-flight-stage[data-flight-scene="team"] .ubx-flight-list-panel {
    transform: translate3d(-2.2rem, -3.5rem, 105px) scale(1.02);
}

.ubx-flight-stage[data-flight-scene="team"] .ubx-flight-team-panel {
    transform: translate3d(1.35rem, -1.45rem, 140px) scale(1.06);
}

.ubx-flight-stage[data-flight-scene="team"] .flight-route {
    opacity: 1;
    transform: rotate(8deg) scale(1.04);
}

.ubx-flight-stage[data-flight-scene="memory"] .ubx-flight-memory-panel {
    transform: translate3d(-3rem, -2.8rem, 140px) scale(1.07);
}

.ubx-scenario-showcase {
    position: relative;
    overflow: clip;
}

.ubx-scenario-grid {
    display: grid;
    gap: 1.2rem;
}

.ubx-scenario-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    min-height: 25rem;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--ubx-border);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 78% 28%, rgba(var(--ubx-primary-rgb), 0.16), transparent 18rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
        rgba(var(--ubx-surface-rgb), 0.66);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(22px);
}

.ubx-scenario-card:nth-child(even) {
    grid-template-columns: minmax(24rem, 1.1fr) minmax(0, 0.9fr);
}

.ubx-scenario-card:nth-child(even) .ubx-scenario-copy {
    order: 2;
}

.ubx-scenario-copy small {
    color: var(--ubx-primary);
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-scenario-copy h3 {
    max-width: 13ch;
    margin: 0.5rem 0 0.8rem;
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 950;
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.ubx-scenario-copy p {
    max-width: 34rem;
    margin: 0;
    color: var(--ubx-muted);
    line-height: 1.65;
}

.ubx-scenario-visual {
    position: relative;
    min-height: 21rem;
    perspective: var(--showcase-depth);
}

.ubx-scenario-monitor,
.ubx-scenario-tactical-mini,
.ubx-scenario-logbook {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
        rgba(8, 12, 16, 0.82);
    box-shadow:
        0 2rem 4rem rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
}

.ubx-scenario-monitor {
    inset: 0 5% 9% 0;
    overflow: hidden;
    border-radius: 1.55rem;
    transform: perspective(900px) rotateX(7deg) rotateY(-10deg) rotateZ(-1deg);
}

.ubx-scenario-toolbar {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    color: var(--ubx-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(7, 10, 14, 0.76);
}

.ubx-scenario-map {
    position: absolute;
    inset: 2.9rem 0 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 22% 32%, rgba(91, 131, 98, 0.22), transparent 13rem),
        radial-gradient(ellipse at 76% 66%, rgba(74, 118, 140, 0.16), transparent 14rem),
        linear-gradient(130deg, rgba(42, 58, 52, 0.92), rgba(15, 24, 26, 0.96));
}

.ubx-scenario-map::before {
    position: absolute;
    inset: -10%;
    content: "";
    background:
        linear-gradient(26deg, transparent 0 44%, rgba(226, 218, 190, 0.12) 44% 45%, transparent 45%),
        linear-gradient(116deg, transparent 0 56%, rgba(226, 218, 190, 0.1) 56% 57%, transparent 57%);
}

.ubx-scenario-map .road,
.ubx-scenario-map .water {
    position: absolute;
    pointer-events: none;
}

.ubx-scenario-map .road {
    z-index: 1;
    height: 0.22rem;
    border-radius: 999px;
    background: rgba(226, 218, 190, 0.22);
}

.ubx-scenario-map .r1 {
    top: 44%;
    left: -6%;
    width: 112%;
    transform: rotate(-13deg);
}

.ubx-scenario-map .r2 {
    top: 62%;
    left: 25%;
    width: 72%;
    transform: rotate(33deg);
}

.ubx-scenario-map .water {
    right: -8%;
    bottom: 15%;
    width: 52%;
    height: 18%;
    border-radius: 999px;
    background: rgba(66, 126, 148, 0.22);
    transform: rotate(-16deg);
}

.ubx-scenario-map .pin {
    position: absolute;
    z-index: 3;
    display: inline-grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    color: #07140d;
    font-size: 0.72rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.42rem 0 rgba(0, 0, 0, 0.24),
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.13),
        0 0 2rem rgba(var(--ubx-primary-rgb), 0.28);
    animation: ubx-reel-pin-pulse 3s ease-in-out infinite;
}

.ubx-scenario-map .p1 { top: 34%; left: 44%; }
.ubx-scenario-map .p2 { top: 56%; left: 62%; animation-delay: -1s; }
.ubx-scenario-map .p3 {
    top: 28%;
    right: 18%;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--ubx-kind-category);
    animation-delay: -2s;
}

.ubx-scenario-pop {
    position: absolute;
    z-index: 4;
    right: 1rem;
    bottom: 1rem;
    padding: 0.78rem 0.9rem;
    color: var(--ubx-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.95rem;
    background: rgba(10, 12, 18, 0.72);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
}

.ubx-scenario-note {
    position: absolute;
    z-index: 5;
    padding: 0.65rem 0.8rem;
    color: var(--ubx-text);
    font-size: 0.82rem;
    font-weight: 900;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.24);
    border-radius: 0.9rem;
    background: rgba(var(--ubx-primary-rgb), 0.11);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
    animation: ubx-scenario-note 5s ease-in-out infinite;
}

.note-a { top: 16%; right: 0; }
.note-b { right: 13%; bottom: 0; animation-delay: -2s; }

.ubx-scenario-tactical-mini {
    inset: 0 28% 0 0;
    overflow: hidden;
    border-radius: 1.55rem;
    background:
        repeating-linear-gradient(0deg, transparent 0 2.4rem, rgba(255, 255, 255, 0.055) 2.4rem 2.45rem),
        repeating-linear-gradient(90deg, transparent 0 2.4rem, rgba(255, 255, 255, 0.055) 2.4rem 2.45rem),
        rgba(11, 16, 19, 0.92);
    transform: perspective(900px) rotateX(11deg) rotateY(8deg) rotateZ(-2deg);
}

.ubx-scenario-tactical-mini .building,
.ubx-scenario-tactical-mini .route,
.ubx-scenario-tactical-mini .team,
.ubx-scenario-tactical-mini .marker {
    position: absolute;
}

.ubx-scenario-tactical-mini .building {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-scenario-tactical-mini .building.a {
    top: 16%;
    left: 12%;
    width: 34%;
    height: 24%;
    transform: rotate(-7deg);
}

.ubx-scenario-tactical-mini .building.b {
    right: 15%;
    bottom: 18%;
    width: 26%;
    height: 48%;
    transform: rotate(5deg);
}

.ubx-scenario-tactical-mini .route {
    top: 43%;
    left: 22%;
    width: 56%;
    height: 23%;
    border-top: 3px solid rgba(var(--ubx-primary-rgb), 0.78);
    border-right: 3px solid rgba(var(--ubx-primary-rgb), 0.42);
    border-radius: 100% 30% 90% 20%;
    transform: rotate(13deg);
}

.ubx-scenario-tactical-mini .team,
.ubx-scenario-tactical-mini .marker {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
}

.ubx-scenario-tactical-mini .team {
    color: #07140d;
    font-weight: 950;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14);
}

.ubx-scenario-tactical-mini .team.a { top: 38%; left: 34%; }
.ubx-scenario-tactical-mini .team.b { top: 62%; right: 30%; }

.ubx-scenario-tactical-mini .marker {
    color: var(--ubx-text);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.5);
    background: rgba(var(--ubx-kind-chat-rgb), 0.32);
}

.ubx-scenario-tactical-mini .cam { top: 20%; right: 35%; }
.ubx-scenario-tactical-mini .entry { bottom: 18%; left: 20%; }

.ubx-scenario-chat-mini {
    position: absolute;
    right: 0;
    bottom: 8%;
    z-index: 5;
    display: grid;
    gap: 0.55rem;
    width: min(15rem, 46%);
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.2rem;
    background: rgba(10, 12, 18, 0.72);
    box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
}

.ubx-scenario-chat-mini span {
    padding: 0.55rem 0.65rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    border-radius: 0.82rem;
    background: rgba(255, 255, 255, 0.065);
}

.ubx-scenario-logbook {
    inset: 1% 9% 4% 8%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.65rem;
    padding: 2rem;
    text-align: center;
    border-radius: 1.65rem;
    transform: perspective(900px) rotateX(7deg) rotateY(-9deg) rotateZ(1deg);
}

.ubx-scenario-avatar {
    display: grid;
    width: 5rem;
    height: 5rem;
    place-items: center;
    color: #07140d;
    font-size: 1.2rem;
    font-weight: 950;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.55), transparent 1.4rem),
        var(--ubx-primary);
    box-shadow:
        0 0 0 0.5rem rgba(var(--ubx-primary-rgb), 0.14),
        0 1.2rem 2.4rem rgba(0, 0, 0, 0.24);
}

.ubx-scenario-logbook strong {
    font-size: 1.35rem;
}

.ubx-scenario-logbook span {
    color: var(--ubx-muted);
}

.ubx-scenario-media-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.ubx-scenario-media-row i {
    width: 4.2rem;
    height: 3.2rem;
    border-radius: 0.75rem;
    background:
        radial-gradient(circle at 24% 22%, rgba(var(--ubx-primary-rgb), 0.22), transparent 3rem),
        linear-gradient(145deg, #303832, #11171b);
    box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.18);
}

.ubx-scenario-achievement {
    position: absolute;
    right: 0;
    bottom: 8%;
    z-index: 6;
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.72rem 0.9rem;
    color: #07140d;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 1.2rem 2.4rem rgba(0, 0, 0, 0.24),
        0 0 2rem rgba(var(--ubx-primary-rgb), 0.22);
    animation: ubx-scenario-achievement 4.8s ease-in-out infinite;
}

.ubx-map-exploder {
    min-height: 38rem;
    overflow: hidden;
    border-radius: 2rem;
    perspective: var(--showcase-depth);
}

.ubx-map-exploder-base {
    position: absolute;
    inset: 12% 8%;
    overflow: hidden;
    border-radius: 1.4rem;
    background:
        linear-gradient(135deg, rgba(31, 44, 40, 0.96), rgba(17, 25, 27, 0.96));
    transform:
        rotateX(calc(15deg - var(--scroll-lift, 0) * 4deg))
        rotateZ(-1.5deg)
        translateY(calc(var(--scroll-lift, 0) * 0.7rem));
    box-shadow: 0 2.2rem 4rem rgba(0, 0, 0, 0.24);
}

.ubx-map-ui-topbar,
.ubx-map-ui-sidebar,
.ubx-map-ui-preview {
    position: absolute;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1rem;
    background: rgba(10, 12, 18, 0.72);
    box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
}

.ubx-map-ui-topbar {
    top: 1rem;
    right: 1rem;
    left: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
}

.ubx-map-ui-topbar span {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
}

.ubx-map-ui-sidebar {
    top: 4.8rem;
    left: 1rem;
    display: grid;
    gap: 0.45rem;
    width: 11rem;
    padding: 0.85rem;
}

.ubx-map-ui-sidebar strong {
    margin-bottom: 0.2rem;
}

.ubx-map-ui-sidebar span {
    padding: 0.42rem 0.55rem;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-map-ui-sidebar span.active {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-map-ui-canvas {
    position: absolute;
    inset: 4.6rem 1rem 1rem 13rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.1rem;
    background:
        radial-gradient(ellipse at 18% 22%, rgba(91, 131, 98, 0.18), transparent 18rem),
        radial-gradient(ellipse at 80% 72%, rgba(62, 88, 96, 0.2), transparent 16rem),
        linear-gradient(128deg, rgba(43, 58, 52, 0.86), rgba(22, 31, 33, 0.92));
}

.ubx-map-ui-canvas::before {
    position: absolute;
    inset: -10%;
    content: "";
    background:
        linear-gradient(34deg, transparent 0 43%, rgba(83, 126, 142, 0.18) 43% 49%, transparent 49% 100%),
        linear-gradient(126deg, transparent 0 35%, rgba(235, 224, 200, 0.1) 35% 36%, transparent 36% 100%),
        linear-gradient(78deg, transparent 0 58%, rgba(235, 224, 200, 0.08) 58% 59%, transparent 59% 100%);
}

.ubx-map-area {
    position: absolute;
    z-index: 1;
    padding: 0.35rem 0.55rem;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.78rem;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
}

.area-a { top: 18%; left: 28%; }
.area-b { right: 18%; bottom: 26%; }
.area-c { top: 50%; left: 48%; }

.ubx-map-ui-preview {
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: 0.15rem;
    width: min(17rem, 52%);
    padding: 0.85rem;
}

.ubx-map-ui-preview small,
.ubx-map-ui-preview span {
    color: var(--ubx-muted);
}

.ubx-map-exploder-path {
    position: absolute;
    z-index: 2;
    inset: 38% 18% 34% 18%;
    border-top: 4px solid rgba(var(--ubx-primary-rgb), 0.88);
    border-left: 4px solid rgba(var(--ubx-primary-rgb), 0.42);
    border-radius: 90% 20% 80% 30%;
    transform: rotate(11deg);
}

.marker-one { top: 28%; left: 25%; }
.marker-two { top: 52%; right: 24%; }
.marker-three { bottom: 26%; left: 48%; }

.ubx-map-layer {
    position: absolute;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    width: min(22rem, 76%);
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.25rem;
    background: rgba(12, 14, 20, 0.72);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    opacity: calc(0.74 + var(--panel-focus, 0) * 0.26);
    transform:
        translate3d(0, calc((1 - var(--panel-focus, 0)) * 1.4rem), calc(var(--panel-focus, 0) * 70px))
        scale(calc(0.97 + var(--panel-focus, 0) * 0.03));
    transition: transform 220ms ease, opacity 220ms ease;
}

.ubx-map-layer svg {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--ubx-primary);
}

.ubx-map-layer strong,
.ubx-map-layer span {
    display: block;
}

.ubx-map-layer span {
    color: var(--ubx-muted);
    font-size: 0.92rem;
}

.ubx-layer-search {
    top: 9%;
    left: 7%;
}

.ubx-layer-filter {
    top: 44%;
    right: 5%;
}

.ubx-layer-detail {
    bottom: 8%;
    left: 13%;
}

.ubx-showcase-map-demo {
    overflow: visible;
}

.ubx-showcase-journey {
    padding-top: clamp(3rem, 7vw, 5.5rem);
    padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.ubx-journey-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.ubx-journey-rail::before {
    position: absolute;
    top: 2.05rem;
    right: 8%;
    left: 8%;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, rgba(var(--ubx-primary-rgb), 0.08), rgba(var(--ubx-primary-rgb), 0.45), rgba(var(--ubx-kind-chat-rgb), 0.32), rgba(var(--ubx-primary-rgb), 0.08));
    transform-origin: left;
    animation: ubx-journey-line 5.8s ease-in-out infinite;
}

.ubx-journey-step {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.35rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
        rgba(var(--ubx-surface-rgb), 0.68);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ubx-journey-step:hover {
    border-color: rgba(var(--ubx-primary-rgb), 0.28);
    transform: translateY(-0.18rem);
    box-shadow:
        0 1.4rem 3.4rem rgba(0, 0, 0, 0.2),
        0 0 2rem rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-journey-step > span {
    display: inline-grid;
    width: 4.1rem;
    height: 4.1rem;
    place-items: center;
    color: #07140d;
    border-radius: 1.25rem;
    background: var(--ubx-primary);
    box-shadow: 0 1rem 2.2rem rgba(var(--ubx-primary-rgb), 0.2);
}

.ubx-journey-step small {
    color: var(--ubx-primary);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-journey-step h3 {
    margin: 0.2rem 0 0.35rem;
    font-weight: 900;
}

.ubx-journey-step p {
    margin: 0;
    color: var(--ubx-muted);
}

.ubx-mission-trailer {
    position: relative;
    overflow: clip;
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.ubx-mission-trailer::before {
    position: absolute;
    inset: 6% -18% auto;
    height: 38rem;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 45%, rgba(var(--ubx-primary-rgb), 0.16), transparent 22rem),
        radial-gradient(circle at 78% 42%, rgba(var(--ubx-kind-place-rgb), 0.12), transparent 26rem);
}

.ubx-mission-controls {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.55rem;
}

.ubx-mission-controls button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.32rem 0.72rem;
    align-items: center;
    padding: 0.95rem 1rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid var(--ubx-border);
    border-radius: 1.2rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
        rgba(var(--ubx-surface-rgb), 0.62);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(18px);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease,
        background 180ms ease;
}

.ubx-mission-controls button:hover,
.ubx-mission-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    background:
        radial-gradient(circle at 14% 50%, rgba(var(--ubx-primary-rgb), 0.18), transparent 12rem),
        rgba(var(--ubx-surface-rgb), 0.74);
    box-shadow:
        0 1.25rem 3rem rgba(0, 0, 0, 0.19),
        0 0 2.5rem rgba(var(--ubx-primary-rgb), 0.1);
    transform: translateX(0.16rem);
}

.ubx-mission-controls button > span {
    grid-row: span 2;
    display: inline-grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border-radius: 0.9rem;
    background: var(--ubx-primary);
}

.ubx-mission-controls strong,
.ubx-mission-controls small {
    display: block;
}

.ubx-mission-controls small {
    color: var(--ubx-muted);
}

.ubx-mission-stage {
    position: relative;
    min-height: clamp(43rem, 70vw, 58rem);
    overflow: hidden;
    border: 1px solid var(--ubx-border);
    border-radius: clamp(1.8rem, 3vw, 2.8rem);
    background:
        radial-gradient(circle at var(--shine-x, 58%) var(--shine-y, 32%), rgba(255, 255, 255, 0.11), transparent 24rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
        linear-gradient(135deg, rgba(12, 18, 18, 0.97), rgba(6, 9, 13, 0.99));
    box-shadow:
        0 3.4rem 8.6rem rgba(0, 0, 0, 0.38),
        0 0 4.5rem rgba(var(--ubx-primary-rgb), 0.09);
    transform:
        perspective(var(--showcase-depth))
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    isolation: isolate;
}

.ubx-mission-glow {
    position: absolute;
    inset: -16%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(var(--ubx-primary-rgb), 0.18), transparent 24rem),
        radial-gradient(circle at 82% 76%, rgba(var(--ubx-kind-chat-rgb), 0.12), transparent 26rem);
    filter: blur(0.4px);
    animation: ubx-mission-glow 12s ease-in-out infinite alternate;
}

.ubx-mission-header {
    position: absolute;
    z-index: 22;
    right: 1.1rem;
    bottom: 1.1rem;
    left: 1.1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.35rem;
    background: rgba(7, 10, 14, 0.72);
    box-shadow: 0 1.8rem 3.8rem rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(22px);
    transform: translateZ(280px);
}

.ubx-mission-header small,
.ubx-mission-header span {
    display: block;
}

.ubx-mission-header small {
    color: var(--ubx-primary);
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-mission-header strong {
    display: block;
    margin: 0.22rem 0;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    line-height: 1.05;
}

.ubx-mission-header span {
    color: var(--ubx-muted);
    line-height: 1.42;
}

.ubx-mission-timeline {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.ubx-mission-timeline i {
    display: block;
    width: 2.2rem;
    height: 0.34rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.ubx-mission-timeline i::before {
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 0.92));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-mission-timeline i.is-active::before,
.ubx-mission-timeline i.is-complete::before {
    transform: scaleX(1);
}

.ubx-mission-shot-rail {
    position: absolute;
    z-index: 24;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    transform: translateZ(300px);
}

.ubx-mission-shot-rail span {
    position: relative;
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    padding: 0.72rem 0.78rem 0.76rem;
    overflow: hidden;
    color: var(--ubx-muted);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background: rgba(7, 10, 14, 0.58);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
    transition:
        color 240ms ease,
        border-color 240ms ease,
        background 240ms ease,
        transform 240ms ease,
        box-shadow 240ms ease;
}

.ubx-mission-shot-rail span::before {
    position: absolute;
    inset: auto 0 0;
    height: 0.18rem;
    content: "";
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 0.9));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-mission-shot-rail span::after {
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    width: 0.45rem;
    height: 0.45rem;
    content: "";
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.ubx-mission-shot-rail span.is-active,
.ubx-mission-shot-rail span.is-complete {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    background:
        radial-gradient(circle at 8% 20%, rgba(var(--ubx-primary-rgb), 0.18), transparent 7rem),
        rgba(7, 10, 14, 0.7);
}

.ubx-mission-shot-rail span.is-active {
    transform: translateY(-0.08rem);
    box-shadow:
        0 1.2rem 2.8rem rgba(0, 0, 0, 0.28),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-mission-shot-rail span.is-active::after {
    background: var(--ubx-primary);
    box-shadow: 0 0 1.2rem rgba(var(--ubx-primary-rgb), 0.55);
}

.ubx-mission-shot-rail span.is-active::before,
.ubx-mission-shot-rail span.is-complete::before {
    transform: scaleX(1);
}

.ubx-mission-shot-rail b,
.ubx-mission-shot-rail small {
    color: var(--ubx-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-mission-shot-rail strong {
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-mission-camera-frame {
    position: absolute;
    z-index: 28;
    inset: 8.2rem 6.5% 10.2rem;
    pointer-events: none;
    transform: translateZ(360px);
}

.ubx-mission-camera-frame .corner {
    position: absolute;
    width: 3.1rem;
    height: 3.1rem;
    border-color: rgba(var(--ubx-primary-rgb), 0.62);
    filter: drop-shadow(0 0 1rem rgba(var(--ubx-primary-rgb), 0.28));
}

.ubx-mission-camera-frame .tl {
    top: 0;
    left: 0;
    border-top: 2px solid;
    border-left: 2px solid;
}

.ubx-mission-camera-frame .tr {
    top: 0;
    right: 0;
    border-top: 2px solid;
    border-right: 2px solid;
}

.ubx-mission-camera-frame .bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid;
    border-left: 2px solid;
}

.ubx-mission-camera-frame .br {
    right: 0;
    bottom: 0;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.ubx-mission-camera-frame .focus-ring {
    position: absolute;
    top: var(--mission-focus-y, 46%);
    left: var(--mission-focus-x, 49%);
    width: 5.2rem;
    height: 5.2rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    box-shadow:
        0 0 0 0.45rem rgba(var(--ubx-primary-rgb), 0.08),
        inset 0 0 1.2rem rgba(var(--ubx-primary-rgb), 0.12);
    transform: translate(-50%, -50%);
    transition:
        top 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        left 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        width 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        height 780ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-mission-camera-frame small {
    position: absolute;
    right: 0;
    bottom: -1.75rem;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ubx-mission-stage[data-mission-scene="team"] {
    --mission-focus-x: 75%;
    --mission-focus-y: 46%;
}

.ubx-mission-stage[data-mission-scene="team"] .ubx-mission-camera-frame .focus-ring {
    width: 7rem;
    height: 7rem;
}

.ubx-mission-stage[data-mission-scene="memory"] {
    --mission-focus-x: 67%;
    --mission-focus-y: 74%;
}

.ubx-mission-stage[data-mission-scene="memory"] .ubx-mission-camera-frame .focus-ring {
    width: 8.2rem;
    height: 4.8rem;
    border-radius: 2rem;
}

.ubx-mission-browser {
    position: absolute;
    z-index: 2;
    inset: 15% 7% 18%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.55rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)),
        rgba(12, 15, 18, 0.82);
    box-shadow: 0 2.4rem 5.5rem rgba(0, 0, 0, 0.34);
    transform: translate3d(0, 0, 130px) rotateX(8deg) rotateY(-5deg) rotateZ(-1deg);
    transform-style: preserve-3d;
}

.ubx-mission-browser-top {
    position: absolute;
    z-index: 12;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.72rem 0.82rem;
    color: var(--ubx-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(7, 10, 14, 0.78);
    backdrop-filter: blur(18px);
}

.ubx-mission-browser-top span {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.ubx-mission-browser-top strong {
    margin-left: 0.4rem;
    font-size: 0.82rem;
}

.ubx-mission-browser-top em {
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-mission-map {
    position: absolute;
    inset: 3.1rem 0 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 18% 18%, rgba(105, 153, 107, 0.16), transparent 18rem),
        radial-gradient(ellipse at 78% 72%, rgba(58, 98, 120, 0.2), transparent 20rem),
        linear-gradient(130deg, #253833, #172228 48%, #111820);
}

.ubx-mission-real-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    filter: saturate(0.86) contrast(1.05) brightness(0.68);
}

.ubx-mission-map-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 42% 38%, rgba(var(--ubx-primary-rgb), 0.18), transparent 15rem),
        radial-gradient(circle at 74% 70%, rgba(var(--ubx-kind-chat-rgb), 0.13), transparent 18rem),
        linear-gradient(180deg, rgba(5, 8, 10, 0.34), rgba(5, 8, 10, 0.68));
}

.ubx-mission-map-attribution {
    position: absolute;
    z-index: 4;
    right: 0.55rem;
    bottom: 0.42rem;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.62rem;
}

.ubx-mission-map::before {
    position: absolute;
    inset: -8%;
    z-index: 2;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(28deg, transparent 0 39%, rgba(255, 255, 255, 0.11) 39% 40%, transparent 40% 100%),
        linear-gradient(118deg, transparent 0 52%, rgba(255, 255, 255, 0.08) 52% 53%, transparent 53% 100%),
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: auto, auto, 4.2rem 4.2rem, 4.2rem 4.2rem;
}

.mission-district,
.mission-road,
.mission-water,
.mission-pin {
    position: absolute;
    z-index: 3;
}

.mission-district {
    padding: 0.35rem 0.55rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    font-weight: 850;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
}

.district-a { top: 20%; left: 23%; }
.district-b { right: 17%; top: 34%; }
.district-c { left: 48%; bottom: 22%; }

.mission-road {
    height: 0.2rem;
    border-radius: 999px;
    background: rgba(238, 230, 208, 0.22);
    box-shadow: 0 0.65rem 0 rgba(238, 230, 208, 0.055);
}

.mission-road.road-one {
    top: 49%;
    left: 7%;
    width: 88%;
    transform: rotate(-16deg);
}

.mission-road.road-two {
    top: 37%;
    left: 32%;
    width: 48%;
    transform: rotate(42deg);
}

.mission-water {
    right: -8%;
    bottom: 12%;
    width: 52%;
    height: 16%;
    border-radius: 999px;
    background: rgba(70, 142, 169, 0.24);
}

.mission-pin {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.45rem 0 rgba(0, 0, 0, 0.24),
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.16),
        0 0 2.5rem rgba(var(--ubx-primary-rgb), 0.34);
}

.mission-pin.pin-one { top: 34%; left: 42%; }
.mission-pin.pin-two { top: 55%; left: 28%; }
.mission-pin.pin-three {
    right: 22%;
    bottom: 28%;
    background: var(--ubx-kind-category);
}

.ubx-mission-real-marker {
    display: grid;
    width: 2rem !important;
    height: 2rem !important;
    place-items: center;
    color: #07140d;
    font-size: 0.7rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.45rem 1.15rem rgba(0, 0, 0, 0.28),
        0 0 0 0.38rem rgba(var(--ubx-primary-rgb), 0.18);
    transition:
        opacity 260ms ease,
        filter 260ms ease,
        transform 260ms ease;
}

.ubx-mission-real-marker span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.ubx-mission-real-marker-place {
    width: 1.4rem !important;
    height: 1.4rem !important;
    background: var(--ubx-kind-place);
}

.ubx-mission-real-marker-entry,
.ubx-mission-real-marker-camera,
.ubx-mission-real-marker-team {
    background: var(--ubx-kind-chat);
}

.ubx-mission-real-marker-logbook {
    background: var(--ubx-premium);
}

.ubx-mission-real-marker.is-muted {
    opacity: 0.34;
    filter: saturate(0.65);
}

.ubx-mission-real-marker.is-active {
    opacity: 1;
    filter: none;
    transform: scale(1.15);
}

.ubx-mission-search-panel,
.ubx-mission-place-drawer,
.ubx-mission-list-board,
.ubx-mission-chat-card,
.ubx-mission-phone,
.ubx-mission-logbook {
    position: absolute;
    z-index: 14;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    background: rgba(8, 11, 15, 0.72);
    box-shadow: 0 1.6rem 3.6rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px);
    transform-style: preserve-3d;
    transition:
        opacity 620ms ease,
        filter 620ms ease,
        transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-mission-search-panel {
    top: 5.1rem;
    left: 1rem;
    display: grid;
    gap: 0.18rem;
    width: 16rem;
    padding: 0.92rem;
    transform: translate3d(0, 0, 170px);
}

.ubx-mission-filter-row {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.ubx-mission-filter-row b {
    padding: 0.28rem 0.45rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-mission-search-panel small,
.ubx-mission-place-drawer small,
.ubx-mission-list-board small,
.ubx-mission-chat-card small,
.ubx-mission-logbook small {
    color: var(--ubx-primary);
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ubx-mission-search-panel span,
.ubx-mission-place-drawer span,
.ubx-mission-list-board span,
.ubx-mission-logbook em {
    color: var(--ubx-muted);
}

.ubx-mission-place-drawer {
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: 0.45rem;
    width: min(22rem, 54%);
    padding: 0.92rem;
    transform: translate3d(0, 0, 205px);
}

.mission-photo-strip {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.8fr;
    gap: 0.35rem;
    height: 5.2rem;
}

.mission-photo-strip i {
    border-radius: 0.78rem;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.18), transparent 2.4rem),
        linear-gradient(145deg, #5c6a5d, #1d2625);
}

.ubx-mission-place-drawer div:last-child {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ubx-mission-place-drawer button {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.45rem 0.62rem;
    color: var(--ubx-text);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.3);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-mission-list-board {
    top: 6.2rem;
    left: 2rem;
    display: grid;
    gap: 0.42rem;
    width: 18rem;
    padding: 0.92rem;
    opacity: 0.42;
    filter: saturate(0.7) blur(0.3px);
    transform: translate3d(-2rem, 1rem, 30px) rotateY(10deg) scale(0.82);
}

.ubx-mission-list-board span {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.42rem 0.5rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
}

.ubx-mission-list-board b {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-mission-chat-card {
    right: 2rem;
    bottom: 7.4rem;
    width: 18rem;
    padding: 0.88rem;
    opacity: 0.38;
    filter: saturate(0.7) blur(0.3px);
    transform: translate3d(2rem, 0, 24px) rotateY(-10deg) scale(0.78);
}

.ubx-mission-chat-card p {
    width: fit-content;
    max-width: 86%;
    margin: 0.42rem 0 0;
    padding: 0.48rem 0.62rem;
    border-radius: 0.85rem 0.85rem 0.85rem 0.2rem;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-mission-chat-card p.right {
    margin-left: auto;
    color: #07140d;
    border-radius: 0.85rem 0.85rem 0.2rem 0.85rem;
    background: var(--ubx-primary);
}

.ubx-mission-phone {
    right: 1.2rem;
    top: 5.4rem;
    display: grid;
    gap: 0.65rem;
    width: 10.8rem;
    min-height: 17.4rem;
    padding: 1rem 0.75rem 0.75rem;
    border-radius: 1.8rem;
    opacity: 0.38;
    transform: translate3d(3rem, -1rem, 20px) rotateY(-16deg) rotateZ(3deg) scale(0.82);
}

.ubx-mission-phone > span {
    position: absolute;
    top: 0.48rem;
    left: 50%;
    width: 3.4rem;
    height: 0.32rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transform: translateX(-50%);
}

.ubx-mission-phone strong {
    margin-top: 0.32rem;
    text-align: center;
    font-size: 0.78rem;
}

.ubx-mission-phone div {
    position: relative;
    min-height: 12.5rem;
    overflow: hidden;
    border-radius: 1.15rem;
    background:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(135deg, #253630, #111a1f);
    background-size: 2.4rem 2.4rem, 2.4rem 2.4rem, auto;
}

.ubx-mission-phone i {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-style: normal;
}

.ubx-mission-phone .unit {
    width: 1.8rem;
    height: 1.8rem;
    color: #07140d;
    font-weight: 950;
    background: var(--ubx-primary);
}

.ubx-mission-phone .unit.a { top: 28%; left: 24%; }
.ubx-mission-phone .unit.b { right: 20%; bottom: 28%; }

.ubx-mission-phone .camera,
.ubx-mission-phone .entrance {
    width: 1.55rem;
    height: 1.55rem;
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.14);
}

.ubx-mission-phone .camera { top: 52%; left: 48%; }
.ubx-mission-phone .entrance { right: 18%; top: 18%; }

.ubx-mission-logbook {
    right: 2rem;
    bottom: 6.4rem;
    display: flex;
    gap: 0.72rem;
    align-items: center;
    width: 23rem;
    padding: 0.92rem;
    opacity: 0.34;
    transform: translate3d(0, 2rem, 20px) scale(0.78);
}

.mission-avatar {
    display: inline-grid;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-mission-logbook em {
    display: block;
    font-style: normal;
}

.ubx-mission-cursor {
    position: absolute;
    z-index: 32;
    top: 45%;
    left: 45%;
    display: grid;
    gap: 0.22rem;
    place-items: center;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translate3d(0, 0, 390px);
    transition:
        top 820ms cubic-bezier(0.2, 0.8, 0.2, 1),
        left 820ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease;
}

.ubx-mission-cursor span {
    width: 1rem;
    height: 1rem;
    border: 2px solid #fff;
    border-right: 0;
    border-bottom: 0;
    filter: drop-shadow(0 0.45rem 0.8rem rgba(0, 0, 0, 0.36));
    transform: rotate(-45deg);
}

.ubx-mission-cursor small {
    padding: 0.18rem 0.34rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.44);
}

.ubx-mission-stage[data-mission-scene="team"] .ubx-mission-cursor {
    top: 58%;
    left: 77%;
}

.ubx-mission-stage[data-mission-scene="memory"] .ubx-mission-cursor {
    top: 75%;
    left: 66%;
}

.ubx-mission-action-bar {
    position: absolute;
    z-index: 34;
    top: 5.4rem;
    left: 50%;
    display: inline-flex;
    gap: 0.48rem;
    max-width: calc(100% - 2rem);
    padding: 0.48rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(6, 9, 12, 0.7);
    box-shadow: 0 1.3rem 3rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px);
    transform: translate3d(-50%, 0, 380px);
}

.ubx-mission-action-bar button {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    padding: 0.52rem 0.72rem;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
    border: 0;
    border-radius: 999px;
    background: transparent;
    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.ubx-mission-action-bar button:hover,
.ubx-mission-action-bar button.is-active {
    color: #07140d;
    background: var(--ubx-primary);
    transform: translateY(-0.08rem);
}

.ubx-mission-action-bar svg {
    width: 0.95rem;
    height: 0.95rem;
}

.ubx-mission-live-readout {
    position: absolute;
    z-index: 30;
    right: 1.2rem;
    top: 50%;
    display: grid;
    gap: 0.5rem;
    transform: translate3d(0, -50%, 370px);
}

.ubx-mission-live-readout span {
    display: grid;
    min-width: 5.4rem;
    padding: 0.58rem 0.68rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background: rgba(6, 9, 12, 0.62);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.ubx-mission-live-readout b {
    color: #fff;
    font-size: 1.08rem;
    line-height: 1;
}

.ubx-mission-live-readout small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ubx-mission-stage[data-mission-scene="research"] .ubx-mission-search-panel,
.ubx-mission-stage[data-mission-scene="research"] .ubx-mission-place-drawer {
    opacity: 1;
    filter: none;
}

.ubx-mission-stage[data-mission-scene="research"] .pin-one {
    animation: ubx-mission-pulse 1.7s ease-in-out infinite;
}

.ubx-mission-stage[data-mission-scene="team"] .ubx-mission-search-panel,
.ubx-mission-stage[data-mission-scene="team"] .ubx-mission-place-drawer {
    opacity: 0.38;
    filter: saturate(0.72) blur(0.35px);
    transform: translate3d(-4rem, -1rem, 32px) rotateY(10deg) scale(0.78);
}

.ubx-mission-stage[data-mission-scene="team"] .ubx-mission-list-board,
.ubx-mission-stage[data-mission-scene="team"] .ubx-mission-chat-card,
.ubx-mission-stage[data-mission-scene="team"] .ubx-mission-phone {
    opacity: 1;
    filter: none;
}

.ubx-mission-stage[data-mission-scene="team"] .ubx-mission-list-board {
    transform: translate3d(0, 0, 205px) rotateY(4deg) scale(1.02);
}

.ubx-mission-stage[data-mission-scene="team"] .ubx-mission-chat-card {
    transform: translate3d(0, 0, 220px) rotateY(-2deg) scale(1.02);
}

.ubx-mission-stage[data-mission-scene="team"] .ubx-mission-phone {
    transform: translate3d(0, 0, 232px) rotateY(-8deg) rotateZ(2deg) scale(0.95);
}

.ubx-mission-stage[data-mission-scene="team"] .unit,
.ubx-mission-stage[data-mission-scene="team"] .mission-pin {
    animation: ubx-mission-pulse 1.8s ease-in-out infinite;
}

.ubx-mission-stage[data-mission-scene="memory"] .ubx-mission-browser {
    transform: translate3d(-4rem, -2rem, 35px) rotateX(12deg) rotateY(8deg) scale(0.76);
    opacity: 0.48;
    filter: saturate(0.72) blur(0.35px);
}

.ubx-mission-stage[data-mission-scene="memory"] .ubx-mission-logbook {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 238px) scale(1.05);
}

.ubx-mission-stage[data-mission-scene="memory"] .ubx-mission-list-board {
    opacity: 0.72;
    filter: none;
    transform: translate3d(-2.5rem, -1rem, 90px) rotateY(8deg) scale(0.82);
}

@keyframes ubx-mission-glow {
    from {
        transform: translate3d(-1.5rem, -0.6rem, 0) scale(1);
    }

    to {
        transform: translate3d(1.2rem, 0.8rem, 0) scale(1.05);
    }
}

@keyframes ubx-mission-pulse {
    0%, 100% {
        filter: brightness(1);
        transform: translateY(0) scale(1);
    }

    50% {
        filter: brightness(1.24);
        transform: translateY(-0.12rem) scale(1.06);
    }
}

.ubx-demo-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.ubx-map-replay-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-top: 1.55rem;
    padding: 1rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.22);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 12% 20%, rgba(var(--ubx-primary-rgb), 0.16), transparent 12rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
        rgba(var(--ubx-surface-rgb), 0.72);
    box-shadow:
        0 1.45rem 3.4rem rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
}

.ubx-map-replay-console small,
.ubx-map-replay-console strong,
.ubx-map-replay-console span {
    display: block;
}

.ubx-map-replay-console small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-map-replay-console strong {
    margin: 0.16rem 0 0.18rem;
    font-size: 1.05rem;
    font-weight: 950;
}

.ubx-map-replay-console span {
    color: var(--ubx-muted);
    line-height: 1.42;
}

.ubx-map-replay-console button {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    min-width: 9.6rem;
    padding: 0.72rem 0.9rem;
    color: #07140d;
    font-weight: 900;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.9rem 2rem rgba(var(--ubx-primary-rgb), 0.18),
        0 0 0 0.35rem rgba(var(--ubx-primary-rgb), 0.08);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}

.ubx-map-replay-console button:hover {
    filter: brightness(1.04);
    transform: translateY(-0.08rem);
    box-shadow:
        0 1.1rem 2.35rem rgba(var(--ubx-primary-rgb), 0.24),
        0 0 0 0.42rem rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-map-replay-console button:not(.is-playing) {
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ubx-map-replay-console button:not(.is-playing) svg {
    color: var(--ubx-primary);
}

.ubx-map-replay-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.ubx-map-replay-steps span {
    position: relative;
    display: grid;
    gap: 0.06rem;
    min-width: 0;
    padding: 0.68rem 0.72rem;
    overflow: hidden;
    color: var(--ubx-muted);
    border: 1px solid var(--ubx-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.045);
    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
}

.ubx-map-replay-steps span::before {
    position: absolute;
    inset: auto 0 0;
    height: 0.18rem;
    content: "";
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-list-rgb), 0.85));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-map-replay-steps b {
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.ubx-map-replay-steps .is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    background:
        radial-gradient(circle at 12% 50%, rgba(var(--ubx-primary-rgb), 0.16), transparent 7rem),
        rgba(255, 255, 255, 0.07);
    box-shadow: 0 0.9rem 2rem rgba(var(--ubx-primary-rgb), 0.08);
    transform: translateY(-0.08rem);
}

.ubx-map-replay-steps .is-active::before {
    transform: scaleX(1);
}

.ubx-handoff-showcase {
    position: relative;
    overflow: clip;
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.ubx-handoff-showcase::before {
    position: absolute;
    inset: 8% -20% auto;
    height: 34rem;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 42%, rgba(var(--ubx-primary-rgb), 0.17), transparent 23rem),
        radial-gradient(circle at 78% 52%, rgba(var(--ubx-kind-chat-rgb), 0.13), transparent 27rem);
}

.ubx-handoff-controls {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.45rem;
}

.ubx-handoff-controls button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 0.7rem;
    align-items: center;
    padding: 0.82rem 0.9rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid var(--ubx-border);
    border-radius: 1.1rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(var(--ubx-surface-rgb), 0.62);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(18px);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ubx-handoff-controls button:hover,
.ubx-handoff-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.4);
    background:
        radial-gradient(circle at 10% 50%, rgba(var(--ubx-primary-rgb), 0.16), transparent 8rem),
        rgba(var(--ubx-surface-rgb), 0.76);
    box-shadow:
        0 1.15rem 2.7rem rgba(0, 0, 0, 0.18),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.08);
    transform: translateX(0.12rem);
}

.ubx-handoff-controls b {
    grid-row: span 2;
    display: inline-grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    color: #07140d;
    border-radius: 0.85rem;
    background: var(--ubx-primary);
}

.ubx-handoff-controls span {
    font-weight: 900;
}

.ubx-handoff-narration {
    display: grid;
    gap: 0.25rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    border-radius: 1.2rem;
    background: rgba(var(--ubx-surface-rgb), 0.62);
    backdrop-filter: blur(18px);
}

.ubx-handoff-narration small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-handoff-narration strong {
    font-size: 1.03rem;
    font-weight: 950;
}

.ubx-handoff-narration span {
    color: var(--ubx-muted);
    line-height: 1.42;
}

.ubx-handoff-stage {
    position: relative;
    min-height: clamp(39rem, 58vw, 49rem);
    overflow: hidden;
    border: 1px solid var(--ubx-border);
    border-radius: clamp(1.7rem, 3vw, 2.55rem);
    background:
        radial-gradient(circle at var(--shine-x, 52%) var(--shine-y, 32%), rgba(255, 255, 255, 0.11), transparent 24rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        linear-gradient(135deg, rgba(12, 18, 18, 0.96), rgba(6, 9, 13, 0.99));
    box-shadow:
        0 3rem 7rem rgba(0, 0, 0, 0.34),
        0 0 4rem rgba(var(--ubx-primary-rgb), 0.08);
    transform:
        perspective(var(--showcase-depth))
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    isolation: isolate;
}

.ubx-handoff-glow {
    position: absolute;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 24%, rgba(var(--ubx-primary-rgb), 0.2), transparent 23rem),
        radial-gradient(circle at 80% 68%, rgba(var(--ubx-kind-chat-rgb), 0.14), transparent 27rem);
    animation: ubx-handoff-glow 12s ease-in-out infinite alternate;
}

.ubx-handoff-web,
.ubx-handoff-phone,
.ubx-handoff-list-card,
.ubx-handoff-chat-card,
.ubx-handoff-status,
.ubx-handoff-transfer {
    position: absolute;
    z-index: 2;
    transform-style: preserve-3d;
    transition:
        opacity 560ms ease,
        filter 560ms ease,
        transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 360ms ease,
        border-color 360ms ease;
}

.ubx-handoff-web {
    top: 7%;
    left: 5%;
    width: min(36rem, 64%);
    height: 66%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.45rem;
    background: rgba(9, 13, 16, 0.86);
    box-shadow: 0 2.2rem 4.8rem rgba(0, 0, 0, 0.32);
    transform: translate3d(0, 0, 120px) rotateX(8deg) rotateY(5deg) rotateZ(-1deg);
}

.ubx-handoff-browserbar {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    gap: 0.42rem;
    align-items: center;
    height: 3rem;
    padding: 0 0.9rem;
    color: var(--ubx-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(7, 10, 14, 0.75);
    backdrop-filter: blur(18px);
}

.ubx-handoff-browserbar span {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.ubx-handoff-browserbar strong {
    margin-left: 0.36rem;
    overflow: hidden;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-handoff-browserbar em {
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-handoff-map {
    position: absolute;
    inset: 3rem 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 28%, rgba(98, 135, 95, 0.22), transparent 13rem),
        radial-gradient(circle at 72% 72%, rgba(72, 126, 148, 0.18), transparent 15rem),
        linear-gradient(135deg, #253833, #131d22 54%, #0f1519);
}

.ubx-handoff-map::before {
    position: absolute;
    inset: -8%;
    content: "";
    background:
        linear-gradient(32deg, transparent 0 39%, rgba(255, 255, 255, 0.12) 39% 40%, transparent 40% 100%),
        linear-gradient(112deg, transparent 0 51%, rgba(255, 255, 255, 0.08) 51% 52%, transparent 52% 100%),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: auto, auto, 4rem 4rem, 4rem 4rem;
}

.h-road,
.h-water,
.h-zone,
.h-pin,
.h-route {
    position: absolute;
    z-index: 2;
}

.h-road {
    height: 0.18rem;
    border-radius: 999px;
    background: rgba(242, 231, 205, 0.22);
}

.h-road.road-a { top: 45%; left: 5%; width: 88%; transform: rotate(-17deg); }
.h-road.road-b { top: 36%; left: 35%; width: 44%; transform: rotate(39deg); }

.h-water {
    right: -8%;
    bottom: 14%;
    width: 50%;
    height: 15%;
    border-radius: 999px;
    background: rgba(68, 138, 163, 0.26);
}

.h-zone {
    padding: 0.34rem 0.52rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.74rem;
    font-weight: 850;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
}

.h-zone.zone-a { top: 22%; left: 20%; }
.h-zone.zone-b { right: 18%; top: 35%; }

.h-pin {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.42rem 0 rgba(0, 0, 0, 0.24),
        0 0 0 0.48rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0 2rem rgba(var(--ubx-primary-rgb), 0.34);
    animation: ubx-reel-pin-pulse 3.4s ease-in-out infinite;
}

.h-pin.pin-a { top: 37%; left: 42%; }
.h-pin.pin-b { top: 57%; left: 30%; width: 1.25rem; height: 1.25rem; animation-delay: -0.8s; }
.h-pin.pin-c { right: 24%; bottom: 28%; animation-delay: -1.5s; }

.h-route {
    top: 48%;
    left: 30%;
    width: 41%;
    height: 22%;
    border-top: 3px dashed rgba(var(--ubx-primary-rgb), 0.7);
    border-right: 3px dashed rgba(var(--ubx-primary-rgb), 0.55);
    border-radius: 0 2rem 0 0;
    transform: rotate(-8deg);
}

.ubx-handoff-search,
.ubx-handoff-place {
    position: absolute;
    z-index: 12;
    display: grid;
    gap: 0.18rem;
    padding: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1rem;
    background: rgba(7, 10, 14, 0.68);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.ubx-handoff-search {
    top: 4rem;
    left: 0.85rem;
    width: 14.5rem;
}

.ubx-handoff-place {
    right: 0.85rem;
    bottom: 0.85rem;
    width: 15.5rem;
}

.ubx-handoff-search small,
.ubx-handoff-place small,
.ubx-handoff-list-card small,
.ubx-handoff-chat-card small {
    color: var(--ubx-primary);
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ubx-handoff-search span,
.ubx-handoff-place span,
.ubx-handoff-list-card span,
.ubx-handoff-status small {
    color: var(--ubx-muted);
}

.ubx-handoff-transfer {
    top: 43%;
    left: 47%;
    z-index: 8;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    width: 14rem;
    color: var(--ubx-primary);
    transform: translate3d(-50%, -50%, 210px) rotateZ(-5deg);
}

.transfer-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 1.4rem rgba(var(--ubx-primary-rgb), 0.55);
}

.transfer-line {
    position: relative;
    flex: 1;
    height: 0.18rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.2);
}

.transfer-line::before {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--ubx-primary), transparent);
    animation: ubx-handoff-transfer 2.1s ease-in-out infinite;
}

.ubx-handoff-transfer strong {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    color: #07140d;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0.7rem 1.8rem rgba(var(--ubx-primary-rgb), 0.22);
}

.ubx-handoff-list-card,
.ubx-handoff-chat-card,
.ubx-handoff-status {
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.15rem;
    background: rgba(8, 11, 15, 0.72);
    box-shadow: 0 1.6rem 3.4rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px);
}

.ubx-handoff-list-card {
    top: 10%;
    right: 25%;
    display: grid;
    gap: 0.35rem;
    width: 17rem;
    padding: 0.85rem;
    transform: translate3d(0, 0, 180px) rotateY(-8deg) rotateZ(2deg);
}

.ubx-handoff-list-card i {
    display: block;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.ubx-handoff-list-card i:nth-of-type(1) { width: 86%; }
.ubx-handoff-list-card i:nth-of-type(2) { width: 62%; }
.ubx-handoff-list-card i:nth-of-type(3) { width: 44%; }

.ubx-handoff-chat-card {
    right: 24%;
    bottom: 12%;
    width: 17rem;
    padding: 0.85rem;
    transform: translate3d(0, 0, 190px) rotateY(-5deg);
}

.ubx-handoff-chat-card p {
    width: fit-content;
    max-width: 88%;
    margin: 0.4rem 0 0;
    padding: 0.48rem 0.6rem;
    border-radius: 0.85rem 0.85rem 0.85rem 0.2rem;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-handoff-chat-card p.right {
    margin-left: auto;
    color: #07140d;
    border-radius: 0.85rem 0.85rem 0.2rem 0.85rem;
    background: var(--ubx-primary);
}

.ubx-handoff-phone {
    top: 12%;
    right: 5%;
    display: grid;
    gap: 0.58rem;
    width: 13.2rem;
    min-height: 25rem;
    padding: 1rem 0.8rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
        rgba(7, 10, 14, 0.82);
    box-shadow:
        0 2.2rem 4.8rem rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: translate3d(0, 0, 250px) rotateY(-13deg) rotateZ(2deg);
}

.phone-notch {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    width: 3.6rem;
    height: 0.34rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transform: translateX(-50%);
}

.ubx-handoff-phone > strong {
    margin-top: 0.38rem;
    text-align: center;
    font-size: 0.85rem;
}

.phone-live-map {
    position: relative;
    min-height: 16.5rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(135deg, #273933, #111a1f);
    background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, auto;
}

.phone-live-map i,
.phone-live-map b,
.phone-live-map em {
    position: absolute;
    display: grid;
    place-items: center;
    font-style: normal;
}

.phone-live-map .building {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.08);
}

.phone-live-map .building.a { top: 18%; left: 16%; width: 3.2rem; height: 4.4rem; transform: rotate(-8deg); }
.phone-live-map .building.b { right: 12%; bottom: 20%; width: 3.8rem; height: 4.9rem; transform: rotate(7deg); }

.phone-live-map .person {
    width: 1.8rem;
    height: 1.8rem;
    color: #07140d;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.45rem rgba(var(--ubx-primary-rgb), 0.14);
}

.phone-live-map .person.a { top: 38%; left: 35%; }
.phone-live-map .person.b { right: 24%; top: 46%; }

.phone-live-map .camera,
.phone-live-map .entry {
    width: 1.55rem;
    height: 1.55rem;
    color: var(--ubx-text);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.phone-live-map .camera { right: 31%; top: 24%; }
.phone-live-map .entry { left: 18%; bottom: 18%; }

.phone-status-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.phone-status-row span {
    padding: 0.45rem;
    color: var(--ubx-muted);
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
}

.ubx-handoff-status {
    right: 1.1rem;
    bottom: 1.1rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem 0.58rem;
    align-items: center;
    width: min(25rem, calc(100% - 2.2rem));
    padding: 0.9rem 1rem;
    transform: translate3d(0, 0, 280px);
}

.ubx-handoff-status .ubx-live-dot {
    grid-row: span 2;
}

.ubx-handoff-status strong,
.ubx-handoff-status small {
    display: block;
}

.ubx-handoff-stage[data-handoff-scene="web"] .ubx-handoff-phone,
.ubx-handoff-stage[data-handoff-scene="web"] .ubx-handoff-chat-card {
    opacity: 0.48;
    filter: saturate(0.72) blur(0.25px);
    transform: translate3d(1.4rem, 0, 70px) rotateY(-18deg) rotateZ(3deg) scale(0.86);
}

.ubx-handoff-stage[data-handoff-scene="web"] .ubx-handoff-list-card {
    opacity: 0.78;
    transform: translate3d(-1rem, 0.6rem, 150px) rotateY(-10deg) rotateZ(2deg) scale(0.92);
}

.ubx-handoff-stage[data-handoff-scene="sync"] .ubx-handoff-web {
    transform: translate3d(-2.4rem, -0.4rem, 80px) rotateX(9deg) rotateY(10deg) rotateZ(-1deg) scale(0.9);
}

.ubx-handoff-stage[data-handoff-scene="sync"] .ubx-handoff-list-card,
.ubx-handoff-stage[data-handoff-scene="sync"] .ubx-handoff-chat-card,
.ubx-handoff-stage[data-handoff-scene="sync"] .ubx-handoff-transfer {
    opacity: 1;
    filter: none;
}

.ubx-handoff-stage[data-handoff-scene="sync"] .ubx-handoff-list-card {
    transform: translate3d(-1.5rem, 0, 245px) rotateY(-4deg) rotateZ(1deg) scale(1.08);
}

.ubx-handoff-stage[data-handoff-scene="sync"] .ubx-handoff-chat-card {
    transform: translate3d(-1.2rem, 0, 235px) rotateY(-2deg) scale(1.04);
}

.ubx-handoff-stage[data-handoff-scene="sync"] .ubx-handoff-phone {
    transform: translate3d(0, 0, 190px) rotateY(-13deg) rotateZ(2deg) scale(0.92);
}

.ubx-handoff-stage[data-handoff-scene="field"] .ubx-handoff-web {
    opacity: 0.48;
    filter: saturate(0.72) blur(0.28px);
    transform: translate3d(-4.2rem, -1rem, 45px) rotateX(12deg) rotateY(13deg) rotateZ(-2deg) scale(0.78);
}

.ubx-handoff-stage[data-handoff-scene="field"] .ubx-handoff-list-card {
    opacity: 0.66;
    transform: translate3d(-3rem, -0.6rem, 100px) rotateY(5deg) rotateZ(-1deg) scale(0.82);
}

.ubx-handoff-stage[data-handoff-scene="field"] .ubx-handoff-chat-card {
    transform: translate3d(-2rem, -0.8rem, 170px) rotateY(0deg) scale(0.96);
}

.ubx-handoff-stage[data-handoff-scene="field"] .ubx-handoff-phone {
    opacity: 1;
    filter: none;
    transform: translate3d(-2.5rem, -0.3rem, 295px) rotateY(-4deg) rotateZ(0deg) scale(1.08);
    box-shadow:
        0 2.7rem 5.8rem rgba(0, 0, 0, 0.38),
        0 0 3rem rgba(var(--ubx-primary-rgb), 0.14);
}

@keyframes ubx-handoff-glow {
    from { transform: translate3d(-1.4rem, -0.7rem, 0) scale(1); }
    to { transform: translate3d(1.2rem, 0.8rem, 0) scale(1.06); }
}

@keyframes ubx-handoff-transfer {
    from { transform: translateX(-100%); opacity: 0; }
    35%, 70% { opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.ubx-demo-chip,
.ubx-tactical-actions button {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.72rem 0.9rem;
    color: var(--ubx-muted);
    border: 1px solid var(--ubx-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ubx-demo-chip:hover,
.ubx-demo-chip.is-active,
.ubx-tactical-actions button:hover,
.ubx-tactical-actions button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.45);
    background: rgba(var(--ubx-primary-rgb), 0.13);
    box-shadow: 0 0.9rem 2rem rgba(var(--ubx-primary-rgb), 0.12);
    transform: translateY(-0.08rem);
}

.ubx-demo-chip svg {
    width: 1rem;
    height: 1rem;
}

.ubx-interactive-map-shell {
    position: relative;
    padding: 1rem;
    border: 1px solid var(--ubx-border);
    border-radius: 2rem;
    background:
        radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 255, 255, 0.1), transparent 24rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        var(--ubx-surface);
    box-shadow:
        0 2.5rem 7rem rgba(0, 0, 0, 0.28),
        0 0 4rem rgba(var(--ubx-primary-rgb), 0.08);
    backdrop-filter: blur(24px);
}

.ubx-interactive-map {
    position: relative;
    min-height: clamp(34rem, 55vw, 44rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.55rem;
    background: #0b1113;
    transform-style: preserve-3d;
}

.ubx-demo-browserbar {
    position: absolute;
    z-index: 12;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    height: 3.35rem;
    padding: 0 1rem;
    color: var(--ubx-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(7, 10, 14, 0.76);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px);
}

.ubx-demo-browserbar span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.ubx-demo-browserbar strong {
    min-width: 0;
    margin-left: 0.45rem;
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-demo-browserbar em {
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-interactive-map::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(ellipse at 18% 18%, rgba(91, 131, 98, 0.12), transparent 18rem),
        radial-gradient(ellipse at 75% 74%, rgba(83, 126, 142, 0.1), transparent 14rem),
        linear-gradient(128deg, rgba(35, 51, 47, 0.84), rgba(13, 20, 22, 0.96));
}

.ubx-demo-real-map-frame {
    position: absolute;
    z-index: 1;
    inset: 4.55rem 1rem 1rem 13.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.15rem;
    background: #182422;
    box-shadow:
        0 1.8rem 3.8rem rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transform:
        perspective(900px)
        rotateX(calc(9deg - var(--scroll-lift, 0) * 2deg))
        rotateZ(calc(-1deg + var(--demo-rotate, 0deg)))
        translateY(0.1rem)
        scale(var(--demo-scale, 1));
    transform-origin: 50% 58%;
    transition:
        transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 420ms ease,
        filter 420ms ease;
}

.ubx-demo-real-map-frame::before,
.ubx-demo-real-map-frame::after {
    position: absolute;
    inset: 0;
    z-index: 420;
    pointer-events: none;
    content: "";
}

.ubx-demo-real-map-frame::before {
    background:
        radial-gradient(circle at 50% 45%, transparent 42%, rgba(4, 8, 9, 0.36) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.28));
    mix-blend-mode: soft-light;
}

.ubx-demo-real-map-frame::after {
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 -2rem 4rem rgba(0, 0, 0, 0.25);
}

.ubx-demo-real-map {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 100%;
    background: #1f2d29;
}

.ubx-demo-real-map .leaflet-control-container {
    display: none;
}

.ubx-showcase-osm-tiles {
    filter: saturate(0.78) contrast(1.05) brightness(0.82) sepia(0.12) hue-rotate(18deg);
}

.ubx-demo-map-scanline {
    position: absolute;
    z-index: 430;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.2), transparent 54%);
    opacity: 0.5;
    transform: translateX(-120%);
    animation: ubx-showcase-scan 5.8s ease-in-out infinite;
}

.ubx-demo-map-attribution {
    position: absolute;
    z-index: 440;
    right: 0.55rem;
    bottom: 0.42rem;
    padding: 0.18rem 0.42rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.64rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
}

.ubx-demo-camera-readout {
    position: absolute;
    z-index: 445;
    top: 5.25rem;
    right: 1.65rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    max-width: min(34rem, calc(100% - 15.8rem));
    pointer-events: none;
}

.ubx-demo-camera-readout span {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    padding: 0.42rem 0.62rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.76rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(3, 7, 6, 0.58);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px);
}

.ubx-demo-camera-readout svg {
    color: var(--ubx-primary);
}

.ubx-demo-live-layer {
    position: absolute;
    z-index: 445;
    top: 9.1rem;
    right: 1.65rem;
    width: min(17rem, calc(100% - 15.8rem));
    padding: 0.82rem;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.05rem;
    background: rgba(4, 8, 7, 0.64);
    box-shadow: 0 1.1rem 2.8rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.ubx-demo-live-layer small,
.ubx-demo-live-layer strong,
.ubx-demo-live-layer span {
    display: block;
}

.ubx-demo-live-layer small {
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-demo-live-layer strong {
    margin: 0.1rem 0 0.55rem;
    color: #fff;
    font-size: 0.9rem;
}

.ubx-demo-live-layer div {
    display: grid;
    gap: 0.32rem;
}

.ubx-demo-live-layer span {
    display: flex;
    gap: 0.42rem;
    align-items: center;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.74rem;
}

.ubx-demo-live-layer b {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    color: #07100d;
    font-size: 0.62rem;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-showcase-real-marker {
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #07140d;
    font-weight: 950;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 240ms ease,
        transform 280ms ease,
        filter 240ms ease;
}

.ubx-showcase-real-marker span {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: inherit;
    background: var(--ubx-primary);
    box-shadow:
        0 0.45rem 0 rgba(0, 0, 0, 0.24),
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.16),
        0 0 2.3rem rgba(var(--ubx-primary-rgb), 0.36);
}

.ubx-showcase-real-marker-place span {
    width: 1.2rem;
    height: 1.2rem;
}

.ubx-showcase-real-marker-place-parkour span {
    background: var(--ubx-kind-category);
    box-shadow:
        0 0.45rem 0 rgba(0, 0, 0, 0.24),
        0 0 0 0.55rem rgba(var(--ubx-kind-category-rgb), 0.16),
        0 0 2.3rem rgba(var(--ubx-kind-category-rgb), 0.3);
}

.ubx-showcase-real-marker-place-logbook span {
    background: var(--ubx-kind-list);
    box-shadow:
        0 0.45rem 0 rgba(0, 0, 0, 0.24),
        0 0 0 0.55rem rgba(var(--ubx-kind-list-rgb), 0.16),
        0 0 2.3rem rgba(var(--ubx-kind-list-rgb), 0.3);
}

.ubx-showcase-real-marker:not(.is-highlighted):not(.is-selected) {
    opacity: 0.58;
    filter: saturate(0.7);
}

.ubx-showcase-real-marker.is-highlighted {
    opacity: 1;
    transform: translateY(-0.2rem) scale(1.08);
}

.ubx-showcase-real-marker.is-selected {
    opacity: 1;
    transform: translateY(-0.35rem) scale(1.18);
    filter: saturate(1.15);
}

.ubx-showcase-real-marker.is-selected span {
    outline: 2px solid rgba(255, 255, 255, 0.62);
    outline-offset: 0.22rem;
}

.ubx-demo-map-actions {
    position: absolute;
    z-index: 5;
    right: 1rem;
    bottom: 6.15rem;
    display: flex;
    gap: 0.45rem;
    max-width: min(26rem, calc(100% - 2rem));
    padding: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(10, 12, 18, 0.62);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.ubx-demo-map-actions button {
    padding: 0.42rem 0.6rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-weight: 800;
    border: 0;
    border-radius: 999px;
    background: transparent;
    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.ubx-demo-map-actions button:hover,
.ubx-demo-map-actions button.is-selected {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.16);
    transform: translateY(-0.05rem);
}

.ubx-demo-map-canvas {
    position: absolute;
    inset: 4.5rem 1rem 1rem 13.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.15rem;
    background:
        linear-gradient(128deg, rgba(48, 66, 58, 0.86), rgba(22, 32, 34, 0.94));
    transform:
        perspective(800px)
        rotateX(calc(8deg - var(--scroll-lift, 0) * 2deg))
        rotateZ(calc(-1deg + var(--demo-rotate, 0deg)))
        translateY(0.1rem)
        scale(var(--demo-scale, 1));
    box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, 0.24);
    transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-interactive-map[data-demo-mode="regions"] {
    --demo-scale: 1.02;
    --demo-rotate: -0.5deg;
}

.ubx-interactive-map[data-demo-mode="search"] {
    --demo-scale: 1.06;
    --demo-rotate: 1deg;
}

.ubx-interactive-map[data-demo-mode="filter"] {
    --demo-scale: 1.04;
    --demo-rotate: -1deg;
}

.ubx-interactive-map[data-demo-mode="logbook"] {
    --demo-scale: 1.05;
    --demo-rotate: 0.5deg;
}

.ubx-interactive-map[data-demo-mode="search"] .ubx-demo-real-map-frame,
.ubx-interactive-map[data-demo-mode="filter"] .ubx-demo-real-map-frame,
.ubx-interactive-map[data-demo-mode="logbook"] .ubx-demo-real-map-frame {
    box-shadow:
        0 2.15rem 4.6rem rgba(0, 0, 0, 0.32),
        0 0 3.4rem rgba(var(--ubx-primary-rgb), 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.ubx-demo-lifted-tools {
    position: absolute;
    z-index: 8;
    top: 5.15rem;
    right: 1.7rem;
    display: grid;
    gap: 0.55rem;
    pointer-events: none;
    perspective: 900px;
}

.ubx-demo-lifted-tools span {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    min-width: 8.8rem;
    padding: 0.62rem 0.72rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.95rem;
    background: rgba(7, 10, 14, 0.66);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    opacity: 0.48;
    transform: translate3d(0, 0, 24px) rotateY(-14deg) scale(0.92);
    transition:
        opacity 360ms ease,
        color 360ms ease,
        border-color 360ms ease,
        background 360ms ease,
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 360ms ease;
}

.ubx-demo-lifted-tools svg {
    color: var(--ubx-primary);
}

.ubx-interactive-map[data-demo-mode="search"] .tool-search,
.ubx-interactive-map[data-demo-mode="filter"] .tool-filter,
.ubx-interactive-map[data-demo-mode="logbook"] .tool-log {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    background:
        radial-gradient(circle at 12% 50%, rgba(var(--ubx-primary-rgb), 0.18), transparent 8rem),
        rgba(7, 10, 14, 0.78);
    box-shadow:
        0 1.25rem 2.8rem rgba(0, 0, 0, 0.26),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.1);
    opacity: 1;
    transform: translate3d(-0.85rem, -0.12rem, 170px) rotateY(-3deg) scale(1.04);
}

.ubx-demo-map-water,
.ubx-demo-map-forest,
.ubx-demo-map-road {
    position: absolute;
    pointer-events: none;
}

.ubx-demo-map-water {
    width: 52%;
    height: 18%;
    border-radius: 999px;
    background: rgba(66, 126, 148, 0.24);
    filter: blur(0.2px);
}

.water-a {
    right: -8%;
    bottom: 16%;
    transform: rotate(-16deg);
}

.ubx-demo-map-forest {
    width: 38%;
    height: 32%;
    border-radius: 46% 54% 38% 62%;
    background: rgba(var(--ubx-primary-rgb), 0.12);
}

.forest-a {
    top: 8%;
    left: 10%;
    transform: rotate(18deg);
}

.ubx-demo-map-road {
    height: 0.18rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0.55rem 0 rgba(255, 255, 255, 0.035);
}

.road-main {
    top: 48%;
    left: 6%;
    width: 88%;
    transform: rotate(-17deg);
}

.road-side {
    top: 38%;
    left: 34%;
    width: 45%;
    transform: rotate(37deg);
}

.ubx-demo-map-district,
.ubx-demo-region {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.4rem;
    padding: 0.5rem 0.8rem;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(14px);
}

.ubx-demo-map-district {
    z-index: 1;
    min-width: 0;
    color: rgba(255, 255, 255, 0.56);
    border-color: transparent;
    background: rgba(0, 0, 0, 0.18);
}

.district-a { top: 20%; left: 20%; }
.district-b { top: 47%; right: 18%; }
.district-c { bottom: 20%; left: 34%; }

.ubx-demo-pin {
    position: absolute;
    z-index: 2;
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.3rem 0 rgba(0, 0, 0, 0.28),
        0 0 0 0.45rem rgba(var(--ubx-primary-rgb), 0.12),
        0 0 1.6rem rgba(var(--ubx-primary-rgb), 0.26);
    opacity: 0.58;
    cursor: pointer;
    transform: translateZ(60px) scale(1);
    transition:
        opacity 260ms ease,
        transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
        background 260ms ease,
        box-shadow 260ms ease;
}

.ubx-demo-pin:hover {
    opacity: 1;
    transform: translate3d(0, -0.18rem, 90px) scale(1.18);
}

.ubx-demo-pin::after,
.ubx-demo-cluster::after {
    position: absolute;
    right: 0.08rem;
    bottom: -0.38rem;
    left: 0.08rem;
    height: 0.45rem;
    pointer-events: none;
    content: "";
    border-radius: 0 0 999px 999px;
    background: rgba(0, 0, 0, 0.34);
    filter: blur(0.5px);
    transform: skewX(-10deg);
}

.ubx-demo-pin i {
    position: absolute;
    inset: 0.23rem;
    border-radius: inherit;
    background: rgba(7, 20, 13, 0.68);
}

.ubx-demo-pin.parkour {
    background: var(--ubx-kind-category);
}

.ubx-demo-pin.logbook {
    background: var(--ubx-kind-list);
}

.ubx-demo-pin.is-highlighted {
    opacity: 1;
    transform: translate3d(0, -0.28rem, 120px) scale(1.45);
    box-shadow:
        0 0.5rem 0 rgba(0, 0, 0, 0.2),
        0 0 0 0.7rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0 2.8rem rgba(var(--ubx-primary-rgb), 0.44);
}

.ubx-demo-pin.is-selected,
.ubx-demo-cluster.is-selected {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 0.28rem;
}

.ubx-interactive-map[data-demo-mode="logbook"] .ubx-demo-pin.is-highlighted {
    background: var(--ubx-kind-list);
    box-shadow:
        0 0 0 0.7rem rgba(var(--ubx-kind-list-rgb), 0.14),
        0 0 2.8rem rgba(var(--ubx-kind-list-rgb), 0.32);
}

.demo-pin-a { top: 32%; left: 34%; }
.demo-pin-b { top: 57%; right: 26%; }
.demo-pin-c { top: 39%; right: 41%; }
.demo-pin-d { bottom: 24%; left: 48%; }

.ubx-demo-cluster {
    position: absolute;
    z-index: 2;
    display: inline-grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    color: #07140d;
    font-size: 0.8rem;
    font-weight: 950;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.36rem 0 rgba(0, 0, 0, 0.28),
        0 0 0 0.65rem rgba(var(--ubx-primary-rgb), 0.16),
        0 0 2.4rem rgba(var(--ubx-primary-rgb), 0.32);
    transition: transform 260ms ease, opacity 260ms ease;
    cursor: pointer;
}

.ubx-demo-cluster:hover {
    transform: translateY(-0.18rem) scale(1.1);
}

.cluster-a { top: 24%; right: 28%; }
.cluster-b { bottom: 28%; left: 22%; }

.ubx-demo-zoom-lens {
    position: absolute;
    z-index: 1;
    top: 25%;
    left: 27%;
    width: 15rem;
    aspect-ratio: 1;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.28);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(var(--ubx-primary-rgb), 0.1), transparent 68%);
    box-shadow:
        inset 0 0 2.5rem rgba(var(--ubx-primary-rgb), 0.08),
        0 0 3rem rgba(var(--ubx-primary-rgb), 0.1);
    transform: translate3d(var(--lens-x, 0), var(--lens-y, 0), 90px);
    animation: ubx-demo-lens 8s ease-in-out infinite;
}

.ubx-interactive-map[data-demo-mode="search"] {
    --lens-x: 3rem;
    --lens-y: -1rem;
}

.ubx-interactive-map[data-demo-mode="filter"] {
    --lens-x: 8rem;
    --lens-y: 4rem;
}

.ubx-interactive-map[data-demo-mode="logbook"] {
    --lens-x: 13rem;
    --lens-y: 1rem;
}

.ubx-demo-map-sidebar,
.ubx-demo-layer-card,
.ubx-demo-result-card {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    background: rgba(10, 12, 18, 0.72);
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.ubx-demo-map-sidebar::after,
.ubx-demo-layer-card::after,
.ubx-demo-result-card::after,
.ubx-map-ui-preview-thick::after,
.ubx-chat-room::after,
.ubx-chat-composer-demo button::after {
    position: absolute;
    right: 0.45rem;
    bottom: -0.5rem;
    left: 0.45rem;
    height: 0.55rem;
    pointer-events: none;
    content: "";
    border-radius: 0 0 0.85rem 0.85rem;
    background: rgba(0, 0, 0, 0.24);
    filter: blur(0.7px);
}

.ubx-demo-map-sidebar {
    top: 1rem;
    left: 1rem;
    display: grid;
    gap: 0.55rem;
    width: 11.5rem;
    padding: 0.85rem;
}

.ubx-demo-map-sidebar label {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.ubx-demo-filter-stack {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.25rem;
}

.ubx-demo-filter-stack span {
    padding: 0.42rem 0.55rem;
    color: var(--ubx-muted);
    font-size: 0.8rem;
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-demo-filter-stack span.active,
.ubx-interactive-map[data-demo-mode="filter"] .ubx-demo-filter-stack span:nth-child(2),
.ubx-interactive-map[data-demo-mode="logbook"] .ubx-demo-filter-stack span:nth-child(4) {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-demo-layer-card {
    top: 1rem;
    right: 1rem;
    display: grid;
    gap: 0.12rem;
    width: min(16rem, 44%);
    padding: 0.85rem;
}

.ubx-demo-layer-card small,
.ubx-demo-layer-card span {
    color: var(--ubx-muted);
}

.ubx-demo-result-card {
    right: 1rem;
    bottom: 1rem;
    width: min(24rem, calc(100% - 2rem));
    padding: 1rem;
}

.ubx-demo-result-card strong,
.ubx-demo-result-card small,
.ubx-demo-result-card span {
    display: block;
}

.ubx-demo-result-card small,
.ubx-demo-result-card span {
    color: var(--ubx-muted);
    font-size: 0.92rem;
}

.ubx-demo-bottom-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.85rem 0.25rem 0;
}

.ubx-demo-bottom-bar span {
    padding: 0.42rem 0.7rem;
    color: var(--ubx-muted);
    font-size: 0.84rem;
    border: 1px solid var(--ubx-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-scroll-cinema-intro {
    max-width: 58rem;
}

.ubx-scroll-cinema {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.62fr);
    gap: clamp(1.4rem, 4vw, 3.5rem);
    align-items: start;
}

.ubx-scroll-cinema-stage-wrap {
    position: sticky;
    top: calc(var(--ubx-sticky-top) + 1rem);
    min-width: 0;
}

.ubx-scroll-cinema-stage {
    --cinema-step-progress: 0;
    position: relative;
    min-height: min(72vh, 45rem);
    overflow: hidden;
    border: 1px solid var(--ubx-border);
    border-radius: clamp(1.6rem, 3vw, 2.4rem);
    background:
        radial-gradient(circle at var(--shine-x, 48%) var(--shine-y, 34%), rgba(255, 255, 255, 0.12), transparent 24rem),
        radial-gradient(circle at 20% 12%, rgba(var(--ubx-primary-rgb), 0.15), transparent 19rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        rgba(8, 11, 15, 0.82);
    box-shadow:
        0 3rem 8rem rgba(0, 0, 0, 0.34),
        0 0 4rem rgba(var(--ubx-primary-rgb), 0.08);
    backdrop-filter: blur(24px);
    transform:
        perspective(var(--showcase-depth))
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
}

.ubx-scroll-cinema-stage::before {
    position: absolute;
    inset: 34% -20% -25%;
    content: "";
    pointer-events: none;
    opacity: 0.27;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(ellipse at 50% 45%, black, transparent 74%);
    transform: perspective(840px) rotateX(64deg) translateY(7rem);
    transform-origin: bottom;
}

.ubx-scroll-cinema-topbar {
    position: absolute;
    z-index: 12;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) 5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.68rem 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background: rgba(8, 11, 15, 0.68);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px);
}

.ubx-scroll-cinema-topbar span {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
}

.ubx-scroll-cinema-topbar strong {
    overflow: hidden;
    margin-left: 0.25rem;
    color: var(--ubx-text);
    font-size: 0.86rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-scroll-cinema-topbar i {
    position: relative;
    overflow: hidden;
    height: 0.22rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.ubx-scroll-cinema-topbar i::before {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 0.88));
    transform: scaleX(var(--cinema-step-progress, 0));
    transform-origin: left;
}

.ubx-scroll-cinema-map,
.ubx-scroll-search-panel,
.ubx-scroll-place-panel,
.ubx-scroll-list-panel,
.ubx-scroll-chat-panel,
.ubx-scroll-log-panel,
.ubx-scroll-phone-panel {
    position: absolute;
    z-index: 3;
    transition:
        opacity 520ms ease,
        filter 520ms ease,
        transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-style: preserve-3d;
}

.ubx-scroll-cinema-map {
    inset: 5.3rem 1.25rem 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.35rem;
    background:
        radial-gradient(ellipse at 28% 24%, rgba(91, 131, 98, 0.22), transparent 17rem),
        radial-gradient(ellipse at 74% 68%, rgba(74, 118, 140, 0.16), transparent 16rem),
        linear-gradient(124deg, rgba(45, 60, 54, 0.96), rgba(18, 29, 31, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1.4rem 3rem rgba(0, 0, 0, 0.22);
    transform: translate3d(0, 0, 85px) rotateX(7deg) rotateY(-4deg);
}

.ubx-scroll-real-map,
.ubx-scroll-map-shade {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ubx-scroll-real-map {
    background: #13201b;
}

.ubx-scroll-osm-tiles {
    filter: saturate(0.55) contrast(1.08) brightness(0.48) hue-rotate(16deg);
}

.ubx-scroll-map-shade {
    z-index: 1;
    background:
        radial-gradient(circle at 48% 48%, rgba(var(--ubx-primary-rgb), 0.09), transparent 14rem),
        linear-gradient(135deg, rgba(8, 11, 15, 0.1), rgba(8, 11, 15, 0.58));
    pointer-events: none;
}

.ubx-scroll-map-attribution {
    position: absolute;
    z-index: 8;
    right: 0.7rem;
    bottom: 0.55rem;
    color: rgba(255, 255, 255, 0.36);
    font-size: 0.68rem;
    pointer-events: none;
}

.ubx-scroll-real-marker {
    display: grid;
    place-items: center;
    border-radius: 999px 999px 999px 0;
    color: #07140d;
    background: var(--ubx-primary);
    box-shadow:
        0 0.55rem 1.4rem rgba(0, 0, 0, 0.28),
        0 0 0 0.45rem rgba(var(--ubx-primary-rgb), 0.13);
    transform: rotate(-45deg);
    transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
}

.ubx-scroll-real-marker span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 0.68rem;
    font-weight: 950;
    transform: rotate(45deg);
}

.ubx-scroll-real-marker-place,
.ubx-scroll-real-marker-place-focus {
    background: #fff;
}

.ubx-scroll-real-marker-entry,
.ubx-scroll-real-marker-team {
    background: #9de3a8;
}

.ubx-scroll-real-marker-logbook {
    background: #f1c76f;
}

.ubx-scroll-real-marker.is-muted {
    opacity: 0.24;
    filter: grayscale(0.35);
    transform: rotate(-45deg) scale(0.82);
}

.ubx-scroll-real-marker.is-active {
    z-index: 900 !important;
    opacity: 1;
    transform: rotate(-45deg) scale(1.12);
}

.ubx-scroll-cinema-map::before {
    position: absolute;
    inset: -10%;
    z-index: 2;
    content: "";
    opacity: 0.78;
    background:
        linear-gradient(24deg, transparent 0 42%, rgba(226, 218, 190, 0.14) 42% 43%, transparent 43%),
        linear-gradient(112deg, transparent 0 55%, rgba(226, 218, 190, 0.11) 55% 56%, transparent 56%),
        linear-gradient(78deg, transparent 0 34%, rgba(226, 218, 190, 0.09) 34% 35%, transparent 35%);
}

.sc-road,
.sc-water,
.sc-zone,
.sc-marker {
    position: absolute;
    z-index: 3;
}

.sc-road {
    height: 0.25rem;
    border-radius: 999px;
    background: rgba(226, 218, 190, 0.28);
}

.sc-road-a { top: 42%; left: -5%; width: 114%; transform: rotate(-12deg); }
.sc-road-b { top: 60%; left: 21%; width: 68%; transform: rotate(31deg); }

.sc-water {
    right: -8%;
    bottom: 16%;
    width: 58%;
    height: 18%;
    border-radius: 999px;
    background: rgba(70, 132, 150, 0.2);
    transform: rotate(-16deg);
}

.sc-zone {
    z-index: 2;
    padding: 0.35rem 0.55rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 850;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.26);
}

.sc-zone-a { top: 26%; left: 24%; }
.sc-zone-b { right: 23%; bottom: 24%; }

.sc-marker {
    z-index: 4;
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    color: #07140d;
    font-size: 0.76rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.48rem 0 rgba(0, 0, 0, 0.28),
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.3);
    animation: ubx-reel-pin-pulse 2.8s ease-in-out infinite;
}

.sc-marker-a { top: 38%; left: 45%; }
.sc-marker-b { top: 58%; left: 64%; animation-delay: -1s; }
.sc-marker-c {
    top: 30%;
    left: 68%;
    width: 1.45rem;
    height: 1.45rem;
    background: var(--ubx-kind-category);
    animation-delay: -1.8s;
}

.ubx-scroll-search-panel,
.ubx-scroll-place-panel,
.ubx-scroll-list-panel,
.ubx-scroll-chat-panel,
.ubx-scroll-log-panel {
    display: grid;
    gap: 0.35rem;
    padding: 0.88rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.15rem;
    background: rgba(8, 11, 15, 0.76);
    box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.ubx-scroll-search-panel small,
.ubx-scroll-place-panel small,
.ubx-scroll-list-panel small,
.ubx-scroll-chat-panel small,
.ubx-scroll-log-panel small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-scroll-search-panel span,
.ubx-scroll-place-panel span,
.ubx-scroll-list-panel span,
.ubx-scroll-log-panel em {
    color: var(--ubx-muted);
    font-size: 0.84rem;
    font-style: normal;
}

.ubx-scroll-search-panel {
    top: 6.4rem;
    left: 2.1rem;
    width: min(18rem, 44%);
    opacity: 0.9;
    transform: translate3d(-1rem, 0, 150px) rotateY(7deg);
}

.ubx-scroll-place-panel {
    top: 8.2rem;
    right: 2.1rem;
    width: min(20rem, 42%);
    opacity: 0.45;
    filter: saturate(0.78) blur(0.2px);
    transform: translate3d(4rem, 1.5rem, 52px) rotateY(-18deg) scale(0.82);
}

.sc-photo-strip {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 0.35rem;
    min-height: 4.6rem;
}

.sc-photo-strip i {
    border-radius: 0.7rem;
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.22), rgba(var(--ubx-kind-chat-rgb), 0.12)),
        rgba(255, 255, 255, 0.08);
}

.sc-action-row {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

.sc-action-row b {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.38rem 0.52rem;
    color: var(--ubx-text);
    font-size: 0.76rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-scroll-list-panel {
    bottom: 2.2rem;
    left: 2.2rem;
    width: min(18rem, 40%);
    opacity: 0.42;
    transform: translate3d(-3rem, 3rem, 45px) rotateY(14deg) scale(0.82);
}

.sc-mini-route {
    display: grid;
    gap: 0.32rem;
    margin-top: 0.3rem;
}

.sc-mini-route i {
    height: 0.38rem;
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.28);
}

.sc-mini-route i:nth-child(1) { width: 86%; }
.sc-mini-route i:nth-child(2) { width: 62%; }
.sc-mini-route i:nth-child(3) { width: 42%; }

.ubx-scroll-chat-panel {
    right: 2rem;
    bottom: 2.4rem;
    width: min(18rem, 40%);
    opacity: 0.42;
    transform: translate3d(4rem, 3rem, 52px) rotateY(-16deg) scale(0.82);
}

.ubx-scroll-chat-panel p {
    width: fit-content;
    max-width: 94%;
    margin: 0;
    padding: 0.5rem 0.62rem;
    color: var(--ubx-text);
    font-size: 0.8rem;
    border-radius: 0.82rem;
    background: rgba(255, 255, 255, 0.07);
}

.ubx-scroll-chat-panel .right {
    justify-self: end;
    color: #07140d;
    background: var(--ubx-primary);
}

.ubx-scroll-log-panel {
    bottom: 2.2rem;
    left: 50%;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    width: min(22rem, 52%);
    opacity: 0;
    transform: translate3d(-50%, 5rem, 34px) scale(0.78);
}

.ubx-scroll-log-panel > span {
    display: grid;
    width: 3.1rem;
    aspect-ratio: 1;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-scroll-phone-panel {
    right: 2.2rem;
    bottom: 2.2rem;
    width: min(13rem, 28%);
    min-height: 22rem;
    padding: 1.15rem 0.75rem 0.75rem;
    opacity: 0.38;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.8rem;
    background: rgba(8, 11, 15, 0.84);
    box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
    transform: translate3d(4rem, 3rem, 50px) rotateY(-22deg) rotateZ(4deg) scale(0.72);
}

.sc-notch {
    position: absolute;
    top: 0.52rem;
    left: 50%;
    width: 3.8rem;
    height: 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    transform: translateX(-50%);
}

.ubx-scroll-phone-panel > strong {
    display: block;
    margin-bottom: 0.65rem;
}

.sc-phone-map {
    position: relative;
    min-height: 18.2rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    background:
        repeating-linear-gradient(0deg, transparent 0 2rem, rgba(255, 255, 255, 0.055) 2rem 2.05rem),
        repeating-linear-gradient(90deg, transparent 0 2rem, rgba(255, 255, 255, 0.055) 2rem 2.05rem),
        rgba(var(--ubx-kind-chat-rgb), 0.08);
}

.sc-phone-map .building,
.sc-phone-map .person,
.sc-phone-map em {
    position: absolute;
}

.sc-phone-map .building {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.52rem;
    background: rgba(255, 255, 255, 0.08);
}

.sc-phone-map .building.a { top: 18%; left: 12%; width: 42%; height: 24%; transform: rotate(-6deg); }
.sc-phone-map .building.b { right: 14%; bottom: 18%; width: 36%; height: 28%; transform: rotate(9deg); }

.sc-phone-map .person,
.sc-phone-map em {
    display: inline-grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 999px;
}

.sc-phone-map .person {
    color: #07140d;
    font-size: 0.66rem;
    font-weight: 950;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.42rem rgba(var(--ubx-primary-rgb), 0.13);
}

.sc-phone-map .person.a { top: 40%; left: 30%; }
.sc-phone-map .person.b { top: 61%; right: 26%; }

.sc-phone-map em {
    top: 22%;
    right: 27%;
    color: var(--ubx-text);
    border: 1px solid rgba(var(--ubx-kind-chat-rgb), 0.42);
    background: rgba(var(--ubx-kind-chat-rgb), 0.28);
}

.ubx-scroll-cinema-stage[data-cinema-scene="search"] .ubx-scroll-search-panel,
.ubx-scroll-cinema-stage[data-cinema-scene="place"] .ubx-scroll-place-panel,
.ubx-scroll-cinema-stage[data-cinema-scene="team"] .ubx-scroll-list-panel,
.ubx-scroll-cinema-stage[data-cinema-scene="team"] .ubx-scroll-chat-panel,
.ubx-scroll-cinema-stage[data-cinema-scene="team"] .ubx-scroll-phone-panel,
.ubx-scroll-cinema-stage[data-cinema-scene="logbook"] .ubx-scroll-log-panel {
    z-index: 9;
    opacity: 1;
    filter: none;
}

.ubx-scroll-cinema-stage[data-cinema-scene="search"] .ubx-scroll-search-panel {
    transform: translate3d(0, 0.4rem, 210px) rotateY(0deg) scale(1.08);
}

.ubx-scroll-cinema-stage[data-cinema-scene="search"] .ubx-scroll-cinema-map {
    transform: translate3d(2.5rem, 0, 70px) rotateX(8deg) rotateY(-9deg) scale(0.92);
}

.ubx-scroll-cinema-stage[data-cinema-scene="place"] .ubx-scroll-cinema-map {
    opacity: 0.48;
    filter: saturate(0.72) blur(0.35px);
    transform: translate3d(-4rem, -0.5rem, 28px) rotateX(11deg) rotateY(-12deg) scale(0.78);
}

.ubx-scroll-cinema-stage[data-cinema-scene="place"] .ubx-scroll-place-panel {
    transform: translate3d(0, 0, 210px) rotateY(0deg) scale(1.08);
}

.ubx-scroll-cinema-stage[data-cinema-scene="team"] .ubx-scroll-cinema-map {
    opacity: 0.45;
    filter: saturate(0.72) blur(0.38px);
    transform: translate3d(-5rem, -1rem, 26px) rotateX(13deg) rotateY(10deg) scale(0.74);
}

.ubx-scroll-cinema-stage[data-cinema-scene="team"] .ubx-scroll-list-panel {
    transform: translate3d(-0.8rem, -0.8rem, 180px) rotateY(4deg) scale(1.02);
}

.ubx-scroll-cinema-stage[data-cinema-scene="team"] .ubx-scroll-chat-panel {
    transform: translate3d(0, 0.2rem, 198px) rotateY(-3deg) scale(1.02);
}

.ubx-scroll-cinema-stage[data-cinema-scene="team"] .ubx-scroll-phone-panel {
    transform: translate3d(0.4rem, -1rem, 215px) rotateY(-8deg) rotateZ(2deg) scale(0.94);
}

.ubx-scroll-cinema-stage[data-cinema-scene="logbook"] .ubx-scroll-cinema-map,
.ubx-scroll-cinema-stage[data-cinema-scene="logbook"] .ubx-scroll-search-panel,
.ubx-scroll-cinema-stage[data-cinema-scene="logbook"] .ubx-scroll-place-panel,
.ubx-scroll-cinema-stage[data-cinema-scene="logbook"] .ubx-scroll-list-panel,
.ubx-scroll-cinema-stage[data-cinema-scene="logbook"] .ubx-scroll-chat-panel,
.ubx-scroll-cinema-stage[data-cinema-scene="logbook"] .ubx-scroll-phone-panel {
    opacity: 0.28;
    filter: saturate(0.62) blur(0.5px);
    transform: translate3d(0, -1.5rem, 20px) rotateX(12deg) scale(0.7);
}

.ubx-scroll-cinema-stage[data-cinema-scene="logbook"] .ubx-scroll-log-panel {
    transform: translate3d(-50%, -0.5rem, 220px) scale(1.08);
}

.ubx-scroll-cinema-steps {
    display: grid;
    gap: min(12vh, 6rem);
    padding-block: min(10vh, 5rem);
}

.ubx-scroll-cinema-card {
    position: relative;
    display: grid;
    gap: 0.35rem;
    min-height: 13rem;
    padding: 1.15rem;
    color: var(--ubx-muted);
    text-align: left;
    width: 100%;
    border: 1px solid var(--ubx-border);
    border-radius: 1.45rem;
    appearance: none;
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--ubx-primary-rgb), calc(0.06 + var(--scroll-card-focus, 0) * 0.12)), transparent 12rem),
        rgba(255, 255, 255, calc(0.045 + var(--scroll-card-focus, 0) * 0.025));
    box-shadow:
        0 1.1rem 2.5rem rgba(0, 0, 0, calc(0.12 + var(--scroll-card-focus, 0) * 0.08)),
        0 0 2.6rem rgba(var(--ubx-primary-rgb), calc(var(--scroll-card-focus, 0) * 0.08));
    backdrop-filter: blur(18px);
    transform:
        translateY(calc((1 - var(--scroll-card-focus, 0)) * 0.8rem))
        scale(calc(0.985 + var(--scroll-card-focus, 0) * 0.015));
    transition:
        border-color 220ms ease,
        color 220ms ease,
        transform 220ms ease;
    cursor: pointer;
}

.ubx-scroll-cinema-card:hover,
.ubx-scroll-cinema-card.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
}

.ubx-scroll-cinema-card small {
    color: var(--ubx-primary);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.12em;
}

.ubx-scroll-cinema-card strong {
    color: var(--ubx-text);
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.ubx-scroll-cinema-card span {
    line-height: 1.55;
}

.ubx-showcase-sticky-lab {
    overflow: visible;
}

.ubx-sticky-map-model {
    position: sticky;
    top: 6rem;
    min-height: 36rem;
    border: 1px solid var(--ubx-border);
    border-radius: 2.2rem;
    background:
        radial-gradient(circle at 32% 18%, rgba(var(--ubx-primary-rgb), 0.18), transparent 18rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        var(--ubx-surface);
    box-shadow: 0 2.5rem 7rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(24px);
    transform-style: preserve-3d;
}

.ubx-sticky-map-base {
    position: absolute;
    inset: 24% 12%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.4rem;
    background: rgba(8, 12, 16, 0.9);
    transform: perspective(900px) rotateX(18deg) rotateZ(-2deg) translateY(0.8rem);
    box-shadow: 0 2.2rem 3.5rem rgba(0, 0, 0, 0.26);
}

.ubx-sticky-map-browser {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.45rem;
    padding: 0.75rem;
}

.ubx-sticky-map-search,
.ubx-sticky-map-preview {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.85rem;
    background: rgba(10, 12, 18, 0.72);
    backdrop-filter: blur(12px);
}

.ubx-sticky-map-search {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    color: var(--ubx-muted);
    font-size: 0.82rem;
}

.ubx-sticky-map-filterline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ubx-sticky-map-filterline span {
    padding: 0.34rem 0.48rem;
    color: var(--ubx-muted);
    font-size: 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.ubx-sticky-map-filterline span:first-child {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-sticky-map-toolbar,
.ubx-sticky-map-drawer {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ubx-sticky-map-toolbar span,
.ubx-sticky-map-drawer span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.38rem 0.52rem;
    color: var(--ubx-muted);
    font-size: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
}

.ubx-sticky-map-toolbar svg {
    color: var(--ubx-primary);
}

.ubx-sticky-map-drawer {
    padding: 0.56rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    background: rgba(10, 12, 18, 0.42);
}

.ubx-sticky-map-drawer b {
    color: var(--ubx-primary);
}

.ubx-sticky-map-canvas {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    background:
        linear-gradient(35deg, transparent 0 46%, rgba(77, 121, 140, 0.2) 46% 52%, transparent 52%),
        linear-gradient(115deg, transparent 0 32%, rgba(255, 255, 255, 0.08) 32% 33%, transparent 33%),
        radial-gradient(circle at 20% 20%, rgba(91, 131, 98, 0.16), transparent 9rem),
        rgba(42, 58, 52, 0.82);
}

.ubx-sticky-map-zone {
    position: absolute;
    padding: 0.25rem 0.42rem;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
}

.zone-a { top: 18%; left: 18%; }
.zone-b { right: 15%; bottom: 22%; }

.ubx-sticky-map-preview {
    display: grid;
    gap: 0.08rem;
    padding: 0.58rem 0.68rem;
}

.ubx-sticky-map-preview small,
.ubx-sticky-map-preview span {
    color: var(--ubx-muted);
    font-size: 0.72rem;
}

.ubx-sticky-map-preview strong {
    font-size: 0.86rem;
}

.ubx-sticky-road {
    position: absolute;
    height: 0.22rem;
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.55);
    filter: drop-shadow(0 0 0.8rem rgba(var(--ubx-primary-rgb), 0.24));
}

.road-a { top: 43%; left: 15%; width: 68%; transform: rotate(-12deg); }
.road-b { top: 57%; left: 20%; width: 54%; transform: rotate(22deg); }

.ubx-sticky-place {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.5rem rgba(var(--ubx-primary-rgb), 0.12);
}

.place-a { top: 31%; left: 32%; }
.place-b { top: 61%; right: 26%; }
.place-c { bottom: 24%; left: 48%; }

.ubx-sticky-map-part {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 0.35rem;
    width: 7.2rem;
    height: 6.5rem;
    place-items: center;
    color: var(--ubx-text);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.3rem;
    background: rgba(10, 12, 18, 0.72);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    transform:
        translate3d(0, 0, 70px)
        scale(0.94);
    opacity: 0.76;
    transition:
        transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.ubx-sticky-map-part svg {
    width: 1.55rem;
    height: 1.55rem;
    color: var(--ubx-primary);
}

.ubx-sticky-map-part span {
    font-size: 0.85rem;
    font-weight: 800;
}

.part-search { top: 8%; left: 12%; }
.part-filter { top: 18%; right: 10%; }
.part-lists { bottom: 13%; left: 15%; }
.part-logbook { right: 15%; bottom: 10%; }

.ubx-showcase {
    --search-focus: 0;
    --filter-focus: 0;
    --lists-focus: 0;
    --logbook-focus: 0;
}

.ubx-sticky-map-model .part-search {
    transform: translate3d(0, calc(var(--search-focus) * -2.2rem), calc(70px + var(--search-focus) * 110px)) scale(calc(0.94 + var(--search-focus) * 0.12));
    opacity: calc(0.76 + var(--search-focus) * 0.24);
}

.ubx-sticky-map-model .part-filter {
    transform: translate3d(0, calc(var(--filter-focus) * -2.2rem), calc(70px + var(--filter-focus) * 110px)) scale(calc(0.94 + var(--filter-focus) * 0.12));
    opacity: calc(0.76 + var(--filter-focus) * 0.24);
}

.ubx-sticky-map-model .part-lists {
    transform: translate3d(0, calc(var(--lists-focus) * -2.2rem), calc(70px + var(--lists-focus) * 110px)) scale(calc(0.94 + var(--lists-focus) * 0.12));
    opacity: calc(0.76 + var(--lists-focus) * 0.24);
}

.ubx-sticky-map-model .part-logbook {
    transform: translate3d(0, calc(var(--logbook-focus) * -2.2rem), calc(70px + var(--logbook-focus) * 110px)) scale(calc(0.94 + var(--logbook-focus) * 0.12));
    opacity: calc(0.76 + var(--logbook-focus) * 0.24);
}

.ubx-sticky-map-model .part-search,
.ubx-sticky-map-model .part-filter,
.ubx-sticky-map-model .part-lists,
.ubx-sticky-map-model .part-logbook {
    border-color: rgba(var(--ubx-primary-rgb), calc(0.14 + max(var(--search-focus), var(--filter-focus), var(--lists-focus), var(--logbook-focus)) * 0.18));
}

.ubx-explainer-stack {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.ubx-explainer-card {
    position: relative;
    padding: 1.25rem;
    border: 1px solid var(--ubx-border);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.13);
    transform:
        translateX(calc((1 - var(--block-focus, 0)) * 0.6rem))
        scale(calc(0.985 + var(--block-focus, 0) * 0.015));
    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        background 240ms ease,
        transform 240ms ease;
}

.ubx-explainer-card.is-focused {
    border-color: rgba(var(--ubx-primary-rgb), 0.35);
    background: rgba(var(--ubx-primary-rgb), 0.08);
    box-shadow:
        0 1.3rem 3.5rem rgba(0, 0, 0, 0.18),
        0 0 2.5rem rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-explainer-card > span {
    display: inline-grid;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.8rem;
    place-items: center;
    color: #07140d;
    border-radius: 0.95rem;
    background: var(--ubx-primary);
}

.ubx-explainer-card h3 {
    font-weight: 900;
    letter-spacing: -0.03em;
}

.ubx-explainer-card p {
    margin: 0;
    color: var(--ubx-muted);
}

.ubx-showcase-feature {
    min-height: 100%;
    padding: 1.35rem;
    border-radius: 1.5rem;
}

.ubx-showcase-feature::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--ubx-kind-place-rgb), 0.52), transparent 42%);
    opacity: 0.18;
}

.ubx-showcase-feature.ubx-kind-region::before { background: linear-gradient(90deg, rgba(var(--ubx-kind-region-rgb), 0.55), transparent 42%); }
.ubx-showcase-feature.ubx-kind-category::before { background: linear-gradient(90deg, rgba(var(--ubx-kind-category-rgb), 0.55), transparent 42%); }
.ubx-showcase-feature.ubx-kind-list::before { background: linear-gradient(90deg, rgba(var(--ubx-kind-list-rgb), 0.55), transparent 42%); }
.ubx-showcase-feature.ubx-kind-person::before { background: linear-gradient(90deg, rgba(var(--ubx-kind-person-rgb), 0.55), transparent 42%); }
.ubx-showcase-feature.ubx-kind-chat::before { background: linear-gradient(90deg, rgba(var(--ubx-kind-chat-rgb), 0.55), transparent 42%); }
.ubx-showcase-feature.ubx-kind-premium::before { background: linear-gradient(90deg, rgba(var(--ubx-kind-premium-rgb), 0.55), transparent 42%); }

.ubx-showcase-feature-icon {
    display: inline-grid;
    width: 3.1rem;
    height: 3.1rem;
    margin-bottom: 1.1rem;
    place-items: center;
    color: #07140d;
    background: var(--ubx-primary);
    border-radius: 1.1rem;
    box-shadow: 0 0.9rem 2rem rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-showcase-feature.ubx-kind-region .ubx-showcase-feature-icon { background: var(--ubx-kind-region); box-shadow: 0 0.9rem 2rem rgba(var(--ubx-kind-region-rgb), 0.16); }
.ubx-showcase-feature.ubx-kind-category .ubx-showcase-feature-icon { background: var(--ubx-kind-category); box-shadow: 0 0.9rem 2rem rgba(var(--ubx-kind-category-rgb), 0.16); }
.ubx-showcase-feature.ubx-kind-list .ubx-showcase-feature-icon { background: var(--ubx-kind-list); box-shadow: 0 0.9rem 2rem rgba(var(--ubx-kind-list-rgb), 0.16); }
.ubx-showcase-feature.ubx-kind-person .ubx-showcase-feature-icon { background: var(--ubx-kind-person); box-shadow: 0 0.9rem 2rem rgba(var(--ubx-kind-person-rgb), 0.16); }
.ubx-showcase-feature.ubx-kind-chat .ubx-showcase-feature-icon { background: var(--ubx-kind-chat); box-shadow: 0 0.9rem 2rem rgba(var(--ubx-kind-chat-rgb), 0.16); }
.ubx-showcase-feature.ubx-kind-premium .ubx-showcase-feature-icon { background: var(--ubx-kind-premium); box-shadow: 0 0.9rem 2rem rgba(var(--ubx-kind-premium-rgb), 0.16); }

.ubx-showcase-feature-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.ubx-showcase-feature h3 {
    margin-bottom: 0.7rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.ubx-showcase-feature p {
    margin: 0;
    color: var(--ubx-muted);
}

.ubx-feature-cockpit {
    display: grid;
    grid-template-columns: minmax(13rem, 0.34fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
    margin-bottom: 2rem;
}

.ubx-feature-cockpit-controls {
    display: grid;
    gap: 0.7rem;
}

.ubx-feature-cockpit-controls button {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.9rem 1rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.15rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.04);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ubx-feature-cockpit-controls button:hover,
.ubx-feature-cockpit-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.16), transparent 62%),
        rgba(var(--ubx-primary-rgb), 0.07);
    transform: translateX(0.2rem);
    box-shadow: 0 1rem 2rem rgba(var(--ubx-primary-rgb), 0.09);
}

.ubx-feature-cockpit-controls svg {
    flex: 0 0 auto;
    color: var(--ubx-primary);
}

.ubx-feature-cockpit-controls span {
    font-weight: 850;
}

.ubx-feature-cockpit-stage {
    position: relative;
    min-height: 34rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 20% 18%, rgba(var(--ubx-primary-rgb), 0.18), transparent 18rem),
        radial-gradient(circle at 80% 78%, rgba(var(--ubx-kind-chat-rgb), 0.12), transparent 20rem),
        rgba(255, 255, 255, 0.045);
    box-shadow:
        0 2rem 5rem rgba(0, 0, 0, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform:
        perspective(var(--showcase-depth))
        rotateX(calc(8deg + var(--tilt-x, 0deg)))
        rotateY(calc(-9deg + var(--tilt-y, 0deg)));
    transform-style: preserve-3d;
}

.ubx-feature-stage-map {
    position: absolute;
    inset: 1.1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.55rem;
    background:
        radial-gradient(circle at 25% 24%, rgba(83, 122, 80, 0.28), transparent 15rem),
        radial-gradient(circle at 78% 68%, rgba(75, 105, 126, 0.18), transparent 16rem),
        linear-gradient(135deg, rgba(35, 48, 41, 0.92), rgba(16, 22, 22, 0.96));
    transform: translateZ(0);
}

.ubx-feature-stage-map::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    opacity: 0.45;
}

.feature-road,
.feature-water,
.feature-zone,
.feature-pin,
.feature-route {
    position: absolute;
    z-index: 2;
}

.feature-road {
    height: 2.4rem;
    border-radius: 999px;
    background: rgba(128, 116, 94, 0.36);
    box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, 0.18);
}

.feature-road.road-a {
    top: 53%;
    left: -8%;
    width: 72%;
    transform: rotate(-14deg);
}

.feature-road.road-b {
    top: 28%;
    right: -8%;
    width: 55%;
    height: 2rem;
    transform: rotate(29deg);
}

.feature-water {
    top: 15%;
    left: 54%;
    width: 19%;
    height: 58%;
    border-radius: 999px;
    background: rgba(81, 125, 144, 0.22);
    transform: rotate(18deg);
}

.feature-zone {
    padding: 0.36rem 0.58rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 900;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.26);
}

.feature-zone.zone-a { top: 18%; left: 20%; }
.feature-zone.zone-b { right: 18%; bottom: 20%; }

.feature-route {
    top: 41%;
    left: 25%;
    width: 50%;
    height: 28%;
    border-top: 4px solid rgba(var(--ubx-primary-rgb), 0.78);
    border-right: 4px solid rgba(var(--ubx-primary-rgb), 0.42);
    border-radius: 100% 25% 90% 20%;
    filter: drop-shadow(0 0 1rem rgba(var(--ubx-primary-rgb), 0.32));
    transform: rotate(11deg);
}

.feature-pin {
    display: inline-grid;
    place-items: center;
    color: #07140d;
    font-size: 0.76rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14),
        0 1rem 2rem rgba(0, 0, 0, 0.22);
    animation: ubx-reel-pin-pulse 2.8s ease-in-out infinite;
}

.feature-pin.pin-a { top: 30%; left: 34%; width: 2.8rem; height: 2.8rem; }
.feature-pin.pin-b { top: 45%; left: 57%; width: 1.85rem; height: 1.85rem; animation-delay: -0.9s; }
.feature-pin.pin-c { bottom: 23%; left: 43%; width: 2.35rem; height: 2.35rem; animation-delay: -1.7s; }

.ubx-feature-stage-panel,
.ubx-feature-stage-caption {
    position: absolute;
    z-index: 6;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.15rem;
    background: rgba(8, 12, 13, 0.72);
    box-shadow: 0 1.3rem 2.8rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
    transition:
        transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease,
        filter 260ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.ubx-feature-stage-panel small,
.ubx-feature-stage-caption small {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ubx-feature-stage-panel strong,
.ubx-feature-stage-caption strong {
    display: block;
    margin-top: 0.28rem;
}

.ubx-feature-stage-panel span,
.ubx-feature-stage-caption span {
    display: block;
    margin-top: 0.24rem;
    color: var(--ubx-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.panel-map { top: 2.2rem; left: 2.2rem; width: 16rem; }
.panel-lists { right: 2.2rem; top: 8.2rem; width: 17rem; }
.panel-team { left: 2.4rem; bottom: 8rem; width: 16rem; }
.panel-profile { right: 3rem; bottom: 9.6rem; width: 16.5rem; }
.panel-logbook { right: 2.2rem; bottom: 2.2rem; width: 18rem; }

.ubx-feature-stage-caption {
    left: 50%;
    bottom: 2rem;
    z-index: 8;
    width: min(31rem, calc(100% - 4rem));
    transform: translateX(-50%) translateZ(100px);
}

.ubx-feature-cockpit-stage[data-feature="map"] .panel-map,
.ubx-feature-cockpit-stage[data-feature="lists"] .panel-lists,
.ubx-feature-cockpit-stage[data-feature="team"] .panel-team,
.ubx-feature-cockpit-stage[data-feature="profile"] .panel-profile,
.ubx-feature-cockpit-stage[data-feature="logbook"] .panel-logbook {
    opacity: 1;
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    box-shadow:
        0 1.5rem 3rem rgba(var(--ubx-primary-rgb), 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translate3d(0, -0.45rem, 150px) scale(1.04);
}

.ubx-feature-cockpit-stage:not([data-feature="map"]) .panel-map,
.ubx-feature-cockpit-stage:not([data-feature="lists"]) .panel-lists,
.ubx-feature-cockpit-stage:not([data-feature="team"]) .panel-team,
.ubx-feature-cockpit-stage:not([data-feature="profile"]) .panel-profile,
.ubx-feature-cockpit-stage:not([data-feature="logbook"]) .panel-logbook {
    opacity: 0.42;
    filter: saturate(0.82);
    transform: translateY(0.4rem) scale(0.95);
}

.ubx-feature-cockpit-stage[data-feature="team"] .feature-route,
.ubx-feature-cockpit-stage[data-feature="lists"] .feature-route,
.ubx-feature-cockpit-stage[data-feature="logbook"] .feature-pin.pin-c {
    animation: ubx-soft-pulse 2.8s ease-in-out infinite;
}

.ubx-cinematic-tour {
    position: relative;
    overflow: hidden;
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
    isolation: isolate;
}

.ubx-cinematic-tour::before {
    content: "";
    position: absolute;
    inset: 5% -8% auto;
    z-index: -1;
    height: 78%;
    background:
        radial-gradient(circle at 18% 22%, rgba(var(--ubx-primary-rgb), 0.26), transparent 32%),
        radial-gradient(circle at 82% 36%, rgba(var(--ubx-kind-chat-rgb), 0.22), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 68%);
    filter: blur(4px);
    opacity: 0.95;
}

.ubx-cinematic-header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.62fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    max-width: 1380px;
    margin: 0 auto 2rem;
}

.ubx-cinematic-header h2 {
    max-width: 980px;
    letter-spacing: -0.055em;
}

.ubx-cinematic-shell {
    display: grid;
    grid-template-columns: minmax(280px, 0.36fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.6rem);
    max-width: 1520px;
    margin: 0 auto;
    perspective: 1700px;
}

.ubx-cinematic-side {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.ubx-cinematic-scene-copy {
    position: sticky;
    top: 6.5rem;
    z-index: 5;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.55rem;
    background: rgba(9, 14, 12, 0.68);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(22px);
}

.ubx-cinematic-scene-copy small,
.ubx-cinematic-scene-copy span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
}

.ubx-cinematic-scene-copy small {
    margin-bottom: 0.55rem;
    color: rgb(var(--ubx-primary-rgb));
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ubx-cinematic-scene-copy strong {
    display: block;
    margin-bottom: 0.75rem;
    color: #fff;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.05;
}

.ubx-cinematic-controls {
    display: grid;
    gap: 0.75rem;
}

.ubx-cinematic-controls button {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.86rem;
    color: rgba(255, 255, 255, 0.72);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.045);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.ubx-cinematic-controls button:hover,
.ubx-cinematic-controls button.is-active {
    color: #fff;
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    background: rgba(var(--ubx-primary-rgb), 0.1);
    box-shadow: 0 20px 52px rgba(var(--ubx-primary-rgb), 0.12);
    transform: translateX(0.28rem);
}

.ubx-cinematic-controls b {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    color: rgb(var(--ubx-primary-rgb));
    border-radius: 0.9rem;
    background: rgba(var(--ubx-primary-rgb), 0.13);
}

.ubx-cinematic-controls strong,
.ubx-cinematic-controls small {
    display: block;
}

.ubx-cinematic-controls small {
    color: rgba(255, 255, 255, 0.54);
}

.ubx-cinematic-stage {
    --film-camera-x: 0%;
    --film-camera-y: 0%;
    position: relative;
    min-height: clamp(620px, 74vw, 860px);
    transform-style: preserve-3d;
}

.ubx-cinematic-depth {
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(26px);
    opacity: 0.75;
}

.ubx-cinematic-depth.depth-a {
    inset: 6% auto auto 6%;
    width: 28%;
    height: 30%;
    background: rgba(var(--ubx-primary-rgb), 0.3);
    animation: ubx-cin-orb 11s ease-in-out infinite;
}

.ubx-cinematic-depth.depth-b {
    right: 3%;
    bottom: 8%;
    width: 32%;
    height: 24%;
    background: rgba(var(--ubx-kind-chat-rgb), 0.22);
    animation: ubx-cin-orb 13s ease-in-out -4s infinite;
}

.ubx-cinematic-screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: clamp(1.6rem, 3vw, 2.6rem);
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.12), transparent 20%),
        linear-gradient(145deg, rgba(7, 11, 10, 0.96), rgba(19, 28, 24, 0.92));
    box-shadow: 0 46px 120px rgba(0, 0, 0, 0.43), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: rotateX(calc(var(--tilt-x, 0deg) * 0.52)) rotateY(calc(var(--tilt-y, 0deg) * 0.62)) translateZ(0);
    transform-style: preserve-3d;
    transition: transform 0.25s ease;
}

.ubx-cinematic-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 255, 255, 0.14), transparent 25%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 28%, rgba(0, 0, 0, 0.18));
    mix-blend-mode: screen;
    opacity: 0.65;
}

.ubx-cinematic-topbar {
    position: absolute;
    inset: 1rem 1rem auto;
    z-index: 18;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(4, 8, 7, 0.74);
    backdrop-filter: blur(20px);
    transform: translateZ(120px);
}

.ubx-cinematic-topbar span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.36);
}

.ubx-cinematic-topbar strong {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.82rem;
}

.ubx-cinematic-topbar em {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    margin-left: auto;
    color: rgb(var(--ubx-primary-rgb));
    font-size: 0.76rem;
    font-style: normal;
}

.ubx-cinematic-topbar em i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(var(--ubx-primary-rgb), 0.38);
    animation: ubx-live-pulse 1.8s ease-out infinite;
}

.ubx-cinematic-map {
    position: absolute;
    inset: 4.8rem 1rem 1rem;
    overflow: hidden;
    border-radius: 1.8rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 18% 22%, rgba(128, 168, 138, 0.18), transparent 25%),
        radial-gradient(circle at 78% 28%, rgba(73, 129, 151, 0.2), transparent 24%),
        linear-gradient(135deg, #19251f, #27362d 52%, #1d2b25);
    background-size: 54px 54px, 54px 54px, auto, auto, auto;
    transform: translateZ(22px) scale(1);
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.9s ease;
}

.ubx-cinematic-real-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #18251f;
}

.ubx-cinematic-real-map .leaflet-pane,
.ubx-cinematic-real-map .leaflet-control-container {
    z-index: 1;
}

.ubx-cinematic-osm-tiles {
    filter: saturate(0.72) brightness(0.58) contrast(1.1);
}

.ubx-cinematic-map-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 45% 42%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.34)),
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.08), transparent 48%, rgba(0, 0, 0, 0.18));
}

.ubx-cinematic-map-attribution {
    position: absolute;
    right: 0.7rem;
    bottom: 0.55rem;
    z-index: 8;
    padding: 0.18rem 0.42rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.64rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    pointer-events: none;
}

.ubx-cinematic-real-marker {
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.96);
    box-shadow:
        0 0.9rem 1.9rem rgba(0, 0, 0, 0.26),
        0 0 0 0.5rem rgba(var(--ubx-primary-rgb), 0.12);
    transition:
        opacity 220ms ease,
        filter 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
}

.ubx-cinematic-real-marker span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #06110c;
    font-size: 0.72rem;
    font-weight: 950;
}

.ubx-cinematic-real-marker-place {
    background: #fff;
}

.ubx-cinematic-real-marker-plan {
    background: rgba(var(--ubx-kind-list-rgb), 0.96);
}

.ubx-cinematic-real-marker-team,
.ubx-cinematic-real-marker-team-secondary {
    background: rgba(var(--ubx-kind-chat-rgb), 0.96);
}

.ubx-cinematic-real-marker-team span,
.ubx-cinematic-real-marker-team-secondary span {
    color: #fff;
}

.ubx-cinematic-real-marker-memory {
    background: #f1c76f;
}

.ubx-cinematic-real-marker.is-muted {
    opacity: 0.42;
    filter: saturate(0.65);
    transform: scale(0.86);
}

.ubx-cinematic-real-marker.is-active {
    opacity: 1;
    filter: saturate(1.12);
    transform: scale(1.08);
    box-shadow:
        0 1.1rem 2.2rem rgba(0, 0, 0, 0.32),
        0 0 0 0.75rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0 2rem rgba(var(--ubx-primary-rgb), 0.22);
}

.ubx-cinematic-stage[data-film-scene="inspect"] .ubx-cinematic-map {
    transform: translateZ(22px) scale(1.08) translate(-2%, 1%);
}

.ubx-cinematic-stage[data-film-scene="plan"] .ubx-cinematic-map {
    transform: translateZ(22px) scale(1.05) translate(2%, -1%);
}

.ubx-cinematic-stage[data-film-scene="team"] .ubx-cinematic-map {
    transform: translateZ(22px) scale(1.12) translate(-3%, -2%);
}

.ubx-cinematic-stage[data-film-scene="remember"] .ubx-cinematic-map {
    transform: translateZ(22px) scale(1.02);
    filter: saturate(0.85) brightness(0.82);
}

.cin-road,
.cin-water,
.cin-park,
.cin-district,
.cin-route,
.cin-pin {
    position: absolute;
    z-index: 2;
}

.cin-road {
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.17);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.cin-road.road-a {
    top: 46%;
    left: -8%;
    width: 84%;
    transform: rotate(-10deg);
}

.cin-road.road-b {
    top: 67%;
    right: -10%;
    width: 72%;
    transform: rotate(22deg);
}

.cin-road.road-c {
    top: 25%;
    left: 24%;
    width: 54%;
    transform: rotate(38deg);
}

.cin-water {
    top: 8%;
    right: 7%;
    width: 22%;
    height: 58%;
    border-radius: 48% 52% 42% 58%;
    background: rgba(72, 124, 148, 0.34);
}

.cin-park {
    left: 9%;
    bottom: 10%;
    width: 23%;
    height: 26%;
    border-radius: 38% 62% 52% 48%;
    background: rgba(82, 137, 93, 0.24);
}

.cin-district {
    padding: 0.34rem 0.62rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.85rem;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
}

.cin-district.district-a { top: 18%; left: 15%; }
.cin-district.district-b { top: 35%; right: 18%; }
.cin-district.district-c { right: 22%; bottom: 17%; }

.cin-route {
    top: 36%;
    left: 30%;
    width: 36%;
    height: 32%;
    border: 3px dashed rgba(var(--ubx-primary-rgb), 0.68);
    border-bottom: 0;
    border-left: 0;
    border-radius: 0 4rem 0 0;
    opacity: 0;
    transform: rotate(12deg);
    transition: opacity 0.45s ease;
}

.ubx-cinematic-stage[data-film-scene="plan"] .cin-route,
.ubx-cinematic-stage[data-film-scene="team"] .cin-route,
.ubx-cinematic-stage[data-film-scene="remember"] .cin-route {
    opacity: 1;
    animation: ubx-cin-route 3.2s ease-in-out infinite;
}

.cin-pin {
    display: grid;
    place-items: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.5rem;
    color: #08100d;
    font-weight: 900;
    border: 0;
    border-radius: 999px;
    background: rgb(var(--ubx-primary-rgb));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, filter 0.35s ease;
}

.cin-pin.pin-cluster { top: 32%; left: 42%; }
.cin-pin.pin-place { top: 48%; left: 52%; width: 1.35rem; min-width: 1.35rem; height: 1.35rem; padding: 0; background: #fff; }
.cin-pin.pin-plan { top: 60%; left: 34%; background: rgba(var(--ubx-kind-list-rgb), 1); }
.cin-pin.pin-team { top: 38%; left: 65%; background: rgba(var(--ubx-kind-chat-rgb), 1); color: #fff; }
.cin-pin.pin-memory { top: 68%; left: 58%; background: #fff; color: rgb(var(--ubx-primary-rgb)); }

.ubx-cinematic-stage[data-film-scene="discover"] .pin-cluster,
.ubx-cinematic-stage[data-film-scene="inspect"] .pin-place,
.ubx-cinematic-stage[data-film-scene="plan"] .pin-plan,
.ubx-cinematic-stage[data-film-scene="team"] .pin-team,
.ubx-cinematic-stage[data-film-scene="remember"] .pin-memory {
    z-index: 5;
    transform: translateZ(94px) scale(1.24);
    filter: saturate(1.18);
    box-shadow: 0 24px 62px rgba(0, 0, 0, 0.42), 0 0 0 16px rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-cinematic-stage[data-film-scene="team"] .pin-team {
    animation: ubx-cin-marker-hop 2.4s ease-in-out infinite;
}

.ubx-cinematic-search,
.ubx-cinematic-place,
.ubx-cinematic-list,
.ubx-cinematic-chat,
.ubx-cinematic-phone,
.ubx-cinematic-log,
.ubx-cinematic-cue {
    position: absolute;
    z-index: 12;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(7, 12, 10, 0.78);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(24px);
    transition: opacity 0.55s ease, transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.55s ease;
}

.ubx-cinematic-search {
    top: 6.2rem;
    left: 2rem;
    width: min(320px, 34%);
    padding: 1rem;
    border-radius: 1.2rem;
    transform: translateZ(120px);
}

.ubx-cinematic-search small,
.ubx-cinematic-place small,
.ubx-cinematic-list small,
.ubx-cinematic-chat small,
.ubx-cinematic-log small {
    display: block;
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.58);
}

.ubx-cinematic-search strong,
.ubx-cinematic-place strong,
.ubx-cinematic-list strong,
.ubx-cinematic-log strong {
    display: block;
    color: #fff;
}

.ubx-cinematic-search span,
.ubx-cinematic-place span,
.ubx-cinematic-list span,
.ubx-cinematic-log em {
    color: rgba(255, 255, 255, 0.62);
    font-style: normal;
}

.ubx-cinematic-place {
    right: 2rem;
    bottom: 2rem;
    width: min(380px, 42%);
    padding: 1rem;
    border-radius: 1.35rem;
    transform: translateZ(160px) translateY(1rem);
    opacity: 0;
    pointer-events: none;
}

.ubx-cinematic-photo-strip {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 0.45rem;
    height: 84px;
    margin-bottom: 0.85rem;
}

.ubx-cinematic-photo-strip i {
    border-radius: 0.8rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
        radial-gradient(circle at 30% 20%, rgba(var(--ubx-primary-rgb), 0.32), transparent 48%);
}

.ubx-cinematic-place div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.ubx-cinematic-place b {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.38rem 0.56rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-cinematic-list {
    right: 4rem;
    top: 8rem;
    width: min(300px, 34%);
    padding: 1rem;
    border-radius: 1.25rem;
    transform: translateZ(150px) translateX(1.2rem);
    opacity: 0;
    pointer-events: none;
}

.ubx-cinematic-list div {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.75rem;
}

.ubx-cinematic-list i {
    display: block;
    width: var(--w);
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.58);
}

.ubx-cinematic-chat {
    left: 2rem;
    bottom: 2rem;
    width: min(310px, 36%);
    padding: 0.95rem;
    border-radius: 1.25rem;
    transform: translateZ(155px) translateY(1rem);
    opacity: 0;
    pointer-events: none;
}

.ubx-cinematic-chat p {
    width: fit-content;
    max-width: 86%;
    margin: 0.35rem 0;
    padding: 0.48rem 0.62rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.83rem;
    border-radius: 0.8rem 0.8rem 0.8rem 0.25rem;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-cinematic-chat p.right {
    margin-left: auto;
    color: #07100d;
    border-radius: 0.8rem 0.8rem 0.25rem;
    background: rgb(var(--ubx-primary-rgb));
}

.ubx-cinematic-phone {
    right: 2rem;
    bottom: 1.8rem;
    width: 170px;
    height: 310px;
    padding: 1.2rem 0.8rem 0.8rem;
    border-radius: 2rem;
    background: rgba(8, 12, 11, 0.88);
    transform: translateZ(220px) rotateY(-13deg) translateX(1rem);
    opacity: 0;
    pointer-events: none;
}

.ubx-cinematic-phone .phone-notch {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 3.8rem;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    transform: translateX(-50%);
}

.ubx-cinematic-phone strong {
    display: block;
    margin-bottom: 0.65rem;
    color: #fff;
}

.ubx-cinematic-phone > div {
    position: relative;
    height: 238px;
    overflow: hidden;
    border-radius: 1.35rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(145deg, #1d2a24, #26382f);
    background-size: 26px 26px;
}

.ubx-cinematic-log {
    right: 2rem;
    bottom: 2rem;
    display: flex;
    gap: 0.8rem;
    align-items: center;
    width: min(350px, 42%);
    padding: 1rem;
    border-radius: 1.25rem;
    transform: translateZ(170px) translateY(1rem);
    opacity: 0;
    pointer-events: none;
}

.ubx-cinematic-log > span {
    display: grid;
    place-items: center;
    width: 3.3rem;
    height: 3.3rem;
    flex: 0 0 auto;
    color: #07100d;
    font-weight: 900;
    border-radius: 999px;
    background: rgb(var(--ubx-primary-rgb));
}

.ubx-cinematic-cue {
    right: 1.4rem;
    left: 1.4rem;
    bottom: 1.25rem;
    z-index: 19;
    display: flex;
    gap: 0.65rem;
    align-items: center;
    padding: 0.78rem 0.95rem;
    color: rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    transform: translateZ(260px);
}

.ubx-cinematic-magnifier {
    position: absolute;
    top: 44%;
    left: 48%;
    z-index: 11;
    width: 9.2rem;
    height: 9.2rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.13), rgba(var(--ubx-primary-rgb), 0.08));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
    opacity: 0;
    transform: translateZ(130px) scale(0.72);
    transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

.ubx-cinematic-magnifier span {
    position: absolute;
    right: -1.6rem;
    bottom: -0.7rem;
    width: 3rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    transform: rotate(42deg);
}

.ubx-cinematic-stage[data-film-scene="discover"] .ubx-cinematic-search {
    transform: translateZ(170px) translateY(-0.35rem);
}

.ubx-cinematic-stage[data-film-scene="discover"] .ubx-cinematic-magnifier {
    opacity: 1;
    transform: translateZ(170px) scale(1);
}

.ubx-cinematic-stage[data-film-scene="inspect"] .ubx-cinematic-place,
.ubx-cinematic-stage[data-film-scene="plan"] .ubx-cinematic-list,
.ubx-cinematic-stage[data-film-scene="team"] .ubx-cinematic-chat,
.ubx-cinematic-stage[data-film-scene="team"] .ubx-cinematic-phone,
.ubx-cinematic-stage[data-film-scene="remember"] .ubx-cinematic-log {
    opacity: 1;
    pointer-events: auto;
    transform: translateZ(190px) translate(0, 0);
}

.ubx-cinematic-stage[data-film-scene="team"] .ubx-cinematic-phone {
    transform: translateZ(230px) rotateY(-10deg);
}

.ubx-cinematic-stage[data-film-scene="remember"] .ubx-cinematic-place,
.ubx-cinematic-stage[data-film-scene="remember"] .ubx-cinematic-list {
    opacity: 0.35;
    transform: translateZ(80px) scale(0.92);
}

.ubx-cinematic-storyboard {
    position: absolute;
    right: 1.4rem;
    bottom: -1rem;
    left: 1.4rem;
    z-index: 24;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.55rem;
    transform: translateZ(260px);
}

.ubx-cinematic-storyboard span {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 0.55rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.82rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(7, 12, 10, 0.82);
    backdrop-filter: blur(18px);
    transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.ubx-cinematic-storyboard span.is-active {
    color: #fff;
    border-color: rgba(var(--ubx-primary-rgb), 0.45);
    background: rgba(var(--ubx-primary-rgb), 0.14);
    transform: translateY(-0.18rem);
}

.ubx-cinematic-storyboard b {
    color: rgb(var(--ubx-primary-rgb));
}

.ubx-cinematic-progress {
    position: absolute;
    right: 1.6rem;
    bottom: -2.1rem;
    left: 1.6rem;
    height: 0.24rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.ubx-cinematic-progress i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(var(--ubx-primary-rgb)), rgba(var(--ubx-kind-chat-rgb), 0.92));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s ease;
}

.ubx-cinematic-stage .phone-building,
.ubx-cinematic-stage .phone-person,
.ubx-cinematic-stage .phone-marker {
    position: absolute;
}

.ubx-cinematic-stage .phone-building {
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.15);
}

.ubx-cinematic-stage .phone-building.a { top: 22%; left: 16%; width: 28%; height: 32%; }
.ubx-cinematic-stage .phone-building.b { right: 13%; bottom: 18%; width: 32%; height: 28%; }

.ubx-cinematic-stage .phone-person,
.ubx-cinematic-stage .phone-marker {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-style: normal;
}

.ubx-cinematic-stage .phone-person {
    color: #07100d;
    background: rgb(var(--ubx-primary-rgb));
}

.ubx-cinematic-stage .phone-person.a { top: 42%; left: 38%; }
.ubx-cinematic-stage .phone-person.b { right: 24%; top: 28%; background: #fff; }

.ubx-cinematic-stage .phone-marker {
    color: #fff;
    background: rgba(var(--ubx-kind-chat-rgb), 0.95);
}

.ubx-cinematic-stage .phone-marker.camera { left: 20%; bottom: 22%; }
.ubx-cinematic-stage .phone-marker.entry { right: 17%; bottom: 36%; background: rgba(var(--ubx-kind-list-rgb), 0.95); }

.ubx-studio-showcase {
    position: relative;
    overflow: hidden;
    padding-top: clamp(5rem, 9vw, 9rem);
    padding-bottom: clamp(5rem, 9vw, 9rem);
    background:
        radial-gradient(circle at 18% 20%, rgba(var(--ubx-primary-rgb), 0.13), transparent 34rem),
        radial-gradient(circle at 88% 8%, rgba(var(--ubx-kind-chat-rgb), 0.12), transparent 36rem),
        linear-gradient(180deg, rgba(4, 7, 9, 0.18), rgba(4, 7, 9, 0.84));
}

.ubx-studio-showcase::before {
    position: absolute;
    inset: 8% 2% auto;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--ubx-primary-rgb), 0.38), transparent);
}

.ubx-studio-current {
    display: grid;
    gap: 0.55rem;
    margin: 1.55rem 0;
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 1.2rem;
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.11), transparent 42%),
        rgba(255, 255, 255, 0.055);
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.ubx-studio-scroll-director {
    display: grid;
    gap: 0.42rem;
    max-width: 28rem;
    margin-top: 1.1rem;
}

.ubx-studio-scroll-director span {
    position: relative;
    overflow: hidden;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-studio-scroll-director i {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--studio-scroll-progress, 0) * 100%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ubx-primary), rgba(255, 255, 255, 0.72));
    box-shadow: 0 0 1.4rem rgba(var(--ubx-primary-rgb), 0.35);
    transition: width 240ms ease;
}

.ubx-studio-scroll-director small {
    color: var(--ubx-muted);
    font-size: 0.8rem;
}

.ubx-studio-current small,
.ubx-studio-controls b {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-studio-current strong {
    color: var(--ubx-text);
    font-size: 1.1rem;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.ubx-studio-current span {
    color: var(--ubx-muted);
    line-height: 1.55;
}

.ubx-studio-controls {
    display: grid;
    gap: 0.72rem;
}

.ubx-studio-controls button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    width: 100%;
    padding: 0.86rem 0.95rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.12);
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.ubx-studio-controls button:hover,
.ubx-studio-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    background: rgba(var(--ubx-primary-rgb), 0.1);
    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.18), 0 0 2rem rgba(var(--ubx-primary-rgb), 0.11);
    transform: translateY(-2px);
}

.ubx-studio-controls b {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.8rem;
    background: rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-studio-controls strong,
.ubx-studio-controls small {
    display: block;
}

.ubx-studio-controls strong {
    color: inherit;
    font-weight: 950;
}

.ubx-studio-controls small {
    color: var(--ubx-muted);
    font-size: 0.78rem;
}

.ubx-studio-stage {
    position: relative;
    min-height: clamp(42rem, 66vw, 55rem);
    perspective: 1700px;
    transform-style: preserve-3d;
}

.ubx-studio-light {
    position: absolute;
    width: 28rem;
    height: 28rem;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(30px);
    opacity: 0.28;
}

.ubx-studio-light.light-left {
    top: -5rem;
    left: 4%;
    background: rgba(var(--ubx-primary-rgb), 0.45);
}

.ubx-studio-light.light-right {
    right: 0;
    bottom: 2rem;
    background: rgba(var(--ubx-kind-chat-rgb), 0.32);
}

.ubx-studio-browser {
    position: absolute;
    inset: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 2rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        rgba(8, 12, 15, 0.86);
    box-shadow: 0 3.4rem 7rem rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.13);
    transform: rotateX(6deg) rotateY(-7deg) translate3d(0, 0, 0);
    transform-style: preserve-3d;
    transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-studio-stage[data-studio-scene="inspect"] .ubx-studio-browser {
    transform: rotateX(7deg) rotateY(-3deg) translate3d(0, -0.3rem, 0);
}

.ubx-studio-stage[data-studio-scene="lists"] .ubx-studio-browser {
    transform: rotateX(6deg) rotateY(-8deg) translate3d(0.1rem, -0.25rem, 0);
}

.ubx-studio-stage[data-studio-scene="team"] .ubx-studio-browser {
    transform: rotateX(5deg) rotateY(-10deg) translate3d(0, -0.5rem, 0);
}

.ubx-studio-stage[data-studio-scene="memory"] .ubx-studio-browser {
    transform: rotateX(7deg) rotateY(-4deg) translate3d(0, -0.2rem, 0);
}

.ubx-studio-browserbar {
    position: absolute;
    z-index: 25;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    height: 3.2rem;
    padding: 0 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 10, 12, 0.72);
    backdrop-filter: blur(18px);
}

.ubx-studio-browserbar > span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.ubx-studio-browserbar strong {
    flex: 1;
    min-width: 0;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    text-align: center;
}

.ubx-studio-browserbar em {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
}

.ubx-studio-browserbar em i {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 1rem rgba(var(--ubx-primary-rgb), 0.65);
}

.ubx-studio-map {
    position: absolute;
    z-index: 1;
    inset: 3.2rem 0 0;
    overflow: hidden;
    background: linear-gradient(115deg, rgba(32, 53, 48, 0.9), rgba(28, 43, 43, 0.82)), #182a29;
}

.ubx-studio-map::before {
    position: absolute;
    inset: -10%;
    content: "";
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
}

.studio-district,
.studio-forest,
.studio-water,
.studio-road,
.studio-rail,
.studio-route,
.studio-map-label,
.studio-pin {
    position: absolute;
}

.studio-district {
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 34% 46% 40% 38%;
    background: rgba(255, 255, 255, 0.035);
}

.ubx-studio-map .district-a { top: 16%; left: 13%; width: 32%; height: 25%; transform: rotate(-11deg); }
.ubx-studio-map .district-b { top: 27%; right: 13%; width: 33%; height: 30%; transform: rotate(9deg); }
.ubx-studio-map .district-c { right: 25%; bottom: 12%; width: 35%; height: 27%; transform: rotate(-5deg); }

.studio-forest {
    left: 6%;
    bottom: 9%;
    width: 30%;
    height: 24%;
    border-radius: 45% 38% 48% 36%;
    background: rgba(var(--ubx-primary-rgb), 0.13);
}

.studio-water {
    border-radius: 999px;
    background: rgba(86, 150, 161, 0.24);
}

.ubx-studio-map .water-a { top: 20%; right: -8%; width: 34%; height: 16%; transform: rotate(-18deg); }
.ubx-studio-map .water-b { left: -8%; bottom: 24%; width: 42%; height: 12%; transform: rotate(15deg); }

.studio-road {
    height: 0.52rem;
    border-radius: 999px;
    background: rgba(238, 229, 194, 0.38);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
    transform-origin: left center;
}

.ubx-studio-map .road-a { top: 35%; left: 7%; width: 82%; transform: rotate(10deg); }
.ubx-studio-map .road-b { top: 66%; left: 14%; width: 72%; transform: rotate(-13deg); }
.ubx-studio-map .road-c { top: 22%; left: 36%; width: 42%; transform: rotate(58deg); }

.studio-rail {
    top: 53%;
    left: 5%;
    width: 84%;
    height: 0.22rem;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0 0.8rem, transparent 0.8rem 1.45rem);
    opacity: 0.52;
    transform: rotate(-5deg);
}

.studio-route {
    top: 41%;
    left: 30%;
    width: 42%;
    height: 28%;
    border-top: 3px dashed rgba(241, 199, 111, 0.9);
    border-right: 3px dashed rgba(241, 199, 111, 0.75);
    border-radius: 45% 55% 36% 45%;
    opacity: 0;
    transform: translateZ(70px) scale(0.82);
    transition: opacity 420ms ease, transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.studio-map-label {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-studio-map .label-city { top: 15%; left: 20%; }
.ubx-studio-map .label-harbor { right: 16%; top: 25%; }
.ubx-studio-map .label-works { left: 48%; bottom: 18%; }

.studio-pin {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    color: #06100d;
    font-size: 0.76rem;
    font-weight: 950;
    border: 0;
    border-radius: 999px 999px 999px 0.32rem;
    background: var(--ubx-primary);
    box-shadow: 0 0.9rem 1.9rem rgba(0, 0, 0, 0.26), 0 0 1.6rem rgba(var(--ubx-primary-rgb), 0.23);
    transform: translateZ(110px) rotate(-45deg) scale(1);
    transition: transform 420ms ease, filter 220ms ease, box-shadow 220ms ease;
}

.studio-pin:hover,
.studio-pin.is-active {
    filter: brightness(1.1);
    box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.34), 0 0 2.4rem rgba(var(--ubx-primary-rgb), 0.35);
    transform: translateZ(155px) rotate(-45deg) scale(1.12);
}

.ubx-studio-map .pin-cluster { top: 31%; left: 32%; }
.ubx-studio-map .pin-place { top: 43%; left: 55%; background: #f1c76f; }
.ubx-studio-map .pin-list { right: 26%; bottom: 26%; background: #93c5fd; }
.ubx-studio-map .pin-team { right: 16%; top: 44%; background: #86efac; }
.ubx-studio-map .pin-memory { left: 39%; bottom: 19%; background: #fca5a5; }

.ubx-studio-search,
.ubx-studio-results,
.ubx-studio-place,
.ubx-studio-list,
.ubx-studio-chat,
.ubx-studio-logbook,
.ubx-studio-phone,
.ubx-studio-cue {
    position: absolute;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)), rgba(8, 11, 13, 0.75);
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px);
    transform: translate3d(0, 0.75rem, 90px) scale(0.96);
    opacity: 0.22;
    transition: opacity 460ms ease, transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 220ms ease, box-shadow 220ms ease;
}

.ubx-studio-search {
    top: 4.7rem;
    left: 1.2rem;
    display: grid;
    gap: 0.42rem;
    width: min(18rem, 31%);
    padding: 1rem;
}

.ubx-studio-search strong,
.ubx-studio-results strong,
.ubx-studio-place strong,
.ubx-studio-list strong,
.ubx-studio-logbook strong {
    color: var(--ubx-text);
    font-weight: 950;
}

.ubx-studio-search span,
.ubx-studio-results span,
.ubx-studio-place p,
.ubx-studio-list span,
.ubx-studio-chat span,
.ubx-studio-logbook em {
    color: var(--ubx-muted);
    font-size: 0.82rem;
}

.ubx-studio-search i {
    display: block;
    height: 0.48rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.11);
}

.ubx-studio-search i:nth-child(4) { width: 84%; }
.ubx-studio-search i:nth-child(5) { width: 62%; }
.ubx-studio-search i:nth-child(6) { width: 72%; }

.ubx-studio-results {
    top: 14.2rem;
    left: 1.2rem;
    display: grid;
    gap: 0.48rem;
    width: min(19rem, 32%);
    padding: 1rem;
}

.ubx-studio-results span {
    display: flex;
    gap: 0.48rem;
    align-items: center;
}

.ubx-studio-results b {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-studio-place {
    right: 2rem;
    bottom: 9rem;
    display: grid;
    gap: 0.55rem;
    width: min(22rem, 34%);
    padding: 1rem;
}

.studio-photo-strip {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.85fr;
    gap: 0.42rem;
    height: 5.2rem;
}

.studio-photo-strip i {
    border-radius: 0.85rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent), linear-gradient(140deg, #3c4842, #0f1918);
}

.studio-photo-strip i:nth-child(2) { background: linear-gradient(140deg, #5d4c3f, #151a18); }
.studio-photo-strip i:nth-child(3) { background: linear-gradient(140deg, #30434e, #111818); }

.ubx-studio-place div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.ubx-studio-place div:last-child span {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    padding: 0.42rem 0.55rem;
    color: var(--ubx-text);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.74rem;
}

.ubx-studio-list {
    right: 18%;
    bottom: 5.2rem;
    display: grid;
    gap: 0.45rem;
    width: 18rem;
    padding: 1rem;
}

.ubx-studio-list i {
    display: block;
    height: 0.44rem;
    border-radius: 999px;
    background: rgba(147, 197, 253, 0.22);
}

.ubx-studio-list i:nth-of-type(2) { width: 76%; }
.ubx-studio-list i:nth-of-type(3) { width: 62%; }
.ubx-studio-list i:nth-of-type(4) { width: 84%; }

.ubx-studio-chat {
    right: 2rem;
    top: 7rem;
    display: grid;
    gap: 0.5rem;
    width: 18rem;
    padding: 1rem;
}

.ubx-studio-chat p {
    max-width: 82%;
    margin: 0;
    padding: 0.58rem 0.7rem;
    color: var(--ubx-text);
    border-radius: 0.9rem 0.9rem 0.9rem 0.25rem;
    background: rgba(255, 255, 255, 0.09);
    font-size: 0.82rem;
}

.ubx-studio-chat p.right {
    justify-self: end;
    border-radius: 0.9rem 0.9rem 0.25rem 0.9rem;
    background: rgba(var(--ubx-primary-rgb), 0.18);
}

.ubx-studio-phone {
    right: 21rem;
    top: 8.5rem;
    width: 9.2rem;
    height: 16.8rem;
    padding: 1.05rem 0.65rem 0.65rem;
    border-radius: 1.7rem;
    transform: translate3d(0, 0.8rem, 180px) rotateY(-16deg) scale(0.94);
}

.ubx-studio-phone .phone-notch {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 3rem;
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(-50%);
}

.ubx-studio-phone strong {
    display: block;
    color: var(--ubx-text);
    font-size: 0.78rem;
    text-align: center;
}

.ubx-studio-phone > div {
    position: relative;
    height: 12.6rem;
    margin-top: 0.75rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background: linear-gradient(120deg, rgba(238, 229, 194, 0.18) 0 8%, transparent 8% 100%), linear-gradient(35deg, rgba(134, 239, 172, 0.14), rgba(72, 92, 88, 0.18)), #162422;
}

.ubx-studio-phone .phone-building,
.ubx-studio-phone .phone-person,
.ubx-studio-phone .phone-marker {
    position: absolute;
}

.ubx-studio-phone .phone-building {
    width: 2.9rem;
    height: 2rem;
    border-radius: 0.28rem;
    background: rgba(255, 255, 255, 0.16);
}

.ubx-studio-phone .phone-building.a { top: 24%; left: 16%; transform: rotate(-12deg); }
.ubx-studio-phone .phone-building.b { right: 12%; bottom: 24%; transform: rotate(9deg); }

.ubx-studio-phone .phone-person,
.ubx-studio-phone .phone-marker {
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    color: #07110d;
    border-radius: 999px;
    background: var(--ubx-primary);
    font-size: 0.7rem;
    font-weight: 950;
}

.ubx-studio-phone .phone-person.a { top: 32%; left: 45%; }
.ubx-studio-phone .phone-person.b { top: 54%; right: 18%; background: #93c5fd; }
.ubx-studio-phone .phone-marker { left: 19%; bottom: 16%; background: #f1c76f; }

.ubx-studio-logbook {
    left: 33%;
    bottom: 3.6rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    width: 20rem;
    padding: 0.95rem;
}

.ubx-studio-logbook > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: #07110d;
    border-radius: 999px;
    background: var(--ubx-primary);
    font-weight: 950;
}

.ubx-studio-cursor {
    position: absolute;
    z-index: 23;
    top: var(--studio-cursor-y, 32%);
    left: var(--studio-cursor-x, 46%);
    width: 2.4rem;
    height: 2.4rem;
    pointer-events: none;
    transform: translate3d(-0.2rem, -0.2rem, 230px);
    transition:
        top 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
        left 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-studio-cursor::before {
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    width: 1.1rem;
    height: 1.1rem;
    content: "";
    clip-path: polygon(0 0, 0 100%, 30% 76%, 47% 100%, 64% 91%, 47% 67%, 82% 67%);
    background: #fff;
    filter: drop-shadow(0 0.3rem 0.55rem rgba(0, 0, 0, 0.38));
}

.ubx-studio-cursor span {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.5);
    border-radius: 999px;
    box-shadow: 0 0 0 0.7rem rgba(var(--ubx-primary-rgb), 0.08);
    animation: ubx-studio-cursor-pulse 1.8s ease-in-out infinite;
}

.ubx-studio-stage[data-studio-scene="research"] { --studio-cursor-x: 21%; --studio-cursor-y: 22%; }
.ubx-studio-stage[data-studio-scene="inspect"] { --studio-cursor-x: 58%; --studio-cursor-y: 46%; }
.ubx-studio-stage[data-studio-scene="lists"] { --studio-cursor-x: 66%; --studio-cursor-y: 68%; }
.ubx-studio-stage[data-studio-scene="team"] { --studio-cursor-x: 79%; --studio-cursor-y: 40%; }
.ubx-studio-stage[data-studio-scene="memory"] { --studio-cursor-x: 43%; --studio-cursor-y: 74%; }

.ubx-studio-layer-rack {
    position: absolute;
    z-index: 21;
    top: 4.6rem;
    left: 50%;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    max-width: min(38rem, 52%);
    padding: 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(7, 10, 12, 0.54);
    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px);
    transform: translate3d(-50%, 0, 160px);
}

.ubx-studio-layer-rack span {
    display: inline-flex;
    gap: 0.32rem;
    align-items: center;
    padding: 0.4rem 0.62rem;
    color: var(--ubx-muted);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
    transition: color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.ubx-studio-layer-rack svg {
    width: 0.9rem;
    height: 0.9rem;
}

.ubx-studio-stage[data-studio-scene="research"] .ubx-studio-layer-rack span[data-studio-scene="research"],
.ubx-studio-stage[data-studio-scene="inspect"] .ubx-studio-layer-rack span[data-studio-scene="inspect"],
.ubx-studio-stage[data-studio-scene="lists"] .ubx-studio-layer-rack span[data-studio-scene="lists"],
.ubx-studio-stage[data-studio-scene="team"] .ubx-studio-layer-rack span[data-studio-scene="team"],
.ubx-studio-stage[data-studio-scene="memory"] .ubx-studio-layer-rack span[data-studio-scene="memory"] {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.14);
    box-shadow: 0 0.8rem 1.8rem rgba(var(--ubx-primary-rgb), 0.12);
    transform: translateY(-0.08rem);
}

.ubx-studio-shot-board {
    position: absolute;
    z-index: 20;
    left: 1.2rem;
    bottom: 8.8rem;
    width: min(21rem, 34%);
    transform: translate3d(0, 0, 185px);
}

.ubx-studio-shot-board article {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 0.36rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.13), transparent 9rem),
        rgba(7, 10, 12, 0.76);
    box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.27);
    backdrop-filter: blur(20px);
    opacity: 0;
    transform: translate3d(-0.8rem, 0.8rem, 0) rotateX(8deg) scale(0.94);
    transition:
        opacity 360ms ease,
        transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 220ms ease;
}

.ubx-studio-shot-board article.is-active,
.ubx-studio-stage[data-studio-scene="research"] .ubx-studio-shot-board article[data-studio-scene="research"],
.ubx-studio-stage[data-studio-scene="inspect"] .ubx-studio-shot-board article[data-studio-scene="inspect"],
.ubx-studio-stage[data-studio-scene="lists"] .ubx-studio-shot-board article[data-studio-scene="lists"],
.ubx-studio-stage[data-studio-scene="team"] .ubx-studio-shot-board article[data-studio-scene="team"],
.ubx-studio-stage[data-studio-scene="memory"] .ubx-studio-shot-board article[data-studio-scene="memory"] {
    opacity: 1;
    border-color: rgba(var(--ubx-primary-rgb), 0.32);
    transform: translate3d(0, 0, 0) rotateX(0) scale(1);
}

.ubx-studio-shot-board small {
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ubx-studio-shot-board strong {
    color: var(--ubx-text);
    font-size: 1.05rem;
    font-weight: 950;
}

.ubx-studio-shot-board p {
    margin: 0;
    color: var(--ubx-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.ubx-studio-shot-board em {
    display: inline-flex;
    gap: 0.34rem;
    align-items: center;
    width: fit-content;
    padding: 0.43rem 0.58rem;
    color: var(--ubx-text);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.12);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 850;
}

.ubx-studio-shot-board svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--ubx-primary);
}

.ubx-studio-cue {
    z-index: 22;
    right: 1.2rem;
    bottom: 1.2rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    max-width: min(35rem, calc(100% - 2.4rem));
    padding: 0.8rem 0.9rem;
    opacity: 1;
    transform: translate3d(0, 0, 170px);
}

.ubx-studio-cue small {
    color: var(--ubx-muted);
    font-size: 0.82rem;
}

.ubx-studio-timeline {
    position: absolute;
    z-index: 24;
    right: 1.2rem;
    bottom: 4.8rem;
    left: 1.2rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
}

.ubx-studio-timeline span {
    position: relative;
    overflow: hidden;
    padding: 0.58rem 0.62rem;
    color: var(--ubx-muted);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.82rem;
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.72rem;
}

.ubx-studio-timeline span::before {
    position: absolute;
    inset: auto 0 0;
    width: 0;
    height: 2px;
    content: "";
    background: var(--ubx-primary);
}

.ubx-studio-timeline span.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.32);
    background: rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-studio-timeline span.is-active::before {
    animation: ubx-studio-progress 6.2s linear forwards;
}

.ubx-studio-timeline b {
    margin-right: 0.3rem;
    color: var(--ubx-primary);
}

.ubx-studio-stage[data-studio-scene="research"] .ubx-studio-search,
.ubx-studio-stage[data-studio-scene="research"] .ubx-studio-results,
.ubx-studio-stage[data-studio-scene="inspect"] .ubx-studio-place,
.ubx-studio-stage[data-studio-scene="lists"] .ubx-studio-list,
.ubx-studio-stage[data-studio-scene="team"] .ubx-studio-chat,
.ubx-studio-stage[data-studio-scene="team"] .ubx-studio-phone,
.ubx-studio-stage[data-studio-scene="memory"] .ubx-studio-logbook {
    opacity: 1;
    border-color: rgba(var(--ubx-primary-rgb), 0.32);
    box-shadow: 0 2rem 4.6rem rgba(0, 0, 0, 0.36), 0 0 2.7rem rgba(var(--ubx-primary-rgb), 0.1);
    transform: translate3d(0, 0, 190px) scale(1);
}

.ubx-studio-stage[data-studio-scene="team"] .studio-route,
.ubx-studio-stage[data-studio-scene="lists"] .studio-route {
    opacity: 1;
    transform: translateZ(120px) scale(1);
}

.ubx-studio-stage[data-studio-scene="research"] .pin-cluster,
.ubx-studio-stage[data-studio-scene="inspect"] .pin-place,
.ubx-studio-stage[data-studio-scene="lists"] .pin-list,
.ubx-studio-stage[data-studio-scene="team"] .pin-team,
.ubx-studio-stage[data-studio-scene="memory"] .pin-memory {
    animation: ubx-studio-pin 2.1s ease-in-out infinite;
}

@keyframes ubx-studio-progress {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes ubx-studio-pin {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
}

@keyframes ubx-studio-cursor-pulse {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.84);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

.ubx-premiere-showcase {
    position: relative;
    overflow: hidden;
}

.ubx-showcase-legacy-sequence {
    display: none !important;
}

.ubx-premiere-showcase::before {
    position: absolute;
    inset: 6% -10% auto;
    height: 34rem;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 28% 36%, rgba(var(--ubx-primary-rgb), 0.16), transparent 18rem),
        radial-gradient(circle at 74% 45%, rgba(var(--ubx-kind-chat-rgb), 0.1), transparent 22rem);
    filter: blur(8px);
}

.ubx-premiere-story-card {
    display: grid;
    gap: 0.35rem;
    margin: 1.8rem 0 1.1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.22);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.13), transparent 12rem),
        rgba(255, 255, 255, 0.055);
    box-shadow:
        0 1.2rem 3rem rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
}

.ubx-premiere-story-card small,
.ubx-premiere-inspector small {
    color: var(--ubx-primary);
    font-size: 0.73rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-premiere-story-card strong {
    color: var(--ubx-text);
    font-size: clamp(1.08rem, 2vw, 1.32rem);
    font-weight: 950;
    letter-spacing: -0.03em;
}

.ubx-premiere-story-card span {
    color: var(--ubx-muted);
    line-height: 1.55;
}

.ubx-premiere-player {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ubx-premiere-player button {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.55rem 0.72rem;
    color: var(--ubx-text);
    font-size: 0.78rem;
    font-weight: 900;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.34);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.12);
    box-shadow: 0 0.8rem 1.8rem rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-premiere-player button .icon-pause,
.ubx-premiere-player button.is-playing .icon-play {
    display: none;
}

.ubx-premiere-player button.is-playing .icon-pause {
    display: block;
}

.ubx-premiere-player em {
    color: var(--ubx-muted);
    font-size: 0.76rem;
    font-style: normal;
    line-height: 1.35;
}

.ubx-premiere-controls {
    display: grid;
    gap: 0.7rem;
}

.ubx-premiere-controls button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.86rem 0.95rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.1rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.035);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ubx-premiere-controls button:hover,
.ubx-premiere-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.17), transparent 9rem),
        rgba(var(--ubx-primary-rgb), 0.075);
    box-shadow: 0 1rem 2.4rem rgba(var(--ubx-primary-rgb), 0.09);
    transform: translateX(0.18rem);
}

.ubx-premiere-controls b {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    color: #07140d;
    font-size: 0.76rem;
    border-radius: 0.8rem;
    background: var(--ubx-primary);
}

.ubx-premiere-controls strong,
.ubx-premiere-controls small {
    display: block;
}

.ubx-premiere-controls strong {
    font-weight: 950;
}

.ubx-premiere-controls small {
    margin-top: 0.12rem;
    color: var(--ubx-muted);
    font-size: 0.76rem;
}

.ubx-premiere-stage {
    position: relative;
    min-height: clamp(43rem, 68vw, 56rem);
    padding: clamp(0.85rem, 1.6vw, 1.25rem);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 2.3rem;
    background:
        radial-gradient(circle at var(--shine-x, 52%) var(--shine-y, 34%), rgba(255, 255, 255, 0.11), transparent 20rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        var(--ubx-surface);
    box-shadow:
        0 3rem 8rem rgba(0, 0, 0, 0.32),
        0 0 5rem rgba(var(--ubx-primary-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    perspective: 1400px;
    transform-style: preserve-3d;
}

.ubx-premiere-set-light {
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(18px);
    opacity: 0.72;
    animation: ubx-premiere-light 10s ease-in-out infinite alternate;
}

.ubx-premiere-set-light.light-a {
    top: 5%;
    left: 12%;
    width: 20rem;
    height: 20rem;
    background: rgba(var(--ubx-primary-rgb), 0.14);
}

.ubx-premiere-set-light.light-b {
    right: 8%;
    bottom: 8%;
    width: 24rem;
    height: 24rem;
    background: rgba(var(--ubx-kind-chat-rgb), 0.09);
    animation-delay: -4s;
}

.ubx-premiere-browser {
    position: absolute;
    inset: clamp(0.85rem, 1.8vw, 1.35rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.8rem;
    background:
        radial-gradient(circle at 18% 20%, rgba(var(--ubx-primary-rgb), 0.12), transparent 19rem),
        linear-gradient(140deg, rgba(17, 27, 28, 0.96), rgba(8, 11, 15, 0.98));
    box-shadow:
        0 2.2rem 4.8rem rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform:
        rotateX(calc(5deg + var(--tilt-x, 0deg)))
        rotateY(calc(-6deg + var(--tilt-y, 0deg)))
        translateZ(20px);
    transform-style: preserve-3d;
}

.ubx-premiere-browserbar {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    height: 3.25rem;
    padding: 0 1rem;
    color: var(--ubx-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(6, 10, 13, 0.82);
    backdrop-filter: blur(18px);
}

.ubx-premiere-browserbar > span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
}

.ubx-premiere-browserbar strong {
    min-width: 0;
    margin-left: 0.42rem;
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-premiere-browserbar em {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-premiere-browserbar em i {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.35rem rgba(var(--ubx-primary-rgb), 0.14);
}

.ubx-premiere-clapper {
    position: absolute;
    z-index: 24;
    top: 3.9rem;
    left: 50%;
    display: grid;
    gap: 0.08rem;
    width: min(30rem, calc(100% - 31rem));
    padding: 0.75rem 0.9rem;
    color: var(--ubx-text);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(7, 10, 13, 0.72);
    box-shadow:
        0 1rem 2.5rem rgba(0, 0, 0, 0.24),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.07);
    backdrop-filter: blur(18px);
    transform: translateX(-50%) translateZ(190px);
}

.ubx-premiere-clapper::before {
    position: absolute;
    inset: 0 0 auto;
    height: 0.26rem;
    content: "";
    border-radius: inherit;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.45) 0 0.6rem,
        rgba(var(--ubx-primary-rgb), 0.72) 0.6rem 1.2rem
    );
    opacity: 0.38;
}

.ubx-premiere-clapper small {
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ubx-premiere-clapper strong {
    color: var(--ubx-text);
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1.35;
}

.ubx-premiere-stage.is-playing .ubx-premiere-clapper {
    animation: ubx-premiere-clapper 5.2s ease-in-out infinite;
}

.ubx-premiere-callouts {
    position: absolute;
    z-index: 22;
    inset: 0;
    pointer-events: none;
}

.ubx-premiere-callouts article {
    position: absolute;
    display: grid;
    gap: 0.08rem;
    width: min(17rem, 30vw);
    padding: 0.85rem 0.95rem;
    color: var(--ubx-muted);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.13), transparent 9rem),
        rgba(7, 10, 13, 0.76);
    box-shadow:
        0 1.1rem 2.7rem rgba(0, 0, 0, 0.24),
        0 0 2.4rem rgba(var(--ubx-primary-rgb), 0.07);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translate3d(var(--callout-x, 0), calc(var(--callout-y, 0) + 0.8rem), 230px) scale(0.94);
    transition:
        opacity 360ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ubx-premiere-callouts article::before {
    position: absolute;
    width: var(--callout-line-w, 7rem);
    height: 1px;
    content: "";
    background: linear-gradient(90deg, rgba(var(--ubx-primary-rgb), 0.72), transparent);
    transform: translate(var(--callout-line-x, 0), var(--callout-line-y, 0)) rotate(var(--callout-line-rotate, 0deg));
    transform-origin: left center;
}

.ubx-premiere-callouts article::after {
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    content: "";
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.45rem rgba(var(--ubx-primary-rgb), 0.12);
    transform: translate(var(--callout-dot-x, 0), var(--callout-dot-y, 0));
}

.ubx-premiere-callouts article.is-active {
    opacity: 1;
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    transform: translate3d(var(--callout-x, 0), var(--callout-y, 0), 260px) scale(1);
}

.ubx-premiere-callouts small {
    color: var(--ubx-primary);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-premiere-callouts strong {
    color: var(--ubx-text);
    font-size: 0.98rem;
    font-weight: 950;
    letter-spacing: -0.025em;
}

.ubx-premiere-callouts span {
    font-size: 0.82rem;
    line-height: 1.42;
}

.ubx-premiere-callouts article[data-premiere-scene="map"] {
    --callout-x: 14.3rem;
    --callout-y: 10.2rem;
    --callout-line-x: 11.8rem;
    --callout-line-y: 2.4rem;
    --callout-line-w: 6.2rem;
    --callout-line-rotate: -12deg;
    --callout-dot-x: 17.4rem;
    --callout-dot-y: 1.55rem;
}

.ubx-premiere-callouts article[data-premiere-scene="place"] {
    --callout-x: calc(100% - 35rem);
    --callout-y: calc(100% - 21rem);
    --callout-line-x: 12.4rem;
    --callout-line-y: -1.2rem;
    --callout-line-w: 7.8rem;
    --callout-line-rotate: -28deg;
    --callout-dot-x: 19.7rem;
    --callout-dot-y: -4.5rem;
}

.ubx-premiere-callouts article[data-premiere-scene="lists"] {
    --callout-x: 17rem;
    --callout-y: calc(100% - 17.2rem);
    --callout-line-x: 7.6rem;
    --callout-line-y: -0.7rem;
    --callout-line-w: 7rem;
    --callout-line-rotate: -22deg;
    --callout-dot-x: 14.1rem;
    --callout-dot-y: -3.2rem;
}

.ubx-premiere-callouts article[data-premiere-scene="team"] {
    --callout-x: calc(100% - 31rem);
    --callout-y: 13.4rem;
    --callout-line-x: 10rem;
    --callout-line-y: 3rem;
    --callout-line-w: 7.4rem;
    --callout-line-rotate: 16deg;
    --callout-dot-x: 17.1rem;
    --callout-dot-y: 4.9rem;
}

.ubx-premiere-callouts article[data-premiere-scene="memory"] {
    --callout-x: calc(100% - 34rem);
    --callout-y: calc(100% - 17.6rem);
    --callout-line-x: 10.8rem;
    --callout-line-y: 1.7rem;
    --callout-line-w: 7rem;
    --callout-line-rotate: 7deg;
    --callout-dot-x: 17.1rem;
    --callout-dot-y: 2.7rem;
}

.ubx-premiere-stage.is-playing .ubx-premiere-callouts article.is-active::after {
    animation: ubx-premiere-callout-dot 1.8s ease-in-out infinite;
}

.ubx-premiere-toolbar {
    position: absolute;
    z-index: 12;
    top: 4.1rem;
    left: 1rem;
    display: grid;
    gap: 0.55rem;
    width: 11.2rem;
}

.ubx-premiere-toolbar button {
    display: inline-flex;
    gap: 0.48rem;
    align-items: center;
    padding: 0.68rem 0.72rem;
    color: var(--ubx-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-premiere-toolbar button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.35);
    background: rgba(var(--ubx-primary-rgb), 0.13);
}

.ubx-premiere-shot-deck {
    position: absolute;
    z-index: 15;
    top: 4.1rem;
    right: 1rem;
    display: grid;
    gap: 0.5rem;
    width: min(18rem, 34%);
    perspective: 900px;
}

.ubx-premiere-shot-deck span {
    display: grid;
    gap: 0.05rem;
    padding: 0.7rem 0.78rem;
    color: var(--ubx-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.95rem;
    background: rgba(7, 10, 13, 0.62);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(16px);
    opacity: 0.42;
    transform: translate3d(0.8rem, 0, 20px) rotateY(-10deg) scale(0.94);
    transition:
        opacity 320ms ease,
        color 220ms ease,
        border-color 220ms ease,
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
        background 220ms ease,
        box-shadow 220ms ease;
}

.ubx-premiere-shot-deck span.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.35);
    background:
        radial-gradient(circle at 0 50%, rgba(var(--ubx-primary-rgb), 0.15), transparent 8rem),
        rgba(7, 10, 13, 0.78);
    box-shadow:
        0 1.25rem 2.8rem rgba(0, 0, 0, 0.22),
        0 0 2.4rem rgba(var(--ubx-primary-rgb), 0.08);
    opacity: 1;
    transform: translate3d(-0.35rem, 0, 120px) rotateY(0deg) scale(1.03);
}

.ubx-premiere-shot-deck b,
.ubx-premiere-shot-deck small {
    color: var(--ubx-primary);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-premiere-shot-deck strong {
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-premiere-shot-deck small {
    color: var(--ubx-muted);
    letter-spacing: 0;
    text-transform: none;
}

.ubx-premiere-map {
    position: absolute;
    z-index: 1;
    inset: 4.1rem 1rem 1rem 13rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.3rem;
    background:
        linear-gradient(33deg, transparent 0 45%, rgba(76, 124, 147, 0.2) 45% 50%, transparent 50%),
        radial-gradient(circle at 22% 18%, rgba(78, 120, 82, 0.26), transparent 15rem),
        radial-gradient(circle at 72% 68%, rgba(76, 112, 126, 0.22), transparent 17rem),
        #182421;
    transform:
        translate3d(0, 0, 22px)
        rotateX(calc(4deg - var(--premiere-map-lift, 0) * 2deg))
        scale(var(--premiere-map-scale, 1));
    transition:
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 420ms ease,
        opacity 420ms ease;
}

.ubx-premiere-map::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 2.6rem 2.6rem;
    opacity: 0.34;
}

.premiere-region,
.premiere-road,
.premiere-water,
.premiere-route,
.premiere-marker {
    position: absolute;
}

.premiere-region {
    z-index: 2;
    padding: 0.28rem 0.52rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 900;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
}

.premiere-region.region-a { top: 18%; left: 18%; }
.premiere-region.region-b { right: 17%; top: 35%; }
.premiere-region.region-c { left: 44%; bottom: 18%; }

.premiere-road {
    z-index: 1;
    height: 0.24rem;
    border-radius: 999px;
    background: rgba(235, 227, 195, 0.28);
    box-shadow: 0 0.7rem 0 rgba(255, 255, 255, 0.035);
}

.premiere-road.road-a {
    top: 46%;
    left: -7%;
    width: 88%;
    transform: rotate(-13deg);
}

.premiere-road.road-b {
    top: 36%;
    right: -9%;
    width: 57%;
    transform: rotate(31deg);
}

.premiere-water {
    right: -7%;
    bottom: 17%;
    width: 46%;
    height: 19%;
    border-radius: 999px;
    background: rgba(77, 128, 152, 0.24);
    transform: rotate(-17deg);
}

.premiere-route {
    z-index: 3;
    top: 34%;
    left: 30%;
    width: 42%;
    height: 32%;
    border-top: 4px solid rgba(var(--ubx-primary-rgb), 0.68);
    border-right: 4px solid rgba(var(--ubx-primary-rgb), 0.42);
    border-radius: 90% 30% 80% 20%;
    opacity: 0.46;
    filter: drop-shadow(0 0 1rem rgba(var(--ubx-primary-rgb), 0.24));
    transform: rotate(8deg);
    transition: opacity 360ms ease, transform 520ms ease;
}

.premiere-marker {
    z-index: 5;
    display: grid;
    pointer-events: auto;
    place-items: center;
    color: #07140d;
    font-size: 0.78rem;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0.4rem 0 rgba(0, 0, 0, 0.24),
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.3);
    transition:
        transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 220ms ease,
        filter 220ms ease,
        box-shadow 220ms ease;
}

.premiere-marker.marker-cluster {
    top: 27%;
    left: 35%;
    width: 2.9rem;
    height: 2.9rem;
}

.premiere-marker.marker-place {
    top: 48%;
    left: 56%;
    width: 1.35rem;
    height: 1.35rem;
}

.premiere-marker.marker-team {
    right: 19%;
    bottom: 26%;
    width: 2.1rem;
    height: 2.1rem;
    background: var(--ubx-kind-chat);
    box-shadow:
        0 0.4rem 0 rgba(0, 0, 0, 0.24),
        0 0 0 0.55rem rgba(var(--ubx-kind-chat-rgb), 0.14),
        0 0 2.2rem rgba(var(--ubx-kind-chat-rgb), 0.3);
}

.premiere-marker.marker-logbook {
    left: 46%;
    bottom: 22%;
    width: 2rem;
    height: 2rem;
    background: var(--ubx-kind-list);
    box-shadow:
        0 0.4rem 0 rgba(0, 0, 0, 0.24),
        0 0 0 0.55rem rgba(var(--ubx-kind-list-rgb), 0.14),
        0 0 2.2rem rgba(var(--ubx-kind-list-rgb), 0.3);
}

.premiere-marker:hover,
.premiere-marker.is-active {
    opacity: 1;
    filter: saturate(1.1);
    transform: translate3d(0, -0.35rem, 130px) scale(1.18);
}

.ubx-premiere-search-panel,
.ubx-premiere-place-panel,
.ubx-premiere-list-panel,
.ubx-premiere-chat-panel,
.ubx-premiere-log-panel,
.ubx-premiere-phone,
.ubx-premiere-inspector {
    position: absolute;
    z-index: 8;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.15rem;
    background: rgba(7, 10, 13, 0.74);
    box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    transition:
        opacity 420ms ease,
        filter 420ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.ubx-premiere-search-panel {
    top: 4.4rem;
    left: 1rem;
    width: 11.2rem;
    padding: 1rem;
    transform: translate3d(0, 5.2rem, 80px);
}

.ubx-premiere-search-panel small,
.ubx-premiere-place-panel small,
.ubx-premiere-list-panel small,
.ubx-premiere-chat-panel small,
.ubx-premiere-log-panel small {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 900;
}

.ubx-premiere-search-panel strong,
.ubx-premiere-search-panel span,
.ubx-premiere-place-panel strong,
.ubx-premiere-place-panel p,
.ubx-premiere-list-panel strong,
.ubx-premiere-list-panel span {
    display: block;
}

.ubx-premiere-search-panel strong {
    margin-top: 0.35rem;
}

.ubx-premiere-search-panel span,
.ubx-premiere-place-panel p,
.ubx-premiere-list-panel span,
.ubx-premiere-log-panel em {
    color: var(--ubx-muted);
    font-size: 0.82rem;
}

.ubx-premiere-place-panel {
    right: 2rem;
    bottom: 8.8rem;
    width: min(23rem, 42%);
    padding: 1rem;
    transform: translate3d(1.4rem, 0.8rem, 130px) rotateY(-8deg);
}

.ubx-premiere-photo-strip {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
    gap: 0.38rem;
    height: 5.2rem;
    margin-bottom: 0.8rem;
}

.ubx-premiere-photo-strip i {
    border-radius: 0.65rem;
    background:
        linear-gradient(140deg, rgba(96, 113, 94, 0.64), rgba(44, 52, 50, 0.9)),
        rgba(255, 255, 255, 0.08);
}

.ubx-premiere-photo-strip i:nth-child(2) {
    background: linear-gradient(140deg, rgba(112, 101, 82, 0.64), rgba(38, 43, 42, 0.9));
}

.ubx-premiere-photo-strip i:nth-child(3) {
    background: linear-gradient(140deg, rgba(68, 91, 103, 0.64), rgba(31, 40, 42, 0.9));
}

.ubx-premiere-place-panel div:last-child {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.ubx-premiere-place-panel button {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    padding: 0.38rem 0.52rem;
    color: var(--ubx-text);
    font-size: 0.72rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-premiere-list-panel {
    left: 14rem;
    bottom: 2rem;
    width: 18rem;
    padding: 1rem;
    transform: translate3d(0, 1rem, 110px) rotateY(7deg);
}

.ubx-premiere-list-items {
    display: grid;
    gap: 0.38rem;
    margin-top: 0.8rem;
}

.ubx-premiere-list-items i {
    display: block;
    width: var(--w);
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.48);
}

.ubx-premiere-chat-panel {
    right: 2.2rem;
    top: 5rem;
    width: 18rem;
    padding: 1rem;
    transform: translate3d(1.2rem, -0.4rem, 120px) rotateY(-8deg);
}

.ubx-premiere-chat-panel p {
    width: fit-content;
    max-width: 86%;
    margin: 0.55rem 0 0;
    padding: 0.52rem 0.65rem;
    color: var(--ubx-text);
    font-size: 0.82rem;
    border-radius: 0.9rem 0.9rem 0.9rem 0.3rem;
    background: rgba(255, 255, 255, 0.075);
}

.ubx-premiere-chat-panel p.right {
    margin-left: auto;
    border-radius: 0.9rem 0.9rem 0.3rem 0.9rem;
    background: rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-premiere-log-panel {
    right: 2rem;
    bottom: 2rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    width: 22rem;
    padding: 0.9rem 1rem;
    transform: translate3d(0.6rem, 0.6rem, 120px);
}

.ubx-premiere-log-panel > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-premiere-phone {
    right: 3rem;
    bottom: 5.3rem;
    width: 12rem;
    height: 22rem;
    padding: 1rem 0.8rem 0.8rem;
    border-radius: 2rem;
    transform: translate3d(1.8rem, -0.1rem, 190px) rotateY(-14deg) rotateZ(2deg) scale(0.92);
}

.ubx-premiere-phone .phone-notch {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 4rem;
    height: 0.32rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transform: translateX(-50%);
}

.ubx-premiere-phone strong {
    display: block;
    margin-top: 0.85rem;
    text-align: center;
}

.ubx-premiere-phone > div {
    position: relative;
    height: 16.5rem;
    margin-top: 0.8rem;
    overflow: hidden;
    border-radius: 1.3rem;
    background:
        linear-gradient(43deg, transparent 0 46%, rgba(92, 135, 153, 0.22) 46% 52%, transparent 52%),
        radial-gradient(circle at 24% 22%, rgba(var(--ubx-primary-rgb), 0.18), transparent 7rem),
        #17231f;
}

.ubx-premiere-phone .building,
.ubx-premiere-phone .person,
.ubx-premiere-phone .camera {
    position: absolute;
}

.ubx-premiere-phone .building {
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.12);
}

.ubx-premiere-phone .building.a {
    top: 21%;
    left: 18%;
    width: 3rem;
    height: 4.4rem;
    transform: rotate(-8deg);
}

.ubx-premiere-phone .building.b {
    right: 17%;
    bottom: 18%;
    width: 3.4rem;
    height: 4.8rem;
    transform: rotate(10deg);
}

.ubx-premiere-phone .person,
.ubx-premiere-phone .camera {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    color: #07140d;
    font-size: 0.72rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.45rem rgba(var(--ubx-primary-rgb), 0.15);
}

.ubx-premiere-phone .person.a { top: 30%; left: 42%; }
.ubx-premiere-phone .person.b { right: 20%; top: 52%; }
.ubx-premiere-phone .camera { left: 22%; bottom: 18%; background: var(--ubx-kind-chat); }

.ubx-premiere-inspector {
    left: 50%;
    bottom: 1.35rem;
    z-index: 14;
    display: grid;
    gap: 0.22rem;
    width: min(30rem, calc(100% - 2rem));
    padding: 1rem 1.1rem;
    transform: translate3d(-50%, 0, 210px);
}

.ubx-premiere-inspector strong {
    color: var(--ubx-text);
    font-size: 1.05rem;
    font-weight: 950;
}

.ubx-premiere-inspector span {
    color: var(--ubx-muted);
    line-height: 1.45;
}

.ubx-premiere-timeline {
    position: absolute;
    z-index: 20;
    right: clamp(1.2rem, 2.3vw, 1.8rem);
    bottom: clamp(1.2rem, 2.3vw, 1.8rem);
    left: clamp(1.2rem, 2.3vw, 1.8rem);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(7, 10, 13, 0.66);
    backdrop-filter: blur(18px);
}

.ubx-premiere-timeline span {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.48rem 0.55rem;
    color: var(--ubx-muted);
    font-size: 0.74rem;
    font-weight: 850;
    border-radius: 999px;
    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.ubx-premiere-timeline span i {
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--ubx-primary);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
}

.ubx-premiere-timeline span.is-active {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.16);
    transform: translateY(-0.05rem);
}

.ubx-premiere-stage.is-playing .ubx-premiere-timeline span.is-active i {
    opacity: 1;
    animation: ubx-premiere-progress 5.2s linear forwards;
}

.ubx-premiere-timeline b {
    color: var(--ubx-primary);
}

.ubx-premiere-stage[data-premiere-scene="map"] {
    --premiere-map-scale: 1.01;
    --premiere-map-lift: 0.25;
}

.ubx-premiere-stage[data-premiere-scene="place"] {
    --premiere-map-scale: 1.04;
    --premiere-map-lift: 0.45;
}

.ubx-premiere-stage[data-premiere-scene="lists"],
.ubx-premiere-stage[data-premiere-scene="team"],
.ubx-premiere-stage[data-premiere-scene="memory"] {
    --premiere-map-scale: 0.98;
    --premiere-map-lift: 0.15;
}

.ubx-premiere-stage[data-premiere-scene="place"] .ubx-premiere-place-panel,
.ubx-premiere-stage[data-premiere-scene="lists"] .ubx-premiere-list-panel,
.ubx-premiere-stage[data-premiere-scene="team"] .ubx-premiere-chat-panel,
.ubx-premiere-stage[data-premiere-scene="team"] .ubx-premiere-phone,
.ubx-premiere-stage[data-premiere-scene="memory"] .ubx-premiere-log-panel {
    opacity: 1;
    border-color: rgba(var(--ubx-primary-rgb), 0.35);
    filter: none;
    box-shadow:
        0 1.7rem 3.8rem rgba(0, 0, 0, 0.28),
        0 0 2.6rem rgba(var(--ubx-primary-rgb), 0.1);
    transform: translate3d(0, -0.55rem, 240px) rotateY(0deg) scale(1.04);
}

.ubx-premiere-stage[data-premiere-scene="map"] .ubx-premiere-search-panel {
    opacity: 1;
    border-color: rgba(var(--ubx-primary-rgb), 0.35);
    transform: translate3d(0, 5rem, 190px) scale(1.04);
}

.ubx-premiere-stage:not([data-premiere-scene="place"]) .ubx-premiere-place-panel,
.ubx-premiere-stage:not([data-premiere-scene="lists"]) .ubx-premiere-list-panel,
.ubx-premiere-stage:not([data-premiere-scene="team"]) .ubx-premiere-chat-panel,
.ubx-premiere-stage:not([data-premiere-scene="team"]) .ubx-premiere-phone,
.ubx-premiere-stage:not([data-premiere-scene="memory"]) .ubx-premiere-log-panel {
    opacity: 0.42;
    filter: saturate(0.74) blur(0.2px);
}

.ubx-premiere-stage[data-premiere-scene="team"] .premiere-route,
.ubx-premiere-stage[data-premiere-scene="lists"] .premiere-route {
    opacity: 1;
    transform: rotate(8deg) scale(1.08);
}

.ubx-premiere-stage[data-premiere-scene="place"] .marker-place,
.ubx-premiere-stage[data-premiere-scene="map"] .marker-cluster,
.ubx-premiere-stage[data-premiere-scene="team"] .marker-team,
.ubx-premiere-stage[data-premiere-scene="memory"] .marker-logbook {
    opacity: 1;
    transform: translate3d(0, -0.35rem, 140px) scale(1.2);
}

.ubx-premiere-stage.is-playing .premiere-marker.is-active {
    animation: ubx-premiere-marker-focus 2.2s ease-in-out infinite;
}

@keyframes ubx-premiere-light {
    from {
        transform: translate3d(-1rem, -0.4rem, 0) scale(1);
    }
    to {
        transform: translate3d(1.2rem, 0.8rem, 0) scale(1.08);
    }
}

@keyframes ubx-premiere-progress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes ubx-premiere-clapper {
    0%, 100% {
        opacity: 0.82;
        transform: translateX(-50%) translate3d(0, 0, 190px);
    }
    12%, 78% {
        opacity: 1;
        transform: translateX(-50%) translate3d(0, -0.16rem, 210px);
    }
}

@keyframes ubx-premiere-callout-dot {
    0%, 100% {
        box-shadow: 0 0 0 0.45rem rgba(var(--ubx-primary-rgb), 0.12);
    }
    50% {
        box-shadow: 0 0 0 0.72rem rgba(var(--ubx-primary-rgb), 0.19);
    }
}

@keyframes ubx-premiere-marker-focus {
    0%, 100% {
        box-shadow:
            0 0.4rem 0 rgba(0, 0, 0, 0.24),
            0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14),
            0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.3);
    }
    50% {
        box-shadow:
            0 0.4rem 0 rgba(0, 0, 0, 0.24),
            0 0 0 0.82rem rgba(var(--ubx-primary-rgb), 0.18),
            0 0 3.2rem rgba(var(--ubx-primary-rgb), 0.42);
    }
}

.ubx-premiere-recap {
    position: relative;
    padding-top: clamp(3rem, 7vw, 6rem);
    padding-bottom: clamp(3rem, 7vw, 6rem);
}

.ubx-premiere-recap::before {
    position: absolute;
    inset: 8% 8% auto;
    height: 18rem;
    pointer-events: none;
    content: "";
    background: radial-gradient(circle at 50% 35%, rgba(var(--ubx-primary-rgb), 0.12), transparent 22rem);
    filter: blur(10px);
}

.ubx-premiere-recap-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.8rem, 1.4vw, 1.1rem);
}

.ubx-premiere-recap-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 13rem;
    padding: 1.15rem;
    color: inherit;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--ubx-primary-rgb), 0.12), transparent 12rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
        rgba(255, 255, 255, 0.04);
    box-shadow:
        0 1.1rem 2.6rem rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    transform: translateY(0);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        background 220ms ease;
}

.ubx-premiere-recap-card:hover {
    border-color: rgba(var(--ubx-primary-rgb), 0.32);
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--ubx-primary-rgb), 0.18), transparent 12rem),
        rgba(var(--ubx-primary-rgb), 0.055);
    box-shadow:
        0 1.45rem 3.2rem rgba(0, 0, 0, 0.2),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.07);
    transform: translateY(-0.22rem);
}

.ubx-premiere-recap-card.is-active {
    border-color: rgba(var(--ubx-primary-rgb), 0.48);
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--ubx-primary-rgb), 0.22), transparent 12rem),
        rgba(var(--ubx-primary-rgb), 0.075);
    box-shadow:
        0 1.6rem 3.5rem rgba(0, 0, 0, 0.22),
        0 0 2.8rem rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-premiere-recap-card span {
    display: inline-grid;
    width: 2.7rem;
    height: 2.7rem;
    margin-bottom: 1rem;
    place-items: center;
    color: #07140d;
    border-radius: 1rem;
    background: var(--ubx-primary);
    box-shadow: 0 0.8rem 1.9rem rgba(var(--ubx-primary-rgb), 0.14);
}

.ubx-premiere-recap-card svg {
    width: 1.28rem;
    height: 1.28rem;
}

.ubx-premiere-recap-card strong {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--ubx-text);
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.ubx-premiere-recap-card small {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ubx-primary);
    font-size: 0.74rem;
    font-weight: 950;
}

.ubx-premiere-recap-card p {
    margin: 0;
    color: var(--ubx-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.ubx-premiere-recap-stage {
    position: relative;
    overflow: hidden;
    margin-top: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.8rem;
    background:
        radial-gradient(circle at 70% 10%, rgba(var(--ubx-primary-rgb), 0.14), transparent 22rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
        rgba(8, 12, 15, 0.72);
    box-shadow:
        0 1.8rem 4.6rem rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px);
}

.ubx-recap-browserbar {
    display: flex;
    gap: 0.44rem;
    align-items: center;
    padding: 0.82rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.ubx-recap-browserbar span {
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.ubx-recap-browserbar span:first-child { background: #ff6f6f; }
.ubx-recap-browserbar span:nth-child(2) { background: #f5c96b; }
.ubx-recap-browserbar span:nth-child(3) { background: var(--ubx-primary); }

.ubx-recap-browserbar strong {
    min-width: 0;
    margin-left: 0.35rem;
    overflow: hidden;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-recap-browserbar em {
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-recap-screen {
    position: relative;
    min-height: 28rem;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.ubx-recap-map {
    position: absolute;
    inset: 1rem;
    overflow: hidden;
    border-radius: 1.3rem;
    background:
        linear-gradient(135deg, rgba(91, 126, 98, 0.32), transparent 50%),
        radial-gradient(circle at 64% 38%, rgba(56, 88, 74, 0.64), transparent 19rem),
        rgba(28, 41, 35, 0.92);
    transform: rotateX(5deg) rotateY(-3deg) translateZ(0);
}

.ubx-recap-map::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 3.4rem 3.4rem;
}

.recap-road,
.recap-zone,
.recap-pin {
    position: absolute;
    z-index: 2;
}

.recap-road {
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(228, 217, 186, 0.36);
}

.recap-road.road-a {
    top: 42%;
    left: -7%;
    width: 70%;
    transform: rotate(-13deg);
}

.recap-road.road-b {
    right: -8%;
    bottom: 28%;
    width: 66%;
    transform: rotate(22deg);
}

.recap-zone {
    top: 16%;
    left: 12%;
    padding: 0.36rem 0.55rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 950;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
}

.recap-pin {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    color: #07100d;
    font-size: 0.74rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.26);
    transition:
        opacity 220ms ease,
        filter 220ms ease,
        transform 260ms ease;
}

.recap-pin.pin-map { top: 35%; left: 34%; }
.recap-pin.pin-place { top: 48%; left: 50%; width: 1.3rem; height: 1.3rem; background: #fff; }
.recap-pin.pin-list { top: 61%; left: 38%; background: rgba(var(--ubx-kind-list-rgb), 0.95); }
.recap-pin.pin-team { top: 42%; right: 27%; color: #fff; background: rgba(var(--ubx-kind-chat-rgb), 0.95); }
.recap-pin.pin-memory { right: 35%; bottom: 18%; background: #f1c76f; }

.ubx-recap-preview-card {
    position: absolute;
    z-index: 5;
    display: grid;
    gap: 0.24rem;
    width: min(22rem, 45%);
    padding: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.1rem;
    background: rgba(9, 13, 17, 0.72);
    box-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    opacity: 0;
    filter: saturate(0.8);
    transform: translateY(1rem) translateZ(0) scale(0.94);
    transition:
        opacity 260ms ease,
        filter 260ms ease,
        transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-recap-preview-card small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-recap-preview-card strong {
    color: var(--ubx-text);
}

.ubx-recap-preview-card span {
    color: var(--ubx-muted);
    font-size: 0.84rem;
}

.ubx-recap-preview-card.card-map { top: 2.2rem; left: 2.2rem; }
.ubx-recap-preview-card.card-place { top: 6rem; right: 2.4rem; }
.ubx-recap-preview-card.card-list { left: 14%; bottom: 2.8rem; }
.ubx-recap-preview-card.card-team { right: 14%; bottom: 3.2rem; }
.ubx-recap-preview-card.card-memory { top: 42%; left: 50%; transform: translate(-50%, 1rem) translateZ(0) scale(0.94); }

.ubx-premiere-recap-stage[data-recap-scene="map"] .card-map,
.ubx-premiere-recap-stage[data-recap-scene="place"] .card-place,
.ubx-premiere-recap-stage[data-recap-scene="list"] .card-list,
.ubx-premiere-recap-stage[data-recap-scene="team"] .card-team,
.ubx-premiere-recap-stage[data-recap-scene="memory"] .card-memory {
    opacity: 1;
    filter: none;
    transform: translateY(0) translateZ(90px) scale(1);
}

.ubx-premiere-recap-stage[data-recap-scene="memory"] .card-memory {
    transform: translate(-50%, 0) translateZ(110px) scale(1);
}

.ubx-premiere-recap-stage[data-recap-scene="place"] .pin-place,
.ubx-premiere-recap-stage[data-recap-scene="list"] .pin-list,
.ubx-premiere-recap-stage[data-recap-scene="team"] .pin-team,
.ubx-premiere-recap-stage[data-recap-scene="memory"] .pin-memory,
.ubx-premiere-recap-stage[data-recap-scene="map"] .pin-map {
    transform: scale(1.22);
    filter: saturate(1.2);
    box-shadow:
        0 1.2rem 2.4rem rgba(0, 0, 0, 0.32),
        0 0 0 0.75rem rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-recap-caption {
    display: grid;
    gap: 0.18rem;
    padding: 0 1rem 1rem;
}

.ubx-recap-caption small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-recap-caption strong {
    color: var(--ubx-text);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 950;
    line-height: 1;
}

.ubx-recap-caption span {
    color: var(--ubx-muted);
}

.ubx-experience-film {
    position: relative;
    overflow: hidden;
    padding-top: clamp(5rem, 8vw, 9rem);
    padding-bottom: clamp(5rem, 8vw, 9rem);
}

.ubx-experience-film::before {
    position: absolute;
    inset: 5% -12% auto;
    height: 42rem;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 20% 35%, rgba(var(--ubx-primary-rgb), 0.16), transparent 23rem),
        radial-gradient(circle at 82% 28%, rgba(92, 125, 146, 0.18), transparent 21rem);
    filter: blur(12px);
}

.ubx-experience-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(18rem, 0.82fr) minmax(32rem, 1.35fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.ubx-experience-copy {
    position: relative;
    z-index: 4;
}

.ubx-experience-current {
    display: grid;
    gap: 0.45rem;
    margin: 1.7rem 0 1rem;
    padding: 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--ubx-primary-rgb), 0.13), transparent 11rem),
        rgba(255, 255, 255, 0.055);
    box-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px);
}

.ubx-experience-current small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ubx-experience-current strong {
    color: var(--ubx-text);
    font-size: clamp(1.08rem, 2vw, 1.35rem);
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.ubx-experience-current span {
    color: var(--ubx-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

.ubx-experience-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.58rem;
    margin: 1.35rem 0 1rem;
}

.ubx-experience-presets button {
    display: grid;
    gap: 0.48rem;
    align-content: start;
    min-height: 7.2rem;
    padding: 0.82rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.05rem;
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--ubx-primary-rgb), 0.09), transparent 7rem),
        rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        transform 190ms ease,
        border-color 190ms ease,
        background 190ms ease,
        box-shadow 190ms ease;
}

.ubx-experience-presets button:hover,
.ubx-experience-presets button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.35);
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--ubx-primary-rgb), 0.18), transparent 8rem),
        rgba(var(--ubx-primary-rgb), 0.07);
    box-shadow:
        0 1rem 2.4rem rgba(0, 0, 0, 0.15),
        0 0 1.4rem rgba(var(--ubx-primary-rgb), 0.07);
    transform: translateY(-0.12rem);
}

.ubx-experience-presets svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--ubx-primary);
}

.ubx-experience-presets span,
.ubx-experience-presets strong,
.ubx-experience-presets small {
    display: block;
}

.ubx-experience-presets strong {
    font-size: 0.86rem;
    font-weight: 950;
}

.ubx-experience-presets small {
    margin-top: 0.1rem;
    color: currentColor;
    opacity: 0.64;
    font-size: 0.66rem;
    line-height: 1.25;
}

.ubx-experience-controls {
    display: grid;
    gap: 0.58rem;
}

.ubx-experience-controls button {
    display: grid;
    grid-template-columns: 2.15rem 1fr;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.72rem 0.82rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;
}

.ubx-experience-controls button:hover,
.ubx-experience-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    background: rgba(var(--ubx-primary-rgb), 0.09);
    box-shadow:
        0 0.95rem 2.1rem rgba(0, 0, 0, 0.16),
        0 0 1.4rem rgba(var(--ubx-primary-rgb), 0.07);
    transform: translateX(0.18rem);
}

.ubx-experience-controls b {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    color: #07140d;
    font-size: 0.72rem;
    font-weight: 950;
    border-radius: 0.8rem;
    background: var(--ubx-primary);
}

.ubx-experience-controls span,
.ubx-experience-controls strong,
.ubx-experience-controls small {
    display: block;
}

.ubx-experience-controls strong {
    font-size: 0.92rem;
    font-weight: 950;
}

.ubx-experience-controls small {
    margin-top: 0.08rem;
    color: currentColor;
    opacity: 0.62;
    font-size: 0.72rem;
}

.ubx-experience-stage {
    position: relative;
    min-height: clamp(39rem, 58vw, 52rem);
    perspective: 1700px;
}

.ubx-experience-depth {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2rem;
    pointer-events: none;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent),
        rgba(var(--ubx-primary-rgb), 0.035);
    transform-style: preserve-3d;
}

.ubx-experience-depth.depth-one {
    inset: 6% 8% 9% 4%;
    transform: rotateX(59deg) rotateZ(-7deg) translateZ(-5rem);
}

.ubx-experience-depth.depth-two {
    inset: 12% 1% 3% 14%;
    transform: rotateX(61deg) rotateZ(5deg) translateZ(-8rem);
}

.ubx-experience-browser {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 24% 16%, rgba(var(--ubx-primary-rgb), 0.13), transparent 16rem),
        linear-gradient(145deg, rgba(23, 34, 32, 0.96), rgba(9, 14, 15, 0.98));
    box-shadow:
        0 3rem 7rem rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform:
        perspective(1300px)
        rotateX(7deg)
        rotateY(-7deg)
        rotateZ(1deg);
    transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-experience-camera-rail {
    position: absolute;
    z-index: 24;
    top: 4.5rem;
    left: 50%;
    display: flex;
    gap: 0.36rem;
    align-items: center;
    padding: 0.38rem;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    background: rgba(2, 6, 6, 0.42);
    box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    transform: translateX(-50%) translateZ(9rem);
}

.ubx-experience-camera-rail i {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    transition: width 360ms ease, background 260ms ease, box-shadow 260ms ease;
}

.ubx-experience-stage[data-experience-scene="map"] .ubx-experience-camera-rail i:nth-child(1),
.ubx-experience-stage[data-experience-scene="place"] .ubx-experience-camera-rail i:nth-child(2),
.ubx-experience-stage[data-experience-scene="planning"] .ubx-experience-camera-rail i:nth-child(3),
.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-camera-rail i:nth-child(4),
.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-camera-rail i:nth-child(5) {
    width: 1.65rem;
    background: var(--ubx-primary);
    box-shadow: 0 0 1.1rem rgba(var(--ubx-primary-rgb), 0.42);
}

.ubx-experience-stage[data-experience-scene="place"] .ubx-experience-browser {
    transform: perspective(1300px) rotateX(6deg) rotateY(-2deg) translateY(-0.4rem);
}

.ubx-experience-stage[data-experience-scene="planning"] .ubx-experience-browser {
    transform: perspective(1300px) rotateX(8deg) rotateY(-9deg) rotateZ(-0.5deg);
}

.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-browser {
    transform: perspective(1300px) rotateX(6deg) rotateY(5deg) rotateZ(0.8deg);
}

.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-browser {
    transform: perspective(1300px) rotateX(5deg) rotateY(-5deg) translateY(-0.2rem) scale(0.985);
}

.ubx-experience-browserbar {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    gap: 0.55rem;
    align-items: center;
    height: 3.6rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(18px);
}

.ubx-experience-browserbar span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.ubx-experience-browserbar strong {
    margin-left: 0.6rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
}

.ubx-experience-browserbar em {
    display: inline-flex;
    gap: 0.36rem;
    align-items: center;
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-experience-browserbar em i {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 1rem rgba(var(--ubx-primary-rgb), 0.45);
}

.ubx-experience-app-nav {
    position: absolute;
    z-index: 18;
    top: 4.65rem;
    left: 1.15rem;
    display: grid;
    gap: 0.42rem;
    width: 11rem;
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--ubx-primary-rgb), 0.12), transparent 7rem),
        rgba(3, 7, 7, 0.62);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
    transform: translateZ(7.5rem);
}

.ubx-experience-app-nav strong {
    margin-bottom: 0.2rem;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 950;
}

.ubx-experience-app-nav span {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
    padding: 0.46rem 0.52rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.76rem;
    font-weight: 850;
    border: 1px solid transparent;
    border-radius: 0.76rem;
    background: rgba(255, 255, 255, 0.035);
    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease,
        transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-experience-app-nav svg {
    width: 0.92rem;
    height: 0.92rem;
    color: var(--ubx-primary);
}

.ubx-experience-stage[data-experience-scene="map"] .ubx-experience-app-nav .nav-map,
.ubx-experience-stage[data-experience-scene="place"] .ubx-experience-app-nav .nav-place,
.ubx-experience-stage[data-experience-scene="planning"] .ubx-experience-app-nav .nav-list,
.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-app-nav .nav-team,
.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-app-nav .nav-profile {
    color: #07140d;
    border-color: rgba(var(--ubx-primary-rgb), 0.58);
    background: var(--ubx-primary);
    box-shadow: 0 0.85rem 1.8rem rgba(var(--ubx-primary-rgb), 0.14);
    transform: translateX(0.22rem);
}

.ubx-experience-stage[data-experience-scene="map"] .ubx-experience-app-nav .nav-map svg,
.ubx-experience-stage[data-experience-scene="place"] .ubx-experience-app-nav .nav-place svg,
.ubx-experience-stage[data-experience-scene="planning"] .ubx-experience-app-nav .nav-list svg,
.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-app-nav .nav-team svg,
.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-app-nav .nav-profile svg {
    color: #07140d;
}

.ubx-experience-film-clapper {
    position: absolute;
    z-index: 26;
    top: 4.45rem;
    right: 1.2rem;
    display: grid;
    gap: 0.14rem;
    width: 12.5rem;
    padding: 0.72rem 0.78rem;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 0.5rem, transparent 0.5rem 1rem),
        rgba(3, 7, 7, 0.68);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    transform: translateZ(12rem) rotateZ(1.5deg);
}

.ubx-experience-film-clapper small {
    color: var(--ubx-primary);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ubx-experience-film-clapper strong {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 950;
}

.ubx-experience-film-clapper span {
    display: block;
    height: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.ubx-experience-film-clapper span::before {
    display: block;
    width: 45%;
    height: 100%;
    content: "";
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--ubx-primary), transparent);
    animation: ubx-experience-clapper-progress 6.2s linear infinite;
}

.ubx-experience-map {
    position: absolute;
    inset: 4.5rem 1rem 1rem 1rem;
    overflow: hidden;
    border-radius: 1.45rem;
    background:
        linear-gradient(28deg, rgba(53, 71, 55, 0.55) 0 18%, transparent 18% 100%),
        linear-gradient(148deg, rgba(33, 50, 60, 0.62) 0 26%, transparent 26% 100%),
        linear-gradient(120deg, #25342f, #1b2928 48%, #152022);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
    transform: translateZ(0);
}

.ubx-experience-map::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at var(--map-focus-x, 38%) var(--map-focus-y, 42%), transparent 0 8rem, rgba(0, 0, 0, 0.08) 16rem, rgba(0, 0, 0, 0.22) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 42%);
    transition: background 620ms ease;
}

.ubx-experience-stage[data-experience-scene="place"] .ubx-experience-map { --map-focus-x: 52%; --map-focus-y: 51%; }
.ubx-experience-stage[data-experience-scene="planning"] .ubx-experience-map { --map-focus-x: 73%; --map-focus-y: 25%; }
.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-map { --map-focus-x: 80%; --map-focus-y: 73%; }
.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-map { --map-focus-x: 62%; --map-focus-y: 35%; }

.ubx-experience-stage[data-experience-preset="parkour"] .ubx-experience-map {
    background:
        linear-gradient(28deg, rgba(78, 92, 67, 0.54) 0 18%, transparent 18% 100%),
        linear-gradient(148deg, rgba(43, 61, 69, 0.68) 0 26%, transparent 26% 100%),
        linear-gradient(120deg, #2f3a31, #202f30 48%, #172324);
}

.ubx-experience-stage[data-experience-preset="team"] .ubx-experience-map {
    background:
        linear-gradient(28deg, rgba(54, 75, 68, 0.58) 0 18%, transparent 18% 100%),
        linear-gradient(148deg, rgba(59, 66, 82, 0.62) 0 26%, transparent 26% 100%),
        linear-gradient(120deg, #253832, #1a292d 48%, #151f25);
}

.ubx-experience-map::before {
    position: absolute;
    inset: -12%;
    content: "";
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 5rem 5rem;
    opacity: 0.38;
    transform: rotate(-6deg);
}

.exp-map-tile,
.exp-road,
.exp-river,
.exp-route,
.exp-pin,
.ubx-experience-search,
.ubx-experience-place,
.ubx-experience-list,
.ubx-experience-chat,
.ubx-experience-phone,
.ubx-experience-log,
.ubx-experience-cue {
    position: absolute;
    z-index: 3;
}

.exp-map-tile {
    border-radius: 1.5rem;
    background: rgba(var(--ubx-primary-rgb), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--ubx-primary-rgb), 0.12);
}

.tile-a { top: 14%; left: 12%; width: 18%; height: 17%; }
.tile-b { top: 45%; left: 52%; width: 28%; height: 18%; }
.tile-c { right: 12%; bottom: 12%; width: 18%; height: 15%; }

.exp-road {
    height: 0.36rem;
    border-radius: 999px;
    background: rgba(228, 219, 184, 0.3);
    box-shadow: 0 0 1rem rgba(228, 219, 184, 0.06);
    transform-origin: left center;
}

.exp-road.road-a { top: 30%; left: 7%; width: 72%; transform: rotate(11deg); }
.exp-road.road-b { top: 62%; left: 16%; width: 62%; transform: rotate(-18deg); }
.exp-river {
    top: 18%;
    right: 14%;
    width: 9rem;
    height: 24rem;
    border-radius: 50%;
    border-left: 0.65rem solid rgba(99, 135, 157, 0.26);
    transform: rotate(18deg);
}

.exp-route {
    top: 38%;
    left: 29%;
    width: 31%;
    height: 25%;
    border: 2px dashed rgba(var(--ubx-primary-rgb), 0.72);
    border-bottom: 0;
    border-left: 0;
    border-radius: 0 4rem 0 0;
    opacity: 0;
    transform: translateZ(2rem);
    transition: opacity 360ms ease;
}

.exp-pin {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    color: #07140d;
    font-size: 0.72rem;
    font-weight: 950;
    border: 0;
    border-radius: 999px 999px 999px 0.25rem;
    background: var(--ubx-primary);
    box-shadow: 0 0.9rem 1.9rem rgba(0, 0, 0, 0.24);
    transform: rotate(-45deg) translateZ(2rem);
    transition:
        transform 360ms ease,
        opacity 260ms ease,
        filter 260ms ease;
}

.exp-pin::after {
    position: absolute;
    inset: -0.42rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.42);
    border-radius: inherit;
    pointer-events: none;
    content: "";
    opacity: 0;
    transform: scale(0.74);
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.exp-pin:hover,
.exp-pin:focus-visible,
.exp-pin.is-active {
    outline: none;
    filter: drop-shadow(0 0 1.25rem rgba(var(--ubx-primary-rgb), 0.35));
}

.exp-pin:hover::after,
.exp-pin:focus-visible::after,
.exp-pin.is-active::after {
    opacity: 1;
    transform: scale(1);
}

.exp-pin > * {
    transform: rotate(45deg);
}

.exp-pin.pin-a { top: 32%; left: 31%; }
.exp-pin.pin-b { top: 50%; left: 50%; }
.exp-pin.pin-c { top: 23%; right: 25%; }
.exp-pin.pin-d { right: 18%; bottom: 24%; }

.ubx-experience-search,
.ubx-experience-place,
.ubx-experience-list,
.ubx-experience-chat,
.ubx-experience-log {
    display: grid;
    gap: 0.38rem;
    padding: 0.86rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.1rem;
    background: rgba(3, 7, 7, 0.66);
    box-shadow: 0 1.1rem 2.8rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    transition:
        opacity 320ms ease,
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 320ms ease;
}

.ubx-experience-scenario-card {
    position: absolute;
    z-index: 5;
    top: 5rem;
    right: 1.45rem;
    display: grid;
    gap: 0.34rem;
    width: 18rem;
    padding: 0.88rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--ubx-primary-rgb), 0.15), transparent 9rem),
        rgba(3, 7, 7, 0.62);
    box-shadow: 0 1.1rem 2.8rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
    transform: translateZ(4rem);
    transition:
        opacity 280ms ease,
        transform 420ms ease;
}

.ubx-experience-scenario-card small {
    color: var(--ubx-primary);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-experience-scenario-card strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
}

.ubx-experience-scenario-card span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.76rem;
    line-height: 1.45;
}

.ubx-experience-director-card {
    position: absolute;
    z-index: 11;
    top: 18.9rem;
    left: 1.45rem;
    display: grid;
    gap: 0.4rem;
    width: 19rem;
    padding: 0.92rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.2);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--ubx-primary-rgb), 0.18), transparent 9rem),
        rgba(3, 7, 7, 0.68);
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
    transform: translateZ(8rem);
    transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 260ms ease, opacity 260ms ease;
}

.ubx-experience-director-card small {
    color: var(--ubx-primary);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ubx-experience-director-card strong {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.ubx-experience-director-card span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.76rem;
    line-height: 1.45;
}

.ubx-experience-director-card button {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    justify-self: start;
    margin-top: 0.18rem;
    padding: 0.46rem 0.68rem;
    color: #07140d;
    font-size: 0.74rem;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0.8rem 1.8rem rgba(var(--ubx-primary-rgb), 0.18);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.ubx-experience-director-card button:hover {
    transform: translateY(-0.08rem);
    box-shadow: 0 1rem 2.1rem rgba(var(--ubx-primary-rgb), 0.24);
}

.ubx-experience-metrics {
    position: absolute;
    z-index: 8;
    top: 14.2rem;
    right: 1.45rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.44rem;
    width: 18rem;
    transform: translateZ(5rem);
}

.ubx-experience-metrics span {
    display: grid;
    gap: 0.08rem;
    min-height: 4.3rem;
    padding: 0.62rem 0.5rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.95rem;
    background: rgba(4, 8, 8, 0.58);
    box-shadow:
        0 0.8rem 2rem rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    animation: ubx-experience-metric-float 4.8s ease-in-out infinite;
}

.ubx-experience-metrics span:nth-child(2) {
    animation-delay: -1.4s;
}

.ubx-experience-metrics span:nth-child(3) {
    animation-delay: -2.8s;
}

.ubx-experience-metrics strong {
    color: #fff;
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1;
}

.ubx-experience-metrics small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@keyframes ubx-experience-metric-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.18rem);
    }
}

.ubx-experience-action-dock {
    position: absolute;
    z-index: 9;
    right: 1.45rem;
    bottom: 1.45rem;
    left: 1.45rem;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.08rem;
    background: rgba(4, 8, 8, 0.62);
    box-shadow:
        0 1rem 2.7rem rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    transform: translateZ(7rem);
}

.ubx-experience-action-dock button {
    display: inline-flex;
    gap: 0.34rem;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.42rem 0.62rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ubx-experience-action-dock button:hover,
.ubx-experience-action-dock button:focus-visible,
.ubx-experience-action-dock button.is-active {
    color: #07140d;
    border-color: rgba(var(--ubx-primary-rgb), 0.55);
    outline: none;
    background: var(--ubx-primary);
    box-shadow: 0 0.55rem 1.4rem rgba(var(--ubx-primary-rgb), 0.18);
    transform: translateY(-0.08rem);
}

.ubx-experience-action-dock svg {
    width: 0.95rem;
    height: 0.95rem;
}

.ubx-experience-shot-overlay {
    position: absolute;
    z-index: 10;
    left: 1.45rem;
    bottom: 8.15rem;
    display: grid;
    gap: 0.18rem;
    width: min(18rem, calc(100% - 2.9rem));
    padding: 0.82rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.1rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(4, 8, 8, 0.64);
    box-shadow:
        0 1rem 2.6rem rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    transform: translateZ(8rem);
}

.ubx-experience-shot-overlay small {
    color: var(--ubx-primary);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ubx-experience-shot-overlay strong {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.ubx-experience-shot-overlay span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
}

.ubx-experience-search small,
.ubx-experience-place small,
.ubx-experience-list small,
.ubx-experience-chat small,
.ubx-experience-log small {
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ubx-experience-search strong,
.ubx-experience-place strong,
.ubx-experience-list strong,
.ubx-experience-log strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.05;
}

.ubx-experience-search span,
.ubx-experience-place span,
.ubx-experience-list span,
.ubx-experience-log em {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.76rem;
    font-style: normal;
}

.ubx-experience-search {
    top: 5rem;
    left: 1.45rem;
    width: 17rem;
    transform: translateZ(4rem);
}

.ubx-experience-viewport-hud {
    position: absolute;
    z-index: 7;
    inset: 4.9rem 1.4rem 6.2rem 1.4rem;
    pointer-events: none;
    opacity: 0.72;
    transform: translateZ(6rem);
    transition: opacity 260ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-experience-layer-stack {
    position: absolute;
    z-index: 14;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
}

.ubx-experience-layer-stack article {
    position: absolute;
    display: grid;
    gap: 0.08rem;
    min-width: 9.4rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.028)),
        rgba(4, 8, 8, 0.68);
    box-shadow:
        0 1.2rem 2.6rem rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px);
    opacity: 0.18;
    filter: saturate(0.78);
    transform: translate3d(0, 0, 3rem) scale(0.9);
    transition:
        opacity 300ms ease,
        filter 300ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-experience-layer-stack svg {
    width: 1rem;
    height: 1rem;
    color: var(--ubx-primary);
}

.ubx-experience-layer-stack strong {
    color: #fff;
    font-size: 0.86rem;
    font-weight: 950;
}

.ubx-experience-layer-stack span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.68rem;
}

.ubx-experience-layer-stack .layer-map { top: 39%; left: 14rem; }
.ubx-experience-layer-stack .layer-detail { right: 20.5rem; bottom: 12.4rem; }
.ubx-experience-layer-stack .layer-plan { top: 10rem; right: 20.5rem; }
.ubx-experience-layer-stack .layer-live { right: 11.4rem; bottom: 15.2rem; }
.ubx-experience-layer-stack .layer-profile { right: 20rem; bottom: 7rem; }

.ubx-experience-stage[data-experience-scene="map"] .layer-map,
.ubx-experience-stage[data-experience-scene="place"] .layer-detail,
.ubx-experience-stage[data-experience-scene="planning"] .layer-plan,
.ubx-experience-stage[data-experience-scene="team"] .layer-live,
.ubx-experience-stage[data-experience-scene="memory"] .layer-profile,
.ubx-experience-layer-stack article.is-active {
    opacity: 1;
    filter: none;
    border-color: rgba(var(--ubx-primary-rgb), 0.35);
    box-shadow:
        0 1.5rem 3.4rem rgba(0, 0, 0, 0.3),
        0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translate3d(0, -0.8rem, 13rem) scale(1.04);
}

.hud-corner {
    position: absolute;
    width: 2.7rem;
    height: 2.7rem;
    border-color: rgba(var(--ubx-primary-rgb), 0.5);
    filter: drop-shadow(0 0 0.8rem rgba(var(--ubx-primary-rgb), 0.24));
}

.hud-corner.tl {
    top: 1.2rem;
    left: 1.2rem;
    border-top: 2px solid;
    border-left: 2px solid;
}

.hud-corner.tr {
    top: 1.2rem;
    right: 1.2rem;
    border-top: 2px solid;
    border-right: 2px solid;
}

.hud-corner.bl {
    bottom: 1.2rem;
    left: 1.2rem;
    border-bottom: 2px solid;
    border-left: 2px solid;
}

.hud-corner.br {
    right: 1.2rem;
    bottom: 1.2rem;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.hud-scan {
    position: absolute;
    top: 18%;
    right: 2rem;
    left: 2rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(var(--ubx-primary-rgb), 0.82), transparent);
    box-shadow: 0 0 1.2rem rgba(var(--ubx-primary-rgb), 0.34);
    animation: ubx-experience-hud-scan 5.4s ease-in-out infinite;
}

.ubx-experience-demo-cursor {
    position: absolute;
    z-index: 23;
    top: 44%;
    left: 38%;
    display: grid;
    gap: 0.2rem;
    place-items: center;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateZ(10rem);
    transition: top 650ms cubic-bezier(0.2, 0.8, 0.2, 1), left 650ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease;
}

.ubx-experience-demo-cursor span {
    width: 1rem;
    height: 1rem;
    border: 2px solid #fff;
    border-right: 0;
    border-bottom: 0;
    filter: drop-shadow(0 0.45rem 0.8rem rgba(0, 0, 0, 0.35));
    transform: rotate(-45deg);
}

.ubx-experience-demo-cursor small {
    padding: 0.2rem 0.35rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
}

.ubx-experience-stage[data-experience-scene="map"] .ubx-experience-demo-cursor { top: 42%; left: 35%; }
.ubx-experience-stage[data-experience-scene="place"] .ubx-experience-demo-cursor { top: 54%; left: 52%; }
.ubx-experience-stage[data-experience-scene="planning"] .ubx-experience-demo-cursor { top: 32%; left: 72%; }
.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-demo-cursor { top: 74%; left: 79%; }
.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-demo-cursor { top: 43%; left: 61%; }

@keyframes ubx-experience-hud-scan {
    0%,
    100% {
        opacity: 0;
        transform: translateY(0);
    }

    14%,
    80% {
        opacity: 1;
    }

    50% {
        transform: translateY(20rem);
    }
}

.ubx-experience-search div,
.ubx-experience-place div {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ubx-experience-search b,
.ubx-experience-place b {
    padding: 0.24rem 0.45rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.66rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-experience-place {
    right: 1.45rem;
    bottom: 5.4rem;
    width: 19.5rem;
    transform: translate3d(0, 0, 5rem);
}

.exp-photo-row {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 0.35rem;
    height: 4.4rem;
}

.exp-photo-row i {
    border-radius: 0.72rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent),
        radial-gradient(circle at 30% 30%, rgba(var(--ubx-primary-rgb), 0.42), transparent 62%),
        #20302d;
}

.ubx-experience-list {
    top: 8.2rem;
    right: 2.15rem;
    width: 16.5rem;
    opacity: 0;
    transform: translate3d(1.2rem, 1rem, 3rem) rotateY(-8deg);
}

.ubx-experience-list p {
    display: grid;
    gap: 0.38rem;
    margin: 0;
}

.ubx-experience-list i {
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.35);
}

.ubx-experience-list i:nth-child(2) { width: 72%; }
.ubx-experience-list i:nth-child(3) { width: 48%; }

.ubx-experience-exploded-ui {
    position: absolute;
    z-index: 12;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
}

.ubx-experience-exploded-ui .ui-chip {
    position: absolute;
    display: grid;
    gap: 0.1rem;
    min-width: 8.2rem;
    padding: 0.68rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1rem;
    background: rgba(4, 8, 8, 0.66);
    box-shadow: 0 1.1rem 2.4rem rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    opacity: 0 !important;
    transform: translate3d(0, 1rem, 4rem) scale(0.92);
    transition: opacity 320ms ease, transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 260ms ease;
}

.ubx-experience-exploded-ui .ui-chip svg {
    width: 1rem;
    height: 1rem;
    color: var(--ubx-primary);
}

.ubx-experience-exploded-ui .ui-chip strong {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 950;
}

.ubx-experience-exploded-ui .ui-chip span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.66rem;
}

.chip-filter { top: 11.5rem; left: 19.2rem; }
.chip-media { right: 21.4rem; bottom: 13.3rem; }
.chip-list { top: 13rem; right: 20rem; }
.chip-live { right: 12.5rem; bottom: 17.8rem; }
.chip-xp { right: 21rem; bottom: 8rem; }

.ubx-experience-stage[data-experience-scene="map"] .chip-filter,
.ubx-experience-stage[data-experience-scene="place"] .chip-media,
.ubx-experience-stage[data-experience-scene="planning"] .chip-list,
.ubx-experience-stage[data-experience-scene="team"] .chip-live,
.ubx-experience-stage[data-experience-scene="memory"] .chip-xp {
    opacity: 1 !important;
    border-color: rgba(var(--ubx-primary-rgb), 0.35);
    transform: translate3d(0, -0.35rem, 10rem) scale(1);
    animation: ubx-experience-chip-float 4.4s ease-in-out infinite;
}

.ubx-experience-scene-ribbons {
    position: absolute;
    z-index: 22;
    top: 50%;
    left: 50%;
    display: grid;
    gap: 0.4rem;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 12rem);
}

.ubx-experience-scene-ribbons span {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    width: max-content;
    max-width: min(24rem, 58vw);
    padding: 0.52rem 0.7rem;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.74rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(2, 6, 6, 0.48);
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(0.8rem) scale(0.94);
    transition:
        opacity 280ms ease,
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-experience-scene-ribbons b {
    color: var(--ubx-primary);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

.ubx-experience-stage[data-experience-scene="map"] .ribbon-map,
.ubx-experience-stage[data-experience-scene="place"] .ribbon-place,
.ubx-experience-stage[data-experience-scene="planning"] .ribbon-plan,
.ubx-experience-stage[data-experience-scene="team"] .ribbon-team,
.ubx-experience-stage[data-experience-scene="memory"] .ribbon-memory,
.ubx-experience-scene-ribbons span.is-active {
    color: #fff;
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    background: rgba(var(--ubx-primary-rgb), 0.12);
    opacity: 1;
    transform: translateY(0) scale(1);
}

@keyframes ubx-experience-chip-float {
    0%,
    100% {
        transform: translate3d(0, -0.35rem, 10rem) scale(1);
    }

    50% {
        transform: translate3d(0, -0.75rem, 10rem) scale(1.018);
    }
}

@keyframes ubx-experience-clapper-progress {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(240%);
    }
}

.ubx-experience-chat {
    right: 2rem;
    bottom: 4.2rem;
    width: 17rem;
    opacity: 0;
    transform: translate3d(2rem, 0.8rem, 3rem) rotateY(-10deg);
}

.ubx-experience-chat p {
    max-width: 82%;
    margin: 0;
    padding: 0.42rem 0.55rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.72rem;
    border-radius: 0.8rem 0.8rem 0.8rem 0.18rem;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-experience-chat p.right {
    justify-self: end;
    border-radius: 0.8rem 0.8rem 0.18rem 0.8rem;
    background: rgba(var(--ubx-primary-rgb), 0.22);
}

.ubx-experience-phone {
    right: 19rem;
    bottom: 2rem;
    width: 9.8rem;
    height: 18rem;
    padding: 1rem 0.65rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.75rem;
    background: linear-gradient(145deg, rgba(18, 26, 25, 0.94), rgba(4, 7, 8, 0.98));
    box-shadow: 0 1.9rem 4rem rgba(0, 0, 0, 0.32);
    opacity: 0;
    transform: translate3d(2.5rem, 2rem, 6rem) rotateY(-18deg) rotateZ(3deg);
    transition:
        opacity 340ms ease,
        transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-experience-phone > span {
    position: absolute;
    top: 0.48rem;
    left: 50%;
    width: 3rem;
    height: 0.32rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    transform: translateX(-50%);
}

.ubx-experience-phone strong {
    display: block;
    margin-bottom: 0.45rem;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
}

.ubx-experience-phone div {
    position: relative;
    overflow: hidden;
    height: 14.5rem;
    border-radius: 1.2rem;
    background:
        linear-gradient(35deg, rgba(255, 255, 255, 0.08) 0 20%, transparent 20% 100%),
        linear-gradient(145deg, #263b35, #162321);
}

.ubx-experience-phone .building,
.ubx-experience-phone .person,
.ubx-experience-phone .marker {
    position: absolute;
}

.ubx-experience-phone .building {
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.12);
}

.ubx-experience-phone .building.a { top: 18%; left: 16%; width: 2.2rem; height: 3.4rem; }
.ubx-experience-phone .building.b { top: 38%; right: 13%; width: 2.7rem; height: 2rem; }
.ubx-experience-phone .building.c { bottom: 14%; left: 23%; width: 3.3rem; height: 2.3rem; }

.ubx-experience-phone .person,
.ubx-experience-phone .marker {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    color: #07140d;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-experience-phone .person.a { top: 24%; right: 27%; }
.ubx-experience-phone .person.b { top: 55%; left: 22%; }
.ubx-experience-phone .person.c { right: 22%; bottom: 19%; opacity: 0.5; }
.ubx-experience-phone .marker.camera { top: 48%; right: 30%; background: #f0c86a; }

.ubx-experience-log {
    right: 2rem;
    bottom: 4rem;
    grid-template-columns: 3rem 1fr;
    width: 20rem;
    opacity: 0;
    transform: translate3d(2rem, 1rem, 4rem);
}

.ubx-experience-log > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border-radius: 1rem;
    background: var(--ubx-primary);
}

.ubx-experience-cue {
    left: 1.4rem;
    bottom: 4.65rem;
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    max-width: min(28rem, calc(100% - 2.8rem));
    padding: 0.62rem 0.78rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.76rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(16px);
}

.ubx-experience-timeline {
    position: absolute;
    right: 1.6rem;
    bottom: -1.15rem;
    left: 1.6rem;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.45rem;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 1.1rem;
    background: rgba(4, 7, 8, 0.74);
    box-shadow: 0 1rem 2.7rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.ubx-experience-timeline span {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    padding: 0.46rem 0.32rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 900;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.045);
    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.ubx-experience-timeline span.is-active {
    color: #07140d;
    background: var(--ubx-primary);
    transform: translateY(-0.12rem);
}

.ubx-experience-timeline span.is-active b {
    animation: ubx-experience-step-pulse 1.6s ease-in-out infinite;
}

.ubx-experience-progress {
    position: absolute;
    right: 2.1rem;
    bottom: -1.72rem;
    left: 2.1rem;
    z-index: 7;
    overflow: hidden;
    height: 0.24rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-experience-progress i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, var(--ubx-primary), rgba(255, 255, 255, 0.86)),
        var(--ubx-primary);
    box-shadow: 0 0 1.2rem rgba(var(--ubx-primary-rgb), 0.32);
    transform: scaleX(0.2);
    transform-origin: left center;
    transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes ubx-experience-step-pulse {
    0%,
    100% {
        box-shadow: none;
    }

    50% {
        box-shadow: 0 0 1.1rem rgba(7, 20, 13, 0.2);
    }
}

.ubx-experience-stage[data-experience-scene="map"] .ubx-experience-search,
.ubx-experience-stage[data-experience-scene="place"] .ubx-experience-place,
.ubx-experience-stage[data-experience-scene="planning"] .ubx-experience-list,
.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-chat,
.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-phone,
.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-log {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 7rem);
}

.ubx-experience-stage[data-experience-scene="place"] .ubx-experience-director-card {
    transform: translate3d(0.4rem, -0.35rem, 9rem);
}

.ubx-experience-stage[data-experience-scene="planning"] .ubx-experience-director-card {
    transform: translate3d(0.8rem, 0.1rem, 9rem);
}

.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-director-card {
    transform: translate3d(1.2rem, 0.5rem, 9rem);
}

.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-director-card {
    transform: translate3d(0.4rem, 0.7rem, 9rem);
}

.ubx-experience-stage[data-experience-scene="map"] .exp-pin.pin-a,
.ubx-experience-stage[data-experience-scene="place"] .exp-pin.pin-b,
.ubx-experience-stage[data-experience-scene="planning"] .exp-pin.pin-c,
.ubx-experience-stage[data-experience-scene="team"] .exp-pin.pin-d,
.ubx-experience-stage[data-experience-scene="memory"] .exp-pin.pin-c {
    filter: drop-shadow(0 0 1.15rem rgba(var(--ubx-primary-rgb), 0.32));
    transform: rotate(-45deg) translateY(-0.4rem) translateZ(7rem) scale(1.12);
}

.ubx-experience-stage[data-experience-scene="planning"] .exp-route,
.ubx-experience-stage[data-experience-scene="team"] .exp-route,
.ubx-experience-stage[data-experience-scene="memory"] .exp-route {
    opacity: 1;
}

.ubx-experience-stage[data-experience-scene="place"] .ubx-experience-search,
.ubx-experience-stage[data-experience-scene="planning"] .ubx-experience-search,
.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-search,
.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-search {
    opacity: 0.42;
    filter: blur(0.5px);
    transform: translate3d(-0.8rem, -0.2rem, 2rem) scale(0.96);
}

.ubx-experience-stage[data-experience-scene="planning"] .ubx-experience-place,
.ubx-experience-stage[data-experience-scene="team"] .ubx-experience-place,
.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-place {
    opacity: 0.46;
    transform: translate3d(0.8rem, 0.4rem, 2rem) scale(0.95);
}

.ubx-experience-stage[data-experience-scene="memory"] .ubx-experience-list {
    opacity: 0.38;
    transform: translate3d(0.6rem, -0.4rem, 2rem) scale(0.94);
}

.ubx-scenario-mixer {
    position: relative;
    overflow: hidden;
    padding-top: clamp(4rem, 7vw, 7rem);
    padding-bottom: clamp(4rem, 7vw, 7rem);
}

.ubx-scenario-mixer::before {
    position: absolute;
    inset: 12% -12% auto;
    height: 38rem;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 24% 28%, rgba(var(--ubx-primary-rgb), 0.16), transparent 23rem),
        radial-gradient(circle at 82% 42%, rgba(var(--ubx-kind-chat-rgb), 0.12), transparent 25rem);
    filter: blur(12px);
}

.ubx-scenario-mixer-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(18rem, 0.72fr) minmax(34rem, 1.28fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
}

.ubx-scenario-mixer-copy {
    position: relative;
    z-index: 3;
}

.ubx-scenario-mixer-controls {
    display: grid;
    gap: 0.72rem;
    margin-top: 1.45rem;
}

.ubx-scenario-mixer-controls button {
    display: grid;
    grid-template-columns: 2.7rem 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.86rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    transition:
        color 200ms ease,
        transform 200ms ease,
        border-color 200ms ease,
        background 200ms ease,
        box-shadow 200ms ease;
}

.ubx-scenario-mixer-controls button:hover,
.ubx-scenario-mixer-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    background: rgba(var(--ubx-primary-rgb), 0.1);
    box-shadow: 0 1rem 2.4rem rgba(var(--ubx-primary-rgb), 0.1);
    transform: translateX(0.24rem);
}

.ubx-scenario-mixer-controls svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ubx-primary);
}

.ubx-scenario-mixer-controls button > svg {
    justify-self: center;
}

.ubx-scenario-mixer-controls strong,
.ubx-scenario-mixer-controls small {
    display: block;
}

.ubx-scenario-mixer-controls small {
    color: currentColor;
    opacity: 0.62;
}

.ubx-scenario-mixer-narration {
    display: grid;
    gap: 0.36rem;
    margin-top: 1.2rem;
    padding: 1rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.12), transparent 11rem),
        rgba(255, 255, 255, 0.055);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(18px);
}

.ubx-scenario-mixer-narration small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-scenario-mixer-narration strong {
    color: var(--ubx-text);
    font-size: 1.2rem;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.ubx-scenario-mixer-narration span {
    color: var(--ubx-muted);
    line-height: 1.48;
}

.ubx-scenario-mixer-stage {
    position: relative;
    min-height: clamp(38rem, 56vw, 50rem);
    perspective: 1500px;
}

.ubx-mixer-browser {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 18% 18%, rgba(var(--ubx-primary-rgb), 0.13), transparent 19rem),
        linear-gradient(145deg, rgba(22, 33, 31, 0.96), rgba(7, 10, 12, 0.98));
    box-shadow:
        0 3rem 7rem rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: perspective(1300px) rotateX(7deg) rotateY(-5deg);
    transform-style: preserve-3d;
    transition: transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-scenario-mixer-stage[data-mixer-scenario="parkour"] .ubx-mixer-browser {
    transform: perspective(1300px) rotateX(7deg) rotateY(4deg) rotateZ(-0.4deg);
}

.ubx-scenario-mixer-stage[data-mixer-scenario="team"] .ubx-mixer-browser {
    transform: perspective(1300px) rotateX(8deg) rotateY(-9deg) rotateZ(0.5deg);
}

.ubx-mixer-topbar {
    position: absolute;
    z-index: 18;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.75rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    background: rgba(3, 8, 8, 0.66);
    backdrop-filter: blur(18px);
    transform: translateZ(120px);
}

.ubx-mixer-topbar span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.ubx-mixer-topbar strong {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.8rem;
}

.ubx-mixer-topbar em {
    display: inline-flex;
    gap: 0.34rem;
    align-items: center;
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-mixer-topbar em i {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 1rem rgba(var(--ubx-primary-rgb), 0.42);
}

.ubx-mixer-map {
    position: absolute;
    inset: 4.6rem 1rem 1rem;
    overflow: hidden;
    border-radius: 1.5rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, #1c2926, #263b32 52%, #172224);
    background-size: 4rem 4rem;
    transform: translateZ(20px);
    transition:
        filter 420ms ease,
        transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-mixer-real-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    filter: saturate(0.72) contrast(0.92) brightness(0.62);
}

.ubx-mixer-real-map::after {
    position: absolute;
    inset: 0;
    z-index: 410;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 38% 42%, transparent 0 14rem, rgba(5, 11, 9, 0.2) 24rem),
        linear-gradient(180deg, rgba(5, 10, 9, 0.24), rgba(5, 10, 9, 0.42));
}

.ubx-mixer-real-map .leaflet-pane,
.ubx-mixer-real-map .leaflet-control-container {
    z-index: 1;
}

.ubx-scenario-real-marker {
    display: grid;
    place-items: center;
    border-radius: 999px;
    transition:
        opacity 240ms ease,
        filter 240ms ease,
        transform 240ms ease;
}

.ubx-scenario-real-marker span {
    display: grid;
    min-width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    color: #07130d;
    font-size: 0.72rem;
    font-weight: 950;
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.45rem rgba(var(--ubx-primary-rgb), 0.17),
        0 0.9rem 1.8rem rgba(0, 0, 0, 0.28);
}

.ubx-scenario-real-marker-place span {
    min-width: 1.05rem;
    height: 1.05rem;
    background: #f8fafc;
}

.ubx-scenario-real-marker-parkour span,
.ubx-scenario-real-marker-parkour-secondary span {
    background: #7cc7ff;
}

.ubx-scenario-real-marker-team span,
.ubx-scenario-real-marker-entry span,
.ubx-scenario-real-marker-camera span {
    background: #86efac;
}

.ubx-scenario-real-marker.is-active {
    opacity: 1;
    filter: saturate(1.18);
    transform: scale(1.14);
}

.ubx-scenario-real-marker.is-muted {
    opacity: 0.42;
    filter: grayscale(0.45);
    transform: scale(0.92);
}

.ubx-scenario-mixer-stage[data-mixer-scenario="parkour"] .ubx-mixer-map {
    filter: hue-rotate(18deg) saturate(1.06);
    transform: translateZ(20px) scale(1.04) translateX(-1%);
}

.ubx-scenario-mixer-stage[data-mixer-scenario="team"] .ubx-mixer-map {
    filter: saturate(0.95) brightness(0.92);
    transform: translateZ(20px) scale(1.07) translateY(-1%);
}

.mixer-zone,
.mixer-road,
.mixer-water,
.mixer-route,
.mixer-label,
.mixer-pin {
    position: absolute;
}

.mixer-zone {
    border-radius: 34% 46% 42% 56%;
    background: rgba(var(--ubx-primary-rgb), 0.075);
    box-shadow: inset 0 0 2rem rgba(var(--ubx-primary-rgb), 0.08);
}

.mixer-zone.zone-a { top: 14%; left: 11%; width: 30%; height: 26%; transform: rotate(-10deg); }
.mixer-zone.zone-b { right: 10%; bottom: 15%; width: 38%; height: 30%; transform: rotate(7deg); }

.mixer-road {
    height: 0.58rem;
    border-radius: 999px;
    background: rgba(230, 221, 190, 0.16);
}

.mixer-road.road-a { top: 42%; left: -8%; width: 82%; transform: rotate(-11deg); }
.mixer-road.road-b { top: 65%; right: -10%; width: 70%; transform: rotate(21deg); }

.mixer-water {
    top: 14%;
    right: 8%;
    width: 18%;
    height: 52%;
    border-radius: 999px;
    background: rgba(80, 132, 157, 0.16);
    transform: rotate(17deg);
}

.mixer-route {
    top: 39%;
    left: 31%;
    width: 38%;
    height: 28%;
    z-index: 3;
    border-top: 3px dashed rgba(var(--ubx-primary-rgb), 0.7);
    border-right: 3px dashed rgba(var(--ubx-primary-rgb), 0.48);
    border-radius: 0 4rem 0 0;
    opacity: 0.32;
    transform: rotate(9deg);
    transition: opacity 260ms ease;
}

.ubx-scenario-mixer-stage[data-mixer-scenario="team"] .mixer-route,
.ubx-scenario-mixer-stage[data-mixer-scenario="parkour"] .mixer-route {
    opacity: 1;
    animation: ubx-mixer-route 3.6s ease-in-out infinite;
}

.mixer-label {
    top: 1.2rem;
    left: 1.2rem;
    z-index: 5;
    padding: 0.48rem 0.66rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
}

.mixer-pin {
    z-index: 4;
    display: grid;
    min-width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: #07130d;
    font-size: 0.75rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 1.1rem 2.4rem rgba(0, 0, 0, 0.28), 0 0 1.6rem rgba(var(--ubx-primary-rgb), 0.24);
    transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), background 260ms ease;
}

.mixer-pin.pin-main { top: 32%; left: 38%; }
.mixer-pin.pin-place { top: 47%; left: 53%; width: 1.35rem; min-width: 1.35rem; height: 1.35rem; background: #fff; }
.mixer-pin.pin-list { right: 28%; bottom: 25%; background: #93c5fd; }
.mixer-pin.pin-team { right: 18%; top: 42%; background: #86efac; }

.ubx-scenario-mixer-stage[data-mixer-scenario="lostplace"] .pin-main,
.ubx-scenario-mixer-stage[data-mixer-scenario="parkour"] .pin-list,
.ubx-scenario-mixer-stage[data-mixer-scenario="team"] .pin-team {
    transform: translateZ(115px) scale(1.18);
}

.ubx-mixer-search,
.ubx-mixer-place,
.ubx-mixer-list,
.ubx-mixer-chat,
.ubx-mixer-checklist,
.ubx-mixer-callout,
.ubx-mixer-storyline,
.ubx-mixer-status-strip {
    position: absolute;
    z-index: 11;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.1rem;
    background: rgba(4, 8, 8, 0.68);
    box-shadow: 0 1.4rem 3.3rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    transition: transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 240ms ease, opacity 240ms ease;
}

.ubx-mixer-search,
.ubx-mixer-place,
.ubx-mixer-list,
.ubx-mixer-chat,
.ubx-mixer-checklist,
.ubx-mixer-callout {
    display: grid;
    gap: 0.34rem;
    padding: 0.9rem;
}

.ubx-mixer-search {
    top: 5.8rem;
    left: 1.4rem;
    width: 18rem;
    transform: translateZ(130px);
}

.ubx-mixer-place {
    right: 1.5rem;
    bottom: 11.5rem;
    width: 20rem;
    transform: translate3d(0, 0, 120px);
}

.ubx-mixer-list {
    right: 12rem;
    bottom: 4.5rem;
    width: 19rem;
    transform: translate3d(0, 0, 135px);
}

.ubx-mixer-chat {
    left: 1.4rem;
    bottom: 5rem;
    width: 19rem;
    transform: translate3d(0, 0, 135px);
}

.ubx-mixer-checklist {
    top: 13rem;
    left: 1.4rem;
    width: 18rem;
    opacity: 0.9;
    transform: translate3d(0, 0, 105px);
}

.ubx-mixer-callout {
    top: 5.6rem;
    right: 1.4rem;
    width: 18rem;
    border-color: rgba(var(--ubx-primary-rgb), 0.22);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.14), transparent 9rem),
        rgba(4, 8, 8, 0.66);
    transform: translate3d(0, 0, 145px);
}

.ubx-mixer-search small,
.ubx-mixer-place small,
.ubx-mixer-list small,
.ubx-mixer-chat small,
.ubx-mixer-checklist small,
.ubx-mixer-callout small {
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-mixer-search strong,
.ubx-mixer-place strong,
.ubx-mixer-list strong,
.ubx-mixer-callout strong {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 950;
}

.ubx-mixer-search span,
.ubx-mixer-place span,
.ubx-mixer-list span,
.ubx-mixer-chat p,
.ubx-mixer-checklist span {
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.78rem;
    line-height: 1.42;
}

.ubx-mixer-chat p {
    padding: 0.56rem 0.66rem;
    color: rgba(255, 255, 255, 0.78);
    border-radius: 0.9rem 0.9rem 0.9rem 0.22rem;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-mixer-checklist div {
    display: grid;
    gap: 0.35rem;
}

.ubx-mixer-checklist span {
    position: relative;
    padding: 0.42rem 0.5rem 0.42rem 1.55rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.065);
}

.ubx-mixer-checklist span::before {
    position: absolute;
    top: 0.54rem;
    left: 0.55rem;
    width: 0.55rem;
    height: 0.55rem;
    content: "";
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0.8rem rgba(var(--ubx-primary-rgb), 0.36);
}

.ubx-mixer-callout strong {
    line-height: 1.28;
}

.ubx-mixer-status-strip {
    right: 1.35rem;
    bottom: 1.35rem;
    left: 1.35rem;
    display: flex;
    gap: 0.55rem;
    justify-content: center;
    padding: 0.58rem;
    transform: translateZ(155px);
}

.ubx-mixer-status-strip span {
    display: inline-flex;
    gap: 0.36rem;
    align-items: center;
    padding: 0.48rem 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.74rem;
    font-weight: 850;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.065);
}

.ubx-mixer-storyline {
    top: auto;
    right: 1.35rem;
    bottom: 4.6rem;
    left: 1.35rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.42rem;
    padding: 0.5rem;
    transform: translateZ(160px);
}

.ubx-mixer-storyline span {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
    padding: 0.46rem 0.42rem;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.72rem;
    font-weight: 900;
    border-radius: 0.82rem;
    background: rgba(255, 255, 255, 0.055);
    transition:
        color 200ms ease,
        background 200ms ease,
        transform 200ms ease;
}

.ubx-mixer-storyline b {
    color: var(--ubx-primary);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

.ubx-mixer-storyline span.is-active,
.ubx-mixer-storyline span.is-complete {
    color: #07140d;
    background: var(--ubx-primary);
    transform: translateY(-0.08rem);
}

.ubx-mixer-storyline span.is-active b,
.ubx-mixer-storyline span.is-complete b {
    color: #07140d;
}

.ubx-scenario-mixer-stage[data-mixer-scenario="lostplace"] .ubx-mixer-place,
.ubx-scenario-mixer-stage[data-mixer-scenario="parkour"] .ubx-mixer-list,
.ubx-scenario-mixer-stage[data-mixer-scenario="team"] .ubx-mixer-chat {
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.3), 0 0 2.5rem rgba(var(--ubx-primary-rgb), 0.13);
    transform: translate3d(0, -0.35rem, 180px) scale(1.02);
}

.ubx-scenario-mixer-stage[data-mixer-scenario="parkour"] .ubx-mixer-checklist {
    transform: translate3d(1rem, 0.2rem, 150px) rotateY(-4deg);
}

.ubx-scenario-mixer-stage[data-mixer-scenario="team"] .ubx-mixer-checklist {
    transform: translate3d(-0.4rem, 0.7rem, 150px) rotateY(4deg);
}

.ubx-scenario-mixer-stage[data-mixer-scenario="team"] .ubx-mixer-callout {
    border-color: rgba(var(--ubx-kind-chat-rgb), 0.28);
    box-shadow:
        0 1.4rem 3.3rem rgba(0, 0, 0, 0.24),
        0 0 2.3rem rgba(var(--ubx-kind-chat-rgb), 0.1);
}

@keyframes ubx-mixer-route {
    0%,
    100% {
        filter: drop-shadow(0 0 0.2rem rgba(var(--ubx-primary-rgb), 0.18));
    }

    50% {
        filter: drop-shadow(0 0 1.15rem rgba(var(--ubx-primary-rgb), 0.46));
    }
}

@media (max-width: 991.98px) {
    .ubx-scenario-mixer-grid {
        grid-template-columns: 1fr;
    }

    .ubx-scenario-mixer-stage {
        min-height: 58rem;
    }

    .ubx-mixer-browser {
        transform: none !important;
    }

    .ubx-mixer-search,
    .ubx-mixer-place,
    .ubx-mixer-list,
    .ubx-mixer-chat,
    .ubx-mixer-checklist,
    .ubx-mixer-callout {
        right: 1rem;
        left: 1rem;
        width: auto;
        transform: none !important;
    }

    .ubx-mixer-search { top: 5.4rem; }
    .ubx-mixer-callout { top: 12.2rem; }
    .ubx-mixer-checklist { top: 19.4rem; }
    .ubx-mixer-place { top: 30.4rem; bottom: auto; }
    .ubx-mixer-list { top: 39.4rem; bottom: auto; }
    .ubx-mixer-chat { bottom: 8.7rem; }

    .ubx-mixer-storyline {
        bottom: 4.7rem;
    }

    .ubx-mixer-status-strip {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .ubx-mixer-status-strip::-webkit-scrollbar {
        display: none;
    }

    .ubx-premiere-recap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-recap-screen {
        display: grid;
        gap: 0.75rem;
        min-height: 0;
        padding: 1rem;
    }

    .ubx-recap-map,
    .ubx-recap-preview-card {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 10rem;
        opacity: 1;
        filter: none;
        transform: none !important;
    }

    .ubx-recap-map {
        min-height: 16rem;
    }

    .ubx-experience-grid {
        grid-template-columns: 1fr;
    }

    .ubx-experience-stage {
        min-height: 46rem;
    }

    .ubx-experience-browser {
        transform: none !important;
    }

    .ubx-experience-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-experience-presets {
        grid-template-columns: 1fr;
    }

    .ubx-experience-presets button {
        min-height: auto;
        grid-template-columns: 1.5rem 1fr;
        align-items: center;
    }

    .ubx-experience-controls button {
        transform: none !important;
    }

    .ubx-experience-search {
        top: 4.5rem;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .ubx-experience-scenario-card {
        top: 9.8rem;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .ubx-experience-metrics {
        top: 24.4rem;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .ubx-experience-director-card {
        top: 15.4rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        transform: none !important;
    }

    .ubx-experience-camera-rail {
        top: 4.1rem;
    }

    .ubx-experience-viewport-hud,
    .ubx-experience-demo-cursor,
    .ubx-experience-exploded-ui {
        display: none;
    }

    .ubx-experience-action-dock {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ubx-experience-action-dock::-webkit-scrollbar {
        display: none;
    }

    .ubx-experience-action-dock button {
        flex: 0 0 auto;
    }

    .ubx-experience-shot-overlay {
        right: 1rem;
        bottom: 6rem;
        left: 1rem;
        width: auto;
    }

    .ubx-experience-place,
    .ubx-experience-list,
    .ubx-experience-chat,
    .ubx-experience-log {
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .ubx-experience-place {
        bottom: 5.8rem;
    }

    .ubx-experience-list {
        top: 11rem;
    }

    .ubx-experience-chat {
        bottom: 6rem;
    }

    .ubx-experience-phone {
        right: 1rem;
        bottom: 7rem;
        width: 7.5rem;
        height: 14rem;
    }

    .ubx-experience-phone div {
        height: 10.5rem;
    }

    .ubx-experience-log {
        bottom: 6rem;
    }

    .ubx-experience-timeline {
        overflow-x: auto;
        grid-template-columns: repeat(5, minmax(7rem, 1fr));
        scrollbar-width: none;
    }

    .ubx-experience-timeline::-webkit-scrollbar {
        display: none;
    }

    .ubx-experience-progress {
        right: 2rem;
        left: 2rem;
    }

    .ubx-scenario-mixer-grid {
        grid-template-columns: 1fr;
    }

    .ubx-scenario-mixer-stage {
        min-height: 42rem;
    }

    .ubx-mixer-browser {
        transform: none !important;
    }

    .ubx-mixer-search,
    .ubx-mixer-place,
    .ubx-mixer-list,
    .ubx-mixer-chat {
        right: 1rem;
        left: 1rem;
        width: auto;
        transform: none !important;
    }

    .ubx-mixer-search { top: 4.7rem; }
    .ubx-mixer-place { top: 12rem; }
    .ubx-mixer-list { bottom: 8rem; }
    .ubx-mixer-chat { bottom: 14rem; }

    .ubx-studio-stage {
        min-height: 58rem;
    }

    .ubx-studio-browser {
        transform: none !important;
    }

    .ubx-studio-search,
    .ubx-studio-results,
    .ubx-studio-place,
    .ubx-studio-list,
    .ubx-studio-chat,
    .ubx-studio-logbook,
    .ubx-studio-phone {
        transform: none !important;
    }

    .ubx-studio-search,
    .ubx-studio-results {
        left: 1rem;
        width: min(18rem, calc(100% - 2rem));
    }

    .ubx-studio-place,
    .ubx-studio-chat {
        right: 1rem;
        width: min(19rem, calc(100% - 2rem));
    }

    .ubx-studio-list,
    .ubx-studio-logbook {
        right: auto;
        left: 1rem;
        width: min(19rem, calc(100% - 2rem));
    }

    .ubx-studio-phone {
        right: 1rem;
        top: 17.5rem;
        width: 8rem;
        height: 14.8rem;
    }

    .ubx-studio-layer-rack {
        right: 1rem;
        left: 1rem;
        max-width: none;
        overflow-x: auto;
        scrollbar-width: none;
        transform: none;
    }

    .ubx-studio-layer-rack::-webkit-scrollbar {
        display: none;
    }

    .ubx-studio-shot-board {
        right: 1rem;
        bottom: 8.5rem;
        left: 1rem;
        width: auto;
        transform: none;
    }

    .ubx-studio-shot-board article {
        transform: translateY(0.75rem) scale(0.96);
    }

    .ubx-studio-cursor {
        display: none;
    }

    .ubx-studio-timeline {
        overflow-x: auto;
        grid-template-columns: repeat(5, max-content);
        scrollbar-width: none;
    }

    .ubx-studio-timeline::-webkit-scrollbar {
        display: none;
    }

    .ubx-premiere-stage {
        min-height: 58rem;
    }

    .ubx-premiere-recap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-premiere-browser {
        transform: none;
    }

    .ubx-premiere-toolbar {
        right: 1rem;
        top: 8rem;
        width: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ubx-premiere-clapper {
        top: 4rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        transform: none;
    }

    .ubx-premiere-callouts {
        display: none;
    }

    .ubx-premiere-shot-deck {
        top: auto;
        right: 1rem;
        bottom: 14rem;
        left: 1rem;
        display: flex;
        width: auto;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ubx-premiere-shot-deck::-webkit-scrollbar {
        display: none;
    }

    .ubx-premiere-shot-deck span {
        flex: 0 0 14rem;
        transform: none;
    }

    .ubx-premiere-shot-deck span.is-active {
        transform: none;
    }

    .ubx-premiere-toolbar button {
        justify-content: center;
        font-size: 0.72rem;
    }

    .ubx-premiere-map {
        inset: 12.2rem 1rem 20rem;
        transform: none;
    }

    .ubx-premiere-search-panel {
        top: 4.1rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        transform: none;
    }

    .ubx-premiere-place-panel,
    .ubx-premiere-list-panel,
    .ubx-premiere-chat-panel,
    .ubx-premiere-log-panel,
    .ubx-premiere-phone,
    .ubx-premiere-inspector {
        transform: none !important;
    }

    .ubx-premiere-place-panel {
        right: 1rem;
        bottom: 8.6rem;
        left: 1rem;
        width: auto;
    }

    .ubx-premiere-list-panel {
        bottom: 8.6rem;
        left: 1rem;
        width: min(18rem, calc(100% - 2rem));
    }

    .ubx-premiere-chat-panel {
        top: auto;
        right: 1rem;
        bottom: 8.6rem;
        width: min(18rem, calc(100% - 2rem));
    }

    .ubx-premiere-log-panel {
        right: 1rem;
        bottom: 8.6rem;
        left: 1rem;
        width: auto;
    }

    .ubx-premiere-phone {
        right: 1rem;
        bottom: 8.6rem;
        width: 10.5rem;
        height: 18rem;
    }

    .ubx-premiere-inspector {
        bottom: 4.9rem;
    }

    .ubx-premiere-timeline {
        overflow-x: auto;
        grid-template-columns: repeat(5, max-content);
        justify-content: start;
        border-radius: 1.2rem;
        scrollbar-width: none;
    }

    .ubx-premiere-timeline::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ubx-studio-stage {
        min-height: 66rem;
    }

    .ubx-studio-browser {
        inset: 0.65rem;
        border-radius: 1.2rem;
    }

    .ubx-studio-controls button {
        padding: 0.78rem 0.82rem;
    }

    .ubx-studio-map {
        inset: 3.2rem 0 0;
    }

    .ubx-studio-search,
    .ubx-studio-results,
    .ubx-studio-place,
    .ubx-studio-list,
    .ubx-studio-chat,
    .ubx-studio-logbook,
    .ubx-studio-phone {
        right: 0.8rem;
        left: 0.8rem;
        width: auto;
    }

    .ubx-studio-results {
        top: 13.4rem;
    }

    .ubx-studio-place,
    .ubx-studio-chat,
    .ubx-studio-list,
    .ubx-studio-logbook {
        bottom: 8.8rem;
    }

    .ubx-studio-shot-board {
        bottom: 16.6rem;
    }

    .ubx-studio-shot-board article {
        padding: 0.82rem;
    }

    .ubx-studio-layer-rack {
        top: 4.1rem;
    }

    .ubx-studio-phone {
        top: auto;
        bottom: 8.8rem;
        left: auto;
        width: 7.6rem;
    }

    .ubx-studio-cue {
        right: 0.8rem;
        bottom: 0.8rem;
        left: 0.8rem;
        max-width: none;
    }

    .ubx-studio-timeline {
        right: 0.8rem;
        bottom: 4.6rem;
        left: 0.8rem;
    }

    .ubx-premiere-stage {
        min-height: 64rem;
        border-radius: 1.45rem;
    }

    .ubx-premiere-recap-grid {
        grid-template-columns: 1fr;
    }

    .ubx-premiere-recap-card {
        min-height: auto;
    }

    .ubx-premiere-browser {
        inset: 0.65rem;
        border-radius: 1.15rem;
    }

    .ubx-premiere-toolbar {
        top: 8.2rem;
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ubx-premiere-toolbar::-webkit-scrollbar {
        display: none;
    }

    .ubx-premiere-toolbar button {
        flex: 0 0 auto;
    }

    .ubx-premiere-map {
        inset: 12.4rem 0.7rem 24rem;
    }

    .ubx-premiere-shot-deck {
        bottom: 15rem;
    }

    .ubx-premiere-place-panel,
    .ubx-premiere-list-panel,
    .ubx-premiere-chat-panel,
    .ubx-premiere-log-panel,
    .ubx-premiere-phone {
        right: 0.7rem;
        bottom: 10.4rem;
        left: 0.7rem;
        width: auto;
    }

    .ubx-premiere-phone {
        left: auto;
        width: 9.2rem;
    }

    .ubx-premiere-photo-strip {
        height: 4rem;
    }

    .ubx-premiere-inspector {
        right: 0.7rem;
        bottom: 5rem;
        left: 0.7rem;
        width: auto;
        transform: none;
    }

    .ubx-premiere-timeline {
        right: 0.7rem;
        bottom: 0.7rem;
        left: 0.7rem;
    }
}

.ubx-workspace-showcase {
    overflow: hidden;
}

.ubx-workspace-highlights {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.35rem;
}

.ubx-workspace-highlights span {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.62rem 0.82rem;
    color: var(--ubx-text);
    font-weight: 760;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.16);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.07);
}

.ubx-workspace-highlights svg {
    color: var(--ubx-primary);
}

.ubx-workspace-browser {
    position: relative;
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    grid-template-rows: auto auto minmax(24rem, 1fr) auto;
    gap: 0.9rem;
    min-height: 42rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 74% 8%, rgba(var(--ubx-kind-list-rgb), 0.13), transparent 20rem),
        radial-gradient(circle at 18% 72%, rgba(var(--ubx-primary-rgb), 0.16), transparent 22rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        rgba(8, 11, 15, 0.72);
    box-shadow:
        0 2.4rem 7rem rgba(0, 0, 0, 0.32),
        0 0 4rem rgba(var(--ubx-primary-rgb), 0.08);
    backdrop-filter: blur(24px);
    perspective: var(--showcase-depth);
}

.ubx-workspace-browser::before {
    position: absolute;
    inset: auto -8% -22% 12%;
    height: 18rem;
    content: "";
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(var(--ubx-primary-rgb), 0.16), transparent 70%);
    filter: blur(28px);
}

.ubx-workspace-topbar,
.ubx-workspace-sidebar,
.ubx-workspace-search,
.ubx-workspace-map-card,
.ubx-workspace-list-card,
.ubx-workspace-log-card,
.ubx-workspace-mag-card,
.ubx-workspace-action-row {
    position: relative;
    z-index: 1;
}

.ubx-workspace-topbar {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.72rem 0.82rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-workspace-topbar span {
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.ubx-workspace-topbar strong {
    margin-left: 0.4rem;
    font-size: 0.86rem;
    font-weight: 850;
}

.ubx-workspace-topbar em {
    margin-left: auto;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-style: normal;
}

.ubx-workspace-sidebar {
    grid-row: 2 / 5;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.045);
}

.ubx-workspace-sidebar button,
.ubx-workspace-action-row button {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    color: var(--ubx-muted);
    border: 1px solid transparent;
    border-radius: 0.9rem;
    background: transparent;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.ubx-workspace-sidebar button {
    padding: 0.62rem 0.7rem;
    text-align: left;
    font-size: 0.84rem;
    font-weight: 820;
}

.ubx-workspace-sidebar button:hover,
.ubx-workspace-sidebar button.active,
.ubx-workspace-action-row button:hover {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.18);
    background: rgba(var(--ubx-primary-rgb), 0.09);
    transform: translateY(-0.05rem);
}

.ubx-workspace-search {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.15);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-workspace-search svg {
    color: var(--ubx-primary);
}

.ubx-workspace-search span {
    color: var(--ubx-text);
    font-size: 0.9rem;
    font-weight: 760;
}

.ubx-workspace-search b {
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.78rem;
}

.ubx-workspace-map-card {
    min-height: 25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 1.35rem;
    background:
        linear-gradient(115deg, rgba(104, 119, 88, 0.52), rgba(45, 63, 58, 0.72)),
        rgba(0, 0, 0, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1.4rem 3rem rgba(0, 0, 0, 0.22);
    transform: rotateX(2deg) rotateY(-3deg) translateZ(22px);
    transform-style: preserve-3d;
}

.ubx-workspace-map-grid {
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
}

.ws-road,
.ws-water {
    position: absolute;
    pointer-events: none;
}

.ws-road {
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(235, 229, 208, 0.72);
    box-shadow: 0 0.15rem 0.55rem rgba(0, 0, 0, 0.14);
}

.ws-road-a {
    top: 34%;
    right: -8%;
    left: 12%;
    transform: rotate(-18deg);
}

.ws-road-b {
    right: 18%;
    bottom: 26%;
    left: -10%;
    transform: rotate(16deg);
}

.ws-water {
    right: -6%;
    bottom: -12%;
    width: 40%;
    height: 48%;
    border-radius: 58% 42% 0 0;
    background: rgba(92, 154, 176, 0.38);
    filter: blur(0.5px);
}

.ws-pin {
    position: absolute;
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border-radius: 999px 999px 999px 0.35rem;
    background: var(--ubx-primary);
    box-shadow:
        0 0.9rem 2rem rgba(0, 0, 0, 0.24),
        0 0 0 0.42rem rgba(var(--ubx-primary-rgb), 0.14);
    transform: rotate(-45deg) translateZ(60px);
    animation: ubx-workspace-pin 3.4s ease-in-out infinite;
}

.ws-pin i {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: #07140d;
}

.ws-pin-a { top: 25%; left: 32%; }
.ws-pin-b { top: 52%; right: 20%; animation-delay: -1.1s; }
.ws-pin-c { bottom: 21%; left: 48%; animation-delay: -2.2s; }

.ws-place-popover {
    position: absolute;
    right: 8%;
    bottom: 9%;
    display: grid;
    gap: 0.28rem;
    width: min(16rem, 58%);
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    background: rgba(8, 11, 15, 0.76);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
    transform: translateZ(100px);
}

.ws-place-popover small,
.ubx-workspace-list-card small,
.ubx-workspace-log-card small,
.ubx-workspace-mag-card small {
    color: var(--ubx-primary);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ws-place-popover strong,
.ubx-workspace-list-card strong,
.ubx-workspace-log-card strong,
.ubx-workspace-mag-card strong {
    display: block;
    font-weight: 950;
}

.ws-place-popover span,
.ubx-workspace-list-card span,
.ubx-workspace-log-card span,
.ubx-workspace-mag-card span {
    color: var(--ubx-muted);
    font-size: 0.82rem;
}

.ubx-workspace-list-card,
.ubx-workspace-log-card,
.ubx-workspace-mag-card {
    position: absolute;
    display: grid;
    gap: 0.25rem;
    padding: 0.88rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.05rem;
    background: rgba(8, 11, 15, 0.76);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
}

.ubx-workspace-list-card {
    right: 4%;
    top: 31%;
    width: min(15rem, 36%);
    transform: translateZ(130px) rotateZ(1.2deg);
    animation: ubx-workspace-card-float 6.4s ease-in-out infinite;
}

.ubx-workspace-list-card div {
    display: flex;
    gap: 0.28rem;
    margin-top: 0.38rem;
}

.ubx-workspace-list-card i {
    width: 1.6rem;
    height: 0.38rem;
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.28);
}

.ubx-workspace-log-card {
    left: 12.5rem;
    bottom: 4.7rem;
    width: min(15rem, 36%);
    transform: translateZ(115px) rotateZ(-1.6deg);
    animation: ubx-workspace-card-float 6.8s ease-in-out -1.8s infinite;
}

.ubx-workspace-mag-card {
    right: 6%;
    top: 13%;
    width: min(14rem, 34%);
    transform: translateZ(100px) rotateZ(-2deg);
    animation: ubx-workspace-card-float 7.2s ease-in-out -3.1s infinite;
}

.ubx-workspace-action-row {
    grid-column: 2;
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ubx-workspace-action-row button {
    padding: 0.58rem 0.78rem;
    font-size: 0.84rem;
    font-weight: 820;
    background: rgba(255, 255, 255, 0.045);
}

.ubx-scenario-wall {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ubx-scenario-wall::before {
    content: "";
    position: absolute;
    inset: 4% -8% auto;
    z-index: -1;
    height: 74%;
    background:
        radial-gradient(circle at 18% 28%, rgba(var(--ubx-primary-rgb), 0.18), transparent 34%),
        radial-gradient(circle at 78% 40%, rgba(var(--ubx-kind-chat-rgb), 0.18), transparent 34%);
    filter: blur(10px);
}

.ubx-scenario-wall-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.5fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    max-width: 1420px;
    margin: 0 auto 2rem;
}

.ubx-scenario-wall-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.3fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    max-width: 1500px;
    margin: 0 auto;
    perspective: 1600px;
}

.ubx-scenario-wall-controls {
    display: grid;
    align-content: start;
    gap: 0.85rem;
}

.ubx-scenario-wall-controls button {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    gap: 0.8rem;
    align-items: center;
    width: 100%;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.72);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.ubx-scenario-wall-controls button:hover,
.ubx-scenario-wall-controls button.is-active {
    color: #fff;
    border-color: rgba(var(--ubx-primary-rgb), 0.44);
    background: rgba(var(--ubx-primary-rgb), 0.1);
    box-shadow: 0 18px 48px rgba(var(--ubx-primary-rgb), 0.12);
    transform: translateX(0.25rem);
}

.ubx-scenario-wall-controls button > span {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    color: rgb(var(--ubx-primary-rgb));
    font-weight: 900;
    border-radius: 1rem;
    background: rgba(var(--ubx-primary-rgb), 0.13);
}

.ubx-scenario-wall-controls strong,
.ubx-scenario-wall-controls small {
    display: block;
}

.ubx-scenario-wall-controls small {
    color: rgba(255, 255, 255, 0.54);
}

.ubx-scenario-wall-stage {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.1), transparent 20%),
        linear-gradient(145deg, rgba(7, 12, 10, 0.96), rgba(20, 29, 25, 0.92));
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform-style: preserve-3d;
}

.ubx-scenario-wall-browserbar {
    position: absolute;
    inset: 1rem 1rem auto;
    z-index: 15;
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(5, 9, 8, 0.78);
    backdrop-filter: blur(20px);
    transform: translateZ(120px);
}

.ubx-scenario-wall-browserbar span {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
}

.ubx-scenario-wall-browserbar strong {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-scenario-wall-browserbar em {
    margin-left: auto;
    color: rgb(var(--ubx-primary-rgb));
    font-size: 0.76rem;
    font-style: normal;
}

.ubx-scenario-wall-map {
    position: absolute;
    inset: 4.8rem 1rem 1rem;
    overflow: hidden;
    border-radius: 1.65rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 26% 28%, rgba(95, 149, 106, 0.2), transparent 28%),
        radial-gradient(circle at 75% 18%, rgba(73, 127, 150, 0.2), transparent 26%),
        linear-gradient(135deg, #19261f, #26352c);
    background-size: 52px 52px, 52px 52px, auto, auto, auto;
    transform: translateZ(20px) scale(1);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s ease;
}

.ubx-scenario-real-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    filter: saturate(0.72) contrast(0.9) brightness(0.62);
}

.ubx-scenario-real-map::after {
    position: absolute;
    inset: 0;
    z-index: 410;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 46% 44%, transparent 0 15rem, rgba(4, 10, 8, 0.28) 27rem),
        linear-gradient(180deg, rgba(4, 10, 8, 0.22), rgba(4, 10, 8, 0.46));
}

.ubx-scenario-real-map .leaflet-pane,
.ubx-scenario-real-map .leaflet-control-container {
    z-index: 1;
}

.ubx-wall-real-marker {
    display: grid;
    place-items: center;
    border-radius: 999px;
    transition:
        opacity 240ms ease,
        filter 240ms ease,
        transform 240ms ease;
}

.ubx-wall-real-marker span {
    display: grid;
    min-width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    color: #07100d;
    font-size: 0.66rem;
    font-weight: 950;
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    background: rgb(var(--ubx-primary-rgb));
    box-shadow:
        0 0 0 0.48rem rgba(var(--ubx-primary-rgb), 0.15),
        0 1rem 2rem rgba(0, 0, 0, 0.3);
}

.ubx-wall-real-marker-place span {
    min-width: 1.05rem;
    height: 1.05rem;
    background: #f8fafc;
}

.ubx-wall-real-marker-team span,
.ubx-wall-real-marker-entry span {
    background: #86efac;
}

.ubx-wall-real-marker-memory span {
    background: #f1c76f;
}

.ubx-wall-real-marker.is-active {
    opacity: 1;
    filter: saturate(1.16);
    transform: scale(1.14);
}

.ubx-wall-real-marker.is-muted {
    opacity: 0.38;
    filter: grayscale(0.45);
    transform: scale(0.92);
}

.ubx-scenario-wall-stage[data-scenario="team"] .ubx-scenario-wall-map {
    transform: translateZ(20px) scale(1.08) translate(-2%, -1%);
}

.ubx-scenario-wall-stage[data-scenario="memory"] .ubx-scenario-wall-map {
    transform: translateZ(20px) scale(1.02);
    filter: brightness(0.78) saturate(0.9);
}

.wall-road,
.wall-water,
.wall-zone,
.wall-route,
.wall-pin {
    position: absolute;
    z-index: 2;
}

.wall-road {
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.wall-road.road-a { top: 45%; left: -7%; width: 82%; transform: rotate(-12deg); }
.wall-road.road-b { right: -8%; bottom: 28%; width: 68%; transform: rotate(24deg); }

.wall-water {
    top: 9%;
    right: 8%;
    width: 24%;
    height: 52%;
    border-radius: 48% 52% 43% 57%;
    background: rgba(75, 130, 151, 0.14);
}

.wall-zone {
    z-index: 4;
    padding: 0.34rem 0.6rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.76rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
}

.wall-zone.zone-a { top: 22%; left: 13%; }
.wall-zone.zone-b { right: 18%; bottom: 18%; }

.wall-route {
    z-index: 3;
    top: 38%;
    left: 31%;
    width: 34%;
    height: 30%;
    border: 2px dashed rgba(var(--ubx-primary-rgb), 0.7);
    border-bottom: 0;
    border-left: 0;
    border-radius: 0 3rem 0 0;
    opacity: 0;
    transform: rotate(12deg);
}

.ubx-scenario-wall-stage[data-scenario="team"] .wall-route,
.ubx-scenario-wall-stage[data-scenario="memory"] .wall-route {
    opacity: 1;
    animation: ubx-cin-route 3.4s ease-in-out infinite;
}

.wall-pin {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.48rem;
    color: #07100d;
    font-weight: 900;
    border-radius: 999px;
    background: rgb(var(--ubx-primary-rgb));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    transition: transform 0.45s ease, opacity 0.3s ease;
}

.wall-pin.pin-a { top: 35%; left: 42%; }
.wall-pin.pin-b { top: 51%; left: 54%; min-width: 1.2rem; width: 1.2rem; height: 1.2rem; padding: 0; background: #fff; }
.wall-pin.pin-c { top: 44%; right: 25%; color: #fff; background: rgba(var(--ubx-kind-chat-rgb), 0.95); }
.wall-pin.pin-d { right: 33%; bottom: 23%; background: #fff; color: rgb(var(--ubx-primary-rgb)); }

.ubx-scenario-wall-stage[data-scenario="research"] .pin-a,
.ubx-scenario-wall-stage[data-scenario="team"] .pin-c,
.ubx-scenario-wall-stage[data-scenario="memory"] .pin-d {
    z-index: 5;
    transform: translateZ(90px) scale(1.22);
}

.ubx-scenario-panel,
.ubx-scenario-wall-caption {
    position: absolute;
    z-index: 12;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(7, 12, 10, 0.78);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(24px);
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.55s ease;
}

.ubx-scenario-panel small,
.ubx-scenario-panel span,
.ubx-scenario-panel em {
    color: rgba(255, 255, 255, 0.62);
    font-style: normal;
}

.ubx-scenario-panel strong {
    display: block;
    color: #fff;
}

.ubx-scenario-panel.panel-search {
    top: 6.4rem;
    left: 2rem;
    width: min(320px, 36%);
    padding: 1rem;
    border-radius: 1.2rem;
    transform: translateZ(140px);
}

.ubx-scenario-panel.panel-list {
    top: 7rem;
    right: 2rem;
    width: min(310px, 34%);
    padding: 1rem;
    border-radius: 1.2rem;
    opacity: 0;
    transform: translateZ(130px) translateX(1rem);
}

.ubx-scenario-panel.panel-chat {
    bottom: 8rem;
    left: 2rem;
    width: min(310px, 36%);
    padding: 0.95rem;
    border-radius: 1.2rem;
    opacity: 0;
    transform: translateZ(130px) translateY(1rem);
}

.ubx-scenario-panel.panel-chat p {
    width: fit-content;
    max-width: 86%;
    margin: 0.35rem 0;
    padding: 0.45rem 0.62rem;
    color: rgba(255, 255, 255, 0.78);
    border-radius: 0.8rem 0.8rem 0.8rem 0.25rem;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-scenario-panel.panel-chat p.right {
    margin-left: auto;
    color: #07100d;
    border-radius: 0.8rem 0.8rem 0.25rem;
    background: rgb(var(--ubx-primary-rgb));
}

.ubx-scenario-panel.panel-profile {
    right: 2rem;
    bottom: 8rem;
    display: flex;
    gap: 0.8rem;
    align-items: center;
    width: min(340px, 38%);
    padding: 1rem;
    border-radius: 1.2rem;
    opacity: 0;
    transform: translateZ(130px) translateY(1rem);
}

.ubx-scenario-panel.panel-profile > span {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    color: #07100d;
    font-weight: 900;
    border-radius: 999px;
    background: rgb(var(--ubx-primary-rgb));
}

.ubx-scenario-wall-stage[data-scenario="team"] .panel-list,
.ubx-scenario-wall-stage[data-scenario="team"] .panel-chat,
.ubx-scenario-wall-stage[data-scenario="memory"] .panel-profile {
    opacity: 1;
    transform: translateZ(170px) translate(0, 0);
}

.ubx-scenario-wall-stage[data-scenario="memory"] .panel-search,
.ubx-scenario-wall-stage[data-scenario="memory"] .panel-list {
    opacity: 0.32;
    filter: saturate(0.8);
}

.ubx-scenario-wall-caption {
    right: 1.4rem;
    bottom: 1.4rem;
    left: 1.4rem;
    z-index: 18;
    padding: 1rem 1.1rem;
    border-radius: 1.25rem;
    transform: translateZ(220px);
}

.ubx-scenario-wall-caption small,
.ubx-scenario-wall-caption span,
.ubx-scenario-wall-caption b {
    display: block;
}

.ubx-scenario-wall-caption small {
    color: rgb(var(--ubx-primary-rgb));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-scenario-wall-caption strong {
    display: block;
    color: #fff;
    font-size: 1.25rem;
}

.ubx-scenario-wall-caption span {
    max-width: 820px;
    color: rgba(255, 255, 255, 0.66);
}

.ubx-scenario-wall-caption b {
    width: fit-content;
    margin-top: 0.7rem;
    padding: 0.42rem 0.68rem;
    color: #07100d;
    border-radius: 999px;
    background: rgb(var(--ubx-primary-rgb));
}

.ubx-scenario-wall-steps {
    position: absolute;
    right: 1.4rem;
    bottom: -1rem;
    left: 1.4rem;
    z-index: 19;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}

.ubx-scenario-wall-steps span {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem;
    color: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(7, 12, 10, 0.84);
    backdrop-filter: blur(18px);
}

.ubx-scenario-wall-steps span.is-active {
    color: #fff;
    border-color: rgba(var(--ubx-primary-rgb), 0.44);
    background: rgba(var(--ubx-primary-rgb), 0.14);
}

.ubx-feature-workbench {
    position: relative;
    overflow: hidden;
}

.ubx-feature-workbench::before {
    position: absolute;
    inset: 7% -12% auto auto;
    width: min(42rem, 70vw);
    aspect-ratio: 1;
    content: "";
    border-radius: 999px;
    background: radial-gradient(circle, rgba(var(--ubx-primary-rgb), 0.18), transparent 67%);
    filter: blur(20px);
    pointer-events: none;
}

.ubx-workbench-controls {
    display: grid;
    gap: 0.72rem;
    margin-top: 1.35rem;
}

.ubx-workbench-controls button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ubx-workbench-controls button:hover,
.ubx-workbench-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.16), transparent 8rem),
        rgba(255, 255, 255, 0.064);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 1rem 2.4rem rgba(var(--ubx-primary-rgb), 0.1);
    transform: translateX(0.14rem);
}

.ubx-workbench-controls button > span {
    display: inline-grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    color: var(--ubx-primary);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    border-radius: 0.88rem;
    background: rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-workbench-controls svg {
    width: 1.05rem;
    height: 1.05rem;
}

.ubx-workbench-controls strong,
.ubx-workbench-controls small {
    display: block;
}

.ubx-workbench-controls strong {
    color: inherit;
    line-height: 1.1;
}

.ubx-workbench-controls small {
    color: var(--ubx-muted);
    font-size: 0.78rem;
}

.ubx-workbench-stage {
    position: relative;
    overflow: hidden;
    min-height: 46rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2.1rem;
    background:
        radial-gradient(circle at 72% 16%, rgba(var(--ubx-primary-rgb), 0.18), transparent 22rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026)),
        rgba(5, 9, 12, 0.8);
    box-shadow:
        0 2.2rem 5rem rgba(0, 0, 0, 0.28),
        0 0 4rem rgba(var(--ubx-primary-rgb), 0.06);
    perspective: 1400px;
    transform-style: preserve-3d;
}

.ubx-workbench-stage::before {
    position: absolute;
    inset: -40% -20% auto;
    height: 24rem;
    content: "";
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent),
        radial-gradient(circle, rgba(var(--ubx-kind-chat-rgb), 0.12), transparent 68%);
    transform: rotate(-8deg);
    animation: ubx-workbench-light-sweep 12s ease-in-out infinite;
    pointer-events: none;
}

.ubx-workbench-browserbar {
    position: relative;
    z-index: 4;
    display: flex;
    gap: 0.46rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.ubx-workbench-browserbar span {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.ubx-workbench-browserbar span:first-child { background: #ff6f6f; }
.ubx-workbench-browserbar span:nth-child(2) { background: #f5c96b; }
.ubx-workbench-browserbar span:nth-child(3) { background: var(--ubx-primary); }

.ubx-workbench-browserbar strong {
    min-width: 0;
    margin-left: 0.35rem;
    overflow: hidden;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-workbench-browserbar em {
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-workbench-dashboard {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(13rem, 0.24fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    min-height: 42rem;
    transform: rotateX(5deg) rotateY(-5deg) translateZ(0);
    transform-origin: center bottom;
}

.ubx-workbench-sidebar,
.ubx-workbench-main,
.ubx-workbench-list-panel,
.ubx-workbench-map-panel,
.ubx-workbench-profile-panel,
.ubx-workbench-log-panel,
.ubx-workbench-phone-panel,
.ubx-workbench-briefing {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.028)),
        rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(18px);
}

.ubx-workbench-sidebar {
    display: grid;
    align-content: start;
    gap: 0.62rem;
    padding: 1rem;
    border-radius: 1.3rem;
}

.ubx-workbench-sidebar strong {
    margin-bottom: 0.45rem;
    color: var(--ubx-text);
}

.ubx-workbench-sidebar span {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.62rem 0.7rem;
    color: var(--ubx-muted);
    font-weight: 850;
    border-radius: 0.85rem;
}

.ubx-workbench-sidebar span.is-active {
    color: var(--ubx-text);
    background: rgba(var(--ubx-primary-rgb), 0.13);
}

.ubx-workbench-main {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1.45rem;
}

.ubx-workbench-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}

.ubx-workbench-head small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-workbench-head h3 {
    max-width: 18ch;
    margin: 0.2rem 0 0.4rem;
    font-size: clamp(1.8rem, 4vw, 3.1rem);
    font-weight: 950;
    line-height: 0.94;
    letter-spacing: -0.055em;
}

.ubx-workbench-head p {
    max-width: 48rem;
    margin: 0;
    color: var(--ubx-muted);
    line-height: 1.55;
}

.ubx-workbench-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(6rem, 1fr));
    gap: 0.62rem;
}

.ubx-workbench-kpis span {
    display: grid;
    gap: 0.1rem;
    min-width: 7rem;
    padding: 0.72rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.16);
    border-radius: 1rem;
    background: rgba(var(--ubx-primary-rgb), 0.07);
}

.ubx-workbench-kpis strong {
    color: var(--ubx-text);
    font-size: 1rem;
}

.ubx-workbench-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.54rem;
}

.ubx-workbench-flow span {
    position: relative;
    display: flex;
    gap: 0.38rem;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}

.ubx-workbench-flow span::before {
    position: absolute;
    inset: auto 18% -0.35rem;
    height: 0.18rem;
    content: "";
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.75);
    opacity: 0;
    transition: opacity 220ms ease;
}

.ubx-workbench-flow b {
    color: var(--ubx-primary);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.ubx-workbench-flow span.is-complete {
    color: rgba(255, 255, 255, 0.74);
    border-color: rgba(var(--ubx-primary-rgb), 0.16);
    background: rgba(var(--ubx-primary-rgb), 0.07);
}

.ubx-workbench-flow span.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    background:
        radial-gradient(circle at 18% 0, rgba(var(--ubx-primary-rgb), 0.22), transparent 5rem),
        rgba(var(--ubx-primary-rgb), 0.1);
    box-shadow: 0 1rem 2.2rem rgba(var(--ubx-primary-rgb), 0.11);
    transform: translateY(-0.08rem);
}

.ubx-workbench-flow span.is-active::before {
    opacity: 1;
}

.ubx-workbench-content {
    position: relative;
    min-height: 27rem;
    perspective: 1300px;
    transform-style: preserve-3d;
}

.ubx-workbench-list-panel,
.ubx-workbench-map-panel,
.ubx-workbench-profile-panel,
.ubx-workbench-log-panel,
.ubx-workbench-phone-panel,
.ubx-workbench-briefing {
    position: absolute;
    border-radius: 1.3rem;
    transition:
        opacity 260ms ease,
        filter 260ms ease,
        transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 260ms ease;
}

.ubx-workbench-list-panel {
    top: 0;
    left: 0;
    z-index: 4;
    display: grid;
    gap: 0.58rem;
    width: min(28rem, 52%);
    padding: 0.8rem;
    transform: translate3d(0, 0, 92px) rotateY(2deg);
}

.ubx-workbench-list-toolbar {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.ubx-workbench-list-toolbar button {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.46rem 0.58rem;
    color: #07100d;
    font-size: 0.75rem;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-workbench-list-panel article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.2rem 0.58rem;
    align-items: center;
    padding: 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.045);
}

.ubx-workbench-list-panel b {
    grid-row: span 2;
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.28rem rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-workbench-list-panel b.type-parkour { background: var(--ubx-kind-chat); }
.ubx-workbench-list-panel b.type-urban { background: var(--ubx-kind-list); }

.ubx-workbench-list-panel small {
    grid-column: 2;
    color: var(--ubx-muted);
    font-size: 0.72rem;
}

.ubx-workbench-list-panel em {
    grid-row: span 2;
    color: var(--ubx-primary);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 950;
}

.ubx-workbench-map-panel {
    top: 1rem;
    right: 0;
    z-index: 3;
    width: 58%;
    height: 21rem;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(57, 84, 73, 0.32), transparent 42%),
        radial-gradient(circle at 35% 55%, rgba(103, 130, 106, 0.42), transparent 18rem),
        rgba(29, 43, 38, 0.82);
    transform: translate3d(0.2rem, 0.6rem, 46px) rotateY(-7deg) rotateX(3deg);
}

.ubx-workbench-map-panel::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.32;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 3.2rem 3.2rem;
}

.wb-road,
.wb-zone,
.wb-pin,
.wb-route {
    position: absolute;
    z-index: 2;
}

.wb-road {
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(230, 219, 188, 0.42);
    box-shadow: 0 0.25rem 0 rgba(0, 0, 0, 0.05);
}

.wb-road.road-a {
    top: 38%;
    left: -8%;
    width: 78%;
    transform: rotate(-16deg);
}

.wb-road.road-b {
    right: -10%;
    bottom: 25%;
    width: 72%;
    transform: rotate(22deg);
}

.wb-zone {
    top: 16%;
    left: 12%;
    padding: 0.38rem 0.54rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.7rem;
    font-weight: 950;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(6, 12, 10, 0.42);
}

.wb-pin {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: #06110c;
    font-size: 0.78rem;
    font-weight: 950;
    border-radius: 50% 50% 50% 0;
    background: var(--ubx-primary);
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.26);
    border-radius: 999px;
    animation: ubx-workbench-pin 4.8s ease-in-out infinite;
}

.wb-pin.pin-a { top: 35%; left: 34%; }
.wb-pin.pin-b { top: 52%; right: 24%; animation-delay: -1.2s; }
.wb-pin.pin-c { right: 39%; bottom: 18%; animation-delay: -2.4s; }

.wb-route {
    top: 43%;
    left: 35%;
    width: 33%;
    height: 24%;
    border-top: 2px dashed rgba(var(--ubx-primary-rgb), 0.8);
    border-right: 2px dashed rgba(var(--ubx-primary-rgb), 0.8);
    border-radius: 0 2rem 0 0;
    transform: rotate(4deg);
}

.ubx-workbench-profile-panel {
    right: 3%;
    bottom: 0.4rem;
    z-index: 5;
    display: grid;
    gap: 0.35rem;
    width: 18rem;
    padding: 1rem;
    transform: translate3d(0, 0, 104px) rotateY(-3deg);
}

.ubx-workbench-avatar {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    color: #07100d;
    font-weight: 950;
    border-radius: 999px;
    background:
        radial-gradient(circle, #fff 0 44%, transparent 45%),
        conic-gradient(from 20deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 1), var(--ubx-kind-list), var(--ubx-primary));
}

.ubx-workbench-profile-panel span,
.ubx-workbench-log-panel span,
.ubx-workbench-phone-panel small {
    color: var(--ubx-muted);
    font-size: 0.8rem;
}

.ubx-workbench-profile-panel div:not(.ubx-workbench-avatar) {
    display: flex;
    gap: 0.6rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
}

.ubx-workbench-profile-panel b {
    color: var(--ubx-primary);
}

.ubx-workbench-log-panel {
    left: 13%;
    bottom: 1.8rem;
    z-index: 2;
    display: grid;
    gap: 0.2rem;
    width: 21rem;
    padding: 0.95rem;
    transform: translate3d(0, 1rem, 22px) rotateX(5deg);
}

.ubx-workbench-log-panel small {
    color: var(--ubx-primary);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-workbench-log-panel i {
    display: block;
    height: 0.4rem;
    margin-top: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-workbench-log-panel i::before {
    display: block;
    width: 72%;
    height: 100%;
    content: "";
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 1));
}

.ubx-workbench-phone-panel {
    right: 18%;
    bottom: 2.1rem;
    z-index: 6;
    display: grid;
    gap: 0.55rem;
    width: 10.8rem;
    min-height: 16rem;
    padding: 1rem 0.72rem;
    border-radius: 1.7rem;
    transform: translate3d(0.4rem, -0.1rem, 134px) rotateY(-10deg) rotateZ(1deg);
}

.ubx-workbench-phone-panel .phone-notch {
    justify-self: center;
    width: 3rem;
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.ubx-workbench-phone-panel div {
    position: relative;
    min-height: 8.5rem;
    overflow: hidden;
    border-radius: 1.1rem;
    background:
        linear-gradient(135deg, rgba(76, 102, 83, 0.48), transparent 55%),
        rgba(21, 31, 27, 0.9);
}

.ubx-workbench-phone-panel div::before {
    position: absolute;
    inset: 22% -10%;
    height: 0.45rem;
    content: "";
    border-radius: 999px;
    background: rgba(229, 220, 190, 0.42);
    transform: rotate(-18deg);
}

.ubx-workbench-phone-panel b,
.ubx-workbench-phone-panel i {
    position: absolute;
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    color: #07100d;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0.7rem 1.2rem rgba(0, 0, 0, 0.22);
}

.ubx-workbench-phone-panel b:first-child { top: 38%; left: 28%; }
.ubx-workbench-phone-panel b:nth-child(2) { right: 24%; bottom: 22%; }
.ubx-workbench-phone-panel i {
    top: 24%;
    right: 18%;
    color: var(--ubx-primary);
    background: rgba(7, 12, 10, 0.82);
}

.ubx-workbench-briefing {
    right: 2.1rem;
    bottom: 1rem;
    z-index: 8;
    display: grid;
    gap: 0.52rem;
    width: min(26rem, 48%);
    padding: 0.92rem;
    border-radius: 1.2rem;
    transform: translate3d(0, 0, 156px) rotateY(-4deg);
}

.ubx-workbench-briefing small {
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-workbench-briefing strong {
    color: var(--ubx-text);
    line-height: 1.08;
}

.ubx-workbench-briefing div {
    display: grid;
    gap: 0.36rem;
}

.ubx-workbench-briefing div span {
    position: relative;
    padding-left: 1.15rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    line-height: 1.28;
}

.ubx-workbench-briefing div span::before {
    position: absolute;
    top: 0.42rem;
    left: 0;
    width: 0.42rem;
    height: 0.42rem;
    content: "";
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.24rem rgba(var(--ubx-primary-rgb), 0.13);
}

.ubx-workbench-briefing button {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.15rem;
    padding: 0.62rem 0.72rem;
    color: #07100d;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0.9rem 2rem rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-workbench-briefing button svg {
    width: 0.95rem;
    height: 0.95rem;
}

.ubx-workbench-status {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.74rem 0.85rem;
    color: var(--ubx-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
}

.ubx-workbench-status strong {
    color: inherit;
    font-size: 0.88rem;
    font-weight: 800;
}

.ubx-workbench-stage[data-workbench-mode="logbook"] .ubx-workbench-log-panel,
.ubx-workbench-stage[data-workbench-mode="profile"] .ubx-workbench-profile-panel,
.ubx-workbench-stage[data-workbench-mode="handoff"] .ubx-workbench-phone-panel,
.ubx-workbench-stage[data-workbench-mode="lists"] .ubx-workbench-list-panel {
    filter: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 1.4rem 3.4rem rgba(var(--ubx-primary-rgb), 0.13),
        0 1.2rem 3rem rgba(0, 0, 0, 0.2);
}

.ubx-workbench-stage[data-workbench-mode="logbook"] .ubx-workbench-list-panel,
.ubx-workbench-stage[data-workbench-mode="profile"] .ubx-workbench-list-panel,
.ubx-workbench-stage[data-workbench-mode="handoff"] .ubx-workbench-list-panel {
    opacity: 0.52;
    filter: saturate(0.82);
    transform: translate3d(-0.8rem, 0.5rem, 18px) rotateY(1deg) scale(0.96);
}

.ubx-workbench-stage[data-workbench-mode="logbook"] .ubx-workbench-log-panel {
    transform: translate3d(0, -0.4rem, 142px) rotateX(0deg) scale(1.08);
}

.ubx-workbench-stage[data-workbench-mode="profile"] .ubx-workbench-profile-panel {
    transform: translate3d(-1rem, -1.2rem, 150px) rotateY(-2deg) scale(1.08);
}

.ubx-workbench-stage[data-workbench-mode="handoff"] .ubx-workbench-phone-panel {
    transform: translate3d(-2rem, -1.2rem, 168px) rotateY(-5deg) rotateZ(0deg) scale(1.08);
}

.ubx-workbench-stage[data-workbench-mode="handoff"] .ubx-workbench-map-panel {
    transform: translate3d(-0.2rem, 0.2rem, 70px) rotateY(-4deg) rotateX(2deg);
}

.ubx-workbench-stage[data-workbench-mode="profile"] .ubx-workbench-log-panel,
.ubx-workbench-stage[data-workbench-mode="handoff"] .ubx-workbench-log-panel {
    opacity: 0.62;
}

.ubx-profile-showcase {
    overflow: hidden;
}

.ubx-profile-points {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.35rem;
}

.ubx-profile-points span {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.62rem 0.8rem;
    color: var(--ubx-text);
    font-weight: 750;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.16);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.07);
}

.ubx-profile-points svg {
    color: var(--ubx-primary);
}

.ubx-profile-mode-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.2rem;
}

.ubx-profile-mode-controls button {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
    padding: 0.62rem 0.78rem;
    color: var(--ubx-muted);
    font-weight: 820;
    border: 1px solid var(--ubx-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(14px);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ubx-profile-mode-controls button:hover,
.ubx-profile-mode-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    background: rgba(var(--ubx-primary-rgb), 0.12);
    box-shadow: 0 0.9rem 2rem rgba(var(--ubx-primary-rgb), 0.12);
    transform: translateY(-0.06rem);
}

.ubx-profile-mode-controls svg {
    width: 1rem;
    height: 1rem;
    color: var(--ubx-primary);
}

.ubx-profile-board {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.8rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(var(--ubx-primary-rgb), 0.18), transparent 22rem),
        radial-gradient(circle at 85% 10%, rgba(var(--ubx-kind-chat-rgb), 0.14), transparent 22rem),
        rgba(10, 12, 18, 0.64);
    box-shadow:
        0 2rem 5rem rgba(0, 0, 0, 0.26),
        0 0 3.4rem rgba(var(--ubx-primary-rgb), 0.09);
    backdrop-filter: blur(22px);
    transform-style: preserve-3d;
}

.ubx-profile-board::before {
    position: absolute;
    inset: -16% auto auto -8%;
    width: 18rem;
    aspect-ratio: 1;
    content: "";
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.14);
    filter: blur(42px);
    animation: ubx-showcase-drift 13s ease-in-out infinite alternate;
}

.ubx-profile-card-main,
.ubx-profile-mini-grid,
.ubx-profile-feed,
.ubx-profile-page-preview,
.ubx-profile-badge-row,
.ubx-profile-trust-strip,
.ubx-profile-mode-caption {
    position: relative;
    z-index: 1;
}

.ubx-profile-mode-caption {
    display: grid;
    gap: 0.16rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.15rem;
    background: rgba(7, 10, 14, 0.62);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px);
    transform: translateZ(90px);
}

.ubx-profile-mode-caption small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-profile-mode-caption strong {
    font-size: 1.08rem;
    line-height: 1.08;
}

.ubx-profile-mode-caption span {
    color: var(--ubx-muted);
    line-height: 1.36;
}

.ubx-profile-card-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.2rem;
    align-items: center;
    padding: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.45rem;
    background: rgba(255, 255, 255, 0.07);
    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease,
        filter 260ms ease;
}

.ubx-profile-card-main small {
    color: var(--ubx-primary);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-profile-card-main h3 {
    margin: 0.25rem 0 0.3rem;
    font-weight: 950;
}

.ubx-profile-card-main p {
    margin: 0;
    color: var(--ubx-muted);
}

.ubx-profile-avatar-frame {
    position: relative;
    display: grid;
    width: 6.9rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 999px;
    background:
        conic-gradient(from 0deg, rgba(var(--ubx-primary-rgb), 0.2), rgba(var(--ubx-kind-chat-rgb), 0.65), rgba(var(--ubx-primary-rgb), 0.9), rgba(var(--ubx-primary-rgb), 0.2));
    box-shadow: 0 0 2.6rem rgba(var(--ubx-primary-rgb), 0.18);
    animation: ubx-profile-frame 14s linear infinite;
}

.ubx-profile-avatar-frame i {
    position: absolute;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 1.1rem rgba(var(--ubx-primary-rgb), 0.5);
}

.ubx-profile-avatar-frame i:nth-child(2) { top: 0.4rem; left: 50%; }
.ubx-profile-avatar-frame i:nth-child(3) { right: 0.7rem; bottom: 1rem; }
.ubx-profile-avatar-frame i:nth-child(4) { bottom: 1rem; left: 0.7rem; }

.ubx-showcase-profile-avatar {
    display: grid;
    width: 5.35rem;
    aspect-ratio: 1;
    place-items: center;
    color: #07140d;
    font-weight: 950;
    border: 0.35rem solid rgba(7, 20, 13, 0.32);
    border-radius: 999px;
    background: linear-gradient(145deg, var(--ubx-primary), rgba(255, 255, 255, 0.76));
}

.ubx-profile-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.ubx-profile-mini-grid article {
    display: grid;
    gap: 0.25rem;
    padding: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.055);
    transform: translateZ(1rem);
    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease;
}

.ubx-profile-mini-grid svg {
    color: var(--ubx-primary);
}

.ubx-profile-mini-grid strong {
    font-size: 1.55rem;
    font-weight: 950;
}

.ubx-profile-mini-grid span {
    color: var(--ubx-muted);
    font-size: 0.86rem;
}

.ubx-profile-feed {
    display: grid;
    gap: 0.65rem;
}

.ubx-profile-feed span {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    color: var(--ubx-muted);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.045);
    animation: ubx-profile-feed 7.2s ease-in-out infinite;
    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease;
}

.ubx-profile-feed span:nth-child(2) { animation-delay: 0.9s; }
.ubx-profile-feed span:nth-child(3) { animation-delay: 1.8s; }

.ubx-profile-feed svg {
    color: var(--ubx-primary);
}

.ubx-profile-page-preview {
    display: grid;
    gap: 0.72rem;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 1.25rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)),
        rgba(8, 11, 15, 0.56);
    box-shadow: 0 1.35rem 3rem rgba(0, 0, 0, 0.2);
    transform: translateZ(38px);
    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease,
        filter 260ms ease;
}

.ubx-profile-page-header {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    justify-content: space-between;
    color: var(--ubx-muted);
    font-size: 0.82rem;
}

.ubx-profile-page-header span {
    display: inline-flex;
    min-width: 0;
    gap: 0.35rem;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-profile-page-header strong {
    color: var(--ubx-primary);
    font-size: 0.78rem;
    white-space: nowrap;
}

.ubx-profile-page-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.ubx-profile-page-columns article {
    display: grid;
    gap: 0.18rem;
    padding: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.045);
}

.ubx-profile-page-columns small,
.ubx-profile-page-columns span {
    color: var(--ubx-muted);
    font-size: 0.78rem;
}

.ubx-profile-page-columns strong {
    color: var(--ubx-text);
    font-size: 0.95rem;
}

.ubx-profile-badge-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ubx-profile-badge-row span {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
    padding: 0.52rem 0.68rem;
    color: var(--ubx-text);
    font-size: 0.82rem;
    font-weight: 800;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.16);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.07);
}

.ubx-profile-badge-row svg {
    color: var(--ubx-primary);
}

.ubx-profile-trust-strip {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    opacity: 0.58;
    transform: translateZ(20px);
    transition:
        opacity 260ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-profile-trust-strip span {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
    padding: 0.52rem 0.68rem;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
}

.ubx-profile-trust-strip svg {
    color: var(--ubx-primary);
}

.ubx-profile-board[data-profile-mode="public"] .ubx-profile-card-main {
    border-color: rgba(var(--ubx-primary-rgb), 0.28);
    box-shadow: 0 0 2.4rem rgba(var(--ubx-primary-rgb), 0.08);
    transform: translateZ(70px);
}

.ubx-profile-board[data-profile-mode="creator"] .ubx-profile-trust-strip {
    opacity: 1;
    transform: translateZ(130px) translateY(-0.2rem);
}

.ubx-profile-board[data-profile-mode="creator"] .ubx-profile-card-main {
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    box-shadow: 0 0 2.8rem rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-profile-board[data-profile-mode="creator"] .ubx-profile-trust-strip span {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.28);
    background: rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-profile-board[data-profile-mode="progress"] .ubx-profile-mini-grid article:nth-child(3),
.ubx-profile-board[data-profile-mode="progress"] .ubx-profile-badge-row span {
    border-color: rgba(var(--ubx-kind-list-rgb), 0.34);
    box-shadow: 0 0 2rem rgba(var(--ubx-kind-list-rgb), 0.12);
    transform: translateZ(120px) translateY(-0.1rem);
}

.ubx-profile-board[data-profile-mode="verified"] .ubx-profile-mini-grid article:nth-child(1),
.ubx-profile-board[data-profile-mode="verified"] .ubx-profile-feed span:first-child,
.ubx-profile-board[data-profile-mode="verified"] .ubx-profile-page-preview {
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    box-shadow: 0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.13);
    transform: translateZ(120px) translateY(-0.12rem);
}

.ubx-profile-board[data-profile-mode="verified"] .ubx-profile-feed span:not(:first-child) {
    opacity: 0.55;
}

.ubx-journey-cinema {
    position: relative;
    overflow: hidden;
}

.ubx-journey-cinema::before,
.ubx-journey-cinema::after {
    position: absolute;
    z-index: 0;
    width: min(34rem, 70vw);
    aspect-ratio: 1;
    content: "";
    border-radius: 999px;
    filter: blur(46px);
    pointer-events: none;
}

.ubx-journey-cinema::before {
    top: 8%;
    right: -12rem;
    background: rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-journey-cinema::after {
    bottom: 4%;
    left: -14rem;
    background: rgba(var(--ubx-kind-chat-rgb), 0.12);
}

.ubx-journey-cinema .container-fluid {
    position: relative;
    z-index: 1;
}

.ubx-journey-controls {
    display: grid;
    gap: 0.62rem;
    margin-top: 1.3rem;
}

.ubx-journey-controls button {
    display: flex;
    gap: 0.72rem;
    align-items: center;
    padding: 0.78rem 0.85rem;
    color: var(--ubx-muted);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.045);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ubx-journey-controls button:hover,
.ubx-journey-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    background:
        radial-gradient(circle at 0 50%, rgba(var(--ubx-primary-rgb), 0.2), transparent 6rem),
        rgba(255, 255, 255, 0.064);
    box-shadow: 0 1rem 2.6rem rgba(var(--ubx-primary-rgb), 0.11);
    transform: translateX(0.12rem);
}

.ubx-journey-controls b {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    color: var(--ubx-primary);
    font-size: 0.75rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.24);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.11);
}

.ubx-journey-controls span {
    font-weight: 900;
}

.ubx-journey-stage {
    position: relative;
    overflow: hidden;
    min-height: 46rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 74% 14%, rgba(var(--ubx-primary-rgb), 0.2), transparent 24rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.028)),
        rgba(7, 12, 11, 0.86);
    box-shadow:
        0 2rem 6rem rgba(0, 0, 0, 0.34),
        inset 0 1px rgba(255, 255, 255, 0.12);
    perspective: 1500px;
    transform-style: preserve-3d;
}

.ubx-journey-stage::before {
    position: absolute;
    inset: -35% -20% auto;
    height: 24rem;
    content: "";
    background:
        linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07), transparent),
        radial-gradient(circle, rgba(var(--ubx-primary-rgb), 0.12), transparent 66%);
    transform: rotate(-8deg);
    animation: ubx-workbench-light-sweep 13s ease-in-out infinite;
    pointer-events: none;
}

.ubx-journey-browserbar {
    position: relative;
    z-index: 5;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.ubx-journey-browserbar > span {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.ubx-journey-browserbar span:first-child { background: #ff6f6f; }
.ubx-journey-browserbar span:nth-child(2) { background: #f5c96b; }
.ubx-journey-browserbar span:nth-child(3) { background: var(--ubx-primary); }

.ubx-journey-browserbar strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-journey-browserbar em {
    margin-left: auto;
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-journey-scene {
    position: relative;
    min-height: 42rem;
    transform-style: preserve-3d;
}

.ubx-journey-map-plane {
    position: absolute;
    inset: 2rem 2rem 2.3rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.7rem;
    background:
        radial-gradient(circle at 20% 20%, rgba(91, 122, 100, 0.34), transparent 18rem),
        radial-gradient(circle at 76% 66%, rgba(38, 78, 82, 0.3), transparent 18rem),
        linear-gradient(135deg, #1c2a22, #172420 58%, #233027);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.11),
        0 1.6rem 4rem rgba(0, 0, 0, 0.28);
    transform: rotateX(56deg) rotateZ(-10deg) translate3d(0, 2.1rem, -4rem);
    transform-origin: center center;
    transition: transform 640ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 280ms ease;
}

.journey-map-grid,
.journey-region,
.journey-road,
.journey-water,
.journey-route,
.journey-pin,
.journey-person {
    position: absolute;
}

.journey-map-grid {
    inset: 0;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 3rem 3rem;
}

.journey-region {
    z-index: 2;
    padding: 0.35rem 0.55rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 950;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(5, 11, 9, 0.38);
}

.journey-region.r1 { top: 14%; left: 14%; }
.journey-region.r2 { right: 18%; bottom: 22%; }

.journey-road {
    z-index: 1;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(232, 222, 190, 0.36);
}

.journey-road.a {
    top: 38%;
    left: -8%;
    width: 78%;
    transform: rotate(-16deg);
}

.journey-road.b {
    right: -10%;
    bottom: 28%;
    width: 82%;
    transform: rotate(20deg);
}

.journey-water {
    z-index: 0;
    right: -8%;
    bottom: -4%;
    width: 42%;
    height: 34%;
    border-radius: 55% 0 0 0;
    background: rgba(65, 113, 125, 0.24);
}

.journey-route {
    z-index: 3;
    top: 40%;
    left: 38%;
    width: 27%;
    height: 25%;
    border-top: 3px dashed rgba(var(--ubx-primary-rgb), 0.86);
    border-right: 3px dashed rgba(var(--ubx-primary-rgb), 0.86);
    border-radius: 0 2rem 0 0;
    opacity: 0;
    transform: rotate(4deg);
    transition: opacity 260ms ease;
}

.journey-pin,
.journey-person {
    z-index: 5;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.28);
    transform: translateZ(0);
}

.journey-pin {
    width: 2.15rem;
    height: 2.15rem;
    color: #06110c;
    font-size: 0.76rem;
    font-weight: 950;
    background: var(--ubx-primary);
    animation: ubx-workbench-pin 4.4s ease-in-out infinite;
}

.journey-pin.p1 { top: 30%; left: 32%; }
.journey-pin.p2 { top: 47%; right: 32%; animation-delay: -1.2s; }
.journey-pin.p3 { right: 25%; bottom: 24%; animation-delay: -2.4s; }

.journey-person {
    width: 1.9rem;
    height: 1.9rem;
    color: #07100d;
    font-size: 0.72rem;
    font-weight: 950;
    background: rgba(var(--ubx-kind-chat-rgb), 1);
    opacity: 0;
    transition: opacity 240ms ease, transform 420ms ease;
}

.journey-person.a { top: 42%; left: 48%; }
.journey-person.b { right: 34%; bottom: 31%; }

.ubx-journey-card,
.ubx-journey-caption,
.ubx-journey-brief {
    position: absolute;
    z-index: 7;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.036)),
        rgba(7, 12, 10, 0.72);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.11),
        0 1.4rem 3.2rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(20px);
    transform-style: preserve-3d;
    transition:
        opacity 280ms ease,
        filter 280ms ease,
        transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 280ms ease;
}

.ubx-journey-card {
    display: grid;
    gap: 0.22rem;
    width: min(19rem, 32%);
    padding: 0.86rem;
    border-radius: 1.15rem;
    opacity: 0.42;
    filter: saturate(0.76);
}

.ubx-journey-card small,
.ubx-journey-card span,
.ubx-journey-caption small,
.ubx-journey-caption span {
    color: rgba(255, 255, 255, 0.68);
}

.ubx-journey-card small,
.ubx-journey-caption small {
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-journey-card strong,
.ubx-journey-caption strong {
    color: #fff;
    line-height: 1.08;
}

.journey-search {
    top: 2rem;
    left: 2.1rem;
    transform: translate3d(0, 0, 86px) rotateY(5deg);
}

.journey-place {
    top: 6rem;
    right: 2rem;
    width: min(21rem, 35%);
    transform: translate3d(0, 0, 112px) rotateY(-6deg);
}

.journey-photo-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.journey-photo-row i {
    height: 2.5rem;
    border-radius: 0.55rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent),
        rgba(var(--ubx-primary-rgb), 0.12);
}

.journey-list {
    left: 2.6rem;
    bottom: 9.5rem;
    transform: translate3d(0, 0, 96px) rotateY(4deg);
}

.journey-chat {
    right: 2.2rem;
    bottom: 8.6rem;
    transform: translate3d(0, 0, 118px) rotateY(-4deg);
}

.journey-chat p {
    width: fit-content;
    max-width: 90%;
    margin: 0.25rem 0;
    padding: 0.38rem 0.56rem;
    color: rgba(255, 255, 255, 0.78);
    border-radius: 0.76rem 0.76rem 0.76rem 0.2rem;
    background: rgba(255, 255, 255, 0.08);
}

.journey-chat p.right {
    margin-left: auto;
    color: #07100d;
    border-radius: 0.76rem 0.76rem 0.2rem;
    background: var(--ubx-primary);
}

.journey-log {
    right: 23%;
    bottom: 3.1rem;
    transform: translate3d(0, 0, 104px) rotateX(2deg);
}

.ubx-journey-caption {
    right: 2rem;
    bottom: 2rem;
    left: 2rem;
    padding: 1rem 1.1rem;
    border-radius: 1.25rem;
    transform: translateZ(172px);
}

.ubx-journey-caption small,
.ubx-journey-caption strong,
.ubx-journey-caption span {
    display: block;
}

.ubx-journey-caption small {
    color: var(--ubx-primary);
}

.ubx-journey-caption strong {
    max-width: 34rem;
    margin-top: 0.15rem;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.ubx-journey-caption span {
    max-width: 58rem;
    margin-top: 0.22rem;
}

.ubx-journey-brief {
    top: 12rem;
    left: 50%;
    display: grid;
    gap: 0.62rem;
    width: min(25rem, 44%);
    padding: 0.9rem;
    border-radius: 1.2rem;
    transform: translate3d(-50%, 0, 185px) rotateX(2deg);
}

.ubx-journey-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.32rem;
}

.ubx-journey-steps span {
    display: grid;
    gap: 0.08rem;
    place-items: center;
    min-height: 2.6rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.035);
}

.ubx-journey-steps b {
    color: var(--ubx-primary);
    font-size: 0.62rem;
}

.ubx-journey-steps span.is-complete,
.ubx-journey-steps span.is-active {
    color: #fff;
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    background: rgba(var(--ubx-primary-rgb), 0.11);
}

.ubx-journey-checklist {
    display: grid;
    gap: 0.34rem;
}

.ubx-journey-checklist span {
    position: relative;
    padding-left: 1.12rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    line-height: 1.28;
}

.ubx-journey-checklist span::before {
    position: absolute;
    top: 0.42rem;
    left: 0;
    width: 0.38rem;
    height: 0.38rem;
    content: "";
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.22rem rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-journey-brief button {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    padding: 0.58rem 0.72rem;
    color: #07100d;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0.9rem 2rem rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-journey-stage[data-journey-phase="discover"] .journey-search,
.ubx-journey-stage[data-journey-phase="discover"] .journey-place,
.ubx-journey-stage[data-journey-phase="save"] .journey-place,
.ubx-journey-stage[data-journey-phase="plan"] .journey-list,
.ubx-journey-stage[data-journey-phase="team"] .journey-chat,
.ubx-journey-stage[data-journey-phase="remember"] .journey-log {
    opacity: 1;
    filter: none;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.12),
        0 1.7rem 4rem rgba(var(--ubx-primary-rgb), 0.13),
        0 1.4rem 3.2rem rgba(0, 0, 0, 0.24);
}

.ubx-journey-stage[data-journey-phase="save"] .journey-place {
    transform: translate3d(-1rem, 0.2rem, 168px) rotateY(-3deg) scale(1.05);
}

.ubx-journey-stage[data-journey-phase="plan"] .journey-route,
.ubx-journey-stage[data-journey-phase="team"] .journey-route,
.ubx-journey-stage[data-journey-phase="remember"] .journey-route {
    opacity: 1;
}

.ubx-journey-stage[data-journey-phase="plan"] .journey-list {
    transform: translate3d(1rem, -0.9rem, 168px) rotateY(2deg) scale(1.06);
}

.ubx-journey-stage[data-journey-phase="team"] .journey-person,
.ubx-journey-stage[data-journey-phase="remember"] .journey-person {
    opacity: 1;
    transform: translateY(-0.18rem);
}

.ubx-journey-stage[data-journey-phase="team"] .journey-chat {
    transform: translate3d(-1rem, -0.9rem, 178px) rotateY(-2deg) scale(1.06);
}

.ubx-journey-stage[data-journey-phase="remember"] .journey-log {
    transform: translate3d(-0.4rem, -1.1rem, 176px) rotateX(0deg) scale(1.06);
}

.ubx-journey-stage[data-journey-phase="remember"] .ubx-journey-map-plane {
    filter: saturate(0.82) brightness(0.9);
    transform: rotateX(58deg) rotateZ(-8deg) translate3d(0, 2.5rem, -5rem) scale(0.96);
}

.ubx-journey-stage.is-journey-playing .ubx-journey-card {
    animation: ubx-journey-pop 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-decision-showcase {
    position: relative;
}

.ubx-decision-copy-stack {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.ubx-decision-copy-stack span {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding: 0.95rem 1rem;
    color: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(18px);
}

.ubx-decision-copy-stack b {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    color: rgb(var(--ubx-primary-rgb));
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.18);
}

.ubx-decision-board {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 80% 12%, rgba(var(--ubx-primary-rgb), 0.22), transparent 32%),
        linear-gradient(145deg, rgba(10, 16, 14, 0.96), rgba(19, 27, 24, 0.9));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform-style: preserve-3d;
}

.ubx-decision-browserbar {
    position: absolute;
    inset: 1.1rem 1.1rem auto;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(7, 12, 10, 0.78);
    backdrop-filter: blur(18px);
}

.ubx-decision-browserbar span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
}

.ubx-decision-browserbar strong {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-decision-browserbar em {
    margin-left: auto;
    color: rgb(var(--ubx-primary-rgb));
    font-size: 0.75rem;
    font-style: normal;
}

.ubx-decision-map {
    position: absolute;
    inset: 4.5rem 1.1rem 1.1rem;
    overflow: hidden;
    border-radius: 1.6rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 30% 24%, rgba(144, 184, 157, 0.2), transparent 22%),
        radial-gradient(circle at 72% 70%, rgba(61, 110, 98, 0.28), transparent 28%),
        linear-gradient(135deg, #1b261f, #26322b);
    background-size: 46px 46px, 46px 46px, auto, auto, auto;
    transform: translateZ(18px);
}

.ubx-decision-map::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 52% 45%, transparent 0 28%, rgba(0, 0, 0, 0.28) 70%);
    pointer-events: none;
}

.decision-road,
.decision-water,
.decision-route,
.decision-zone,
.decision-pin {
    position: absolute;
    z-index: 2;
}

.decision-road {
    height: 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.decision-road.road-a {
    top: 45%;
    left: -8%;
    width: 72%;
    transform: rotate(-11deg);
}

.decision-road.road-b {
    top: 65%;
    right: -5%;
    width: 54%;
    transform: rotate(23deg);
}

.decision-water {
    top: 6%;
    left: 64%;
    width: 30%;
    height: 58%;
    border-radius: 44% 56% 41% 59%;
    background: rgba(73, 129, 151, 0.34);
    filter: blur(0.2px);
}

.decision-zone {
    padding: 0.35rem 0.6rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.76rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
}

.decision-zone.zone-a {
    top: 22%;
    left: 12%;
}

.decision-zone.zone-b {
    right: 14%;
    bottom: 18%;
}

.decision-route {
    top: 39%;
    left: 27%;
    width: 34%;
    height: 28%;
    border: 2px dashed rgba(var(--ubx-primary-rgb), 0.72);
    border-bottom: 0;
    border-left: 0;
    border-radius: 0 3rem 0 0;
    transform: rotate(8deg);
    animation: ubx-decision-route 3.8s ease-in-out infinite;
}

.decision-pin {
    display: grid;
    place-items: center;
    border-radius: 999px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.decision-pin.main {
    top: 42%;
    left: 42%;
    z-index: 5;
    width: 3.4rem;
    height: 3.4rem;
    color: #07100c;
    background: rgb(var(--ubx-primary-rgb));
    transform: translateZ(56px);
    animation: ubx-decision-pin 2.6s ease-in-out infinite;
}

.decision-pin.main svg {
    width: 1.35rem;
    height: 1.35rem;
}

.decision-pin.near {
    width: 1.15rem;
    height: 1.15rem;
    background: rgba(255, 255, 255, 0.78);
}

.decision-pin.near.a {
    top: 58%;
    left: 26%;
}

.decision-pin.near.b {
    top: 34%;
    right: 23%;
}

.ubx-decision-place-card,
.ubx-decision-actions,
.ubx-decision-status,
.ubx-decision-live-caption {
    position: absolute;
    z-index: 9;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(8, 13, 11, 0.78);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(22px);
}

.ubx-decision-place-card {
    bottom: 2rem;
    left: 2rem;
    width: min(330px, calc(100% - 4rem));
    padding: 1rem;
    border-radius: 1.35rem;
    transform: translateZ(80px);
}

.ubx-decision-photo-row {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.75fr;
    gap: 0.45rem;
    height: 74px;
    margin-bottom: 0.85rem;
}

.ubx-decision-photo-row i {
    border-radius: 0.8rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
        radial-gradient(circle at 30% 20%, rgba(var(--ubx-primary-rgb), 0.32), transparent 48%);
}

.ubx-decision-place-card small,
.ubx-decision-place-card span {
    color: rgba(255, 255, 255, 0.62);
}

.ubx-decision-place-card strong {
    display: block;
    color: #fff;
    font-size: 1.18rem;
}

.ubx-decision-live-caption {
    top: 6.2rem;
    left: 2rem;
    display: grid;
    gap: 0.2rem;
    width: min(310px, calc(100% - 4rem));
    padding: 0.9rem 1rem;
    border-radius: 1.2rem;
    transform: translateZ(118px);
}

.ubx-decision-live-caption small {
    color: rgb(var(--ubx-primary-rgb));
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-decision-live-caption strong {
    color: #fff;
    font-size: 1.04rem;
    line-height: 1.12;
}

.ubx-decision-live-caption span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.82rem;
    line-height: 1.35;
}

.ubx-decision-actions {
    top: 6.2rem;
    right: 2rem;
    display: grid;
    gap: 0.55rem;
    width: min(290px, calc(100% - 4rem));
    padding: 0.75rem;
    border-radius: 1.35rem;
    transform: translateZ(96px);
}

.ubx-decision-actions button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    color: rgba(255, 255, 255, 0.84);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.055);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ubx-decision-actions button:hover,
.ubx-decision-actions button.is-active {
    border-color: rgba(var(--ubx-primary-rgb), 0.45);
    background: rgba(var(--ubx-primary-rgb), 0.1);
    box-shadow: 0 18px 42px rgba(var(--ubx-primary-rgb), 0.12);
    transform: translateY(-2px);
}

.ubx-decision-actions svg {
    width: 1.15rem;
    height: 1.15rem;
    color: rgb(var(--ubx-primary-rgb));
}

.ubx-decision-actions strong,
.ubx-decision-actions small {
    display: block;
}

.ubx-decision-actions small {
    color: rgba(255, 255, 255, 0.55);
}

.ubx-decision-status {
    right: 2rem;
    bottom: 2rem;
    display: grid;
    gap: 0.45rem;
    width: min(300px, calc(100% - 4rem));
    padding: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.84rem;
    border-radius: 1.1rem;
}

.ubx-decision-status span {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ubx-decision-status b {
    color: inherit;
    font-weight: 760;
}

.ubx-decision-status svg {
    color: rgb(var(--ubx-primary-rgb));
}

.ubx-decision-board[data-decision-action="favorite"] .decision-pin.main,
.ubx-decision-board[data-decision-action="logbook"] .decision-pin.main,
.ubx-decision-board[data-decision-action="list"] .decision-pin.near.a,
.ubx-decision-board[data-decision-action="team"] .decision-pin.near.b {
    box-shadow:
        0 1rem 2.2rem rgba(var(--ubx-primary-rgb), 0.2),
        0 0 0 0.42rem rgba(var(--ubx-primary-rgb), 0.14);
    transform: translateZ(90px) scale(1.08);
}

.ubx-decision-board[data-decision-action="list"] .decision-route,
.ubx-decision-board[data-decision-action="team"] .decision-route {
    opacity: 1;
}

.ubx-decision-board[data-decision-action="logbook"] .ubx-decision-place-card,
.ubx-decision-board[data-decision-action="list"] .ubx-decision-place-card,
.ubx-decision-board[data-decision-action="team"] .ubx-decision-place-card {
    transform: translateZ(110px) translateY(-0.35rem);
}

.ubx-decision-board[data-decision-action="team"] .ubx-decision-map {
    filter: saturate(1.08) contrast(1.04);
}

.ubx-decision-board.is-decision-playing .ubx-decision-live-caption {
    animation: ubx-decision-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-list-showcase,
.ubx-chat-showcase {
    overflow: visible;
}

.ubx-list-benefits,
.ubx-chat-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.ubx-list-benefits span,
.ubx-chat-points span {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.62rem 0.82rem;
    color: var(--ubx-muted);
    border: 1px solid var(--ubx-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(14px);
}

.ubx-list-benefits svg,
.ubx-chat-points svg {
    width: 1rem;
    height: 1rem;
    color: var(--ubx-primary);
}

.ubx-list-mode-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.2rem;
}

.ubx-list-mode-controls button {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
    padding: 0.62rem 0.78rem;
    color: var(--ubx-muted);
    font-weight: 820;
    border: 1px solid var(--ubx-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(14px);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ubx-list-mode-controls button:hover,
.ubx-list-mode-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-kind-list-rgb), 0.42);
    background: rgba(var(--ubx-kind-list-rgb), 0.12);
    box-shadow: 0 0.9rem 2rem rgba(var(--ubx-kind-list-rgb), 0.12);
    transform: translateY(-0.06rem);
}

.ubx-list-mode-controls svg {
    width: 1rem;
    height: 1rem;
    color: var(--ubx-kind-list);
}

.ubx-list-lab,
.ubx-chat-lab {
    position: relative;
    overflow: hidden;
    min-height: 36rem;
    padding: 1rem;
    border: 1px solid var(--ubx-border);
    border-radius: 2rem;
    background:
        radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 255, 255, 0.1), transparent 24rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
        var(--ubx-surface);
    box-shadow:
        0 2.4rem 7rem rgba(0, 0, 0, 0.28),
        0 0 4rem rgba(var(--ubx-primary-rgb), 0.08);
    backdrop-filter: blur(24px);
}

.ubx-list-lab::before,
.ubx-chat-lab::before {
    position: absolute;
    inset: 10%;
    pointer-events: none;
    content: "";
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(var(--ubx-primary-rgb), 0.16), transparent 58%);
    filter: blur(28px);
    opacity: 0.55;
}

.ubx-list-mode-caption {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 8;
    display: grid;
    gap: 0.16rem;
    width: min(20rem, calc(100% - 2rem));
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.15rem;
    background: rgba(7, 10, 14, 0.68);
    box-shadow: 0 1.35rem 3rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    transform: translateZ(170px);
}

.ubx-list-mode-caption small {
    color: var(--ubx-kind-list);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-list-mode-caption strong {
    font-size: 1.08rem;
    line-height: 1.08;
}

.ubx-list-mode-caption span {
    color: var(--ubx-muted);
    line-height: 1.36;
}

.ubx-list-browserbar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 8;
    display: flex;
    gap: 0.65rem;
    align-items: center;
    max-width: min(24rem, calc(100% - 23rem));
    padding: 0.68rem 0.78rem;
    color: var(--ubx-muted);
    font-size: 0.76rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(7, 10, 14, 0.62);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px);
    transform: translateZ(150px);
}

.ubx-list-browserbar span,
.ubx-list-browserbar strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ubx-list-browserbar span {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    min-width: 0;
}

.ubx-list-browserbar svg {
    flex: 0 0 auto;
    color: var(--ubx-kind-list);
}

.ubx-list-browserbar strong {
    color: var(--ubx-text);
    font-weight: 900;
}

.ubx-list-stack {
    position: absolute;
    top: 11%;
    left: 8%;
    z-index: 2;
    width: min(24rem, 78%);
    min-height: 18rem;
    perspective: var(--showcase-depth);
}

.ubx-list-card {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 6.7rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.35rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
        rgba(10, 12, 18, 0.74);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    transform-style: preserve-3d;
    transition:
        opacity 520ms ease,
        filter 520ms ease,
        transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.ubx-list-card small,
.ubx-list-card strong {
    display: block;
}

.ubx-list-card small {
    color: var(--ubx-muted);
    font-size: 0.8rem;
}

.ubx-list-card strong {
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.ubx-list-card em {
    display: block;
    margin-top: 0.22rem;
    color: var(--ubx-muted);
    font-size: 0.76rem;
    font-style: normal;
}

.ubx-list-card > span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 4.3rem;
    padding: 0.45rem 0.65rem;
    color: var(--ubx-text);
    font-weight: 800;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
}

.list-card-primary {
    z-index: 3;
    animation: ubx-list-card-primary 7s ease-in-out infinite;
}

.list-card-secondary {
    z-index: 2;
    animation: ubx-list-card-secondary 7s ease-in-out -1.5s infinite;
}

.list-card-logbook {
    z-index: 1;
    color: var(--ubx-kind-list);
    border-color: rgba(var(--ubx-kind-list-rgb), 0.24);
    animation: ubx-list-card-logbook 7s ease-in-out -3s infinite;
}

.list-card-logbook svg {
    width: 1.3rem;
    height: 1.3rem;
}

.ubx-list-map-strip {
    position: absolute;
    right: 8%;
    bottom: 13%;
    width: min(23rem, 74%);
    height: 15rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 1.4rem;
    background:
        repeating-linear-gradient(0deg, transparent 0 2rem, rgba(255, 255, 255, 0.055) 2rem 2.05rem),
        repeating-linear-gradient(90deg, transparent 0 2rem, rgba(255, 255, 255, 0.055) 2rem 2.05rem),
        rgba(0, 0, 0, 0.18);
    transform: perspective(760px) rotateX(58deg) rotateZ(-8deg);
    box-shadow: 0 3rem 4rem rgba(0, 0, 0, 0.24);
    transition:
        transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 260ms ease;
}

.ubx-list-real-table {
    position: absolute;
    right: 7%;
    top: 19%;
    z-index: 5;
    display: grid;
    gap: 0.5rem;
    width: min(24rem, 52%);
    padding: 0.82rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.2rem;
    background: rgba(8, 11, 16, 0.74);
    box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    transform: translateZ(112px);
    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease,
        filter 260ms ease;
}

.ubx-list-real-table-head,
.ubx-list-real-table article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(5.8rem, auto) auto;
    gap: 0.58rem;
    align-items: center;
}

.ubx-list-real-table-head {
    color: var(--ubx-muted);
    font-size: 0.76rem;
    font-weight: 850;
}

.ubx-list-real-table-head span {
    display: inline-flex;
    grid-column: span 2;
    gap: 0.34rem;
    align-items: center;
    min-width: 0;
}

.ubx-list-real-table-head strong {
    grid-column: span 2;
    justify-self: end;
    color: var(--ubx-kind-list);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ubx-list-real-table article {
    padding: 0.52rem 0.56rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.88rem;
    background: rgba(255, 255, 255, 0.045);
}

.ubx-list-real-table article span,
.ubx-list-real-table article small,
.ubx-list-real-table article em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-list-real-table article span {
    color: var(--ubx-text);
    font-size: 0.86rem;
    font-weight: 900;
}

.ubx-list-real-table article small,
.ubx-list-real-table article em {
    color: var(--ubx-muted);
    font-size: 0.74rem;
    font-style: normal;
}

.ubx-list-real-table article em {
    justify-self: end;
    padding: 0.22rem 0.42rem;
    border-radius: 999px;
    background: rgba(var(--ubx-kind-list-rgb), 0.1);
}

.list-type {
    width: 0.72rem;
    aspect-ratio: 1;
    border-radius: 999px;
    box-shadow: 0 0 0 0.32rem rgba(var(--ubx-primary-rgb), 0.12);
}

.list-type.lost { background: var(--ubx-primary); }
.list-type.parkour { background: var(--ubx-kind-category); }
.list-type.private { background: var(--ubx-kind-list); }

.list-map-route {
    position: absolute;
    inset: 42% 13% 38% 16%;
    border-top: 3px solid rgba(var(--ubx-primary-rgb), 0.82);
    border-right: 3px solid rgba(var(--ubx-primary-rgb), 0.45);
    border-radius: 70% 30% 90% 35%;
    transform: rotate(-13deg);
}

.list-map-pin {
    position: absolute;
    z-index: 2;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.5rem rgba(var(--ubx-primary-rgb), 0.12),
        0 0 1.6rem rgba(var(--ubx-primary-rgb), 0.26);
    animation: ubx-list-pin 2.8s ease-in-out infinite;
}

.lp-a { top: 27%; left: 24%; }
.lp-b { top: 46%; left: 48%; animation-delay: -0.7s; }
.lp-c { top: 56%; right: 22%; animation-delay: -1.4s; }
.lp-d { bottom: 20%; left: 36%; animation-delay: -2.1s; }

.ubx-list-permission-orbit {
    position: absolute;
    top: 8%;
    right: 8%;
    width: 12rem;
    height: 12rem;
    border: 1px dashed rgba(var(--ubx-primary-rgb), 0.28);
    border-radius: 999px;
    animation: ubx-slow-rotate 18s linear infinite;
}

.permission-node {
    position: absolute;
    display: inline-grid;
    min-width: 5.4rem;
    padding: 0.45rem 0.6rem;
    place-items: center;
    color: var(--ubx-text);
    font-size: 0.78rem;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(10, 12, 18, 0.74);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(14px);
    animation: ubx-slow-rotate 18s linear infinite reverse;
}

.permission-node.owner { top: -0.8rem; left: 3rem; }
.permission-node.mod { right: -2.2rem; bottom: 3.5rem; }
.permission-node.member { bottom: -0.9rem; left: 0.8rem; }

.ubx-list-import-beam {
    position: absolute;
    right: 8%;
    bottom: 7%;
    left: 8%;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(3rem, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-list-import-beam span {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.62rem 0.78rem;
    color: var(--ubx-text);
    font-size: 0.88rem;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(10, 12, 18, 0.72);
    backdrop-filter: blur(14px);
    transition:
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ubx-list-import-beam i {
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(var(--ubx-primary-rgb), 0.85), transparent);
    box-shadow: 0 0 1.5rem rgba(var(--ubx-primary-rgb), 0.28);
}

.ubx-list-import-beam i::before {
    display: block;
    width: 45%;
    height: 100%;
    content: "";
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: ubx-beam-flow 2s ease-in-out infinite;
}

.ubx-list-inspector {
    position: absolute;
    right: 8%;
    top: 46%;
    z-index: 4;
    display: grid;
    gap: 0.55rem;
    width: min(15rem, 45%);
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.2rem;
    background: rgba(10, 12, 18, 0.72);
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
    transform: translateZ(110px);
    transition:
        border-color 220ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-list-inspector strong {
    font-size: 0.9rem;
}

.ubx-list-inspector span {
    display: grid;
    gap: 0.28rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
}

.ubx-list-inspector i {
    display: block;
    height: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.ubx-list-inspector i::before {
    display: block;
    width: var(--bar);
    height: 100%;
    content: "";
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 0.8));
    box-shadow: 0 0 1rem rgba(var(--ubx-primary-rgb), 0.22);
}

.ubx-list-flow-panel {
    position: absolute;
    right: 8%;
    bottom: 18%;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    width: min(24rem, 78%);
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.15rem;
    background: rgba(8, 11, 16, 0.68);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.23);
    backdrop-filter: blur(18px);
    transform: translateZ(130px);
    transition:
        border-color 240ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 240ms ease;
}

.ubx-list-flow-panel button,
.ubx-list-flow-panel span {
    display: inline-flex;
    gap: 0.34rem;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.52rem 0.58rem;
    color: var(--ubx-muted);
    font-size: 0.74rem;
    font-weight: 850;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.86rem;
    background: rgba(255, 255, 255, 0.05);
}

.ubx-list-flow-panel button {
    color: var(--ubx-text);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.ubx-list-flow-panel button:hover {
    border-color: rgba(var(--ubx-kind-list-rgb), 0.34);
    background: rgba(var(--ubx-kind-list-rgb), 0.1);
    box-shadow: 0 0.8rem 1.6rem rgba(var(--ubx-kind-list-rgb), 0.1);
    transform: translateY(-0.08rem);
}

.ubx-list-flow-panel svg {
    flex: 0 0 auto;
    color: var(--ubx-kind-list);
}

.ubx-list-flow-panel span {
    grid-column: 1 / -1;
}

.ubx-list-lab[data-list-mode="private"] .list-card-secondary {
    z-index: 5;
    border-color: rgba(var(--ubx-kind-list-rgb), 0.42);
    box-shadow:
        0 1.8rem 3.8rem rgba(0, 0, 0, 0.28),
        0 0 2.4rem rgba(var(--ubx-kind-list-rgb), 0.16);
    transform: translate3d(0.4rem, -0.4rem, 130px) rotateX(0deg) rotateY(-4deg) scale(1.04);
    animation-play-state: paused;
}

.ubx-list-lab[data-list-mode="private"] .list-card-primary,
.ubx-list-lab[data-list-mode="private"] .list-card-logbook {
    opacity: 0.58;
    filter: saturate(0.72);
}

.ubx-list-lab[data-list-mode="group"] .ubx-list-permission-orbit {
    border-color: rgba(var(--ubx-primary-rgb), 0.5);
    box-shadow: 0 0 3rem rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-list-lab[data-list-mode="group"] .permission-node {
    border-color: rgba(var(--ubx-primary-rgb), 0.32);
    background: rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-list-lab[data-list-mode="group"] .list-card-primary {
    z-index: 5;
    transform: translate3d(1.2rem, 0, 120px) rotateY(-5deg) scale(1.02);
    animation-play-state: paused;
}

.ubx-list-lab[data-list-mode="group"] .ubx-list-real-table {
    border-color: rgba(var(--ubx-primary-rgb), 0.3);
    box-shadow:
        0 1.4rem 3.2rem rgba(0, 0, 0, 0.24),
        0 0 2.5rem rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-list-lab[data-list-mode="explore"] .ubx-list-import-beam {
    transform: translate3d(0, -0.3rem, 140px);
}

.ubx-list-lab[data-list-mode="explore"] .ubx-list-import-beam span {
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
    box-shadow: 0 0 2rem rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-list-lab[data-list-mode="explore"] .ubx-list-map-strip {
    box-shadow:
        0 3rem 4rem rgba(0, 0, 0, 0.24),
        0 0 3rem rgba(var(--ubx-primary-rgb), 0.16);
    transform: perspective(760px) rotateX(52deg) rotateZ(-5deg) translateY(-0.4rem);
}

.ubx-list-lab[data-list-mode="explore"] .ubx-list-flow-panel {
    border-color: rgba(var(--ubx-primary-rgb), 0.32);
    box-shadow:
        0 1.5rem 3rem rgba(0, 0, 0, 0.23),
        0 0 2.6rem rgba(var(--ubx-primary-rgb), 0.13);
    transform: translate3d(0, -0.5rem, 170px);
}

.ubx-list-lab[data-list-mode="explore"] .list-map-route,
.ubx-list-lab[data-list-mode="explore"] .list-map-pin {
    filter: brightness(1.24);
}

.ubx-list-lab[data-list-mode="public"] .list-card-primary {
    z-index: 6;
    border-color: rgba(var(--ubx-kind-person-rgb), 0.36);
    box-shadow:
        0 1.8rem 3.8rem rgba(0, 0, 0, 0.28),
        0 0 2.5rem rgba(var(--ubx-kind-person-rgb), 0.15);
    transform: translate3d(0.6rem, -0.8rem, 150px) rotateY(-3deg) scale(1.05);
    animation-play-state: paused;
}

.ubx-list-lab[data-list-mode="public"] .ubx-list-inspector {
    border-color: rgba(var(--ubx-kind-person-rgb), 0.28);
    transform: translate3d(0, -0.4rem, 160px) scale(1.04);
}

.ubx-list-lab[data-list-mode="private"] .ubx-list-real-table {
    transform: translate3d(-0.3rem, -0.2rem, 150px);
}

.ubx-chat-lab {
    display: grid;
    grid-template-columns: minmax(11rem, 0.36fr) minmax(0, 1fr);
    gap: 1rem;
}

.ubx-chat-sidebar,
.ubx-chat-window {
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.45rem;
    background: rgba(10, 12, 18, 0.62);
    backdrop-filter: blur(18px);
}

.ubx-chat-sidebar {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1rem;
}

.ubx-chat-sidebar > strong {
    margin-bottom: 0.35rem;
}

.ubx-chat-room {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.72rem;
    align-items: center;
    width: 100%;
    padding: 0.75rem;
    color: inherit;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.055);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}

.ubx-chat-room.is-active {
    border-color: rgba(var(--ubx-primary-rgb), 0.32);
    background: rgba(var(--ubx-primary-rgb), 0.1);
    box-shadow: 0 0.9rem 2rem rgba(var(--ubx-primary-rgb), 0.1);
    transform: translateX(0.25rem);
}

.ubx-chat-room:hover {
    transform: translateX(0.18rem);
}

.ubx-chat-room.request {
    color: var(--ubx-muted);
}

.ubx-chat-room > span {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: #07140d;
    border-radius: 0.85rem;
    background: var(--ubx-primary);
}

.ubx-chat-room strong,
.ubx-chat-room small {
    display: block;
}

.ubx-chat-room small {
    color: var(--ubx-muted);
}

.ubx-chat-guard {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 0.15rem;
    padding: 0.8rem;
    color: var(--ubx-muted);
    font-size: 0.84rem;
    line-height: 1.35;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.14);
    border-radius: 1rem;
    background: rgba(var(--ubx-primary-rgb), 0.055);
}

.ubx-chat-guard svg {
    flex: 0 0 auto;
    color: var(--ubx-primary);
    margin-top: 0.1rem;
}

.ubx-chat-window {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto auto;
    min-height: 30rem;
    overflow: hidden;
}

.ubx-chat-header,
.ubx-chat-composer-demo {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ubx-chat-header small {
    display: block;
    color: var(--ubx-muted);
}

.ubx-chat-header > span {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.46rem 0.62rem;
    color: var(--ubx-primary);
    font-size: 0.84rem;
    font-weight: 800;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.24);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.08);
}

.ubx-chat-scene-controls {
    display: flex;
    gap: 0.48rem;
    flex-wrap: wrap;
    padding: 0.78rem 1rem 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ubx-chat-scene-controls button {
    display: inline-flex;
    gap: 0.34rem;
    align-items: center;
    padding: 0.46rem 0.64rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ubx-chat-scene-controls button:hover,
.ubx-chat-scene-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    background: rgba(var(--ubx-primary-rgb), 0.1);
    transform: translateY(-0.05rem);
    box-shadow: 0 0.7rem 1.55rem rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-chat-scene-controls svg {
    color: var(--ubx-primary);
}

.ubx-chat-scene-copy {
    display: block;
    min-height: 2.35rem;
    padding: 0 1rem 0.72rem;
    color: var(--ubx-muted);
    line-height: 1.45;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ubx-chat-focus-card {
    display: flex;
    gap: 0.72rem;
    align-items: center;
    margin: 0.82rem 1rem 0;
    padding: 0.82rem 0.9rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    border-radius: 1.05rem;
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.1), rgba(255, 255, 255, 0.035)),
        rgba(255, 255, 255, 0.045);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.14);
}

.ubx-chat-focus-card > span {
    display: inline-grid;
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 auto;
    place-items: center;
    color: #07140d;
    border-radius: 0.9rem;
    background: var(--ubx-primary);
    box-shadow: 0 0.8rem 1.6rem rgba(var(--ubx-primary-rgb), 0.18);
}

.ubx-chat-focus-card strong,
.ubx-chat-focus-card small {
    display: block;
}

.ubx-chat-focus-card small {
    color: var(--ubx-muted);
}

.ubx-chat-thread {
    display: grid;
    align-content: end;
    gap: 0.72rem;
    padding: 1.15rem 1rem;
    transition: background 240ms ease;
}

.bubble {
    max-width: 78%;
    padding: 0.72rem 0.88rem;
    margin: 0;
    border-radius: 1.1rem;
    color: var(--ubx-text);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateY(0.9rem);
    animation: ubx-chat-message 7.5s ease-in-out infinite;
    transition:
        opacity 220ms ease,
        transform 220ms ease,
        filter 220ms ease,
        border-color 220ms ease,
        background 220ms ease;
}

.bubble-demo-sent {
    opacity: 1;
    animation: ubx-demo-message-pop 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bubble-left {
    justify-self: start;
    border-bottom-left-radius: 0.3rem;
}

.bubble-right {
    justify-self: end;
    border-bottom-right-radius: 0.3rem;
    background: rgba(var(--ubx-primary-rgb), 0.16);
}

.bubble-system {
    justify-self: center;
    max-width: 92%;
    color: var(--ubx-muted);
    font-size: 0.86rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
}

.bubble-attachment {
    justify-self: start;
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    color: var(--ubx-primary);
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    background: rgba(var(--ubx-primary-rgb), 0.08);
}

.bubble-typing {
    justify-self: start;
    display: inline-flex;
    gap: 0.28rem;
    width: auto;
    padding: 0.62rem 0.76rem;
}

.bubble-typing i {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: var(--ubx-muted);
    animation: ubx-chat-typing 1.2s ease-in-out infinite;
}

.bubble-typing i:nth-child(2) { animation-delay: 0.15s; }
.bubble-typing i:nth-child(3) { animation-delay: 0.3s; }

.bubble:nth-child(2) { animation-delay: 0.7s; }
.bubble:nth-child(3) { animation-delay: 1.4s; }
.bubble:nth-child(4) { animation-delay: 2.1s; }
.bubble:nth-child(5) { animation-delay: 2.8s; }
.bubble:nth-child(6) { animation-delay: 3.5s; }

.ubx-chat-context-strip {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ubx-chat-context-strip button {
    position: relative;
    display: flex;
    flex: 1 1 10rem;
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
    padding: 0.78rem 0.85rem;
    color: var(--ubx-text);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.055);
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ubx-chat-context-strip button:hover {
    border-color: rgba(var(--ubx-primary-rgb), 0.32);
    background: rgba(var(--ubx-primary-rgb), 0.09);
    transform: translateY(-0.08rem);
    box-shadow: 0 0.8rem 1.6rem rgba(var(--ubx-primary-rgb), 0.09);
}

.ubx-chat-context-strip button > svg {
    flex: 0 0 auto;
    color: var(--ubx-primary);
}

.ubx-chat-context-strip strong,
.ubx-chat-context-strip small {
    display: block;
}

.ubx-chat-context-strip small {
    color: var(--ubx-muted);
}

.ubx-chat-lab[data-chat-scene="marker"] .ubx-chat-context-strip button:first-child,
.ubx-chat-lab[data-chat-scene="media"] .ubx-chat-context-strip button:nth-child(2),
.ubx-chat-lab[data-chat-scene="media"] .bubble-attachment,
.ubx-chat-lab[data-chat-scene="request"] .ubx-chat-guard,
.ubx-chat-lab[data-chat-scene="sync"] .ubx-chat-live-status,
.ubx-chat-lab[data-chat-scene="sync"] .bubble-system {
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
    background: rgba(var(--ubx-primary-rgb), 0.11);
    box-shadow:
        0 0.95rem 1.9rem rgba(var(--ubx-primary-rgb), 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ubx-chat-lab[data-chat-scene="marker"] .ubx-chat-context-strip button:first-child,
.ubx-chat-lab[data-chat-scene="media"] .ubx-chat-context-strip button:nth-child(2),
.ubx-chat-lab[data-chat-scene="request"] .ubx-chat-guard {
    transform: translateY(-0.08rem);
}

.ubx-chat-lab[data-chat-scene="media"] .ubx-chat-focus-card > span {
    background: rgba(var(--ubx-ambient-secondary-rgb), 0.95);
    color: var(--ubx-text);
}

.ubx-chat-lab[data-chat-scene="request"] .ubx-chat-focus-card {
    border-color: rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(var(--ubx-primary-rgb), 0.045)),
        rgba(255, 255, 255, 0.04);
}

.ubx-chat-lab[data-chat-scene="sync"] .ubx-chat-focus-card {
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    box-shadow:
        0 1rem 2rem rgba(0, 0, 0, 0.14),
        0 0 2rem rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-chat-lab[data-chat-scene="request"] .ubx-chat-room:not(.is-active),
.ubx-chat-lab[data-chat-scene="sync"] .ubx-chat-seen b {
    animation: ubx-soft-pulse 2.8s ease-in-out infinite;
}

.ubx-chat-context-map {
    position: relative;
    min-height: 8.2rem;
    margin: 0 1rem 0.9rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 1.05rem;
    background:
        repeating-linear-gradient(0deg, transparent 0 1.7rem, rgba(255, 255, 255, 0.045) 1.7rem 1.74rem),
        repeating-linear-gradient(90deg, transparent 0 1.7rem, rgba(255, 255, 255, 0.04) 1.7rem 1.74rem),
        radial-gradient(circle at 28% 34%, rgba(var(--ubx-primary-rgb), 0.14), transparent 5rem),
        rgba(7, 12, 10, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1rem 2.2rem rgba(0, 0, 0, 0.16);
    transform: translateZ(42px);
    transition:
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 220ms ease;
}

.ubx-chat-context-map::after {
    position: absolute;
    inset: 0;
    content: "";
    background: radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0, 0, 0, 0.26) 100%);
    pointer-events: none;
}

.chat-map-building,
.chat-map-route,
.chat-map-person,
.chat-map-marker,
.ubx-chat-context-map em {
    position: absolute;
    z-index: 2;
}

.chat-map-building {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.07);
}

.chat-map-building.a {
    top: 18%;
    left: 12%;
    width: 34%;
    height: 28%;
    transform: rotate(-8deg);
}

.chat-map-building.b {
    right: 13%;
    bottom: 16%;
    width: 28%;
    height: 34%;
    transform: rotate(10deg);
}

.chat-map-route {
    top: 43%;
    left: 28%;
    width: 38%;
    height: 24%;
    border-top: 2px dashed rgba(var(--ubx-primary-rgb), 0.72);
    border-right: 2px dashed rgba(var(--ubx-primary-rgb), 0.52);
    border-radius: 0 2rem 0 0;
    transform: rotate(7deg);
}

.chat-map-person,
.chat-map-marker {
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
}

.chat-map-person {
    width: 1.65rem;
    height: 1.65rem;
    color: #07140d;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 950;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.42rem rgba(var(--ubx-primary-rgb), 0.13);
}

.chat-map-person.a { top: 38%; left: 34%; }
.chat-map-person.b { top: 54%; right: 31%; }

.chat-map-marker {
    top: 22%;
    right: 27%;
    width: 1.95rem;
    height: 1.95rem;
    color: #07140d;
    background: var(--ubx-kind-list);
    box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.22);
    animation: ubx-reel-pin-pulse 2.5s ease-in-out infinite;
}

.ubx-chat-context-map em {
    right: 0.65rem;
    bottom: 0.55rem;
    z-index: 4;
    max-width: calc(100% - 1.3rem);
    padding: 0.34rem 0.5rem;
    color: var(--ubx-muted);
    font-size: 0.72rem;
    font-style: normal;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(10px);
}

.ubx-chat-lab[data-chat-scene="marker"] .ubx-chat-context-map,
.ubx-chat-lab[data-chat-scene="sync"] .ubx-chat-context-map {
    border-color: rgba(var(--ubx-primary-rgb), 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1rem 2.2rem rgba(0, 0, 0, 0.16),
        0 0 2rem rgba(var(--ubx-primary-rgb), 0.11);
    transform: translateZ(72px) translateY(-0.08rem);
}

.ubx-chat-lab[data-chat-scene="media"] .ubx-chat-context-map {
    filter: saturate(1.15);
}

.ubx-chat-lab[data-chat-scene="media"] .chat-map-marker {
    background: var(--ubx-kind-category);
}

.ubx-chat-lab[data-chat-scene="request"] .ubx-chat-context-map {
    filter: grayscale(0.24) saturate(0.72);
}

.ubx-chat-lab[data-chat-scene="request"] .chat-map-person,
.ubx-chat-lab[data-chat-scene="request"] .chat-map-marker {
    opacity: 0.5;
}

.ubx-chat-lab[data-chat-scene="sync"] .chat-map-person {
    animation: ubx-reel-pin-pulse 2.2s ease-in-out infinite;
}

.ubx-chat-live-status {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.65rem 1rem;
    color: var(--ubx-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ubx-chat-seen {
    display: inline-flex;
    margin-left: auto;
}

.ubx-chat-seen b {
    display: inline-grid;
    width: 1.35rem;
    height: 1.35rem;
    margin-left: -0.25rem;
    place-items: center;
    color: #07140d;
    font-size: 0.62rem;
    border: 2px solid rgba(10, 12, 18, 0.82);
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-chat-live-status .ubx-live-dot {
    flex: 0 0 auto;
    width: 0.62rem;
    height: 0.62rem;
    margin: 0;
}

.ubx-chat-composer-demo {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 0;
}

.ubx-chat-composer-demo input {
    flex: 1;
    min-width: 0;
    color: var(--ubx-muted);
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    outline: 0;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-chat-composer-demo input:focus {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.42);
    box-shadow: 0 0 0 0.18rem rgba(var(--ubx-primary-rgb), 0.1);
}

.ubx-chat-composer-demo button {
    position: relative;
    display: inline-grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    color: #07140d;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 1.8rem rgba(var(--ubx-primary-rgb), 0.24);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.ubx-chat-composer-demo button:hover {
    transform: translateY(-0.12rem);
    box-shadow: 0 0.65rem 1.8rem rgba(var(--ubx-primary-rgb), 0.24);
}

.ubx-tactical-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.42fr);
    gap: 1rem;
    min-height: 30rem;
    padding: 1rem;
    border-radius: 2rem;
    transform:
        perspective(var(--showcase-depth))
        rotateX(calc(10deg - var(--scroll-lift, 0) * 5deg))
        rotateY(calc(12deg - var(--scroll-lift, 0) * 9deg));
}

.ubx-tactical-map {
    position: relative;
    overflow: hidden;
    min-height: 28rem;
    border: 1px solid var(--ubx-border);
    border-radius: 1.45rem;
    background:
        radial-gradient(circle at 18% 18%, rgba(215, 192, 138, 0.18), transparent 18rem),
        radial-gradient(circle at 82% 72%, rgba(80, 105, 78, 0.22), transparent 17rem),
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.08), transparent 36%),
        #1f241f;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 -3rem 5rem rgba(0, 0, 0, 0.16);
}

.ubx-tactical-map::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 2.6rem 2.6rem;
    opacity: 0.48;
    mask-image: radial-gradient(circle at 48% 46%, black 0 62%, transparent 92%);
}

.ubx-tactical-terrain,
.ubx-tactical-road,
.ubx-tactical-zone {
    position: absolute;
    pointer-events: none;
}

.ubx-tactical-terrain {
    border-radius: 48% 52% 42% 58%;
    background: rgba(80, 112, 74, 0.24);
    filter: blur(0.2px);
}

.ubx-tactical-terrain.grass-a {
    top: -8%;
    right: -10%;
    width: 46%;
    height: 42%;
    transform: rotate(-11deg);
}

.ubx-tactical-terrain.grass-b {
    bottom: -9%;
    left: -12%;
    width: 55%;
    height: 42%;
    background: rgba(55, 91, 72, 0.26);
    transform: rotate(8deg);
}

.ubx-tactical-road {
    z-index: 1;
    height: 3.2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 16% 84%, rgba(255, 255, 255, 0.05)),
        rgba(111, 102, 86, 0.42);
    box-shadow: inset 0 0 1.5rem rgba(0, 0, 0, 0.18);
}

.ubx-tactical-road.main-road {
    top: 58%;
    left: -12%;
    width: 75%;
    transform: rotate(-16deg);
}

.ubx-tactical-road.service-road {
    top: 27%;
    right: -14%;
    width: 60%;
    height: 2.35rem;
    opacity: 0.74;
    transform: rotate(28deg);
}

.ubx-tactical-zone {
    z-index: 2;
    padding: 0.34rem 0.58rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
}

.ubx-tactical-zone.zone-a {
    top: 9%;
    left: 11%;
}

.ubx-tactical-zone.zone-b {
    right: 12%;
    bottom: 12%;
}

.ubx-tactical-building {
    position: absolute;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.9rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)),
        rgba(99, 95, 83, 0.48);
    box-shadow:
        0 1.1rem 1.7rem rgba(0, 0, 0, 0.18),
        inset 0 0 2rem rgba(0, 0, 0, 0.22);
}

.ubx-tactical-building::before {
    position: absolute;
    inset: 0.45rem;
    content: "";
    border-radius: 0.55rem;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 0.7rem 0.7rem;
    opacity: 0.42;
}

.b1 { top: 16%; left: 12%; width: 28%; height: 21%; transform: rotate(-8deg); }
.b2 { top: 48%; left: 24%; width: 38%; height: 18%; transform: rotate(7deg); }
.b3 { top: 24%; right: 13%; width: 18%; height: 46%; transform: rotate(3deg); }

.ubx-tactical-label {
    position: absolute;
    z-index: 2;
    padding: 0.28rem 0.45rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.26);
}

.l1 { top: 19%; left: 18%; transform: rotate(-8deg); }
.l2 { top: 39%; right: 24%; }

.ubx-tactical-route {
    position: absolute;
    z-index: 3;
    top: 39%;
    left: 18%;
    width: 62%;
    height: 27%;
    border-top: 3px solid rgba(var(--ubx-primary-rgb), 0.78);
    border-right: 3px solid rgba(var(--ubx-primary-rgb), 0.5);
    border-radius: 100% 25% 90% 20%;
    filter: drop-shadow(0 0 1rem rgba(var(--ubx-primary-rgb), 0.3));
    transform: rotate(11deg);
}

.ubx-tactical-person,
.ubx-tactical-marker {
    position: absolute;
    z-index: 5;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.ubx-tactical-person {
    width: 2.15rem;
    height: 2.15rem;
    color: #07140d;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0 1.5rem rgba(var(--ubx-primary-rgb), 0.25);
}

.p1 { top: 34%; left: 35%; }
.p2 { top: 63%; left: 57%; }
.p3 { top: 18%; right: 25%; }

.ubx-tactical-marker {
    width: 2rem;
    height: 2rem;
    color: var(--ubx-text);
    background: rgba(var(--ubx-ambient-secondary-rgb), 0.34);
    border: 1px solid rgba(var(--ubx-ambient-secondary-rgb), 0.5);
}

.ubx-tactical-marker svg {
    width: 1rem;
    height: 1rem;
}

.m1 { top: 22%; left: 55%; }
.m2 { bottom: 21%; left: 18%; }

.ubx-tactical-radius {
    position: absolute;
    z-index: 4;
    top: 41%;
    left: 35%;
    width: 11rem;
    height: 11rem;
    pointer-events: none;
    border: 1px dashed rgba(var(--ubx-primary-rgb), 0.42);
    border-radius: 999px;
    background: rgba(var(--ubx-primary-rgb), 0.055);
    opacity: 0;
    transform: scale(0.72);
    transition:
        opacity 260ms ease,
        transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-tactical-mapbar {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 7;
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background: rgba(10, 14, 12, 0.54);
    backdrop-filter: blur(16px);
}

.ubx-tactical-mapbar span {
    display: inline-flex;
    gap: 0.36rem;
    align-items: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.74rem;
    font-weight: 800;
}

.ubx-tactical-mapbar svg {
    color: var(--ubx-primary);
}

.ubx-tactical-replay-card {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.12rem 0.7rem;
    width: min(17rem, calc(100% - 2rem));
    padding: 0.78rem 0.86rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.22);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 0 0, rgba(var(--ubx-primary-rgb), 0.16), transparent 8rem),
        rgba(8, 12, 10, 0.72);
    box-shadow:
        0 1rem 2.4rem rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
}

.ubx-tactical-replay-card small {
    grid-column: 1 / -1;
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-tactical-replay-card strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ubx-text);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-tactical-replay-card span {
    color: var(--ubx-muted);
    font-size: 0.78rem;
    font-weight: 900;
}

.ubx-tactical-replay-card i {
    grid-column: 1 / -1;
    display: block;
    height: 0.32rem;
    margin-top: 0.48rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.ubx-tactical-replay-card b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 0.95));
    transition: width 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-tactical-person.is-highlighted,
.ubx-tactical-marker.is-highlighted {
    z-index: 4;
    transform: scale(1.18);
    box-shadow:
        0 0 0 0.72rem rgba(var(--ubx-primary-rgb), 0.14),
        0 0 2.5rem rgba(var(--ubx-primary-rgb), 0.36);
}

.ubx-tactical-person.is-muted,
.ubx-tactical-marker.is-muted {
    opacity: 0.48;
}

.ubx-tactical-radius.is-highlighted {
    opacity: 1;
    transform: scale(1);
}

.ubx-tactical-side {
    display: grid;
    align-content: end;
    padding: 1.15rem;
    border: 1px solid var(--ubx-border);
    border-radius: 1.45rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--ubx-primary-rgb), 0.2), transparent 14rem),
        rgba(255, 255, 255, 0.06);
}

.ubx-tactical-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0.8rem;
}

.ubx-tactical-roster,
.ubx-tactical-timeline {
    display: grid;
    gap: 0.48rem;
    margin-top: 0.75rem;
}

.ubx-tactical-roster span,
.ubx-tactical-timeline span {
    display: flex;
    gap: 0.48rem;
    align-items: center;
    padding: 0.48rem 0.58rem;
    color: var(--ubx-muted);
    font-size: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.045);
}

.ubx-tactical-roster b {
    display: inline-grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    color: #07140d;
    font-size: 0.65rem;
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-tactical-roster small {
    margin-left: auto;
    color: var(--ubx-primary);
}

.ubx-tactical-roster .stale {
    opacity: 0.68;
}

.ubx-tactical-timeline {
    margin-top: 0.85rem;
}

.ubx-tactical-timeline span {
    position: relative;
    padding-left: 1rem;
}

.ubx-tactical-timeline span::before {
    position: absolute;
    left: 0.45rem;
    width: 0.32rem;
    height: 0.32rem;
    content: "";
    border-radius: 999px;
    background: var(--ubx-primary);
}

.ubx-tactical-actions button {
    padding: 0.48rem 0.7rem;
    font-size: 0.86rem;
}

.ubx-tactical-side small {
    color: var(--ubx-muted);
    line-height: 1.45;
}

.ubx-tactical-mode-panel {
    display: grid;
    gap: 0.18rem;
    margin-bottom: 0.72rem;
    padding: 0.78rem 0.86rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.18);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.1), rgba(255, 255, 255, 0.035)),
        rgba(255, 255, 255, 0.04);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.14);
}

.ubx-tactical-mode-panel small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ubx-tactical-mode-panel strong {
    font-size: 1rem;
}

.ubx-live-dot {
    width: 0.85rem;
    height: 0.85rem;
    margin-bottom: 0.7rem;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0 rgba(var(--ubx-primary-rgb), 0.45);
    animation: ubx-live-pulse 1.8s ease-out infinite;
}

.ubx-showcase-final-card {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(25rem, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    max-width: 76rem;
    min-height: 38rem;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3rem);
    margin: 0 auto;
    text-align: left;
    border-radius: 2rem;
    background:
        radial-gradient(circle at 20% 20%, rgba(var(--ubx-primary-rgb), 0.18), transparent 18rem),
        radial-gradient(circle at 82% 72%, rgba(var(--ubx-kind-chat-rgb), 0.14), transparent 20rem),
        rgba(255, 255, 255, 0.055);
    box-shadow:
        0 2.5rem 7rem rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
}

.ubx-final-copy {
    position: relative;
    z-index: 3;
}

.ubx-showcase-final-card h2 {
    max-width: 12ch;
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 950;
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.ubx-showcase-final-card p {
    max-width: 42rem;
}

.ubx-final-launch-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.56rem;
    margin-top: 1.25rem;
}

.ubx-final-launch-controls button {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    padding: 0.54rem 0.72rem;
    color: var(--ubx-muted);
    font-size: 0.82rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ubx-final-launch-controls button:hover,
.ubx-final-launch-controls button.is-active {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    background: rgba(var(--ubx-primary-rgb), 0.09);
    box-shadow: 0 0.8rem 1.8rem rgba(var(--ubx-primary-rgb), 0.1);
    transform: translateY(-0.05rem);
}

.ubx-final-launch-controls svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--ubx-primary);
}

.ubx-final-live-caption {
    display: grid;
    gap: 0.18rem;
    max-width: 34rem;
    padding: 0.86rem 1rem;
    margin-top: 1rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.16);
    border-radius: 1.1rem;
    background: rgba(var(--ubx-primary-rgb), 0.055);
}

.ubx-final-live-caption small {
    color: var(--ubx-primary);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-final-live-caption strong {
    color: var(--ubx-text);
}

.ubx-final-live-caption span {
    color: var(--ubx-muted);
    font-size: 0.9rem;
    line-height: 1.42;
}

.ubx-final-launch-sequence {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.48rem;
    max-width: 37rem;
    margin-top: 1rem;
    padding: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.04);
}

.ubx-final-progress {
    grid-column: 1 / -1;
    height: 0.34rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.ubx-final-progress b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 0.95), #f1c76f);
    transition: width 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ubx-final-launch-sequence span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
    padding: 0.44rem 0.48rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        transform 220ms ease;
}

.ubx-final-launch-sequence svg {
    width: 0.86rem;
    height: 0.86rem;
}

.ubx-showcase-final-card:has(.ubx-final-recap[data-final-phase="map"]) .step-map,
.ubx-showcase-final-card:has(.ubx-final-recap[data-final-phase="plan"]) .step-map,
.ubx-showcase-final-card:has(.ubx-final-recap[data-final-phase="plan"]) .step-plan,
.ubx-showcase-final-card:has(.ubx-final-recap[data-final-phase="team"]) .step-map,
.ubx-showcase-final-card:has(.ubx-final-recap[data-final-phase="team"]) .step-plan,
.ubx-showcase-final-card:has(.ubx-final-recap[data-final-phase="team"]) .step-team,
.ubx-showcase-final-card:has(.ubx-final-recap[data-final-phase="app"]) .step-map,
.ubx-showcase-final-card:has(.ubx-final-recap[data-final-phase="app"]) .step-plan,
.ubx-showcase-final-card:has(.ubx-final-recap[data-final-phase="app"]) .step-team,
.ubx-showcase-final-card:has(.ubx-final-recap[data-final-phase="app"]) .step-app {
    color: var(--ubx-text);
    border-color: rgba(var(--ubx-primary-rgb), 0.22);
    background: rgba(var(--ubx-primary-rgb), 0.09);
    transform: translateY(-0.04rem);
}

.ubx-final-cta-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.ubx-showcase-logo {
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: 1.3rem;
    object-fit: contain;
    border-radius: 1.5rem;
    filter: drop-shadow(0 1.2rem 2rem rgba(0, 0, 0, 0.28));
}

.ubx-final-recap {
    position: relative;
    min-height: 31rem;
    perspective: var(--showcase-depth);
    transform-style: preserve-3d;
}

.ubx-final-recap,
.ubx-final-map,
.ubx-final-card,
.ubx-final-launch-board,
.ubx-final-phone,
.final-route,
.final-pin {
    transition:
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 260ms ease,
        filter 260ms ease,
        box-shadow 260ms ease,
        border-color 260ms ease;
}

.ubx-final-map {
    position: absolute;
    z-index: 1;
    inset: 7% 8% 17% 4%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 20% 22%, rgba(143, 214, 163, 0.22), transparent 12rem),
        radial-gradient(circle at 82% 66%, rgba(138, 164, 255, 0.14), transparent 13rem),
        linear-gradient(135deg, rgba(35, 48, 41, 0.94), rgba(15, 21, 22, 0.98));
    box-shadow:
        0 2.4rem 4.4rem rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: rotateX(10deg) rotateY(-11deg) rotateZ(-1deg) translateZ(20px);
}

.ubx-final-map::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 3rem 3rem;
    opacity: 0.34;
}

.final-road,
.final-water,
.final-pin,
.final-route {
    position: absolute;
    z-index: 2;
}

.final-road {
    height: 2.1rem;
    border-radius: 999px;
    background: rgba(156, 143, 116, 0.22);
    box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, 0.18);
}

.final-road.road-a {
    top: 56%;
    left: -6%;
    width: 70%;
    transform: rotate(-11deg);
}

.final-road.road-b {
    top: 28%;
    right: -12%;
    width: 54%;
    height: 1.75rem;
    transform: rotate(24deg);
}

.final-water {
    top: 13%;
    left: 58%;
    width: 18%;
    height: 56%;
    border-radius: 999px;
    background: rgba(81, 125, 144, 0.16);
    transform: rotate(18deg);
}

.final-route {
    top: 40%;
    left: 25%;
    width: 42%;
    height: 24%;
    border-top: 3px solid rgba(var(--ubx-primary-rgb), 0.72);
    border-right: 3px solid rgba(var(--ubx-primary-rgb), 0.42);
    border-radius: 100% 25% 80% 20%;
    filter: drop-shadow(0 0 0.7rem rgba(var(--ubx-primary-rgb), 0.26));
    transform: rotate(8deg);
}

.final-pin {
    display: inline-grid;
    place-items: center;
    color: #07140d;
    font-size: 0.76rem;
    font-weight: 950;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow:
        0 0 0 0.42rem rgba(var(--ubx-primary-rgb), 0.12),
        0 0.8rem 1.6rem rgba(0, 0, 0, 0.2);
}

.final-pin.pin-a { top: 31%; left: 34%; width: 2.7rem; height: 2.7rem; }
.final-pin.pin-b { top: 46%; left: 56%; width: 1.75rem; height: 1.75rem; opacity: 0.82; }
.final-pin.pin-c { bottom: 26%; left: 43%; width: 2.2rem; height: 2.2rem; opacity: 0.9; }
.final-pin.pin-d { right: 22%; bottom: 30%; width: 1.9rem; height: 1.9rem; opacity: 0.78; }

.ubx-final-card {
    position: absolute;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.62rem;
    align-items: center;
    width: min(13.6rem, 39%);
    min-height: 4.35rem;
    padding: 0.74rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.1rem;
    background: rgba(8, 12, 13, 0.68);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px);
}

.ubx-final-card svg {
    color: var(--ubx-primary);
}

.ubx-final-card strong,
.ubx-final-card span {
    display: block;
}

.ubx-final-card span {
    color: var(--ubx-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.ubx-final-card.card-search { top: 3%; left: 6%; }
.ubx-final-card.card-list { top: auto; right: 5%; bottom: 25%; }
.ubx-final-card.card-team { right: 24%; bottom: 4%; left: auto; }
.ubx-final-card.card-logbook { display: none; }

.ubx-final-launch-board {
    position: absolute;
    top: 7%;
    right: 5%;
    bottom: auto;
    z-index: 24;
    display: grid;
    gap: 0.75rem;
    width: min(18.5rem, 56%);
    padding: 1rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.2);
    border-radius: 1.25rem;
    background:
        linear-gradient(145deg, rgba(13, 20, 17, 0.82), rgba(13, 18, 18, 0.58)),
        rgba(255, 255, 255, 0.07);
    box-shadow:
        0 1.6rem 3.4rem rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    transform: rotateX(4deg) rotateY(-8deg) translateZ(220px);
}

.ubx-final-launch-board small {
    display: block;
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-final-launch-board strong {
    display: block;
    color: var(--ubx-text);
    font-size: 1.1rem;
    line-height: 1.1;
}

.ubx-final-launch-meta {
    display: grid;
    gap: 0.42rem;
}

.ubx-final-launch-meta span {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    min-width: 0;
    color: var(--ubx-muted);
    font-size: 0.76rem;
}

.ubx-final-launch-meta svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
    color: var(--ubx-primary);
}

.ubx-final-launch-meta b {
    overflow: hidden;
    color: var(--ubx-text);
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-final-checklist {
    display: grid;
    gap: 0.4rem;
}

.ubx-final-checklist span {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.42rem 0.55rem 0.42rem 1.8rem;
    color: var(--ubx-text);
    font-size: 0.75rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.055);
    animation: ubx-final-check-in 440ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--item-index, 0) * 70ms);
}

.ubx-final-checklist span::before {
    position: absolute;
    left: 0.55rem;
    display: grid;
    width: 0.86rem;
    height: 0.86rem;
    place-items: center;
    color: #07140d;
    font-size: 0.58rem;
    content: "✓";
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0.4rem 0.9rem rgba(var(--ubx-primary-rgb), 0.25);
}

.ubx-final-phone {
    position: absolute;
    right: 6%;
    bottom: 6%;
    z-index: 22;
    display: grid;
    width: 6.4rem;
    height: 10.1rem;
    padding: 0.55rem;
    color: var(--ubx-text);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.45rem;
    background: rgba(7, 9, 10, 0.86);
    box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.28);
    transform: rotateZ(2deg) translateZ(210px);
}

.ubx-final-phone > span {
    justify-self: center;
    width: 2.8rem;
    height: 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.ubx-final-phone strong {
    align-self: end;
    font-size: 0.82rem;
}

.ubx-final-phone i {
    display: grid;
    place-items: center;
    min-height: 5.85rem;
    margin-top: 0.45rem;
    color: var(--ubx-primary);
    border-radius: 1rem;
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        rgba(255, 255, 255, 0.055);
    background-size: 1.1rem 1.1rem;
}

.ubx-final-pulse-ring {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.16);
    border-radius: 999px;
    animation: ubx-final-ring 6s ease-in-out infinite;
}

.ubx-final-pulse-ring.ring-a {
    inset: 18% 20% 22% 12%;
}

.ubx-final-pulse-ring.ring-b {
    inset: 10% 10% 14% 2%;
    animation-delay: -2.4s;
}

.ubx-final-recap[data-final-phase="map"] .ubx-final-map,
.ubx-final-recap[data-final-phase="map"] .card-search {
    border-color: rgba(var(--ubx-primary-rgb), 0.34);
    box-shadow: 0 1.4rem 3rem rgba(var(--ubx-primary-rgb), 0.08);
    transform: translateZ(70px) rotateX(9deg) rotateY(-10deg) rotateZ(-1deg);
}

.ubx-final-recap[data-final-phase="plan"] .card-list,
.ubx-final-recap[data-final-phase="plan"] .card-logbook,
.ubx-final-recap[data-final-phase="plan"] .ubx-final-launch-board {
    border-color: rgba(var(--ubx-kind-list-rgb), 0.34);
    box-shadow: 0 1rem 2.2rem rgba(var(--ubx-kind-list-rgb), 0.08);
    transform: translate3d(0, -0.18rem, 230px) scale(1.015);
}

.ubx-final-recap[data-final-phase="plan"] .final-route,
.ubx-final-recap[data-final-phase="team"] .final-route {
    transform: rotate(8deg) scale(1.03);
    filter: drop-shadow(0 0 0.9rem rgba(var(--ubx-primary-rgb), 0.3));
}

.ubx-final-recap[data-final-phase="team"] .card-team,
.ubx-final-recap[data-final-phase="team"] .final-pin.pin-d,
.ubx-final-recap[data-final-phase="team"] .ubx-final-launch-board {
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
    box-shadow: 0 1rem 2.2rem rgba(var(--ubx-primary-rgb), 0.09);
    transform: translate3d(0.1rem, -0.18rem, 235px) scale(1.02);
}

.ubx-final-recap[data-final-phase="app"] .ubx-final-phone,
.ubx-final-recap[data-final-phase="app"] .ubx-final-launch-board {
    box-shadow:
        0 1.4rem 2.8rem rgba(0, 0, 0, 0.28),
        0 0 1.8rem rgba(var(--ubx-primary-rgb), 0.12);
    transform: rotateZ(1deg) translate3d(-0.15rem, -0.28rem, 240px) scale(1.03);
}

.ubx-final-recap[data-final-phase="app"] .ubx-final-card:not(.card-team) {
    opacity: 0.62;
    filter: saturate(0.84);
}

@keyframes ubx-showcase-drift {
    from { transform: translate3d(-2rem, 1rem, 0) scale(0.96); }
    to { transform: translate3d(2rem, -1rem, 0) scale(1.05); }
}

@keyframes ubx-final-card-float {
    0%, 100% { transform: translate3d(0, 0, 90px); }
    50% { transform: translate3d(0.25rem, -0.55rem, 120px); }
}

@keyframes ubx-final-phone-float {
    0%, 100% { transform: rotateZ(4deg) translate3d(0, 0, 120px); }
    50% { transform: rotateZ(2deg) translate3d(0.35rem, -0.65rem, 150px); }
}

@keyframes ubx-final-ring {
    0%, 100% {
        opacity: 0.22;
        transform: scale(0.94);
    }
    50% {
        opacity: 0.42;
        transform: scale(1.03);
    }
}

@keyframes ubx-final-check-in {
    from {
        opacity: 0;
        transform: translate3d(0.45rem, 0.2rem, 0) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes ubx-showcase-float {
    0%, 100% { transform: translateY(0) translateZ(60px); }
    50% { transform: translateY(-0.9rem) translateZ(85px); }
}

@keyframes ubx-hero-phone-float {
    0%, 100% {
        transform: perspective(800px) rotateX(3deg) rotateY(-18deg) rotateZ(4deg) translateY(0);
    }
    50% {
        transform: perspective(800px) rotateX(5deg) rotateY(-15deg) rotateZ(2deg) translateY(-0.65rem);
    }
}

@keyframes ubx-showcase-scan {
    0%, 18% { transform: translateX(-120%); opacity: 0; }
    35%, 64% { opacity: 1; }
    82%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes ubx-cinema-grain {
    0% { transform: translate3d(0, 0, 0); }
    18% { transform: translate3d(-1.2rem, 0.7rem, 0); }
    36% { transform: translate3d(0.8rem, -1rem, 0); }
    54% { transform: translate3d(-0.4rem, -0.7rem, 0); }
    72% { transform: translate3d(1rem, 0.45rem, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes ubx-director-flow {
    0%, 18% { transform: translateX(-110%); opacity: 0; }
    42%, 64% { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes ubx-storyboard-cursor {
    0%, 12% { left: 0.9rem; opacity: 0.74; }
    24%, 34% { left: calc(25% + 0.1rem); opacity: 1; }
    46%, 56% { left: calc(50% + 0.1rem); opacity: 0.92; }
    68%, 78% { left: calc(75% + 0.1rem); opacity: 1; }
    92%, 100% { left: calc(100% - 1.45rem); opacity: 0.58; }
}

@keyframes ubx-workbench-light-sweep {
    0%, 100% {
        opacity: 0.18;
        transform: translateX(-18%) rotate(-8deg);
    }
    45%, 58% {
        opacity: 0.46;
        transform: translateX(22%) rotate(-8deg);
    }
}

@keyframes ubx-workbench-pin {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -0.25rem;
    }
}

@keyframes ubx-film-spine-pulse {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.72;
    }
    50% {
        transform: scale(1.22);
        opacity: 1;
    }
}

@keyframes ubx-reel-light-drift {
    from { transform: translate3d(-2rem, 1rem, 0) scale(0.96); }
    to { transform: translate3d(2rem, -1rem, 0) scale(1.08); }
}

@keyframes ubx-reel-pin-pulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 0.45rem 0 rgba(0, 0, 0, 0.26),
            0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.14),
            0 0 2.2rem rgba(var(--ubx-primary-rgb), 0.3);
    }
    48% {
        transform: translateY(-0.24rem) scale(1.08);
        box-shadow:
            0 0.58rem 0 rgba(0, 0, 0, 0.22),
            0 0 0 0.78rem rgba(var(--ubx-primary-rgb), 0.12),
            0 0 3rem rgba(var(--ubx-primary-rgb), 0.42);
    }
}

@keyframes ubx-reel-popover {
    0%, 100% {
        transform: translateY(0) scale(1);
        border-color: rgba(255, 255, 255, 0.13);
    }
    44%, 62% {
        transform: translateY(-0.28rem) scale(1.015);
        border-color: rgba(var(--ubx-primary-rgb), 0.3);
    }
}

@keyframes ubx-reel-message {
    0%, 12% {
        opacity: 0;
        transform: translateY(0.55rem);
    }
    24%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ubx-reel-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes ubx-story-progress-play {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes ubx-hotspot-pulse {
    0%, 100% { box-shadow:
        0 0.42rem 0 rgba(0, 0, 0, 0.2),
        0 0 0 0.55rem rgba(var(--ubx-primary-rgb), 0.13),
        0 0 2.4rem rgba(var(--ubx-primary-rgb), 0.34); }
    52% { box-shadow:
        0 0.42rem 0 rgba(0, 0, 0, 0.2),
        0 0 0 0.86rem rgba(var(--ubx-primary-rgb), 0.08),
        0 0 3rem rgba(var(--ubx-primary-rgb), 0.44); }
}

@keyframes ubx-scenario-note {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-0.45rem) rotate(1deg); }
}

@keyframes ubx-scenario-achievement {
    0%, 100% { transform: translateY(0) scale(1); }
    52% { transform: translateY(-0.45rem) scale(1.035); }
}

@keyframes ubx-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--ubx-primary-rgb), 0.42); }
    100% { box-shadow: 0 0 0 1rem rgba(var(--ubx-primary-rgb), 0); }
}

@keyframes ubx-soft-pulse {
    0%, 100% {
        filter: saturate(1);
        box-shadow:
            0 0.65rem 1.45rem rgba(var(--ubx-primary-rgb), 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    50% {
        filter: saturate(1.12);
        box-shadow:
            0 0.95rem 2rem rgba(var(--ubx-primary-rgb), 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

@keyframes ubx-preview-cursor-click {
    0%, 100% {
        filter: brightness(1);
        transform: translate3d(0, 0, 0) rotate(var(--preview-cursor-rotate)) scale(var(--preview-cursor-scale));
    }
    44% {
        filter: brightness(1.08);
        transform: translate3d(0, -0.14rem, 0) rotate(var(--preview-cursor-rotate)) scale(calc(var(--preview-cursor-scale) * 1.04));
    }
    52% {
        filter: brightness(0.92);
        transform: translate3d(0, 0.05rem, 0) rotate(var(--preview-cursor-rotate)) scale(calc(var(--preview-cursor-scale) * 0.92));
    }
    64% {
        filter: brightness(1.04);
        transform: translate3d(0, -0.06rem, 0) rotate(var(--preview-cursor-rotate)) scale(calc(var(--preview-cursor-scale) * 1.02));
    }
}

@keyframes ubx-journey-line {
    0%, 100% { transform: scaleX(0.12); opacity: 0.45; }
    48%, 62% { transform: scaleX(1); opacity: 1; }
}

@keyframes ubx-profile-frame {
    to { transform: rotate(360deg); }
}

@keyframes ubx-profile-feed {
    0%, 100% { transform: translateX(0); border-color: rgba(255, 255, 255, 0.09); }
    42%, 58% { transform: translateX(0.28rem); border-color: rgba(var(--ubx-primary-rgb), 0.2); }
}

@keyframes ubx-cin-orb {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.66;
    }
    50% {
        transform: translate3d(1.2rem, -1rem, 0) scale(1.08);
        opacity: 0.95;
    }
}

@keyframes ubx-cin-route {
    0%, 100% {
        opacity: 0.42;
        transform: rotate(12deg) translateY(0);
    }
    50% {
        opacity: 0.92;
        transform: rotate(12deg) translateY(-0.25rem);
    }
}

@keyframes ubx-cin-marker-hop {
    0%, 100% {
        transform: translateZ(94px) scale(1.24) translateY(0);
    }
    50% {
        transform: translateZ(110px) scale(1.3) translateY(-0.3rem);
    }
}

@keyframes ubx-decision-route {
    0%, 100% {
        opacity: 0.42;
        stroke-dashoffset: 0;
        transform: rotate(8deg) translateY(0);
    }
    50% {
        opacity: 0.9;
        transform: rotate(8deg) translateY(-0.18rem);
    }
}

@keyframes ubx-decision-pin {
    0%, 100% {
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), 0 0 0 0 rgba(var(--ubx-primary-rgb), 0.32);
        transform: translateZ(56px) translateY(0);
    }
    50% {
        box-shadow: 0 22px 52px rgba(0, 0, 0, 0.38), 0 0 0 14px rgba(var(--ubx-primary-rgb), 0);
        transform: translateZ(72px) translateY(-0.2rem);
    }
}

@keyframes ubx-decision-pop {
    0% {
        opacity: 0.58;
        transform: translate3d(0, 0.65rem, 90px) scale(0.97);
    }
    100% {
        opacity: 1;
    }
}

@keyframes ubx-list-card-primary {
    0%, 100% { transform: translate3d(0, 0, 120px) rotateX(0deg) rotateZ(-1deg); }
    50% { transform: translate3d(0.35rem, -0.7rem, 150px) rotateX(3deg) rotateZ(1deg); }
}

@keyframes ubx-list-card-secondary {
    0%, 100% { transform: translate3d(1.4rem, 4.4rem, 70px) rotateZ(4deg) scale(0.95); }
    50% { transform: translate3d(1.1rem, 3.8rem, 92px) rotateZ(2deg) scale(0.97); }
}

@keyframes ubx-list-card-logbook {
    0%, 100% { transform: translate3d(2.4rem, 8.4rem, 24px) rotateZ(8deg) scale(0.9); }
    50% { transform: translate3d(2rem, 7.7rem, 48px) rotateZ(5deg) scale(0.92); }
}

@keyframes ubx-list-pin {
    0%, 100% { transform: scale(1); opacity: 0.72; }
    50% { transform: scale(1.32); opacity: 1; }
}

@keyframes ubx-workspace-pin {
    0%, 100% {
        transform: rotate(-45deg) translateZ(60px) translateY(0);
    }
    50% {
        transform: rotate(-45deg) translateZ(90px) translateY(-0.35rem);
    }
}

@keyframes ubx-workspace-card-float {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -0.42rem;
    }
}

@keyframes ubx-slow-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ubx-beam-flow {
    from { transform: translateX(-120%); }
    to { transform: translateX(260%); }
}

@keyframes ubx-chat-message {
    0%, 8% {
        opacity: 0;
        transform: translateY(0.9rem);
    }
    18%, 82% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0.72;
        transform: translateY(-0.2rem);
    }
}

@keyframes ubx-chat-typing {
    0%, 100% { opacity: 0.28; transform: translateY(0); }
    45% { opacity: 1; transform: translateY(-0.18rem); }
}

@keyframes ubx-demo-message-pop {
    from {
        opacity: 0;
        transform: translateY(0.8rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ubx-recording-pulse {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.92);
    }
    45% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes ubx-flight-progress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.ubx-showcase.is-motion-managed .ubx-showcase-section:not(.is-cinema-active) *,
.ubx-showcase.is-motion-managed .ubx-showcase-section:not(.is-cinema-active)::before,
.ubx-showcase.is-motion-managed .ubx-showcase-section:not(.is-cinema-active)::after,
.ubx-showcase.is-motion-managed .ubx-motion-scope:not(.is-cinema-active) *,
.ubx-showcase.is-motion-managed .ubx-motion-scope:not(.is-cinema-active)::before,
.ubx-showcase.is-motion-managed .ubx-motion-scope:not(.is-cinema-active)::after {
    animation-play-state: paused !important;
}

@media (max-width: 1199.98px) {
    .ubx-director-strip {
        grid-template-columns: 1fr;
    }

    .ubx-director-demo-board,
    .ubx-hero-storyboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-director-demo-board button {
        min-height: 7.4rem;
    }

    .ubx-workbench-dashboard {
        grid-template-columns: 1fr;
        transform: none;
    }

    .ubx-workbench-sidebar {
        display: flex;
        overflow-x: auto;
    }

    .ubx-workbench-sidebar strong {
        display: none;
    }

    .ubx-workbench-sidebar span {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .ubx-premiere-recap-grid {
        grid-template-columns: 1fr;
    }

    .ubx-recap-browserbar em {
        display: none;
    }

    .ubx-hero.ubx-hero--search::after {
        --ubx-hero-search-glow-size: min(30rem, 88vw);
        right: 0.75rem;
        bottom: -7rem;
    }

    .ubx-search {
        grid-template-columns: 1fr;
    }

    .ubx-live-search-wrap {
        z-index: 60;
    }

    .ubx-live-search-results {
        right: -0.25rem;
        left: -0.25rem;
        max-height: min(28rem, 58vh);
    }

    .ubx-premium-quick-grid {
        grid-template-columns: 1fr;
    }

    .ubx-premium-choice-bridge {
        width: 2.8rem;
        height: 2.8rem;
        margin: -0.35rem 0;
    }

    .ubx-hero-card {
        transform: none;
        animation: none;
    }

    .ubx-breadcrumb {
        width: 100%;
        border-radius: 1rem;
    }

    .ubx-mega-menu {
        width: 100%;
        right: 0 !important;
        left: 0 !important;
        max-height: min(70vh, 34rem);
        overflow-y: auto;
        transform: none;
    }

    .ubx-mega-grid {
        grid-template-columns: 1fr;
    }

    .ubx-map-preview,
    .ubx-map-page {
        min-height: 18rem;
    }

    .ubx-web-chat-shell {
        min-height: 72vh;
    }

    .ubx-web-chat-composer {
        grid-template-columns: 1fr;
    }

    .ubx-web-message-bubble {
        max-width: 94%;
    }

    .ubx-showcase-title {
        font-size: clamp(3.1rem, 18vw, 4.8rem);
    }

    .ubx-hero-scene-controls {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.2rem;
        scrollbar-width: none;
    }

    .ubx-hero-scene-controls::-webkit-scrollbar {
        display: none;
    }

    .ubx-hero-scene-controls button {
        flex: 0 0 auto;
    }

    .ubx-hero-storyboard,
    .ubx-director-demo-board {
        grid-template-columns: 1fr;
    }

    .ubx-hero-storyboard::before,
    .ubx-hero-storyboard > i {
        display: none;
    }

    .ubx-hero-storyboard button,
    .ubx-director-demo-board button {
        min-height: 0;
    }

    .ubx-workbench-stage {
        min-height: 0;
        border-radius: 1.35rem;
    }

    .ubx-workbench-browserbar em {
        display: none;
    }

    .ubx-workbench-dashboard {
        min-height: 0;
        padding: 0.7rem;
    }

    .ubx-workbench-main {
        padding: 0.75rem;
    }

    .ubx-workbench-head {
        grid-template-columns: 1fr;
    }

    .ubx-workbench-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-workbench-content {
        display: grid;
        gap: 0.75rem;
        min-height: 0;
        perspective: none;
    }

    .ubx-workbench-list-panel,
    .ubx-workbench-map-panel,
    .ubx-workbench-profile-panel,
    .ubx-workbench-log-panel,
    .ubx-workbench-phone-panel,
    .ubx-workbench-briefing {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

    .ubx-workbench-map-panel {
        min-height: 15rem;
    }

    .ubx-workbench-phone-panel {
        width: min(14rem, 100%);
        justify-self: center;
    }

    .ubx-workbench-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-map-replay-console {
        grid-template-columns: 1fr;
    }

    .ubx-map-replay-console button {
        width: 100%;
    }

    .ubx-map-replay-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-demo-browserbar strong {
        max-width: 42vw;
    }

    .ubx-demo-lifted-tools {
        top: auto;
        right: 0.75rem;
        bottom: 9.6rem;
    }

    .ubx-demo-lifted-tools span {
        min-width: 0;
        padding: 0.5rem 0.56rem;
        font-size: 0.72rem;
    }

    .ubx-handoff-stage {
        min-height: 44rem;
        transform: none !important;
    }

    .ubx-handoff-web {
        top: 1rem;
        left: 1rem;
        width: calc(100% - 2rem);
        height: 19rem;
        transform: none !important;
    }

    .ubx-handoff-phone {
        top: auto;
        right: 1rem;
        bottom: 5.9rem;
        width: 10.8rem;
        min-height: 19.5rem;
        transform: none !important;
    }

    .phone-live-map {
        min-height: 12.4rem;
    }

    .ubx-handoff-list-card,
    .ubx-handoff-chat-card {
        left: 1rem;
        right: auto;
        width: calc(100% - 13rem);
        min-width: 10rem;
        transform: none !important;
    }

    .ubx-handoff-list-card {
        top: 21rem;
    }

    .ubx-handoff-chat-card {
        bottom: 10.6rem;
    }

    .ubx-handoff-transfer {
        top: 20.1rem;
        left: 50%;
        width: 9rem;
        transform: translateX(-50%) !important;
    }

    .ubx-handoff-status {
        right: 0.8rem;
        bottom: 0.8rem;
        left: 0.8rem;
        width: auto;
        transform: none !important;
    }

    .ubx-showcase-orbit {
        min-height: 36rem;
    }

    .ubx-showcase-core-card,
    .ubx-tactical-board {
        transform: none !important;
    }

    .ubx-showcase-floating-card {
        width: min(12rem, 62vw);
    }

    .ubx-showcase-chapter-rail {
        top: auto;
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: 0.75rem;
        left: max(0.75rem, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.28rem;
        width: auto;
        padding: 0.45rem;
        transform: none;
    }

    .ubx-chapter-progress {
        top: 0;
        right: 0.7rem;
        bottom: auto;
        left: 0.7rem;
        width: auto;
        height: 2px;
    }

    .ubx-chapter-progress::before {
        transform: scaleX(var(--chapter-progress, 0));
        transform-origin: left;
    }

    .ubx-showcase-chapter-rail small {
        position: absolute;
        bottom: calc(100% + 0.45rem);
        left: 0.25rem;
        margin: 0;
        padding: 0.32rem 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(8, 11, 15, 0.7);
        backdrop-filter: blur(14px);
    }

    .ubx-cinema-cue {
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: 4.85rem;
        max-width: min(18rem, calc(100vw - 1.5rem));
        padding: 0.6rem 0.72rem;
    }

    .ubx-cinema-cue strong {
        font-size: 0.82rem;
    }

    .ubx-cinema-letterbox {
        height: 2.35rem;
    }

    .ubx-showcase-chapter-rail button {
        display: grid;
        justify-items: center;
        gap: 0.12rem;
        padding: 0.42rem 0.2rem;
        text-align: center;
    }

    .ubx-showcase-chapter-rail button:hover,
    .ubx-showcase-chapter-rail button.is-active {
        transform: translateY(-0.08rem);
    }

    .ubx-showcase-chapter-rail span {
        display: none;
    }

    .ubx-showcase-product-screen {
        min-height: 26rem;
    }

    .ubx-workspace-browser {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 0.8rem;
    }

    .ubx-workspace-sidebar {
        grid-row: auto;
        display: flex;
        overflow-x: auto;
        padding: 0.45rem;
    }

    .ubx-workspace-sidebar button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .ubx-workspace-map-card {
        min-height: 24rem;
        transform: none;
    }

    .ubx-workspace-list-card,
    .ubx-workspace-log-card,
    .ubx-workspace-mag-card {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        transform: none;
    }

    .ubx-workspace-action-row {
        grid-column: auto;
    }

    .ubx-hero-product-sidebar {
        top: 0.75rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
    }

    .ubx-hero-product-sidebar label,
    .ubx-hero-product-sidebar strong {
        grid-column: span 3;
    }

    .ubx-showcase-map-model {
        inset: 9.6rem 0.75rem 4.9rem;
    }

    .ubx-hero-place-card {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        width: auto;
    }

    .ubx-hero-list-card,
    .ubx-hero-chat-card,
    .ubx-hero-log-card {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        width: auto;
    }

    .ubx-hero-phone-preview {
        right: -0.2rem;
        bottom: -1.5rem;
        width: 9.5rem;
        min-height: 15.5rem;
        opacity: 0.92;
        transform: none;
    }

    .ubx-hero-phone-map {
        height: 9.8rem;
    }

    .ubx-showcase-director {
        margin-top: 0;
    }

    .ubx-director-strip {
        grid-template-columns: 1fr;
    }

    .ubx-director-play {
        width: 100%;
    }

    .ubx-director-frames {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }

    .ubx-director-frames::-webkit-scrollbar {
        display: none;
    }

    .ubx-director-frames i {
        display: none;
    }

    .ubx-director-frames span {
        min-width: 5rem;
    }

    .ubx-film-spine-board {
        grid-template-columns: 1fr;
    }

    .ubx-film-spine-reel {
        display: flex;
        overflow-x: auto;
        padding-bottom: 0.3rem;
        scrollbar-width: none;
    }

    .ubx-film-spine-reel::-webkit-scrollbar {
        display: none;
    }

    .ubx-film-spine-shot {
        min-width: 13rem;
    }

    .ubx-simulator-stage {
        transform: none !important;
    }

    .ubx-simulator-browser {
        display: grid;
        gap: 0.72rem;
        min-height: 0;
        padding: 0.75rem;
    }

    .ubx-simulator-browserbar,
    .ubx-simulator-map,
    .ubx-sim-search,
    .ubx-sim-place,
    .ubx-sim-list,
    .ubx-sim-chat,
    .ubx-sim-logbook,
    .ubx-sim-phone,
    .ubx-sim-caption,
    .ubx-sim-action {
        position: relative;
        inset: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        transform: none !important;
    }

    .ubx-simulator-browserbar {
        margin: -0.75rem -0.75rem 0;
    }

    .ubx-simulator-browserbar strong {
        max-width: 45%;
    }

    .ubx-simulator-map {
        min-height: 20rem;
        order: 1;
    }

    .ubx-sim-search,
    .ubx-sim-place,
    .ubx-sim-list,
    .ubx-sim-chat,
    .ubx-sim-logbook,
    .ubx-sim-caption,
    .ubx-sim-action {
        order: 2;
        opacity: 1 !important;
        filter: none !important;
    }

    .ubx-sim-phone {
        display: none;
    }

    .ubx-sim-caption {
        order: 0;
    }

    .ubx-simulator-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .ubx-flight-stage {
        transform: none !important;
    }

    .ubx-flight-desktop {
        display: grid;
        gap: 0.72rem;
        min-height: 0;
        padding: 0.75rem;
    }

    .ubx-flight-topbar,
    .ubx-flight-map-screen,
    .ubx-flight-search-panel,
    .ubx-flight-place-panel,
    .ubx-flight-list-panel,
    .ubx-flight-team-panel,
    .ubx-flight-memory-panel,
    .ubx-flight-narration {
        position: relative;
        inset: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        transform: none !important;
    }

    .ubx-flight-topbar {
        margin: -0.75rem -0.75rem 0;
    }

    .ubx-flight-recording-badge {
        position: relative;
        inset: auto;
        z-index: 2;
        justify-self: start;
        order: 0;
        width: max-content;
    }

    .ubx-flight-topbar strong {
        max-width: 44%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ubx-flight-map-screen {
        min-height: 20rem;
        order: 1;
    }

    .ubx-flight-search-panel,
    .ubx-flight-place-panel,
    .ubx-flight-list-panel,
    .ubx-flight-team-panel,
    .ubx-flight-memory-panel {
        order: 2;
        opacity: 1 !important;
        filter: none !important;
    }

    .ubx-flight-narration {
        order: 0;
        opacity: 1 !important;
        filter: none !important;
    }

    .ubx-flight-progress {
        grid-template-columns: repeat(2, 1fr);
    }

    .ubx-story-stage {
        min-height: 64rem;
        transform: none !important;
    }

    .ubx-story-demo-console {
        top: 0.85rem;
        right: 0.85rem;
        left: 0.85rem;
        width: auto;
        transform: none;
    }

    .ubx-story-demo-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.1rem;
        scrollbar-width: none;
    }

    .ubx-story-demo-actions::-webkit-scrollbar {
        display: none;
    }

    .ubx-story-demo-actions button {
        flex: 0 0 auto;
    }

    .ubx-story-caption {
        right: 0.85rem;
        bottom: 0.85rem;
        left: 0.85rem;
        width: auto;
    }

    .ubx-story-browser {
        inset: 13rem 0.85rem auto;
        height: 21rem;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .ubx-story-search-card {
        top: 9.5rem;
        left: 0.85rem;
        width: min(18rem, calc(100% - 1.7rem));
        opacity: 1 !important;
        transform: none !important;
    }

    .ubx-story-place-card,
    .ubx-story-list-card,
    .ubx-story-chat-card,
    .ubx-story-log-card,
    .ubx-story-phone {
        right: 0.85rem;
        left: 0.85rem;
        width: auto;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .ubx-story-place-card {
        top: 28.2rem;
    }

    .ubx-story-list-card {
        top: 38.5rem;
        bottom: auto;
    }

    .ubx-story-log-card {
        top: 47rem;
        bottom: auto;
    }

    .ubx-story-chat-card,
    .ubx-story-phone {
        display: none;
    }

    .ubx-mission-stage {
        min-height: 65rem;
        transform: none !important;
    }

    .ubx-mission-header {
        grid-template-columns: 1fr;
        right: 0.85rem;
        bottom: 0.85rem;
        left: 0.85rem;
        transform: none;
    }

    .ubx-mission-timeline {
        justify-content: stretch;
    }

    .ubx-mission-timeline i {
        flex: 1;
        width: auto;
    }

    .ubx-mission-shot-rail {
        top: 0.85rem;
        right: 0.85rem;
        left: 0.85rem;
        grid-template-columns: 1fr;
        transform: none;
    }

    .ubx-mission-shot-rail span {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.1rem 0.55rem;
        padding: 0.55rem 0.68rem;
    }

    .ubx-mission-shot-rail b {
        grid-row: span 2;
    }

    .ubx-mission-shot-rail small {
        display: none;
    }

    .ubx-mission-camera-frame,
    .ubx-mission-cursor {
        display: none;
    }

    .ubx-mission-action-bar {
        top: 9.3rem;
        left: 0.85rem;
        display: flex;
        overflow-x: auto;
        right: 0.85rem;
        max-width: none;
        transform: none;
        scrollbar-width: none;
    }

    .ubx-mission-action-bar::-webkit-scrollbar {
        display: none;
    }

    .ubx-mission-live-readout {
        top: auto;
        right: 0.85rem;
        bottom: 9.3rem;
        left: 0.85rem;
        grid-template-columns: repeat(3, 1fr);
        transform: none;
    }

    .ubx-mission-live-readout span {
        min-width: 0;
    }

    .ubx-mission-browser {
        inset: 12.8rem 0.85rem 13.5rem;
        transform: none !important;
    }

    .ubx-mission-search-panel {
        top: 4.4rem;
        right: 0.85rem;
        left: 0.85rem;
        width: auto;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .ubx-mission-place-drawer,
    .ubx-mission-list-board,
    .ubx-mission-chat-card,
    .ubx-mission-logbook {
        right: 0.85rem;
        left: 0.85rem;
        width: auto;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .ubx-mission-place-drawer {
        bottom: 1rem;
    }

    .ubx-mission-list-board {
        top: 14rem;
    }

    .ubx-mission-chat-card {
        top: 25.5rem;
        bottom: auto;
    }

    .ubx-mission-phone {
        display: none;
    }

    .ubx-mission-logbook {
        top: 38rem;
        bottom: auto;
    }

    .ubx-scroll-cinema {
        grid-template-columns: 1fr;
    }

    .ubx-scroll-cinema-stage-wrap {
        position: relative;
        top: auto;
    }

    .ubx-scroll-cinema-stage {
        min-height: 44rem;
        transform: none !important;
    }

    .ubx-scroll-cinema-map {
        inset: 4.8rem 0.85rem 14.5rem;
        transform: none !important;
    }

    .ubx-scroll-search-panel,
    .ubx-scroll-place-panel,
    .ubx-scroll-list-panel,
    .ubx-scroll-chat-panel,
    .ubx-scroll-log-panel,
    .ubx-scroll-phone-panel {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .ubx-scroll-search-panel {
        top: 5.6rem;
        right: 1.25rem;
        left: 1.25rem;
        width: auto;
    }

    .ubx-scroll-place-panel {
        right: 1.25rem;
        bottom: 7.2rem;
        left: 1.25rem;
        top: auto;
        width: auto;
    }

    .ubx-scroll-list-panel {
        display: none;
    }

    .ubx-scroll-chat-panel,
    .ubx-scroll-phone-panel {
        display: none;
    }

    .ubx-scroll-log-panel {
        right: 1.25rem;
        bottom: 1.05rem;
        left: 1.25rem;
        width: auto;
    }

    .ubx-scroll-cinema-steps {
        gap: 1rem;
        padding-block: 1.5rem 0;
    }

    .ubx-scroll-cinema-card {
        min-height: auto;
    }

    .ubx-feature-cockpit {
        grid-template-columns: 1fr;
    }

    .ubx-feature-cockpit-controls {
        display: flex;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }

    .ubx-feature-cockpit-controls::-webkit-scrollbar {
        display: none;
    }

    .ubx-feature-cockpit-controls button {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
    }

    .ubx-feature-cockpit-stage {
        min-height: 43rem;
        transform: none;
    }

    .ubx-feature-stage-map {
        inset: 0.8rem;
    }

    .ubx-feature-stage-panel,
    .ubx-feature-stage-caption,
    .ubx-feature-cockpit-stage[data-feature] .ubx-feature-stage-panel {
        right: 1rem;
        left: 1rem;
        width: auto;
        transform: none;
    }

    .panel-map { top: 1.2rem; }
    .panel-lists { top: 7.6rem; }
    .panel-team { top: 14rem; bottom: auto; }
    .panel-profile { top: 20.4rem; bottom: auto; }
    .panel-logbook { top: 26.8rem; bottom: auto; }

    .ubx-feature-stage-caption {
        bottom: 1rem;
    }

    .ubx-reel-stage {
        min-height: 72rem;
        transform: none !important;
    }

    .ubx-reel-caption {
        top: 1rem;
        right: 1rem;
        bottom: auto;
        left: 1rem;
        width: auto;
    }

    .ubx-reel-inspector {
        top: 8.25rem;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .ubx-reel-hotspot {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.95rem;
    }

    .ubx-reel-screen,
    .ubx-reel-stage[data-reel-scene="place"] .screen-place,
    .ubx-reel-stage[data-reel-scene="lists"] .screen-lists,
    .ubx-reel-stage[data-reel-scene="chat"] .screen-chat,
    .ubx-reel-stage[data-reel-scene="explore"] .screen-explore,
    .ubx-reel-stage[data-reel-scene="map"] .screen-map {
        opacity: 1;
        filter: none;
        transform: none;
    }

    .screen-map,
    .screen-place,
    .screen-lists,
    .screen-chat,
    .screen-explore {
        right: 1rem;
        left: 1rem;
        width: auto;
        height: auto;
    }

    .screen-map {
        top: 18rem;
        bottom: auto;
        min-height: 23rem;
    }

    .screen-place {
        top: 42rem;
        min-height: 24rem;
    }

    .screen-lists,
    .screen-chat,
    .screen-explore {
        display: none;
    }

    .ubx-reel-stage[data-reel-scene="lists"] .screen-lists,
    .ubx-reel-stage[data-reel-scene="chat"] .screen-chat,
    .ubx-reel-stage[data-reel-scene="explore"] .screen-explore {
        top: 42rem;
        display: block;
        min-height: 25rem;
    }

    .ubx-reel-stage[data-reel-scene="chat"] .screen-chat {
        left: 50%;
        width: min(20rem, calc(100% - 2rem));
        transform: translateX(-50%);
    }

    .ubx-reel-map-search,
    .ubx-reel-place-popover {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }

    .ubx-reel-map-layer {
        top: 4.6rem;
        right: 0.75rem;
        left: 0.75rem;
        display: flex;
        flex-wrap: wrap;
    }

    .ubx-reel-place-popover {
        bottom: 0.75rem;
    }

    .ubx-reel-place-layout {
        height: auto;
        min-height: 23rem;
    }

    .ubx-reel-tactical {
        grid-template-columns: 1fr;
    }

    .ubx-scenario-card,
    .ubx-scenario-card:nth-child(even) {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ubx-scenario-card:nth-child(even) .ubx-scenario-copy {
        order: 0;
    }

    .ubx-scenario-copy h3 {
        max-width: 16ch;
    }

    .ubx-scenario-visual {
        min-height: 23rem;
    }

    .ubx-scenario-monitor,
    .ubx-scenario-tactical-mini,
    .ubx-scenario-logbook {
        transform: none;
    }

    .ubx-scenario-monitor {
        inset: 0 0 4rem;
    }

    .ubx-scenario-tactical-mini {
        inset: 0 0 5rem;
    }

    .ubx-scenario-chat-mini {
        right: 0.75rem;
        bottom: 0;
        left: 0.75rem;
        width: auto;
    }

    .ubx-scenario-logbook {
        inset: 0;
    }

    .ubx-scenario-achievement {
        right: 1rem;
        bottom: -0.4rem;
    }

    .ubx-journey-rail {
        grid-template-columns: 1fr;
    }

    .ubx-journey-rail::before {
        top: 2rem;
        bottom: 2rem;
        left: 2rem;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, rgba(var(--ubx-primary-rgb), 0.08), rgba(var(--ubx-primary-rgb), 0.45), rgba(var(--ubx-kind-chat-rgb), 0.32), rgba(var(--ubx-primary-rgb), 0.08));
        transform-origin: top;
    }

    .ubx-journey-step {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .ubx-profile-mode-controls,
    .ubx-list-mode-controls {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.1rem;
        scrollbar-width: none;
    }

    .ubx-profile-mode-controls::-webkit-scrollbar,
    .ubx-list-mode-controls::-webkit-scrollbar {
        display: none;
    }

    .ubx-profile-mode-controls button,
    .ubx-list-mode-controls button {
        flex: 0 0 auto;
    }

    .card-map {
        top: 0;
        left: 0;
    }

    .card-chat {
        right: 0;
        bottom: 5%;
    }

    .card-logbook {
        left: 3%;
        bottom: -2%;
    }

    .ubx-map-exploder {
        min-height: 43rem;
    }

    .ubx-map-exploder-base {
        inset: 7% 5% 34%;
    }

    .ubx-map-ui-sidebar {
        right: 1rem;
        width: auto;
    }

    .ubx-map-ui-canvas {
        inset: 16.5rem 1rem 1rem;
    }

    .ubx-map-ui-preview {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        width: auto;
    }

    .ubx-map-layer {
        width: auto;
        right: 1rem;
        left: 1rem;
    }

    .ubx-layer-search {
        top: 38%;
    }

    .ubx-layer-filter {
        top: 56%;
    }

    .ubx-layer-detail {
        top: 74%;
        bottom: auto;
    }

    .ubx-interactive-map {
        min-height: 36rem;
    }

    .ubx-demo-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-demo-chip {
        justify-content: center;
    }

    .ubx-preview-stage {
        transform: none;
    }

    .ubx-preview-browser {
        min-height: 45rem;
    }

    .ubx-preview-main-map {
        inset: 3.2rem 0.75rem 15rem;
    }

    .ubx-preview-shot-list {
        top: 3.75rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        overflow-x: auto;
        transform: none;
        scrollbar-width: none;
    }

    .ubx-preview-shot-list::-webkit-scrollbar {
        display: none;
    }

    .ubx-preview-shot-list span {
        flex: 0 0 auto;
    }

    .ubx-preview-cursor {
        display: none;
    }

    .ubx-preview-search-panel,
    .ubx-preview-place-card,
    .ubx-preview-list-card,
    .ubx-preview-chat-card,
    .ubx-preview-log-card,
    .ubx-preview-caption {
        right: 1rem;
        left: 1rem;
        width: auto;
        transform: none !important;
    }

    .ubx-preview-search-panel {
        top: 4.4rem;
    }

    .ubx-preview-place-card {
        top: 10.2rem;
    }

    .ubx-preview-list-card {
        right: 1rem;
        bottom: 10.8rem;
        left: 1rem;
    }

    .ubx-preview-chat-card {
        bottom: 15.6rem;
    }

    .ubx-preview-log-card {
        bottom: 5.3rem;
    }

    .ubx-preview-phone {
        display: none;
    }

    .ubx-preview-caption {
        bottom: 0.9rem;
    }

    .ubx-preview-live-action {
        bottom: 0.7rem;
        border-radius: 1rem;
    }

    .ubx-preview-timeline {
        grid-template-columns: 1fr;
    }

    .ubx-demo-map-sidebar,
    .ubx-demo-layer-card,
    .ubx-demo-result-card {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }

    .ubx-demo-map-sidebar {
        top: 0.75rem;
    }

    .ubx-demo-real-map-frame,
    .ubx-demo-map-canvas {
        inset: 13rem 0.75rem 6rem;
        transform: none;
    }

    .ubx-demo-camera-readout {
        top: 13.7rem;
        right: 1.15rem;
        left: 1.15rem;
        max-width: none;
    }

    .ubx-demo-camera-readout span {
        padding: 0.34rem 0.5rem;
        font-size: 0.68rem;
    }

    .ubx-demo-live-layer {
        top: auto;
        right: 1.15rem;
        bottom: 6.8rem;
        width: min(18rem, calc(100% - 2.3rem));
        padding: 0.66rem;
    }

    .ubx-demo-live-layer strong {
        font-size: 0.78rem;
    }

    .ubx-demo-live-layer span {
        font-size: 0.66rem;
    }

    .ubx-demo-layer-card {
        top: auto;
        bottom: 5.2rem;
    }

    .ubx-demo-result-card {
        bottom: 0.75rem;
    }

    .ubx-demo-map-actions {
        right: 0.75rem;
        bottom: 4.45rem;
        left: 0.75rem;
        max-width: none;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ubx-demo-map-actions::-webkit-scrollbar {
        display: none;
    }

    .ubx-demo-map-actions button {
        flex: 0 0 auto;
    }

    .ubx-demo-zoom-lens {
        width: 11rem;
    }

    .ubx-sticky-map-model {
        position: relative;
        top: auto;
        min-height: 32rem;
        margin-bottom: 2rem;
    }

    .ubx-sticky-map-part {
        width: 6.2rem;
        height: 5.8rem;
    }

    .part-search { top: 6%; left: 8%; }
    .part-filter { top: 12%; right: 7%; }
    .part-lists { bottom: 9%; left: 9%; }
    .part-logbook { right: 9%; bottom: 8%; }

    .ubx-profile-card-main,
    .ubx-profile-mini-grid {
        grid-template-columns: 1fr;
    }

    .ubx-profile-avatar-frame {
        width: 6rem;
    }

    .ubx-showcase-profile-avatar {
        width: 4.65rem;
    }

    .ubx-cinematic-header,
    .ubx-cinematic-shell {
        grid-template-columns: 1fr;
    }

    .ubx-cinematic-scene-copy {
        position: relative;
        top: auto;
    }

    .ubx-cinematic-controls {
        display: flex;
        overflow-x: auto;
        padding-bottom: 0.2rem;
        scrollbar-width: none;
    }

    .ubx-cinematic-controls::-webkit-scrollbar {
        display: none;
    }

    .ubx-cinematic-controls button {
        min-width: 15rem;
    }

    .ubx-cinematic-stage {
        min-height: 52rem;
    }

    .ubx-cinematic-screen {
        border-radius: 1.5rem;
    }

    .ubx-cinematic-topbar em {
        display: none;
    }

    .ubx-cinematic-search,
    .ubx-cinematic-place,
    .ubx-cinematic-list,
    .ubx-cinematic-chat,
    .ubx-cinematic-log {
        right: 1rem;
        left: 1rem;
        width: auto;
        transform: none;
    }

    .ubx-cinematic-search {
        top: 5.8rem;
    }

    .ubx-cinematic-place {
        bottom: 6rem;
    }

    .ubx-cinematic-list {
        top: 13.5rem;
    }

    .ubx-cinematic-chat {
        bottom: 11.2rem;
    }

    .ubx-cinematic-phone {
        right: 1rem;
        bottom: 6rem;
        width: 132px;
        height: 244px;
    }

    .ubx-cinematic-phone > div {
        height: 176px;
    }

    .ubx-cinematic-cue {
        border-radius: 1rem;
    }

    .ubx-cinematic-storyboard {
        grid-template-columns: repeat(5, minmax(7rem, 1fr));
        overflow-x: auto;
        padding-bottom: 0.2rem;
        scrollbar-width: none;
    }

    .ubx-cinematic-storyboard::-webkit-scrollbar {
        display: none;
    }

    .ubx-scenario-wall-heading,
    .ubx-scenario-wall-grid {
        grid-template-columns: 1fr;
    }

    .ubx-scenario-wall-controls {
        display: flex;
        overflow-x: auto;
        padding-bottom: 0.2rem;
        scrollbar-width: none;
    }

    .ubx-scenario-wall-controls::-webkit-scrollbar {
        display: none;
    }

    .ubx-scenario-wall-controls button {
        min-width: 15rem;
    }

    .ubx-scenario-wall-stage {
        min-height: 48rem;
    }

    .ubx-scenario-wall-browserbar em {
        display: none;
    }

    .ubx-scenario-panel.panel-search,
    .ubx-scenario-panel.panel-list,
    .ubx-scenario-panel.panel-chat,
    .ubx-scenario-panel.panel-profile,
    .ubx-scenario-wall-caption {
        right: 1rem;
        left: 1rem;
        width: auto;
        transform: none;
    }

    .ubx-scenario-panel.panel-search {
        top: 5.9rem;
    }

    .ubx-scenario-panel.panel-list {
        top: 12rem;
    }

    .ubx-scenario-panel.panel-chat {
        bottom: 13.2rem;
    }

    .ubx-scenario-panel.panel-profile {
        bottom: 13.2rem;
    }

    .ubx-scenario-wall-steps {
        grid-template-columns: repeat(3, minmax(8rem, 1fr));
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ubx-scenario-wall-steps::-webkit-scrollbar {
        display: none;
    }

    .ubx-decision-board {
        min-height: 44rem;
    }

    .ubx-decision-browserbar {
        border-radius: 1rem;
    }

    .ubx-decision-browserbar em {
        display: none;
    }

    .ubx-decision-map {
        inset: 4.8rem 0.8rem 0.8rem;
    }

    .ubx-decision-place-card,
    .ubx-decision-actions,
    .ubx-decision-status,
    .ubx-decision-live-caption {
        right: 1rem;
        left: 1rem;
        width: auto;
        transform: none;
    }

    .ubx-decision-place-card {
        bottom: 1rem;
    }

    .ubx-decision-actions {
        top: 5.8rem;
    }

    .ubx-decision-live-caption {
        top: 16rem;
    }

    .ubx-decision-actions {
        grid-template-columns: 1fr 1fr;
    }

    .ubx-decision-actions button {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .ubx-decision-status {
        bottom: 12.2rem;
    }

    .ubx-list-lab,
    .ubx-chat-lab {
        min-height: auto;
    }

    .ubx-list-lab {
        display: grid;
        gap: 1rem;
    }

    .ubx-list-stack,
    .ubx-list-browserbar,
    .ubx-list-map-strip,
    .ubx-list-permission-orbit,
    .ubx-list-import-beam,
    .ubx-list-inspector,
    .ubx-list-flow-panel {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: none;
        transform: none;
    }

    .ubx-list-stack {
        min-height: 17rem;
    }

    .ubx-list-map-strip {
        height: 13rem;
        transform: none;
    }

    .ubx-list-permission-orbit {
        height: 10rem;
        margin: 0 auto;
    }

    .ubx-list-import-beam {
        grid-template-columns: 1fr;
    }

    .ubx-list-browserbar {
        justify-content: space-between;
        border-radius: 1rem;
    }

    .ubx-list-inspector {
        order: 3;
    }

    .ubx-list-flow-panel {
        grid-template-columns: 1fr;
        order: 5;
    }

    .ubx-list-import-beam i {
        width: 2px;
        height: 2rem;
        justify-self: center;
    }

    .ubx-chat-lab {
        grid-template-columns: 1fr;
    }

    .ubx-chat-window {
        min-height: 30rem;
    }

    .bubble {
        max-width: 92%;
    }

    .ubx-tactical-board {
        grid-template-columns: 1fr;
    }

    .ubx-tactical-map {
        min-height: 24rem;
    }

    .ubx-tactical-side {
        align-content: start;
    }

    .ubx-showcase-final-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ubx-showcase-final-card h2,
    .ubx-showcase-final-card p {
        margin-right: auto;
        margin-left: auto;
    }

    .ubx-final-cta-row {
        justify-content: center;
    }

    .ubx-final-recap {
        min-height: 38rem;
    }

    .ubx-final-map {
        inset: 8% 4% 14%;
        transform: none;
    }

    .ubx-final-card {
        right: 1rem;
        left: 1rem;
        width: auto;
        animation: none;
    }

    .ubx-final-card.card-search { top: 1rem; }
    .ubx-final-card.card-list { top: 6.8rem; }
    .ubx-final-card.card-team { top: 12.6rem; bottom: auto; }
    .ubx-final-card.card-logbook { top: 18.4rem; bottom: auto; }

    .ubx-final-launch-board {
        top: auto;
        right: 1rem;
        bottom: 9.8rem;
        left: 1rem;
        width: auto;
        text-align: left;
        transform: none;
    }

    .ubx-final-phone {
        right: 50%;
        bottom: 1rem;
        transform: translateX(50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }

    .ubx-place-marquee {
        overflow-x: auto;
        mask-image: none;
    }

    .ubx-place-marquee-track {
        animation: none !important;
    }

    .ubx-place-marquee-group[aria-hidden="true"] {
        display: none;
    }
}

.ubx-product-suite {
    position: relative;
    overflow: hidden;
}

.ubx-product-suite::before,
.ubx-product-suite::after {
    position: absolute;
    z-index: 0;
    width: 34rem;
    height: 34rem;
    border-radius: 999px;
    content: "";
    filter: blur(5rem);
    opacity: 0.18;
    pointer-events: none;
}

.ubx-product-suite::before {
    top: 8%;
    left: -12rem;
    background: var(--ubx-primary);
}

.ubx-product-suite::after {
    right: -10rem;
    bottom: 10%;
    background: var(--ubx-accent);
}

.ubx-suite-heading,
.ubx-suite-shell {
    position: relative;
    z-index: 1;
}

.ubx-suite-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.65fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    max-width: 118rem;
    margin: 0 auto 2rem;
}

.ubx-suite-heading p:last-child {
    max-width: 46rem;
}

.ubx-suite-shell {
    max-width: 118rem;
    margin: 0 auto;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(10, 16, 15, 0.76);
    box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(28px);
}

.ubx-suite-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ubx-suite-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.ubx-suite-tabs label {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-height: 5.1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.35rem;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.ubx-suite-tabs label:hover,
.ubx-suite-shell:has(#ubx-suite-map:checked) label[for="ubx-suite-map"],
.ubx-suite-shell:has(#ubx-suite-list:checked) label[for="ubx-suite-list"],
.ubx-suite-shell:has(#ubx-suite-chat:checked) label[for="ubx-suite-chat"],
.ubx-suite-shell:has(#ubx-suite-profile:checked) label[for="ubx-suite-profile"],
.ubx-suite-shell:has(#ubx-suite-tactic:checked) label[for="ubx-suite-tactic"] {
    color: #fff;
    border-color: color-mix(in srgb, var(--ubx-primary) 55%, rgba(255, 255, 255, 0.25));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ubx-primary) 22%, transparent), rgba(255, 255, 255, 0.075));
    box-shadow:
        0 1rem 2.5rem color-mix(in srgb, var(--ubx-primary) 18%, transparent),
        inset 0 1px rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}

.ubx-suite-tabs svg {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--ubx-primary);
}

.ubx-suite-tabs strong,
.ubx-suite-tabs small {
    display: block;
}

.ubx-suite-tabs small {
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.78rem;
}

.ubx-suite-reel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 18rem);
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.35rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035)),
        rgba(0, 0, 0, 0.14);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}

.ubx-suite-reel small,
.ubx-suite-reel strong,
.ubx-suite-reel span {
    display: block;
}

.ubx-suite-reel small {
    color: var(--ubx-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ubx-suite-reel strong {
    margin-top: 0.2rem;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.ubx-suite-reel span {
    max-width: 58rem;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.64);
}

.ubx-suite-reel i {
    display: block;
    position: relative;
    overflow: hidden;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.ubx-suite-reel i::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
    content: "";
    transform: translateX(-100%);
    animation: ubxSuiteReelSweep 3.4s ease-in-out infinite;
}

.ubx-suite-reel b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, var(--ubx-primary), color-mix(in srgb, var(--ubx-primary) 45%, #fff));
    box-shadow: 0 0 1.8rem color-mix(in srgb, var(--ubx-primary) 34%, transparent);
    transition: width 420ms ease;
}

.ubx-suite-demo-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.58fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.ubx-suite-demo-steps,
.ubx-suite-demo-brief {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
        rgba(0, 0, 0, 0.12);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.11),
        0 1rem 2.6rem rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px);
}

.ubx-suite-demo-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.48rem;
    padding: 0.72rem;
}

.ubx-suite-demo-steps span {
    position: relative;
    display: grid;
    gap: 0.1rem;
    place-items: center;
    min-height: 3.4rem;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.78rem;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.035);
    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        transform 220ms ease;
}

.ubx-suite-demo-steps span::after {
    position: absolute;
    inset: auto 22% 0.48rem;
    height: 0.14rem;
    content: "";
    border-radius: 999px;
    background: var(--ubx-primary);
    opacity: 0;
    transition: opacity 220ms ease;
}

.ubx-suite-demo-steps b {
    color: var(--ubx-primary);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.ubx-suite-demo-steps span.is-complete {
    color: rgba(255, 255, 255, 0.72);
    border-color: rgba(var(--ubx-primary-rgb), 0.17);
}

.ubx-suite-demo-steps span.is-active {
    color: #fff;
    border-color: rgba(var(--ubx-primary-rgb), 0.44);
    background:
        radial-gradient(circle at 50% 0, rgba(var(--ubx-primary-rgb), 0.18), transparent 5rem),
        rgba(var(--ubx-primary-rgb), 0.1);
    transform: translateY(-0.08rem);
}

.ubx-suite-demo-steps span.is-active::after {
    opacity: 1;
}

.ubx-suite-demo-brief {
    display: grid;
    gap: 0.5rem;
    padding: 0.82rem 0.9rem;
}

.ubx-suite-demo-brief small {
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ubx-suite-demo-brief div {
    display: grid;
    gap: 0.28rem;
}

.ubx-suite-demo-brief div span {
    position: relative;
    padding-left: 1.12rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    line-height: 1.28;
}

.ubx-suite-demo-brief div span::before {
    position: absolute;
    top: 0.42rem;
    left: 0;
    width: 0.38rem;
    height: 0.38rem;
    content: "";
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0 0 0.22rem rgba(var(--ubx-primary-rgb), 0.11);
}

.ubx-suite-demo-brief button {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: 0.1rem;
    padding: 0.58rem 0.74rem;
    color: #07100d;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0.9rem 2rem rgba(var(--ubx-primary-rgb), 0.14);
}

.ubx-suite-demo-brief button svg {
    width: 0.9rem;
    height: 0.9rem;
}

.ubx-suite-shell.is-suite-playing .ubx-suite-stage::after {
    position: absolute;
    z-index: 5;
    top: 3.9rem;
    left: 1rem;
    padding: 0.42rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.72);
    content: "Demo läuft";
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
}

.ubx-suite-shell.is-suite-playing .ubx-suite-stage::before {
    position: absolute;
    z-index: 5;
    top: 4.42rem;
    left: 0.92rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #58f2a5;
    box-shadow: 0 0 1.1rem rgba(88, 242, 165, 0.85);
    content: "";
}

.ubx-suite-stage {
    position: relative;
    min-height: clamp(40rem, 72vw, 52rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.7rem;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.15), transparent 24rem),
        linear-gradient(145deg, #111c1a, #070b0b 62%, #111711);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.16),
        0 2rem 5rem rgba(0, 0, 0, 0.35);
    perspective: 1600px;
}

.ubx-suite-browserbar {
    display: flex;
    position: relative;
    z-index: 4;
    gap: 0.45rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.07);
}

.ubx-suite-browserbar span {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
}

.ubx-suite-browserbar strong {
    margin-left: 0.7rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.86rem;
}

.ubx-suite-browserbar em {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
    font-style: normal;
}

.ubx-suite-browserbar em i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #58f2a5;
    box-shadow: 0 0 1rem rgba(88, 242, 165, 0.75);
}

.ubx-suite-screen {
    display: grid;
    position: absolute;
    inset: 3.5rem 0 0;
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
}

.ubx-suite-nav {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
}

.ubx-suite-nav strong {
    margin-bottom: 0.7rem;
    color: #fff;
}

.ubx-suite-nav span {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.72rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.9rem;
}

.ubx-suite-shell:has(#ubx-suite-map:checked) .nav-map,
.ubx-suite-shell:has(#ubx-suite-list:checked) .nav-list,
.ubx-suite-shell:has(#ubx-suite-chat:checked) .nav-chat,
.ubx-suite-shell:has(#ubx-suite-profile:checked) .nav-profile,
.ubx-suite-shell:has(#ubx-suite-tactic:checked) .nav-tactic {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
}

.ubx-suite-panel {
    position: absolute;
    inset: 1rem 1rem 1rem min(16rem, 24vw);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.45rem;
    opacity: 0;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
        rgba(9, 14, 13, 0.78);
    box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.28);
    transform: translate3d(2rem, 1rem, -5rem) rotateX(7deg) rotateY(-9deg) scale(0.96);
    transition: opacity 260ms ease, transform 420ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
}

.ubx-suite-shell:has(#ubx-suite-map:checked) .suite-map,
.ubx-suite-shell:has(#ubx-suite-list:checked) .suite-list,
.ubx-suite-shell:has(#ubx-suite-chat:checked) .suite-chat,
.ubx-suite-shell:has(#ubx-suite-profile:checked) .suite-profile,
.ubx-suite-shell:has(#ubx-suite-tactic:checked) .suite-tactic {
    z-index: 3;
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
    pointer-events: auto;
}

.ubx-suite-shell[data-suite-scene="map"] .suite-map,
.ubx-suite-shell[data-suite-scene="list"] .suite-list,
.ubx-suite-shell[data-suite-scene="chat"] .suite-chat,
.ubx-suite-shell[data-suite-scene="profile"] .suite-profile,
.ubx-suite-shell[data-suite-scene="tactic"] .suite-tactic {
    animation: ubxSuiteSceneEnter 520ms cubic-bezier(.2,.7,.2,1);
}

.ubx-suite-map-canvas,
.ubx-suite-tactic-map {
    position: absolute;
    inset: 1rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background:
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 22% 25%, rgba(67, 112, 86, 0.55), transparent 16rem),
        radial-gradient(circle at 78% 74%, rgba(45, 71, 79, 0.58), transparent 18rem),
        #19211d;
    background-size: 4rem 4rem, 4rem 4rem, auto, auto, auto;
}

.ubx-suite-real-map,
.ubx-suite-map-shade {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ubx-suite-real-map {
    background: #13201b;
}

.ubx-suite-osm-tiles {
    filter: saturate(0.58) contrast(1.05) brightness(0.5) hue-rotate(18deg);
}

.ubx-suite-map-shade {
    z-index: 1;
    background:
        radial-gradient(circle at 48% 48%, rgba(157, 227, 168, 0.08), transparent 15rem),
        linear-gradient(135deg, rgba(5, 9, 8, 0.14), rgba(5, 9, 8, 0.62));
    pointer-events: none;
}

.ubx-suite-map-attribution {
    position: absolute;
    z-index: 4;
    right: 0.7rem;
    bottom: 0.55rem;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.68rem;
    pointer-events: none;
}

.ubx-suite-real-marker {
    display: grid;
    place-items: center;
    border-radius: 999px 999px 999px 0;
    color: #06100c;
    background: var(--ubx-primary);
    box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--ubx-primary) 30%, transparent);
    transform: rotate(-45deg);
    transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
}

.ubx-suite-real-marker span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 0.78rem;
    font-weight: 900;
    transform: rotate(45deg);
}

.ubx-suite-real-marker-place {
    background: #fff;
}

.ubx-suite-real-marker-parkour {
    background: #8fd3ff;
}

.ubx-suite-real-marker-chat,
.ubx-suite-real-marker-team,
.ubx-suite-real-marker-camera {
    background: #9de3a8;
}

.ubx-suite-real-marker-profile {
    background: #f1c76f;
}

.ubx-suite-real-marker.is-muted {
    opacity: 0.28;
    filter: grayscale(0.35);
    transform: rotate(-45deg) scale(0.82);
}

.ubx-suite-real-marker.is-active {
    z-index: 900 !important;
    opacity: 1;
    transform: rotate(-45deg) scale(1.12);
}

.suite-road,
.suite-water,
.suite-route,
.suite-tactic-route {
    position: absolute;
    z-index: 2;
    border-radius: 999px;
    pointer-events: none;
}

.suite-road {
    height: 0.55rem;
    background: rgba(255, 255, 255, 0.22);
}

.suite-road.road-a {
    top: 44%;
    left: -4%;
    width: 82%;
    transform: rotate(-13deg);
}

.suite-road.road-b {
    top: 59%;
    right: -8%;
    width: 66%;
    transform: rotate(22deg);
}

.suite-water {
    top: 12%;
    right: 11%;
    width: 24%;
    height: 62%;
    border-radius: 45% 55% 38% 62%;
    background: rgba(85, 150, 165, 0.28);
}

.suite-route,
.suite-tactic-route {
    top: 42%;
    left: 24%;
    width: 44%;
    height: 24%;
    border: 2px dashed color-mix(in srgb, var(--ubx-primary) 85%, #fff);
    border-right: 0;
    border-bottom: 0;
    border-radius: 4rem 0 0 0;
    animation: ubxSuitePulse 2.8s ease-in-out infinite;
}

.suite-district {
    position: absolute;
    z-index: 3;
    padding: 0.35rem 0.55rem;
    border-radius: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.25);
    font-size: 0.78rem;
}

.suite-district.district-a { top: 16%; left: 12%; }
.suite-district.district-b { right: 20%; bottom: 17%; }

.suite-pin {
    display: grid;
    position: absolute;
    z-index: 5;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 0;
    border-radius: 999px 999px 999px 0;
    color: #09110e;
    background: var(--ubx-primary);
    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--ubx-primary) 32%, transparent);
    transform: rotate(-45deg);
}

.suite-pin > * ,
.suite-pin {
    font-weight: 800;
}

.suite-pin.pin-a { top: 32%; left: 34%; }
.suite-pin.pin-b { top: 50%; left: 58%; background: #fff; }
.suite-pin.pin-c { top: 64%; left: 42%; background: #8fd3ff; }

.ubx-suite-search-card,
.ubx-suite-place-card,
.ubx-suite-rights-card,
.ubx-suite-tactic-panel,
.ubx-suite-logbook-card,
.ubx-suite-profile-card,
.ubx-suite-chat-context {
    position: absolute;
    z-index: 4;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.2rem;
    background: rgba(9, 14, 13, 0.72);
    box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
}

.ubx-suite-search-card {
    top: 1.6rem;
    left: 1.6rem;
    width: min(22rem, 48%);
}

.ubx-suite-place-card {
    right: 1.6rem;
    bottom: 1.6rem;
    width: min(25rem, 52%);
}

.ubx-suite-search-card small,
.ubx-suite-place-card small,
.ubx-suite-list-head small,
.ubx-suite-rights-card small,
.ubx-suite-tactic-panel small,
.ubx-suite-logbook-card small,
.ubx-suite-profile-card small {
    display: block;
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.78rem;
}

.ubx-suite-search-card strong,
.ubx-suite-place-card strong,
.ubx-suite-list-head strong,
.ubx-suite-rights-card strong,
.ubx-suite-tactic-panel strong,
.ubx-suite-logbook-card strong,
.ubx-suite-profile-card strong {
    display: block;
    color: #fff;
}

.ubx-suite-search-card span,
.ubx-suite-place-card span,
.ubx-suite-list-head span,
.ubx-suite-rights-card span,
.ubx-suite-tactic-panel span,
.ubx-suite-logbook-card span,
.ubx-suite-profile-card span {
    display: block;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.88rem;
}

.ubx-suite-search-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.ubx-suite-search-card b,
.ubx-suite-tactic-panel b {
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.09);
    font-size: 0.75rem;
}

.suite-photo-row {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.7rem;
}

.suite-photo-row i {
    flex: 1;
    min-height: 3.2rem;
    border-radius: 0.75rem;
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.03)),
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 55%),
        #27342f;
}

.suite-list {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    padding: 1.2rem;
}

.ubx-suite-list-head {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1.15rem;
    background: rgba(255,255,255,.06);
}

.ubx-suite-list-head button,
.ubx-suite-composer button {
    border: 0;
    border-radius: 999px;
    color: #08110e;
    background: var(--ubx-primary);
    font-weight: 800;
}

.ubx-suite-list-head button {
    padding: 0.72rem 1rem;
}

.ubx-suite-list-items {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    max-width: 58%;
}

.ubx-suite-list-items span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    align-items: center;
    padding: 0.9rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    background: rgba(255,255,255,.055);
}

.ubx-suite-list-items b {
    grid-row: span 2;
    width: 0.8rem;
    height: 2.2rem;
    border-radius: 999px;
}

.ubx-suite-list-items .lost { background: #86efac; }
.ubx-suite-list-items .parkour { background: #8fd3ff; }
.ubx-suite-list-items .urban { background: #e9c46a; }

.ubx-suite-list-items strong {
    color: #fff;
}

.ubx-suite-list-items small {
    color: rgba(255,255,255,.58);
}

.ubx-suite-rights-card {
    right: 1.2rem;
    bottom: 1.2rem;
    width: min(26rem, 38%);
}

.suite-chat {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 0.85rem;
    padding: 1.1rem;
}

.ubx-suite-chat-header {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 1.1rem;
    background: rgba(255,255,255,.07);
}

.ubx-suite-chat-header strong,
.ubx-suite-chat-header small {
    display: block;
}

.ubx-suite-chat-header small {
    color: rgba(255,255,255,.55);
}

.ubx-suite-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    justify-content: end;
    padding: 1rem;
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 80% 16%, rgba(255,255,255,.08), transparent 16rem),
        rgba(0,0,0,.18);
}

.ubx-suite-chat-thread p {
    max-width: 72%;
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 1rem 1rem 1rem 0.25rem;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.1);
}

.ubx-suite-chat-thread .right {
    align-self: flex-end;
    border-radius: 1rem 1rem 0.25rem 1rem;
    color: #06100c;
    background: var(--ubx-primary);
}

.ubx-suite-chat-thread .attachment {
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    background: rgba(255,255,255,.065);
}

.ubx-suite-composer {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    padding: 0.7rem 0.8rem 0.7rem 1rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.075);
}

.ubx-suite-composer span {
    flex: 1;
    color: rgba(255,255,255,.7);
}

.ubx-suite-composer button {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
}

.ubx-suite-chat-context {
    display: flex;
    position: static;
    gap: 0.55rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.ubx-suite-chat-context span {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.055);
    text-align: center;
}

.suite-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.72fr);
    gap: 1rem;
    padding: 1.1rem;
}

.ubx-suite-profile-card {
    display: flex;
    position: static;
    gap: 1rem;
    align-items: center;
    grid-column: 1 / -1;
}

.ubx-suite-avatar {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border: 2px solid color-mix(in srgb, var(--ubx-primary) 75%, #fff);
    border-radius: 999px;
    color: #06100c;
    background: radial-gradient(circle at 35% 25%, #fff, var(--ubx-primary));
    box-shadow: 0 0 0 0.45rem rgba(255,255,255,.06);
    font-weight: 900;
}

.ubx-suite-achievements,
.ubx-suite-logbook-card {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1.2rem;
    background: rgba(255,255,255,.055);
}

.ubx-suite-achievements {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

.ubx-suite-achievements span {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    color: rgba(255,255,255,.78);
}

.ubx-suite-achievements svg {
    color: var(--ubx-primary);
}

.ubx-suite-logbook-card {
    position: static;
}

.suite-tactic {
    padding: 1.1rem;
}

.ubx-suite-tactic-map {
    inset: 1.1rem 22rem 1.1rem 1.1rem;
}

.suite-building {
    position: absolute;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 0.7rem;
    background: rgba(255,255,255,.13);
    box-shadow: inset 0 1px rgba(255,255,255,.2);
}

.suite-building.b1 {
    top: 18%;
    left: 18%;
    width: 28%;
    height: 20%;
    transform: rotate(-7deg);
}

.suite-building.b2 {
    right: 17%;
    bottom: 20%;
    width: 34%;
    height: 18%;
    transform: rotate(11deg);
}

.suite-yard {
    position: absolute;
    top: 43%;
    left: 39%;
    padding: 0.35rem 0.55rem;
    border-radius: 0.7rem;
    color: rgba(255,255,255,.66);
    background: rgba(0,0,0,.24);
    font-size: 0.8rem;
}

.suite-tactic-map .person,
.suite-tactic-map .marker {
    display: grid;
    position: absolute;
    place-items: center;
    border-radius: 999px;
    font-style: normal;
    font-weight: 900;
}

.suite-tactic-map .person {
    width: 2.2rem;
    height: 2.2rem;
    color: #06100c;
    background: var(--ubx-primary);
}

.suite-tactic-map .person.a { top: 34%; left: 34%; }
.suite-tactic-map .person.b { top: 56%; left: 52%; }
.suite-tactic-map .person.stale {
    top: 66%;
    left: 30%;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.18);
}

.suite-tactic-map .marker {
    width: 2.1rem;
    height: 2.1rem;
    color: #fff;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(255,255,255,.18);
}

.suite-tactic-map .marker.camera { top: 24%; right: 24%; }
.suite-tactic-map .marker.entry { right: 35%; bottom: 24%; }

.ubx-suite-tactic-panel {
    top: 1.1rem;
    right: 1.1rem;
    bottom: 1.1rem;
    width: 19.6rem;
}

.ubx-suite-tactic-panel div {
    display: grid;
    gap: 0.55rem;
    margin-top: 1rem;
}

@keyframes ubxSuitePulse {
    0%,
    100% {
        opacity: 0.55;
        transform: translateZ(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateZ(1.5rem) scale(1.02);
    }
}

@keyframes ubxSuiteReelSweep {
    0% {
        transform: translateX(-100%);
    }
    52%,
    100% {
        transform: translateX(100%);
    }
}

@keyframes ubxSuiteSceneEnter {
    0% {
        filter: blur(0.4rem);
        transform: translate3d(1.6rem, 0.8rem, -4rem) rotateX(5deg) rotateY(-6deg) scale(0.975);
    }
    100% {
        filter: blur(0);
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
    }
}

@keyframes ubx-journey-pop {
    0% {
        opacity: 0.36;
        transform: translate3d(0, 0.9rem, 60px) scale(0.965);
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 991.98px) {
    .ubx-journey-stage {
        min-height: 0;
    }

    .ubx-journey-scene {
        display: grid;
        gap: 0.8rem;
        min-height: 0;
        padding: 0.85rem;
    }

    .ubx-journey-map-plane,
    .ubx-journey-card,
    .ubx-journey-caption,
    .ubx-journey-brief {
        position: relative;
        inset: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .ubx-journey-map-plane {
        min-height: 20rem;
    }

    .ubx-journey-caption {
        order: -1;
    }

    .ubx-journey-steps {
        grid-template-columns: repeat(5, minmax(5.4rem, 1fr));
        overflow-x: auto;
    }

    .ubx-journey-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ubx-journey-browserbar em {
        display: none;
    }

    .ubx-suite-heading {
        grid-template-columns: 1fr;
    }

    .ubx-suite-tabs {
        display: flex;
        overflow-x: auto;
        padding-bottom: 0.3rem;
        scroll-snap-type: x mandatory;
    }

    .ubx-suite-tabs label {
        min-width: 14rem;
        scroll-snap-align: start;
    }

    .ubx-suite-reel {
        grid-template-columns: 1fr;
    }

    .ubx-suite-demo-console {
        grid-template-columns: 1fr;
    }

    .ubx-suite-demo-steps {
        grid-template-columns: repeat(5, minmax(7rem, 1fr));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .ubx-suite-demo-steps span {
        scroll-snap-align: start;
    }

    .ubx-suite-stage {
        min-height: 55rem;
    }

    .ubx-suite-screen {
        grid-template-columns: 1fr;
    }

    .ubx-suite-nav {
        display: none;
    }

    .ubx-suite-panel {
        inset: 1rem;
    }

    .ubx-suite-search-card,
    .ubx-suite-place-card,
    .ubx-suite-rights-card,
    .ubx-suite-tactic-panel {
        position: absolute;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .ubx-suite-search-card { top: 1rem; }
    .ubx-suite-place-card,
    .ubx-suite-rights-card,
    .ubx-suite-tactic-panel { bottom: 1rem; }

    .ubx-suite-list-items {
        max-width: none;
    }

    .suite-profile {
        grid-template-columns: 1fr;
    }

    .ubx-suite-tactic-map {
        right: 1rem;
        bottom: 13rem;
    }
}

.ubx-showcase-hero,
.ubx-showcase-director,
.ubx-showcase-section {
    --section-focus: 0;
    --section-travel: 0;
    position: relative;
}

.ubx-showcase-hero::after,
.ubx-showcase-section[data-chapter-label]::after {
    position: absolute;
    z-index: 5;
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 4vw, 3rem);
    max-width: min(19rem, calc(100% - 2rem));
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, calc(0.06 + (var(--section-focus) * 0.16)));
    border-radius: 999px;
    color: rgba(255, 255, 255, calc(0.28 + (var(--section-focus) * 0.62)));
    content: attr(data-chapter-label);
    font-size: clamp(0.68rem, 1vw, 0.8rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, calc(0.04 + (var(--section-focus) * 0.08))), rgba(255, 255, 255, 0.025)),
        rgba(5, 9, 8, calc(0.2 + (var(--section-focus) * 0.35)));
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, calc(0.04 + (var(--section-focus) * 0.18)));
    opacity: calc(0.12 + (var(--section-focus) * 0.88));
    transform: translate3d(0, calc((1 - var(--section-focus)) * -0.8rem), 0) scale(calc(0.94 + (var(--section-focus) * 0.06)));
    pointer-events: none;
    backdrop-filter: blur(18px);
}

.ubx-showcase-hero::after {
    content: "Intro · Kontrollraum";
}

.ubx-showcase-section[data-chapter-label]::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at calc(20% + (var(--section-travel) * 38%)) 18%, rgba(255, 255, 255, calc(var(--section-focus) * 0.11)), transparent 22rem),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, calc(var(--section-focus) * 0.025)), transparent);
    content: "";
    opacity: calc(0.12 + (var(--section-focus) * 0.72));
    transform: translateY(calc((0.5 - var(--section-travel)) * 1.6rem));
    pointer-events: none;
}

.ubx-showcase-section[data-chapter-label] > .container,
.ubx-showcase-section[data-chapter-label] > .container-fluid,
.ubx-showcase-director > .container,
.ubx-showcase-hero > .container {
    position: relative;
    z-index: 1;
}

.ubx-showcase-section.is-camera-locked .ubx-showcase-reveal.is-visible,
.ubx-showcase-hero.is-camera-locked .ubx-showcase-reveal.is-visible {
    filter: saturate(calc(0.92 + (var(--section-focus) * 0.16))) contrast(calc(1 + (var(--section-focus) * 0.04)));
}

.ubx-showcase-section.is-camera-locked .ubx-showcase-tilt,
.ubx-showcase-hero.is-camera-locked .ubx-showcase-tilt {
    box-shadow:
        0 2.2rem 6rem rgba(0, 0, 0, 0.3),
        0 0 4rem color-mix(in srgb, var(--ubx-primary) calc(var(--section-focus) * 14%), transparent);
}

.ubx-showcase::after {
    position: fixed;
    z-index: 8;
    right: clamp(0.8rem, 2vw, 1.2rem);
    bottom: clamp(0.8rem, 2vw, 1.2rem);
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    color: rgba(255, 255, 255, 0.62);
    content: attr(data-active-shot);
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(5, 8, 7, 0.56);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.26);
    opacity: calc(0.18 + (var(--active-section-focus, 0) * 0.52));
    transform: translateY(calc((1 - var(--active-section-focus, 0)) * 0.6rem));
    pointer-events: none;
    backdrop-filter: blur(18px);
}

.ubx-trailer-hud {
    position: fixed;
    z-index: 12;
    bottom: clamp(0.9rem, 2vw, 1.25rem);
    left: 50%;
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(8rem, 14rem) auto;
    gap: 0.75rem;
    align-items: center;
    width: min(44rem, calc(100vw - 2rem));
    padding: 0.72rem 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.15rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        rgba(5, 9, 8, 0.62);
    box-shadow:
        0 1.4rem 3.4rem rgba(0, 0, 0, 0.3),
        inset 0 1px rgba(255, 255, 255, 0.12);
    transform: translateX(-50%) translateY(calc((1 - var(--active-section-focus, 0)) * 0.45rem));
    opacity: calc(0.42 + (var(--active-section-focus, 0) * 0.52));
    backdrop-filter: blur(22px);
}

.ubx-trailer-hud-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.ubx-trailer-hud-copy small {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
    color: var(--ubx-primary);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ubx-trailer-hud-copy strong {
    overflow: hidden;
    color: var(--ubx-text);
    font-size: 0.92rem;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-trailer-hud-copy em {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.75rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-trailer-hud-copy b {
    color: rgba(255, 255, 255, 0.78);
}

.ubx-trailer-hud-progress {
    position: relative;
    overflow: hidden;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.ubx-trailer-hud-progress::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transform: translateX(-100%);
    animation: ubxSuiteReelSweep 4.2s ease-in-out infinite;
}

.ubx-trailer-hud-progress i {
    position: relative;
    z-index: 1;
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, var(--ubx-primary), rgba(var(--ubx-kind-chat-rgb), 0.92), rgba(var(--ubx-kind-list-rgb), 0.86));
    box-shadow: 0 0 1.6rem rgba(var(--ubx-primary-rgb), 0.32);
    transition: width 180ms linear;
}

.ubx-trailer-hud button {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    justify-content: center;
    min-width: 6.2rem;
    padding: 0.54rem 0.68rem;
    color: #07100d;
    font-weight: 950;
    border: 0;
    border-radius: 999px;
    background: var(--ubx-primary);
    box-shadow: 0 0.8rem 1.7rem rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-trailer-hud button .icon-pause,
.ubx-trailer-hud button.is-playing .icon-play {
    display: none;
}

.ubx-trailer-hud button.is-playing .icon-pause {
    display: inline-block;
}

@media (max-width: 767.98px) {
    .ubx-showcase-hero::after,
    .ubx-showcase-section[data-chapter-label]::after,
    .ubx-showcase::after,
    .ubx-trailer-hud {
        display: none;
    }
}

.ubx-product-theatre {
    position: relative;
    overflow: hidden;
    padding-top: clamp(5rem, 9vw, 8rem);
    padding-bottom: clamp(5rem, 9vw, 8rem);
    perspective: 1800px;
}

.ubx-showcase-legacy-sequence {
    display: none !important;
}

.ubx-scenario-premiere {
    position: relative;
    overflow: hidden;
    padding-top: clamp(5rem, 8vw, 7.5rem);
    padding-bottom: clamp(5rem, 8vw, 7.5rem);
    perspective: 1800px;
}

.ubx-scenario-premiere::before {
    content: "";
    position: absolute;
    inset: 8% -12% auto;
    height: 70%;
    background:
        radial-gradient(circle at 20% 32%, rgba(var(--ubx-primary-rgb), 0.18), transparent 34%),
        radial-gradient(circle at 78% 18%, rgba(125, 211, 252, 0.14), transparent 34%),
        radial-gradient(circle at 60% 76%, rgba(241, 199, 111, 0.1), transparent 38%);
    filter: blur(20px);
    pointer-events: none;
}

@media (min-width: 1200px) {
    .ubx-scenario-premiere > .container-fluid {
        padding-left: clamp(9.5rem, 11vw, 12rem) !important;
    }
}

.ubx-scenario-premiere-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.4fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    max-width: 1580px;
    margin: 0 auto;
}

.ubx-scenario-premiere-copy {
    display: grid;
    gap: 1.2rem;
}

.ubx-scenario-premiere-controls {
    display: grid;
    gap: 0.85rem;
}

.ubx-scenario-premiere-controls button {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    padding: 0.95rem;
    color: rgba(236, 252, 243, 0.76);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(9, 16, 15, 0.72);
    backdrop-filter: blur(18px);
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.ubx-scenario-premiere-controls button:hover,
.ubx-scenario-premiere-controls button.is-active {
    border-color: rgba(var(--ubx-primary-rgb), 0.38);
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.18), rgba(255, 255, 255, 0.055)),
        rgba(9, 16, 15, 0.8);
    box-shadow: 0 18px 44px rgba(var(--ubx-primary-rgb), 0.12);
    transform: translate3d(8px, 0, 0);
}

.ubx-scenario-premiere-controls svg {
    width: 2.8rem;
    height: 2.8rem;
    padding: 0.7rem;
    color: rgb(var(--ubx-primary-rgb));
    border-radius: 1rem;
    background: rgba(var(--ubx-primary-rgb), 0.13);
}

.ubx-scenario-premiere-controls strong,
.ubx-scenario-premiere-controls small {
    display: block;
}

.ubx-scenario-premiere-controls strong {
    color: #fff;
}

.ubx-scenario-premiere-controls small {
    margin-top: 0.1rem;
    color: rgba(236, 252, 243, 0.56);
}

.ubx-scenario-premiere-stage {
    position: relative;
    min-height: clamp(620px, 58vw, 780px);
    padding: clamp(0.8rem, 1.5vw, 1.2rem);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 38px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
        rgba(9, 16, 15, 0.78);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(24px);
    transform-style: preserve-3d;
    isolation: isolate;
}

.ubx-scenario-premiere-light {
    position: absolute;
    width: 16rem;
    height: 16rem;
    border-radius: 999px;
    filter: blur(34px);
    opacity: 0.42;
    pointer-events: none;
}

.ubx-scenario-premiere-light.light-one {
    top: 8%;
    left: 8%;
    background: rgba(var(--ubx-primary-rgb), 0.28);
}

.ubx-scenario-premiere-light.light-two {
    right: 8%;
    bottom: 10%;
    background: rgba(125, 211, 252, 0.2);
}

.ubx-scenario-premiere-screen {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    background:
        linear-gradient(150deg, rgba(7, 14, 13, 0.95), rgba(14, 25, 23, 0.88)),
        #07100d;
    transform-style: preserve-3d;
}

.ubx-scenario-premiere-map {
    position: absolute;
    inset: 3.2rem 2rem 2rem;
    overflow: hidden;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(28, 43, 36, 0.94), rgba(11, 18, 17, 0.96)),
        #111b18;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform: translateZ(14px) rotateX(2deg);
}

.ubx-scenario-premiere-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 52% 52%, black, transparent 74%);
    opacity: 0.42;
}

.scenario-land,
.scenario-water,
.scenario-road,
.scenario-route {
    position: absolute;
    pointer-events: none;
}

.scenario-land {
    border-radius: 45% 55% 48% 52%;
    background: rgba(var(--ubx-primary-rgb), 0.11);
}

.scenario-land.land-a {
    left: 7%;
    top: 10%;
    width: 42%;
    height: 40%;
}

.scenario-land.land-b {
    right: 7%;
    bottom: 9%;
    width: 44%;
    height: 42%;
}

.scenario-water {
    left: 42%;
    top: -12%;
    width: 18%;
    height: 130%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(125, 211, 252, 0.18), rgba(125, 211, 252, 0.04));
    transform: rotate(18deg);
}

.scenario-road {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.scenario-road.road-a {
    left: 10%;
    top: 42%;
    width: 72%;
    transform: rotate(-12deg);
}

.scenario-road.road-b {
    left: 22%;
    top: 62%;
    width: 60%;
    transform: rotate(17deg);
}

.scenario-route {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgb(var(--ubx-primary-rgb)), transparent);
    opacity: 0;
    transform-origin: left center;
    transition: opacity 260ms ease, transform 420ms ease;
}

.scenario-route.route-lostplace {
    left: 17%;
    top: 48%;
    width: 54%;
    transform: rotate(-8deg) scaleX(0.85);
}

.scenario-route.route-parkour {
    left: 30%;
    top: 34%;
    width: 42%;
    background: linear-gradient(90deg, transparent, #7dd3fc, transparent);
    transform: rotate(16deg) scaleX(0.85);
}

.scenario-route.route-team {
    left: 42%;
    top: 58%;
    width: 37%;
    background: linear-gradient(90deg, transparent, #f1c76f, transparent);
    transform: rotate(-24deg) scaleX(0.85);
}

.ubx-scenario-premiere-stage[data-scenario-premiere="lostplace"] .route-lostplace,
.ubx-scenario-premiere-stage[data-scenario-premiere="parkour"] .route-parkour,
.ubx-scenario-premiere-stage[data-scenario-premiere="team"] .route-team {
    opacity: 1;
    transform: rotate(var(--route-angle, -8deg)) scaleX(1);
}

.ubx-scenario-premiere-stage[data-scenario-premiere="parkour"] .route-parkour {
    --route-angle: 16deg;
}

.ubx-scenario-premiere-stage[data-scenario-premiere="team"] .route-team {
    --route-angle: -24deg;
}

.scenario-premiere-pin {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    min-width: 3rem;
    height: 3rem;
    padding: 0 0.65rem;
    color: #07100d;
    font-weight: 950;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    background: linear-gradient(135deg, #eaffef, rgb(var(--ubx-primary-rgb)));
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), 0 0 0 10px rgba(var(--ubx-primary-rgb), 0.11);
    transition: transform 280ms ease, opacity 220ms ease, filter 220ms ease;
}

.scenario-premiere-pin.pin-lostplace {
    left: 25%;
    top: 42%;
    background: linear-gradient(135deg, #fff7d6, #f1c76f);
}

.scenario-premiere-pin.pin-parkour {
    left: 58%;
    top: 28%;
    background: linear-gradient(135deg, #e0f2fe, #7dd3fc);
}

.scenario-premiere-pin.pin-team {
    left: 66%;
    top: 58%;
    background: linear-gradient(135deg, #f0fdf4, rgb(var(--ubx-primary-rgb)));
}

.ubx-scenario-premiere-stage[data-scenario-premiere="lostplace"] .pin-lostplace,
.ubx-scenario-premiere-stage[data-scenario-premiere="parkour"] .pin-parkour,
.ubx-scenario-premiere-stage[data-scenario-premiere="team"] .pin-team {
    transform: translateY(-8px) scale(1.16);
    filter: saturate(1.24);
}

.ubx-scenario-premiere-stage[data-scenario-premiere="lostplace"] .pin-parkour,
.ubx-scenario-premiere-stage[data-scenario-premiere="lostplace"] .pin-team,
.ubx-scenario-premiere-stage[data-scenario-premiere="parkour"] .pin-lostplace,
.ubx-scenario-premiere-stage[data-scenario-premiere="parkour"] .pin-team,
.ubx-scenario-premiere-stage[data-scenario-premiere="team"] .pin-lostplace,
.ubx-scenario-premiere-stage[data-scenario-premiere="team"] .pin-parkour {
    opacity: 0.46;
    transform: scale(0.86);
}

.ubx-scenario-premiere-brief,
.ubx-scenario-premiere-card,
.ubx-scenario-premiere-device,
.ubx-scenario-premiere-action,
.ubx-scenario-premiere-timeline {
    position: absolute;
    z-index: 8;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(9, 16, 15, 0.76);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(22px);
}

.ubx-scenario-premiere-brief {
    top: 2rem;
    left: 2rem;
    display: grid;
    gap: 0.45rem;
    width: min(32rem, calc(100% - 4rem));
    padding: 1.05rem;
    border-radius: 24px;
    transform: translateZ(82px);
}

.ubx-scenario-premiere-brief small,
.ubx-scenario-premiere-brief span {
    color: rgba(236, 252, 243, 0.64);
}

.ubx-scenario-premiere-brief strong {
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    line-height: 1.08;
}

.ubx-scenario-premiere-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.95rem;
    border-radius: 22px;
}

.ubx-scenario-premiere-card small,
.ubx-scenario-premiere-card span {
    color: rgba(236, 252, 243, 0.58);
}

.ubx-scenario-premiere-card strong {
    color: #fff;
    font-size: 1rem;
}

.ubx-scenario-premiere-card.card-place {
    right: 2rem;
    top: 11.8rem;
    width: min(22rem, calc(100% - 4rem));
    transform: translateZ(96px);
}

.ubx-scenario-premiere-card.card-checklist {
    left: 2rem;
    bottom: 6.2rem;
    width: min(22rem, calc(100% - 4rem));
    transform: translateZ(100px);
}

.ubx-scenario-premiere-card.card-checklist div {
    display: grid;
    gap: 0.42rem;
}

.ubx-scenario-premiere-card.card-checklist span {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.ubx-scenario-premiere-card.card-checklist span::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: rgb(var(--ubx-primary-rgb));
    box-shadow: 0 0 12px rgba(var(--ubx-primary-rgb), 0.58);
}

.ubx-scenario-premiere-device {
    right: 3.4rem;
    bottom: 5.8rem;
    width: 9.5rem;
    height: 15.5rem;
    padding: 0.85rem;
    border-radius: 2rem;
    transform: translateZ(120px) rotateY(-8deg) rotateX(4deg);
}

.ubx-scenario-premiere-device .notch {
    position: absolute;
    top: 0.52rem;
    left: 50%;
    width: 3rem;
    height: 0.38rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    transform: translateX(-50%);
}

.ubx-scenario-premiere-device strong {
    display: block;
    margin: 0.55rem 0 0.75rem;
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
}

.ubx-scenario-premiere-device .phone-map {
    position: relative;
    height: 11.4rem;
    overflow: hidden;
    border-radius: 1.3rem;
    background:
        linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.18), transparent),
        #17211e;
}

.ubx-scenario-premiere-device i,
.ubx-scenario-premiere-device b,
.ubx-scenario-premiere-device em {
    position: absolute;
}

.ubx-scenario-premiere-device .building {
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.14);
}

.ubx-scenario-premiere-device .building.a {
    left: 18%;
    top: 20%;
    width: 34%;
    height: 28%;
}

.ubx-scenario-premiere-device .building.b {
    right: 15%;
    bottom: 18%;
    width: 38%;
    height: 34%;
}

.ubx-scenario-premiere-device .unit,
.ubx-scenario-premiere-device em {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    color: #06100c;
    font-size: 0.72rem;
    font-style: normal;
    border-radius: 999px;
    background: #7dd3fc;
}

.ubx-scenario-premiere-device .unit.a {
    left: 48%;
    top: 46%;
}

.ubx-scenario-premiere-device .unit.b {
    right: 22%;
    top: 33%;
}

.ubx-scenario-premiere-device em {
    left: 30%;
    bottom: 20%;
    background: #f1c76f;
}

.ubx-scenario-premiere-action {
    right: 2rem;
    bottom: 2rem;
    border-radius: 18px;
    transform: translateZ(132px);
}

.ubx-scenario-premiere-action button {
    display: inline-flex;
    gap: 0.7rem;
    align-items: center;
    padding: 0.82rem 1rem;
    color: #06100c;
    font-weight: 900;
    border: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #eaffef, rgb(var(--ubx-primary-rgb)));
}

.ubx-scenario-premiere-timeline {
    left: 50%;
    bottom: 2rem;
    display: flex;
    gap: 0.45rem;
    padding: 0.55rem;
    border-radius: 999px;
    transform: translate3d(-50%, 0, 128px);
}

.ubx-scenario-premiere-timeline span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
    color: rgba(236, 252, 243, 0.58);
    font-size: 0.8rem;
    border-radius: 999px;
}

.ubx-scenario-premiere-timeline span.is-active {
    color: #fff;
    background: rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-scenario-premiere-timeline b {
    color: rgb(var(--ubx-primary-rgb));
}

@media (prefers-reduced-motion: no-preference) {
    .ubx-scenario-premiere-light {
        animation: ubx-showcase-drift 12s ease-in-out infinite alternate;
    }

    .scenario-premiere-pin {
        animation: ubx-scenario-premiere-float 4.8s ease-in-out infinite;
    }

    .scenario-premiere-pin.pin-parkour {
        animation-delay: 0.4s;
    }

    .scenario-premiere-pin.pin-team {
        animation-delay: 0.8s;
    }
}

@keyframes ubx-scenario-premiere-float {
    0%, 100% {
        margin-top: 0;
    }

    50% {
        margin-top: -0.35rem;
    }
}

@media (max-width: 1199.98px) {
    .ubx-scenario-premiere-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .ubx-scenario-premiere-stage {
        min-height: 820px;
        border-radius: 28px;
    }

    .ubx-scenario-premiere-map {
        inset: 12rem 0.75rem 0.75rem;
    }

    .ubx-scenario-premiere-brief,
    .ubx-scenario-premiere-card.card-place,
    .ubx-scenario-premiere-card.card-checklist {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }

    .ubx-scenario-premiere-brief {
        top: 0.75rem;
    }

    .ubx-scenario-premiere-card.card-place {
        top: 13rem;
    }

    .ubx-scenario-premiere-card.card-checklist {
        bottom: 7rem;
    }

    .ubx-scenario-premiere-device {
        display: none;
    }

    .ubx-scenario-premiere-action {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .ubx-scenario-premiere-timeline {
        right: 0.75rem;
        left: 0.75rem;
        overflow-x: auto;
        border-radius: 20px;
        transform: translateZ(128px);
    }
}

.ubx-product-theatre::before {
    content: "";
    position: absolute;
    inset: 6% -10% auto;
    height: 62%;
    background:
        radial-gradient(circle at 16% 24%, rgba(var(--ubx-primary-rgb), 0.18), transparent 38%),
        radial-gradient(circle at 76% 18%, rgba(125, 211, 252, 0.16), transparent 34%),
        linear-gradient(130deg, rgba(255, 255, 255, 0.035), transparent 52%);
    filter: blur(18px);
    opacity: 0.9;
    pointer-events: none;
}

@media (min-width: 1200px) {
    .ubx-product-theatre > .container-fluid {
        padding-left: clamp(9.5rem, 11vw, 12rem) !important;
    }
}

.ubx-theatre-heading,
.ubx-product-theatre-grid {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin-right: auto;
    margin-left: auto;
}

.ubx-theatre-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    margin-bottom: clamp(1.75rem, 4vw, 3.5rem);
}

.ubx-product-theatre-grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: stretch;
}

.ubx-theatre-director,
.ubx-theatre-stage {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
        rgba(9, 16, 15, 0.76);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(24px);
}

.ubx-theatre-director {
    align-self: center;
    padding: clamp(1rem, 2vw, 1.3rem);
    border-radius: 32px;
}

.ubx-theatre-current {
    display: grid;
    gap: 0.75rem;
    padding: 1.1rem;
    border: 1px solid rgba(var(--ubx-primary-rgb), 0.22);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.14), rgba(255, 255, 255, 0.045));
}

.ubx-theatre-current small,
.ubx-theatre-current span {
    color: rgba(236, 252, 243, 0.68);
}

.ubx-theatre-current strong {
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    line-height: 1.08;
}

.ubx-theatre-controls {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.ubx-theatre-controls button {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.78rem 0.85rem;
    color: rgba(236, 252, 243, 0.74);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.045);
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.ubx-theatre-controls button:hover,
.ubx-theatre-controls button.is-active {
    border-color: rgba(var(--ubx-primary-rgb), 0.36);
    background: linear-gradient(135deg, rgba(var(--ubx-primary-rgb), 0.18), rgba(255, 255, 255, 0.06));
    box-shadow: 0 14px 32px rgba(var(--ubx-primary-rgb), 0.11);
    transform: translate3d(8px, 0, 0);
}

.ubx-theatre-controls b {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: rgb(var(--ubx-primary-rgb));
    border-radius: 0.9rem;
    background: rgba(var(--ubx-primary-rgb), 0.12);
}

.ubx-theatre-controls strong,
.ubx-theatre-controls small {
    display: block;
}

.ubx-theatre-controls strong {
    color: #fff;
    font-size: 0.98rem;
}

.ubx-theatre-controls small {
    margin-top: 0.15rem;
    color: rgba(236, 252, 243, 0.56);
}

.ubx-theatre-stage {
    position: relative;
    min-height: clamp(680px, 70vw, 880px);
    padding: clamp(0.8rem, 2vw, 1.25rem);
    border-radius: 38px;
    transform-style: preserve-3d;
    isolation: isolate;
}

.ubx-theatre-stage::after {
    content: "";
    position: absolute;
    inset: auto 8% -2rem;
    height: 6rem;
    border-radius: 999px;
    background: radial-gradient(ellipse, rgba(var(--ubx-primary-rgb), 0.22), transparent 68%);
    filter: blur(18px);
    pointer-events: none;
    transform: translateZ(-70px) rotateX(68deg);
}

.ubx-theatre-glow {
    position: absolute;
    width: 18rem;
    height: 18rem;
    border-radius: 999px;
    filter: blur(34px);
    opacity: 0.42;
    pointer-events: none;
}

.ubx-theatre-glow.glow-a {
    top: 6%;
    left: 8%;
    background: rgba(var(--ubx-primary-rgb), 0.35);
}

.ubx-theatre-glow.glow-b {
    right: 6%;
    bottom: 8%;
    background: rgba(125, 211, 252, 0.22);
}

.ubx-theatre-browser {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 30px;
    background:
        linear-gradient(150deg, rgba(8, 15, 14, 0.96), rgba(13, 22, 21, 0.88)),
        rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform-style: preserve-3d;
}

.ubx-theatre-browserbar {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    height: 3.3rem;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.045);
}

.ubx-theatre-browserbar > span {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.ubx-theatre-browserbar strong {
    min-width: 0;
    margin-left: 0.4rem;
    overflow: hidden;
    color: rgba(236, 252, 243, 0.72);
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ubx-theatre-browserbar em {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    color: rgba(236, 252, 243, 0.58);
    font-size: 0.82rem;
    font-style: normal;
}

.ubx-theatre-browserbar em i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgb(var(--ubx-primary-rgb));
    box-shadow: 0 0 16px rgba(var(--ubx-primary-rgb), 0.7);
}

.ubx-theatre-sidebar {
    position: absolute;
    z-index: 9;
    top: 4.2rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 10.5rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background: rgba(9, 16, 15, 0.78);
    backdrop-filter: blur(20px);
    transform: translateZ(52px);
}

.ubx-theatre-sidebar strong {
    margin-bottom: 0.3rem;
    color: #fff;
    font-size: 0.9rem;
}

.ubx-theatre-sidebar button {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.62rem 0.65rem;
    color: rgba(236, 252, 243, 0.68);
    text-align: left;
    border: 0;
    border-radius: 14px;
    background: transparent;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.ubx-theatre-sidebar button:hover,
.ubx-theatre-stage[data-theatre-scene="map"] .nav-map,
.ubx-theatre-stage[data-theatre-scene="lists"] .nav-list,
.ubx-theatre-stage[data-theatre-scene="chat"] .nav-chat,
.ubx-theatre-stage[data-theatre-scene="logbook"] .nav-log,
.ubx-theatre-stage[data-theatre-scene="profile"] .nav-profile {
    color: #fff;
    background: rgba(var(--ubx-primary-rgb), 0.16);
    transform: translateX(3px);
}

.ubx-theatre-workspace {
    position: absolute;
    inset: 4.15rem 1rem 1rem 12.2rem;
    overflow: hidden;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.035);
    transform: translateZ(12px);
}

.ubx-theatre-toolbar {
    position: absolute;
    z-index: 8;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.ubx-theatre-toolbar label,
.ubx-theatre-toolbar div {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.58rem 0.8rem;
    color: rgba(236, 252, 243, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(8, 15, 14, 0.72);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
}

.ubx-theatre-toolbar button {
    padding: 0.35rem 0.55rem;
    color: rgba(236, 252, 243, 0.72);
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

.ubx-theatre-map-shell,
.ubx-theatre-real-map {
    position: absolute;
    inset: 0;
}

.ubx-theatre-map-shell {
    overflow: hidden;
    border-radius: inherit;
}

.ubx-theatre-real-map {
    z-index: 1;
    background: #17211e;
}

.ubx-theatre-real-map::after {
    content: "";
    position: absolute;
    z-index: 450;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 10, 9, 0.52), transparent 36%, rgba(5, 10, 9, 0.28)),
        linear-gradient(0deg, rgba(5, 10, 9, 0.4), transparent 45%, rgba(5, 10, 9, 0.22));
    pointer-events: none;
}

.ubx-theatre-real-map .leaflet-pane,
.ubx-theatre-real-map .leaflet-control-container {
    filter: saturate(0.7) contrast(0.95) brightness(0.72);
}

.ubx-theatre-real-marker {
    width: auto !important;
    height: auto !important;
}

.ubx-theatre-real-marker span {
    display: grid;
    place-items: center;
    min-width: 2.05rem;
    height: 2.05rem;
    padding: 0 0.45rem;
    color: #08110d;
    font-weight: 900;
    font-size: 0.78rem;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background: linear-gradient(135deg, #e8fff0, rgb(var(--ubx-primary-rgb)));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(var(--ubx-primary-rgb), 0.14);
    transition: transform 240ms ease, opacity 240ms ease, filter 240ms ease;
}

.ubx-theatre-real-marker-cluster span {
    min-width: 2.9rem;
    height: 2.9rem;
    background: linear-gradient(135deg, #fff7d6, #f1c76f);
}

.ubx-theatre-real-marker-team span,
.ubx-theatre-real-marker-entry span {
    background: linear-gradient(135deg, #e0f2fe, #7dd3fc);
}

.ubx-theatre-real-marker-proof span,
.ubx-theatre-real-marker-profile span {
    background: linear-gradient(135deg, #f8e7ff, #c084fc);
}

.ubx-theatre-real-marker.is-active span {
    opacity: 1;
    filter: saturate(1.25);
    transform: translateY(-5px) scale(1.14);
}

.ubx-theatre-real-marker.is-muted span {
    opacity: 0.42;
    filter: saturate(0.55);
    transform: scale(0.88);
}

.ubx-theatre-focus-card,
.ubx-theatre-stat-row,
.ubx-theatre-panel,
.ubx-theatre-command,
.ubx-theatre-timeline {
    position: absolute;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(9, 16, 15, 0.76);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(20px);
}

.ubx-theatre-focus-card {
    bottom: 1rem;
    left: 1rem;
    display: grid;
    gap: 0.35rem;
    width: min(28rem, calc(100% - 2rem));
    padding: 1rem;
    border-radius: 22px;
    transform: translateZ(72px);
}

.ubx-theatre-focus-card small,
.ubx-theatre-focus-card span {
    color: rgba(236, 252, 243, 0.64);
}

.ubx-theatre-focus-card strong {
    color: #fff;
    font-size: 1.28rem;
}

.ubx-theatre-stat-row {
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    padding: 0.7rem;
    border-radius: 20px;
    transform: translateZ(82px);
}

.ubx-theatre-stat-row span {
    display: grid;
    min-width: 4.2rem;
    gap: 0.05rem;
    padding: 0.55rem 0.65rem;
    text-align: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.ubx-theatre-stat-row strong {
    color: #fff;
    font-size: 1.1rem;
}

.ubx-theatre-stat-row small {
    color: rgba(236, 252, 243, 0.58);
    font-size: 0.72rem;
}

.ubx-theatre-panel-stack {
    position: absolute;
    z-index: 11;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
}

.ubx-theatre-panel {
    width: min(20rem, 44%);
    padding: 1rem;
    color: rgba(236, 252, 243, 0.72);
    border-radius: 24px;
    opacity: 0;
    transform: translate3d(0, 18px, 80px) rotateX(6deg) scale(0.94);
    transition: opacity 360ms ease, transform 420ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ubx-theatre-panel small {
    color: rgba(236, 252, 243, 0.58);
}

.ubx-theatre-panel strong {
    display: block;
    margin: 0.2rem 0;
    color: #fff;
    font-size: 1.08rem;
}

.ubx-theatre-panel p,
.ubx-theatre-panel span,
.ubx-theatre-panel em {
    margin: 0;
    color: rgba(236, 252, 243, 0.66);
    font-size: 0.86rem;
}

.ubx-theatre-photo-strip {
    display: grid;
    grid-template-columns: 1fr 0.85fr 0.65fr;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.ubx-theatre-photo-strip i {
    min-height: 3rem;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent),
        linear-gradient(160deg, #35433c, #111b18);
}

.ubx-theatre-panel.panel-place {
    top: 6.2rem;
    right: 2rem;
}

.ubx-theatre-panel.panel-list {
    top: 9rem;
    left: 3rem;
}

.ubx-theatre-panel.panel-chat {
    top: 13.8rem;
    right: 2rem;
}

.ubx-theatre-panel.panel-chat p {
    width: fit-content;
    max-width: 90%;
    margin-top: 0.42rem;
    padding: 0.45rem 0.6rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
}

.ubx-theatre-panel.panel-chat p.right {
    margin-left: auto;
    background: rgba(var(--ubx-primary-rgb), 0.18);
}

.ubx-theatre-panel.panel-list p {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.ubx-theatre-panel.panel-list i {
    display: block;
    height: 0.5rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--ubx-primary-rgb), 0.75), rgba(255, 255, 255, 0.12));
}

.ubx-theatre-panel.panel-list i:nth-child(2) {
    width: 75%;
}

.ubx-theatre-panel.panel-list i:nth-child(3) {
    width: 52%;
}

.ubx-theatre-panel.panel-log,
.ubx-theatre-panel.panel-profile {
    bottom: 7.5rem;
    left: 3rem;
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.ubx-theatre-panel.panel-profile {
    right: 2rem;
    left: auto;
}

.ubx-theatre-panel.panel-log > span,
.ubx-theatre-panel.panel-profile .avatar {
    display: grid;
    place-items: center;
    flex: 0 0 3.2rem;
    width: 3.2rem;
    height: 3.2rem;
    color: #06100c;
    font-weight: 900;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff7d6, #f1c76f);
    box-shadow: 0 0 0 6px rgba(241, 199, 111, 0.15);
}

.ubx-theatre-stage[data-theatre-scene="place"] .panel-place,
.ubx-theatre-stage[data-theatre-scene="lists"] .panel-list,
.ubx-theatre-stage[data-theatre-scene="chat"] .panel-chat,
.ubx-theatre-stage[data-theatre-scene="logbook"] .panel-log,
.ubx-theatre-stage[data-theatre-scene="profile"] .panel-profile {
    opacity: 1;
    transform: translate3d(0, 0, 125px) rotateX(0) scale(1);
}

.ubx-theatre-stage[data-theatre-scene="map"] .panel-place {
    opacity: 0.62;
    transform: translate3d(0, 0, 70px) scale(0.92);
}

.ubx-theatre-command {
    top: 4.3rem;
    right: 1rem;
    display: grid;
    gap: 0.65rem;
    width: min(18rem, calc(100% - 2rem));
    padding: 0.95rem;
    border-radius: 22px;
    transform: translateZ(90px);
}

.ubx-theatre-command small {
    color: rgba(236, 252, 243, 0.58);
}

.ubx-theatre-command div {
    display: grid;
    gap: 0.4rem;
}

.ubx-theatre-command span {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    color: rgba(236, 252, 243, 0.76);
    font-size: 0.86rem;
}

.ubx-theatre-command div span::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: rgb(var(--ubx-primary-rgb));
    box-shadow: 0 0 12px rgba(var(--ubx-primary-rgb), 0.55);
}

.ubx-theatre-command button {
    display: inline-flex;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    color: #06100c;
    font-weight: 800;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #eaffef, rgb(var(--ubx-primary-rgb)));
}

.ubx-theatre-command--side {
    position: relative;
    inset: auto;
    z-index: 1;
    width: auto;
    margin-top: 1rem;
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--ubx-primary-rgb), 0.16), transparent 8rem),
        rgba(9, 16, 15, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.18);
    transform: none;
}

.ubx-theatre-timeline {
    bottom: 1rem;
    left: 50%;
    display: flex;
    gap: 0.45rem;
    padding: 0.55rem;
    border-radius: 999px;
    transform: translate3d(-50%, 0, 110px);
}

.ubx-theatre-timeline span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    color: rgba(236, 252, 243, 0.58);
    font-size: 0.78rem;
    border-radius: 999px;
}

.ubx-theatre-timeline span.is-active {
    color: #fff;
    background: rgba(var(--ubx-primary-rgb), 0.16);
}

.ubx-theatre-timeline b {
    color: rgb(var(--ubx-primary-rgb));
}

.ubx-theatre-stage[data-theatre-scene="chat"] .ubx-theatre-focus-card,
.ubx-theatre-stage[data-theatre-scene="logbook"] .ubx-theatre-focus-card,
.ubx-theatre-stage[data-theatre-scene="profile"] .ubx-theatre-focus-card {
    width: min(24rem, calc(100% - 2rem));
}

@media (prefers-reduced-motion: no-preference) {
    .ubx-theatre-glow {
        animation: ubx-showcase-drift 12s ease-in-out infinite alternate;
    }

    .ubx-theatre-panel.panel-chat p {
        animation: ubx-theatre-message 5.8s ease-in-out infinite;
    }
}

@keyframes ubx-theatre-message {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@media (max-width: 1199.98px) {
    .ubx-theatre-heading,
    .ubx-product-theatre-grid {
        grid-template-columns: 1fr;
    }

    .ubx-theatre-director {
        align-self: stretch;
    }

    .ubx-theatre-stage {
        min-height: 780px;
    }
}

@media (max-width: 767.98px) {
    .ubx-theatre-stage {
        min-height: 880px;
        border-radius: 28px;
    }

    .ubx-theatre-sidebar {
        right: 0.75rem;
        bottom: auto;
        left: 0.75rem;
        flex-direction: row;
        width: auto;
        height: auto;
        overflow-x: auto;
    }

    .ubx-theatre-sidebar strong {
        display: none;
    }

    .ubx-theatre-sidebar button {
        white-space: nowrap;
    }

    .ubx-theatre-workspace {
        inset: 8.4rem 0.75rem 0.75rem;
    }

    .ubx-theatre-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ubx-theatre-command,
    .ubx-theatre-panel.panel-chat,
    .ubx-theatre-panel.panel-profile {
        right: 0.75rem;
    }

    .ubx-theatre-panel.panel-place,
    .ubx-theatre-panel.panel-list,
    .ubx-theatre-panel.panel-chat,
    .ubx-theatre-panel.panel-log,
    .ubx-theatre-panel.panel-profile {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }

    .ubx-theatre-panel.panel-place,
    .ubx-theatre-panel.panel-list,
    .ubx-theatre-panel.panel-chat {
        top: 11rem;
    }

    .ubx-theatre-panel.panel-log,
    .ubx-theatre-panel.panel-profile {
        bottom: 7.2rem;
    }

    .ubx-theatre-focus-card,
    .ubx-theatre-stat-row,
    .ubx-theatre-command {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }

    .ubx-theatre-stat-row {
        bottom: 6.4rem;
        justify-content: space-between;
    }

    .ubx-theatre-timeline {
        right: 0.75rem;
        left: 0.75rem;
        overflow-x: auto;
        border-radius: 20px;
        transform: translateZ(110px);
    }
}

/* Landing showcase cleanup: keep one clear product story instead of parallel demo layers. */
.ubx-showcase .ubx-trailer-hud,
.ubx-showcase .ubx-showcase-chapter-rail,
.ubx-showcase .ubx-hero-scene-controls,
.ubx-showcase .ubx-theatre-sidebar,
.ubx-showcase .ubx-theatre-timeline,
.ubx-showcase .ubx-final-launch-controls,
.ubx-showcase .ubx-final-launch-sequence,
.ubx-showcase .ubx-final-pulse-ring {
    display: none !important;
}

.ubx-showcase .ubx-showcase-hero .min-vh-100 {
    min-height: clamp(740px, 92vh, 980px) !important;
}

.ubx-showcase .ubx-showcase-section {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.ubx-showcase .ubx-product-theatre > .container-fluid {
    max-width: 1440px;
}

.ubx-showcase .ubx-product-theatre-grid {
    align-items: center;
}

.ubx-showcase .ubx-theatre-stage {
    min-height: clamp(700px, 78vw, 880px);
}

.ubx-showcase .ubx-theatre-workspace {
    left: 1.1rem;
}

.ubx-showcase .ubx-theatre-panel-stack {
    pointer-events: none;
}

.ubx-showcase .ubx-theatre-command--side {
    position: relative;
    inset: auto !important;
    width: auto;
    transform: none !important;
}

.ubx-showcase .ubx-showcase-final-card {
    min-height: auto;
}

.ubx-showcase .ubx-final-recap {
    display: grid;
    gap: 0.85rem;
    min-height: auto;
    perspective: none;
    transform-style: flat;
}

.ubx-showcase .ubx-final-map {
    position: relative;
    inset: auto;
    min-height: clamp(16rem, 34vw, 22rem);
    transform: none !important;
}

.ubx-showcase .ubx-final-path-card,
.ubx-showcase .ubx-final-launch-board {
    position: relative;
    inset: auto !important;
    width: auto;
    min-height: 0;
    transform: none !important;
}

.ubx-showcase .ubx-final-path-card {
    z-index: 2;
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background:
        radial-gradient(circle at 16% 18%, rgba(var(--ubx-primary-rgb), 0.2), transparent 36%),
        rgba(9, 13, 18, 0.62);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.ubx-showcase .ubx-final-path-card small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ubx-showcase .ubx-final-path-card strong {
    color: #fff;
    font-size: clamp(1.05rem, 1.9vw, 1.35rem);
    line-height: 1.2;
}

.ubx-showcase .ubx-final-path-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
}

.ubx-showcase .ubx-final-path-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.ubx-showcase .ubx-final-path-pills span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.48rem 0.66rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.82rem;
    font-weight: 750;
}

.ubx-showcase .ubx-final-path-pills svg {
    width: 1em;
    height: 1em;
    color: rgb(var(--ubx-primary-rgb));
}

.ubx-showcase .ubx-final-launch-board {
    z-index: 2;
    gap: 0.7rem;
    padding: 0.95rem;
}

.ubx-showcase .ubx-final-checklist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ubx-showcase .ubx-final-checklist span {
    min-height: 0;
    padding: 0.52rem 0.58rem 0.52rem 1.72rem;
    white-space: normal;
}

.ubx-showcase .ubx-final-phone {
    right: 1rem;
    bottom: auto;
    top: clamp(8rem, 18vw, 12rem);
    z-index: 3;
    width: 5.35rem;
    height: 8.35rem;
    transform: rotateZ(2deg) !important;
}

.ubx-showcase .ubx-final-phone i {
    min-height: 4.55rem;
}

.ubx-showcase .ubx-final-recap[data-final-phase="map"] .ubx-final-map,
.ubx-showcase .ubx-final-recap[data-final-phase="map"] .card-search,
.ubx-showcase .ubx-final-recap[data-final-phase="plan"] .card-list,
.ubx-showcase .ubx-final-recap[data-final-phase="plan"] .ubx-final-launch-board,
.ubx-showcase .ubx-final-recap[data-final-phase="team"] .card-team,
.ubx-showcase .ubx-final-recap[data-final-phase="team"] .final-pin.pin-d,
.ubx-showcase .ubx-final-recap[data-final-phase="team"] .ubx-final-launch-board,
.ubx-showcase .ubx-final-recap[data-final-phase="app"] .ubx-final-phone,
.ubx-showcase .ubx-final-recap[data-final-phase="app"] .ubx-final-launch-board {
    transform: none !important;
}

@media (max-width: 991.98px) {
    .ubx-showcase .ubx-showcase-section {
        padding-block: 3.5rem;
    }

    .ubx-showcase .ubx-theatre-workspace {
        inset: 5.25rem 0.75rem 0.75rem;
    }
}