/* "The program up close": the real window in a frame, numbered pins on it, and the same notes listed under it. */
#app .sub{max-width:62ch}
.shot{position:relative;margin:30px 0 0;isolation:isolate}
/* a soft ore-coloured glow behind the window */
.shot::before{content:"";position:absolute;inset:-7% 0 -9%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 46%,rgba(226,112,31,.26),transparent 72%),radial-gradient(40% 40% at 88% 80%,rgba(123,138,150,.22),transparent 70%);filter:blur(28px)}
.shot-win{position:relative;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:#2a2a2a;
  box-shadow:0 44px 80px -34px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.05) inset;
  transform:perspective(1500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.shot-win img{display:block;width:100%;height:auto}
/* light that follows the pointer across the glass */
.shot-win::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 60%)}
.shot.tilting .shot-win::after{opacity:1}

.pin{position:absolute;left:var(--x);top:var(--y);z-index:2;width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;
  border:2px solid rgba(255,255,255,.88);border-radius:50%;background:var(--accent);color:var(--on-accent);
  font:700 13px/1 var(--sans);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s ease}
.pin::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent);animation:pin-pulse 2.6s ease-out infinite;pointer-events:none}
.pin:hover,.pin.on,.pin:focus-visible{transform:scale(1.18);background:#fff;outline:0}
@keyframes pin-pulse{from{transform:scale(1);opacity:.85}to{transform:scale(2.3);opacity:0}}
/* the pins arrive one after another once the window is in view */
.js .shot .pin{opacity:0;transform:scale(.3);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1.4),background .2s ease;transition-delay:calc(.7s + var(--n,0)*.2s)}
.js .shot.in .pin{opacity:1;transform:none}
.js .shot.in .pin:hover,.js .shot.in .pin.on,.js .shot.in .pin:focus-visible{transform:scale(1.18);transition-delay:0s}
.js .shot.rv{transform:translateY(34px) scale(.965)}
.js .shot.rv.in{transform:none}

.notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px;margin:30px 0 0;padding:0;list-style:none;counter-reset:note}
.notes li{position:relative;padding:16px 0 4px 40px;border-top:1px solid var(--rule);counter-increment:note;transition:border-color .25s ease}
.notes li::before{content:counter(note);position:absolute;left:0;top:14px;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font:700 12.5px/26px var(--sans);text-align:center;transition:transform .25s ease}
.notes b{display:block;margin:0 0 4px;font:600 15px var(--sans);color:var(--ink)}
.notes span{display:block;color:var(--soft);font-size:14px;line-height:1.5}
.notes li.on{border-top-color:var(--accent)}
.notes li.on::before{transform:scale(1.15)}

@media (max-width:900px){.notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .pin{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:11px}
  .notes{grid-template-columns:1fr}
  .shot-win{border-radius:8px}
}
@media (prefers-reduced-motion:reduce){
  .pin::after{animation:none}
  .shot-win{transform:none!important}
  .js .shot .pin{opacity:1;transform:none}
}

/* Enlarging the screenshot: a cursor and a small magnifier on the picture, and the full-window view. */
/* enlarging is for the mobile version only: a narrow window or a touch screen */
.shot-zoom{display:none;position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.34);border-radius:8px;
  background:rgba(22,27,33,.62);color:#fff;place-items:center;cursor:zoom-in;opacity:0;transition:opacity .25s ease,background .2s ease,transform .2s ease;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.shot-zoom svg{width:18px;height:18px}
.shot-win:hover .shot-zoom,.shot-zoom:focus-visible{opacity:1}
@media (max-width:900px),(hover:none) and (pointer:coarse){.shot-win{cursor:zoom-in}.shot-zoom{display:grid;opacity:.9}}
@media (hover:hover){.shot-zoom:hover{background:rgba(236,132,51,.9);transform:scale(1.06)}}

html.lb-open{overflow:hidden}
.lb{--lbp:clamp(12px,3vw,40px);position:fixed;inset:0;z-index:100;display:none;background:rgba(10,13,17,.88);opacity:0;transition:opacity .3s ease;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lb.open{opacity:1}
.lb-stage{position:absolute;inset:0;overflow:auto;display:grid;place-items:start;padding:var(--lbp);cursor:zoom-in;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lb-img{display:block;margin:auto;width:auto;height:auto;max-width:calc(100vw - 2*var(--lbp));max-height:calc(100vh - 2*var(--lbp));max-height:calc(100dvh - 2*var(--lbp));
  border-radius:10px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);user-select:none;-webkit-user-drag:none;
  transition:transform .38s cubic-bezier(.2,.75,.2,1)}
.lb.zoomed .lb-stage{padding:0;cursor:zoom-out}
.lb.zoomed .lb-img{max-width:none;max-height:none;border-radius:0;box-shadow:none}
.lb.zoomed.drag .lb-stage{cursor:grabbing}
.lb-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:2;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  background:rgba(22,27,33,.7);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s ease,transform .2s ease}
.lb-close svg{width:18px;height:18px}
@media (hover:hover){.lb-close:hover{background:rgba(236,132,51,.92);transform:rotate(90deg)}}
.lb-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-hint{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2;padding:7px 14px;border-radius:999px;
  background:rgba(22,27,33,.72);color:rgba(255,255,255,.86);font:500 13px var(--sans);white-space:nowrap;pointer-events:none;animation:lb-hint 4.2s ease forwards}
@keyframes lb-hint{0%,70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.lb,.lb-img,.shot-zoom{transition:none}.lb-hint{animation:none;opacity:.9}}