.demo-section .demo-grid{gap:20px}.demo-section .sample-stage{height:490px;background:#dde0db;display:block}.demo-section .sample-stage.after{background:#dde0db}.demo-section .paired-viewport{position:absolute;inset:0;overflow:hidden}.demo-section .paired-viewport img{position:absolute;top:50%;width:200%;height:auto;max-width:none;transform:translateY(-50%);transition:opacity .26s ease}.demo-section .paired-viewport.before img{left:0}.demo-section .paired-viewport.after img{right:0}.demo-section .sample-title .stage-label{font-weight:500;letter-spacing:0;color:#85918b}.demo-section .gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px}.demo-section .gallery-controls h3{font-size:21px;letter-spacing:-.03em;margin:0}.demo-section .gallery-controls p{color:#718079;font-size:12px;margin:5px 0 0}.demo-section .gallery-track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:15px 2px 12px;scroll-snap-type:x proximity}.demo-section .gallery-track::-webkit-scrollbar{display:none}.demo-section .gallery-thumb{flex:0 0 225px;text-align:left;border:2px solid transparent;border-radius:10px;background:#f9faf5;padding:7px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;scroll-snap-align:start}.demo-section .gallery-thumb:hover{transform:translateY(-3px)}.demo-section .gallery-thumb[aria-pressed=true]{border-color:#5d8118;background:#effbd8}.demo-section .gallery-thumb-image{display:block;height:117px;border-radius:6px;overflow:hidden;position:relative;background:#d4dbd6}.demo-section .gallery-thumb-image img{width:100%;height:100%;object-fit:cover;object-position:left center}.demo-section .gallery-thumb-name{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;padding:11px 7px 5px;color:#243028}.demo-section .gallery-thumb-index{font-size:10px;color:#697965;font-family:monospace}.demo-section .sample-note{padding-top:6px}.demo-section .corner{background:#eff1ebdd;padding:5px 7px;border-radius:3px}.gallery-stage-fade{animation:caseAppear .27s ease}@keyframes caseAppear{from{opacity:.5}to{opacity:1}}@media(max-width:750px){.demo-section .sample-stage{height:380px}.demo-section .gallery-thumb{flex-basis:180px}.demo-section .gallery-thumb-image{height:90px}}@media(max-width:520px){.demo-section .demo-grid{gap:10px}.demo-section .sample-stage{height:250px}.demo-section .sample-title{padding:12px 10px;font-size:10px}.demo-section .corner{font-size:8px;right:5px;bottom:5px}.demo-section .gallery-controls h3{font-size:18px}.demo-section .gallery-thumb{flex-basis:160px}}

.demo-section .sample-note{font-size:18px;line-height:1.7;color:#647169}@media(max-width:520px){.demo-section .sample-note{font-size:16px}}

.gallery-track{cursor:grab;touch-action:pan-x pan-y;position:relative}.gallery-track:active{cursor:grabbing}.gallery-thumb img{user-select:none;-webkit-user-drag:none}

.demo-section .gallery-track{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 46px)/4);gap:16px 14px;scroll-snap-type:none;scroll-behavior:auto;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;user-select:none;align-items:stretch}.demo-section .gallery-thumb{min-width:0;scroll-snap-align:none}.demo-section .gallery-thumb:hover{transform:none}.demo-section .gallery-thumb-image{height:auto;aspect-ratio:2/1}.demo-section .gallery-thumb-name{gap:8px;min-height:42px}.demo-section .gallery-thumb:active{cursor:grabbing}@media(max-width:750px){.demo-section .gallery-track{grid-auto-columns:calc((100% - 18px)/2)}}@media(max-width:420px){.demo-section .gallery-track{grid-auto-columns:72%}}

.gallery-rows{display:flex;flex-direction:column;gap:2px;margin-top:0;overflow:hidden}.demo-section .gallery-loop-row{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:15px 2px 12px;scroll-behavior:auto;scroll-snap-type:none;position:relative;touch-action:pan-x pan-y;overscroll-behavior-x:contain}.demo-section .gallery-loop-row .gallery-thumb{flex:0 0 calc((100% - 42px)/4);min-width:0}.demo-section .gallery-loop-row .gallery-thumb:hover{transform:none}@media(max-width:750px){.demo-section .gallery-loop-row .gallery-thumb{flex-basis:calc((100% - 14px)/2)}}@media(max-width:420px){.demo-section .gallery-loop-row .gallery-thumb{flex-basis:72%}}
.demo-section .gallery-thumb[aria-pressed=true]{border-color:transparent;background:#effbd8}