*{box-sizing:border-box;margin:0;padding:0}body{font-family:sans-serif;background-color:#f9f9f9;color:#333}img{display:block;max-width:100%;height:auto}a{text-decoration:none;color:inherit}.site-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#fff;box-shadow:0 2px 4px #0000001a}.site-header .logo img{max-height:40px;width:auto}.main-nav .nav-list{display:flex;gap:1.5rem;list-style:none}.main-nav .nav-list a{font-weight:500;color:#333;padding:.25rem 0;position:relative}.main-nav .nav-list a.active:after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background-color:#000}.video-controls{text-align:right;margin:1rem}#category-select{padding:.5rem;border:1px solid #ccc;border-radius:4px;background-color:#fff}.demo-header{text-align:center;padding:1.5rem}.demo-header h1{font-size:2rem;margin-bottom:.5rem}.demo-header p{font-size:1rem;color:#666}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,400px));justify-content:start;gap:16px;padding:0 1rem 2rem}.thumb-wrapper{position:relative;overflow:hidden}.thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:filter .3s ease,transform .3s ease}.thumb-wrapper:hover .thumb{filter:blur(2px) brightness(1.1);transform:scale(1.03)}.thumb-wrapper:after{content:attr(data-title);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:none;padding:0;border:none;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.8);white-space:nowrap;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1;font-size:3rem}.thumb-wrapper:hover:after{opacity:1}#modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;align-items:center;justify-content:center;z-index:1000}#modal.open{display:flex}.modal-content{width:50vw;max-width:800px;margin:0}.modal-content iframe{width:100%;aspect-ratio:16/9;border:none;border-radius:4px}.close{position:absolute;top:10px;right:10px;background:#fff;border-radius:50%;padding:4px 8px;cursor:pointer;font-size:18px;line-height:1}footer{text-align:center;padding:1rem;color:#777;background:#fff}@media (max-width: 768px){.demo-header h1{font-size:1.75rem}.demo-header p{font-size:.9rem}.gallery{gap:12px;padding:0 .75rem 1.5rem}.close{top:8px;right:8px;padding:3px 6px;font-size:16px}}@media (max-width: 480px){.demo-header h1{font-size:1.5rem}.demo-header p{font-size:.8rem}.gallery{grid-template-columns:1fr;gap:8px;padding:0 .5rem 1rem}.modal-content{width:95vw}.close{top:6px;right:6px;padding:2px 5px;font-size:14px}}