#portfolio-gallery-modal[hidden]{display:none!important}
#portfolio-gallery-modal{
  position:fixed;
  z-index:2147483646;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(15,15,15,.46);
  font-family:XiaoLaiSC,"Microsoft YaHei",sans-serif;
  overscroll-behavior:contain;
}
.portfolio-gallery-panel{
  position:relative;
  width:min(1120px,100%);
  height:min(900px,calc(100dvh - 48px));
  overflow:auto;
  overscroll-behavior:contain;
  border:2px solid #111;
  border-radius:30px;
  background:#fff;
  color:#111;
  box-shadow:0 24px 90px rgba(0,0,0,.28);
  scrollbar-width:none;
}
.portfolio-gallery-panel::-webkit-scrollbar{width:0;height:0}
.portfolio-gallery-header{
  position:sticky;
  z-index:2;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:92px;
  padding:16px clamp(18px,4vw,48px);
  border-bottom:2px solid #111;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.portfolio-gallery-year{font-size:12px;letter-spacing:.12em}
.portfolio-gallery-header h2{margin:2px 0 0;font-size:28px;font-weight:400}
.portfolio-gallery-close{
  flex:none;
  min-height:42px;
  padding:7px 22px;
  border:2px solid #111;
  border-radius:999px;
  background:#fff;
  color:#111;
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;
}
.portfolio-gallery-actions{display:flex;align-items:center;gap:10px;flex:none}
.portfolio-gallery-download{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:7px 20px;
  border:2px solid #111;
  border-radius:999px;
  background:#fff;
  color:#111;
  font:inherit;
  text-decoration:none;
  white-space:nowrap;
  touch-action:manipulation;
}
.portfolio-gallery-download:hover,.portfolio-gallery-close:hover{background:#f5f5f5}
.portfolio-gallery-progress{
  position:sticky;
  z-index:3;
  top:92px;
  width:100%;
  height:12px;
  margin-bottom:-12px;
  background:rgba(0,0,0,.08);
  cursor:ew-resize;
  touch-action:none;
  outline:none;
}
.portfolio-gallery-progress:focus-visible{box-shadow:inset 0 0 0 2px rgba(17,17,17,.3)}
.portfolio-gallery-progress i{
  display:block;
  width:100%;
  height:100%;
  background:#111;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .12s linear;
}
.portfolio-gallery-progress b{
  position:absolute;
  top:50%;
  left:calc(var(--gallery-progress,0) * 100%);
  width:18px;
  height:18px;
  border:2px solid #111;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transform:translate(-50%,-50%);
  transition:left .12s linear,transform .2s ease;
}
.portfolio-gallery-progress:hover b,.portfolio-gallery-progress:focus-visible b{transform:translate(-50%,-50%) scale(1.14)}
.portfolio-gallery-progress:active b{transform:translate(-50%,-50%) scale(.94)}
.portfolio-gallery-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  width:100%;
  background:#fff;
  transition:opacity .35s ease;
}
.portfolio-gallery-loader{
  position:absolute;
  z-index:1;
  top:96px;
  right:0;
  bottom:0;
  left:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:15px;
  width:100%;
  min-height:420px;
  margin:0;
  background:#fff;
  color:#111;
  text-align:center;
}
.portfolio-gallery-loader[hidden]{display:none!important}
.portfolio-gallery-loader strong{font-size:25px;font-weight:400;letter-spacing:.04em}
.portfolio-loader-percent{
  display:inline-block;
  min-width:3.4ch;
  margin-left:.25em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  text-align:right;
}
.portfolio-bike{display:block;width:150px;height:auto;overflow:visible;color:#111}
.portfolio-bike-lines{filter:url(#fl-line-wiggle)}
.bike-body,.bike-front,.bike-seat,.bike-pedals,.bike-spokes,.bike-tire{
  animation:bikeBody 3s ease-in-out infinite;
  stroke-dasharray:100;
  transition:stroke .3s;
}
.bike-front{animation-name:bikeFront}.bike-seat{animation-name:bikeSeat}
.bike-pedals{animation-name:bikePedals}.bike-pedals-spin{animation:bikePedalsSpin 3s ease-in-out infinite}
.bike-spokes{animation-name:bikeSpokes}.bike-spokes-spin{animation:bikeSpokesSpin 3s ease-in-out infinite}
.bike-tire{animation-name:bikeTire;transform-box:fill-box;transform-origin:center}
.portfolio-loader-track{display:block;width:320px;max-width:72vw;height:6px;overflow:hidden;border-radius:999px;background:#d7d7d7;filter:url(#fl-line-wiggle)}
.portfolio-loader-track i{display:block;width:46%;height:100%;border-radius:inherit;background:#111;animation:portfolioLoaderRun 1.35s cubic-bezier(.65,0,.35,1) infinite}
#portfolio-gallery-modal.is-loading .portfolio-gallery-grid{opacity:0;pointer-events:none}
@keyframes portfolioLoaderRun{0%{transform:translateX(-105%)}50%{transform:translateX(72%)}100%{transform:translateX(225%)}}
@keyframes bikeBody{from{stroke-dashoffset:79}33%,67%{stroke-dashoffset:0}to{stroke-dashoffset:-79}}
@keyframes bikeFront{from{stroke-dashoffset:19}33%,67%{stroke-dashoffset:0}to{stroke-dashoffset:-19}}
@keyframes bikeSeat{from{stroke-dashoffset:5}33%,67%{stroke-dashoffset:0}to{stroke-dashoffset:-5}}
@keyframes bikePedals{from{stroke-dashoffset:-25.133}33%,67%{stroke-dashoffset:-21.991}to{stroke-dashoffset:-25.133}}
@keyframes bikePedalsSpin{from{transform:rotate(.1875turn)}to{transform:rotate(3.1875turn)}}
@keyframes bikeSpokes{from{stroke-dashoffset:-31.416}33%,67%{stroke-dashoffset:-23.562}to{stroke-dashoffset:-31.416}}
@keyframes bikeSpokesSpin{from{transform:rotate(0)}to{transform:rotate(3turn)}}
@keyframes bikeTire{from{stroke-dashoffset:56.549;transform:rotate(0)}33%{stroke-dashoffset:0;transform:rotate(.33turn)}67%{stroke-dashoffset:0;transform:rotate(.67turn)}to{stroke-dashoffset:-56.549;transform:rotate(1turn)}}
.portfolio-gallery-grid img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
}
.fl-work-card [data-open-year]{touch-action:manipulation;cursor:pointer}

@media(max-width:640px){
  #portfolio-gallery-modal{padding:0;background:#fff}
  .portfolio-gallery-panel{
    width:100%;
    height:100dvh;
    border:0;
    border-radius:0;
  }
  .portfolio-gallery-header{
    min-height:82px;
    padding:12px 16px;
  }
  .portfolio-gallery-header h2{font-size:21px}
  .portfolio-gallery-close{min-height:38px;padding:5px 17px}
  .portfolio-gallery-download{min-height:38px;padding:5px 14px}
  .portfolio-gallery-progress{top:82px}
  .portfolio-gallery-loader{top:82px;min-height:360px}
  .portfolio-gallery-loader strong{font-size:21px}
  .portfolio-bike{width:132px}
}