/* "More projects" (home), drawn by xrail.js. History: v1 two horizontal rails (Leo 10/21 "具体的滚动可以参考apple");
   v2 centred, endless, autoplay, darker pictures, renders mixed in (02:19); v3 (03:11, with a screenshot of apple.com's
   "Endless entertainment" gallery: "这个页面整体完全按照这个尺寸来 你现在还是不一样") - the gallery's own measures,
   taken at a 1600 px window:
     big card   1006 x 538  (62.85 % of the window, 1.87 : 1)      small card 378 x 212 (23.65 %, 16 : 9)
     10 px between every two cards and between the rows          both rows centred on the window, endless
     words on the pictures: big = [pill] Name · line, 56 px in, 46 px up, 17 px type; small = title bottom left,
     tag top right, button bottom right                          dots under the small row, pause at the right edge
     the whole block on #f5f5f7, headline centred.
   Under 1600 px the cards keep those proportions of the window; over it they keep Apple's pixel sizes. xrail.js
   measures --vw (documentElement.clientWidth, never 100vw: that includes the scrollbar) and --bl (where the page
   column starts) so the rows can run edge to edge from inside the column. */
.xworks{--vw:100%;--bl:var(--gutter)}
.xworks--rail{position:relative;isolation:isolate;padding:clamp(48px,5.5vw,88px) 0 clamp(26px,2.6vw,40px)}
.xworks--rail::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(-1 * var(--bl));width:var(--vw);background:var(--tile)}
.xworks--rail .xhead{margin:0 0 clamp(22px,2.6vw,40px);text-align:center;font-size:clamp(28px,3.5vw,56px);line-height:1.07;
  font-weight:600;letter-spacing:-.028em;color:var(--ink)}

.xrail{position:relative;margin:0;--gap:clamp(6px,.65vw,10px)}
.xrail+.xrail{margin-top:var(--gap)}
.xrail--big{--cw:min(1006px,calc(var(--vw) * .6285));--ar:1006 / 538;--ih:calc(var(--cw) * 538 / 1006)}
.xrail--sm{--cw:min(378px,calc(var(--vw) * .2365));--ar:16 / 9;--ih:calc(var(--cw) * 9 / 16)}

/* the row: the full width of the window, centred snap */
.xrail__row{position:relative;display:flex;width:var(--vw);margin-left:calc(-1 * var(--bl));
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;outline:none}
.xrail__row::-webkit-scrollbar{display:none}
.xrail.is-glide .xrail__row,.xrail.is-drag .xrail__row{scroll-snap-type:none}
.xrail.can-drag .xrail__row{cursor:grab}
.xrail.is-drag .xrail__row{cursor:grabbing}

/* a card: the picture, the words on it */
.xrail__c{position:relative;flex:0 0 auto;width:var(--cw);margin:0 calc(var(--gap) / 2);scroll-snap-align:center;
  color:#1d1d1f;text-decoration:none;overflow:hidden}
.xrail__im{position:relative;width:100%;aspect-ratio:var(--ar);background:#e8e8ed;overflow:hidden}
.xrail__im img{display:block;width:100%;height:100%;object-fit:cover}
.xrail__c[data-id="uoson"] .xrail__im img{object-position:72% 50%}      /* the lift-off frame: keep the drone in */
.is-dark .xrail__im::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}
.xrail__c:focus-visible{outline:none}
.xrail__c:focus-visible .xrail__im{outline:2px solid var(--accent);outline-offset:-2px}
.xrail__t{position:absolute;z-index:1;display:flex;align-items:center}
.xrail__t p{margin:0;min-width:0}
.xrail__t b{font-weight:600}
.xrail__cta{flex:none;display:inline-flex;align-items:center;border-radius:999px;background:#1d1d1f;color:#fff;white-space:nowrap;
  transition:background .2s ease}
.is-dark .xrail__cta{background:rgba(255,255,255,.9);color:#1d1d1f}
a.xrail__c:hover .xrail__cta{background:#000}
a.xrail__c.is-dark:hover .xrail__cta{background:#fff}
.is-dark .xrail__t p,.is-dark .xrail__tag{color:#fff}

/* big: Name · line - one line, bottom left (Apple: 56 px in, 46 px up, 17 px). 10/21 (Leo "去掉learn more"):
   no button on either row - the whole card is the link. The .xrail__cta rules below are unused; put the span
   back in xrail.js card() if it is ever wanted again. */
.xrail--big .xrail__t{left:calc(var(--cw) * .0557);right:calc(var(--cw) * .0557);bottom:calc(var(--cw) * .0457);
  gap:calc(var(--cw) * .0199);font-size:clamp(12px,calc(var(--cw) * .0169),17px);line-height:1.3}
.xrail--big .xrail__t p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(29,29,31,.85)}
.xrail--big .xrail__t b{color:#1d1d1f}
.xrail--big .is-dark .xrail__t p{color:rgba(255,255,255,.86)}
.xrail--big .is-dark .xrail__t b{color:#fff}
.xrail--big .xrail__cta{height:2.06em;padding:0 1.05em}

/* small: tag top right, title bottom left */
.xrail--sm .xrail__c{font-size:clamp(11px,calc(var(--cw) * .037),14px)}
.xrail__tag{position:absolute;z-index:1;top:calc(var(--ih) * .07);right:calc(var(--cw) * .04);
  font-size:.93em;font-weight:500;line-height:1.2;color:rgba(29,29,31,.7)}
.xrail--sm .xrail__t{left:calc(var(--cw) * .04);right:calc(var(--cw) * .034);bottom:calc(var(--ih) * .06);
  justify-content:space-between;align-items:flex-end;gap:10px}
.xrail--sm .xrail__t p{margin-bottom:.4em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xrail--sm .xrail__cta{height:2.1em;padding:0 1em;font-size:.93em}

/* small tiles always carry a soft shade at the foot and white titles (Apple's Fitness+ / Arcade tiles do the same):
   the placeholder pictures are busy at the bottom, and a title has to read on every one of them */
.xrail--sm .xrail__im::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.52),rgba(0,0,0,0))}
.xrail .xrail__c .xrail__t p{color:#1d1d1f}
.xrail--big .xrail__c .xrail__t p{color:rgba(29,29,31,.85)}
.xrail--big .xrail__c.is-dark .xrail__t p{color:rgba(255,255,255,.86)}
.xrail--sm .xrail__c .xrail__t p{color:#fff}
.xrail--sm .xrail__cta{background:rgba(255,255,255,.9);color:#1d1d1f}

/* arrows at the window edges over the middle of the pictures; pointer devices only */
.xrail__nav{position:absolute;top:calc(var(--ih) / 2 - 18px);z-index:3;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:0;border-radius:999px;color:#1d1d1f;cursor:pointer;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.1);opacity:0;transition:opacity .25s ease,background .2s ease}
.xrail__nav svg{width:17px;height:17px}
.xrail__nav--prev{left:calc(14px - var(--bl))}
.xrail__nav--next{right:calc(14px - (var(--vw) - var(--bl) - 100%))}
.xrail:hover .xrail__nav,.xrail__nav:focus-visible{opacity:1}
.xrail__nav:hover{background:rgba(255,255,255,.92)}
@media (hover:none){.xrail__nav{display:none}}

/* dots under the small row (the current one is a pill that fills while it plays), pause at the right edge */
.xrail__ctl{position:relative;display:flex;justify-content:center;align-items:center;height:36px;margin-top:clamp(10px,1.2vw,18px)}
.xrail__dots{display:flex;align-items:center;gap:11px}
.xrail__dot{position:relative;flex:none;width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;overflow:hidden;
  background:rgba(0,0,0,.24);transition:width .45s cubic-bezier(.2,.8,.2,1),background .3s ease}
.xrail__dot::after{content:"";position:absolute;left:-6px;right:-6px;top:-14px;bottom:-14px}
.xrail__dot:hover{background:rgba(0,0,0,.42)}
.xrail__dot.is-cur{width:26px}
.xrail__dot i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:#1d1d1f}
.xrail__dot.is-cur.is-run i{animation:xr-fill 5s linear forwards}
.xrail__ctl.is-paused .xrail__dot.is-cur i{animation-play-state:paused}
.xrail__ctl.is-stopped .xrail__dot.is-cur i{animation:none;width:100%}
@keyframes xr-fill{to{width:100%}}
.xrail__play{position:absolute;top:0;right:calc(100% + var(--bl) - var(--vw) + 22px);display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:0;border-radius:999px;background:rgba(0,0,0,.07);color:#1d1d1f;cursor:pointer;transition:background .2s}
.xrail__play:hover{background:rgba(0,0,0,.12)}
.xrail__play svg{width:13px;height:13px;fill:currentColor}
.xrail__play .i-play,.xrail__ctl.is-stopped .xrail__play .i-pause{display:none}
.xrail__ctl.is-stopped .xrail__play .i-play{display:block}
.xrail__dot:focus-visible,.xrail__play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

[data-theme="dark"] .xrail__dot{background:rgba(255,255,255,.28)}
[data-theme="dark"] .xrail__dot:hover{background:rgba(255,255,255,.45)}
[data-theme="dark"] .xrail__dot i{background:#f5f5f7}
[data-theme="dark"] .xrail__play{background:rgba(255,255,255,.1);color:#f5f5f7}
[data-theme="dark"] .xrail__play:hover{background:rgba(255,255,255,.16)}

@media (max-width:734px){
  .xrail--big{--cw:calc(var(--vw) - 40px)}
  .xrail--sm{--cw:calc(var(--vw) * .62)}
  .xrail--big .xrail__t{font-size:12px;left:14px;right:14px;bottom:14px;gap:10px}
  .xrail__play{right:calc(100% + var(--bl) - var(--vw) + 14px)}
}
@media (prefers-reduced-motion:reduce){.xrail__dot,.xrail__cta,.xrail__nav{transition:none}}
@media (prefers-reduced-transparency:reduce){.xrail__nav{background:#f5f5f7;-webkit-backdrop-filter:none;backdrop-filter:none}}