.lcity{
  --paper:#FAF6EF; --card:#FFFFFF; --ink:#26211A; --pencil:#6B6350;
  --gold:#A67716; --rule:#EFE7D6;
  --font-sans:'Plus Jakarta Sans',system-ui,sans-serif;
  position:relative;flex:1 1 0;min-height:0;align-self:stretch;
  overflow:hidden;pointer-events:none;
}
.lcity svg{
  position:absolute;left:50%;bottom:-8px;
  width:min(100%,460px);height:auto;transform:translateX(-50%);
  overflow:visible;
}
.lcity::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,#FAF6EF 0,rgba(250,246,239,0) 36%);
}

.lcity .ground{fill:#E4E9D4;}
.lcity .roof{fill:#CBD6B2;}
.lcity .wu{fill:#B7C49E;}
.lcity .wv{fill:#93A379;}
.lcity .wud{fill:#A2B087;} .lcity .wul{fill:#E2A93B;} .lcity .wub{fill:#C08415;}
.lcity .wvd{fill:#7E8F65;} .lcity .wvl{fill:#D69B2D;} .lcity .wvb{fill:#B77E12;}

.lcity .pin,.lcity .new{transform-box:fill-box;transform-origin:center;}
.lcity .pin circle,.lcity .new circle{fill:#6B7B57;opacity:.5;}

.lcity .dpin{fill:#C9911B;transform-box:fill-box;transform-origin:center;}
.lcity .dring{fill:none;stroke:#C9911B;stroke-width:1.1;opacity:0;transform-box:fill-box;transform-origin:center;}

.lcity .tagline{
  font-family:var(--font-sans);font-size:9.2px;font-weight:500;
  letter-spacing:.06em;fill:var(--ink);
  paint-order:stroke fill;stroke:var(--paper);stroke-width:1.2px;
  stroke-linejoin:round;
}

.lcity .callsh{fill:var(--ink);opacity:.08;}
.lcity .callbox{fill:var(--card);stroke:var(--rule);stroke-width:.6px;}
.lcity .callpt{fill:var(--card);}

.lcity .label .tagline{stroke:none;}

.lcity .tagline.dim{fill:color-mix(in srgb, var(--ink) 62%, var(--paper));}

@media (prefers-reduced-motion:no-preference){

  .lcity .lamp{opacity:0;animation:lamp var(--t) ease-in-out infinite;}
  @keyframes lamp{
    0%,4%{opacity:0;}
    9%,17%{opacity:1;}
    22%,100%{opacity:0;}
  }

  .lcity .pin{opacity:0;animation:drop .5s cubic-bezier(.2,.7,.3,1) forwards;}
  @keyframes drop{from{opacity:0;transform:translateY(-7px) scale(.86);}
                    to{opacity:1;transform:none;}}

  .lcity .dpin{
    opacity:0;
    animation:dfall 24s linear infinite;animation-delay:var(--d);
  }
  @keyframes dfall{
    0%{opacity:0;transform:translateY(-34px) scale(.92,1.12);fill:#C9911B;animation-timing-function:cubic-bezier(.55,0,1,.45);}
    .6%{opacity:1;}
    1.88%{transform:translateY(0) scale(1.22,.74);fill:#C9911B;animation-timing-function:cubic-bezier(0,.55,.45,1);}
    2.71%{transform:scale(.95,1.05);}
    4.17%{transform:scale(1,1);fill:#C9911B;}
    13.96%{fill:#C9911B;opacity:1;}
    16.46%{fill:#6B7B57;opacity:.5;transform:scale(1,1);}
    16.88%{opacity:.5;}
    19.38%,100%{opacity:0;fill:#6B7B57;transform:scale(1,1);}
  }
  .lcity .dring{animation:dring 24s linear infinite;animation-delay:var(--d);}
  @keyframes dring{
    0%,1.88%{opacity:0;transform:scale(.44);}
    2.1%{opacity:.5;}
    4.79%,100%{opacity:0;transform:scale(2.3);}
  }

  .lcity .drop-label{
    opacity:0;transform-box:fill-box;transform-origin:left center;
    animation:dcard 24s linear infinite;animation-delay:var(--d);
  }
  @keyframes dcard{
    0%,3.13%{opacity:0;transform:scale(.85);}
    4.58%{opacity:1;transform:scale(1);}
    14.38%{opacity:1;transform:scale(1);}
    16.46%,100%{opacity:0;transform:scale(1);}
  }

  .lcity .new{opacity:0;animation:blip var(--t) ease-in-out infinite;}
  .lcity .new circle{animation:land var(--t) ease-in-out infinite;}
  @keyframes blip{
    0%{opacity:0;transform:scale(.4);}
    5%{opacity:1;transform:scale(1.28);}
    12%{opacity:1;transform:scale(1);}
    64%{opacity:1;}
    78%,100%{opacity:0;}
  }
  @keyframes land{
    0%,4%{fill:var(--gold);opacity:1;}
    18%,100%{fill:var(--pencil);opacity:.30;}
  }

  html.obopen .lcity *{animation-play-state:paused;}
}

@media (prefers-reduced-motion:reduce){
  .lcity .pin,.lcity .tagline,.lcity .label{opacity:1;}

  .lcity .new{opacity:1;}

  .lcity .dpin{opacity:1;}
  .lcity .drop.late .dpin{fill:#6B7B57;opacity:.5;}
  .lcity .drop-label.late{opacity:0;}

  .lcity .lamp{opacity:0;}
}