main{width:min(760px,calc(100% - 48px));margin-top:52px}.back{display:inline-block;margin-bottom:28px;color:#777;font-size:14px;text-decoration:none}.gallery{position:relative}.track{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:16px;overscroll-behavior-x:contain}.track::-webkit-scrollbar{display:none}.media-card{position:relative;flex:0 0 94%;scroll-snap-align:start;aspect-ratio:16/10;overflow:hidden;border:1px solid #e8e8e8;border-radius:14px;background:#f3f3f3;padding:0;cursor:zoom-in;display:block;color:inherit}.media-card:only-child{flex-basis:100%}.media-card img{width:100%;height:100%;object-fit:contain;background:#f7f7f7}.media-card.video{cursor:pointer;background:#171717}.video img{object-fit:cover}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#0009;font-size:25px;padding-left:4px;transition:background .18s,scale .18s}.video:hover .play{background:#000c;scale:1.05}.video-label{position:absolute;bottom:16px;left:16px;background:#000b;color:#fff;padding:5px 9px;border-radius:5px;font-size:13px}.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;background:#151515b3;color:#fff;border-radius:50%;width:34px;height:34px;font:26px Helvetica;cursor:pointer;box-shadow:0 1px 4px #0003;transition:background .16s}.gallery-arrow:hover{background:#151515e6}.previous{left:12px}.next{right:12px}[hidden]{display:none!important}.gallery-meta{display:flex;justify-content:space-between;gap:20px;color:#777;font-size:13px;margin:12px 0 32px}.project-heading{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px}.project-heading>span{font-size:14px;color:#777}.project-description{line-height:1.55}.repository{margin-top:20px;font-size:14px}dialog{border:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;margin:0;padding:60px 64px;background:#111f;color:#fff}dialog::backdrop{background:#000e}dialog[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;animation:appear .16s ease-out}dialog img{max-width:100%;max-height:calc(100dvh - 145px);object-fit:contain}.close,.lightbox-prev,.lightbox-next{position:absolute;border:0;background:#ffffff18;color:white;width:40px;height:40px;border-radius:50%;font:28px Helvetica;cursor:pointer}.close{top:16px;right:20px}.lightbox-prev{left:12px;top:50%}.lightbox-next{right:12px;top:50%}.lightbox-caption{font-size:14px;margin-top:16px;color:#ddd}@keyframes appear{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@media(max-width:600px){main{margin-top:30px}.media-card{aspect-ratio:4/3}.gallery-meta{margin-bottom:24px}dialog{padding:58px 12px}.lightbox-prev,.lightbox-next{top:auto;bottom:12px}}@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}.play,.gallery-arrow{transition:none}}

/* Smaller cards expose the next item; native swipe/scroll and keyboard navigation. */
.media-card{flex-basis:82%;aspect-ratio:16/10}.track{gap:8px}.media-card.video{cursor:default}.media-card iframe{width:100%;height:100%;border:0;display:block;background:#111}.video-poster{position:relative;width:100%;height:100%;display:block;padding:0;border:0;color:inherit;background:var(--image-surface);font:inherit;text-align:left;cursor:pointer}.video-poster:focus-visible{outline:2px solid currentColor;outline-offset:-5px}.video-poster-label{width:auto;height:auto;padding:8px 12px;white-space:nowrap}.video-player{display:flex;flex-direction:column;width:100%;height:100%}.video-player iframe{flex:1 1 auto;min-height:0;height:auto}.video-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;background:var(--surface);color:var(--muted);font-size:11px;line-height:15px}.video-actions span{min-width:0}.video-reload{flex:none;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.video-reload:focus-visible{outline:2px solid currentColor;outline-offset:2px}.gallery-arrow{display:none}@media(max-width:600px){.media-card{flex-basis:84%;aspect-ratio:4/3}.video-actions{align-items:flex-start}.video-actions span{max-width:70%}}

.media-card .twitter-tweet{margin:0!important}.media-card:has(.twitter-tweet){background:white;overflow:auto;aspect-ratio:auto;min-height:300px}.media-card .twitter-tweet iframe{height:100%!important}

.back,.gallery-meta,.project-heading>span{color:var(--muted)}
.media-card{background:var(--surface);border-color:var(--media-line)}
.media-card img{background:var(--image-surface)}
.media-card:has(.twitter-tweet){background:var(--surface)}

/* Article pages share the compact reading column and quiet index rail. */
main.project-article{width:min(550px,calc(100% - 48px));margin:80px auto 80px;position:relative}
.project-heading{display:flex;flex-direction:column;gap:4px;margin:0 0 28px}
.project-heading h1{font-size:14px;font-weight:500;line-height:20px}
.project-heading>span{line-height:20px}
.article-nav{position:fixed;top:80px;left:max(24px,calc(50% - 550px));width:180px;font-size:13px;line-height:16px;color:var(--muted)}
.article-nav a{display:block;text-decoration:none;margin:0 0 8px;transition:color .14s ease}
.article-nav .index-link{margin-bottom:36px}
.article-nav p{font-size:13px;line-height:16px;margin-bottom:16px}
.article-nav a:hover,.article-nav a[aria-current]{color:var(--text)}
.article-section{margin-top:36px;scroll-margin-top:80px}
.article-section h2{position:relative;color:var(--text);font-size:14px;font-weight:600;line-height:20px;margin:0 0 16px}
.article-section:target h2{width:fit-content;animation:section-emphasis 1.8s ease-out}
.project-description{font-size:14px;line-height:20px}
.gallery{scroll-margin-top:80px}
.gallery-meta{font-size:12px;line-height:18px;margin:12px 0 0}
.repository{margin-top:0;font-size:14px;line-height:20px}
.source-section{border-top:1px solid var(--line);padding-top:28px}
.project-article>.project-heading,.project-article>.gallery,.project-article>.gallery-meta,.project-article>.article-section{animation:page-enter .5s cubic-bezier(.22,1,.36,1) both}
.project-article>.gallery{animation-delay:.05s}.project-article>.gallery-meta{animation-delay:.08s}.project-article>.article-section{animation-delay:.1s}
@keyframes section-emphasis{0%,30%{background:#fff982;color:#222;box-shadow:0 0 0 6px #fff982;border-radius:2px}100%{background:transparent;box-shadow:0 0 0 6px transparent}}
@media(max-width:1050px){.article-nav{position:static;width:auto;margin-bottom:32px;display:flex;flex-wrap:wrap;gap:8px 18px}.article-nav .index-link{width:100%;margin-bottom:12px}.article-nav p{display:none}.article-nav a{margin:0}main.project-article{margin-top:40px}}
@media(max-width:600px){main.project-article{margin-top:28px}.article-nav{font-size:12px;gap:8px 14px}.project-heading{margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){.project-article>.project-heading,.project-article>.gallery,.project-article>.gallery-meta,.project-article>.article-section,.article-section:target h2{animation:none}.article-nav a{transition:none}}
.video-poster-label{font-size:14px;line-height:20px;border-radius:999px;padding:10px 16px}

/* Keep the source aspect ratio visible inside the preview frame. */
.media-card,
.media-card:only-child,
.video-poster,
.video-player {
  aspect-ratio: 16 / 9;
}

.media-card img,
.video-poster img {
  object-fit: contain;
  object-position: center;
}

.media-card iframe {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

@media (max-width: 600px) {
  .media-card,
  .media-card:only-child,
  .video-poster,
  .video-player {
    aspect-ratio: 16 / 9;
  }
}