.web-motion-toggle { margin-top: 1.5rem; padding: .5rem .85rem; font: inherit; color: var(--ink); border: 1px solid currentColor; background: transparent; cursor: pointer }
.web-example { margin: 1.5rem 0 2.5rem }
.web-shots { display: grid; gap: 1.4rem; align-items: start }
.web-shots:has(figure + figure) { grid-template-columns: repeat(2,minmax(0,1fr)) }
.web-example:last-child .web-shots { grid-template-columns: minmax(0,2fr) minmax(0,1fr) }
.web-shots figure { margin: 0 }
.web-shots img { display: block; width: 100%; height: auto; outline: 1px solid #32171924; outline-offset: -1px }
.web-shots figcaption { margin-top: .6rem; max-width: 65ch; line-height: 1.55; font-size: .92rem }
.web-beats { background: #170f10; color: #fff4df; padding: .8rem 1.2rem; display: flex; flex-wrap: wrap; gap: .3em 1.1em; margin-bottom: 1rem; font: 600 clamp(20px,3vw,36px)/1.35 Barlow,sans-serif }
.web-beats span { display: inline-block }
.web-beats.is-playing { display: grid }
.web-beats.is-playing span { grid-area: 1 / 1; opacity: 0; transform-origin: left center; animation: web-emphasis 7.8s both infinite; --accent: #fff4df; --scale: 1.01 }
.web-beats.is-playing span:nth-child(2) { animation-delay: 2.6s; --accent: #f1d8ae; --scale: 1.035 }
.web-beats.is-playing span:nth-child(3) { animation-delay: 5.2s; --accent: #e8bf81; --scale: 1.075; font-weight: 800 }
@keyframes web-emphasis {
  0% { opacity: 0; transform: translateY(.18em) scale(.98); color: #fff4df }
  5%,24% { opacity: 1; transform: translateY(0) scale(var(--scale)); color: var(--accent) }
  32%,100% { opacity: 0; transform: translateY(-.08em) scale(var(--scale)); color: var(--accent) }
}
@media(max-width:700px) {
  .web-shots:has(figure + figure),.web-example:last-child .web-shots { grid-template-columns: 1fr }
  .web-example:last-child figure:last-child { max-width: 390px }
}