.gallery-main {
  max-width:1120px;
}
.gallery-intro {
  padding-block:80px 48px;
}
.gallery-heading h1 {
  font-size:clamp(38px,4.5vw,60px);
  line-height:1.15;
  letter-spacing:-2px;
}
.gallery-heading h1 em {
  letter-spacing:inherit;
}
.gallery-heading p {
  color:var(--muted);
  font-size:16px;
  margin:20px 0 0;
  max-width:540px;
}
.gallery-toolbar {
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.gallery-filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
}
.topic-filter {
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  color:var(--muted);
  padding:10px 0;
  font-size:13px;
  line-height:1.6;
}
.topic-filter:hover,.topic-filter.active {
  color:var(--ink);
}
.topic-filter.active {
  border-color:var(--accent);
}
#gallery-status {
  margin:14px 0 0;
  font-size:12px;
  color:var(--muted);
}
.gallery-topic {
  padding-block:56px 64px;
  border-bottom:1px solid var(--line);
}
.topic-heading {
  margin-bottom:36px;
}
.topic-heading h2 {
  font-size:clamp(26px,3vw,34px);
  letter-spacing:-.8px;
}
.topic-heading>p {
  max-width:640px;
  color:var(--muted);
  font-size:14px;
  margin:14px 0 0;
}
.demo-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:52px 40px;
}
.demo-card {
  min-width:0;
  scroll-margin-top:112px;
}
.demo-screen {
  background:#f5f5f5;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:4px;
}
.demo-screen video {
  width:100%;
  height:100%;
  object-fit:contain;
}
.demo-screen video:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:-3px;
}
.demo-copy {
  padding-top:18px;
}
.demo-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:8px;
}
.demo-meta>span:last-child {
  flex-shrink:0;
}
.demo-copy h3 {
  font-size:22px;
  letter-spacing:-.4px;
  line-height:1.3;
  margin-bottom:10px;
}
.demo-copy p {
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:14px;
}
.demo-link {
  display:inline-block;
  font-size:12px;
  padding-block:8px;
  text-decoration:underline;
  text-decoration-color:var(--line);
  text-underline-offset:5px;
}
.demo-link>span[aria-hidden] {
  margin-left:6px;
}
.demo-link+.demo-link {
  margin-left:20px;
}
.demo-task {
  margin:16px 0 6px;
  border-top:1px solid var(--line);
}
.demo-task summary {
  cursor:pointer;
  padding:12px 0;
  font-size:12px;
  color:var(--muted);
}
.demo-task summary:hover,.demo-task[open] summary {
  color:var(--ink);
}
.demo-task-content {
  padding:4px 0 12px;
}
.demo-task p,.demo-task ul {
  font-size:13px;
  line-height:1.8;
  margin:0;
}
.demo-task ul {
  padding-left:18px;
  color:var(--muted);
}
.demo-task li+li,.demo-task ul+p {
  margin-top:10px;
}
.demo-task strong {
  font-weight:500;
  color:var(--ink);
}
.gallery-closing {
  padding-block:40px 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.gallery-closing p {
  margin:0;
  color:var(--muted);
  font-size:14px;
}
@media(max-width:700px) {
  .gallery-intro {
    padding-block:48px 32px;
  }
  .gallery-heading h1 {
    letter-spacing:-1.3px;
  }
  .gallery-filters {
    gap:4px 20px;
  }
  .gallery-topic {
    padding-block:40px 48px;
  }
  .demo-grid {
    grid-template-columns:minmax(0,1fr);
    gap:40px;
  }
  .gallery-closing {
    align-items:flex-start;
    flex-direction:column;
  }
}