.examples-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0}.examples-controls p{font-size:12px;color:var(--muted);margin:0}.examples-controls>div{display:flex;gap:8px}.examples-controls button{background:var(--panel);color:var(--cyan);border:1px solid #33738a;border-radius:4px;padding:9px 13px;font-size:12px;min-height:40px}.examples-frame{position:relative}.examples-frame.more-examples:after{content:'';position:absolute;bottom:0;left:0;right:14px;height:65px;background:linear-gradient(transparent,var(--bg));pointer-events:none}.compact-examples{max-height:530px;overflow-y:auto;overflow-x:hidden;padding:3px 12px 45px 3px;scrollbar-color:#33738a #0a1424;scrollbar-width:thin;scroll-padding:15px}.compact-examples:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}.compact-examples .project{min-height:360px}.compact-examples .project:focus-within{z-index:1}.examples-frame:has(.project:focus-within):after{opacity:0}
@media(max-width:700px){.examples-controls{align-items:flex-start;flex-direction:column;gap:10px}.compact-examples{display:flex;max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:3px 20px 18px 3px;align-items:flex-start}.compact-examples .project{flex:0 0 88%;scroll-snap-align:start;min-height:385px}.examples-frame.more-examples:after{top:0;bottom:18px;left:auto;right:0;width:25px;height:auto;background:linear-gradient(90deg,transparent,var(--bg))}}