*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
    font:460 14px/20px Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    letter-spacing:-.09px;
    color:#111;
    background:#fff;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility
}

.container{
    max-width:582px;
    margin:0 auto;
    padding:88px 24px 40px
}

h1,h2{font-size:14px;font-weight:500;line-height:20px}
h2{padding-top:32px}
time{display:block;color:rgba(0,0,0,.4);padding-bottom:8px}
p{padding-top:16px}
strong{font-weight:500}

a{
    color:inherit;
    text-decoration:underline;
    text-decoration-color:rgba(17,17,17,.3);
    text-underline-offset:2px;
    transition:text-decoration-color .2s
}
a:hover{text-decoration-color:rgba(17,17,17,.8)}

/* Preview trigger for non-link elements */
.preview-trigger{
    cursor:default
}

/* Elements with preview get subtle indicator on hover */
[data-preview]{
    position:relative
}

/* Globe Card */
.globe-card{
    position:relative;
    height:320px;
    margin-top:32px;
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:6px;
    overflow:hidden
}

.globe-badge{
    position:absolute;
    top:16px;
    left:16px;
    z-index:10;
    padding:6px 12px;
    background:rgba(255,255,255,.95);
    border:1px solid #e8e8e8;
    border-radius:3px;
    font:500 13px Inter,sans-serif;
    color:#111;
    cursor:pointer;
    transition:box-shadow .3s,border-color .3s;
    -webkit-user-select:none;
    user-select:none
}
.globe-badge:hover,.globe-badge.active{
    box-shadow:0 0 12px rgba(74,158,255,.6),0 0 24px rgba(74,158,255,.3);
    border-color:rgba(74,158,255,.5)
}

.dropdown{
    position:absolute;
    top:48px;
    left:16px;
    z-index:10;
    list-style:none;
    background:rgba(255,255,255,.95);
    border:1px solid #e8e8e8;
    border-radius:3px;
    max-height:200px;
    padding:8px 0;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .2s,transform .2s,visibility .2s;
    -webkit-overflow-scrolling:touch
}
.dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li{padding:8px 16px;font-size:13px;white-space:nowrap}

#globe{width:100%;height:100%}

/* ========================================
   HOVER PREVIEW STYLES
   ======================================== */

.preview{
    position:fixed;
    z-index:1000;
    pointer-events:none;
    
    /* Initial hidden state */
    opacity:0;
    visibility:hidden;
    transform:translateY(8px) scale(0.97);
    
    /* Animation */
    transition:
        opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
        visibility 150ms;
    
    /* Container styling */
    background:#fff;
    border-radius:6px;
    box-shadow:
        0 4px 6px -1px rgba(0,0,0,0.1),
        0 2px 4px -2px rgba(0,0,0,0.1),
        0 0 0 1px rgba(0,0,0,0.05);
    overflow:hidden;
    
    /* Max size */
    max-width:320px
}

.preview.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1)
}

.preview picture{
    display:block;
    line-height:0
}

.preview img{
    display:block;
    width:100%;
    height:auto;
    max-height:280px;
    object-fit:cover
}

/* ========================================
   PAGE ANIMATIONS
   ======================================== */

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

article,header,p,.globe-card,.other p{
    animation:fadeIn .5s ease both;
    backface-visibility:hidden
}
header{animation-delay:.05s}
article p:nth-of-type(1){animation-delay:.1s}
article p:nth-of-type(2){animation-delay:.15s}
article p:nth-of-type(3){animation-delay:.2s}
article p:nth-of-type(4){animation-delay:.25s}
.globe-card{animation-delay:.3s}
.other p:nth-of-type(1){animation-delay:.35s}
.other p:nth-of-type(2){animation-delay:.4s}
.other p:nth-of-type(3){animation-delay:.45s}
.other p:nth-of-type(4){animation-delay:.5s}
.other p:nth-of-type(5){animation-delay:.55s}

/* ========================================
   RESPONSIVE
   ======================================== */

@media(min-width:640px){
    .globe-card{height:380px}
    .dropdown{right:auto;max-height:260px}
}
@media(min-width:1024px){
    .globe-card{height:420px}
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media(prefers-reduced-motion:reduce){
    *{animation:none!important}
    .preview{
        transition:opacity 0ms,visibility 0ms!important;
        transform:none!important
    }
    .preview.visible{
        transform:none!important
    }
}