.ob{
  --paper:#FAF6EF; --card:#FFFFFF; --ink:#26211A; --pencil:#6B6350;
  --guide:#C9A961; --on-guide:#231C0C; --guide-ink:#A67716; --gold:#A67716;
  --markpin:#D9A441; --plate:#F1ECE0; --outline:#DCD4C4;
  --font-heading:'Newsreader',Georgia,serif;
  --font-sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --t-title:26px; --t-read:17px; --t-ui:13.5px;
  --obk:280px;
  --obt:calc(10px + env(safe-area-inset-top,0px));
  --obb:calc(12px + env(safe-area-inset-bottom,0px));
  --obh:calc(100vh - var(--obk) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  --fw-medium:500; --fw-semi:600; --fw-bold:700;
  --lh-head:1.25; --lh-body:1.62; --tr-head:-.008em;
  position:fixed;inset:0;z-index:60;color:var(--ink);line-height:1.6;color-scheme:light;
  font-family:var(--font-sans);text-align:left;
  display:flex;flex-direction:column;
  padding:calc(10px + env(safe-area-inset-top,0px)) calc(env(safe-area-inset-right,0px))
          calc(12px + env(safe-area-inset-bottom,0px)) calc(env(safe-area-inset-left,0px));
}
@supports (height:100svh){
  .ob{--obh:calc(100svh - var(--obk) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));}
}
.ob[hidden]{display:none;}
.ob:focus{outline:none;}
html.obopen,html.obopen body{overflow:hidden;}
.ob *{box-sizing:border-box;}

.obbar,.obdots{position:relative;z-index:1;}
.obbar,.obdots{opacity:calc(1 - var(--obrev,0) * 2.4);}
.ob.obgoing .obbar,.ob.obgoing .obdots{pointer-events:none;}
.obbar{display:flex;align-items:center;gap:12px;padding:0 16px;flex:none;min-height:44px;}
.obstep{
  position:absolute;width:1px;height:1px;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.obskip{
  margin-left:auto;background:none;border:0;cursor:pointer;
  font-family:var(--font-sans);font-size:var(--t-ui);font-weight:var(--fw-medium);
  color:var(--pencil);padding:12px 6px;min-height:44px;min-width:44px;
  text-decoration:underline;text-underline-offset:3px;
}
.obskip:hover{color:var(--ink);}
.obskip[hidden]{display:none;}

.obtrack{
  position:absolute;inset:0;display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.obtrack::-webkit-scrollbar{display:none;}
.obtrack:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;}

.obslide{
  flex:0 0 100%;width:100%;min-width:0;
  scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--obt) + 48px) calc(22px + env(safe-area-inset-right,0px))
          calc(var(--obb) + 48px) calc(22px + env(safe-area-inset-left,0px));
  text-align:center;background:var(--paper);
}
.obslide.obend{background:none;}
.obh{
  font-family:var(--font-heading);font-weight:var(--fw-semi);
  font-size:var(--t-title);line-height:var(--lh-head);letter-spacing:var(--tr-head);
  color:var(--ink);margin:18px 0 0;max-width:26ch;text-wrap:balance;
}
.obp{
  margin:9px 0 0;font-size:var(--t-read);line-height:var(--lh-body);
  color:var(--pencil);max-width:34ch;text-wrap:pretty;
}
.ob .gobtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:16px 28px;border:0;border-radius:12px;cursor:pointer;
  background:var(--guide);color:var(--on-guide);
  font-family:var(--font-sans);font-size:17px;font-weight:var(--fw-bold);line-height:1.2;
  text-decoration:none;transition:filter .13s;
}
.ob .gobtn:hover{filter:brightness(1.06);}
.ob .gobtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.obslide .gobtn{margin-top:26px;}

.obart{width:min(80%,300px);flex:none;}
.obart svg{width:100%;height:auto;display:block;}
.ob .ground{fill:#E4E9D4;}
.ob .roof{fill:#CBD6B2;}
.ob .wu{fill:#B7C49E;}
.ob .wv{fill:#93A379;}
.ob .wud{fill:#A2B087;}
.vpin{fill:var(--markpin);}
.vpinh{fill:var(--paper);}

.obshot{
  position:relative;
  flex:0 1 var(--obh);
  min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 30px;
}
.obphone{
  position:relative;flex:none;
  height:100%;
  aspect-ratio:390/844;
  border:3px solid var(--ink);border-radius:30px;
  background:var(--card);padding:4px;
  box-shadow:0 20px 38px -14px rgba(38,33,26,.32),0 3px 10px rgba(38,33,26,.10);
}
.obphone picture{display:block;height:100%;}
.obphone img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  border-radius:26px;background:var(--plate);
}
.obphone img.obmiss{visibility:hidden;}

.obpair{
  flex-basis:min(var(--obh),calc((100vw - 16px) / .6995));
  aspect-ratio:.6995;
  padding:0;
}
.obpair .obphone{position:absolute;height:88%;}
.obpair .obphone:first-child{left:0;top:0;}
.obpair .obphone:last-child{right:0;bottom:0;}

.obdots{display:flex;justify-content:center;align-items:center;gap:2px;flex:none;margin-top:auto;}
.obdot{
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.obdot::after{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--outline);
  transition:background .18s,transform .18s;
}
.obdot[aria-current="true"]::after{background:var(--guide-ink);transform:scale(1.35);}

.obart,.obshot:not(.obpair){
  will-change:transform,opacity;
  transform:translate3d(calc(var(--p,0) * 26vw),calc(var(--a,0) * 12px),0) scale(calc(1 - var(--a,0) * .08));
  opacity:calc(1.2 - var(--a,0) * 1.4);
}
.obpair .obphone{will-change:transform,opacity;opacity:calc(1.2 - var(--a,0) * 1.4);}
.obpair .obphone:first-child{
  transform:translate3d(calc(var(--p,0) * 17vw),calc(var(--a,0) * 8px),0) scale(calc(1 - var(--a,0) * .06));
}
.obpair .obphone:last-child{
  transform:translate3d(calc(var(--p,0) * 34vw),calc(var(--a,0) * 22px),0) scale(calc(1 - var(--a,0) * .1));
}
.obh{
  transform:translate3d(calc(var(--p,0) * -9vw),0,0);
  opacity:calc(1.3 - var(--a,0) * 2.1);
}
.obp{
  transform:translate3d(calc(var(--p,0) * -5vw),0,0);
  opacity:calc(1.4 - var(--a,0) * 2.6);
}
.obslide .gobtn{
  transform:translate3d(calc(var(--p,0) * -4vw),calc(var(--a,0) * 14px),0);
  opacity:calc(1.5 - var(--a,0) * 3);
}

html.obopen .lgin{
  opacity:calc(.4 + var(--obrev,1) * .6);
  transform:translate3d(calc((1 - var(--obrev,1)) * 8vw),0,0);
}

@media (prefers-reduced-motion:no-preference){
  .obart .vpg{
    transform-box:fill-box;transform-origin:center bottom;
    animation:vdrop 4.2s cubic-bezier(.24,.66,.3,1) infinite;
  }
  @keyframes vdrop{
    0%{opacity:0;transform:translateY(-30px) scale(.88,1.14);}
    10%{opacity:1;}
    18%{transform:translateY(0) scale(1.16,.84);}
    25%{transform:translateY(-6px) scale(.96,1.04);}
    32%{transform:translateY(0) scale(1.04,.97);}
    40%,82%{transform:translateY(0) scale(1,1);opacity:1;}
    93%,100%{opacity:0;transform:translateY(-30px) scale(.88,1.14);}
  }
  /* --i is written per window by the generator: nth-of-type cannot be used
     here because it would have to count the buildings too. */
  .obart .wud{animation:vlamp 4.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * .11s);}
  @keyframes vlamp{
    0%,42%{opacity:1;}
    52%{opacity:.35;}
    62%,100%{opacity:1;}
  }
}

@media (prefers-reduced-motion:reduce){
  .obart,.obshot:not(.obpair),.obpair .obphone,.obpair .obphone:first-child,.obpair .obphone:last-child,
  .obh,.obp,.obslide .gobtn,html.obopen .lgin{transform:none;opacity:1;will-change:auto;}
  .obbar,.obdots{opacity:1;}
  .obdot::after{transition:none;}
  .obart .vpg,.obart .wud{animation:none;}
  .obtrack{scroll-behavior:auto;}
  .ob .gobtn{transition:none;}
}