body{background-color:#fff}.search-container{position:relative;width:80%;display:flex;align-items:center}.search-input{width:100%;border-radius:99px;border:none;text-indent:24px;height:48px;font-size:18px}.search-input.border{outline:2px solid #00000020}.search-input:focus{outline:0;border-color:#6956f5;box-shadow:0 0 5px rgba(74,144,226,.5)}.search-button{position:absolute;right:2px;top:50%;transform:translateY(-50%);height:46px;border-radius:99px;width:120px;background-color:#6956f5;color:#fff;border:none;font-size:20px;font-weight:600;cursor:pointer}.sound-effect-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));padding:0}.sound-effect-item{border-radius:10px;background:var(--wp--preset--color--brand-5);padding:16px 0;border:1px solid var(--wp--preset--color--brand-5);box-sizing:border-box;overflow:hidden;transition:transform ease-in-out .2s}.sound-effect-item.white{background-color:#fff}.sound-effect-item>div{display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 16px}.sound-effect-item .name{font-size:16px;font-weight:600;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 8px 16px}.sound-effect-item>div.bottom{height:28px;margin-top:8px}.sound-effect-item .process-wave{height:56px;flex:1;flex-grow:1;align-self:center;justify-self:center;transform:translateX(-8px);transition:opacity ease-in-out .5s,transform ease-in-out .45s;margin-left:12px}.process-wave .waveform-png,.process-wave img.waveform{height:100%;width:100%}.process-wave .waveform-png{position:absolute;top:0}.sound-effect-item .play-button{display:flex;justify-content:center;align-items:center;background-color:#fff;border-radius:100px;width:40px;height:40px;cursor:pointer;margin-left:auto;transition:background-color ease-in-out .25s,box-shadow ease-in-out .25s,transform ease-in-out .25s;border:1px solid var(--wp--preset--color--gray-20)}.sound-effect-item .play-button:hover{background-color:#ffffffff;box-shadow:0 5px 8px rgba(0,0,0,.1);transform:translateY(-4px)}.sound-effect-item .play-button img{width:18px;height:18px}.sound-effect-item .play-button img.play{margin-left:3px}.sound-effect-item .time{font-size:12px}.sound-effect-item .icons{display:flex;gap:8px;margin-left:0;justify-content:flex-start;align-items:center}.sound-effect-item .icons a,.sound-effect-item .icons p{display:flex;gap:4px;align-items:center;justify-content:center;height:24px;font-size:14px}.sound-effect-item .icons a{padding:2px;border-radius:5px;width:28px;cursor:pointer}.sound-effect-item .icons a:hover{background-color:#00000010}.sound-effect-item .icons img{width:16px;height:16px}a.link-button{color:var(--wp--preset--color--brand-50);background-color:var(--wp--preset--color--gray-0);text-decoration:none;padding:16px 24px;border-radius:50px;font-weight:600}a.link-button:hover{background-color:var(--wp--preset--color--brand-40)}@media screen and (max-width:800px){#sound-effects,.sound-effect-list{max-width:100%}.sound-effect-item{flex-direction:column;justify-content:flex-start;align-items:flex-start}}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;max-width:100%!important;height:100%;overflow:auto;background-color:rgba(0,0,0,.3)}.modal-content{background-color:#fff;margin:12% auto;border:1px solid #888;width:100%;max-width:1200px;border-radius:20px;overflow:hidden}.close{color:#aaa;float:right;font-size:32px;font-weight:300;height:40px;width:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .35s ease-in-out,color .3s ease-in-out}.close:focus,.close:hover{color:#999;text-decoration:none;cursor:pointer;transform:scale(1.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header .effects-list{display:flex;flex-wrap:nowrap;overflow:hidden}.expand-button{background-color:transparent;border:none;padding:10px 15px;cursor:pointer;color:#6366f1;font-weight:700;border:1px solid var(--wp--preset--color--gray-20);border-radius:20px}.categories{display:grid;grid-template-columns:230px 1fr;gap:12px}.category-list{background-color:var(--wp--preset--color--gray-5);padding:30px 0 60px}.category-name{font-weight:700;font-size:14px;padding:12px 16px 12px 24px;cursor:pointer}.category-name:hover{color:#6366f1}.category-name.active{background:#fff;border-left:3px solid #6366f1;color:#6366f1}.effects-list-container{padding:40px 20px 30px}.effects-list{display:none;flex-wrap:wrap;align-items:flex-start;gap:12px;row-gap:16px}.effects-list.active{display:flex}.effect{font-size:14px;font-weight:500;padding:7px 16px;text-decoration:none;background-color:var(--wp--preset--color--gray-5);border:.5px solid var(--wp--preset--color--gray-20);border-radius:20px;transition:all .2s ease-in-out}.effect:hover{background-color:#6366f1;color:#fff;border-color:#6366f1}@media screen and (max-width:960px){.modal-content{max-width:95%}.categories{grid-template-columns:.5fr 1fr}.header{flex-direction:column}.header .effects-list{padding:16px 0;flex-wrap:wrap;width:100%}.effects-list-container{padding:16px 8px}}