:root {
    --bg: #030912;
    --panel: #071421;
    --panel-2: #0b1c2c;
    --panel-3: #10273b;

    --line: #1d3952;
    --line-soft: rgba(89, 132, 168, .22);

    --text: #ede5d1;
    --muted: #8295a8;

    --gold: #d2ad5a;
    --gold-light: #f0dc9d;

    --blue: #279be8;
    --purple: #974ad4;

    --shadow: 0 20px 55px rgba(0,0,0,.42);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background:
        radial-gradient(circle at 50% -20%, #132a40 0%, transparent 35%),
        linear-gradient(180deg, #030912 0%, #02070d 100%);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.tm-app {
    min-height: 100vh;
}


/* HEADER */

.tm-header {
    height: 92px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 0 30px;

    border-bottom: 1px solid var(--line);
    background: rgba(2, 8, 15, .94);
}

.tm-back {
    color: var(--gold);
    text-decoration: none;
    font-family: Georgia, serif;
    font-weight: bold;
    font-size: 19px;
}

.tm-brand {
    text-align: center;
}

.tm-brand h1 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;

    letter-spacing: .05em;

    color: #f2ead8;
}

.tm-tagline {
    margin-top: 3px;

    color: var(--gold);
    text-transform: uppercase;

    letter-spacing: .27em;
    font-family: Georgia, serif;
    font-size: 12px;
}

.tm-header-right {
    justify-self: end;

    color: #73879a;
    text-transform: uppercase;
    letter-spacing: .18em;

    font-family: Georgia, serif;
    font-size: 13px;
}


/* MAIN */

.tm-main {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);

    gap: 24px;

    padding: 24px;
}

.tm-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tm-card,
.tm-year-display {
    position: relative;
    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 15px;

    background:
        linear-gradient(145deg, rgba(14,37,57,.95), rgba(4,14,24,.98));

    box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.tm-year-display {
    padding: 27px 24px;
}

.tm-small-label,
.tm-card-label {
    color: var(--gold);

    text-transform: uppercase;
    letter-spacing: .14em;

    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: bold;
}

.tm-big-year {
    margin-top: 6px;

    font-family: Georgia, serif;
    font-size: 35px;
    font-weight: bold;
}

.tm-card {
    padding: 21px;
}

.tm-card::before {
    position: absolute;
    content: "";

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: linear-gradient(
        180deg,
        var(--gold),
        var(--purple),
        var(--blue)
    );
}

.tm-era-name {
    margin-top: 10px;

    color: #8dcef7;

    font-family: Georgia, serif;
    font-size: 24px;
}

.tm-filter-list {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
    margin-top: 16px;
}

.tm-chip {
    padding: 7px 11px;

    border: 1px solid #2a4964;
    border-radius: 99px;

    background: #091827;
    color: #a9bbca;

    font-size: 12px;
}

.tm-chip:hover,
.tm-chip.active {
    border-color: var(--gold);

    background: rgba(210,173,90,.11);
    color: var(--gold-light);
}

.tm-feature-card {
    min-height: 160px;
}

.tm-feature-empty {
    margin-top: 18px;

    color: var(--muted);

    line-height: 1.55;
    font-family: Georgia, serif;
}


/* MAP */

.tm-map-column {
    min-width: 0;
}

.tm-map-toolbar {
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 15px;

    border: 1px solid var(--line);
    border-bottom: 0;

    border-radius: 16px 16px 0 0;

    color: #a7b6c5;
    background: #07131f;

    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px;
}

.tm-status-dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    margin-right: 8px;

    border-radius: 50%;
    background: #63bb7c;

    box-shadow: 0 0 10px rgba(99,187,124,.8);
}

.tm-map-toolbar-right {
    color: #628099;
}

.tm-map {
    height: 560px;

    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 0 0 19px 19px;

    background: #0c1822;

    box-shadow: var(--shadow);
}

.tm-map-background {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 54% 44%,
            rgba(93,115,121,.24) 0%,
            rgba(32,58,70,.17) 26%,
            transparent 60%
        ),
        linear-gradient(
            135deg,
            #172b35 0%,
            #0d1f2b 48%,
            #07141f 100%
        );
}

.tm-grid {
    position: absolute;
    inset: 0;

    opacity: .22;

    background-image:
        linear-gradient(rgba(107,149,173,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(107,149,173,.13) 1px, transparent 1px);

    background-size: 80px 80px;

    mask-image:
        radial-gradient(circle at center, black, transparent 85%);
}

.tm-world-placeholder {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    color: #6f8794;
}

.tm-globe {
    font-size: 88px;

    color: #65818c;
    opacity: .25;
}

.tm-map-title {
    margin-top: -8px;

    color: #8398a1;

    font-family: Georgia, serif;
    font-size: 25px;
}

.tm-map-subtitle {
    margin-top: 5px;

    color: #546d79;
    font-size: 12px;

    text-transform: uppercase;
    letter-spacing: .12em;
}


/* DEMO MARKER */

.tm-demo-marker {
    position: absolute;

    left: 54%;
    top: 46%;

    width: 50px;
    height: 50px;

    transform: translate(-50%, -50%);

    border: 0;
    background: transparent;
}

.tm-marker-core {
    position: absolute;

    left: 17px;
    top: 17px;

    width: 16px;
    height: 16px;

    border: 3px solid #f7e8b1;
    border-radius: 50%;

    background: var(--gold);

    box-shadow:
        0 0 0 4px rgba(210,173,90,.17),
        0 0 24px rgba(210,173,90,.7);
}

.tm-marker-pulse {
    position: absolute;

    left: 5px;
    top: 5px;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(230,196,117,.55);
    border-radius: 50%;

    animation: tm-pulse 2.2s infinite ease-out;
}

@keyframes tm-pulse {
    0% {
        transform: scale(.35);
        opacity: 1;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}


/* TIMELINE */

.tm-timeline-panel {
    margin-top: 20px;
    padding: 20px 28px 23px;

    border: 1px solid var(--line);
    border-radius: 17px;

    background:
        linear-gradient(180deg, #071421, #04101a);
}

.tm-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tm-timeline-help {
    color: #61778b;

    text-transform: uppercase;
    letter-spacing: .1em;

    font-size: 11px;
}

.tm-era-strip {
    display: flex;
    justify-content: space-between;

    margin: 20px 0 9px;

    color: #8899a9;

    font-family: Georgia, serif;
    font-size: 12px;
}

.tm-slider-wrap {
    position: relative;
}

.tm-slider {
    width: 100%;
    accent-color: #d2ad5a;
}

.tm-timeline-scale {
    display: flex;
    justify-content: space-between;

    margin-top: 7px;

    color: #697e91;
    font-size: 11px;
}


/* MODAL */

.tm-modal {
    position: fixed;

    inset: 0;
    z-index: 999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px;
}

.tm-modal.open {
    display: flex;
}

.tm-modal-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(0,5,10,.78);
    backdrop-filter: blur(5px);
}

.tm-event-modal {
    position: relative;
    z-index: 2;

    width: min(760px, 100%);
    max-height: calc(100vh - 60px);

    overflow: auto;

    border: 1px solid #36516b;
    border-radius: 20px;

    background: #07131f;

    box-shadow:
        0 35px 100px rgba(0,0,0,.72),
        0 0 45px rgba(45,103,147,.12);
}

.tm-modal-close {
    position: absolute;

    right: 15px;
    top: 13px;

    z-index: 4;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;

    background: rgba(2,9,15,.82);
    color: white;

    font-size: 26px;
}

.tm-event-image {
    position: relative;

    height: 260px;

    background:
        radial-gradient(circle at 70% 20%, rgba(210,173,90,.30), transparent 35%),
        linear-gradient(135deg, #324658, #101e2a 55%, #07121c);
}

.tm-event-image::before {
    position: absolute;
    content: "✦";

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    color: rgba(225,196,126,.37);

    font-family: Georgia, serif;
    font-size: 100px;
}

.tm-event-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 45%,
            rgba(7,19,31,.96) 100%
        );
}

.tm-event-image-label {
    position: absolute;

    left: 30px;
    bottom: 20px;

    color: var(--gold);

    text-transform: uppercase;
    letter-spacing: .17em;

    font-size: 11px;
}

.tm-event-content {
    padding: 10px 32px 34px;
}

.tm-event-eyebrow {
    color: var(--gold);

    text-transform: uppercase;
    letter-spacing: .16em;

    font-size: 11px;
}

.tm-event-content h2 {
    margin: 7px 0 3px;

    font-family: Georgia, serif;

    font-size: clamp(30px, 5vw, 45px);
    line-height: 1.08;
}

.tm-event-date {
    color: #a9d8f7;

    font-family: Georgia, serif;
    font-size: 21px;
}

.tm-event-location {
    color: #8397aa;
}

.tm-event-description {
    color: #c2cbd3;

    font-family: Georgia, serif;

    line-height: 1.75;
    font-size: 17px;
}

.tm-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin: 22px 0;
}

.tm-tags span {
    padding: 7px 11px;

    border: 1px solid #36516b;
    border-radius: 99px;

    color: #a9bbca;
    background: #091a29;

    font-size: 12px;
}

.tm-certainty {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 15px;

    padding-top: 20px;

    border-top: 1px solid #1d3549;
}

.tm-certainty > div {
    padding: 13px;

    border-radius: 10px;

    background: #091824;
}

.tm-certainty-label {
    display: block;

    margin-bottom: 6px;

    color: #71889b;

    text-transform: uppercase;
    letter-spacing: .08em;

    font-size: 10px;
}

.tm-certainty strong {
    color: #d9bd78;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .tm-header {
        grid-template-columns: auto 1fr;
    }

    .tm-header-right {
        display: none;
    }

    .tm-brand {
        justify-self: end;
    }

    .tm-brand h1 {
        font-size: 27px;
    }

    .tm-main {
        grid-template-columns: 1fr;
    }

    .tm-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tm-feature-card,
    .tm-filter-card {
        grid-column: 1 / -1;
    }

}

@media (max-width: 560px) {

    .tm-header {
        height: 76px;
        padding: 0 15px;
    }

    .tm-tagline {
        display: none;
    }

    .tm-main {
        padding: 12px;
    }

    .tm-sidebar {
        display: flex;
    }

    .tm-map {
        height: 430px;
    }

    .tm-era-strip span:nth-child(even) {
        display: none;
    }

    .tm-certainty {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   LEAFLET / LOCAL WORLD MAP
   ========================================================= */

.tm-map {
    position: relative;
    background:
        radial-gradient(
            circle at center,
            #122734 0%,
            #07141f 72%
        );
}

.tm-map .leaflet-container {
    background: #07141f;
}

.leaflet-container {
    background:
        radial-gradient(
            ellipse at center,
            #152d39 0%,
            #081621 70%,
            #040d14 100%
        );

    font-family: Arial, Helvetica, sans-serif;
}

.leaflet-control-zoom {
    border: 1px solid #294760 !important;
    border-radius: 10px !important;
    overflow: hidden;

    box-shadow:
        0 7px 25px rgba(0,0,0,.32) !important;
}

.leaflet-control-zoom a {
    background: #071824 !important;
    color: #d8c17f !important;

    border-color: #294760 !important;
}

.leaflet-control-zoom a:hover {
    background: #10283a !important;
    color: #f4df9d !important;
}

.tm-country-tooltip,
.tm-event-tooltip {
    border: 1px solid #39566d !important;
    border-radius: 7px !important;

    background: rgba(5,17,27,.94) !important;
    color: #e8dfc9 !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.35) !important;
}

.tm-country-tooltip {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
}

.tm-event-tooltip {
    padding: 8px 11px !important;

    color: #f0d994 !important;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    line-height: 1.45;
}

.leaflet-tooltip-top.tm-country-tooltip::before,
.leaflet-tooltip-top.tm-event-tooltip::before {
    border-top-color: #39566d !important;
}

.tm-event-marker {
    filter:
        drop-shadow(0 0 5px rgba(210,173,90,.75))
        drop-shadow(0 0 12px rgba(210,173,90,.35));
}

.tm-map-credit {
    margin: 0 8px 7px 0;

    padding: 6px 8px;

    border: 1px solid rgba(58,84,105,.55);
    border-radius: 6px;

    background: rgba(3,12,20,.72);
    color: #6e8799;

    font-size: 9px;
    letter-spacing: .12em;

    pointer-events: none;
    user-select: none;
}

.leaflet-control-container {
    font-family: Arial, Helvetica, sans-serif;
}

.leaflet-grab {
    cursor: grab;
}

.leaflet-dragging .leaflet-grab {
    cursor: grabbing;
}


/* =========================================================
   ZOOM-INTELLIGENT MAP DETAIL
   ========================================================= */

.tm-map-detail-indicator {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    min-height:
        28px;

    padding:
        4px 8px;

    border:
        1px solid
        rgba(58,84,99,.58);

    border-radius:
        7px;

    background:
        rgba(5,18,27,.82);

    box-shadow:
        0 5px 16px
        rgba(0,0,0,.28);

    color:
        #899da8;

    pointer-events:
        none;

    backdrop-filter:
        blur(4px);
}


.tm-map-detail-indicator
span {
    color:
        #d6b968;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .1em;
}


.tm-map-detail-indicator
small {
    color:
        #607b8c;

    font-size:
        7px;
}


.tm-map-detail-indicator
strong {
    color:
        #a7b5bd;

    font-size:
        7px;

    font-weight:
        700;
}


/* ---------------------------------------------------------
   OVERVIEW
   Keep the continent/world view restrained.
   --------------------------------------------------------- */

.tm-map[data-timemap-zoom-band="overview"]
.tm-event-pin,

.tm-map[data-timemap-zoom-band="overview"]
.tm-playback-compact-event {
    scale:
        .74;

    opacity:
        .82;

    transform-origin:
        center;
}


.tm-map[data-timemap-zoom-band="overview"]
.tm-cluster {
    scale:
        .86;

    transform-origin:
        center;
}


.tm-map[data-timemap-zoom-band="overview"]
.tm-pattern-link {
    opacity:
        .48;
}


.tm-map[data-timemap-zoom-band="overview"]
.tm-activity-field-outer {
    opacity:
        .72;
}


.tm-map[data-timemap-zoom-band="overview"]
.tm-activity-field-inner {
    opacity:
        .78;
}


/* ---------------------------------------------------------
   REGIONAL
   Stronger category identity, still compact.
   --------------------------------------------------------- */

.tm-map[data-timemap-zoom-band="regional"]
.tm-event-pin,

.tm-map[data-timemap-zoom-band="regional"]
.tm-playback-compact-event {
    scale:
        .88;

    transform-origin:
        center;
}


.tm-map[data-timemap-zoom-band="regional"]
.tm-cluster {
    scale:
        .94;

    transform-origin:
        center;
}


/* ---------------------------------------------------------
   LOCAL
   Normal event detail.
   --------------------------------------------------------- */

.tm-map[data-timemap-zoom-band="local"]
.tm-event-pin,

.tm-map[data-timemap-zoom-band="local"]
.tm-playback-compact-event {
    scale:
        1;

    opacity:
        1;
}


/* ---------------------------------------------------------
   DETAIL
   Slightly stronger map symbols when exploring locally.
   --------------------------------------------------------- */

.tm-map[data-timemap-zoom-band="detail"]
.tm-event-pin,

.tm-map[data-timemap-zoom-band="detail"]
.tm-playback-compact-event {
    scale:
        1.08;

    opacity:
        1;

    transform-origin:
        center;
}


.tm-map[data-timemap-zoom-band="detail"]
.tm-category-marker
.tm-event-pin {
    box-shadow:
        0 0 0 2px
        var(
            --tm-category-accent,
            #d7b45f
        ),
        0 0 9px
        color-mix(
            in srgb,
            var(
                --tm-category-accent,
                #d7b45f
            )
            38%,
            transparent
        ),
        0 4px 11px
        rgba(0,0,0,.62) !important;
}


.tm-map[data-timemap-zoom-band="detail"]
.tm-playback-event-window {
    box-shadow:
        0 15px 38px
        rgba(0,0,0,.62);
}


@media (max-width: 700px) {

    .tm-map-detail-indicator {
        gap:
            4px;

        padding:
            3px 6px;
    }


    .tm-map-detail-indicator
    strong {
        display:
            none;
    }
}


/* =========================================================
   ZOOM-INTELLIGENT MAP DETAIL
   ========================================================= */

.tm-map-detail-indicator {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    min-height:
        28px;

    padding:
        4px 8px;

    border:
        1px solid
        rgba(58,84,99,.58);

    border-radius:
        7px;

    background:
        rgba(5,18,27,.82);

    box-shadow:
        0 5px 16px
        rgba(0,0,0,.28);

    color:
        #899da8;

    pointer-events:
        none;

    backdrop-filter:
        blur(4px);
}


.tm-map-detail-indicator
span {
    color:
        #d6b968;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .1em;
}


.tm-map-detail-indicator
small {
    color:
        #607b8c;

    font-size:
        7px;
}


.tm-map-detail-indicator
strong {
    color:
        #a7b5bd;

    font-size:
        7px;

    font-weight:
        700;
}


/* ---------------------------------------------------------
   OVERVIEW
   Keep the continent/world view restrained.
   --------------------------------------------------------- */

.tm-map[data-timemap-zoom-band="overview"]
.tm-event-pin,

.tm-map[data-timemap-zoom-band="overview"]
.tm-playback-compact-event {
    scale:
        .74;

    opacity:
        .82;

    transform-origin:
        center;
}


.tm-map[data-timemap-zoom-band="overview"]
.tm-cluster {
    scale:
        .86;

    transform-origin:
        center;
}


.tm-map[data-timemap-zoom-band="overview"]
.tm-pattern-link {
    opacity:
        .48;
}


.tm-map[data-timemap-zoom-band="overview"]
.tm-activity-field-outer {
    opacity:
        .72;
}


.tm-map[data-timemap-zoom-band="overview"]
.tm-activity-field-inner {
    opacity:
        .78;
}


/* ---------------------------------------------------------
   REGIONAL
   Stronger category identity, still compact.
   --------------------------------------------------------- */

.tm-map[data-timemap-zoom-band="regional"]
.tm-event-pin,

.tm-map[data-timemap-zoom-band="regional"]
.tm-playback-compact-event {
    scale:
        .88;

    transform-origin:
        center;
}


.tm-map[data-timemap-zoom-band="regional"]
.tm-cluster {
    scale:
        .94;

    transform-origin:
        center;
}


/* ---------------------------------------------------------
   LOCAL
   Normal event detail.
   --------------------------------------------------------- */

.tm-map[data-timemap-zoom-band="local"]
.tm-event-pin,

.tm-map[data-timemap-zoom-band="local"]
.tm-playback-compact-event {
    scale:
        1;

    opacity:
        1;
}


/* ---------------------------------------------------------
   DETAIL
   Slightly stronger map symbols when exploring locally.
   --------------------------------------------------------- */

.tm-map[data-timemap-zoom-band="detail"]
.tm-event-pin,

.tm-map[data-timemap-zoom-band="detail"]
.tm-playback-compact-event {
    scale:
        1.08;

    opacity:
        1;

    transform-origin:
        center;
}


.tm-map[data-timemap-zoom-band="detail"]
.tm-category-marker
.tm-event-pin {
    box-shadow:
        0 0 0 2px
        var(
            --tm-category-accent,
            #d7b45f
        ),
        0 0 9px
        color-mix(
            in srgb,
            var(
                --tm-category-accent,
                #d7b45f
            )
            38%,
            transparent
        ),
        0 4px 11px
        rgba(0,0,0,.62) !important;
}


.tm-map[data-timemap-zoom-band="detail"]
.tm-playback-event-window {
    box-shadow:
        0 15px 38px
        rgba(0,0,0,.62);
}


@media (max-width: 700px) {

    .tm-map-detail-indicator {
        gap:
            4px;

        padding:
            3px 6px;
    }


    .tm-map-detail-indicator
    strong {
        display:
            none;
    }
}


/* =========================================================
   CATEGORY-AWARE CLUSTERS
   ========================================================= */

.tm-category-cluster
.tm-cluster-core {
    position:
        relative;

    border-color:
        var(
            --tm-cluster-primary,
            #d7b45f
        ) !important;

    box-shadow:
        0 0 0 1px
        rgba(4,15,23,.8),
        0 4px 13px
        rgba(0,0,0,.58),
        0 0 9px
        color-mix(
            in srgb,
            var(
                --tm-cluster-primary,
                #d7b45f
            )
            30%,
            transparent
        ) !important;
}


.tm-category-cluster
.tm-cluster-core::before {
    content:
        "";

    position:
        absolute;

    inset:
        -6px;

    z-index:
        -1;

    border-radius:
        50%;

    background:
        var(
            --tm-cluster-ring,
            conic-gradient(
                #617887
                0deg
                360deg
            )
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent
            calc(100% - 3px),
            #000
            calc(100% - 2.5px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent
            calc(100% - 3px),
            #000
            calc(100% - 2.5px)
        );

    opacity:
        .92;

    pointer-events:
        none;
}


.tm-category-cluster:hover
.tm-cluster-core::before {
    inset:
        -7px;

    opacity:
        1;
}


.tm-category-cluster:hover
.tm-cluster-core {
    box-shadow:
        0 0 0 1px
        rgba(4,15,23,.82),
        0 5px 16px
        rgba(0,0,0,.66),
        0 0 15px
        color-mix(
            in srgb,
            var(
                --tm-cluster-primary,
                #d7b45f
            )
            45%,
            transparent
        ) !important;
}


/* ---------------------------------------------------------
   Cluster category summary tooltip
   --------------------------------------------------------- */

.tm-cluster-category-tooltip {
    padding:
        0 !important;

    border:
        1px solid
        rgba(210,173,90,.38) !important;

    border-radius:
        8px !important;

    background:
        rgba(6,20,29,.97) !important;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.52) !important;

    color:
        #cbd5da !important;
}


.tm-cluster-category-tooltip::before {
    border-top-color:
        rgba(6,20,29,.97) !important;
}


.tm-cluster-category-summary {
    min-width:
        180px;

    padding:
        8px 9px;
}


.tm-cluster-category-heading {
    display:
        flex;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        6px;

    padding-bottom:
        5px;

    border-bottom:
        1px solid
        rgba(60,86,101,.4);
}


.tm-cluster-category-heading
strong {
    color:
        #dfc274;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        10px;
}


.tm-cluster-category-heading
span {
    color:
        #607b8c;

    font-size:
        7px;
}


.tm-cluster-category-row {
    display:
        grid;

    grid-template-columns:
        8px
        minmax(0, 1fr)
        auto;

    gap:
        6px;

    align-items:
        center;

    min-height:
        19px;
}


.tm-cluster-category-row i {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(
            --tm-cluster-row-color,
            #d7b45f
        );

    box-shadow:
        0 0 5px
        var(
            --tm-cluster-row-color,
            #d7b45f
        );
}


.tm-cluster-category-row
span {
    overflow:
        hidden;

    color:
        #abb9c0;

    font-size:
        7px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-cluster-category-row
strong {
    color:
        #d5bd7a;

    font-size:
        7px;
}


.tm-cluster-category-summary
> small {
    display:
        block;

    margin-top:
        5px;

    color:
        #667e8c;

    font-size:
        7px;

    text-align:
        right;
}


/* ---------------------------------------------------------
   Zoom-aware cluster composition
   --------------------------------------------------------- */

.tm-map[data-timemap-zoom-band="overview"]
.tm-category-cluster
.tm-cluster-core::before {
    inset:
        -5px;

    opacity:
        .72;
}


.tm-map[data-timemap-zoom-band="detail"]
.tm-category-cluster
.tm-cluster-core::before {
    inset:
        -7px;

    opacity:
        1;
}

/*
 * =========================================================
 * WORLD_ENGINE_COUNTRY_FOCUS_OUTLINE_V1
 *
 * Leaflet/browser focus on an SVG country path can display
 * as a rectangular bounding-box outline after click.
 * Keep all country hover/fill/border behavior unchanged.
 * =========================================================
 */

.tm-country-shape:focus {
    outline:
        none !important;
}