*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#141416;color:#f7f7f7;font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}header{display:flex;align-items:center;justify-content:space-between;padding:30px 4vw;border-bottom:1px solid #303034}.brand{font-size:26px;font-weight:900;color:inherit;text-decoration:none;letter-spacing:-1px}.brand span{font-size:11px;letter-spacing:2px;margin-left:8px}h1{font-size:14px;font-weight:400;margin:0;color:#aaa}main{padding:24px 4vw 50px}#filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}#filters button{border:1px solid #37373c;border-radius:30px;background:transparent;color:#bdbdc4;padding:10px 15px;font-size:12px}#filters button.active{background:#efff7b;color:#171719;border-color:#efff7b}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}.card{text-align:left;border:0;background:none;color:inherit;padding:0;min-width:0}.card-img{position:relative;aspect-ratio:16/10;background:#242428;border-radius:12px;overflow:hidden}.card img,.card video{width:100%;height:100%;object-fit:cover;display:block}.card video{position:absolute;inset:0;opacity:0}.card.previewing video{opacity:1}.card-brand{display:block;font-size:15px;font-weight:600;margin-top:12px}.card:focus-visible{outline:2px solid #efff7b;outline-offset:5px}dialog{position:fixed;inset:0;width:calc(100vw - 40px);height:calc(100dvh - 40px);max-width:none;max-height:none;margin:auto;padding:0;border:1px solid #38383c;border-radius:14px;background:#101012;color:white;overflow:hidden}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:rgba(0,0,0,.92)}.player-bar{height:64px;flex:0 0 64px;display:flex;align-items:center;padding:0 20px;gap:16px}.player-bar h2{font-size:16px;font-weight:500;margin:0 auto 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.player-bar button{background:transparent;color:white;border:1px solid #45454a;border-radius:50%;width:38px;height:38px;flex-shrink:0;display:grid;place-items:center}#close{font-size:28px}#sound svg{width:20px;height:20px}#detail-content{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#050506}#detail-content video,#detail-content iframe{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;border:0}body:has(dialog[open]){overflow:hidden}@media(min-width:1700px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:650px){header{padding:22px 18px}.brand{font-size:23px}.brand span{display:none}main{padding:18px 16px 30px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.card-brand{font-size:13px;margin-top:9px}#filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;margin-bottom:18px}#filters button{white-space:nowrap;padding:9px 13px}dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:10px}.player-bar{padding:0 12px;gap:9px;height:58px;flex-basis:58px}.player-bar h2{font-size:14px}}
